@d4gger/design-system 2.7.0 → 3.0.1

package/dist/components/commentThread/commentThread.props.d.ts

@@ -0,0 +1,21 @@
+import type * as React from 'react';
+interface CommentThreadRootProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+interface CommentProps extends React.HTMLAttributes<HTMLElement> {
+    author: string;
+    avatarSrc?: string;
+    badge?: React.ReactNode;
+    dateTime: string;
+    timeLabel: React.ReactNode;
+    actions?: React.ReactNode;
+}
+interface ComposerProps extends Omit<React.FormHTMLAttributes<HTMLFormElement>, 'onSubmit'> {
+    value: string;
+    onValueChange: (value: string) => void;
+    onSubmit?: () => void;
+    maxLength?: number;
+    submitting?: boolean;
+    locked?: boolean;
+}
+export type { CommentProps, CommentThreadRootProps, ComposerProps };
+//# sourceMappingURL=commentThread.props.d.ts.map

package/dist/components/commentThread/commentThread.props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"commentThread.props.d.ts","sourceRoot":"","sources":["../../../src/components/commentThread/commentThread.props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAA;AAEnC,UAAU,sBAAuB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAEhF,UAAU,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IAC9D,MAAM,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,QAAQ,EAAE,MAAM,CAAA;IAChB,SAAS,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,UAAU,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,kBAAkB,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC;IACzF,KAAK,EAAE,MAAM,CAAA;IACb,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AAED,YAAY,EAAE,YAAY,EAAE,sBAAsB,EAAE,aAAa,EAAE,CAAA"}

package/dist/components/commentThread/commentThread.props.js

@@ -0,0 +1 @@
+//# sourceMappingURL=commentThread.props.js.map

package/dist/components/commentThread/commentThread.props.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/components/config-drawer.css

@@ -34,6 +34,41 @@
   flex-shrink: 0;
 }
 
+.dsx-config-drawer__accent-swatch {
+  display: inline-block;
+  width: var(--dsx-space-sm);
+  height: var(--dsx-space-sm);
+  margin-inline-end: var(--dsx-space-xs);
+  border-radius: var(--dsx-radius-full);
+  vertical-align: middle;
+}
+
+.dsx-config-drawer__accent-swatch[data-tier='rift'] {
+  background: var(--dsx-color-accent-rift-9);
+}
+
+.dsx-config-drawer__accent-swatch[data-tier='warp'] {
+  background: var(--dsx-color-accent-warp-9);
+}
+
+.dsx-config-drawer__accent-swatch[data-tier='ray'] {
+  background: var(--dsx-color-accent-ray-9);
+}
+
+/* astral/spark were missing entirely (2026-08-26, real bug found live): both accents shipped
+   with their own SegmentedControl.Item + AccentSwatch in ConfigDrawer.tsx, but no swatch color
+   rule was ever added here, so the swatch fell through to the base rule's no-background and
+   rendered blank — reported as "it will always show me the actual drawer color, not the chosen
+   color" (the theme itself was applying correctly everywhere else; only this preview swatch
+   was wrong/missing). */
+.dsx-config-drawer__accent-swatch[data-tier='astral'] {
+  background: var(--dsx-color-accent-astral-9);
+}
+
+.dsx-config-drawer__accent-swatch[data-tier='spark'] {
+  background: var(--dsx-color-accent-spark-9);
+}
+
 .dsx-config-drawer__scaling-input {
   width: 7ch;
 }

package/dist/components/configDrawer/ConfigDrawer.cjs

@@ -42,27 +42,21 @@ var import_SegmentedControl = require("../segmentedControl/SegmentedControl");
 var import_Separator = require("../separator/Separator");
 var import_Text = require("../text/Text");
 var import_ThemeProvider = require("../themeProvider/ThemeProvider");
+var import_VisuallyHidden = require("../visuallyHidden/VisuallyHidden");
 var import_jsx_runtime = require("react/jsx-runtime");
-const Sheet = React.lazy(() => import("../sheet/Sheet").then((mod) => ({ default: mod.Sheet })));
-const SheetTrigger = React.lazy(() => import("../sheet/Sheet").then((mod) => ({ default: mod.SheetTrigger })));
-const SheetContent = React.lazy(() => import("../sheet/Sheet").then((mod) => ({ default: mod.SheetContent })));
-const SheetHeader = React.lazy(() => import("../sheet/Sheet").then((mod) => ({ default: mod.SheetHeader })));
-const SheetTitle = React.lazy(() => import("../sheet/Sheet").then((mod) => ({ default: mod.SheetTitle })));
+const Drawer = React.lazy(() => import("../drawer/Drawer").then((mod) => ({ default: mod.Drawer })));
+const DrawerTrigger = React.lazy(() => import("../drawer/Drawer").then((mod) => ({ default: mod.DrawerTrigger })));
+const DrawerContent = React.lazy(() => import("../drawer/Drawer").then((mod) => ({ default: mod.DrawerContent })));
+const DrawerHeader = React.lazy(() => import("../drawer/Drawer").then((mod) => ({ default: mod.DrawerHeader })));
+const DrawerTitle = React.lazy(() => import("../drawer/Drawer").then((mod) => ({ default: mod.DrawerTitle })));
+const DrawerDescription = React.lazy(() => import("../drawer/Drawer").then((mod) => ({ default: mod.DrawerDescription })));
 function AccentSwatch({ tier }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "span",
     {
-      "data-accent-color": tier,
-      "aria-hidden": "true",
-      style: {
-        display: "inline-block",
-        width: 10,
-        height: 10,
-        borderRadius: "50%",
-        background: "var(--dsx-color-accent-9)",
-        marginInlineEnd: 6,
-        verticalAlign: "middle"
-      }
+      className: "dsx-config-drawer__accent-swatch",
+      "data-tier": tier,
+      "aria-hidden": "true"
     }
   );
 }
@@ -75,7 +69,7 @@ function SettingRow({ label, description, children }) {
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dsx-config-drawer__row-control", children })
   ] });
 }
-function ConfigDrawer({ open, onOpenChange, defaultOpen, trigger }) {
+function ConfigDrawer({ open, onOpenChange, defaultOpen, trigger, side = "right", children }) {
   const {
     theme,
     setTheme,
@@ -88,7 +82,9 @@ function ConfigDrawer({ open, onOpenChange, defaultOpen, trigger }) {
     density,
     setDensity,
     scaling,
-    setScaling
+    setScaling,
+    panelBackground,
+    setPanelBackground
   } = (0, import_ThemeProvider.useTheme)();
   const handleScalingChange = React.useCallback(
     (value) => {
@@ -104,10 +100,11 @@ function ConfigDrawer({ open, onOpenChange, defaultOpen, trigger }) {
     return isNaN(parsed) ? 100 : parsed;
   }, [scaling]);
   const defaultTrigger = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_IconButton.IconButton, { variant: "ghost", size: "md", "aria-label": "Open preferences", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Icon.Icon, { name: "settings", size: "md" }) });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(React.Suspense, { fallback: null, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Sheet, { open, onOpenChange, defaultOpen, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SheetTrigger, { asChild: true, children: trigger ?? defaultTrigger }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(SheetContent, { side: "right", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SheetHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SheetTitle, { children: "Preferences" }) }),
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(React.Suspense, { fallback: null, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Drawer, { open, onOpenChange, defaultOpen, direction: side, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DrawerTrigger, { asChild: true, children: trigger ?? defaultTrigger }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DrawerContent, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DrawerHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DrawerTitle, { children: "Preferences" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_VisuallyHidden.VisuallyHidden, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DrawerDescription, { children: "Adjust theme, accent, radius, density, scaling, and panel background for this preview." }) }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Flex.Flex, { direction: "column", gap: "lg", className: "dsx-config-drawer__body", children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SettingRow, { label: "Theme", description: "Choose your preferred appearance", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
           import_SegmentedControl.SegmentedControl,
@@ -145,6 +142,14 @@ function ConfigDrawer({ open, onOpenChange, defaultOpen, trigger }) {
               /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_SegmentedControl.SegmentedControl.Item, { value: "ray", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AccentSwatch, { tier: "ray" }),
                 "Ray"
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_SegmentedControl.SegmentedControl.Item, { value: "astral", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AccentSwatch, { tier: "astral" }),
+                "Astral"
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_SegmentedControl.SegmentedControl.Item, { value: "spark", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AccentSwatch, { tier: "spark" }),
+                "Spark"
               ] })
             ]
           }
@@ -209,7 +214,26 @@ function ConfigDrawer({ open, onOpenChange, defaultOpen, trigger }) {
             className: "dsx-config-drawer__scaling-input",
             "aria-label": "Scaling percentage"
           }
-        ) })
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Separator.Separator, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SettingRow, { label: "Panel BG", description: "Surface treatment for glass panels", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_SegmentedControl.SegmentedControl,
+          {
+            type: "single",
+            value: panelBackground,
+            onValueChange: (value) => setPanelBackground(value),
+            "aria-label": "Panel background",
+            size: "sm",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SegmentedControl.SegmentedControl.Item, { value: "translucent", children: "Translucent" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SegmentedControl.SegmentedControl.Item, { value: "solid", children: "Solid" })
+            ]
+          }
+        ) }),
+        children && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Separator.Separator, {}),
+          children
+        ] })
       ] })
     ] })
   ] }) });

package/dist/components/configDrawer/ConfigDrawer.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/configDrawer/ConfigDrawer.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\n\nimport { Flex } from '../flex/Flex'\nimport { Icon } from '../icon/Icon'\nimport { IconButton } from '../iconButton/IconButton'\nimport { Label } from '../label/Label'\nimport { NumberInput } from '../numberInput/NumberInput'\nimport { SegmentedControl } from '../segmentedControl/SegmentedControl'\nimport { Separator } from '../separator/Separator'\nimport { Text } from '../text/Text'\nimport { useTheme } from '../themeProvider/ThemeProvider'\n\nimport type { ThemeAccentColor, ThemeGrayColor, ThemeRadius, ThemeScaling } from '../../foundations/Theme'\nimport type { ThemePreference } from '../themeProvider/themeProvider.props'\n\nconst Sheet = React.lazy(() => import('../sheet/Sheet').then((mod) => ({ default: mod.Sheet })))\nconst SheetTrigger = React.lazy(() => import('../sheet/Sheet').then((mod) => ({ default: mod.SheetTrigger })))\nconst SheetContent = React.lazy(() => import('../sheet/Sheet').then((mod) => ({ default: mod.SheetContent })))\nconst SheetHeader = React.lazy(() => import('../sheet/Sheet').then((mod) => ({ default: mod.SheetHeader })))\nconst SheetTitle = React.lazy(() => import('../sheet/Sheet').then((mod) => ({ default: mod.SheetTitle })))\n\ntype ConfigDrawerProps = {\n  /** Whether the drawer is open (controlled). */\n  open?: boolean\n  /** Callback when open state changes. */\n  onOpenChange?: (open: boolean) => void\n  /** Default open state (uncontrolled). */\n  defaultOpen?: boolean\n  /** Custom trigger button. */\n  trigger?: React.ReactNode\n}\n\ntype SettingRowProps = {\n  label: string\n  description?: string\n  children: React.ReactNode\n}\n\nfunction AccentSwatch({ tier }: { tier: ThemeAccentColor }) {\n  return (\n    <span\n      data-accent-color={tier}\n      aria-hidden=\"true\"\n      style={{\n        display: 'inline-block',\n        width: 10,\n        height: 10,\n        borderRadius: '50%',\n        background: 'var(--dsx-color-accent-9)',\n        marginInlineEnd: 6,\n        verticalAlign: 'middle',\n      }}\n    />\n  )\n}\n\nfunction SettingRow({ label, description, children }: SettingRowProps) {\n  return (\n    <Flex direction=\"row\" justify=\"between\" align=\"center\" gap=\"md\" className=\"dsx-config-drawer__row\">\n      <Flex direction=\"column\" gap=\"1\" className=\"dsx-config-drawer__row-info\">\n        <Label>{label}</Label>\n        {description && (\n          <Text variant=\"label-small\" tone=\"muted\">{description}</Text>\n        )}\n      </Flex>\n      <div className=\"dsx-config-drawer__row-control\">{children}</div>\n    </Flex>\n  )\n}\n\nexport function ConfigDrawer({ open, onOpenChange, defaultOpen, trigger }: ConfigDrawerProps) {\n  const {\n    theme,\n    setTheme,\n    accentColor,\n    setAccentColor,\n    grayColor,\n    setGrayColor,\n    radius,\n    setRadius,\n    density,\n    setDensity,\n    scaling,\n    setScaling,\n  } = useTheme()\n\n  const handleScalingChange = React.useCallback(\n    (value: number | undefined) => {\n      if (value !== undefined) {\n        const clamped = Math.min(110, Math.max(90, Math.round(value / 5) * 5))\n        setScaling(String(clamped) as ThemeScaling)\n      }\n    },\n    [setScaling],\n  )\n\n  const scalingNumber = React.useMemo(() => {\n    const parsed = parseInt(scaling, 10)\n    return isNaN(parsed) ? 100 : parsed\n  }, [scaling])\n\n  const defaultTrigger = (\n    <IconButton variant=\"ghost\" size=\"md\" aria-label=\"Open preferences\">\n      <Icon name=\"settings\" size=\"md\" />\n    </IconButton>\n  )\n\n  return (\n    <React.Suspense fallback={null}>\n      <Sheet open={open} onOpenChange={onOpenChange} defaultOpen={defaultOpen}>\n        <SheetTrigger asChild>{trigger ?? defaultTrigger}</SheetTrigger>\n        <SheetContent side=\"right\">\n          <SheetHeader>\n            <SheetTitle>Preferences</SheetTitle>\n          </SheetHeader>\n\n          <Flex direction=\"column\" gap=\"lg\" className=\"dsx-config-drawer__body\">\n            {/* Appearance */}\n            <SettingRow label=\"Theme\" description=\"Choose your preferred appearance\">\n              <SegmentedControl\n                type=\"single\"\n                value={theme}\n                onValueChange={(value: string) => setTheme(value as ThemePreference)}\n                aria-label=\"Theme mode\"\n                size=\"sm\"\n              >\n                <SegmentedControl.Item value=\"light\">Light</SegmentedControl.Item>\n                <SegmentedControl.Item value=\"dark\">Dark</SegmentedControl.Item>\n                <SegmentedControl.Item value=\"system\">System</SegmentedControl.Item>\n              </SegmentedControl>\n            </SettingRow>\n\n            <Separator />\n\n            {/* Accent Color */}\n            <SettingRow label=\"Accent\" description=\"Primary color for interactive elements\">\n              <SegmentedControl\n                type=\"single\"\n                value={accentColor}\n                onValueChange={(value: string) => setAccentColor(value as ThemeAccentColor)}\n                aria-label=\"Accent color\"\n                size=\"sm\"\n              >\n                <SegmentedControl.Item value=\"rift\">\n                  <AccentSwatch tier=\"rift\" />\n                  Rift\n                </SegmentedControl.Item>\n                <SegmentedControl.Item value=\"warp\">\n                  <AccentSwatch tier=\"warp\" />\n                  Warp\n                </SegmentedControl.Item>\n                <SegmentedControl.Item value=\"ray\">\n                  <AccentSwatch tier=\"ray\" />\n                  Ray\n                </SegmentedControl.Item>\n              </SegmentedControl>\n            </SettingRow>\n\n            <Separator />\n\n            {/* Gray Color */}\n            <SettingRow label=\"Gray\" description=\"Neutral tone palette\">\n              <SegmentedControl\n                type=\"single\"\n                value={grayColor}\n                onValueChange={(value: string) => setGrayColor(value as ThemeGrayColor)}\n                aria-label=\"Gray color\"\n                size=\"sm\"\n              >\n                <SegmentedControl.Item value=\"auto\">Auto</SegmentedControl.Item>\n                <SegmentedControl.Item value=\"neutral\">Neutral</SegmentedControl.Item>\n              </SegmentedControl>\n            </SettingRow>\n\n            <Separator />\n\n            {/* Radius */}\n            <SettingRow label=\"Radius\" description=\"Corner rounding for surfaces\">\n              <SegmentedControl\n                type=\"single\"\n                value={radius}\n                onValueChange={(value: string) => setRadius(value as ThemeRadius)}\n                aria-label=\"Border radius\"\n                size=\"sm\"\n              >\n                <SegmentedControl.Item value=\"none\">None</SegmentedControl.Item>\n                <SegmentedControl.Item value=\"sm\">Small</SegmentedControl.Item>\n                <SegmentedControl.Item value=\"md\">Medium</SegmentedControl.Item>\n                <SegmentedControl.Item value=\"lg\">Large</SegmentedControl.Item>\n                <SegmentedControl.Item value=\"full\">Full</SegmentedControl.Item>\n              </SegmentedControl>\n            </SettingRow>\n\n            <Separator />\n\n            {/* Density */}\n            <SettingRow label=\"Density\" description=\"Spacing between elements\">\n              <SegmentedControl\n                type=\"single\"\n                value={density}\n                onValueChange={(value: string) => setDensity(value as 'comfortable' | 'compact')}\n                aria-label=\"Density\"\n                size=\"sm\"\n              >\n                <SegmentedControl.Item value=\"comfortable\">Comfortable</SegmentedControl.Item>\n                <SegmentedControl.Item value=\"compact\">Compact</SegmentedControl.Item>\n              </SegmentedControl>\n            </SettingRow>\n\n            <Separator />\n\n            {/* Scaling */}\n            <SettingRow label=\"Scaling\" description=\"UI size multiplier\">\n              <NumberInput\n                value={scalingNumber}\n                onChange={handleScalingChange}\n                min={90}\n                max={110}\n                step={5}\n                className=\"dsx-config-drawer__scaling-input\"\n                aria-label=\"Scaling percentage\"\n              />\n            </SettingRow>\n          </Flex>\n        </SheetContent>\n      </Sheet>\n    </React.Suspense>\n  )\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\n\nimport { Flex } from '../flex/Flex'\nimport { Icon } from '../icon/Icon'\nimport { IconButton } from '../iconButton/IconButton'\nimport { Label } from '../label/Label'\nimport { NumberInput } from '../numberInput/NumberInput'\nimport { SegmentedControl } from '../segmentedControl/SegmentedControl'\nimport { Separator } from '../separator/Separator'\nimport { Text } from '../text/Text'\nimport { useTheme } from '../themeProvider/ThemeProvider'\nimport { VisuallyHidden } from '../visuallyHidden/VisuallyHidden'\n\nimport type { ThemeAccentColor, ThemeGrayColor, ThemePanelBackground, ThemeRadius, ThemeScaling } from '../../foundations/Theme'\nimport type { ThemePreference } from '../themeProvider/themeProvider.props'\n\nconst configDrawerSides = ['top', 'right', 'bottom', 'left'] as const\ntype ConfigDrawerSide = (typeof configDrawerSides)[number]\n\nconst Drawer = React.lazy(() => import('../drawer/Drawer').then((mod) => ({ default: mod.Drawer })))\nconst DrawerTrigger = React.lazy(() => import('../drawer/Drawer').then((mod) => ({ default: mod.DrawerTrigger })))\nconst DrawerContent = React.lazy(() => import('../drawer/Drawer').then((mod) => ({ default: mod.DrawerContent })))\nconst DrawerHeader = React.lazy(() => import('../drawer/Drawer').then((mod) => ({ default: mod.DrawerHeader })))\nconst DrawerTitle = React.lazy(() => import('../drawer/Drawer').then((mod) => ({ default: mod.DrawerTitle })))\nconst DrawerDescription = React.lazy(() => import('../drawer/Drawer').then((mod) => ({ default: mod.DrawerDescription })))\n\ntype ConfigDrawerProps = {\n  /** Whether the drawer is open (controlled). */\n  open?: boolean\n  /** Callback when open state changes. */\n  onOpenChange?: (open: boolean) => void\n  /** Default open state (uncontrolled). */\n  defaultOpen?: boolean\n  /** Custom trigger button. */\n  trigger?: React.ReactNode\n  /** Which edge the drawer slides from. Default 'right' (unchanged from before). */\n  side?: ConfigDrawerSide\n  /**\n   * Extra content rendered after the built-in settings \u2014 e.g. a host app's\n   * own per-page scenario controls. Kept as a plain slot rather than a\n   * fixed \"scenarios\" prop shape: what belongs here differs per host and\n   * per page, only the drawer chrome is meant to be shared.\n   */\n  children?: React.ReactNode\n}\n\ntype SettingRowProps = {\n  label: string\n  description?: string\n  children: React.ReactNode\n}\n\nfunction AccentSwatch({ tier }: { tier: ThemeAccentColor }) {\n  return (\n    <span\n      className=\"dsx-config-drawer__accent-swatch\"\n      data-tier={tier}\n      aria-hidden=\"true\"\n    />\n  )\n}\n\nfunction SettingRow({ label, description, children }: SettingRowProps) {\n  return (\n    <Flex direction=\"row\" justify=\"between\" align=\"center\" gap=\"md\" className=\"dsx-config-drawer__row\">\n      <Flex direction=\"column\" gap=\"1\" className=\"dsx-config-drawer__row-info\">\n        <Label>{label}</Label>\n        {description && (\n          <Text variant=\"label-small\" tone=\"muted\">{description}</Text>\n        )}\n      </Flex>\n      <div className=\"dsx-config-drawer__row-control\">{children}</div>\n    </Flex>\n  )\n}\n\nexport function ConfigDrawer({ open, onOpenChange, defaultOpen, trigger, side = 'right', children }: ConfigDrawerProps) {\n  const {\n    theme,\n    setTheme,\n    accentColor,\n    setAccentColor,\n    grayColor,\n    setGrayColor,\n    radius,\n    setRadius,\n    density,\n    setDensity,\n    scaling,\n    setScaling,\n    panelBackground,\n    setPanelBackground,\n  } = useTheme()\n\n  const handleScalingChange = React.useCallback(\n    (value: number | undefined) => {\n      if (value !== undefined) {\n        const clamped = Math.min(110, Math.max(90, Math.round(value / 5) * 5))\n        setScaling(String(clamped) as ThemeScaling)\n      }\n    },\n    [setScaling],\n  )\n\n  const scalingNumber = React.useMemo(() => {\n    const parsed = parseInt(scaling, 10)\n    return isNaN(parsed) ? 100 : parsed\n  }, [scaling])\n\n  const defaultTrigger = (\n    <IconButton variant=\"ghost\" size=\"md\" aria-label=\"Open preferences\">\n      <Icon name=\"settings\" size=\"md\" />\n    </IconButton>\n  )\n\n  return (\n    <React.Suspense fallback={null}>\n      <Drawer open={open} onOpenChange={onOpenChange} defaultOpen={defaultOpen} direction={side}>\n        <DrawerTrigger asChild>{trigger ?? defaultTrigger}</DrawerTrigger>\n        <DrawerContent>\n          <DrawerHeader>\n            <DrawerTitle>Preferences</DrawerTitle>\n          </DrawerHeader>\n          <VisuallyHidden asChild>\n            <DrawerDescription>Adjust theme, accent, radius, density, scaling, and panel background for this preview.</DrawerDescription>\n          </VisuallyHidden>\n\n          <Flex direction=\"column\" gap=\"lg\" className=\"dsx-config-drawer__body\">\n            {/* Appearance */}\n            <SettingRow label=\"Theme\" description=\"Choose your preferred appearance\">\n              <SegmentedControl\n                type=\"single\"\n                value={theme}\n                onValueChange={(value: string) => setTheme(value as ThemePreference)}\n                aria-label=\"Theme mode\"\n                size=\"sm\"\n              >\n                <SegmentedControl.Item value=\"light\">Light</SegmentedControl.Item>\n                <SegmentedControl.Item value=\"dark\">Dark</SegmentedControl.Item>\n                <SegmentedControl.Item value=\"system\">System</SegmentedControl.Item>\n              </SegmentedControl>\n            </SettingRow>\n\n            <Separator />\n\n            {/* Accent Color */}\n            <SettingRow label=\"Accent\" description=\"Primary color for interactive elements\">\n              <SegmentedControl\n                type=\"single\"\n                value={accentColor}\n                onValueChange={(value: string) => setAccentColor(value as ThemeAccentColor)}\n                aria-label=\"Accent color\"\n                size=\"sm\"\n              >\n                <SegmentedControl.Item value=\"rift\">\n                  <AccentSwatch tier=\"rift\" />\n                  Rift\n                </SegmentedControl.Item>\n                <SegmentedControl.Item value=\"warp\">\n                  <AccentSwatch tier=\"warp\" />\n                  Warp\n                </SegmentedControl.Item>\n                <SegmentedControl.Item value=\"ray\">\n                  <AccentSwatch tier=\"ray\" />\n                  Ray\n                </SegmentedControl.Item>\n                <SegmentedControl.Item value=\"astral\">\n                  <AccentSwatch tier=\"astral\" />\n                  Astral\n                </SegmentedControl.Item>\n                <SegmentedControl.Item value=\"spark\">\n                  <AccentSwatch tier=\"spark\" />\n                  Spark\n                </SegmentedControl.Item>\n              </SegmentedControl>\n            </SettingRow>\n\n            <Separator />\n\n            {/* Gray Color */}\n            <SettingRow label=\"Gray\" description=\"Neutral tone palette\">\n              <SegmentedControl\n                type=\"single\"\n                value={grayColor}\n                onValueChange={(value: string) => setGrayColor(value as ThemeGrayColor)}\n                aria-label=\"Gray color\"\n                size=\"sm\"\n              >\n                <SegmentedControl.Item value=\"auto\">Auto</SegmentedControl.Item>\n                <SegmentedControl.Item value=\"neutral\">Neutral</SegmentedControl.Item>\n              </SegmentedControl>\n            </SettingRow>\n\n            <Separator />\n\n            {/* Radius */}\n            <SettingRow label=\"Radius\" description=\"Corner rounding for surfaces\">\n              <SegmentedControl\n                type=\"single\"\n                value={radius}\n                onValueChange={(value: string) => setRadius(value as ThemeRadius)}\n                aria-label=\"Border radius\"\n                size=\"sm\"\n              >\n                <SegmentedControl.Item value=\"none\">None</SegmentedControl.Item>\n                <SegmentedControl.Item value=\"sm\">Small</SegmentedControl.Item>\n                <SegmentedControl.Item value=\"md\">Medium</SegmentedControl.Item>\n                <SegmentedControl.Item value=\"lg\">Large</SegmentedControl.Item>\n                <SegmentedControl.Item value=\"full\">Full</SegmentedControl.Item>\n              </SegmentedControl>\n            </SettingRow>\n\n            <Separator />\n\n            {/* Density */}\n            <SettingRow label=\"Density\" description=\"Spacing between elements\">\n              <SegmentedControl\n                type=\"single\"\n                value={density}\n                onValueChange={(value: string) => setDensity(value as 'comfortable' | 'compact')}\n                aria-label=\"Density\"\n                size=\"sm\"\n              >\n                <SegmentedControl.Item value=\"comfortable\">Comfortable</SegmentedControl.Item>\n                <SegmentedControl.Item value=\"compact\">Compact</SegmentedControl.Item>\n              </SegmentedControl>\n            </SettingRow>\n\n            <Separator />\n\n            {/* Scaling */}\n            <SettingRow label=\"Scaling\" description=\"UI size multiplier\">\n              <NumberInput\n                value={scalingNumber}\n                onChange={handleScalingChange}\n                min={90}\n                max={110}\n                step={5}\n                className=\"dsx-config-drawer__scaling-input\"\n                aria-label=\"Scaling percentage\"\n              />\n            </SettingRow>\n\n            <Separator />\n\n            {/* Panel BG \u2014 the app-level predecessor to this component had this\n                control; ConfigDrawer didn't, a real parity gap. */}\n            <SettingRow label=\"Panel BG\" description=\"Surface treatment for glass panels\">\n              <SegmentedControl\n                type=\"single\"\n                value={panelBackground}\n                onValueChange={(value: string) => setPanelBackground(value as ThemePanelBackground)}\n                aria-label=\"Panel background\"\n                size=\"sm\"\n              >\n                <SegmentedControl.Item value=\"translucent\">Translucent</SegmentedControl.Item>\n                <SegmentedControl.Item value=\"solid\">Solid</SegmentedControl.Item>\n              </SegmentedControl>\n            </SettingRow>\n\n            {children && (\n              <>\n                <Separator />\n                {children}\n              </>\n            )}\n          </Flex>\n        </DrawerContent>\n      </Drawer>\n    </React.Suspense>\n  )\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/components/configDrawer/ConfigDrawer.d.cts

@@ -1,4 +1,6 @@
 import * as React from 'react';
+declare const configDrawerSides: readonly ["top", "right", "bottom", "left"];
+type ConfigDrawerSide = (typeof configDrawerSides)[number];
 type ConfigDrawerProps = {
     /** Whether the drawer is open (controlled). */
     open?: boolean;
@@ -8,7 +10,16 @@ type ConfigDrawerProps = {
     defaultOpen?: boolean;
     /** Custom trigger button. */
     trigger?: React.ReactNode;
+    /** Which edge the drawer slides from. Default 'right' (unchanged from before). */
+    side?: ConfigDrawerSide;
+    /**
+     * Extra content rendered after the built-in settings — e.g. a host app's
+     * own per-page scenario controls. Kept as a plain slot rather than a
+     * fixed "scenarios" prop shape: what belongs here differs per host and
+     * per page, only the drawer chrome is meant to be shared.
+     */
+    children?: React.ReactNode;
 };
-export declare function ConfigDrawer({ open, onOpenChange, defaultOpen, trigger }: ConfigDrawerProps): import("react/jsx-runtime").JSX.Element;
+export declare function ConfigDrawer({ open, onOpenChange, defaultOpen, trigger, side, children }: ConfigDrawerProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=ConfigDrawer.d.cts.map

package/dist/components/configDrawer/ConfigDrawer.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"ConfigDrawer.d.cts","sourceRoot":"","sources":["../../../src/components/configDrawer/ConfigDrawer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAqB9B,KAAK,iBAAiB,GAAG;IACvB,+CAA+C;IAC/C,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,wCAAwC;IACxC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,yCAAyC;IACzC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAAA;AAwCD,wBAAgB,YAAY,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,WAAW,EAAE,OAAO,EAAE,EAAE,iBAAiB,2CA8J3F"}
+{"version":3,"file":"ConfigDrawer.d.cts","sourceRoot":"","sources":["../../../src/components/configDrawer/ConfigDrawer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAgB9B,QAAA,MAAM,iBAAiB,6CAA8C,CAAA;AACrE,KAAK,gBAAgB,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAA;AAS1D,KAAK,iBAAiB,GAAG;IACvB,+CAA+C;IAC/C,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,wCAAwC;IACxC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,yCAAyC;IACzC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,kFAAkF;IAClF,IAAI,CAAC,EAAE,gBAAgB,CAAA;IACvB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,CAAA;AAgCD,wBAAgB,YAAY,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,WAAW,EAAE,OAAO,EAAE,IAAc,EAAE,QAAQ,EAAE,EAAE,iBAAiB,2CAmMrH"}

package/dist/components/configDrawer/ConfigDrawer.d.mts

@@ -1,4 +1,6 @@
 import * as React from 'react';
+declare const configDrawerSides: readonly ["top", "right", "bottom", "left"];
+type ConfigDrawerSide = (typeof configDrawerSides)[number];
 type ConfigDrawerProps = {
     /** Whether the drawer is open (controlled). */
     open?: boolean;
@@ -8,7 +10,16 @@ type ConfigDrawerProps = {
     defaultOpen?: boolean;
     /** Custom trigger button. */
     trigger?: React.ReactNode;
+    /** Which edge the drawer slides from. Default 'right' (unchanged from before). */
+    side?: ConfigDrawerSide;
+    /**
+     * Extra content rendered after the built-in settings — e.g. a host app's
+     * own per-page scenario controls. Kept as a plain slot rather than a
+     * fixed "scenarios" prop shape: what belongs here differs per host and
+     * per page, only the drawer chrome is meant to be shared.
+     */
+    children?: React.ReactNode;
 };
-export declare function ConfigDrawer({ open, onOpenChange, defaultOpen, trigger }: ConfigDrawerProps): import("react/jsx-runtime").JSX.Element;
+export declare function ConfigDrawer({ open, onOpenChange, defaultOpen, trigger, side, children }: ConfigDrawerProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=ConfigDrawer.d.mts.map

package/dist/components/configDrawer/ConfigDrawer.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"ConfigDrawer.d.mts","sourceRoot":"","sources":["../../../src/components/configDrawer/ConfigDrawer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAqB9B,KAAK,iBAAiB,GAAG;IACvB,+CAA+C;IAC/C,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,wCAAwC;IACxC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,yCAAyC;IACzC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAAA;AAwCD,wBAAgB,YAAY,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,WAAW,EAAE,OAAO,EAAE,EAAE,iBAAiB,2CA8J3F"}
+{"version":3,"file":"ConfigDrawer.d.mts","sourceRoot":"","sources":["../../../src/components/configDrawer/ConfigDrawer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAgB9B,QAAA,MAAM,iBAAiB,6CAA8C,CAAA;AACrE,KAAK,gBAAgB,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAA;AAS1D,KAAK,iBAAiB,GAAG;IACvB,+CAA+C;IAC/C,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,wCAAwC;IACxC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,yCAAyC;IACzC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,kFAAkF;IAClF,IAAI,CAAC,EAAE,gBAAgB,CAAA;IACvB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,CAAA;AAgCD,wBAAgB,YAAY,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,WAAW,EAAE,OAAO,EAAE,IAAc,EAAE,QAAQ,EAAE,EAAE,iBAAiB,2CAmMrH"}

package/dist/components/configDrawer/ConfigDrawer.d.ts

@@ -1,4 +1,6 @@
 import * as React from 'react';
+declare const configDrawerSides: readonly ["top", "right", "bottom", "left"];
+type ConfigDrawerSide = (typeof configDrawerSides)[number];
 type ConfigDrawerProps = {
     /** Whether the drawer is open (controlled). */
     open?: boolean;
@@ -8,7 +10,16 @@ type ConfigDrawerProps = {
     defaultOpen?: boolean;
     /** Custom trigger button. */
     trigger?: React.ReactNode;
+    /** Which edge the drawer slides from. Default 'right' (unchanged from before). */
+    side?: ConfigDrawerSide;
+    /**
+     * Extra content rendered after the built-in settings — e.g. a host app's
+     * own per-page scenario controls. Kept as a plain slot rather than a
+     * fixed "scenarios" prop shape: what belongs here differs per host and
+     * per page, only the drawer chrome is meant to be shared.
+     */
+    children?: React.ReactNode;
 };
-export declare function ConfigDrawer({ open, onOpenChange, defaultOpen, trigger }: ConfigDrawerProps): import("react/jsx-runtime").JSX.Element;
+export declare function ConfigDrawer({ open, onOpenChange, defaultOpen, trigger, side, children }: ConfigDrawerProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=ConfigDrawer.d.ts.map

package/dist/components/configDrawer/ConfigDrawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConfigDrawer.d.ts","sourceRoot":"","sources":["../../../src/components/configDrawer/ConfigDrawer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAqB9B,KAAK,iBAAiB,GAAG;IACvB,+CAA+C;IAC/C,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,wCAAwC;IACxC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,yCAAyC;IACzC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAAA;AAwCD,wBAAgB,YAAY,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,WAAW,EAAE,OAAO,EAAE,EAAE,iBAAiB,2CA8J3F"}
+{"version":3,"file":"ConfigDrawer.d.ts","sourceRoot":"","sources":["../../../src/components/configDrawer/ConfigDrawer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAgB9B,QAAA,MAAM,iBAAiB,6CAA8C,CAAA;AACrE,KAAK,gBAAgB,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAA;AAS1D,KAAK,iBAAiB,GAAG;IACvB,+CAA+C;IAC/C,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,wCAAwC;IACxC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,yCAAyC;IACzC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,kFAAkF;IAClF,IAAI,CAAC,EAAE,gBAAgB,CAAA;IACvB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,CAAA;AAgCD,wBAAgB,YAAY,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,WAAW,EAAE,OAAO,EAAE,IAAc,EAAE,QAAQ,EAAE,EAAE,iBAAiB,2CAmMrH"}

package/dist/components/configDrawer/ConfigDrawer.js

@@ -9,27 +9,21 @@ import { SegmentedControl } from "../segmentedControl/SegmentedControl.js";
 import { Separator } from "../separator/Separator.js";
 import { Text } from "../text/Text.js";
 import { useTheme } from "../themeProvider/ThemeProvider.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-const Sheet = React.lazy(() => import("../sheet/Sheet.js").then((mod) => ({ default: mod.Sheet })));
-const SheetTrigger = React.lazy(() => import("../sheet/Sheet.js").then((mod) => ({ default: mod.SheetTrigger })));
-const SheetContent = React.lazy(() => import("../sheet/Sheet.js").then((mod) => ({ default: mod.SheetContent })));
-const SheetHeader = React.lazy(() => import("../sheet/Sheet.js").then((mod) => ({ default: mod.SheetHeader })));
-const SheetTitle = React.lazy(() => import("../sheet/Sheet.js").then((mod) => ({ default: mod.SheetTitle })));
+import { VisuallyHidden } from "../visuallyHidden/VisuallyHidden.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+const Drawer = React.lazy(() => import("../drawer/Drawer.js").then((mod) => ({ default: mod.Drawer })));
+const DrawerTrigger = React.lazy(() => import("../drawer/Drawer.js").then((mod) => ({ default: mod.DrawerTrigger })));
+const DrawerContent = React.lazy(() => import("../drawer/Drawer.js").then((mod) => ({ default: mod.DrawerContent })));
+const DrawerHeader = React.lazy(() => import("../drawer/Drawer.js").then((mod) => ({ default: mod.DrawerHeader })));
+const DrawerTitle = React.lazy(() => import("../drawer/Drawer.js").then((mod) => ({ default: mod.DrawerTitle })));
+const DrawerDescription = React.lazy(() => import("../drawer/Drawer.js").then((mod) => ({ default: mod.DrawerDescription })));
 function AccentSwatch({ tier }) {
   return /* @__PURE__ */ jsx(
     "span",
     {
-      "data-accent-color": tier,
-      "aria-hidden": "true",
-      style: {
-        display: "inline-block",
-        width: 10,
-        height: 10,
-        borderRadius: "50%",
-        background: "var(--dsx-color-accent-9)",
-        marginInlineEnd: 6,
-        verticalAlign: "middle"
-      }
+      className: "dsx-config-drawer__accent-swatch",
+      "data-tier": tier,
+      "aria-hidden": "true"
     }
   );
 }
@@ -42,7 +36,7 @@ function SettingRow({ label, description, children }) {
     /* @__PURE__ */ jsx("div", { className: "dsx-config-drawer__row-control", children })
   ] });
 }
-function ConfigDrawer({ open, onOpenChange, defaultOpen, trigger }) {
+function ConfigDrawer({ open, onOpenChange, defaultOpen, trigger, side = "right", children }) {
   const {
     theme,
     setTheme,
@@ -55,7 +49,9 @@ function ConfigDrawer({ open, onOpenChange, defaultOpen, trigger }) {
     density,
     setDensity,
     scaling,
-    setScaling
+    setScaling,
+    panelBackground,
+    setPanelBackground
   } = useTheme();
   const handleScalingChange = React.useCallback(
     (value) => {
@@ -71,10 +67,11 @@ function ConfigDrawer({ open, onOpenChange, defaultOpen, trigger }) {
     return isNaN(parsed) ? 100 : parsed;
   }, [scaling]);
   const defaultTrigger = /* @__PURE__ */ jsx(IconButton, { variant: "ghost", size: "md", "aria-label": "Open preferences", children: /* @__PURE__ */ jsx(Icon, { name: "settings", size: "md" }) });
-  return /* @__PURE__ */ jsx(React.Suspense, { fallback: null, children: /* @__PURE__ */ jsxs(Sheet, { open, onOpenChange, defaultOpen, children: [
-    /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: trigger ?? defaultTrigger }),
-    /* @__PURE__ */ jsxs(SheetContent, { side: "right", children: [
-      /* @__PURE__ */ jsx(SheetHeader, { children: /* @__PURE__ */ jsx(SheetTitle, { children: "Preferences" }) }),
+  return /* @__PURE__ */ jsx(React.Suspense, { fallback: null, children: /* @__PURE__ */ jsxs(Drawer, { open, onOpenChange, defaultOpen, direction: side, children: [
+    /* @__PURE__ */ jsx(DrawerTrigger, { asChild: true, children: trigger ?? defaultTrigger }),
+    /* @__PURE__ */ jsxs(DrawerContent, { children: [
+      /* @__PURE__ */ jsx(DrawerHeader, { children: /* @__PURE__ */ jsx(DrawerTitle, { children: "Preferences" }) }),
+      /* @__PURE__ */ jsx(VisuallyHidden, { asChild: true, children: /* @__PURE__ */ jsx(DrawerDescription, { children: "Adjust theme, accent, radius, density, scaling, and panel background for this preview." }) }),
       /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "lg", className: "dsx-config-drawer__body", children: [
         /* @__PURE__ */ jsx(SettingRow, { label: "Theme", description: "Choose your preferred appearance", children: /* @__PURE__ */ jsxs(
           SegmentedControl,
@@ -112,6 +109,14 @@ function ConfigDrawer({ open, onOpenChange, defaultOpen, trigger }) {
               /* @__PURE__ */ jsxs(SegmentedControl.Item, { value: "ray", children: [
                 /* @__PURE__ */ jsx(AccentSwatch, { tier: "ray" }),
                 "Ray"
+              ] }),
+              /* @__PURE__ */ jsxs(SegmentedControl.Item, { value: "astral", children: [
+                /* @__PURE__ */ jsx(AccentSwatch, { tier: "astral" }),
+                "Astral"
+              ] }),
+              /* @__PURE__ */ jsxs(SegmentedControl.Item, { value: "spark", children: [
+                /* @__PURE__ */ jsx(AccentSwatch, { tier: "spark" }),
+                "Spark"
               ] })
             ]
           }
@@ -176,7 +181,26 @@ function ConfigDrawer({ open, onOpenChange, defaultOpen, trigger }) {
             className: "dsx-config-drawer__scaling-input",
             "aria-label": "Scaling percentage"
           }
-        ) })
+        ) }),
+        /* @__PURE__ */ jsx(Separator, {}),
+        /* @__PURE__ */ jsx(SettingRow, { label: "Panel BG", description: "Surface treatment for glass panels", children: /* @__PURE__ */ jsxs(
+          SegmentedControl,
+          {
+            type: "single",
+            value: panelBackground,
+            onValueChange: (value) => setPanelBackground(value),
+            "aria-label": "Panel background",
+            size: "sm",
+            children: [
+              /* @__PURE__ */ jsx(SegmentedControl.Item, { value: "translucent", children: "Translucent" }),
+              /* @__PURE__ */ jsx(SegmentedControl.Item, { value: "solid", children: "Solid" })
+            ]
+          }
+        ) }),
+        children && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Separator, {}),
+          children
+        ] })
       ] })
     ] })
   ] }) });

package/dist/components/configDrawer/ConfigDrawer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/configDrawer/ConfigDrawer.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\n\nimport { Flex } from '../flex/Flex'\nimport { Icon } from '../icon/Icon'\nimport { IconButton } from '../iconButton/IconButton'\nimport { Label } from '../label/Label'\nimport { NumberInput } from '../numberInput/NumberInput'\nimport { SegmentedControl } from '../segmentedControl/SegmentedControl'\nimport { Separator } from '../separator/Separator'\nimport { Text } from '../text/Text'\nimport { useTheme } from '../themeProvider/ThemeProvider'\n\nimport type { ThemeAccentColor, ThemeGrayColor, ThemeRadius, ThemeScaling } from '../../foundations/Theme'\nimport type { ThemePreference } from '../themeProvider/themeProvider.props'\n\nconst Sheet = React.lazy(() => import('../sheet/Sheet').then((mod) => ({ default: mod.Sheet })))\nconst SheetTrigger = React.lazy(() => import('../sheet/Sheet').then((mod) => ({ default: mod.SheetTrigger })))\nconst SheetContent = React.lazy(() => import('../sheet/Sheet').then((mod) => ({ default: mod.SheetContent })))\nconst SheetHeader = React.lazy(() => import('../sheet/Sheet').then((mod) => ({ default: mod.SheetHeader })))\nconst SheetTitle = React.lazy(() => import('../sheet/Sheet').then((mod) => ({ default: mod.SheetTitle })))\n\ntype ConfigDrawerProps = {\n  /** Whether the drawer is open (controlled). */\n  open?: boolean\n  /** Callback when open state changes. */\n  onOpenChange?: (open: boolean) => void\n  /** Default open state (uncontrolled). */\n  defaultOpen?: boolean\n  /** Custom trigger button. */\n  trigger?: React.ReactNode\n}\n\ntype SettingRowProps = {\n  label: string\n  description?: string\n  children: React.ReactNode\n}\n\nfunction AccentSwatch({ tier }: { tier: ThemeAccentColor }) {\n  return (\n    <span\n      data-accent-color={tier}\n      aria-hidden=\"true\"\n      style={{\n        display: 'inline-block',\n        width: 10,\n        height: 10,\n        borderRadius: '50%',\n        background: 'var(--dsx-color-accent-9)',\n        marginInlineEnd: 6,\n        verticalAlign: 'middle',\n      }}\n    />\n  )\n}\n\nfunction SettingRow({ label, description, children }: SettingRowProps) {\n  return (\n    <Flex direction=\"row\" justify=\"between\" align=\"center\" gap=\"md\" className=\"dsx-config-drawer__row\">\n      <Flex direction=\"column\" gap=\"1\" className=\"dsx-config-drawer__row-info\">\n        <Label>{label}</Label>\n        {description && (\n          <Text variant=\"label-small\" tone=\"muted\">{description}</Text>\n        )}\n      </Flex>\n      <div className=\"dsx-config-drawer__row-control\">{children}</div>\n    </Flex>\n  )\n}\n\nexport function ConfigDrawer({ open, onOpenChange, defaultOpen, trigger }: ConfigDrawerProps) {\n  const {\n    theme,\n    setTheme,\n    accentColor,\n    setAccentColor,\n    grayColor,\n    setGrayColor,\n    radius,\n    setRadius,\n    density,\n    setDensity,\n    scaling,\n    setScaling,\n  } = useTheme()\n\n  const handleScalingChange = React.useCallback(\n    (value: number | undefined) => {\n      if (value !== undefined) {\n        const clamped = Math.min(110, Math.max(90, Math.round(value / 5) * 5))\n        setScaling(String(clamped) as ThemeScaling)\n      }\n    },\n    [setScaling],\n  )\n\n  const scalingNumber = React.useMemo(() => {\n    const parsed = parseInt(scaling, 10)\n    return isNaN(parsed) ? 100 : parsed\n  }, [scaling])\n\n  const defaultTrigger = (\n    <IconButton variant=\"ghost\" size=\"md\" aria-label=\"Open preferences\">\n      <Icon name=\"settings\" size=\"md\" />\n    </IconButton>\n  )\n\n  return (\n    <React.Suspense fallback={null}>\n      <Sheet open={open} onOpenChange={onOpenChange} defaultOpen={defaultOpen}>\n        <SheetTrigger asChild>{trigger ?? defaultTrigger}</SheetTrigger>\n        <SheetContent side=\"right\">\n          <SheetHeader>\n            <SheetTitle>Preferences</SheetTitle>\n          </SheetHeader>\n\n          <Flex direction=\"column\" gap=\"lg\" className=\"dsx-config-drawer__body\">\n            {/* Appearance */}\n            <SettingRow label=\"Theme\" description=\"Choose your preferred appearance\">\n              <SegmentedControl\n                type=\"single\"\n                value={theme}\n                onValueChange={(value: string) => setTheme(value as ThemePreference)}\n                aria-label=\"Theme mode\"\n                size=\"sm\"\n              >\n                <SegmentedControl.Item value=\"light\">Light</SegmentedControl.Item>\n                <SegmentedControl.Item value=\"dark\">Dark</SegmentedControl.Item>\n                <SegmentedControl.Item value=\"system\">System</SegmentedControl.Item>\n              </SegmentedControl>\n            </SettingRow>\n\n            <Separator />\n\n            {/* Accent Color */}\n            <SettingRow label=\"Accent\" description=\"Primary color for interactive elements\">\n              <SegmentedControl\n                type=\"single\"\n                value={accentColor}\n                onValueChange={(value: string) => setAccentColor(value as ThemeAccentColor)}\n                aria-label=\"Accent color\"\n                size=\"sm\"\n              >\n                <SegmentedControl.Item value=\"rift\">\n                  <AccentSwatch tier=\"rift\" />\n                  Rift\n                </SegmentedControl.Item>\n                <SegmentedControl.Item value=\"warp\">\n                  <AccentSwatch tier=\"warp\" />\n                  Warp\n                </SegmentedControl.Item>\n                <SegmentedControl.Item value=\"ray\">\n                  <AccentSwatch tier=\"ray\" />\n                  Ray\n                </SegmentedControl.Item>\n              </SegmentedControl>\n            </SettingRow>\n\n            <Separator />\n\n            {/* Gray Color */}\n            <SettingRow label=\"Gray\" description=\"Neutral tone palette\">\n              <SegmentedControl\n                type=\"single\"\n                value={grayColor}\n                onValueChange={(value: string) => setGrayColor(value as ThemeGrayColor)}\n                aria-label=\"Gray color\"\n                size=\"sm\"\n              >\n                <SegmentedControl.Item value=\"auto\">Auto</SegmentedControl.Item>\n                <SegmentedControl.Item value=\"neutral\">Neutral</SegmentedControl.Item>\n              </SegmentedControl>\n            </SettingRow>\n\n            <Separator />\n\n            {/* Radius */}\n            <SettingRow label=\"Radius\" description=\"Corner rounding for surfaces\">\n              <SegmentedControl\n                type=\"single\"\n                value={radius}\n                onValueChange={(value: string) => setRadius(value as ThemeRadius)}\n                aria-label=\"Border radius\"\n                size=\"sm\"\n              >\n                <SegmentedControl.Item value=\"none\">None</SegmentedControl.Item>\n                <SegmentedControl.Item value=\"sm\">Small</SegmentedControl.Item>\n                <SegmentedControl.Item value=\"md\">Medium</SegmentedControl.Item>\n                <SegmentedControl.Item value=\"lg\">Large</SegmentedControl.Item>\n                <SegmentedControl.Item value=\"full\">Full</SegmentedControl.Item>\n              </SegmentedControl>\n            </SettingRow>\n\n            <Separator />\n\n            {/* Density */}\n            <SettingRow label=\"Density\" description=\"Spacing between elements\">\n              <SegmentedControl\n                type=\"single\"\n                value={density}\n                onValueChange={(value: string) => setDensity(value as 'comfortable' | 'compact')}\n                aria-label=\"Density\"\n                size=\"sm\"\n              >\n                <SegmentedControl.Item value=\"comfortable\">Comfortable</SegmentedControl.Item>\n                <SegmentedControl.Item value=\"compact\">Compact</SegmentedControl.Item>\n              </SegmentedControl>\n            </SettingRow>\n\n            <Separator />\n\n            {/* Scaling */}\n            <SettingRow label=\"Scaling\" description=\"UI size multiplier\">\n              <NumberInput\n                value={scalingNumber}\n                onChange={handleScalingChange}\n                min={90}\n                max={110}\n                step={5}\n                className=\"dsx-config-drawer__scaling-input\"\n                aria-label=\"Scaling percentage\"\n              />\n            </SettingRow>\n          </Flex>\n        </SheetContent>\n      </Sheet>\n    </React.Suspense>\n  )\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\n\nimport { Flex } from '../flex/Flex'\nimport { Icon } from '../icon/Icon'\nimport { IconButton } from '../iconButton/IconButton'\nimport { Label } from '../label/Label'\nimport { NumberInput } from '../numberInput/NumberInput'\nimport { SegmentedControl } from '../segmentedControl/SegmentedControl'\nimport { Separator } from '../separator/Separator'\nimport { Text } from '../text/Text'\nimport { useTheme } from '../themeProvider/ThemeProvider'\nimport { VisuallyHidden } from '../visuallyHidden/VisuallyHidden'\n\nimport type { ThemeAccentColor, ThemeGrayColor, ThemePanelBackground, ThemeRadius, ThemeScaling } from '../../foundations/Theme'\nimport type { ThemePreference } from '../themeProvider/themeProvider.props'\n\nconst configDrawerSides = ['top', 'right', 'bottom', 'left'] as const\ntype ConfigDrawerSide = (typeof configDrawerSides)[number]\n\nconst Drawer = React.lazy(() => import('../drawer/Drawer').then((mod) => ({ default: mod.Drawer })))\nconst DrawerTrigger = React.lazy(() => import('../drawer/Drawer').then((mod) => ({ default: mod.DrawerTrigger })))\nconst DrawerContent = React.lazy(() => import('../drawer/Drawer').then((mod) => ({ default: mod.DrawerContent })))\nconst DrawerHeader = React.lazy(() => import('../drawer/Drawer').then((mod) => ({ default: mod.DrawerHeader })))\nconst DrawerTitle = React.lazy(() => import('../drawer/Drawer').then((mod) => ({ default: mod.DrawerTitle })))\nconst DrawerDescription = React.lazy(() => import('../drawer/Drawer').then((mod) => ({ default: mod.DrawerDescription })))\n\ntype ConfigDrawerProps = {\n  /** Whether the drawer is open (controlled). */\n  open?: boolean\n  /** Callback when open state changes. */\n  onOpenChange?: (open: boolean) => void\n  /** Default open state (uncontrolled). */\n  defaultOpen?: boolean\n  /** Custom trigger button. */\n  trigger?: React.ReactNode\n  /** Which edge the drawer slides from. Default 'right' (unchanged from before). */\n  side?: ConfigDrawerSide\n  /**\n   * Extra content rendered after the built-in settings \u2014 e.g. a host app's\n   * own per-page scenario controls. Kept as a plain slot rather than a\n   * fixed \"scenarios\" prop shape: what belongs here differs per host and\n   * per page, only the drawer chrome is meant to be shared.\n   */\n  children?: React.ReactNode\n}\n\ntype SettingRowProps = {\n  label: string\n  description?: string\n  children: React.ReactNode\n}\n\nfunction AccentSwatch({ tier }: { tier: ThemeAccentColor }) {\n  return (\n    <span\n      className=\"dsx-config-drawer__accent-swatch\"\n      data-tier={tier}\n      aria-hidden=\"true\"\n    />\n  )\n}\n\nfunction SettingRow({ label, description, children }: SettingRowProps) {\n  return (\n    <Flex direction=\"row\" justify=\"between\" align=\"center\" gap=\"md\" className=\"dsx-config-drawer__row\">\n      <Flex direction=\"column\" gap=\"1\" className=\"dsx-config-drawer__row-info\">\n        <Label>{label}</Label>\n        {description && (\n          <Text variant=\"label-small\" tone=\"muted\">{description}</Text>\n        )}\n      </Flex>\n      <div className=\"dsx-config-drawer__row-control\">{children}</div>\n    </Flex>\n  )\n}\n\nexport function ConfigDrawer({ open, onOpenChange, defaultOpen, trigger, side = 'right', children }: ConfigDrawerProps) {\n  const {\n    theme,\n    setTheme,\n    accentColor,\n    setAccentColor,\n    grayColor,\n    setGrayColor,\n    radius,\n    setRadius,\n    density,\n    setDensity,\n    scaling,\n    setScaling,\n    panelBackground,\n    setPanelBackground,\n  } = useTheme()\n\n  const handleScalingChange = React.useCallback(\n    (value: number | undefined) => {\n      if (value !== undefined) {\n        const clamped = Math.min(110, Math.max(90, Math.round(value / 5) * 5))\n        setScaling(String(clamped) as ThemeScaling)\n      }\n    },\n    [setScaling],\n  )\n\n  const scalingNumber = React.useMemo(() => {\n    const parsed = parseInt(scaling, 10)\n    return isNaN(parsed) ? 100 : parsed\n  }, [scaling])\n\n  const defaultTrigger = (\n    <IconButton variant=\"ghost\" size=\"md\" aria-label=\"Open preferences\">\n      <Icon name=\"settings\" size=\"md\" />\n    </IconButton>\n  )\n\n  return (\n    <React.Suspense fallback={null}>\n      <Drawer open={open} onOpenChange={onOpenChange} defaultOpen={defaultOpen} direction={side}>\n        <DrawerTrigger asChild>{trigger ?? defaultTrigger}</DrawerTrigger>\n        <DrawerContent>\n          <DrawerHeader>\n            <DrawerTitle>Preferences</DrawerTitle>\n          </DrawerHeader>\n          <VisuallyHidden asChild>\n            <DrawerDescription>Adjust theme, accent, radius, density, scaling, and panel background for this preview.</DrawerDescription>\n          </VisuallyHidden>\n\n          <Flex direction=\"column\" gap=\"lg\" className=\"dsx-config-drawer__body\">\n            {/* Appearance */}\n            <SettingRow label=\"Theme\" description=\"Choose your preferred appearance\">\n              <SegmentedControl\n                type=\"single\"\n                value={theme}\n                onValueChange={(value: string) => setTheme(value as ThemePreference)}\n                aria-label=\"Theme mode\"\n                size=\"sm\"\n              >\n                <SegmentedControl.Item value=\"light\">Light</SegmentedControl.Item>\n                <SegmentedControl.Item value=\"dark\">Dark</SegmentedControl.Item>\n                <SegmentedControl.Item value=\"system\">System</SegmentedControl.Item>\n              </SegmentedControl>\n            </SettingRow>\n\n            <Separator />\n\n            {/* Accent Color */}\n            <SettingRow label=\"Accent\" description=\"Primary color for interactive elements\">\n              <SegmentedControl\n                type=\"single\"\n                value={accentColor}\n                onValueChange={(value: string) => setAccentColor(value as ThemeAccentColor)}\n                aria-label=\"Accent color\"\n                size=\"sm\"\n              >\n                <SegmentedControl.Item value=\"rift\">\n                  <AccentSwatch tier=\"rift\" />\n                  Rift\n                </SegmentedControl.Item>\n                <SegmentedControl.Item value=\"warp\">\n                  <AccentSwatch tier=\"warp\" />\n                  Warp\n                </SegmentedControl.Item>\n                <SegmentedControl.Item value=\"ray\">\n                  <AccentSwatch tier=\"ray\" />\n                  Ray\n                </SegmentedControl.Item>\n                <SegmentedControl.Item value=\"astral\">\n                  <AccentSwatch tier=\"astral\" />\n                  Astral\n                </SegmentedControl.Item>\n                <SegmentedControl.Item value=\"spark\">\n                  <AccentSwatch tier=\"spark\" />\n                  Spark\n                </SegmentedControl.Item>\n              </SegmentedControl>\n            </SettingRow>\n\n            <Separator />\n\n            {/* Gray Color */}\n            <SettingRow label=\"Gray\" description=\"Neutral tone palette\">\n              <SegmentedControl\n                type=\"single\"\n                value={grayColor}\n                onValueChange={(value: string) => setGrayColor(value as ThemeGrayColor)}\n                aria-label=\"Gray color\"\n                size=\"sm\"\n              >\n                <SegmentedControl.Item value=\"auto\">Auto</SegmentedControl.Item>\n                <SegmentedControl.Item value=\"neutral\">Neutral</SegmentedControl.Item>\n              </SegmentedControl>\n            </SettingRow>\n\n            <Separator />\n\n            {/* Radius */}\n            <SettingRow label=\"Radius\" description=\"Corner rounding for surfaces\">\n              <SegmentedControl\n                type=\"single\"\n                value={radius}\n                onValueChange={(value: string) => setRadius(value as ThemeRadius)}\n                aria-label=\"Border radius\"\n                size=\"sm\"\n              >\n                <SegmentedControl.Item value=\"none\">None</SegmentedControl.Item>\n                <SegmentedControl.Item value=\"sm\">Small</SegmentedControl.Item>\n                <SegmentedControl.Item value=\"md\">Medium</SegmentedControl.Item>\n                <SegmentedControl.Item value=\"lg\">Large</SegmentedControl.Item>\n                <SegmentedControl.Item value=\"full\">Full</SegmentedControl.Item>\n              </SegmentedControl>\n            </SettingRow>\n\n            <Separator />\n\n            {/* Density */}\n            <SettingRow label=\"Density\" description=\"Spacing between elements\">\n              <SegmentedControl\n                type=\"single\"\n                value={density}\n                onValueChange={(value: string) => setDensity(value as 'comfortable' | 'compact')}\n                aria-label=\"Density\"\n                size=\"sm\"\n              >\n                <SegmentedControl.Item value=\"comfortable\">Comfortable</SegmentedControl.Item>\n                <SegmentedControl.Item value=\"compact\">Compact</SegmentedControl.Item>\n              </SegmentedControl>\n            </SettingRow>\n\n            <Separator />\n\n            {/* Scaling */}\n            <SettingRow label=\"Scaling\" description=\"UI size multiplier\">\n              <NumberInput\n                value={scalingNumber}\n                onChange={handleScalingChange}\n                min={90}\n                max={110}\n                step={5}\n                className=\"dsx-config-drawer__scaling-input\"\n                aria-label=\"Scaling percentage\"\n              />\n            </SettingRow>\n\n            <Separator />\n\n            {/* Panel BG \u2014 the app-level predecessor to this component had this\n                control; ConfigDrawer didn't, a real parity gap. */}\n            <SettingRow label=\"Panel BG\" description=\"Surface treatment for glass panels\">\n              <SegmentedControl\n                type=\"single\"\n                value={panelBackground}\n                onValueChange={(value: string) => setPanelBackground(value as ThemePanelBackground)}\n                aria-label=\"Panel background\"\n                size=\"sm\"\n              >\n                <SegmentedControl.Item value=\"translucent\">Translucent</SegmentedControl.Item>\n                <SegmentedControl.Item value=\"solid\">Solid</SegmentedControl.Item>\n              </SegmentedControl>\n            </SettingRow>\n\n            {children && (\n              <>\n                <Separator />\n                {children}\n              </>\n            )}\n          </Flex>\n        </DrawerContent>\n      </Drawer>\n    </React.Suspense>\n  )\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/components/context-menu.css

@@ -1,6 +1,7 @@
 
 @import '../../_internal/baseMenu.css';
 
+/* Same real glass treatment as Popover/Dialog/DropdownMenu - see dropdown-menu.css. */
 .dsx-context-menu__content {
   position: relative;
   z-index: var(--dsx-z-index-dropdown);
@@ -8,7 +9,8 @@
   padding: var(--dsx-space-xs);
   border-radius: var(--dsx-rounded-lg);
   overflow: hidden;
-  background: var(--dsx-color-surface-overlay);
+  background: var(--dsx-color-panel-translucent);
+  backdrop-filter: var(--dsx-effect-panel-glass-backdrop-filter);
   color: var(--dsx-color-on-surface);
   border: var(--dsx-border-width-sm) solid var(--dsx-color-outline);
   isolation: isolate;
@@ -23,7 +25,7 @@
   gap: var(--dsx-space-sm);
   padding: var(--dsx-space-sm) var(--dsx-space-sm) var(--dsx-space-sm) calc(var(--dsx-space-lg) + var(--dsx-space-sm));
   border: 0;
-  border-radius: var(--dsx-rounded-md);
+  border-radius: 0;
   background: transparent;
   color: var(--dsx-color-on-surface);
   text-align: left;