@discourser/design-system 0.27.0 → 0.28.1

package/dist/preset/index.cjs

@@ -1,13 +1,13 @@
 'use strict';
 
-var chunkAZ6QU2L2_cjs = require('../chunk-AZ6QU2L2.cjs');
+var chunk5H764SHY_cjs = require('../chunk-5H764SHY.cjs');
 require('../chunk-EARF7VDF.cjs');
 
 
 
 Object.defineProperty(exports, "discourserPandaPreset", {
   enumerable: true,
-  get: function () { return chunkAZ6QU2L2_cjs.discourserPandaPreset; }
+  get: function () { return chunk5H764SHY_cjs.discourserPandaPreset; }
 });
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map

package/dist/preset/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/preset/index.ts"],"names":[],"mappings":"AA8DA,eAAO,MAAM,qBAAqB,gCA2JhC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/preset/index.ts"],"names":[],"mappings":"AA+DA,eAAO,MAAM,qBAAqB,gCA4JhC,CAAC"}

package/dist/preset/index.js

@@ -1,4 +1,4 @@
-export { discourserPandaPreset } from '../chunk-4XOWPACJ.js';
+export { discourserPandaPreset } from '../chunk-WMHVCIDI.js';
 import '../chunk-WR5Z5QMQ.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/preset/recipes/studio-controls.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"studio-controls.d.ts","sourceRoot":"","sources":["../../../src/preset/recipes/studio-controls.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,0CAyPzB,CAAC"}
+{"version":3,"file":"studio-controls.d.ts","sourceRoot":"","sources":["../../../src/preset/recipes/studio-controls.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,0CAsPzB,CAAC"}

package/docs/component-catalog.md

@@ -2,8 +2,8 @@
 
 > **Status:** Generated — auto-produced by `scripts/generate-component-catalog.ts`
 > **Source:** `stories/ComponentCatalog.stories.tsx` + `src/components/index.ts`
-> **Design System Version:** 0.27.0
-> **Generated:** 2026-04-04
+> **Design System Version:** 0.28.1
+> **Generated:** 2026-04-08
 > **Do not hand-edit** — this file is overwritten on every build
 
 ---

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@discourser/design-system",
-  "version": "0.27.0",
+  "version": "0.28.1",
   "description": "Aesthetic-agnostic design system with Panda CSS and Ark UI",
   "type": "module",
   "publishConfig": {
@@ -198,9 +198,10 @@
   ],
   "scripts": {
     "dev": "pnpm build:css && pnpm docs:generate && storybook dev -p 6006",
-    "build": "pnpm build:panda && pnpm typecheck && pnpm build:lib && pnpm build:types && pnpm exports:validate && pnpm catalog:generate && pnpm codex:generate",
+    "build": "pnpm build:panda && pnpm typecheck && pnpm build:lib && pnpm build:types && pnpm exports:validate && pnpm catalog:generate && pnpm codex:generate && pnpm build:buildinfo",
     "build:panda": "panda codegen",
     "build:css": "panda cssgen --outfile dist/styles.css",
+    "build:buildinfo": "panda ship --outfile dist/panda.buildinfo.json",
     "build:lib": "tsup",
     "build:types": "tsc --project tsconfig.build.json",
     "build:storybook": "pnpm build:css && pnpm docs:generate && storybook build",

package/src/components/Breadcrumb.figma.tsx

@@ -1,18 +1,69 @@
-import figma from '@figma/code-connect'
-import * as Breadcrumb from './Breadcrumb'
+import figma from '@figma/code-connect';
+import * as Breadcrumb from './Breadcrumb';
 
-figma.connect(Breadcrumb.Root, 'https://www.figma.com/design/GaHmFfmvO4loUzuZS4TgEz/Discourser.AI--V1?node-id=38-7978', {
-  example: () => (
-    <Breadcrumb.Root>
-      <Breadcrumb.List>
-        <Breadcrumb.Item>
-          <Breadcrumb.Link href="#">Home</Breadcrumb.Link>
-        </Breadcrumb.Item>
-        <Breadcrumb.Separator />
-        <Breadcrumb.Item>
-          <Breadcrumb.CurrentLink>Current</Breadcrumb.CurrentLink>
-        </Breadcrumb.Item>
-      </Breadcrumb.List>
-    </Breadcrumb.Root>
-  ),
-})
+// Basic breadcrumb — standard navigation trail
+figma.connect(
+  Breadcrumb.Root,
+  'https://www.figma.com/design/GaHmFfmvO4loUzuZS4TgEz/Discourser.AI--V1?node-id=38-7978',
+  {
+    example: () => (
+      <Breadcrumb.Root>
+        <Breadcrumb.List>
+          <Breadcrumb.Item>
+            <Breadcrumb.Link href="/home">Home</Breadcrumb.Link>
+          </Breadcrumb.Item>
+          <Breadcrumb.Separator />
+          <Breadcrumb.Item>
+            <Breadcrumb.CurrentLink>Current Page</Breadcrumb.CurrentLink>
+          </Breadcrumb.Item>
+        </Breadcrumb.List>
+      </Breadcrumb.Root>
+    ),
+  },
+);
+
+// Two-row wizard breadcrumb — used for multi-step flows (e.g. Conversation Studio)
+// Pattern: TwoRowProgressiveDisclosureStep2
+// - ParentRow shows the static parent context (hidden on first step)
+// - Inner Breadcrumb.Root shows the current wizard progress
+// - Protected steps (conversation, results) render as disabled spans, not links
+figma.connect(
+  Breadcrumb.TwoRowRoot,
+  'https://www.figma.com/design/GaHmFfmvO4loUzuZS4TgEz/Discourser.AI--V1?node-id=38-7978',
+  {
+    example: () => (
+      <Breadcrumb.TwoRowRoot aria-label="Conversation Studio steps">
+        <Breadcrumb.ParentRow show={true}>
+          <Breadcrumb.ParentItem href="/scenarios">
+            Scenarios
+          </Breadcrumb.ParentItem>
+          <Breadcrumb.ParentSeparator />
+          <Breadcrumb.ParentItem>Conversation Studio</Breadcrumb.ParentItem>
+        </Breadcrumb.ParentRow>
+        <Breadcrumb.Root>
+          <Breadcrumb.List>
+            <Breadcrumb.Item>
+              <Breadcrumb.Link href="/scenarios/conversation-studio/settings">
+                Level Setting
+              </Breadcrumb.Link>
+            </Breadcrumb.Item>
+            <Breadcrumb.Separator />
+            <Breadcrumb.Item>
+              <Breadcrumb.CurrentLink>Lobby</Breadcrumb.CurrentLink>
+            </Breadcrumb.Item>
+            <Breadcrumb.Separator />
+            <Breadcrumb.Item>
+              {/* Protected step — renders as disabled span, not a link */}
+              <Breadcrumb.Link disabled>In Conversation</Breadcrumb.Link>
+            </Breadcrumb.Item>
+            <Breadcrumb.Separator />
+            <Breadcrumb.Item>
+              {/* Protected step — renders as disabled span, not a link */}
+              <Breadcrumb.Link disabled>Results</Breadcrumb.Link>
+            </Breadcrumb.Item>
+          </Breadcrumb.List>
+        </Breadcrumb.Root>
+      </Breadcrumb.TwoRowRoot>
+    ),
+  },
+);

package/src/components/Breadcrumb.tsx

@@ -122,8 +122,8 @@ export const ParentItem = ({
 }) => {
   const styles = css({
     color: 'fg.subtle',
-    textStyle: 'sm',
-    fontWeight: 'normal',
+    textStyle: 'bodyMedium',
+    fontWeight: 'light',
     textDecoration: 'none',
     _hover: href
       ? { color: 'fg.default', textDecoration: 'underline' }
@@ -145,7 +145,8 @@ export const ParentSeparator = () => (
     aria-hidden="true"
     className={css({
       color: 'fg.subtle',
-      textStyle: 'sm',
+      textStyle: 'bodyMedium',
+      fontWeight: 'light',
       mx: '0.5',
     })}
   >

package/src/components/SettingsPopover/SettingsPopover.tsx

@@ -35,8 +35,6 @@ export function SettingsPopover({
             borderTopStyle: 'solid',
             borderTopColor: 'neutral.3',
             borderRadius: '0',
-            boxShadow:
-              '0px -1px 2px rgba(0, 0, 0, 0.3), 0px -2px 6px 2px rgba(0, 0, 0, 0.15)',
             cursor: 'pointer',
             transition: 'background 0.2s',
             _hover: {
@@ -87,7 +85,7 @@ export function SettingsPopover({
             p: '0',
             w: '275px',
             borderRadius: 'l3',
-            boxShadow: 'level2',
+            boxShadow: 'md',
             overflow: 'hidden',
           })}
         >

package/src/components/StudioControls/StudioControls.tsx

@@ -47,6 +47,11 @@ const ALL_SECTION_IDS = [
 
 // ── Component ─────────────────────────────────────────────────────────────────
 
+const DEFAULT_TRIGGER_CSS = {
+  fontSize: 'sm',
+  fontWeight: 'semibold',
+} as const;
+
 export function StudioControls({
   scenarioName,
   scenarioFocus,
@@ -56,12 +61,14 @@ export function StudioControls({
   defaultRecordingMode = 'no-recording',
   defaultShowTimer = true,
   defaultHideInterviewers = false,
+  triggerCss,
   onAudioLevelChange,
   onMicLevelChange,
   onRecordingModeChange,
   onTimerChange,
   onInterviewersChange,
 }: StudioControlsProps) {
+  const resolvedTriggerCss = { ...DEFAULT_TRIGGER_CSS, ...triggerCss };
   const styles = studioControls();
 
   const [audioLevel, setAudioLevel] = useState(defaultAudioLevel);
@@ -78,8 +85,7 @@ export function StudioControls({
           <Accordion.ItemTrigger
             className={styles.sectionTrigger}
             css={{
-              fontSize: 'lg',
-              fontWeight: 'medium',
+              ...resolvedTriggerCss,
               borderRadius: '0',
               py: '4',
               bg: 'neutral.1',
@@ -132,8 +138,7 @@ export function StudioControls({
           <Accordion.ItemTrigger
             className={styles.sectionTrigger}
             css={{
-              fontSize: 'lg',
-              fontWeight: 'medium',
+              ...resolvedTriggerCss,
               borderRadius: '0',
               py: '4',
               bg: 'neutral.1',
@@ -183,8 +188,7 @@ export function StudioControls({
           <Accordion.ItemTrigger
             className={styles.sectionTrigger}
             css={{
-              fontSize: 'lg',
-              fontWeight: 'medium',
+              ...resolvedTriggerCss,
               borderRadius: '0',
               py: '4',
               bg: 'neutral.1',
@@ -234,8 +238,7 @@ export function StudioControls({
           <Accordion.ItemTrigger
             className={styles.sectionTrigger}
             css={{
-              fontSize: 'lg',
-              fontWeight: 'medium',
+              ...resolvedTriggerCss,
               borderRadius: '0',
               py: '4',
               bg: 'neutral.1',
@@ -279,7 +282,8 @@ export function StudioControls({
                       }}
                     />
                     <RadioGroup.ItemText
-                      css={{ fontSize: 'md', fontWeight: 'medium' }}
+                      css={{ textStyle: 'bodyMedium' }}
+                      style={{ fontWeight: 'var(--font-weights-normal)' }}
                     >
                       {option.label}
                     </RadioGroup.ItemText>
@@ -296,8 +300,7 @@ export function StudioControls({
           <Accordion.ItemTrigger
             className={styles.sectionTrigger}
             css={{
-              fontSize: 'lg',
-              fontWeight: 'medium',
+              ...resolvedTriggerCss,
               borderRadius: '0',
               py: '4',
               bg: 'neutral.1',
@@ -338,8 +341,7 @@ export function StudioControls({
           <Accordion.ItemTrigger
             className={styles.sectionTrigger}
             css={{
-              fontSize: 'lg',
-              fontWeight: 'medium',
+              ...resolvedTriggerCss,
               borderRadius: '0',
               py: '4',
               bg: 'neutral.1',

package/src/components/StudioControls/types.ts

@@ -1,6 +1,10 @@
+import type { SystemStyleObject } from 'styled-system/types';
+
 export type RecordingMode = 'no-recording' | 'audio-only' | 'video-audio';
 
 export interface StudioControlsProps {
+  /** Override CSS for every accordion trigger label — customize font, size, weight from the consuming app */
+  triggerCss?: SystemStyleObject;
   scenarioName: string;
   scenarioFocus: string;
   scenarioLevel: 'beginner' | 'intermediate' | 'advanced';

package/src/preset/index.ts

@@ -52,6 +52,7 @@ import { contentCard } from './recipes/content-card';
 import { scenarioCard } from './recipes/scenario-card';
 import { scenarioQueue } from './recipes/scenario-queue';
 import { scenarioSettings } from './recipes/scenario-settings';
+import { studioControls } from './recipes/studio-controls';
 
 // Park UI theme extensions
 import { layerStyles } from './layer-styles';
@@ -195,6 +196,7 @@ export const discourserPandaPreset = definePreset({
         scenarioCard,
         scenarioQueue,
         scenarioSettings,
+        studioControls,
       },
     },
   },

package/src/preset/recipes/breadcrumb.ts

@@ -83,8 +83,8 @@ export const breadcrumb = defineSlotRecipe({
         },
         link: {
           color: 'fg.subtle',
+          textStyle: 'bodyMedium',
           fontWeight: 'medium',
-          fontSize: 'lg',
           _hover: { color: 'fg.default' },
           _currentPage: { color: 'fg.default', fontWeight: 'semibold' },
         },

package/src/preset/recipes/studio-controls.ts

@@ -105,16 +105,14 @@ export const studioControls = defineSlotRecipe({
       gap: '1',
     },
     scenarioName: {
-      fontSize: 'lg',
+      textStyle: 'bodyMedium',
       fontWeight: 'semibold',
       color: 'onSurface',
-      lineHeight: '1.2',
     },
     scenarioFocus: {
-      fontSize: 'sm',
+      textStyle: 'bodyMedium',
       fontWeight: 'medium',
       color: 'onSurface',
-      lineHeight: '1.4',
     },
     // Stone-bg inner card — Figma: #F5F1EB ≈ surface.container
     settingsCard: {
@@ -127,7 +125,7 @@ export const studioControls = defineSlotRecipe({
       py: '2.5',
     },
     settingsCardHeading: {
-      fontSize: 'md',
+      textStyle: 'bodyMedium',
       fontWeight: 'medium',
       color: 'onSurface',
     },
@@ -143,7 +141,7 @@ export const studioControls = defineSlotRecipe({
       width: 'full',
     },
     settingsRowLabel: {
-      fontSize: 'sm',
+      textStyle: 'bodyMedium',
       fontWeight: 'medium',
       color: 'onSurface',
       flex: 1,
@@ -198,8 +196,8 @@ export const studioControls = defineSlotRecipe({
       width: 'full',
     },
     sliderLabelText: {
-      fontSize: 'md',
-      fontWeight: 'semibold',
+      textStyle: 'bodyMedium',
+      fontWeight: 'medium',
       color: 'onSurface',
     },
     levelBadge: {
@@ -242,10 +240,9 @@ export const studioControls = defineSlotRecipe({
       width: 'full',
     },
     toggleDescription: {
-      fontSize: 'sm',
-      fontWeight: 'normal',
+      textStyle: 'bodyMedium',
+      fontWeight: 'medium',
       color: 'onSurface',
-      lineHeight: '1.4',
       flex: 1,
     },
   },

package/src/test/setup.ts

@@ -6,15 +6,29 @@ import { toHaveNoViolations } from 'jest-axe';
 // Extend Vitest's expect with jest-axe matchers
 expect.extend(toHaveNoViolations);
 
-// Mock ResizeObserver — JSDOM does not implement it, but @zag-js/tabs requires
-// it to sync the active tab indicator rectangle position.
+// Mock ResizeObserver — JSDOM does not implement it, but @zag-js components
+// (tabs, accordion, etc.) require it to measure content dimensions.
+// The mock calls back immediately on observe() so that accordion content panels
+// receive their height measurement and remove their `hidden` attribute, making
+// links/content accessible to RTL after a click interaction.
 // Guard for Node.js environment (e.g. figma-codex tests with @vitest-environment node)
 if (typeof window !== 'undefined') {
   Object.defineProperty(window, 'ResizeObserver', {
     writable: true,
     configurable: true,
     value: class ResizeObserver {
-      observe() {}
+      private callback: (entries: object[], observer: object) => void;
+      constructor(callback: (entries: object[], observer: object) => void) {
+        this.callback = callback;
+      }
+      observe(target: Element) {
+        // Call back synchronously with a mock entry so zag-js state machines
+        // receive content dimensions and proceed to unhide animated content.
+        this.callback(
+          [{ contentRect: target.getBoundingClientRect(), target }],
+          this,
+        );
+      }
       unobserve() {}
       disconnect() {}
     },