@discourser/design-system 0.15.0 → 0.15.1

package/src/preset/index.ts

@@ -19,6 +19,9 @@ import { accordion } from './recipes/accordion';
 import { drawer } from './recipes/drawer';
 import { tabs } from './recipes/tabs';
 
+// Park UI recipes - Navigation
+import { breadcrumb } from './recipes/breadcrumb';
+
 // Park UI recipes - Form Elements
 import { switchRecipe } from './recipes/switch';
 import { checkbox } from './recipes/checkbox';
@@ -44,6 +47,8 @@ import { heading } from './recipes/heading';
 
 // Custom Components
 import { stepper } from './recipes/stepper';
+import { scenarioCard } from './recipes/scenario-card';
+import { scenarioQueue } from './recipes/scenario-queue';
 
 // Park UI theme extensions
 import { layerStyles } from './layer-styles';
@@ -155,6 +160,8 @@ export const discourserPandaPreset = definePreset({
         accordion,
         drawer,
         tabs,
+        // Navigation
+        breadcrumb,
         // Form Elements
         switchComponent: switchRecipe,
         checkbox,
@@ -171,6 +178,8 @@ export const discourserPandaPreset = definePreset({
         tooltip,
         // Custom Components
         stepper,
+        scenarioCard,
+        scenarioQueue,
       },
     },
   },

package/src/preset/recipes/avatar.ts

@@ -1,9 +1,8 @@
-import { avatarAnatomy } from '@ark-ui/react/anatomy'
 import { defineSlotRecipe } from '@pandacss/dev'
 
 export const avatar = defineSlotRecipe({
   className: 'avatar',
-  slots: avatarAnatomy.keys(),
+  slots: ['root', 'image', 'fallback'],
   base: {
     root: {
       display: 'inline-flex',

package/src/preset/recipes/breadcrumb.ts

@@ -0,0 +1,77 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+export const breadcrumb = defineSlotRecipe({
+  className: 'breadcrumb',
+  slots: ['root', 'list', 'link', 'item', 'separator', 'ellipsis'],
+  base: {
+    list: {
+      alignItems: 'center',
+      display: 'flex',
+      listStyle: 'none',
+      wordBreak: 'break-word',
+    },
+    link: {
+      alignItems: 'center',
+      borderRadius: 'l1',
+      display: 'inline-flex',
+      focusRing: 'outside',
+      gap: '2',
+      outline: '0',
+      textDecoration: 'none',
+      transition: 'color',
+      _icon: { boxSize: '1em' },
+    },
+    item: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      color: 'fg.muted',
+      _last: {
+        color: 'fg.default',
+      },
+    },
+    separator: {
+      color: 'fg.subtle',
+      _icon: { boxSize: '1em' },
+      _rtl: { rotate: '180deg' },
+    },
+    ellipsis: {
+      alignItems: 'center',
+      color: 'fg.muted',
+      display: 'inline-flex',
+      justifyContent: 'center',
+      _icon: { boxSize: '1em' },
+    },
+  },
+
+  variants: {
+    variant: {
+      underline: {
+        link: {
+          textDecoration: 'underline',
+          textDecorationThickness: '0.1em',
+          textUnderlineOffset: '0.125em',
+          textDecorationColor: 'fg.subtle',
+          _hover: { textDecorationColor: 'fg.default' },
+        },
+      },
+      plain: {
+        link: {
+          color: 'fg.muted',
+          _hover: { color: 'fg.default' },
+          _currentPage: { color: 'fg.default' },
+        },
+      },
+    },
+    size: {
+      xs: { list: { gap: '1', textStyle: 'xs' } },
+      sm: { list: { gap: '1', textStyle: 'sm' } },
+      md: { list: { gap: '1.5', textStyle: 'md' } },
+      lg: { list: { gap: '2', textStyle: 'lg' } },
+    },
+  },
+
+  defaultVariants: {
+    variant: 'plain',
+    size: 'md',
+  },
+})

package/src/preset/recipes/checkbox.ts

@@ -1,8 +1,7 @@
-import { checkboxAnatomy } from '@ark-ui/react/anatomy'
 import { defineSlotRecipe } from '@pandacss/dev'
 
 export const checkbox = defineSlotRecipe({
-  slots: checkboxAnatomy.keys(),
+  slots: ['root', 'label', 'control', 'indicator', 'group'],
   className: 'checkbox',
   base: {
     root: {

package/src/preset/recipes/field.ts

@@ -1,9 +1,8 @@
-import { fieldAnatomy } from '@ark-ui/react/anatomy'
 import { defineSlotRecipe } from '@pandacss/dev'
 
 export const field = defineSlotRecipe({
   className: 'field',
-  slots: fieldAnatomy.keys(),
+  slots: ['root', 'errorText', 'helperText', 'input', 'label', 'select', 'textarea', 'requiredIndicator'],
   base: {
     root: {
       display: 'flex',

package/src/preset/recipes/index.ts

@@ -11,6 +11,9 @@ export * from './accordion';
 export * from './drawer';
 export * from './tabs';
 
+// Navigation
+export * from './breadcrumb';
+
 // Form elements
 export * from './switch';
 export * from './checkbox';
@@ -38,3 +41,7 @@ export * from './heading';
 // Utilities
 export * from './absolute-center';
 export * from './group';
+
+// Custom Components
+export * from './scenario-card';
+export * from './scenario-queue';

package/src/preset/recipes/progress.ts

@@ -1,8 +1,7 @@
-import { progressAnatomy } from '@ark-ui/react/anatomy'
 import { defineSlotRecipe } from '@pandacss/dev'
 
 export const progress = defineSlotRecipe({
-  slots: progressAnatomy.keys(),
+  slots: ['root', 'label', 'track', 'range', 'valueText', 'view', 'circle', 'circleTrack', 'circleRange'],
   className: 'progress',
   base: {
     root: {

package/src/preset/recipes/radio-group.ts

@@ -1,9 +1,8 @@
-import { radioGroupAnatomy } from '@ark-ui/react/anatomy'
 import { defineSlotRecipe } from '@pandacss/dev'
 
 export const radioGroup = defineSlotRecipe({
   className: 'radio-group',
-  slots: radioGroupAnatomy.keys(),
+  slots: ['root', 'label', 'item', 'itemText', 'itemControl', 'indicator'],
   base: {
     root: {
       display: 'flex',

package/src/preset/recipes/scenario-card.ts

@@ -0,0 +1,151 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+export const scenarioCard = defineSlotRecipe({
+  className: 'scenario-card',
+  // Slots cover only scenario-specific styling.
+  // Base card appearance (bg, border, borderRadius, overflow) comes from
+  // Card.Root variant="outline" via the card slot recipe.
+  // Layout structure (flex, gap, alignment) comes from Panda CSS JSX primitives.
+  slots: ['root', 'positionBadge', 'dragHandle', 'title', 'switchRow', 'switchLabel', 'difficultyBadge', 'durationBadge'],
+  base: {
+    root: {
+      // Left accent border — inactive cards use transparent to preserve card width.
+      borderLeftWidth: '3px',
+      borderLeftStyle: 'solid',
+      borderLeftColor: 'transparent',
+      // Custom purple-tinted shadow from Figma spec (0px 2px 8px 0px rgba(167,139,250,0.15)).
+      // This overrides Card.Root variant="elevated" (M3 level4) which is too heavy.
+      // Raw value intentional: this non-standard shadow has no M3 elevation equivalent.
+      boxShadow: '0px 2px 8px 0px rgba(167, 139, 250, 0.15)',
+      // Figma cards use neutral/99 (#FDFCF5) — a warm off-white.
+      // neutral.surface.bg resolves to white (#FFFFFF) in light mode, so we override.
+      bg: 'neutral.1',
+      transition: 'border-color',
+      transitionDuration: 'normal',
+    },
+
+    // Circle primitive handles: w/h (size="12"), borderRadius:full, flex centering.
+    // Recipe handles: visual appearance (border, color, font).
+    positionBadge: {
+      fontSize: 'md',
+      fontWeight: 'semibold',
+      flexShrink: 0,
+      borderWidth: '1px',
+      borderStyle: 'solid',
+      borderColor: 'neutral.6',
+      color: 'fg.default',
+      bg: 'transparent',
+      transition: 'all',
+      transitionDuration: 'normal',
+    },
+
+    dragHandle: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      // TODO: Create semantic token (e.g. colors.icon.subdued) that maps to secondary.6
+      // Using palette bridge value directly until semantic token is defined
+      color: 'secondary.6',
+      cursor: 'grab',
+      flexShrink: 0,
+      width: '9',
+      height: '10',
+      _active: { cursor: 'grabbing' },
+    },
+
+    title: {
+      width: 'full',
+      fontSize: 'sm',
+      fontWeight: 'semibold',
+      lineHeight: '1.4',
+      color: 'fg.default',
+    },
+
+    // HStack handles: display:flex, alignItems:center, justifyContent:space-between.
+    switchRow: {
+      width: 'full',
+      pt: '1',
+      mt: '1',
+    },
+
+    switchLabel: {
+      fontSize: 'sm',
+      color: 'fg.muted',
+      fontWeight: 'medium',
+    },
+
+    // Difficulty pill: M3 container tokens selected by data-difficulty attribute.
+    // Default (beginner) = primaryContainer; overridden for intermediate/advanced.
+    difficultyBadge: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      borderRadius: 'l2',
+      px: '2',
+      h: '5',
+      fontSize: 'xs',
+      fontWeight: 'medium',
+      bg: 'm3Primary.container',
+      color: 'onM3Primary.container',
+      '&[data-difficulty="intermediate"]': {
+        bg: 'm3Secondary.container',
+        color: 'onM3Secondary.container',
+      },
+      '&[data-difficulty="advanced"]': {
+        bg: 'm3Tertiary.container',
+        color: 'onM3Tertiary.container',
+      },
+    },
+
+    // Duration pill: per-difficulty inverse palette colors.
+    // Default (beginner): inversePrimary  → semanticDark.primary   (#B1D18A light, #4C662B dark)
+    // Intermediate:       inverseSecondary → semanticDark.secondary (#BFCBAD light, #586249 dark)
+    // Advanced:           inverseTertiary  → semanticDark.tertiary  (#A0D0CB light, #386663 dark)
+    durationBadge: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      gap: '1',
+      borderRadius: 'l2',
+      px: '2',
+      h: '5',
+      fontSize: 'xs',
+      fontWeight: 'medium',
+      bg: 'inversePrimary',
+      color: 'onSurface',
+      '&[data-difficulty="intermediate"]': {
+        bg: 'inverseSecondary',
+      },
+      '&[data-difficulty="advanced"]': {
+        bg: 'inverseTertiary',
+      },
+    },
+  },
+
+  variants: {
+    isActive: {
+      true: {
+        root: {
+          borderLeftColor: 'primary.6',
+        },
+        positionBadge: {
+          bg: 'primary.6',
+          color: 'white',
+          borderColor: 'primary.6',
+        },
+      },
+      false: {},
+    },
+    isDragging: {
+      true: {
+        root: {
+          opacity: '0.4',
+        },
+      },
+      false: {},
+    },
+  },
+
+  defaultVariants: {
+    isActive: false,
+    isDragging: false,
+  },
+})

package/src/preset/recipes/scenario-queue.ts

@@ -0,0 +1,99 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+export const scenarioQueue = defineSlotRecipe({
+  className: 'scenario-queue',
+  description: 'Panel component with tabs and draggable scenario cards',
+
+  slots: [
+    'root',
+    'header',
+    'title',
+    'count',
+    'tabsInner',
+    'tabList',
+    'tabsContent',
+    'scrollArea',
+    'emptyState',
+    'addButtonArea',
+    'addButton',
+  ],
+
+  base: {
+    root: {
+      display: 'flex',
+      flexDirection: 'column',
+      h: 'full',
+      minH: '320px',
+      minW: '250px',
+      maxW: '300px',
+      overflow: 'hidden',
+      bg: 'surface',
+    },
+
+    header: {
+      px: '4',
+      pt: '4',
+      pb: '2',
+      flexShrink: 0,
+    },
+
+    title: {
+      fontWeight: 'semibold',
+      fontSize: 'md',
+      color: 'fg.default',
+    },
+
+    count: {
+      fontSize: 'xs',
+      color: 'fg.muted',
+      mt: '0.5',
+    },
+
+    // Applied directly to Tabs.Root className — handles the flex column growth
+    // and scroll containment without a redundant wrapper div.
+    tabsInner: {
+      flex: '1',
+      minHeight: '0',
+      overflow: 'hidden',
+      display: 'flex',
+      flexDirection: 'column',
+    },
+
+    tabList: {
+      px: '4',
+      flexShrink: 0,
+    },
+
+    // Applied to each Tabs.Content — allows independent scrolling per tab.
+    tabsContent: {
+      flex: '1',
+      minHeight: '0',
+      overflowY: 'auto',
+    },
+
+    // Block layout so cards size to natural height and the container scrolls.
+    scrollArea: {
+      px: '4',
+      py: '3',
+      '& > * + *': { marginTop: '6' },
+    },
+
+    // Center primitive handles the flex centering; recipe provides spacing/text.
+    emptyState: {
+      py: '12',
+      fontSize: 'sm',
+      color: 'fg.muted',
+    },
+
+    addButtonArea: {
+      px: '4',
+      pb: '4',
+      pt: '2',
+      flexShrink: 0,
+    },
+
+    addButton: {
+      width: 'full',
+    },
+  },
+})

package/src/preset/recipes/steps.ts

@@ -1,8 +1,7 @@
-import { stepsAnatomy } from '@ark-ui/react/anatomy';
 import { defineSlotRecipe } from '@pandacss/dev';
 
 export const steps = defineSlotRecipe({
   className: 'steps',
-  slots: stepsAnatomy.keys(),
+  slots: ['root', 'list', 'item', 'trigger', 'indicator', 'separator', 'content', 'nextTrigger', 'prevTrigger', 'progress'],
   base: {},
 });

package/src/preset/recipes/toast.ts

@@ -1,9 +1,8 @@
-import { toastAnatomy } from '@ark-ui/react/anatomy'
 import { defineSlotRecipe } from '@pandacss/dev'
 
 export const toast = defineSlotRecipe({
   className: 'toast',
-  slots: toastAnatomy.keys(),
+  slots: ['group', 'root', 'title', 'description', 'actionTrigger', 'closeTrigger'],
   base: {
     root: {
       alignItems: 'start',

package/src/preset/recipes/tooltip.ts

@@ -1,9 +1,8 @@
-import { tooltipAnatomy } from '@ark-ui/react/anatomy'
 import { defineSlotRecipe } from '@pandacss/dev'
 
 export const tooltip = defineSlotRecipe({
   className: 'tooltip',
-  slots: tooltipAnatomy.keys(),
+  slots: ['trigger', 'arrow', 'arrowTip', 'positioner', 'content'],
   base: {
     content: {
       '--tooltip-bg': 'colors.gray.solid.bg',

package/src/preset/semantic-tokens.ts

@@ -69,6 +69,10 @@ export const m3SemanticTokens = defineSemanticTokens.colors({
   inverseSurface: { value: { base: semantic.inverseSurface, _dark: semanticDark.inverseSurface } },
   inverseOnSurface: { value: { base: semantic.inverseOnSurface, _dark: semanticDark.inverseOnSurface } },
   inversePrimary: { value: { base: semantic.inversePrimary, _dark: semanticDark.inversePrimary } },
+  // Not standard M3 tokens, but follow inversePrimary's pattern:
+  // light mode = dark-palette value, dark mode = light-palette value.
+  inverseSecondary: { value: { base: semanticDark.secondary, _dark: semantic.secondary } },
+  inverseTertiary: { value: { base: semanticDark.tertiary, _dark: semantic.tertiary } },
 
   // Scrim/Shadow
   scrim: { value: { base: semantic.scrim, _dark: semanticDark.scrim } },

package/src/test/setup.ts

@@ -6,6 +6,18 @@ 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.
+Object.defineProperty(window, 'ResizeObserver', {
+  writable: true,
+  configurable: true,
+  value: class ResizeObserver {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  },
+});
+
 // Cleanup after each test
 afterEach(() => {
   cleanup();