feat(design-context): P3.1 surface + dedup strokes & effects

A/B testing surfaced a lost drop-shadow: get_design_context never
emitted strokes or effects (serializeFlatSync captured them, project()
dropped them). Surface strokes / strokeWeight / strokeAlign / effects,
and dedupe stroke paint arrays + effect arrays into globalVars
(`stroke` / `effect` refs); effect colors become hex, scalar
strokeWeight/align stay inline.

Verified live on card 15226:2448: the drop-shadow now resolves to
effect_…: [{DROP_SHADOW, color:#40, offset:{0,4}, radius:4}] —
i.e. box-shadow: 0 4px 4px rgba(0,0,0,.25).

Author: awdr74100

packages/plugin/src/handlers/get-design-context.ts

@@ -34,6 +34,10 @@ const project = (node: SceneNode, detail: DetailLevel): DesignContextNode => {
   if (flat.opacity !== undefined) out.opacity = flat.opacity;
   if (flat.cornerRadius !== undefined) out.cornerRadius = flat.cornerRadius;
   if (flat.fills !== undefined) out.fills = flat.fills;
+  if (flat.strokes !== undefined) out.strokes = flat.strokes;
+  if (flat.strokeWeight !== undefined) out.strokeWeight = flat.strokeWeight;
+  if (flat.strokeAlign !== undefined) out.strokeAlign = flat.strokeAlign;
+  if (flat.effects !== undefined) out.effects = flat.effects;
   if (flat.characters !== undefined) out.characters = flat.characters;
   if (flat.fontSize !== undefined) out.fontSize = flat.fontSize;
   if (flat.fontName !== undefined) out.fontName = flat.fontName;

packages/shared/src/design-context-dedupe.ts

@@ -4,7 +4,12 @@ import type {
   GetDesignContextResult,
   GlobalVars,
 } from './design-context.js';
-import type { SerializedColor, SerializedColorStop, SerializedPaint } from './serialized-node.js';
+import type {
+  SerializedColor,
+  SerializedColorStop,
+  SerializedEffect,
+  SerializedPaint,
+} from './serialized-node.js';
 
 /** JSON with sorted object keys, so equal-but-differently-ordered values hash identically. */
 const stableStringify = (value: unknown): string =>
@@ -64,6 +69,26 @@ const simplifyPaint = (paint: SerializedPaint): SimplifiedPaint => {
   return out;
 };
 
+interface SimplifiedEffect {
+  type: string;
+  color?: string;
+  offset?: { x: number; y: number };
+  radius?: number;
+  spread?: number;
+  visible?: false;
+}
+
+/** Structured shadow/blur: color → hex, drops the always-true `visible`. */
+const simplifyEffect = (e: SerializedEffect): SimplifiedEffect => {
+  const out: SimplifiedEffect = { type: e.type };
+  if (e.color !== undefined) out.color = toHex(e.color, e.color.a);
+  if (e.offset !== undefined) out.offset = e.offset;
+  if (e.radius !== undefined) out.radius = e.radius;
+  if (e.spread !== undefined) out.spread = e.spread;
+  if (e.visible === false) out.visible = false;
+  return out;
+};
+
 interface TextStyleBundle {
   fontFamily: string;
   fontStyle: string;
@@ -103,6 +128,16 @@ export const dedupeStyles = (
       delete out.fills;
     }
 
+    if (Array.isArray(n.strokes) && n.strokes.length > 0) {
+      out.stroke = register(n.strokes.map(simplifyPaint), 'stroke');
+      delete out.strokes;
+    }
+
+    if (Array.isArray(n.effects) && n.effects.length > 0) {
+      out.effect = register(n.effects.map(simplifyEffect), 'effect');
+      delete out.effects;
+    }
+
     if (
       typeof n.fontSize === 'number' &&
       n.fontName !== undefined &&

packages/shared/src/design-context.ts

@@ -3,14 +3,17 @@ import * as v from 'valibot';
 import {
   MIXED,
   SerializedComponentPropertySchema,
+  SerializedEffectSchema,
   SerializedFontNameSchema,
   SerializedMainComponentSchema,
   SerializedPaintSchema,
   SerializedStyleIdsSchema,
 } from './serialized-node.js';
 import type {
   SerializedComponentProperty,
+  SerializedEffect,
   SerializedMainComponent,
+  SerializedPaint,
   SerializedStyleIds,
 } from './serialized-node.js';
 
@@ -44,6 +47,10 @@ export interface DesignContextNode {
   opacity?: number;
   cornerRadius?: number | typeof MIXED;
   fills?: readonly v.InferOutput<typeof SerializedPaintSchema>[] | typeof MIXED;
+  strokes?: readonly SerializedPaint[];
+  strokeWeight?: number | typeof MIXED;
+  strokeAlign?: string;
+  effects?: readonly SerializedEffect[];
   characters?: string;
   fontSize?: number | typeof MIXED;
   fontName?: v.InferOutput<typeof SerializedFontNameSchema> | typeof MIXED;
@@ -53,11 +60,14 @@ export interface DesignContextNode {
   mainComponent?: SerializedMainComponent;
   mainComponentId?: string;
   /**
-   * globalVars refs (P3): when style dedup runs (full detail), the inline `fills` / `fontSize` +
-   * `fontName` are replaced by these refs into `globalVars.styles` — a style shared by N nodes
-   * costs one entry + N refs. `fill` points at a paint array, `textStyle` at a typography bundle.
+   * globalVars refs (P3): when style dedup runs (full detail), inline `fills` / `strokes` /
+   * `effects` / (`fontSize` + `fontName`) are replaced by these refs into `globalVars.styles` —
+   * a style shared by N nodes costs one entry + N refs. `fill` / `stroke` point at paint arrays,
+   * `effect` at a shadow/blur array, `textStyle` at a typography bundle.
    */
   fill?: string;
+  stroke?: string;
+  effect?: string;
   textStyle?: string;
   deduped?: boolean;
   truncated?: boolean;
@@ -78,6 +88,10 @@ export const DesignContextNodeSchema: v.GenericSchema<DesignContextNode> = v.laz
     opacity: v.exactOptional(v.number()),
     cornerRadius: v.exactOptional(v.union([v.number(), v.literal(MIXED)])),
     fills: v.exactOptional(v.union([v.array(SerializedPaintSchema), v.literal(MIXED)])),
+    strokes: v.exactOptional(v.array(SerializedPaintSchema)),
+    strokeWeight: v.exactOptional(v.union([v.number(), v.literal(MIXED)])),
+    strokeAlign: v.exactOptional(v.string()),
+    effects: v.exactOptional(v.array(SerializedEffectSchema)),
     characters: v.exactOptional(v.string()),
     fontSize: v.exactOptional(v.union([v.number(), v.literal(MIXED)])),
     fontName: v.exactOptional(v.union([SerializedFontNameSchema, v.literal(MIXED)])),
@@ -87,6 +101,8 @@ export const DesignContextNodeSchema: v.GenericSchema<DesignContextNode> = v.laz
     mainComponent: v.exactOptional(SerializedMainComponentSchema),
     mainComponentId: v.exactOptional(v.string()),
     fill: v.exactOptional(v.string()),
+    stroke: v.exactOptional(v.string()),
+    effect: v.exactOptional(v.string()),
     textStyle: v.exactOptional(v.string()),
     deduped: v.exactOptional(v.boolean()),
     truncated: v.exactOptional(v.boolean()),

packages/shared/test/design-context-dedupe.test.ts

@@ -41,6 +41,35 @@ describe('dedupeStyles', () => {
     expect(globalVars.styles[nodes[0]!.fill!]).toEqual([{ type: 'SOLID', color: '#FFFFFF80' }]);
   });
 
+  it('hoists effects (drop-shadow) and strokes into refs, converting colors to hex', () => {
+    const n: DesignContextNode = {
+      id: 'card',
+      name: 'card',
+      type: 'FRAME',
+      strokes: [solid(0.9, 0.9, 0.9)],
+      strokeWeight: 1,
+      effects: [
+        {
+          type: 'DROP_SHADOW',
+          visible: true,
+          radius: 8,
+          spread: 0,
+          offset: { x: 0, y: 2 },
+          color: { r: 0, g: 0, b: 0, a: 0.25 },
+        },
+      ],
+    };
+    const { nodes, globalVars } = dedupeStyles([n]);
+
+    expect(nodes[0]?.strokes).toBeUndefined();
+    expect(nodes[0]?.effects).toBeUndefined();
+    expect(nodes[0]?.strokeWeight).toBe(1); // scalar stays inline
+    expect(globalVars.styles[nodes[0]!.stroke!]).toEqual([{ type: 'SOLID', color: '#E6E6E6' }]);
+    expect(globalVars.styles[nodes[0]!.effect!]).toEqual([
+      { type: 'DROP_SHADOW', color: '#00000040', offset: { x: 0, y: 2 }, radius: 8, spread: 0 },
+    ]);
+  });
+
   it('deduplicates identical styles to one entry shared by many refs (the 100-buttons case)', () => {
     const items = ['m1', 'm2', 'm3', 'm4', 'm5', 'm6'].map(id =>
       textNode(id, 'Noto Sans JP', 'Regular', 16),