@discourser/design-system 0.15.0 → 0.17.0

package/dist/{chunk-QC44JPCA.cjs → chunk-PFWU7QSM.cjs}

@@ -770,6 +770,10 @@ var m3SemanticTokens = dev.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 } }
 });
@@ -1093,7 +1097,7 @@ var inputGroup = dev.defineSlotRecipe({
 });
 var field = dev.defineSlotRecipe({
   className: "field",
-  slots: anatomy.fieldAnatomy.keys(),
+  slots: ["root", "errorText", "helperText", "input", "label", "select", "textarea", "requiredIndicator"],
   base: {
     root: {
       display: "flex",
@@ -1388,13 +1392,16 @@ var accordion = dev.defineSlotRecipe({
       overflow: "hidden",
       borderRadius: "var(--accordion-radius)",
       _open: {
-        animationName: "expand-height, fade-in",
-        animationDuration: "normal"
+        animationName: "slide-down",
+        animationDuration: "250ms",
+        animationTimingFunction: "ease-out",
+        animationFillMode: "forwards"
       },
       _closed: {
-        animationName: "collapse-height, fade-out",
-        animationDuration: "normal",
-        display: "none"
+        animationName: "slide-up",
+        animationDuration: "200ms",
+        animationTimingFunction: "ease-out",
+        animationFillMode: "forwards"
       }
     }
   },
@@ -1795,6 +1802,220 @@ var tabs = dev.defineSlotRecipe({
     variant: "line"
   }
 });
+var breadcrumb = dev.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" }
+        }
+      },
+      discourser: {
+        list: {
+          gap: "2.5",
+          alignItems: "center"
+        },
+        item: {
+          bg: "transparent",
+          px: "1.5",
+          py: "1.5",
+          borderRadius: "l2",
+          h: "9",
+          display: "inline-flex",
+          alignItems: "center",
+          _last: {
+            color: "fg.default",
+            fontWeight: "medium",
+            fontSize: "md",
+            fontFeatureSettings: "'liga' 0, 'calt' 0"
+          }
+        },
+        link: {
+          color: "fg.subtle",
+          fontWeight: "medium",
+          fontSize: "lg",
+          _hover: { color: "fg.default" },
+          _currentPage: { color: "fg.default", fontWeight: "semibold" }
+        },
+        separator: {
+          color: "primary.7",
+          _icon: { width: "27px", height: "27px" }
+        }
+      }
+    },
+    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"
+  }
+});
+var navigationMenu = dev.defineSlotRecipe({
+  className: "navigation-menu",
+  slots: [
+    "root",
+    "section",
+    "sectionTrigger",
+    "sectionIcon",
+    "sectionTitle",
+    "sectionIndicator",
+    "sectionContent",
+    "itemList",
+    "item",
+    "itemLink"
+  ],
+  base: {
+    // ── Token mappings verified against Figma MCP output (node 38:4046) ──
+    // Figma file: GaHmFfmvO4loUzuZS4TgEz
+    root: {
+      bg: "surface.dim",
+      // Figma: #f5f1eb warm sage sidebar bg
+      width: "full",
+      py: "2"
+    },
+    section: {
+      borderBottom: "none"
+    },
+    sectionTrigger: {
+      // Layout-only props — no conflicts with accordion recipe here
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      width: "full",
+      cursor: "pointer",
+      // NOTE: fontSize, fontWeight, borderRadius, p, bg, color are applied via
+      // css={{}} on Accordion.ItemTrigger in the component (utilities layer > recipes layer).
+      // See ScenarioCard.tsx for the same pattern.
+      _hover: {
+        bg: "surface.container.high"
+      }
+    },
+    sectionIcon: {
+      flexShrink: 0,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "6",
+      // 24px container
+      height: "6",
+      color: "primary.50",
+      // olive green icons — Figma: #518500
+      fontSize: "20px"
+      // icon SVGs use width/height: 1em → sets 20×20px
+    },
+    sectionTitle: {
+      flex: 1,
+      textAlign: "start"
+      // Font styles inherited from trigger's css={{}} utility overrides
+    },
+    sectionIndicator: {
+      // color set via css={{}} on Accordion.ItemIndicator (utilities > recipes)
+      _open: {
+        rotate: "180deg"
+      }
+    },
+    sectionContent: {
+      overflow: "hidden",
+      borderRadius: "0"
+      // override accordion's default border-radius
+    },
+    itemList: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "0.5",
+      pt: "1",
+      pb: "2"
+    },
+    item: {},
+    itemLink: {
+      display: "block",
+      py: "2",
+      // Figma: 5px top/bottom
+      pl: "8",
+      // Figma: 30px left indent → spacing.8 = 32px
+      pr: "2",
+      // Figma: 5px right padding
+      borderRadius: "l3",
+      // Figma: 8px
+      textDecoration: "none",
+      fontSize: "md",
+      // Figma: 16px
+      fontWeight: "norma",
+      // Figma: Inter Medium 500
+      lineHeight: "1",
+      color: "onSurface",
+      // Figma: #363636
+      cursor: "pointer",
+      _hover: {
+        bg: "surface.container.high"
+        // Figma: #ebe7e1
+      },
+      // Figma active state: surface.container.low (NOT primary.container)
+      '&[data-active="true"]': {
+        bg: "surface.container.low",
+        // Figma: #f3f4e9 → surfaceContainerLow
+        color: "onSurface"
+      }
+    }
+  }
+});
 var switchRecipe = dev.defineSlotRecipe({
   className: "switchComponent",
   jsx: ["Switch", /Switch\.+/],
@@ -1929,7 +2150,7 @@ var switchRecipe = dev.defineSlotRecipe({
   }
 });
 var checkbox = dev.defineSlotRecipe({
-  slots: anatomy.checkboxAnatomy.keys(),
+  slots: ["root", "label", "control", "indicator", "group"],
   className: "checkbox",
   base: {
     root: {
@@ -2032,7 +2253,7 @@ var checkbox = dev.defineSlotRecipe({
 });
 var radioGroup = dev.defineSlotRecipe({
   className: "radio-group",
-  slots: anatomy.radioGroupAnatomy.keys(),
+  slots: ["root", "label", "item", "itemText", "itemControl", "indicator"],
   base: {
     root: {
       display: "flex",
@@ -2550,7 +2771,7 @@ var slider = dev.defineSlotRecipe({
 });
 var avatar = dev.defineSlotRecipe({
   className: "avatar",
-  slots: anatomy.avatarAnatomy.keys(),
+  slots: ["root", "image", "fallback"],
   base: {
     root: {
       display: "inline-flex",
@@ -2745,7 +2966,7 @@ var badge = dev.defineRecipe({
   }
 });
 var progress = dev.defineSlotRecipe({
-  slots: anatomy.progressAnatomy.keys(),
+  slots: ["root", "label", "track", "range", "valueText", "view", "circle", "circleTrack", "circleRange"],
   className: "progress",
   base: {
     root: {
@@ -2915,7 +3136,7 @@ var skeleton = dev.defineRecipe({
 });
 var toast = dev.defineSlotRecipe({
   className: "toast",
-  slots: anatomy.toastAnatomy.keys(),
+  slots: ["group", "root", "title", "description", "actionTrigger", "closeTrigger"],
   base: {
     root: {
       alignItems: "start",
@@ -3189,7 +3410,7 @@ var popover = dev.defineSlotRecipe({
 });
 var tooltip = dev.defineSlotRecipe({
   className: "tooltip",
-  slots: anatomy.tooltipAnatomy.keys(),
+  slots: ["trigger", "arrow", "arrowTip", "positioner", "content"],
   base: {
     content: {
       "--tooltip-bg": "colors.gray.solid.bg",
@@ -3452,6 +3673,540 @@ var stepper = dev.defineSlotRecipe({
     colorPalette: "primary"
   }
 });
+var contentCard = dev.defineSlotRecipe({
+  className: "content-card",
+  slots: [
+    "root",
+    "header",
+    "title",
+    "badgeBar",
+    "body",
+    "section",
+    "sectionTitle",
+    "separator",
+    "list",
+    "listItem"
+  ],
+  base: {
+    root: {
+      bg: "neutral.1",
+      borderRadius: "xl",
+      borderWidth: "2px",
+      borderColor: "border.default",
+      display: "flex",
+      flexDirection: "column",
+      w: "full"
+    },
+    header: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "4"
+    },
+    title: {
+      fontFamily: "heading",
+      fontWeight: "semibold",
+      fontSize: "2xl",
+      color: "fg.default",
+      fontVariationSettings: "'SOFT' 0, 'WONK' 1"
+    },
+    badgeBar: {
+      display: "flex",
+      flexWrap: "wrap",
+      gap: "2.5",
+      px: "2.5",
+      py: "1"
+    },
+    body: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "9",
+      fontSize: "xl",
+      lineHeight: "1.4",
+      color: "fg.default"
+    },
+    section: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "5"
+    },
+    sectionTitle: {
+      fontFamily: "heading",
+      fontWeight: "semibold",
+      fontSize: "2xl",
+      color: "fg.default",
+      fontVariationSettings: "'SOFT' 0, 'WONK' 1",
+      px: "2.5",
+      py: "2.5"
+    },
+    separator: {
+      borderTopWidth: "1px",
+      borderColor: "border.default",
+      w: "full",
+      my: "4"
+    },
+    list: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "5",
+      listStyleType: "disc",
+      ps: "8"
+    },
+    listItem: {
+      fontSize: "xl",
+      lineHeight: "1.4",
+      color: "fg.default"
+    }
+  },
+  variants: {
+    size: {
+      sm: {
+        root: { maxW: "xl", pt: "6", px: "6", pb: "6" },
+        title: { fontSize: "xl" },
+        body: { fontSize: "lg" },
+        listItem: { fontSize: "lg" }
+      },
+      md: {
+        root: { maxW: "2xl", pt: "10", px: "10", pb: "10", gap: "6" },
+        title: { fontSize: "2xl" },
+        body: { fontSize: "xl" },
+        listItem: { fontSize: "xl" }
+      },
+      lg: {
+        root: { maxW: "4xl", pt: "12", px: "12", pb: "12", gap: "8" },
+        title: { fontSize: "3xl" },
+        body: { fontSize: "xl" },
+        listItem: { fontSize: "xl" }
+      }
+    },
+    variant: {
+      elevated: {
+        root: { boxShadow: "lg", borderWidth: "0" }
+      },
+      outline: {
+        root: { borderWidth: "2px", borderColor: "border.default" }
+      },
+      flat: {
+        root: { borderWidth: "0", bg: "transparent" }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "outline"
+  }
+});
+var scenarioCard = dev.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
+  }
+});
+var scenarioQueue = dev.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"
+    }
+  }
+});
+var scenarioSettings = dev.defineSlotRecipe({
+  className: "scenario-settings",
+  // ── Token mappings verified against Figma MCP output (node 38:4186) ──
+  // Figma file: GaHmFfmvO4loUzuZS4TgEz — "Discourser Queue Right Accordion"
+  slots: [
+    "root",
+    "section",
+    "sectionTrigger",
+    "triggerLabel",
+    "sectionIndicator",
+    "sectionContent",
+    // Info panels (sections 1-4): surfacevariant bg, explanation card, adjustments
+    "infoPanel",
+    "explanationCard",
+    "explanationTitle",
+    "explanationList",
+    "explanationItem",
+    "levelLabel",
+    "adjustmentsRow",
+    // Radio panels (sections 5-6): neutral.1 bg, radio group, badge
+    "radioPanel",
+    "radioPanelTitle",
+    "radioCurrentRow",
+    "radioCurrentLabel",
+    "currentlyBadge"
+  ],
+  base: {
+    root: {
+      display: "flex",
+      flexDirection: "column",
+      width: "full",
+      cursor: "default"
+    },
+    section: {
+      // Remove the accordion's default borderBottom
+      borderBottom: "none",
+      width: "full"
+    },
+    sectionTrigger: {
+      // Layout — non-conflicting props only.
+      // fontSize, fontWeight, borderRadius, bg, color, py applied via css={{}} in component.
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      gap: "4",
+      width: "full",
+      px: "5",
+      // 20px — Figma spec
+      cursor: "pointer"
+    },
+    triggerLabel: {
+      flex: 1,
+      textAlign: "start",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap"
+    },
+    sectionIndicator: {
+      // color applied via css={{}} on ItemIndicator
+      flexShrink: 0,
+      _open: {
+        rotate: "180deg"
+      }
+    },
+    sectionContent: {
+      overflow: "hidden",
+      borderRadius: "0",
+      width: "full"
+    },
+    // ── Info Panel (sections 1-4) ─────────────────────────────────────────────
+    // Figma: bg = surfacevariant (#E1E4D5) — closest token: surface.container.highest (#E2E3D8)
+    infoPanel: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "5",
+      // 20px — Figma spec
+      p: "5",
+      // 20px — Figma spec
+      bg: "surface.container.highest",
+      width: "full"
+    },
+    // Figma: bg = neutral/99 (#FDFCF5), border = surfacevariant, rounded-8, p-20
+    explanationCard: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "4",
+      // 16px
+      p: "5",
+      // 20px
+      bg: "neutral.1",
+      // neutral[99] = #FDFCF5 ✓
+      borderWidth: "1px",
+      borderStyle: "solid",
+      borderColor: "surface.container.highest",
+      borderRadius: "l3"
+      // 8px
+    },
+    // Figma: Inter Medium 20px, --dark-surfacecontainerhigh (#282b24 ≈ onSurface)
+    explanationTitle: {
+      fontSize: "lg",
+      fontWeight: "semibold",
+      color: "onSurface",
+      lineHeight: "1"
+    },
+    explanationList: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "3",
+      // 12px between items
+      listStyleType: "disc",
+      pl: "5"
+      // indent for disc markers
+    },
+    explanationItem: {
+      fontSize: "sm",
+      // 16px — Figma spec
+      lineHeight: "1.4",
+      color: "fg.default"
+    },
+    // Figma: Inter Bold — the "Beginner:", "Intermediate:", "Advanced:" labels
+    levelLabel: {
+      fontWeight: "bold",
+      color: "fg.default"
+    },
+    adjustmentsRow: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "full"
+    },
+    // ── Radio Panel (sections 5-6) ────────────────────────────────────────────
+    // Figma: bg = neutral/99 (#FDFCF5)
+    radioPanel: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "6",
+      // 24px
+      p: "5",
+      // 20px
+      bg: "neutral.1",
+      // neutral[99] = #FDFCF5 ✓
+      width: "full"
+    },
+    // Figma: Inter Medium 20px, #363636 ≈ onSurface
+    radioPanelTitle: {
+      fontSize: "lg",
+      fontWeight: "semibold",
+      color: "onSurface",
+      lineHeight: "1"
+    },
+    radioCurrentRow: {
+      display: "flex",
+      alignItems: "center",
+      gap: "2.5",
+      // 10px — Figma spec
+      mt: "2.5"
+      // space below panel title
+    },
+    // Figma: Inter SemiBold 18px, #363636
+    radioCurrentLabel: {
+      fontSize: "md",
+      fontWeight: "semibold",
+      color: "onSurface",
+      whiteSpace: "nowrap"
+    },
+    // Figma: bg = dark-primary (#B1D18A) = inversePrimary, fully rounded pill
+    // px-16, py-6, font: Geist/12px, color: #2c2a27 ≈ fg.default
+    currentlyBadge: {
+      display: "inline-flex",
+      alignItems: "center",
+      gap: "1.5",
+      px: "4",
+      // 16px
+      py: "1.5",
+      // 6px
+      bg: "inversePrimary",
+      // #B1D18A light mode ✓
+      color: "fg.default",
+      borderRadius: "full",
+      fontSize: "xs",
+      // 12px
+      fontWeight: "normal",
+      lineHeight: "1",
+      whiteSpace: "nowrap"
+    }
+  }
+});
 var layerStyles = dev.defineLayerStyles({
   disabled: {
     value: {
@@ -3598,6 +4353,9 @@ var discourserPandaPreset = dev.definePreset({
         accordion,
         drawer,
         tabs,
+        // Navigation
+        breadcrumb,
+        navigationMenu,
         // Form Elements
         switchComponent: switchRecipe,
         checkbox,
@@ -3613,7 +4371,11 @@ var discourserPandaPreset = dev.definePreset({
         popover,
         tooltip,
         // Custom Components
-        stepper
+        stepper,
+        contentCard,
+        scenarioCard,
+        scenarioQueue,
+        scenarioSettings
       }
     }
   },
@@ -3637,5 +4399,5 @@ var discourserPandaPreset = dev.definePreset({
 exports.discourserPandaPreset = discourserPandaPreset;
 exports.material3Language = material3Language;
 exports.transformToPandaTheme = transformToPandaTheme;
-//# sourceMappingURL=chunk-QC44JPCA.cjs.map
-//# sourceMappingURL=chunk-QC44JPCA.cjs.map
+//# sourceMappingURL=chunk-PFWU7QSM.cjs.map
+//# sourceMappingURL=chunk-PFWU7QSM.cjs.map