@discourser/design-system 0.24.0 → 0.25.1

package/docs/figma-mcp-return/radio-group-audit.json

@@ -0,0 +1,23 @@
+{
+  "auditTarget": "958:1900",
+  "componentSetName": "RadioGroup.Item",
+  "totalComponents": 72,
+  "totalUnboundNodes": 0,
+  "flagged": [],
+  "variantAxes": {
+    "Color": ["Primary", "Secondary", "Tertiary"],
+    "Stop": ["40", "50", "60", "70"],
+    "Variant": ["Solid"],
+    "Size": ["Sm", "Md", "Lg"],
+    "Checked": ["False", "True"]
+  },
+  "gridLayout": "24 cols × 3 rows (one row per Color, columns = Stop × Size × Checked)",
+  "notes": "All fills, strokes, and text bindings are bound to DDS variables. Zero hardcoded values.",
+  "variableBindings": {
+    "itemControl.fill.checked": "Primitives {color}/{stop} (bound per Color+Stop variant)",
+    "itemControl.stroke.unchecked": "Semantic outline/variant",
+    "indicator.fill": "Primitives neutral/100 (white)",
+    "itemText.fill": "Semantic onSurface"
+  },
+  "replacedNode": "944:1858"
+}

package/docs/figma-mcp-return/switch-audit.json

@@ -0,0 +1,38 @@
+{
+  "auditTarget": "959:2032",
+  "componentSetName": "Switch",
+  "totalComponents": 96,
+  "totalUnboundNodes": 48,
+  "variantAxes": {
+    "Color": ["Primary", "Secondary", "Tertiary"],
+    "Stop": ["40", "50", "60", "70"],
+    "Variant": ["Solid"],
+    "Size": ["Xs", "Sm", "Md", "Lg"],
+    "Toggled": ["False", "True"]
+  },
+  "gridLayout": "32 cols × 3 rows (one row per Color, columns = Stop × Size × Toggled)",
+  "summary": {
+    "control [fill] — off-state alpha slot": 48
+  },
+  "notes": "48 unbound nodes are ALL expected: the off-state (Toggled=False) track fills are alpha-composited from the variable's resolved value at runtime (1 + (raw - 1) * 0.19). This is the ONLY fill category in the system that lacks boundVariables. 3 colors × 4 stops × 4 sizes = 48 off-state instances.",
+  "expectedHardcodedFills": {
+    "primary/40 off":   "#dbe2cf (computed from #3f6900 at 19% over white)",
+    "primary/50 off":   "#dee8cf (computed from #518500 at 19%)",
+    "primary/60 off":   "#e2edcf (computed from #64a104 at 19%)",
+    "primary/70 off":   "#e6f2d7 (computed from #7dbd2a at 19%)",
+    "secondary/40 off": "#dfe2db (computed from #54643f at 19%)",
+    "secondary/50 off": "#e3e6df (computed from #6c7d56 at 19%)",
+    "secondary/60 off": "#e8ebe3 (computed from #85976e at 19%)",
+    "secondary/70 off": "#edf0e8 (computed from #a0b187 at 19%)",
+    "tertiary/40 off":  "#cfe3e2 (computed from #046a66 at 19%)",
+    "tertiary/50 off":  "#d8e7e7 (computed from #30837f at 19%)",
+    "tertiary/60 off":  "#ddeceb (computed from #4d9d98 at 19%)",
+    "tertiary/70 off":  "#e2f2f1 (computed from #69b8b3 at 19%)"
+  },
+  "variableBindings": {
+    "control.fill.on": "Primitives {color}/{stop} (bound per Color+Stop variant)",
+    "thumb.fill": "Primitives neutral/100 (white)",
+    "label.fill": "Semantic onSurface"
+  },
+  "replacedNode": "946:1808"
+}

package/docs/session-summary-2026-03-29.md

@@ -0,0 +1,98 @@
+# Session Summary — March 29, 2026
+# For next session pickup
+
+---
+
+## What was accomplished this session
+
+### 1. figma-codex.json completed — 35 components
+- Badge.figma.tsx and Card.figma.tsx created with placeholder node-id=0-0
+  (no Figma master components exist for these primitives)
+- `pnpm codex:generate` run, verified 35 components
+- StudioControls nodeId fixed from stale 867:1784 → correct 38:8232
+- Accordion intentionally shares 38:8232 (it's a primitive consumed inside composites)
+
+### 2. Variable rebinding on Conversation Prelaunch page (66:2739)
+Two rebind passes executed via `use_figma` scripts:
+
+**Pass 1 — Old @discourser/design-system library (103:xxxx)**
+- 15 variables, 32 bindings → all rebound to local Primitives/Semantic
+- Mapping: surfacecontainerhigh → surface/container/high, neutral/90 → neutral/90, etc.
+- Zero 103:xxxx bindings remain
+
+**Pass 2 — Mode collection shadcn-named colors**
+- 9 variables, 72 bindings → all rebound to DDS Semantic
+- Mapping:
+  - foreground → onSurface
+  - muted-foreground → onSurface/variant
+  - primary-foreground → onPrimary
+  - border → outline/variant
+  - custom/bg-input-30 → surface/container
+  - muted → surface/container/high
+  - shadow/2xs, shadow/md, shadow/xs → shadow
+- Zero Mode color bindings remain
+
+### 3. Design context re-pulled and Kai simulation completed
+- Post-rebind get_design_context saved to:
+  docs/figma-mcp-return/prelaunch-post-rebind-design-context.md
+- Kai resolution simulation saved to:
+  docs/figma-mcp-return/kai-resolution-simulation.md
+- Estimated Kai fidelity: ~70% clean resolution
+
+### 4. Remaining external bindings audited
+- 653 numeric bindings from Park UI Theme/Spacing/Primitives collections
+- These are spacing (p-0, p-2, p-4), radius (rounded-full), shadow dimensions,
+  font sizes, border widths — all resolve to correct pixel values
+- NOT rebound this session — they don't affect semantic meaning
+
+---
+
+## What's NOT done — next session priorities
+
+### HIGH — Would move Kai fidelity from ~70% to ~85%
+1. Create Figma variables for Accent palette (#b8a9c9, #cfc4db, #6b5a7d)
+   and Primary/500 (#c5d24d) — currently hardcoded Figma paint styles
+2. Rebind #363636 and #2e2e2e text nodes to onSurface or onSurface/variant
+3. Add missing hex values to Kai's figma-token-resolution.md lookup table
+
+### MEDIUM — Would move to ~90%
+4. Resolve Inter vs Poppins typography mismatch in Figma
+5. Replace #e5e7eb border on RightControlPanel with outline/variant
+6. Explore `add_code_connect_map` to get MCP to return DDS imports
+
+### Still pending from earlier sessions
+7. Will's corrections to Claude's workflow model
+8. Notion documentation of session findings
+9. Extend Figma variables for elevation, typography, spacing, border radius
+10. Fix figma-codex parsing bug (multi-line function prop truncation on NavigationMenu)
+
+---
+
+## Key files created/modified this session
+
+DDS repo:
+- src/components/Badge.figma.tsx — NEW
+- src/components/Card.figma.tsx — NEW
+- src/components/Accordion.figma.tsx — reverted (unchanged from start)
+- dist/figma-codex.json — REGENERATED (35 components)
+- docs/figma-mcp-return/prelaunch-post-rebind-design-context.md — NEW
+- docs/figma-mcp-return/prelaunch-get-design-context.md — NEW (pre-rebind)
+- docs/figma-mcp-return/prelaunch-get-metadata.md — NEW
+- docs/figma-mcp-return/prelaunch-get-metadata.xml — NEW
+- docs/figma-mcp-return/prelaunch-comparison-analysis.md — NEW
+- docs/figma-mcp-return/kai-resolution-simulation.md — NEW
+
+Figma file (GaHmFfmvO4loUzuZS4TgEz):
+- Node 66:2739 — all color variable bindings rebound to local collections
+
+---
+
+## Key file paths (unchanged)
+
+DDS repo: /Users/willstreeter/WebstormProjects/vibe-coding/shifu-project/Discourser-Design-System/
+Discourser.ai repo: /Users/willstreeter/WebstormProjects/vibe-coding/shifu-project/discourser.ai/
+Figma file key: GaHmFfmvO4loUzuZS4TgEz
+Conversation Prelaunch node: 66:2739
+figma-codex.json: dist/figma-codex.json
+Kai token resolution: discourser.ai/_bmad/bmm/kai/knowledge/figma-token-resolution.md
+Notion parent page: 3304d6019b4281969dafca1c03d29656

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@discourser/design-system",
-  "version": "0.24.0",
+  "version": "0.25.1",
   "description": "Aesthetic-agnostic design system with Panda CSS and Ark UI",
   "type": "module",
   "publishConfig": {
@@ -213,6 +213,7 @@
     "verify:build": "pnpm build",
     "codex:generate": "tsx src/figma-codex/generate.ts",
     "codex:watch": "tsx --watch src/figma-codex/generate.ts",
+    "scaffold:figma-connect": "tsx scripts/scaffold-figma-connect.ts",
     "figma:connect": "figma connect publish",
     "figma:connect:dry": "figma connect publish --dry-run",
     "figma:export": "tsx scripts/export-figma-tokens.ts",

package/src/components/Badge.figma.tsx

@@ -0,0 +1,39 @@
+/**
+ * @dds-tokens
+ * recipe: badge
+ * variantProps: variant, size, colorPalette
+ * figmaPropToRecipeProp:
+ *   Variant: variant
+ *   Size: size
+ *   Color: colorPalette
+ */
+import figma from '@figma/code-connect';
+import { Badge } from './Badge';
+
+figma.connect(
+  Badge,
+  'https://www.figma.com/design/GaHmFfmvO4loUzuZS4TgEz/Discourser.AI--V1?node-id=930-1972',
+  {
+    props: {
+      variant: figma.enum('Variant', {
+        Solid: 'solid',
+        Surface: 'surface',
+        Subtle: 'subtle',
+        Outline: 'outline',
+        Rating: 'rating',
+      }),
+      colorPalette: figma.enum('Color', {
+        Primary: 'primary',
+        Secondary: 'secondary',
+        Tertiary: 'tertiary',
+        Neutral: 'neutral',
+        Error: 'error',
+      }),
+    },
+    example: ({ variant, colorPalette }) => (
+      <Badge variant={variant} colorPalette={colorPalette}>
+        Label
+      </Badge>
+    ),
+  },
+);

package/src/components/Button.figma.tsx

@@ -0,0 +1,18 @@
+import figma from '@figma/code-connect';
+import { Button } from './Button';
+
+figma.connect(
+  Button,
+  'https://www.figma.com/design/GaHmFfmvO4loUzuZS4TgEz/Discourser.AI--V1?node-id=38-7993',
+  {
+    props: {
+      variant: figma.enum('Type', {
+        Default: 'solid',
+        Secondary: 'outline',
+        Tertiary: 'plain',
+        Neutral: 'surface',
+      }),
+    },
+    example: ({ variant }) => <Button variant={variant}>Label</Button>,
+  },
+);

package/src/components/Card.figma.tsx

@@ -0,0 +1,33 @@
+/**
+ * @dds-tokens
+ * recipe: card
+ * variantProps: variant
+ * figmaPropToRecipeProp:
+ *   Variant: variant
+ */
+import figma from '@figma/code-connect';
+import * as Card from './Card';
+
+figma.connect(
+  Card.Root,
+  'https://www.figma.com/design/GaHmFfmvO4loUzuZS4TgEz/Discourser.AI--V1?node-id=950-1681',
+  {
+    props: {
+      variant: figma.enum('Variant', {
+        Elevated: 'elevated',
+        Outline: 'outline',
+        Subtle: 'subtle',
+      }),
+    },
+    example: ({ variant }) => (
+      <Card.Root variant={variant}>
+        <Card.Header>
+          <Card.Title>Card Title</Card.Title>
+          <Card.Description>Card description</Card.Description>
+        </Card.Header>
+        <Card.Body>Content goes here</Card.Body>
+        <Card.Footer>{/* Footer actions */}</Card.Footer>
+      </Card.Root>
+    ),
+  },
+);

package/src/components/Icons/AudienceIcon.tsx

@@ -8,8 +8,10 @@ export type AudienceIconProps = ComponentProps<typeof StyledSvg>;
 
 export const AudienceIcon = (props: AudienceIconProps) => (
   <StyledSvg
-    viewBox="0 0 40 44"
+    viewBox="3.5 9.5 29 25"
     fill="currentColor"
+    stroke="currentColor"
+    strokeWidth="0.5"
     xmlns="http://www.w3.org/2000/svg"
     width="1em"
     height="1em"

package/src/components/Icons/AudioSpeakerIcon.tsx

@@ -8,7 +8,7 @@ export type AudioSpeakerIconProps = ComponentProps<typeof StyledSvg>;
 
 export const AudioSpeakerIcon = (props: AudioSpeakerIconProps) => (
   <StyledSvg
-    viewBox="0 0 40 28"
+    viewBox="-10 -3 50 34"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
     width="1em"

package/src/components/Icons/MicrophoneIcon.tsx

@@ -18,21 +18,21 @@ export const MicrophoneIcon = (props: MicrophoneIconProps) => (
     <path
       d="M20 35.6665V40.6665"
       stroke="currentColor"
-      strokeWidth="2"
+      strokeWidth="3"
       strokeLinecap="round"
       strokeLinejoin="round"
     />
     <path
       d="M31.6666 20.6665V23.9998C31.6666 27.094 30.4374 30.0615 28.2495 32.2494C26.0616 34.4373 23.0941 35.6665 19.9999 35.6665C16.9057 35.6665 13.9383 34.4373 11.7503 32.2494C9.56242 30.0615 8.33325 27.094 8.33325 23.9998V20.6665"
       stroke="currentColor"
-      strokeWidth="2"
+      strokeWidth="3"
       strokeLinecap="round"
       strokeLinejoin="round"
     />
     <path
       d="M25 12.3335C25 9.57207 22.7614 7.3335 20 7.3335C17.2386 7.3335 15 9.57207 15 12.3335V24.0002C15 26.7616 17.2386 29.0002 20 29.0002C22.7614 29.0002 25 26.7616 25 24.0002V12.3335Z"
       stroke="currentColor"
-      strokeWidth="2"
+      strokeWidth="3"
       strokeLinecap="round"
       strokeLinejoin="round"
     />

package/src/components/Icons/RecordIcon.tsx

@@ -18,23 +18,23 @@ export const RecordIcon = (props: RecordIconProps) => (
     <path
       d="M27.0624 19.4998C27.0624 21.5134 25.4301 23.1457 23.4166 23.1457C21.4031 23.1457 19.7708 21.5134 19.7708 19.4998C19.7708 17.4863 21.4031 15.854 23.4166 15.854C25.4301 15.854 27.0624 17.4863 27.0624 19.4998Z"
       stroke="currentColor"
-      strokeWidth="2"
+      strokeWidth="3"
     />
     <path
       d="M15.3959 19.4998C15.3959 21.5134 13.7636 23.1457 11.7501 23.1457C9.73655 23.1457 8.10425 21.5134 8.10425 19.4998C8.10425 17.4863 9.73655 15.854 11.7501 15.854C13.7636 15.854 15.3959 17.4863 15.3959 19.4998Z"
       stroke="currentColor"
-      strokeWidth="2"
+      strokeWidth="3"
     />
     <path
       d="M11.75 23.1455H23.4167"
       stroke="currentColor"
-      strokeWidth="2"
+      strokeWidth="3"
       strokeLinecap="round"
     />
     <path
       d="M32.1667 19.4998C32.1667 26.3744 32.1667 29.8119 30.0309 31.9474C27.8954 34.0832 24.4579 34.0832 17.5833 34.0832C10.7087 34.0832 7.27136 34.0832 5.13569 31.9474C3 29.8119 3 26.3744 3 19.4998C3 12.6252 3 9.18786 5.13569 7.05219C7.27136 4.9165 10.7087 4.9165 17.5833 4.9165C24.4579 4.9165 27.8954 4.9165 30.0309 7.05219C31.4511 8.47223 31.9269 10.4677 32.0863 13.6665"
       stroke="currentColor"
-      strokeWidth="2"
+      strokeWidth="3"
       strokeLinecap="round"
     />
   </StyledSvg>

package/src/components/Icons/TimerIcon.tsx

@@ -18,7 +18,7 @@ export const TimerIcon = (props: TimerIconProps) => (
     <path
       d="M6.27333 12C4.83741 14.1451 4 16.7248 4 19.5C4 26.9559 10.0442 33 17.5 33C24.9559 33 31 26.9559 31 19.5C31 12.0442 24.9559 6 17.5 6V10.5M17.5 19.5L11.5 13.5"
       stroke="currentColor"
-      strokeWidth="2"
+      strokeWidth="3"
       strokeLinecap="round"
       strokeLinejoin="round"
     />

package/src/components/Input.figma.tsx

@@ -0,0 +1,17 @@
+import figma from '@figma/code-connect';
+import { Input } from './Input';
+
+figma.connect(
+  Input,
+  'https://www.figma.com/design/GaHmFfmvO4loUzuZS4TgEz/Discourser.AI--V1?node-id=38-8909',
+  {
+    props: {
+      type: figma.enum('Type', {
+        Text: 'text',
+        File: 'file',
+        Password: 'password',
+      }),
+    },
+    example: ({ type }) => <Input type={type} placeholder="Enter value" />,
+  },
+);

package/src/components/RadioGroup.figma.tsx

@@ -0,0 +1,61 @@
+/**
+ * @dds-tokens
+ * recipe: radioGroup
+ * variantProps: variant, size
+ * figmaPropToRecipeProp:
+ *   Checked: checked
+ *   State: state
+ */
+import figma from '@figma/code-connect';
+import * as RadioGroup from './RadioGroup';
+
+// Original designer-built component — .Radio Group Radio Toggle (38:8893)
+// Variants: Checked(False/True) × State(Default/Focus/Disabled)
+// This is the component used in production Discourser.AI page designs.
+//
+// Anatomy:
+//   <RadioGroup.Root value={string} onValueChange={fn}>
+//     <RadioGroup.Item value="x">
+//       <RadioGroup.ItemControl />
+//       <RadioGroup.ItemText>Label</RadioGroup.ItemText>
+//     </RadioGroup.Item>
+//   </RadioGroup.Root>
+//
+// Key props on Root:
+//   value         — controlled selected value (string)
+//   defaultValue  — uncontrolled initial value (string)
+//   onValueChange — callback ({ value }: { value: string }) => void
+//   disabled      — boolean, disables all items
+//   orientation   — 'horizontal' | 'vertical' (default: 'vertical')
+//
+// Key props on Item:
+//   value         — required unique string for this option
+//   disabled      — boolean, disables this item only
+figma.connect(
+  RadioGroup.Root,
+  'https://www.figma.com/design/GaHmFfmvO4loUzuZS4TgEz/Discourser.AI--V1?node-id=38-8893',
+  {
+    props: {
+      checked: figma.enum('Checked', {
+        False: false,
+        True: true,
+      }),
+    },
+    example: ({ checked: _checked }) => (
+      <RadioGroup.Root defaultValue="option-1">
+        <RadioGroup.Item value="option-1">
+          <RadioGroup.ItemControl />
+          <RadioGroup.ItemText>Option 1</RadioGroup.ItemText>
+        </RadioGroup.Item>
+        <RadioGroup.Item value="option-2">
+          <RadioGroup.ItemControl />
+          <RadioGroup.ItemText>Option 2</RadioGroup.ItemText>
+        </RadioGroup.Item>
+        <RadioGroup.Item value="option-3">
+          <RadioGroup.ItemControl />
+          <RadioGroup.ItemText>Option 3</RadioGroup.ItemText>
+        </RadioGroup.Item>
+      </RadioGroup.Root>
+    ),
+  },
+);

package/src/components/SettingsPopover/SettingsPopover.figma.tsx

@@ -0,0 +1,17 @@
+import figma from '@figma/code-connect';
+import { SettingsPopover } from './SettingsPopover';
+
+figma.connect(
+  SettingsPopover,
+  'https://www.figma.com/design/GaHmFfmvO4loUzuZS4TgEz/Discourser.AI--V1?node-id=810-5398',
+  {
+    example: () => (
+      <SettingsPopover
+        userName={'value'}
+        userTier={'value'}
+        userEmail={'value'}
+        actions={[]}
+      />
+    ),
+  },
+);

package/src/components/Slider.figma.tsx

@@ -0,0 +1,66 @@
+/**
+ * @dds-tokens
+ * recipe: slider
+ * variantProps: orientation, size, variant
+ * figmaPropToRecipeProp:
+ *   Orientation: orientation
+ *   Size: size
+ */
+import figma from '@figma/code-connect';
+import * as Slider from './Slider';
+
+// Original designer-built component — Discourser AI Slider (38:7988)
+// This is the component used in production Discourser.AI page designs.
+//
+// Import as namespace: import * as Slider from '@discourser/design-system/Slider'
+//
+// Anatomy:
+//   <Slider.Root defaultValue={[number]} min={number} max={number} step={number}>
+//     <Slider.Label>Label text</Slider.Label>
+//     <Slider.Control>
+//       <Slider.Track>
+//         <Slider.Range />
+//       </Slider.Track>
+//       <Slider.Thumbs />     ← convenience component, renders one Thumb per value
+//     </Slider.Control>
+//     <Slider.ValueText />    ← optional, displays current value
+//   </Slider.Root>
+//
+// Key props on Root:
+//   defaultValue  — uncontrolled initial value array, e.g. [50]
+//   value         — controlled value array, e.g. [50]
+//   onValueChange — callback ({ value }: { value: number[] }) => void
+//   min           — number (default: 0)
+//   max           — number (default: 100)
+//   step          — number (default: 1)
+//   orientation   — 'horizontal' | 'vertical' (default: 'horizontal')
+//   disabled      — boolean
+//   colorPalette  — 'primary' | 'secondary' | 'tertiary' | 'neutral' | 'error'
+//
+// Convenience components:
+//   <Slider.Thumbs />    — renders one Thumb per value entry (use instead of
+//                          manually mapping Slider.Thumb with index props)
+//   <Slider.Marks marks={[0, 25, 50, 75, 100]} /> — renders a MarkerGroup
+figma.connect(
+  Slider.Root,
+  'https://www.figma.com/design/GaHmFfmvO4loUzuZS4TgEz/Discourser.AI--V1?node-id=38-7988',
+  {
+    props: {
+      orientation: figma.enum('Orientation', {
+        Horizontal: 'horizontal',
+        Vertical: 'vertical',
+      }),
+    },
+    example: ({ orientation }) => (
+      <Slider.Root defaultValue={[50]} orientation={orientation}>
+        <Slider.Label>Volume</Slider.Label>
+        <Slider.Control>
+          <Slider.Track>
+            <Slider.Range />
+          </Slider.Track>
+          <Slider.Thumbs />
+        </Slider.Control>
+      </Slider.Root>
+    ),
+  },
+);

package/src/components/Stepper/Stepper.figma.tsx

@@ -0,0 +1,19 @@
+import figma from '@figma/code-connect';
+import { Stepper } from './Stepper';
+
+figma.connect(
+  Stepper,
+  'https://www.figma.com/design/GaHmFfmvO4loUzuZS4TgEz/Discourser.AI--V1?node-id=38-8520',
+  {
+    example: () => (
+      <Stepper
+        steps={[
+          { value: 'step1', title: 'Step 1' },
+          { value: 'step2', title: 'Step 2' },
+          { value: 'step3', title: 'Step 3' },
+        ]}
+        defaultStep={0}
+      />
+    ),
+  },
+);

package/src/components/StudioControls/StudioControls.figma.tsx

@@ -0,0 +1,25 @@
+import figma from '@figma/code-connect';
+import { StudioControls } from './index';
+
+figma.connect(
+  StudioControls,
+  'https://www.figma.com/design/GaHmFfmvO4loUzuZS4TgEz/Discourser.AI--V1?node-id=38-8232',
+  {
+    props: {
+      scenarioName: figma.string('Scenario Name'),
+      scenarioFocus: figma.string('Scenario Focus'),
+      scenarioLevel: figma.enum('Level', {
+        Beginner: 'beginner',
+        Intermediate: 'intermediate',
+        Advanced: 'advanced',
+      }),
+    },
+    example: ({ scenarioName, scenarioFocus, scenarioLevel }) => (
+      <StudioControls
+        scenarioName={scenarioName}
+        scenarioFocus={scenarioFocus}
+        scenarioLevel={scenarioLevel}
+      />
+    ),
+  },
+);