@discourser/design-system 0.24.0 → 0.25.1

package/src/components/StudioControls/StudioControls.tsx

@@ -0,0 +1,381 @@
+'use client';
+
+import { useState } from 'react';
+import * as Accordion from '../Accordion';
+import * as RadioGroup from '../RadioGroup';
+import * as Switch from '../Switch';
+import * as Slider from '../Slider';
+import { ScenarioIcon } from '../Icons/ScenarioIcon';
+import { AudioSpeakerIcon } from '../Icons/AudioSpeakerIcon';
+import { MicrophoneIcon } from '../Icons/MicrophoneIcon';
+import { RecordIcon } from '../Icons/RecordIcon';
+import { TimerIcon } from '../Icons/TimerIcon';
+import { AudienceIcon } from '../Icons/AudienceIcon';
+import { studioControls } from 'styled-system/recipes';
+import { Badge } from '../Badge';
+import type { StudioControlsProps, RecordingMode } from './types';
+
+// ── Static section data ────────────────────────────────────────────────────────
+
+const SETTING_BADGES = [
+  { id: 'conversation-flow', label: 'Conversation Flow' },
+  { id: 'question-complexity', label: 'Question Complexity' },
+  { id: 'response-pacing', label: 'Response Pacing' },
+  { id: 'interview-tone', label: 'Interview Tone' },
+] as const;
+
+const RECORDING_OPTIONS = [
+  { value: 'no-recording', label: 'No Recording' },
+  { value: 'audio-only', label: 'Record just audio' },
+  { value: 'video-audio', label: 'Record video & audio' },
+] as const;
+
+const LEVEL_COLOR_PALETTE = {
+  beginner: 'primary',
+  intermediate: 'secondary',
+  advanced: 'tertiary',
+} as const;
+
+const ALL_SECTION_IDS = [
+  'scenario-settings',
+  'audio-output',
+  'mic-input',
+  'av-recording',
+  'display-timer',
+  'hide-interviewers',
+];
+
+// ── Component ─────────────────────────────────────────────────────────────────
+
+export function StudioControls({
+  scenarioName,
+  scenarioFocus,
+  scenarioLevel,
+  defaultAudioLevel = 75,
+  defaultMicLevel = 75,
+  defaultRecordingMode = 'no-recording',
+  defaultShowTimer = true,
+  defaultHideInterviewers = false,
+  onAudioLevelChange,
+  onMicLevelChange,
+  onRecordingModeChange,
+  onTimerChange,
+  onInterviewersChange,
+}: StudioControlsProps) {
+  const styles = studioControls();
+
+  const [audioLevel, setAudioLevel] = useState(defaultAudioLevel);
+  const [micLevel, setMicLevel] = useState(defaultMicLevel);
+
+  const levelLabel =
+    scenarioLevel.charAt(0).toUpperCase() + scenarioLevel.slice(1);
+
+  return (
+    <div className={styles.root}>
+      <Accordion.Root defaultValue={ALL_SECTION_IDS} multiple variant="plain">
+        {/* ── Section 1: Scenario Settings ─────────────────────────────────── */}
+        <Accordion.Item value="scenario-settings" className={styles.section}>
+          <Accordion.ItemTrigger
+            className={styles.sectionTrigger}
+            css={{
+              fontSize: 'lg',
+              fontWeight: 'medium',
+              borderRadius: '0',
+              py: '4',
+              bg: 'neutral.1',
+              color: 'onSurface',
+            }}
+          >
+            <span className={styles.triggerIcon}>
+              <ScenarioIcon />
+            </span>
+            <span className={styles.triggerLabel}>Scenario Settings</span>
+            <Accordion.ItemIndicator
+              className={styles.sectionIndicator}
+              css={{ color: 'primary.7' }}
+            />
+          </Accordion.ItemTrigger>
+
+          <Accordion.ItemContent className={styles.sectionContent}>
+            <div className={styles.infoPanel}>
+              <div className={styles.scenarioMeta}>
+                <p className={styles.scenarioName}>{scenarioName}</p>
+                <p className={styles.scenarioFocus}>
+                  <strong>Focus</strong>: {scenarioFocus}
+                </p>
+              </div>
+              <div className={styles.settingsCard}>
+                <p className={styles.settingsCardHeading}>Scenario Settings</p>
+                <div className={styles.settingsList}>
+                  {SETTING_BADGES.map((badge) => (
+                    <div key={badge.id} className={styles.settingsRow}>
+                      <span className={styles.settingsRowLabel}>
+                        {badge.label}:
+                      </span>
+                      <Badge
+                        variant="rating"
+                        colorPalette={LEVEL_COLOR_PALETTE[scenarioLevel]}
+                        size="md"
+                      >
+                        {levelLabel}
+                      </Badge>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </Accordion.ItemContent>
+        </Accordion.Item>
+
+        {/* ── Section 2: Audio Output ──────────────────────────────────────── */}
+        <Accordion.Item value="audio-output" className={styles.section}>
+          <Accordion.ItemTrigger
+            className={styles.sectionTrigger}
+            css={{
+              fontSize: 'lg',
+              fontWeight: 'medium',
+              borderRadius: '0',
+              py: '4',
+              bg: 'neutral.1',
+              color: 'onSurface',
+            }}
+          >
+            <span className={styles.triggerIcon}>
+              <AudioSpeakerIcon />
+            </span>
+            <span className={styles.triggerLabel}>Audio Output</span>
+            <Accordion.ItemIndicator
+              className={styles.sectionIndicator}
+              css={{ color: 'primary.7' }}
+            />
+          </Accordion.ItemTrigger>
+
+          <Accordion.ItemContent className={styles.sectionContent}>
+            <div className={styles.sliderPanel}>
+              <div className={styles.sliderLabel}>
+                <span className={styles.sliderLabelText}>Volume</span>
+                <span className={styles.levelBadge}>{audioLevel}%</span>
+              </div>
+              <Slider.Root
+                min={0}
+                max={100}
+                value={[audioLevel]}
+                colorPalette="tertiary"
+                onValueChange={({ value }) => {
+                  const next = value[0] ?? audioLevel;
+                  setAudioLevel(next);
+                  onAudioLevelChange?.(next);
+                }}
+              >
+                <Slider.Control className={styles.sliderTrack}>
+                  <Slider.Track>
+                    <Slider.Range />
+                  </Slider.Track>
+                  <Slider.Thumbs />
+                </Slider.Control>
+              </Slider.Root>
+            </div>
+          </Accordion.ItemContent>
+        </Accordion.Item>
+
+        {/* ── Section 3: Microphone Output ─────────────────────────────────── */}
+        <Accordion.Item value="mic-input" className={styles.section}>
+          <Accordion.ItemTrigger
+            className={styles.sectionTrigger}
+            css={{
+              fontSize: 'lg',
+              fontWeight: 'medium',
+              borderRadius: '0',
+              py: '4',
+              bg: 'neutral.1',
+              color: 'onSurface',
+            }}
+          >
+            <span className={styles.triggerIcon}>
+              <MicrophoneIcon />
+            </span>
+            <span className={styles.triggerLabel}>Microphone Input</span>
+            <Accordion.ItemIndicator
+              className={styles.sectionIndicator}
+              css={{ color: 'primary.7' }}
+            />
+          </Accordion.ItemTrigger>
+
+          <Accordion.ItemContent className={styles.sectionContent}>
+            <div className={styles.sliderPanel}>
+              <div className={styles.sliderLabel}>
+                <span className={styles.sliderLabelText}>Mic Gain</span>
+                <span className={styles.levelBadge}>{micLevel}%</span>
+              </div>
+              <Slider.Root
+                min={0}
+                max={100}
+                value={[micLevel]}
+                colorPalette="tertiary"
+                onValueChange={({ value }) => {
+                  const next = value[0] ?? micLevel;
+                  setMicLevel(next);
+                  onMicLevelChange?.(next);
+                }}
+              >
+                <Slider.Control className={styles.sliderTrack}>
+                  <Slider.Track>
+                    <Slider.Range />
+                  </Slider.Track>
+                  <Slider.Thumbs />
+                </Slider.Control>
+              </Slider.Root>
+            </div>
+          </Accordion.ItemContent>
+        </Accordion.Item>
+
+        {/* ── Section 4: A/V Recording ─────────────────────────────────────── */}
+        <Accordion.Item value="av-recording" className={styles.section}>
+          <Accordion.ItemTrigger
+            className={styles.sectionTrigger}
+            css={{
+              fontSize: 'lg',
+              fontWeight: 'medium',
+              borderRadius: '0',
+              py: '4',
+              bg: 'neutral.1',
+              color: 'onSurface',
+            }}
+          >
+            <span className={styles.triggerIcon}>
+              <RecordIcon />
+            </span>
+            <span className={styles.triggerLabel}>A/V Recording</span>
+            <Accordion.ItemIndicator
+              className={styles.sectionIndicator}
+              css={{ color: 'primary.7' }}
+            />
+          </Accordion.ItemTrigger>
+
+          <Accordion.ItemContent className={styles.sectionContent}>
+            <div className={styles.radioPanel}>
+              <RadioGroup.Root
+                defaultValue={defaultRecordingMode}
+                colorPalette="primary"
+                onValueChange={({ value }) => {
+                  if (!value) return;
+                  onRecordingModeChange?.(value as RecordingMode);
+                }}
+                css={{ gap: '3' }}
+              >
+                {RECORDING_OPTIONS.map((option) => (
+                  <RadioGroup.Item key={option.value} value={option.value}>
+                    <RadioGroup.ItemControl
+                      css={{
+                        boxShadow: 'none',
+                        borderWidth: '1px',
+                        borderStyle: 'solid',
+                        borderColor: 'primary.7',
+                        _checked: {
+                          bg: 'm3Primary.container',
+                          borderColor: 'primary.7',
+                          _after: { bg: 'primary.7' },
+                        },
+                      }}
+                    />
+                    <RadioGroup.ItemText
+                      css={{ fontSize: 'md', fontWeight: 'medium' }}
+                    >
+                      {option.label}
+                    </RadioGroup.ItemText>
+                    <RadioGroup.ItemHiddenInput />
+                  </RadioGroup.Item>
+                ))}
+              </RadioGroup.Root>
+            </div>
+          </Accordion.ItemContent>
+        </Accordion.Item>
+
+        {/* ── Section 5: Display Timer ──────────────────────────────────────── */}
+        <Accordion.Item value="display-timer" className={styles.section}>
+          <Accordion.ItemTrigger
+            className={styles.sectionTrigger}
+            css={{
+              fontSize: 'lg',
+              fontWeight: 'medium',
+              borderRadius: '0',
+              py: '4',
+              bg: 'neutral.1',
+              color: 'onSurface',
+            }}
+          >
+            <span className={styles.triggerIcon}>
+              <TimerIcon />
+            </span>
+            <span className={styles.triggerLabel}>Display Timer</span>
+            <Accordion.ItemIndicator
+              className={styles.sectionIndicator}
+              css={{ color: 'primary.7' }}
+            />
+          </Accordion.ItemTrigger>
+
+          <Accordion.ItemContent className={styles.sectionContent}>
+            <div className={styles.togglePanel}>
+              <p className={styles.toggleDescription}>
+                Hide timer to create more realistic interview
+              </p>
+              <Switch.Root
+                colorPalette="primary"
+                defaultChecked={defaultShowTimer}
+                onCheckedChange={({ checked }) => {
+                  onTimerChange?.(checked);
+                }}
+              >
+                <Switch.Control />
+                <Switch.HiddenInput />
+              </Switch.Root>
+            </div>
+          </Accordion.ItemContent>
+        </Accordion.Item>
+
+        {/* ── Section 6: Hide Interviewers ─────────────────────────────────── */}
+        <Accordion.Item value="hide-interviewers" className={styles.section}>
+          <Accordion.ItemTrigger
+            className={styles.sectionTrigger}
+            css={{
+              fontSize: 'lg',
+              fontWeight: 'medium',
+              borderRadius: '0',
+              py: '4',
+              bg: 'neutral.1',
+              color: 'onSurface',
+            }}
+          >
+            <span className={styles.triggerIcon}>
+              <AudienceIcon />
+            </span>
+            <span className={styles.triggerLabel}>Hide Interviewers</span>
+            <Accordion.ItemIndicator
+              className={styles.sectionIndicator}
+              css={{ color: 'primary.7' }}
+            />
+          </Accordion.ItemTrigger>
+
+          <Accordion.ItemContent className={styles.sectionContent}>
+            <div className={styles.togglePanel}>
+              <p className={styles.toggleDescription}>
+                Switch off to hide video of interviewers if it is too
+                distracting
+              </p>
+              <Switch.Root
+                colorPalette="primary"
+                defaultChecked={defaultHideInterviewers}
+                onCheckedChange={({ checked }) => {
+                  onInterviewersChange?.(checked);
+                }}
+              >
+                <Switch.Control />
+                <Switch.HiddenInput />
+              </Switch.Root>
+            </div>
+          </Accordion.ItemContent>
+        </Accordion.Item>
+      </Accordion.Root>
+    </div>
+  );
+}

package/src/components/StudioControls/index.ts

@@ -0,0 +1,2 @@
+export { StudioControls } from './StudioControls';
+export type { StudioControlsProps, RecordingMode } from './types';

package/src/components/StudioControls/types.ts

@@ -0,0 +1,17 @@
+export type RecordingMode = 'no-recording' | 'audio-only' | 'video-audio';
+
+export interface StudioControlsProps {
+  scenarioName: string;
+  scenarioFocus: string;
+  scenarioLevel: 'beginner' | 'intermediate' | 'advanced';
+  defaultAudioLevel?: number;
+  defaultMicLevel?: number;
+  defaultRecordingMode?: RecordingMode;
+  defaultShowTimer?: boolean;
+  defaultHideInterviewers?: boolean;
+  onAudioLevelChange?: (value: number) => void;
+  onMicLevelChange?: (value: number) => void;
+  onRecordingModeChange?: (mode: RecordingMode) => void;
+  onTimerChange?: (show: boolean) => void;
+  onInterviewersChange?: (hide: boolean) => void;
+}

package/src/components/Switch.figma.tsx

@@ -0,0 +1,49 @@
+/**
+ * @dds-tokens
+ * recipe: switchComponent
+ * variantProps: variant, size
+ * figmaPropToRecipeProp:
+ *   Toggled: checked
+ *   State: state
+ */
+import figma from '@figma/code-connect';
+import * as Switch from './Switch';
+
+// Original designer-built component — Discourser AI Switch Toggle (38:8121)
+// Variants: Toggled(False/True) × State(Default/Focus/Disabled)
+// This is the component used in production Discourser.AI page designs.
+//
+// Import as namespace: import * as Switch from '@discourser/design-system/Switch'
+//
+// Anatomy:
+//   <Switch.Root defaultChecked={bool}>
+//     <Switch.Control />   ← renders the track + thumb internally
+//     <Switch.Label>Label text</Switch.Label>
+//   </Switch.Root>
+//
+// Key props on Root:
+//   defaultChecked  — uncontrolled initial state (boolean)
+//   checked         — controlled state (boolean)
+//   onCheckedChange — callback ({ checked }: { checked: boolean }) => void
+//   disabled        — boolean
+//
+// Note: Switch.Control includes Switch.Thumb by default via defaultProps.
+// Do NOT add <Switch.Thumb> manually inside <Switch.Control>.
+figma.connect(
+  Switch.Root,
+  'https://www.figma.com/design/GaHmFfmvO4loUzuZS4TgEz/Discourser.AI--V1?node-id=38-8121',
+  {
+    props: {
+      checked: figma.enum('Toggled', {
+        False: false,
+        True: true,
+      }),
+    },
+    example: ({ checked }) => (
+      <Switch.Root defaultChecked={checked}>
+        <Switch.Control />
+        <Switch.Label>Toggle</Switch.Label>
+      </Switch.Root>
+    ),
+  },
+);

package/src/components/index.ts

@@ -146,6 +146,11 @@ export {
   type DurationValue,
   type QuestionCountValue,
 } from './ScenarioSettings';
+export {
+  StudioControls,
+  type StudioControlsProps,
+  type RecordingMode,
+} from './StudioControls';
 
 // Queue Components
 export {

package/src/figma-codex/parser.ts

@@ -1,3 +1,5 @@
+import type { ComponentTokens } from './schema';
+
 export class ParseError extends Error {
   constructor(
     message: string,
@@ -19,6 +21,7 @@ export interface ParsedFigmaFile {
   figmaNodeId: string;
   example: string;
   propsMapping: Record<string, string>;
+  tokens?: ComponentTokens;
 }
 
 function parseNodeId(url: string): string {
@@ -77,6 +80,54 @@ function extractPropsMapping(content: string): Record<string, string> {
   return result;
 }
 
+/**
+ * Parse a @dds-tokens JSDoc block that appears before figma.connect().
+ * Format:
+ *   @dds-tokens
+ *   recipe: badge
+ *   variantProps: variant, size, colorPalette
+ *   figmaPropToRecipeProp:
+ *     Variant: variant
+ *     Size: size
+ *     Color: colorPalette
+ */
+function parseDdsTokens(content: string): ComponentTokens | undefined {
+  const blockMatch = content.match(/\/\*\*[\s\S]*?@dds-tokens([\s\S]*?)\*\//);
+  if (!blockMatch) return undefined;
+
+  const block = blockMatch[1]
+    .replace(/^\s*\*\s?/gm, '') // strip leading * from each line
+    .trim();
+
+  const tokens: ComponentTokens = {};
+
+  const recipeMatch = block.match(/^recipe:\s*(.+)$/m);
+  if (recipeMatch) tokens.recipe = recipeMatch[1].trim();
+
+  const variantPropsMatch = block.match(/^variantProps:\s*(.+)$/m);
+  if (variantPropsMatch) {
+    tokens.variantProps = variantPropsMatch[1]
+      .split(',')
+      .map((s) => s.trim())
+      .filter(Boolean);
+  }
+
+  const mapHeaderIdx = block.indexOf('figmaPropToRecipeProp:');
+  if (mapHeaderIdx !== -1) {
+    const mapBlock = block.slice(
+      mapHeaderIdx + 'figmaPropToRecipeProp:'.length,
+    );
+    const mapping: Record<string, string> = {};
+    for (const line of mapBlock.split('\n')) {
+      const m = line.match(/^\s+(\w+):\s*(\w+)/);
+      if (m) mapping[m[1]] = m[2];
+    }
+    if (Object.keys(mapping).length > 0) tokens.figmaPropToRecipeProp = mapping;
+  }
+
+  return Object.keys(tokens).length > 0 ? tokens : undefined;
+}
+
 export function parseFigmaFile(
   content: string,
   filePath: string,
@@ -108,6 +159,8 @@ export function parseFigmaFile(
   const figmaUrl = connectMatch[3];
   const connectSubComponent = connectMatch[2];
 
+  const tokens = parseDdsTokens(content);
+
   if (nsMatch) {
     return {
       filePath,
@@ -120,6 +173,7 @@ export function parseFigmaFile(
       figmaNodeId: parseNodeId(figmaUrl),
       example: extractExample(content),
       propsMapping: extractPropsMapping(content),
+      tokens,
     };
   }
 
@@ -134,5 +188,6 @@ export function parseFigmaFile(
     figmaNodeId: parseNodeId(figmaUrl),
     example: extractExample(content),
     propsMapping: extractPropsMapping(content),
+    tokens,
   };
 }

package/src/figma-codex/resolver.ts

@@ -276,5 +276,6 @@ export function resolveComponent(
     subComponents,
     example: parsed.example,
     sourcePath,
+    tokens: parsed.tokens,
   };
 }

package/src/figma-codex/schema.ts

@@ -26,6 +26,12 @@ export interface FigmaCodex {
   components: Record<string, ComponentEntry>;
 }
 
+export interface ComponentTokens {
+  recipe?: string;
+  variantProps?: string[];
+  figmaPropToRecipeProp?: Record<string, string>;
+}
+
 export interface ComponentEntry {
   /** Human-readable component name */
   name: string;
@@ -62,6 +68,9 @@ export interface ComponentEntry {
 
   /** Source file path relative to project root */
   sourcePath: string;
+
+  /** Token mappings parsed from @dds-tokens JSDoc block */
+  tokens?: ComponentTokens;
 }
 
 export interface PropDefinition {

package/src/preset/recipes/badge.ts

@@ -1,4 +1,4 @@
-import { defineRecipe } from '@pandacss/dev'
+import { defineRecipe } from '@pandacss/dev';
 
 export const badge = defineRecipe({
   className: 'badge',
@@ -32,6 +32,10 @@ export const badge = defineRecipe({
         bg: 'colorPalette.subtle.bg',
         color: 'colorPalette.subtle.fg',
       },
+      rating: {
+        bg: 'color-mix(in srgb, var(--colors-color-palette-solid-bg) 35%, transparent)',
+        color: 'colorPalette.subtle.fg',
+      },
       outline: {
         borderWidth: '1px',
         borderColor: 'colorPalette.outline.border',
@@ -39,11 +43,41 @@ export const badge = defineRecipe({
       },
     },
     size: {
-      sm: { fontSize: 'xs', px: '1.5', h: '4.5', gap: '0.5', _icon: { boxSize: '2.5' } },
-      md: { fontSize: 'xs', px: '2', h: '5', gap: '1', _icon: { boxSize: '3' } },
-      lg: { fontSize: 'xs', px: '2.5', h: '5.5', gap: '1', _icon: { boxSize: '3.5' } },
-      xl: { fontSize: 'sm', px: '2.5', h: '6', gap: '1.5', _icon: { boxSize: '4' } },
-      '2xl': { fontSize: 'md', px: '3', h: '7', gap: '1.5', _icon: { boxSize: '4.5' } },
+      sm: {
+        fontSize: 'xs',
+        px: '1.5',
+        h: '4.5',
+        gap: '0.5',
+        _icon: { boxSize: '2.5' },
+      },
+      md: {
+        fontSize: 'xs',
+        px: '2',
+        h: '5',
+        gap: '1',
+        _icon: { boxSize: '3' },
+      },
+      lg: {
+        fontSize: 'xs',
+        px: '2.5',
+        h: '5.5',
+        gap: '1',
+        _icon: { boxSize: '3.5' },
+      },
+      xl: {
+        fontSize: 'sm',
+        px: '2.5',
+        h: '6',
+        gap: '1.5',
+        _icon: { boxSize: '4' },
+      },
+      '2xl': {
+        fontSize: 'md',
+        px: '3',
+        h: '7',
+        gap: '1.5',
+        _icon: { boxSize: '4.5' },
+      },
     },
   },
-})
+});

package/src/preset/recipes/index.ts

@@ -49,3 +49,4 @@ export * from './content-card';
 export * from './scenario-card';
 export * from './scenario-queue';
 export * from './scenario-settings';
+export * from './studio-controls';