@discourser/design-system 0.25.3 → 0.27.0

package/docs/token-name-mapping.md

@@ -1,10 +1,10 @@
 # Token Name Mapping
 
-> Generated from `dist/figma-variables.json`, `dist/figma-effect-styles.json`,
-> `dist/figma-text-styles.json`, `src/preset/semantic-tokens.ts`, and
-> `src/preset/colors/create-palette-bridge.ts`.
+> Generated from `tokens/export-to-figma/figma-variables.json`, `tokens/export-to-figma/figma-effect-styles.json`,
+> `tokens/export-to-figma/figma-text-styles.json`, `src/preset/semantic-tokens.ts`,
+> `src/preset/colors/create-palette-bridge.ts`, and `src/languages/material3.language.ts`.
 >
-> Version: 0.22.0 (matches `$metadata.version` in `figma-variables.json`)
+> Version: 0.25.3
 
 ---
 
@@ -195,7 +195,7 @@ Defined in `src/preset/index.ts:144–147` as semantic tokens:
 
 ## Section 4: Shadows (Effect Styles)
 
-6 base elevation tokens from `dist/figma-effect-styles.json`, plus semantic
+6 base elevation tokens from `tokens/export-to-figma/figma-effect-styles.json`, plus semantic
 aliases defined in `src/preset/shadows.ts`.
 
 ### Base Elevation Tokens
@@ -225,27 +225,115 @@ aliases defined in `src/preset/shadows.ts`.
 
 ## Section 5: Typography (Text Styles)
 
-15 entries from `dist/figma-text-styles.json`. The Figma text style name is
-identical to the Panda `textStyle` name — no transformation needed.
-
-| Figma Text Style | Panda `textStyle` Name | Font Family | Font Size | Font Weight | Line Height | Example Usage                 |
-| ---------------- | ---------------------- | ----------- | --------- | ----------- | ----------- | ----------------------------- |
-| `displayLarge`   | `displayLarge`         | Fraunces    | 57px      | 400         | 64px        | `textStyle: 'displayLarge'`   |
-| `displayMedium`  | `displayMedium`        | Fraunces    | 45px      | 400         | 52px        | `textStyle: 'displayMedium'`  |
-| `displaySmall`   | `displaySmall`         | Fraunces    | 36px      | 400         | 44px        | `textStyle: 'displaySmall'`   |
-| `headlineLarge`  | `headlineLarge`        | Fraunces    | 32px      | 400         | 40px        | `textStyle: 'headlineLarge'`  |
-| `headlineMedium` | `headlineMedium`       | Fraunces    | 28px      | 400         | 36px        | `textStyle: 'headlineMedium'` |
-| `headlineSmall`  | `headlineSmall`        | Fraunces    | 24px      | 400         | 32px        | `textStyle: 'headlineSmall'`  |
-| `titleLarge`     | `titleLarge`           | Poppins     | 22px      | 500         | 28px        | `textStyle: 'titleLarge'`     |
-| `titleMedium`    | `titleMedium`          | Poppins     | 16px      | 500         | 24px        | `textStyle: 'titleMedium'`    |
-| `titleSmall`     | `titleSmall`           | Poppins     | 14px      | 500         | 20px        | `textStyle: 'titleSmall'`     |
-| `bodyLarge`      | `bodyLarge`            | Poppins     | 16px      | 400         | 24px        | `textStyle: 'bodyLarge'`      |
-| `bodyMedium`     | `bodyMedium`           | Poppins     | 14px      | 400         | 20px        | `textStyle: 'bodyMedium'`     |
-| `bodySmall`      | `bodySmall`            | Poppins     | 12px      | 400         | 16px        | `textStyle: 'bodySmall'`      |
-| `labelLarge`     | `labelLarge`           | Poppins     | 14px      | 500         | 20px        | `textStyle: 'labelLarge'`     |
-| `labelMedium`    | `labelMedium`          | Poppins     | 12px      | 500         | 16px        | `textStyle: 'labelMedium'`    |
-| `labelSmall`     | `labelSmall`           | Poppins     | 11px      | 500         | 16px        | `textStyle: 'labelSmall'`     |
-
-> No mismatches in this section — Figma text style names map 1:1 to Panda
-> `textStyle` names. Display and headline styles use **Fraunces** (serif);
-> all other styles use **Poppins** (sans-serif).
+51 entries from `tokens/export-to-figma/figma-text-styles.json`. The system
+uses slash-hierarchy naming (`Category/Size/Weight`) with all weight variants
+per scale step — upgraded from 15 flat styles (one per scale step, default
+weight only) to 51 styles covering all variants.
+
+**Description field convention:** Each Figma text style carries a description
+field in the format `dds:typography.scale.{scaleName}.weights.{weightName}`.
+This is the semantic bridge the Figma MCP reads to resolve back to the DDS token.
+
+> **pandaTextStyle uses the scale step name, not the weight variant.** Panda
+> `textStyle` tokens are geometry-only (size, line height, letter spacing, font
+> family). Font weight is applied separately via the `fontWeight` utility.
+> For example: `textStyle: 'headlineSmall'` sets geometry; add
+> `fontWeight: 600` (or `'semiBold'`) separately for the SemiBold variant.
+
+### Display (Fraunces)
+
+| Figma Text Style | Font | Weight | Size | Line Height | Letter Spacing | DDS Token Path | Panda textStyle | Default? |
+| --- | --- | --- | --- | --- | --- | --- | --- | --- |
+| `Display/Large/Regular` | Fraunces | Regular (400) | 57px | 64px | -0.25 | `typography.scale.displayLarge.weights.regular` | `displayLarge` | ✓ |
+| `Display/Large/SemiBold` | Fraunces | SemiBold (600) | 57px | 64px | -0.25 | `typography.scale.displayLarge.weights.semiBold` | `displayLarge` | |
+| `Display/Medium/Regular` | Fraunces | Regular (400) | 45px | 52px | 0 | `typography.scale.displayMedium.weights.regular` | `displayMedium` | ✓ |
+| `Display/Medium/SemiBold` | Fraunces | SemiBold (600) | 45px | 52px | 0 | `typography.scale.displayMedium.weights.semiBold` | `displayMedium` | |
+| `Display/Small/Regular` | Fraunces | Regular (400) | 36px | 44px | 0 | `typography.scale.displaySmall.weights.regular` | `displaySmall` | ✓ |
+| `Display/Small/SemiBold` | Fraunces | SemiBold (600) | 36px | 44px | 0 | `typography.scale.displaySmall.weights.semiBold` | `displaySmall` | |
+
+### Headline (Fraunces)
+
+| Figma Text Style | Font | Weight | Size | Line Height | Letter Spacing | DDS Token Path | Panda textStyle | Default? |
+| --- | --- | --- | --- | --- | --- | --- | --- | --- |
+| `Headline/Large/Light` | Fraunces | Light (300) | 32px | 40px | 0 | `typography.scale.headlineLarge.weights.light` | `headlineLarge` | |
+| `Headline/Large/Regular` | Fraunces | Regular (400) | 32px | 40px | 0 | `typography.scale.headlineLarge.weights.regular` | `headlineLarge` | ✓ |
+| `Headline/Large/SemiBold` | Fraunces | SemiBold (600) | 32px | 40px | 0 | `typography.scale.headlineLarge.weights.semiBold` | `headlineLarge` | |
+| `Headline/Medium/Light` | Fraunces | Light (300) | 28px | 36px | 0 | `typography.scale.headlineMedium.weights.light` | `headlineMedium` | |
+| `Headline/Medium/Regular` | Fraunces | Regular (400) | 28px | 36px | 0 | `typography.scale.headlineMedium.weights.regular` | `headlineMedium` | ✓ |
+| `Headline/Medium/SemiBold` | Fraunces | SemiBold (600) | 28px | 36px | 0 | `typography.scale.headlineMedium.weights.semiBold` | `headlineMedium` | |
+| `Headline/Small/Light` | Fraunces | Light (300) | 24px | 32px | 0 | `typography.scale.headlineSmall.weights.light` | `headlineSmall` | |
+| `Headline/Small/Regular` | Fraunces | Regular (400) | 24px | 32px | 0 | `typography.scale.headlineSmall.weights.regular` | `headlineSmall` | ✓ |
+| `Headline/Small/SemiBold` | Fraunces | SemiBold (600) | 24px | 32px | 0 | `typography.scale.headlineSmall.weights.semiBold` | `headlineSmall` | |
+
+### Title (Poppins)
+
+| Figma Text Style | Font | Weight | Size | Line Height | Letter Spacing | DDS Token Path | Panda textStyle | Default? |
+| --- | --- | --- | --- | --- | --- | --- | --- | --- |
+| `Title/Large/Regular` | Poppins | Regular (400) | 22px | 28px | 0 | `typography.scale.titleLarge.weights.regular` | `titleLarge` | |
+| `Title/Large/Medium` | Poppins | Medium (500) | 22px | 28px | 0 | `typography.scale.titleLarge.weights.medium` | `titleLarge` | ✓ |
+| `Title/Large/SemiBold` | Poppins | SemiBold (600) | 22px | 28px | 0 | `typography.scale.titleLarge.weights.semiBold` | `titleLarge` | |
+| `Title/Large/Bold` | Poppins | Bold (700) | 22px | 28px | 0 | `typography.scale.titleLarge.weights.bold` | `titleLarge` | |
+| `Title/Medium/Regular` | Poppins | Regular (400) | 16px | 24px | 0.15 | `typography.scale.titleMedium.weights.regular` | `titleMedium` | |
+| `Title/Medium/Medium` | Poppins | Medium (500) | 16px | 24px | 0.15 | `typography.scale.titleMedium.weights.medium` | `titleMedium` | ✓ |
+| `Title/Medium/SemiBold` | Poppins | SemiBold (600) | 16px | 24px | 0.15 | `typography.scale.titleMedium.weights.semiBold` | `titleMedium` | |
+| `Title/Medium/Bold` | Poppins | Bold (700) | 16px | 24px | 0.15 | `typography.scale.titleMedium.weights.bold` | `titleMedium` | |
+| `Title/Small/Regular` | Poppins | Regular (400) | 14px | 20px | 0.1 | `typography.scale.titleSmall.weights.regular` | `titleSmall` | |
+| `Title/Small/Medium` | Poppins | Medium (500) | 14px | 20px | 0.1 | `typography.scale.titleSmall.weights.medium` | `titleSmall` | ✓ |
+| `Title/Small/SemiBold` | Poppins | SemiBold (600) | 14px | 20px | 0.1 | `typography.scale.titleSmall.weights.semiBold` | `titleSmall` | |
+| `Title/Small/Bold` | Poppins | Bold (700) | 14px | 20px | 0.1 | `typography.scale.titleSmall.weights.bold` | `titleSmall` | |
+
+### Body (Poppins)
+
+| Figma Text Style | Font | Weight | Size | Line Height | Letter Spacing | DDS Token Path | Panda textStyle | Default? |
+| --- | --- | --- | --- | --- | --- | --- | --- | --- |
+| `Body/Large/Light` | Poppins | Light (300) | 18px | 28px | 0.5 | `typography.scale.bodyLarge.weights.light` | `bodyLarge` | |
+| `Body/Large/Regular` | Poppins | Regular (400) | 18px | 28px | 0.5 | `typography.scale.bodyLarge.weights.regular` | `bodyLarge` | ✓ |
+| `Body/Large/Medium` | Poppins | Medium (500) | 18px | 28px | 0.5 | `typography.scale.bodyLarge.weights.medium` | `bodyLarge` | |
+| `Body/Large/SemiBold` | Poppins | SemiBold (600) | 18px | 28px | 0.5 | `typography.scale.bodyLarge.weights.semiBold` | `bodyLarge` | |
+| `Body/Medium/Light` | Poppins | Light (300) | 14px | 20px | 0.25 | `typography.scale.bodyMedium.weights.light` | `bodyMedium` | |
+| `Body/Medium/Regular` | Poppins | Regular (400) | 14px | 20px | 0.25 | `typography.scale.bodyMedium.weights.regular` | `bodyMedium` | ✓ |
+| `Body/Medium/Medium` | Poppins | Medium (500) | 14px | 20px | 0.25 | `typography.scale.bodyMedium.weights.medium` | `bodyMedium` | |
+| `Body/Medium/SemiBold` | Poppins | SemiBold (600) | 14px | 20px | 0.25 | `typography.scale.bodyMedium.weights.semiBold` | `bodyMedium` | |
+| `Body/Small/Light` | Poppins | Light (300) | 12px | 16px | 0.4 | `typography.scale.bodySmall.weights.light` | `bodySmall` | |
+| `Body/Small/Regular` | Poppins | Regular (400) | 12px | 16px | 0.4 | `typography.scale.bodySmall.weights.regular` | `bodySmall` | ✓ |
+| `Body/Small/Medium` | Poppins | Medium (500) | 12px | 16px | 0.4 | `typography.scale.bodySmall.weights.medium` | `bodySmall` | |
+| `Body/Small/SemiBold` | Poppins | SemiBold (600) | 12px | 16px | 0.4 | `typography.scale.bodySmall.weights.semiBold` | `bodySmall` | |
+
+### Label (Poppins)
+
+| Figma Text Style | Font | Weight | Size | Line Height | Letter Spacing | DDS Token Path | Panda textStyle | Default? |
+| --- | --- | --- | --- | --- | --- | --- | --- | --- |
+| `Label/Large/Light` | Poppins | Light (300) | 14px | 20px | 0.1 | `typography.scale.labelLarge.weights.light` | `labelLarge` | |
+| `Label/Large/Medium` | Poppins | Medium (500) | 14px | 20px | 0.1 | `typography.scale.labelLarge.weights.medium` | `labelLarge` | ✓ |
+| `Label/Large/SemiBold` | Poppins | SemiBold (600) | 14px | 20px | 0.1 | `typography.scale.labelLarge.weights.semiBold` | `labelLarge` | |
+| `Label/Large/Bold` | Poppins | Bold (700) | 14px | 20px | 0.1 | `typography.scale.labelLarge.weights.bold` | `labelLarge` | |
+| `Label/Medium/Light` | Poppins | Light (300) | 12px | 16px | 0.5 | `typography.scale.labelMedium.weights.light` | `labelMedium` | |
+| `Label/Medium/Medium` | Poppins | Medium (500) | 12px | 16px | 0.5 | `typography.scale.labelMedium.weights.medium` | `labelMedium` | ✓ |
+| `Label/Medium/SemiBold` | Poppins | SemiBold (600) | 12px | 16px | 0.5 | `typography.scale.labelMedium.weights.semiBold` | `labelMedium` | |
+| `Label/Medium/Bold` | Poppins | Bold (700) | 12px | 16px | 0.5 | `typography.scale.labelMedium.weights.bold` | `labelMedium` | |
+| `Label/Small/Light` | Poppins | Light (300) | 11px | 16px | 0.5 | `typography.scale.labelSmall.weights.light` | `labelSmall` | |
+| `Label/Small/Medium` | Poppins | Medium (500) | 11px | 16px | 0.5 | `typography.scale.labelSmall.weights.medium` | `labelSmall` | ✓ |
+| `Label/Small/SemiBold` | Poppins | SemiBold (600) | 11px | 16px | 0.5 | `typography.scale.labelSmall.weights.semiBold` | `labelSmall` | |
+| `Label/Small/Bold` | Poppins | Bold (700) | 11px | 16px | 0.5 | `typography.scale.labelSmall.weights.bold` | `labelSmall` | |
+
+---
+
+## Section 6: Figma MCP Resolution — What the AI Sees
+
+When the Figma Desktop MCP reads a node via `get_design_context`, it returns
+structured data. This table shows what each token type looks like in MCP
+output and how it resolves to a DDS token.
+
+| Token Type | What MCP Returns | How to Resolve to DDS Token |
+| --- | --- | --- |
+| Color fill | `boundVariables.fills[].id` → variable name e.g. `"Semantic/primary"` | Look up `figmaPath` in `token-name-mapping.json` `semantic` array → `pandaToken` |
+| Spacing/padding | `boundVariables.paddingLeft.id` → variable name e.g. `"Spacing & Shape/spacing/md"` | Look up `figmaPath` in `spacingAndShape` array → `pandaToken` + `pandaCategory` |
+| Border radius | `boundVariables.cornerRadius.id` → variable name e.g. `"Spacing & Shape/radii/medium"` | Look up `figmaPath` in `spacingAndShape` array |
+| Shadow/elevation | `effects[].styleId` → effect style name e.g. `"elevation/level2"` | Look up `figmaEffectStyle` in `effectStyles` array → `pandaToken` |
+| Text style | `style.textStyleId` → text style name e.g. `"Headline/Small/SemiBold"` | Look up `figmaTextStyle` in `textStyles` array → `ddsTokenPath` and `pandaTextStyle` |
+| Text style description | `style.description` = `"dds:typography.scale.headlineSmall.weights.semiBold"` | Parse after `"dds:"` → direct DDS token path |
+
+> **The text style description field is the most direct resolution path for
+> typography** — no lookup table needed. The MCP returns it as part of the
+> style metadata and it maps directly to the `DesignLanguageContract` token
+> path (strip the `dds:` prefix to get `typography.scale.{step}.weights.{weight}`).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@discourser/design-system",
-  "version": "0.25.3",
+  "version": "0.27.0",
   "description": "Aesthetic-agnostic design system with Panda CSS and Ark UI",
   "type": "module",
   "publishConfig": {
@@ -198,7 +198,7 @@
   ],
   "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 codex:generate",
+    "build": "pnpm build:panda && pnpm typecheck && pnpm build:lib && pnpm build:types && pnpm exports:validate && pnpm catalog:generate && pnpm codex:generate",
     "build:panda": "panda codegen",
     "build:css": "panda cssgen --outfile dist/styles.css",
     "build:lib": "tsup",
@@ -233,6 +233,7 @@
     "version": "changeset version",
     "ci:version": "pnpm exec changeset version",
     "release": "pnpm build && changeset publish --access public",
+    "catalog:generate": "tsx scripts/generate-component-catalog.ts",
     "exports:validate": "tsx scripts/validate-exports.ts"
   },
   "peerDependencies": {

package/src/components/Icons/LeftArrowIcon.tsx

@@ -0,0 +1,28 @@
+import { ark } from '@ark-ui/react/factory';
+import type { ComponentProps } from 'react';
+import { styled } from 'styled-system/jsx';
+
+const StyledSvg = styled(ark.svg);
+
+export type LeftArrowIconProps = ComponentProps<typeof StyledSvg>;
+
+export const LeftArrowIcon = (props: LeftArrowIconProps) => (
+  <StyledSvg
+    viewBox="0 0 21 17"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <path
+      d="M9.10036 11.988C9.33515 12.2116 9.34422 12.5831 9.12063 12.8178C8.89704 13.0526 8.52554 13.0617 8.29083 12.8381L9.10036 11.988ZM4.18214 8.92503C3.94736 8.70144 3.93828 8.32993 4.16187 8.09523C4.38546 7.86045 4.75697 7.85137 4.99167 8.07496L4.18214 8.92503ZM4.99167 8.92503C4.75697 9.14862 4.38546 9.13954 4.16187 8.90476C3.93828 8.67006 3.94736 8.29855 4.18214 8.07496L4.99167 8.92503ZM8.29083 4.16192C8.52554 3.93836 8.89704 3.94742 9.12063 4.18216C9.34422 4.4169 9.33515 4.78843 9.10036 5.01199L8.29083 4.16192ZM4.58691 9.08695C4.26275 9.08695 3.99995 8.82415 3.99995 8.5C3.99995 8.17584 4.26275 7.91304 4.58691 7.91304V9.08695ZM15.5434 7.91304C15.8676 7.91304 16.1304 8.17584 16.1304 8.5C16.1304 8.82415 15.8676 9.08695 15.5434 9.08695V7.91304ZM8.29083 12.8381L4.18214 8.92503L4.99167 8.07496L9.10036 11.988L8.29083 12.8381ZM4.18214 8.07496L8.29083 4.16192L9.10036 5.01199L4.99167 8.92503L4.18214 8.07496ZM4.58691 7.91304H15.5434V9.08695H4.58691V7.91304Z"
+      fill="currentColor"
+    />
+    <path
+      d="M9.10036 11.988C9.33515 12.2116 9.34422 12.5831 9.12063 12.8178C8.89704 13.0526 8.52554 13.0617 8.29083 12.8381M9.10036 11.988L8.29083 12.8381M9.10036 11.988L4.99167 8.07496M8.29083 12.8381L4.18214 8.92503M4.18214 8.92503C3.94736 8.70144 3.93828 8.32993 4.16187 8.09523C4.38546 7.86045 4.75697 7.85137 4.99167 8.07496M4.18214 8.92503L4.99167 8.07496M4.99167 8.92503C4.75697 9.14862 4.38546 9.13954 4.16187 8.90476C3.93828 8.67006 3.94736 8.29855 4.18214 8.07496M4.99167 8.92503L4.18214 8.07496M4.99167 8.92503L9.10036 5.01199M4.18214 8.07496L8.29083 4.16192M8.29083 4.16192C8.52554 3.93836 8.89704 3.94742 9.12063 4.18216C9.34422 4.4169 9.33515 4.78843 9.10036 5.01199M8.29083 4.16192L9.10036 5.01199M4.58691 9.08695C4.26275 9.08695 3.99995 8.82415 3.99995 8.5C3.99995 8.17584 4.26275 7.91304 4.58691 7.91304M4.58691 9.08695V7.91304M4.58691 9.08695H15.5434M4.58691 7.91304H15.5434M15.5434 7.91304C15.8676 7.91304 16.1304 8.17584 16.1304 8.5C16.1304 8.82415 15.8676 9.08695 15.5434 9.08695M15.5434 7.91304V9.08695"
+      stroke="currentColor"
+      strokeWidth="0.75"
+    />
+  </StyledSvg>
+);

package/src/components/Icons/RightArrowIcon.tsx

@@ -8,7 +8,7 @@ export type RightArrowIconProps = ComponentProps<typeof StyledSvg>;
 
 export const RightArrowIcon = (props: RightArrowIconProps) => (
   <StyledSvg
-    viewBox="0 0 19 19"
+    viewBox="0 0 21 17"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
     width="1em"
@@ -16,8 +16,13 @@ export const RightArrowIcon = (props: RightArrowIconProps) => (
     {...props}
   >
     <path
-      d="M15.9172 13.2266H3.74219V11.2266H15.9172L10.3172 5.62656L11.7422 4.22656L19.7422 12.2266L11.7422 20.2266L10.3172 18.8266L15.9172 13.2266Z"
+      d="M11.03 11.988C10.7952 12.2116 10.7861 12.5831 11.0097 12.8178C11.2333 13.0526 11.6048 13.0617 11.8395 12.8381L11.03 11.988ZM15.9482 8.92503C16.183 8.70144 16.1921 8.32993 15.9685 8.09523C15.7449 7.86045 15.3734 7.85137 15.1387 8.07496L15.9482 8.92503ZM15.1387 8.92503C15.3734 9.14862 15.7449 9.13954 15.9685 8.90476C16.1921 8.67006 16.183 8.29855 15.9482 8.07496L15.1387 8.92503ZM11.8395 4.16192C11.6048 3.93836 11.2333 3.94742 11.0097 4.18216C10.7861 4.4169 10.7952 4.78843 11.03 5.01199L11.8395 4.16192ZM15.5435 9.08695C15.8676 9.08695 16.1304 8.82415 16.1304 8.5C16.1304 8.17584 15.8676 7.91304 15.5435 7.91304V9.08695ZM4.58696 7.91304C4.26279 7.91304 4 8.17584 4 8.5C4 8.82415 4.26279 9.08695 4.58696 9.08695V7.91304ZM11.8395 12.8381L15.9482 8.92503L15.1387 8.07496L11.03 11.988L11.8395 12.8381ZM15.9482 8.07496L11.8395 4.16192L11.03 5.01199L15.1387 8.92503L15.9482 8.07496ZM15.5435 7.91304H4.58696V9.08695H15.5435V7.91304Z"
       fill="currentColor"
     />
+    <path
+      d="M11.03 11.988C10.7952 12.2116 10.7861 12.5831 11.0097 12.8178C11.2333 13.0526 11.6048 13.0617 11.8395 12.8381M11.03 11.988L11.8395 12.8381M11.03 11.988L15.1387 8.07496M11.8395 12.8381L15.9482 8.92503M15.9482 8.92503C16.183 8.70144 16.1921 8.32993 15.9685 8.09523C15.7449 7.86045 15.3734 7.85137 15.1387 8.07496M15.9482 8.92503L15.1387 8.07496M15.1387 8.92503C15.3734 9.14862 15.7449 9.13954 15.9685 8.90476C16.1921 8.67006 16.183 8.29855 15.9482 8.07496M15.1387 8.92503L15.9482 8.07496M15.1387 8.92503L11.03 5.01199M15.9482 8.07496L11.8395 4.16192M11.8395 4.16192C11.6048 3.93836 11.2333 3.94742 11.0097 4.18216C10.7861 4.4169 10.7952 4.78843 11.03 5.01199M11.8395 4.16192L11.03 5.01199M15.5435 9.08695C15.8676 9.08695 16.1304 8.82415 16.1304 8.5C16.1304 8.17584 15.8676 7.91304 15.5435 7.91304M15.5435 9.08695V7.91304M15.5435 9.08695H4.58696M15.5435 7.91304H4.58696M4.58696 7.91304C4.26279 7.91304 4 8.17584 4 8.5C4 8.82415 4.26279 9.08695 4.58696 9.08695M4.58696 7.91304V9.08695"
+      stroke="currentColor"
+      strokeWidth="0.75"
+    />
   </StyledSvg>
 );

package/src/components/Icons/index.ts

@@ -9,6 +9,7 @@ export { ScenarioIcon, type ScenarioIconProps } from './ScenarioIcon';
 export { HelpIcon, type HelpIconProps } from './HelpIcon';
 export { AccountIcon, type AccountIconProps } from './AccountIcon';
 export { RightArrowIcon, type RightArrowIconProps } from './RightArrowIcon';
+export { LeftArrowIcon, type LeftArrowIconProps } from './LeftArrowIcon';
 export { ChevronUpIcon, type ChevronUpIconProps } from './ChevronUpIcon';
 export { DiscourserLogo, type DiscourserLogoProps } from './DiscourserLogo';
 export { TimerIcon, type TimerIconProps } from './TimerIcon';

package/src/components/__tests__/AbsoluteCenter.test.tsx

@@ -0,0 +1,31 @@
+/* global describe, it, expect */
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { AbsoluteCenter } from '../AbsoluteCenter';
+
+describe('AbsoluteCenter', () => {
+  it('renders children', () => {
+    render(<AbsoluteCenter>Centered content</AbsoluteCenter>);
+    expect(screen.getByText('Centered content')).toBeDefined();
+  });
+
+  it('renders as a div element', () => {
+    const { container } = render(<AbsoluteCenter>Content</AbsoluteCenter>);
+    expect(container.querySelector('div')).toBeDefined();
+  });
+
+  it('accepts and passes through className', () => {
+    const { container } = render(
+      <AbsoluteCenter className="custom-class">Content</AbsoluteCenter>,
+    );
+    const el = container.querySelector('.custom-class');
+    expect(el).toBeDefined();
+  });
+
+  it('accepts and forwards arbitrary HTML attributes', () => {
+    render(
+      <AbsoluteCenter data-testid="absolute-center">Content</AbsoluteCenter>,
+    );
+    expect(screen.getByTestId('absolute-center')).toBeDefined();
+  });
+});

package/src/components/__tests__/Divider.test.tsx

@@ -0,0 +1,38 @@
+/* global describe, it, expect */
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Divider } from '../divider';
+
+describe('Divider', () => {
+  it('renders a div with role="separator" by default', () => {
+    render(<Divider />);
+    expect(screen.getByRole('separator')).toBeDefined();
+  });
+
+  it('has aria-orientation="horizontal" by default', () => {
+    render(<Divider />);
+    const el = screen.getByRole('separator');
+    expect(el.getAttribute('aria-orientation')).toBe('horizontal');
+  });
+
+  it('renders label text when label prop is provided', () => {
+    render(<Divider label="OR" />);
+    expect(screen.getByText('OR')).toBeDefined();
+  });
+
+  it('renders aria-orientation="vertical" when orientation="vertical"', () => {
+    render(<Divider orientation="vertical" />);
+    const el = screen.getByRole('separator');
+    expect(el.getAttribute('aria-orientation')).toBe('vertical');
+  });
+
+  it('renders without label when no label prop provided', () => {
+    const { container } = render(<Divider />);
+    expect(container.querySelector('span')).toBeNull();
+  });
+
+  it('accepts className passthrough', () => {
+    const { container } = render(<Divider className="my-divider" />);
+    expect(container.querySelector('.my-divider')).toBeDefined();
+  });
+});

package/src/components/__tests__/Group.test.tsx

@@ -0,0 +1,34 @@
+/* global describe, it, expect */
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Group } from '../Group';
+
+describe('Group', () => {
+  it('renders children', () => {
+    render(<Group>Child content</Group>);
+    expect(screen.getByText('Child content')).toBeDefined();
+  });
+
+  it('renders as a div', () => {
+    const { container } = render(<Group>Content</Group>);
+    expect(container.querySelector('div')).toBeDefined();
+  });
+
+  it('accepts data-testid', () => {
+    render(<Group data-testid="my-group">Content</Group>);
+    expect(screen.getByTestId('my-group')).toBeDefined();
+  });
+
+  it('renders all children', () => {
+    render(
+      <Group>
+        <span>First</span>
+        <span>Second</span>
+        <span>Third</span>
+      </Group>,
+    );
+    expect(screen.getByText('First')).toBeDefined();
+    expect(screen.getByText('Second')).toBeDefined();
+    expect(screen.getByText('Third')).toBeDefined();
+  });
+});

package/src/components/__tests__/Icon.test.tsx

@@ -0,0 +1,31 @@
+/* global describe, it, expect */
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Icon } from '../Icon';
+
+describe('Icon', () => {
+  it('renders as an svg element', () => {
+    const { container } = render(<Icon />);
+    expect(container.querySelector('svg')).toBeDefined();
+  });
+
+  it('renders children (inner SVG content)', () => {
+    const { container } = render(
+      <Icon>
+        <circle cx="12" cy="12" r="10" />
+      </Icon>,
+    );
+    expect(container.querySelector('circle')).toBeDefined();
+  });
+
+  it('accepts className passthrough', () => {
+    const { container } = render(<Icon className="custom-icon" />);
+    expect(container.querySelector('.custom-icon')).toBeDefined();
+  });
+
+  it('accepts aria-label for accessibility', () => {
+    const { container } = render(<Icon aria-label="circle icon" />);
+    const svg = container.querySelector('svg');
+    expect(svg?.getAttribute('aria-label')).toBe('circle icon');
+  });
+});

package/src/components/__tests__/SettingsPopover.test.tsx

@@ -0,0 +1,39 @@
+/* global describe, it, expect */
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { SettingsPopover } from '../SettingsPopover';
+
+const defaultProps = {
+  userName: 'Jane Doe',
+  userTier: 'Pro',
+  userEmail: 'jane@example.com',
+  actions: [{ key: 'logout', label: 'Logout', onClick: () => {} }],
+};
+
+describe('SettingsPopover', () => {
+  it('renders the trigger button with userName', () => {
+    render(<SettingsPopover {...defaultProps} />);
+    expect(screen.getByText('Jane Doe')).toBeDefined();
+  });
+
+  it('renders userTier in the trigger', () => {
+    render(<SettingsPopover {...defaultProps} />);
+    expect(screen.getByText('Pro')).toBeDefined();
+  });
+
+  it('trigger button has correct aria-label (default: "User settings")', () => {
+    render(<SettingsPopover {...defaultProps} />);
+    expect(screen.getByRole('button', { name: 'User settings' })).toBeDefined();
+  });
+
+  it('accepts custom ariaLabel prop', () => {
+    render(<SettingsPopover {...defaultProps} ariaLabel="Account menu" />);
+    expect(screen.getByRole('button', { name: 'Account menu' })).toBeDefined();
+  });
+
+  it('renders the trigger as a button element', () => {
+    render(<SettingsPopover {...defaultProps} />);
+    const btn = screen.getByRole('button', { name: 'User settings' });
+    expect(btn.tagName.toLowerCase()).toBe('button');
+  });
+});

package/src/components/__tests__/StudioControls.test.tsx

@@ -0,0 +1,59 @@
+/* global describe, it, expect */
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { StudioControls } from '../StudioControls';
+
+const defaultProps = {
+  scenarioName: 'UX Interview Practice',
+  scenarioFocus: 'Technical Communication',
+  scenarioLevel: 'beginner' as const,
+};
+
+describe('StudioControls', () => {
+  it('renders the component without crashing', () => {
+    const { container } = render(<StudioControls {...defaultProps} />);
+    expect(container.firstChild).toBeDefined();
+  });
+
+  it('renders scenarioName text in the document', () => {
+    render(<StudioControls {...defaultProps} />);
+    expect(screen.getByText('UX Interview Practice')).toBeDefined();
+  });
+
+  it('renders scenarioFocus text in the document', () => {
+    render(<StudioControls {...defaultProps} />);
+    expect(screen.getByText(/Technical Communication/)).toBeDefined();
+  });
+
+  it('renders "Scenario Settings" accordion trigger text', () => {
+    render(<StudioControls {...defaultProps} />);
+    // "Scenario Settings" appears in both the accordion trigger and the settings card heading
+    const matches = screen.getAllByText('Scenario Settings');
+    expect(matches.length).toBeGreaterThan(0);
+  });
+
+  it('renders "Audio Output" accordion trigger text', () => {
+    render(<StudioControls {...defaultProps} />);
+    expect(screen.getByText('Audio Output')).toBeDefined();
+  });
+
+  it('renders "Microphone Input" accordion trigger text', () => {
+    render(<StudioControls {...defaultProps} />);
+    expect(screen.getByText('Microphone Input')).toBeDefined();
+  });
+
+  it('renders "A/V Recording" accordion trigger text', () => {
+    render(<StudioControls {...defaultProps} />);
+    expect(screen.getByText('A/V Recording')).toBeDefined();
+  });
+
+  it('renders "Display Timer" accordion trigger text', () => {
+    render(<StudioControls {...defaultProps} />);
+    expect(screen.getByText('Display Timer')).toBeDefined();
+  });
+
+  it('renders "Hide Interviewers" accordion trigger text', () => {
+    render(<StudioControls {...defaultProps} />);
+    expect(screen.getByText('Hide Interviewers')).toBeDefined();
+  });
+});

package/src/components/__tests__/Toaster.test.tsx

@@ -0,0 +1,24 @@
+/* global describe, it, expect */
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Toaster, toaster } from '../Toast';
+
+describe('Toaster', () => {
+  it('toaster imperative API exists and is not null', () => {
+    expect(toaster).toBeDefined();
+    expect(toaster).not.toBeNull();
+  });
+
+  it('toaster has a create method', () => {
+    expect(typeof toaster.create).toBe('function');
+  });
+
+  it('Toaster is a function (renderable component)', () => {
+    expect(typeof Toaster).toBe('function');
+  });
+
+  it('renders without crashing', () => {
+    const { container } = render(<Toaster />);
+    expect(container).toBeDefined();
+  });
+});

package/src/components/index.ts

@@ -65,6 +65,7 @@ export {
   RightArrowIcon,
   type RightArrowIconProps,
 } from './Icons/RightArrowIcon';
+export { LeftArrowIcon, type LeftArrowIconProps } from './Icons/LeftArrowIcon';
 export { ChevronUpIcon, type ChevronUpIconProps } from './Icons/ChevronUpIcon';
 export {
   DiscourserLogo,

package/src/contracts/design-language.contract.ts

@@ -83,33 +83,82 @@ export interface SemanticColors {
 }
 
 // Typography Types
+
+export type WeightName =
+  | 'thin'
+  | 'light'
+  | 'regular'
+  | 'medium'
+  | 'semiBold'
+  | 'bold'
+  | 'extraBold';
+
+export interface FontWeightMap {
+  '100'?: string;
+  '200'?: string;
+  '300'?: string;
+  '400'?: string;
+  '500'?: string;
+  '600'?: string;
+  '700'?: string;
+  '800'?: string;
+  '900'?: string;
+}
+
+export interface FontConfig {
+  family: string;
+  figmaName: string;
+  weightMap: FontWeightMap;
+}
+
+export interface TypeGeometry {
+  fontSize: string;
+  lineHeight: string;
+  letterSpacing: string;
+  fontFamily: 'display' | 'body' | 'mono';
+  fontVariationSettings?: string;
+}
+
+export interface WeightVariant {
+  name: WeightName;
+  fontWeight: string;
+  fontVariationSettings?: string;
+}
+
+export interface TypeScaleStep {
+  geometry: TypeGeometry;
+  defaultWeight: WeightName;
+  weights: Partial<Record<WeightName, WeightVariant>>;
+}
+
 export interface TypographyConfig {
   fonts: {
-    display: string;
-    body: string;
-    mono: string;
+    display: FontConfig;
+    body: FontConfig;
+    mono: FontConfig;
   };
   scale: TypographyScale;
 }
 
 export interface TypographyScale {
-  displayLarge: TypeStyle;
-  displayMedium: TypeStyle;
-  displaySmall: TypeStyle;
-  headlineLarge: TypeStyle;
-  headlineMedium: TypeStyle;
-  headlineSmall: TypeStyle;
-  titleLarge: TypeStyle;
-  titleMedium: TypeStyle;
-  titleSmall: TypeStyle;
-  bodyLarge: TypeStyle;
-  bodyMedium: TypeStyle;
-  bodySmall: TypeStyle;
-  labelLarge: TypeStyle;
-  labelMedium: TypeStyle;
-  labelSmall: TypeStyle;
-}
-
+  displayLarge: TypeScaleStep;
+  displayMedium: TypeScaleStep;
+  displaySmall: TypeScaleStep;
+  headlineLarge: TypeScaleStep;
+  headlineMedium: TypeScaleStep;
+  headlineSmall: TypeScaleStep;
+  titleLarge: TypeScaleStep;
+  titleMedium: TypeScaleStep;
+  titleSmall: TypeScaleStep;
+  bodyLarge: TypeScaleStep;
+  bodyMedium: TypeScaleStep;
+  bodySmall: TypeScaleStep;
+  labelLarge: TypeScaleStep;
+  labelMedium: TypeScaleStep;
+  labelSmall: TypeScaleStep;
+}
+
+// Kept unchanged — used by Panda recipes and the resolveTypeStyle() shim.
 export interface TypeStyle {
   fontSize: string;
   lineHeight: string;