@doneisbetter/gds-core 2.6.7 → 3.0.1

package/dist/chunk-6FX7WZZO.mjs

@@ -0,0 +1,1822 @@
+import {
+  ActionBar,
+  FormField,
+  GdsIcons,
+  ListingCard,
+  NotificationCenterView,
+  ReferenceSection,
+  StateBlock,
+  getSemanticActionLabel,
+  resolveSemanticActionConfig
+} from "./chunk-YP7RL2MC.mjs";
+
+// src/SemanticButton.tsx
+import { useEffect, useState } from "react";
+import { Button } from "@mantine/core";
+import { useGdsTranslation } from "@doneisbetter/gds-theme";
+import { IconCheck, IconX } from "@tabler/icons-react";
+import { jsx } from "react/jsx-runtime";
+function SemanticButton({
+  action,
+  loading,
+  feedbackState,
+  feedbackText,
+  prerenderLabelOnly = true,
+  vocabularyPacks = [],
+  ...props
+}) {
+  const { t } = useGdsTranslation();
+  const config = resolveSemanticActionConfig(action, vocabularyPacks);
+  const [mounted, setMounted] = useState(!prerenderLabelOnly);
+  const [internalFeedback, setInternalFeedback] = useState(null);
+  useEffect(() => {
+    if (prerenderLabelOnly) {
+      setMounted(true);
+    }
+  }, [prerenderLabelOnly]);
+  useEffect(() => {
+    if (feedbackState) {
+      setInternalFeedback(feedbackState);
+      const timer = setTimeout(() => setInternalFeedback(null), 2e3);
+      return () => clearTimeout(timer);
+    }
+  }, [feedbackState]);
+  let Icon = config.icon;
+  let label = getSemanticActionLabel(action, t, vocabularyPacks);
+  let color = props.color;
+  if (!mounted) {
+    const { leftSection, ...buttonProps } = props;
+    return /* @__PURE__ */ jsx(Button, { loading, color, ...buttonProps, children: getSemanticActionLabel(action, void 0, vocabularyPacks) });
+  }
+  if (internalFeedback === "success") {
+    const defaultFeedback = config.feedback ?? { icon: IconCheck, color: "teal", messageId: "gds.feedback.saved" };
+    Icon = defaultFeedback.icon;
+    label = feedbackText || t(defaultFeedback.messageId, "Success");
+    color = defaultFeedback.color;
+  } else if (internalFeedback === "error") {
+    Icon = IconX;
+    label = feedbackText || t("gds.feedback.error", "Something went wrong");
+    color = "red";
+  }
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      leftSection: /* @__PURE__ */ jsx(Icon, { size: "1rem" }),
+      loading,
+      color,
+      ...props,
+      children: label
+    }
+  );
+}
+
+// src/ConfirmDialog.tsx
+import { Modal, Group, Text } from "@mantine/core";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function ConfirmDialog({
+  opened,
+  onClose,
+  onConfirm,
+  title,
+  children,
+  confirmAction = "confirm",
+  cancelAction = "cancel",
+  isDanger = true,
+  loading = false
+}) {
+  return /* @__PURE__ */ jsxs(Modal, { opened, onClose, title, centered: true, trapFocus: true, children: [
+    /* @__PURE__ */ jsx2(Text, { size: "sm", mb: "xl", children }),
+    /* @__PURE__ */ jsxs(Group, { justify: "flex-end", children: [
+      /* @__PURE__ */ jsx2(SemanticButton, { action: cancelAction, variant: "default", onClick: onClose, disabled: loading }),
+      /* @__PURE__ */ jsx2(SemanticButton, { action: confirmAction, color: isDanger ? "red" : "violet", onClick: onConfirm, loading })
+    ] })
+  ] });
+}
+
+// src/ThemeToggle.tsx
+import { ActionIcon, useMantineColorScheme, useComputedColorScheme } from "@mantine/core";
+import { useGdsTranslation as useGdsTranslation2 } from "@doneisbetter/gds-theme";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function ThemeToggle({ size = "md", onColorSchemeChange }) {
+  const { setColorScheme } = useMantineColorScheme();
+  const computedColorScheme = useComputedColorScheme("light", { getInitialValueInEffect: true });
+  const { t } = useGdsTranslation2();
+  const toggleColorScheme = () => {
+    const nextScheme = computedColorScheme === "dark" ? "light" : "dark";
+    setColorScheme(nextScheme);
+    onColorSchemeChange?.(nextScheme);
+  };
+  const isDark = computedColorScheme === "dark";
+  return /* @__PURE__ */ jsx3(
+    ActionIcon,
+    {
+      onClick: toggleColorScheme,
+      variant: "default",
+      size,
+      "aria-label": t("gds.aria.themeToggle", "Toggle color scheme"),
+      children: isDark ? /* @__PURE__ */ jsx3(GdsIcons.Sun, { size: "1.2rem" }) : /* @__PURE__ */ jsx3(GdsIcons.Moon, { size: "1.2rem" })
+    }
+  );
+}
+
+// src/ReferenceThemeExplorer.tsx
+import { useEffect as useEffect2, useMemo, useState as useState2 } from "react";
+import {
+  Badge,
+  Button as Button2,
+  Checkbox,
+  Code,
+  Group as Group2,
+  NativeSelect,
+  Paper,
+  SimpleGrid,
+  Stack,
+  Text as Text2,
+  TextInput,
+  Title
+} from "@mantine/core";
+import {
+  GdsProvider,
+  applyGdsFontLane,
+  getGdsFontLanes,
+  getGdsThemePresets,
+  resolveGdsThemePreset
+} from "@doneisbetter/gds-theme";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function resolvePreviewColorScheme(presetId, requestedScheme) {
+  if (presetId === "dark-public" || presetId === "neon-night") {
+    return "dark";
+  }
+  return requestedScheme;
+}
+var presetCatalog = getGdsThemePresets();
+var themePresetCatalog = Object.fromEntries(
+  presetCatalog.map((preset) => [
+    preset.id,
+    {
+      label: preset.label,
+      bestFor: `Apps aligned with ${preset.label.toLowerCase()}.`,
+      summary: preset.description,
+      themeKey: preset.runtimeLane,
+      supportedUse: `General product adoption with ${preset.label}.`,
+      avoidFor: "Avoid creating a local non-canonical theme authority."
+    }
+  ])
+);
+var colorSchemeProof = [
+  {
+    id: "light",
+    label: "Light",
+    description: "Validates readable default surfaces, controls, badges, and focus states against light backgrounds."
+  },
+  {
+    id: "dark",
+    label: "Dark",
+    description: "Validates contrast for public, operational, and feedback surfaces when dark mode is active."
+  },
+  {
+    id: "auto",
+    label: "Auto",
+    description: "Documents the adopter path for OS-controlled schemes while keeping the provider contract unchanged."
+  }
+];
+function ThemePreviewSurface({
+  preset,
+  colorScheme,
+  requestedColorScheme
+}) {
+  const forcedScheme = requestedColorScheme && requestedColorScheme !== colorScheme;
+  return /* @__PURE__ */ jsx4(Paper, { withBorder: true, radius: "xl", p: "lg", children: /* @__PURE__ */ jsxs2(Stack, { gap: "lg", children: [
+    /* @__PURE__ */ jsxs2(Group2, { justify: "space-between", align: "flex-start", wrap: "wrap", children: [
+      /* @__PURE__ */ jsxs2(Stack, { gap: 4, children: [
+        /* @__PURE__ */ jsx4(Text2, { fw: 700, children: preset.label }),
+        /* @__PURE__ */ jsx4(Text2, { size: "sm", c: "dimmed", children: preset.summary }),
+        /* @__PURE__ */ jsxs2(Text2, { size: "sm", children: [
+          /* @__PURE__ */ jsx4("strong", { children: "Best for:" }),
+          " ",
+          preset.bestFor
+        ] }),
+        /* @__PURE__ */ jsxs2(Text2, { size: "sm", children: [
+          /* @__PURE__ */ jsx4("strong", { children: "Color scheme:" }),
+          " ",
+          colorScheme
+        ] }),
+        /* @__PURE__ */ jsxs2(Text2, { size: "sm", children: [
+          /* @__PURE__ */ jsx4("strong", { children: "Accessibility proof:" }),
+          " status uses text, badge label, and placement, not color alone."
+        ] }),
+        forcedScheme ? /* @__PURE__ */ jsx4(Text2, { size: "sm", c: "dimmed", children: "This lane always previews in dark mode so the runtime stays inside its sanctioned contrast contract." }) : null
+      ] }),
+      /* @__PURE__ */ jsx4(ThemeToggle, {})
+    ] }),
+    /* @__PURE__ */ jsx4(
+      ActionBar,
+      {
+        primary: { action: "save", size: "sm" },
+        secondary: [{ action: "cancel", size: "sm" }],
+        tertiary: [{ action: "preview", size: "sm" }]
+      }
+    ),
+    /* @__PURE__ */ jsxs2(SimpleGrid, { cols: { base: 1, md: 2 }, spacing: "md", children: [
+      /* @__PURE__ */ jsx4(Paper, { withBorder: true, radius: "lg", p: "md", children: /* @__PURE__ */ jsxs2(Stack, { gap: "sm", children: [
+        /* @__PURE__ */ jsx4(Text2, { fw: 700, size: "sm", children: "Token-backed controls" }),
+        /* @__PURE__ */ jsx4(FormField, { label: "Reference input", description: "Inputs stay inside the theme lane instead of drifting into route-local styling.", children: /* @__PURE__ */ jsx4(TextInput, { placeholder: "Search or type a route name" }) }),
+        /* @__PURE__ */ jsxs2(Group2, { gap: "xs", wrap: "wrap", children: [
+          /* @__PURE__ */ jsx4(Badge, { color: "teal", variant: "light", children: "Success" }),
+          /* @__PURE__ */ jsx4(Badge, { color: "orange", variant: "light", children: "Warning" }),
+          /* @__PURE__ */ jsx4(Badge, { color: "red", variant: "light", children: "Critical" })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsx4(
+        ListingCard,
+        {
+          title: "Reference site proof surface",
+          description: "This preview uses the real shipped design-system runtime rather than a docs-only styling lane.",
+          metadata: [
+            { id: "runtime", label: "Runtime lane", value: preset.themeKey },
+            { id: "scheme", label: "Color scheme", value: colorScheme },
+            { id: "focus", label: "A11y proof", value: "Keyboard + readable states" }
+          ],
+          primaryAction: /* @__PURE__ */ jsx4(Button2, { size: "sm", children: "Inspect route" })
+        }
+      )
+    ] })
+  ] }) });
+}
+function ReferenceThemeExplorer({
+  initialSelection,
+  onSelectionChange
+}) {
+  const [preset, setPreset] = useState2(initialSelection?.preset ?? "default");
+  const [colorScheme, setColorScheme] = useState2(initialSelection?.colorScheme ?? "light");
+  const [brandPrimary, setBrandPrimary] = useState2(initialSelection?.brandPrimary ?? "blue");
+  const [brandFlatSurfaces, setBrandFlatSurfaces] = useState2(initialSelection?.brandFlatSurfaces ?? true);
+  const [brandEditorialSerif, setBrandEditorialSerif] = useState2(initialSelection?.brandEditorialSerif ?? false);
+  const [fontLane, setFontLane] = useState2(initialSelection?.fontLane ?? "inter");
+  const [comparisonEnabled, setComparisonEnabled] = useState2(false);
+  const [comparisonPreset, setComparisonPreset] = useState2("editorial");
+  const availableComparisonPresets = presetCatalog.filter((item) => item.id !== preset).map((item) => item.id);
+  const resolveTheme = (presetId) => applyGdsFontLane(resolveGdsThemePreset(presetId, {
+    brandPrimary,
+    brandFlatSurfaces,
+    brandEditorialSerif
+  }), fontLane);
+  const selectionSummary = themePresetCatalog[preset];
+  const comparisonSummary = themePresetCatalog[comparisonPreset];
+  const selectedTheme = useMemo(() => resolveTheme(preset), [preset, brandPrimary, brandFlatSurfaces, brandEditorialSerif, fontLane]);
+  const comparedTheme = useMemo(() => resolveTheme(comparisonPreset), [comparisonPreset, brandPrimary, brandFlatSurfaces, brandEditorialSerif, fontLane]);
+  const effectiveColorScheme = resolvePreviewColorScheme(preset, colorScheme);
+  const effectiveComparisonScheme = resolvePreviewColorScheme(comparisonPreset, colorScheme);
+  const previewKey = `${preset}-${effectiveColorScheme}-${brandPrimary}-${brandFlatSurfaces}-${brandEditorialSerif}-${fontLane}`;
+  const comparisonPreviewKey = `${comparisonPreset}-${effectiveComparisonScheme}-${brandPrimary}-${brandFlatSurfaces}-${brandEditorialSerif}-${fontLane}`;
+  useEffect2(() => {
+    onSelectionChange?.({
+      preset,
+      colorScheme: effectiveColorScheme,
+      theme: selectedTheme,
+      fontLane,
+      runtimeKey: previewKey,
+      brandPrimary,
+      brandFlatSurfaces,
+      brandEditorialSerif
+    });
+  }, [onSelectionChange, preset, effectiveColorScheme, selectedTheme, fontLane, previewKey, brandPrimary, brandFlatSurfaces, brandEditorialSerif]);
+  useEffect2(() => {
+    if (comparisonPreset !== preset) {
+      return;
+    }
+    setComparisonPreset(availableComparisonPresets[0] ?? "editorial");
+  }, [comparisonPreset, preset, availableComparisonPresets]);
+  const reset = () => {
+    setPreset("default");
+    setColorScheme("light");
+    setBrandPrimary("blue");
+    setBrandFlatSurfaces(true);
+    setBrandEditorialSerif(false);
+    setComparisonEnabled(false);
+    setComparisonPreset("editorial");
+    setFontLane("inter");
+  };
+  return /* @__PURE__ */ jsxs2(Stack, { gap: "xl", children: [
+    /* @__PURE__ */ jsx4(
+      ReferenceSection,
+      {
+        title: "Theme Lab",
+        description: "Test the actual shipped GDS theme presets, color-scheme behavior, and the governed brand-theme generator. This page is part of the live demo, not a separate styling experiment.",
+        children: /* @__PURE__ */ jsxs2(SimpleGrid, { cols: { base: 1, md: 2, xl: 3 }, spacing: "lg", children: [
+          /* @__PURE__ */ jsx4(Paper, { withBorder: true, radius: "xl", p: "lg", children: /* @__PURE__ */ jsxs2(Stack, { gap: "md", children: [
+            /* @__PURE__ */ jsx4(Title, { order: 4, children: "Theme preset" }),
+            /* @__PURE__ */ jsx4(FormField, { label: "Preset", children: /* @__PURE__ */ jsx4(
+              NativeSelect,
+              {
+                "aria-label": "Preset",
+                value: preset,
+                onChange: (event) => setPreset(event.currentTarget.value || "default"),
+                data: Object.entries(themePresetCatalog).map(([value, item]) => ({ value, label: item.label }))
+              }
+            ) }),
+            /* @__PURE__ */ jsx4(FormField, { label: "Preview color scheme", children: /* @__PURE__ */ jsx4(
+              NativeSelect,
+              {
+                "aria-label": "Preview color scheme",
+                value: colorScheme,
+                onChange: (event) => setColorScheme(event.currentTarget.value || "light"),
+                data: [
+                  { value: "light", label: "Light" },
+                  { value: "dark", label: "Dark" },
+                  { value: "auto", label: "Auto" }
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsx4(FormField, { label: "Webfont lane", children: /* @__PURE__ */ jsx4(
+              NativeSelect,
+              {
+                "aria-label": "Webfont lane",
+                value: fontLane,
+                onChange: (event) => setFontLane(event.currentTarget.value || "inter"),
+                data: getGdsFontLanes().map((lane) => ({ value: lane.id, label: lane.label }))
+              }
+            ) }),
+            /* @__PURE__ */ jsx4(Button2, { variant: "default", size: "sm", onClick: reset, children: "Reset theme lab" }),
+            /* @__PURE__ */ jsx4(Text2, { size: "sm", c: "dimmed", children: "Theme changes apply to the official site shell so visitors can validate real whole-page runtime behavior." })
+          ] }) }),
+          /* @__PURE__ */ jsx4(Paper, { withBorder: true, radius: "xl", p: "lg", children: /* @__PURE__ */ jsxs2(Stack, { gap: "md", children: [
+            /* @__PURE__ */ jsx4(Title, { order: 4, children: "Brand builder options" }),
+            /* @__PURE__ */ jsx4(FormField, { label: "Brand primary color", children: /* @__PURE__ */ jsx4(
+              NativeSelect,
+              {
+                "aria-label": "Brand primary color",
+                value: brandPrimary,
+                onChange: (event) => setBrandPrimary(event.currentTarget.value || "blue"),
+                data: ["blue", "violet", "teal", "grape", "indigo", "orange"],
+                disabled: preset !== "brand"
+              }
+            ) }),
+            /* @__PURE__ */ jsx4(
+              Checkbox,
+              {
+                label: "Use flat surfaces",
+                checked: brandFlatSurfaces,
+                onChange: (event) => setBrandFlatSurfaces(event.currentTarget.checked),
+                disabled: preset !== "brand"
+              }
+            ),
+            /* @__PURE__ */ jsx4(
+              Checkbox,
+              {
+                label: "Use editorial serif headings",
+                checked: brandEditorialSerif,
+                onChange: (event) => setBrandEditorialSerif(event.currentTarget.checked),
+                disabled: preset !== "brand"
+              }
+            ),
+            /* @__PURE__ */ jsx4(Text2, { size: "sm", c: "dimmed", children: "The generator composes shipped helpers instead of creating a second theme authority inside the website." })
+          ] }) }),
+          /* @__PURE__ */ jsx4(Paper, { withBorder: true, radius: "xl", p: "lg", children: /* @__PURE__ */ jsxs2(Stack, { gap: "md", role: "status", "aria-live": "polite", children: [
+            /* @__PURE__ */ jsx4(Title, { order: 4, children: "Current selection summary" }),
+            /* @__PURE__ */ jsxs2(Stack, { gap: 6, children: [
+              /* @__PURE__ */ jsx4(Text2, { fw: 700, children: selectionSummary.label }),
+              /* @__PURE__ */ jsx4(Text2, { size: "sm", c: "dimmed", children: selectionSummary.summary }),
+              /* @__PURE__ */ jsxs2(Text2, { size: "sm", children: [
+                /* @__PURE__ */ jsx4("strong", { children: "Best for:" }),
+                " ",
+                selectionSummary.bestFor
+              ] }),
+              /* @__PURE__ */ jsxs2(Text2, { size: "sm", children: [
+                /* @__PURE__ */ jsx4("strong", { children: "Runtime lane:" }),
+                " ",
+                /* @__PURE__ */ jsx4(Code, { children: selectionSummary.themeKey })
+              ] }),
+              /* @__PURE__ */ jsxs2(Text2, { size: "sm", children: [
+                /* @__PURE__ */ jsx4("strong", { children: "Color scheme:" }),
+                " ",
+                colorScheme
+              ] }),
+              (preset === "dark-public" || preset === "neon-night") && colorScheme !== effectiveColorScheme ? /* @__PURE__ */ jsx4(Text2, { size: "sm", c: "dimmed", children: "This dark-forward preset always renders in dark mode inside the live preview." }) : null
+            ] }),
+            /* @__PURE__ */ jsx4(
+              Checkbox,
+              {
+                "aria-label": "Compare against a second shipped preset",
+                label: "Compare against a second shipped preset",
+                checked: comparisonEnabled,
+                onChange: (event) => setComparisonEnabled(event.currentTarget.checked)
+              }
+            ),
+            /* @__PURE__ */ jsx4(FormField, { label: "Comparison preset", children: /* @__PURE__ */ jsx4(
+              NativeSelect,
+              {
+                "aria-label": "Comparison preset",
+                value: comparisonPreset,
+                onChange: (event) => setComparisonPreset(event.currentTarget.value || "editorial"),
+                disabled: !comparisonEnabled,
+                data: availableComparisonPresets.map((value) => ({ value, label: themePresetCatalog[value].label }))
+              }
+            ) })
+          ] }) })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx4(
+      ReferenceSection,
+      {
+        title: "Shipped theme lanes",
+        description: "Every lane below is part of the supported system. The website uses these exact helpers as its live runtime proof.",
+        children: /* @__PURE__ */ jsx4(SimpleGrid, { cols: { base: 1, md: 2, xl: 5 }, spacing: "md", children: Object.values(themePresetCatalog).map((lane) => /* @__PURE__ */ jsx4(Paper, { withBorder: true, radius: "lg", p: "md", children: /* @__PURE__ */ jsxs2(Stack, { gap: 6, children: [
+          /* @__PURE__ */ jsx4(Text2, { fw: 700, size: "sm", children: lane.label }),
+          /* @__PURE__ */ jsx4(Text2, { size: "sm", c: "dimmed", children: lane.summary }),
+          /* @__PURE__ */ jsxs2(Text2, { size: "xs", children: [
+            /* @__PURE__ */ jsx4("strong", { children: "Best for:" }),
+            " ",
+            lane.supportedUse
+          ] }),
+          /* @__PURE__ */ jsx4(Code, { block: true, fz: "10px", children: lane.themeKey }),
+          /* @__PURE__ */ jsxs2(Text2, { size: "xs", c: "dimmed", children: [
+            /* @__PURE__ */ jsx4("strong", { children: "Avoid for:" }),
+            " ",
+            lane.avoidFor ?? "No special exclusion noted for this lane."
+          ] })
+        ] }) }, lane.themeKey)) })
+      }
+    ),
+    /* @__PURE__ */ jsx4(
+      ReferenceSection,
+      {
+        title: "Light, dark, and auto proof",
+        description: "Every official lane must remain usable across explicit light, explicit dark, and OS-controlled auto modes. The dark-public lane is intentionally forced to dark in preview to preserve its contrast contract.",
+        children: /* @__PURE__ */ jsx4(SimpleGrid, { cols: { base: 1, md: 3 }, spacing: "md", children: colorSchemeProof.map((item) => /* @__PURE__ */ jsx4(Paper, { withBorder: true, radius: "lg", p: "md", children: /* @__PURE__ */ jsxs2(Stack, { gap: 6, children: [
+          /* @__PURE__ */ jsx4(Badge, { variant: "light", color: item.id === "dark" ? "violet" : item.id === "auto" ? "teal" : "blue", w: "fit-content", children: item.label }),
+          /* @__PURE__ */ jsx4(Text2, { size: "sm", children: item.description }),
+          /* @__PURE__ */ jsx4(Text2, { size: "xs", c: "dimmed", children: "Required proof: semantic text, visible focus, and contrast-safe state treatment." })
+        ] }) }, item.id)) })
+      }
+    ),
+    /* @__PURE__ */ jsx4(
+      ReferenceSection,
+      {
+        title: "Live Theme Preview",
+        description: "Visitors can test the shipped presets, compare lanes, and inspect actual GDS surfaces under each theme.",
+        children: /* @__PURE__ */ jsxs2(SimpleGrid, { cols: { base: 1, xl: comparisonEnabled ? 2 : 1 }, spacing: "lg", children: [
+          /* @__PURE__ */ jsx4(GdsProvider, { theme: selectedTheme, defaultColorScheme: effectiveColorScheme, children: /* @__PURE__ */ jsx4(
+            ThemePreviewSurface,
+            {
+              preset: selectionSummary,
+              colorScheme: effectiveColorScheme,
+              requestedColorScheme: colorScheme
+            }
+          ) }, previewKey),
+          comparisonEnabled ? /* @__PURE__ */ jsx4(GdsProvider, { theme: comparedTheme, defaultColorScheme: effectiveComparisonScheme, children: /* @__PURE__ */ jsx4(Paper, { withBorder: true, radius: "xl", p: "lg", children: /* @__PURE__ */ jsxs2(Stack, { gap: "md", children: [
+            /* @__PURE__ */ jsxs2(Group2, { justify: "space-between", align: "flex-start", wrap: "wrap", children: [
+              /* @__PURE__ */ jsxs2(Stack, { gap: 4, children: [
+                /* @__PURE__ */ jsx4(Text2, { fw: 700, children: "Comparison Preview Surface" }),
+                /* @__PURE__ */ jsx4(Text2, { size: "sm", c: "dimmed", children: "Compare another shipped theme against the current selection before adopting it downstream." })
+              ] }),
+              /* @__PURE__ */ jsx4(Badge, { color: "violet", variant: "light", children: comparisonSummary.label })
+            ] }),
+            /* @__PURE__ */ jsx4(
+              ThemePreviewSurface,
+              {
+                preset: comparisonSummary,
+                colorScheme: effectiveComparisonScheme,
+                requestedColorScheme: colorScheme
+              }
+            )
+          ] }) }) }, comparisonPreviewKey) : null
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx4(
+      ReferenceSection,
+      {
+        title: "Unsupported lane boundary",
+        description: "Unsupported local theme lanes are blocked by policy and compliance because they create parallel design-system authority.",
+        tone: "supporting",
+        children: /* @__PURE__ */ jsxs2(Stack, { gap: "md", children: [
+          /* @__PURE__ */ jsx4(
+            StateBlock,
+            {
+              variant: "permission",
+              title: "Do not create local branding-layer helpers",
+              description: "If a consumer needs brand expression, use createPublicBrandTheme(...). If a lane is missing, request it for GDS instead of building extendGdsTheme(...), createTheme(...), or mergeMantineTheme(...) ownership locally.",
+              compact: true
+            }
+          ),
+          /* @__PURE__ */ jsxs2(SimpleGrid, { cols: { base: 1, md: 2 }, spacing: "md", children: [
+            /* @__PURE__ */ jsx4(Paper, { withBorder: true, radius: "lg", p: "md", children: /* @__PURE__ */ jsxs2(Stack, { gap: 6, children: [
+              /* @__PURE__ */ jsx4(Text2, { fw: 700, size: "sm", children: "Approved remediation" }),
+              /* @__PURE__ */ jsxs2(Code, { block: true, children: [
+                "createPublicBrandTheme(",
+                `{ flatSurfaces: true, overrides: { primaryColor: 'blue' } }`,
+                ")"
+              ] })
+            ] }) }),
+            /* @__PURE__ */ jsx4(Paper, { withBorder: true, radius: "lg", p: "md", children: /* @__PURE__ */ jsxs2(Stack, { gap: 6, children: [
+              /* @__PURE__ */ jsx4(Text2, { fw: 700, size: "sm", children: "Prohibited ownership" }),
+              /* @__PURE__ */ jsx4(Code, { block: true, children: "extendGdsTheme(...) / createTheme(...) / mergeMantineTheme(...)" })
+            ] }) })
+          ] })
+        ] })
+      }
+    )
+  ] });
+}
+
+// src/GameBoardTile.tsx
+import { Center, Paper as Paper2, Text as Text3, UnstyledButton, useMantineTheme } from "@mantine/core";
+import { useMediaQuery } from "@mantine/hooks";
+import { jsx as jsx5 } from "react/jsx-runtime";
+function GameBoardTile({
+  face,
+  revealed,
+  matched,
+  disabled,
+  onPress,
+  highlightColor
+}) {
+  const theme = useMantineTheme();
+  const reduceMotion = useMediaQuery("(prefers-reduced-motion: reduce)");
+  const highlighted = revealed && !matched;
+  const revealBg = highlightColor ?? (typeof theme.primaryColor === "string" ? `${theme.primaryColor}.5` : "violet.5");
+  return /* @__PURE__ */ jsx5(UnstyledButton, { w: "100%", disabled, onClick: onPress, "aria-pressed": revealed, children: /* @__PURE__ */ jsx5(
+    Paper2,
+    {
+      withBorder: true,
+      radius: "md",
+      p: "md",
+      bg: revealed ? revealBg : "dark.6",
+      styles: {
+        root: {
+          aspectRatio: "1",
+          opacity: matched ? 0.55 : 1,
+          cursor: disabled ? "not-allowed" : "pointer",
+          transition: reduceMotion ? "opacity 0.2s ease" : "transform 0.25s ease, background-color 0.25s ease, opacity 0.25s ease",
+          transform: reduceMotion || !highlighted ? "scale(1)" : "scale(1.02)"
+        }
+      },
+      children: /* @__PURE__ */ jsx5(Center, { h: "100%", children: /* @__PURE__ */ jsx5(Text3, { size: "xl", fw: 700, children: face }) })
+    }
+  ) });
+}
+
+// src/ListingState.client.tsx
+import { createContext, useContext, useMemo as useMemo2, useReducer } from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+function createInitialState(config = {}) {
+  return {
+    search: "",
+    sort: config.defaultSort ?? "newest",
+    filters: [],
+    page: 1,
+    pageSize: config.defaultPageSize ?? 25,
+    selection: []
+  };
+}
+function listingQueryReducer(state, action) {
+  if (action.type === "set-search") {
+    return { ...state, search: action.value, page: 1, selection: [] };
+  }
+  if (action.type === "set-sort") {
+    return { ...state, sort: action.value, page: 1, selection: [] };
+  }
+  if (action.type === "toggle-filter") {
+    const exists = state.filters.includes(action.value);
+    return {
+      ...state,
+      filters: exists ? state.filters.filter((item) => item !== action.value) : [...state.filters, action.value],
+      page: 1,
+      selection: []
+    };
+  }
+  if (action.type === "clear-filters") {
+    return { ...state, filters: [], page: 1, selection: [] };
+  }
+  if (action.type === "set-page") {
+    return { ...state, page: Math.max(1, Math.floor(action.value)) };
+  }
+  if (action.type === "set-page-size") {
+    const nextPageSize = Math.max(1, Math.floor(action.value));
+    return { ...state, pageSize: nextPageSize, page: 1, selection: [] };
+  }
+  if (action.type === "toggle-selection") {
+    const exists = state.selection.includes(action.value);
+    return {
+      ...state,
+      selection: exists ? state.selection.filter((item) => item !== action.value) : [...state.selection, action.value]
+    };
+  }
+  if (action.type === "clear-selection") {
+    return { ...state, selection: [] };
+  }
+  return createInitialState({ defaultSort: state.sort, defaultPageSize: state.pageSize });
+}
+var ListingStateContext = createContext(null);
+function ListingProvider({
+  children,
+  config
+}) {
+  const [state, dispatch] = useReducer(listingQueryReducer, config, createInitialState);
+  const value = useMemo2(() => ({ state, dispatch }), [state]);
+  return /* @__PURE__ */ jsx6(ListingStateContext.Provider, { value, children });
+}
+function useListingState() {
+  const context = useContext(ListingStateContext);
+  if (!context) {
+    throw new Error("useListingState must be used within ListingProvider.");
+  }
+  return context;
+}
+
+// src/DiscoveryShell.tsx
+import { useEffect as useEffect3, useState as useState3 } from "react";
+import { AppShell as MantineAppShell, Box, Burger, Group as Group3, ScrollArea } from "@mantine/core";
+import { useMediaQuery as useMediaQuery2 } from "@mantine/hooks";
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+function useDiscoveryShellState({
+  defaultSidebarOpen = false,
+  sidebarStorageKey,
+  onSidebarOpenedChange
+} = {}) {
+  const [opened, setOpenedState] = useState3(defaultSidebarOpen);
+  useEffect3(() => {
+    if (!sidebarStorageKey || typeof window === "undefined") {
+      return;
+    }
+    const stored = window.localStorage.getItem(sidebarStorageKey);
+    if (stored === "open") {
+      setOpenedState(true);
+    }
+    if (stored === "closed") {
+      setOpenedState(false);
+    }
+  }, [sidebarStorageKey]);
+  const persistAndNotify = (next) => {
+    if (sidebarStorageKey && typeof window !== "undefined") {
+      window.localStorage.setItem(sidebarStorageKey, next ? "open" : "closed");
+    }
+    onSidebarOpenedChange?.(next);
+  };
+  const setOpened = (next) => {
+    setOpenedState(next);
+    persistAndNotify(next);
+  };
+  const open = () => setOpened(true);
+  const close = () => setOpened(false);
+  const toggle = () => {
+    setOpenedState((current) => {
+      const next = !current;
+      persistAndNotify(next);
+      return next;
+    });
+  };
+  return { opened, open, close, toggle, setOpened };
+}
+function DiscoveryShell({
+  header,
+  sidebar,
+  footer,
+  children,
+  mobileNavigationLabel = "Toggle navigation",
+  defaultSidebarOpen = false,
+  sidebarStorageKey,
+  sidebarOpened,
+  onSidebarOpenedChange,
+  stickySidebar = true,
+  desktopCollapsible = false,
+  desktopNavigationLabel = "Toggle sidebar",
+  sidebarWidth = 280,
+  headerHeight = 60,
+  shellPadding = "md",
+  collapseBreakpoint = "sm"
+}) {
+  const breakpointByAlias = {
+    xs: "36em",
+    sm: "48em",
+    md: "62em",
+    lg: "75em",
+    xl: "88em"
+  };
+  const isMobile = useMediaQuery2(`(max-width: ${breakpointByAlias[collapseBreakpoint]})`);
+  const shellState = useDiscoveryShellState({ defaultSidebarOpen, sidebarStorageKey, onSidebarOpenedChange });
+  const opened = sidebarOpened ?? shellState.opened;
+  const close = onSidebarOpenedChange ? () => onSidebarOpenedChange(false) : shellState.close;
+  const toggle = onSidebarOpenedChange ? () => onSidebarOpenedChange(!opened) : shellState.toggle;
+  return /* @__PURE__ */ jsxs3(
+    MantineAppShell,
+    {
+      header: { height: headerHeight },
+      footer: footer ? { height: 68 } : void 0,
+      navbar: {
+        width: sidebarWidth,
+        breakpoint: collapseBreakpoint,
+        collapsed: {
+          mobile: !opened,
+          desktop: desktopCollapsible ? !opened : false
+        }
+      },
+      padding: shellPadding,
+      children: [
+        /* @__PURE__ */ jsx7(MantineAppShell.Header, { children: /* @__PURE__ */ jsxs3(Group3, { h: "100%", px: "md", gap: "sm", wrap: "nowrap", children: [
+          /* @__PURE__ */ jsx7(
+            Burger,
+            {
+              opened,
+              onClick: toggle,
+              hiddenFrom: collapseBreakpoint,
+              size: "sm",
+              "aria-label": mobileNavigationLabel
+            }
+          ),
+          desktopCollapsible ? /* @__PURE__ */ jsx7(
+            Burger,
+            {
+              opened,
+              onClick: toggle,
+              visibleFrom: collapseBreakpoint,
+              size: "sm",
+              "aria-label": desktopNavigationLabel
+            }
+          ) : null,
+          /* @__PURE__ */ jsx7(Box, { style: { flex: 1, minWidth: 0 }, children: header })
+        ] }) }),
+        /* @__PURE__ */ jsx7(MantineAppShell.Navbar, { p: "md", "data-sticky-sidebar": stickySidebar || void 0, children: /* @__PURE__ */ jsx7(ScrollArea, { h: "100%", type: "auto", children: /* @__PURE__ */ jsx7(
+          Box,
+          {
+            h: "100%",
+            style: stickySidebar ? {
+              display: "flex",
+              flexDirection: "column"
+            } : void 0,
+            children: sidebar
+          }
+        ) }) }),
+        footer ? /* @__PURE__ */ jsx7(MantineAppShell.Footer, { children: /* @__PURE__ */ jsx7(Group3, { h: "100%", px: "md", justify: "space-around", wrap: "nowrap", children: footer }) }) : null,
+        /* @__PURE__ */ jsx7(
+          MantineAppShell.Main,
+          {
+            onClick: () => {
+              if (isMobile) {
+                close();
+              }
+            },
+            children
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/DocsShell.tsx
+import { useState as useState4 } from "react";
+import { Box as Box2, Burger as Burger2, Container, Divider, Group as Group4, Stack as Stack2, Text as Text4, Transition } from "@mantine/core";
+import { Fragment, jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+function DocsShellSidebar({ primaryNavigation, secondaryNavigation }) {
+  return /* @__PURE__ */ jsxs4(Stack2, { gap: "md", h: "100%", children: [
+    primaryNavigation ? /* @__PURE__ */ jsxs4(Stack2, { gap: "xs", children: [
+      /* @__PURE__ */ jsx8(Text4, { size: "xs", fw: 700, c: "dimmed", children: "Primary" }),
+      primaryNavigation
+    ] }) : null,
+    secondaryNavigation ? /* @__PURE__ */ jsxs4(Fragment, { children: [
+      /* @__PURE__ */ jsx8(Divider, {}),
+      /* @__PURE__ */ jsxs4(Stack2, { gap: "xs", children: [
+        /* @__PURE__ */ jsx8(Text4, { size: "xs", fw: 700, c: "dimmed", children: "More" }),
+        secondaryNavigation
+      ] })
+    ] }) : null
+  ] });
+}
+function resolveContentContainerSize(value) {
+  if (value === "full") {
+    return "100%";
+  }
+  return value ?? "lg";
+}
+function DocsShell({
+  brand,
+  primaryNavigation,
+  secondaryNavigation,
+  headerContext,
+  actions,
+  mobileNavigation,
+  mobileNavigationMode = "drawer",
+  footer,
+  children,
+  contentWidth = "full"
+}) {
+  const [mobileNavOpen, setMobileNavOpen] = useState4(false);
+  return /* @__PURE__ */ jsx8(
+    DiscoveryShell,
+    {
+      header: /* @__PURE__ */ jsxs4(Group4, { h: "100%", justify: "space-between", align: "center", wrap: "nowrap", gap: "md", children: [
+        /* @__PURE__ */ jsxs4(Group4, { gap: "sm", align: "center", wrap: "nowrap", style: { minWidth: 0 }, children: [
+          mobileNavigationMode === "inline-collapse" && mobileNavigation ? /* @__PURE__ */ jsxs4(Fragment, { children: [
+            /* @__PURE__ */ jsx8(
+              Burger2,
+              {
+                opened: mobileNavOpen,
+                onClick: () => setMobileNavOpen((value) => !value),
+                hiddenFrom: "sm",
+                size: "sm",
+                "aria-label": "Toggle docs navigation"
+              }
+            ),
+            /* @__PURE__ */ jsx8(Transition, { mounted: mobileNavOpen, transition: "pop", duration: 120, children: (styles) => /* @__PURE__ */ jsx8(Box2, { style: styles, children: /* @__PURE__ */ jsx8(Box2, { mt: "xs", p: "sm", style: { borderRadius: 8, border: "1px solid var(--mantine-color-default-border)" }, children: mobileNavigation }) }) })
+          ] }) : null,
+          /* @__PURE__ */ jsx8(Box2, { style: { minWidth: 0 }, children: brand }),
+          headerContext ? /* @__PURE__ */ jsx8(Text4, { size: "sm", c: "dimmed", lineClamp: 1, children: headerContext }) : null
+        ] }),
+        /* @__PURE__ */ jsx8(Group4, { gap: "sm", wrap: "nowrap", style: { minWidth: 0 }, children: actions })
+      ] }),
+      sidebar: /* @__PURE__ */ jsx8(
+        DocsShellSidebar,
+        {
+          primaryNavigation,
+          secondaryNavigation
+        }
+      ),
+      footer,
+      mobileNavigationLabel: "Open docs navigation",
+      headerHeight: 72,
+      children: /* @__PURE__ */ jsx8(Container, { size: resolveContentContainerSize(contentWidth), px: "md", py: "lg", w: "100%", children })
+    }
+  );
+}
+
+// src/SidebarNav.tsx
+import { forwardRef } from "react";
+import { Box as Box3, NavLink, Stack as Stack3, Text as Text5, createPolymorphicComponent } from "@mantine/core";
+import { useGdsTranslation as useGdsTranslation3 } from "@doneisbetter/gds-theme";
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+function SidebarNav({ children, ariaLabel = "Primary navigation", gap = "md" }) {
+  return /* @__PURE__ */ jsx9(Stack3, { component: "nav", "aria-label": ariaLabel, gap, h: "100%", children });
+}
+function SidebarNavSection({ label, children, pushToBottom = false }) {
+  return /* @__PURE__ */ jsxs5(Stack3, { gap: "xs", mt: pushToBottom ? "auto" : void 0, children: [
+    label ? /* @__PURE__ */ jsx9(Text5, { size: "xs", fw: 700, c: "dimmed", children: label }) : null,
+    /* @__PURE__ */ jsx9(Stack3, { gap: 4, children })
+  ] });
+}
+var _SidebarNavItem = forwardRef(
+  ({
+    action,
+    label,
+    description,
+    badge,
+    icon,
+    "aria-label": ariaLabel,
+    "aria-current": ariaCurrent,
+    vocabularyPacks = [],
+    ...props
+  }, ref) => {
+    const { t } = useGdsTranslation3();
+    const config = action ? resolveSemanticActionConfig(action, vocabularyPacks) : null;
+    const Icon = config?.icon;
+    const resolvedLabel = label ?? (action ? getSemanticActionLabel(action, t, vocabularyPacks) : void 0);
+    return /* @__PURE__ */ jsx9(
+      NavLink,
+      {
+        ref,
+        label: resolvedLabel,
+        description,
+        leftSection: icon ?? (Icon ? /* @__PURE__ */ jsx9(Icon, { size: "1rem", stroke: 1.5 }) : void 0),
+        rightSection: badge ? /* @__PURE__ */ jsx9(Box3, { children: badge }) : props.rightSection,
+        "aria-label": ariaLabel ?? (typeof resolvedLabel === "string" ? resolvedLabel : void 0),
+        "aria-current": props.active ? "page" : ariaCurrent,
+        ...props
+      }
+    );
+  }
+);
+var SidebarNavItem = createPolymorphicComponent(_SidebarNavItem);
+
+// src/DocsCodeBlock.tsx
+import { useState as useState5 } from "react";
+import { ActionIcon as ActionIcon2, Code as Code2, Group as Group5, Paper as Paper3, Stack as Stack4, Text as Text6 } from "@mantine/core";
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+function DocsCodeBlock({ code, language, title, withCopy = true }) {
+  const [copied, setCopied] = useState5(false);
+  const handleCopy = async () => {
+    if (!navigator?.clipboard) {
+      return;
+    }
+    await navigator.clipboard.writeText(code);
+    setCopied(true);
+    window.setTimeout(() => setCopied(false), 1200);
+  };
+  return /* @__PURE__ */ jsx10(Paper3, { withBorder: true, radius: "lg", p: "md", children: /* @__PURE__ */ jsxs6(Stack4, { gap: "sm", children: [
+    title || withCopy ? /* @__PURE__ */ jsxs6(Group5, { justify: "space-between", align: "center", children: [
+      /* @__PURE__ */ jsxs6(Stack4, { gap: 0, children: [
+        title ? /* @__PURE__ */ jsx10(Text6, { fw: 600, children: title }) : null,
+        language ? /* @__PURE__ */ jsx10(Text6, { size: "xs", c: "dimmed", children: language }) : null
+      ] }),
+      withCopy ? /* @__PURE__ */ jsx10(
+        ActionIcon2,
+        {
+          variant: "subtle",
+          "aria-label": copied ? "Copied code block" : "Copy code block",
+          onClick: () => {
+            void handleCopy();
+          },
+          children: /* @__PURE__ */ jsx10(GdsIcons.Copy, { size: "1rem" })
+        }
+      ) : null
+    ] }) : null,
+    /* @__PURE__ */ jsx10(Code2, { block: true, children: code })
+  ] }) });
+}
+
+// src/ShareButtonGroup.tsx
+import { useState as useState6 } from "react";
+import { ActionIcon as ActionIcon3, Button as Button3, Group as Group6, Stack as Stack5, Text as Text7 } from "@mantine/core";
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+var channelLabels = {
+  native: "Share",
+  copy: "Copy link",
+  mail: "Email",
+  message: "Message",
+  x: "Share on X",
+  facebook: "Share on Facebook",
+  linkedin: "Share on LinkedIn",
+  whatsapp: "Share on WhatsApp",
+  telegram: "Share on Telegram"
+};
+function encodeShare(url, title, text) {
+  const safeUrl = encodeURIComponent(url);
+  const safeTitle = encodeURIComponent(title ?? "");
+  const safeText = encodeURIComponent(text ?? title ?? "");
+  return {
+    mail: `mailto:?subject=${safeTitle}&body=${safeText ? `${safeText}%0A%0A` : ""}${safeUrl}`,
+    message: `sms:?&body=${safeText ? `${safeText}%20` : ""}${safeUrl}`,
+    x: `https://x.com/intent/tweet?text=${safeText ? `${safeText}%20` : ""}${safeUrl}`,
+    facebook: `https://www.facebook.com/sharer/sharer.php?u=${safeUrl}`,
+    linkedin: `https://www.linkedin.com/sharing/share-offsite/?url=${safeUrl}`,
+    whatsapp: `https://wa.me/?text=${safeText ? `${safeText}%20` : ""}${safeUrl}`,
+    telegram: `https://t.me/share/url?url=${safeUrl}&text=${safeText}`
+  };
+}
+function ShareAction({
+  channel,
+  compact,
+  href,
+  onClick
+}) {
+  const label = channelLabels[channel];
+  const Icon = channel === "copy" ? GdsIcons.Copy : channel === "mail" ? GdsIcons.Mail : channel === "message" ? GdsIcons.Message : GdsIcons.Refer;
+  if (compact) {
+    return href ? /* @__PURE__ */ jsx11(ActionIcon3, { component: "a", href, target: "_blank", rel: "noreferrer", variant: "subtle", size: "lg", "aria-label": label, children: /* @__PURE__ */ jsx11(Icon, { size: "1rem", stroke: 1.75 }) }) : /* @__PURE__ */ jsx11(ActionIcon3, { variant: "subtle", size: "lg", "aria-label": label, onClick, children: /* @__PURE__ */ jsx11(Icon, { size: "1rem", stroke: 1.75 }) });
+  }
+  return href ? /* @__PURE__ */ jsx11(Button3, { component: "a", href, target: "_blank", rel: "noreferrer", variant: "default", leftSection: /* @__PURE__ */ jsx11(Icon, { size: "1rem", stroke: 1.75 }), children: label }) : /* @__PURE__ */ jsx11(Button3, { variant: "default", leftSection: /* @__PURE__ */ jsx11(Icon, { size: "1rem", stroke: 1.75 }), onClick, children: label });
+}
+function ShareButtonGroup({
+  url,
+  title,
+  text,
+  channels = ["native", "copy", "mail"],
+  compact = false,
+  label = "Share this",
+  description
+}) {
+  const [copied, setCopied] = useState6(false);
+  const [shared, setShared] = useState6(false);
+  const hrefs = encodeShare(url, title, text);
+  async function handleCopy() {
+    await navigator.clipboard?.writeText?.(url);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1800);
+  }
+  async function handleNativeShare() {
+    if (navigator.share) {
+      await navigator.share({ url, title, text });
+      setShared(true);
+      setTimeout(() => setShared(false), 1800);
+      return;
+    }
+    await handleCopy();
+  }
+  return /* @__PURE__ */ jsxs7(Stack5, { gap: "sm", children: [
+    /* @__PURE__ */ jsxs7(Stack5, { gap: 2, children: [
+      /* @__PURE__ */ jsx11(Text7, { fw: 600, children: label }),
+      description ? /* @__PURE__ */ jsx11(Text7, { size: "sm", c: "dimmed", children: description }) : null
+    ] }),
+    /* @__PURE__ */ jsx11(Group6, { gap: "sm", wrap: "wrap", children: channels.map((channel) => {
+      if (channel === "copy") {
+        return /* @__PURE__ */ jsx11(ShareAction, { channel, compact, onClick: () => void handleCopy() }, channel);
+      }
+      if (channel === "native") {
+        return /* @__PURE__ */ jsx11(ShareAction, { channel, compact, onClick: () => void handleNativeShare() }, channel);
+      }
+      return /* @__PURE__ */ jsx11(ShareAction, { channel, compact, href: hrefs[channel] }, channel);
+    }) }),
+    copied ? /* @__PURE__ */ jsx11(Text7, { size: "sm", c: "teal", children: "Link copied." }) : null,
+    shared ? /* @__PURE__ */ jsx11(Text7, { size: "sm", c: "teal", children: "Share sheet opened." }) : null
+  ] });
+}
+
+// src/UploadDropzone.tsx
+import { useRef, useState as useState7 } from "react";
+import { Badge as Badge2, Box as Box4, Button as Button4, Group as Group7, Stack as Stack6, Text as Text8 } from "@mantine/core";
+import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+function UploadDropzone({
+  title,
+  description,
+  onFilesSelected,
+  accept,
+  acceptedTypesLabel,
+  maxSizeLabel,
+  multiple = true,
+  actionLabel = "Choose files",
+  mode = "panel",
+  state = "idle",
+  selectedFiles = [],
+  error,
+  policyText,
+  retryAction,
+  removeAction,
+  readonly = false
+}) {
+  const inputRef = useRef(null);
+  const [dragging, setDragging] = useState7(false);
+  const UploadIcon = GdsIcons.Upload;
+  const effectiveState = readonly ? "readonly" : dragging ? "drag-active" : state;
+  const isDisabled = readonly || effectiveState === "upload-pending";
+  const isError = ["upload-failed", "unsupported-type", "too-large"].includes(effectiveState);
+  const forwardFiles = (files) => {
+    if (isDisabled || !files?.length || !onFilesSelected) {
+      return;
+    }
+    onFilesSelected(Array.from(files));
+  };
+  return /* @__PURE__ */ jsxs8(
+    Box4,
+    {
+      onDragOver: (event) => {
+        event.preventDefault();
+        if (isDisabled) {
+          return;
+        }
+        setDragging(true);
+      },
+      onDragLeave: () => setDragging(false),
+      onDrop: (event) => {
+        event.preventDefault();
+        setDragging(false);
+        forwardFiles(event.dataTransfer.files);
+      },
+      p: mode === "inline" ? "md" : "xl",
+      style: {
+        border: `1px dashed var(${effectiveState === "drag-active" ? "--mantine-color-violet-6" : isError ? "--mantine-color-red-6" : "--mantine-color-default-border"})`,
+        borderRadius: "var(--mantine-radius-lg)",
+        background: effectiveState === "drag-active" ? "var(--mantine-color-violet-light)" : "transparent"
+      },
+      "aria-invalid": isError || void 0,
+      children: [
+        /* @__PURE__ */ jsx12(
+          "input",
+          {
+            ref: inputRef,
+            type: "file",
+            hidden: true,
+            accept,
+            multiple,
+            disabled: isDisabled,
+            onChange: (event) => forwardFiles(event.currentTarget.files)
+          }
+        ),
+        /* @__PURE__ */ jsxs8(Stack6, { align: mode === "inline" ? "flex-start" : "center", ta: mode === "inline" ? "left" : "center", gap: "sm", children: [
+          /* @__PURE__ */ jsx12(UploadIcon, { size: "1.5rem" }),
+          /* @__PURE__ */ jsx12(Badge2, { variant: "light", color: isError ? "red" : effectiveState === "selected" ? "blue" : effectiveState === "upload-pending" ? "violet" : "gray", children: effectiveState.replace("-", " ") }),
+          /* @__PURE__ */ jsx12(Text8, { fw: 600, children: title }),
+          description ? /* @__PURE__ */ jsx12(Text8, { size: "sm", c: "dimmed", children: description }) : null,
+          acceptedTypesLabel || maxSizeLabel ? /* @__PURE__ */ jsxs8(Group7, { gap: "xs", justify: mode === "inline" ? "flex-start" : "center", children: [
+            acceptedTypesLabel ? /* @__PURE__ */ jsx12(Badge2, { variant: "outline", color: "gray", children: acceptedTypesLabel }) : null,
+            maxSizeLabel ? /* @__PURE__ */ jsx12(Badge2, { variant: "outline", color: "gray", children: maxSizeLabel }) : null
+          ] }) : null,
+          selectedFiles.length ? /* @__PURE__ */ jsxs8(Text8, { size: "sm", children: [
+            "Selected: ",
+            selectedFiles.join(", ")
+          ] }) : null,
+          policyText ? /* @__PURE__ */ jsx12(Text8, { size: "sm", c: isError ? "red.7" : "dimmed", children: policyText }) : null,
+          error ? /* @__PURE__ */ jsx12(Text8, { size: "sm", c: "red.7", role: "alert", children: error }) : null,
+          /* @__PURE__ */ jsxs8(Group7, { children: [
+            /* @__PURE__ */ jsx12(Button4, { variant: "light", onClick: () => inputRef.current?.click(), disabled: isDisabled, children: actionLabel }),
+            retryAction,
+            removeAction
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/AccessRecoveryPanel.tsx
+import { Group as Group8 } from "@mantine/core";
+import { useGdsTranslation as useGdsTranslation4 } from "@doneisbetter/gds-theme";
+import { jsx as jsx13 } from "react/jsx-runtime";
+var stateBlockVariantByState = {
+  unauthenticated: "permission",
+  "expired-session": "info",
+  timeout: "error",
+  forbidden: "permission",
+  missing: "error",
+  unavailable: "error"
+};
+var defaultCopyByState = {
+  unauthenticated: {
+    title: "Sign in required",
+    description: "Please sign in to continue to this content."
+  },
+  "expired-session": {
+    title: "Session expired",
+    description: "Sign in again or retry to continue where you left off."
+  },
+  timeout: {
+    title: "Request timed out",
+    description: "The recovery action took too long. Retry or choose a safe destination."
+  },
+  forbidden: {
+    title: "You do not have access",
+    description: "This content is outside your current permissions or scope."
+  },
+  missing: {
+    title: "Content not found",
+    description: "The resource may have moved, been deleted, or never existed in this scope."
+  },
+  unavailable: {
+    title: "Content is temporarily unavailable",
+    description: "Try again in a moment or return to a safe destination."
+  }
+};
+function defaultActionsForState(state, {
+  onRetry,
+  onSignIn,
+  onBack,
+  supportAction
+}) {
+  const signInAction = onSignIn ? { action: "login", onClick: onSignIn } : null;
+  const retryAction = onRetry ? { action: "refresh", onClick: onRetry, variant: "light" } : null;
+  const backAction = onBack ? { action: "back", onClick: onBack, variant: "default" } : null;
+  switch (state) {
+    case "unauthenticated":
+      return { primary: signInAction, secondary: backAction, tertiary: supportAction ?? null };
+    case "expired-session":
+      return {
+        primary: signInAction ?? retryAction,
+        secondary: retryAction && signInAction ? retryAction : backAction,
+        tertiary: supportAction ?? null
+      };
+    case "timeout":
+      return {
+        primary: retryAction ?? backAction,
+        secondary: retryAction && backAction ? backAction : supportAction ?? null,
+        tertiary: retryAction && backAction ? supportAction ?? null : null
+      };
+    case "forbidden":
+      return { primary: backAction, secondary: supportAction ?? null, tertiary: null };
+    case "missing":
+      return { primary: backAction, secondary: supportAction ?? null, tertiary: null };
+    case "unavailable":
+      return {
+        primary: retryAction ?? backAction,
+        secondary: retryAction && backAction ? backAction : supportAction ?? null,
+        tertiary: retryAction && backAction ? supportAction ?? null : null
+      };
+  }
+}
+function ActionGroup({
+  primaryAction,
+  secondaryAction,
+  tertiaryAction
+}) {
+  const actions = [primaryAction, secondaryAction, tertiaryAction].filter(Boolean);
+  if (actions.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx13(Group8, { gap: "sm", justify: "center", wrap: "wrap", children: actions.map((actionConfig, index) => /* @__PURE__ */ jsx13(
+    SemanticButton,
+    {
+      action: actionConfig.action,
+      onClick: actionConfig.onClick,
+      loading: actionConfig.loading,
+      disabled: actionConfig.disabled,
+      color: actionConfig.color,
+      variant: actionConfig.variant ?? (index === 0 ? "filled" : "default")
+    },
+    `${actionConfig.action}-${index}`
+  )) });
+}
+function AccessRecoveryPanel({
+  state,
+  title,
+  description,
+  primaryAction,
+  secondaryAction,
+  tertiaryAction,
+  onRetry,
+  onSignIn,
+  onBack,
+  supportAction,
+  compact = false
+}) {
+  const { t } = useGdsTranslation4();
+  const defaultCopy = defaultCopyByState[state];
+  const defaults = defaultActionsForState(state, {
+    onRetry,
+    onSignIn,
+    onBack,
+    supportAction
+  });
+  return /* @__PURE__ */ jsx13(
+    StateBlock,
+    {
+      variant: stateBlockVariantByState[state],
+      compact,
+      title: title ?? t(`gds.accessRecovery.${state}.title`, defaultCopy.title),
+      description: description ?? t(`gds.accessRecovery.${state}.description`, defaultCopy.description),
+      action: /* @__PURE__ */ jsx13(
+        ActionGroup,
+        {
+          primaryAction: primaryAction ?? defaults.primary,
+          secondaryAction: secondaryAction ?? defaults.secondary,
+          tertiaryAction: tertiaryAction ?? defaults.tertiary
+        }
+      )
+    }
+  );
+}
+
+// src/GdsForm.client.tsx
+import { createContext as createContext2, useContext as useContext2, useMemo as useMemo3, useReducer as useReducer2 } from "react";
+import { Alert, Anchor, Stack as Stack7, Text as Text9 } from "@mantine/core";
+import { jsx as jsx14 } from "react/jsx-runtime";
+function createFieldState(value) {
+  return { value, touched: false, dirty: false };
+}
+function createSnapshot(values) {
+  const fields = Object.entries(values).reduce((acc, [field, value]) => {
+    acc[field] = createFieldState(value);
+    return acc;
+  }, {});
+  return { fields, issues: [], submitState: "idle" };
+}
+function gdsFormReducer(state, action) {
+  switch (action.type) {
+    case "set-field": {
+      const current = state.fields[action.field] ?? createFieldState("");
+      return {
+        ...state,
+        fields: {
+          ...state.fields,
+          [action.field]: {
+            value: action.value,
+            touched: current.touched,
+            dirty: true
+          }
+        }
+      };
+    }
+    case "touch-field": {
+      const current = state.fields[action.field] ?? createFieldState("");
+      return {
+        ...state,
+        fields: {
+          ...state.fields,
+          [action.field]: { ...current, touched: true }
+        }
+      };
+    }
+    case "set-issues":
+      return { ...state, issues: [...action.issues] };
+    case "set-submit-state":
+      return { ...state, submitState: action.submitState, submitError: action.submitError };
+    case "reset":
+      return createSnapshot(action.values ?? {});
+    default:
+      return state;
+  }
+}
+function sortIssues(issues) {
+  const weight = { blocking: 0, warning: 1, info: 2 };
+  return [...issues].sort((a, b) => weight[a.severity] - weight[b.severity]);
+}
+function useGdsForm({
+  initialValues,
+  validate,
+  validateAsync,
+  onSubmit
+}) {
+  const [snapshot, dispatch] = useReducer2(gdsFormReducer, initialValues, createSnapshot);
+  const submit = async () => {
+    dispatch({ type: "set-submit-state", submitState: "validating" });
+    const syncIssues = sortIssues(validate ? validate(snapshot) : []);
+    let mergedIssues = syncIssues;
+    if (syncIssues.filter((issue) => issue.severity === "blocking").length === 0 && validateAsync) {
+      const asyncIssues = sortIssues(await validateAsync(snapshot));
+      mergedIssues = sortIssues([...syncIssues, ...asyncIssues]);
+    }
+    dispatch({ type: "set-issues", issues: mergedIssues });
+    if (mergedIssues.some((issue) => issue.severity === "blocking")) {
+      dispatch({ type: "set-submit-state", submitState: "error", submitError: "Please resolve blocking validation issues." });
+      return false;
+    }
+    dispatch({ type: "set-submit-state", submitState: "submitting" });
+    try {
+      await onSubmit(
+        Object.entries(snapshot.fields).reduce((acc, [field, state]) => {
+          acc[field] = state.value;
+          return acc;
+        }, {})
+      );
+      dispatch({ type: "set-submit-state", submitState: "success" });
+      return true;
+    } catch (error) {
+      dispatch({
+        type: "set-submit-state",
+        submitState: "error",
+        submitError: error instanceof Error ? error.message : "Submission failed."
+      });
+      return false;
+    }
+  };
+  return useMemo3(
+    () => ({
+      snapshot,
+      setFieldValue: (field, value) => dispatch({ type: "set-field", field, value }),
+      touchField: (field) => dispatch({ type: "touch-field", field }),
+      submit,
+      retrySubmit: submit
+    }),
+    [snapshot]
+  );
+}
+var GdsFormContext = createContext2(null);
+function GdsFormProvider({ snapshot, children }) {
+  return /* @__PURE__ */ jsx14(GdsFormContext.Provider, { value: { snapshot }, children });
+}
+function useGdsFormSnapshot() {
+  const context = useContext2(GdsFormContext);
+  if (!context) {
+    throw new Error("useGdsFormSnapshot must be used within GdsFormProvider.");
+  }
+  return context.snapshot;
+}
+function FormErrorSummary({ title = "Please review the following issues." }) {
+  const snapshot = useGdsFormSnapshot();
+  const blocking = snapshot.issues.filter((issue) => issue.severity === "blocking");
+  if (blocking.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx14(Alert, { color: "red", title, children: /* @__PURE__ */ jsx14(Stack7, { gap: 4, children: blocking.map((issue) => /* @__PURE__ */ jsx14(Anchor, { href: `#${issue.field}`, children: issue.message }, `${issue.field}-${issue.message}`)) }) });
+}
+function ValidatedFieldMessage({ field }) {
+  const snapshot = useGdsFormSnapshot();
+  const issue = snapshot.issues.find((item) => item.field === field && item.severity === "blocking");
+  if (!issue) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx14(Text9, { size: "xs", c: "red.7", id: `${field}-error`, children: issue.message });
+}
+
+// src/AdvancedDataTable.client.tsx
+import { useMemo as useMemo4, useState as useState8 } from "react";
+import { Checkbox as Checkbox2, Group as Group9, ScrollArea as ScrollArea2, SegmentedControl, Stack as Stack8, Table, Text as Text10 } from "@mantine/core";
+import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
+function compareValues(a, b) {
+  if (typeof a === "number" && typeof b === "number") {
+    return a - b;
+  }
+  return String(a).localeCompare(String(b), void 0, { numeric: true, sensitivity: "base" });
+}
+function AdvancedDataTable({
+  rows,
+  columns,
+  rowId,
+  loading = false,
+  error = null,
+  density: densityProp,
+  stickyHeader = true,
+  stickyHeaderOffset = 0,
+  selectedRowIds,
+  onSelectedRowIdsChange,
+  sortBy: sortByProp,
+  sortDirection: sortDirectionProp,
+  onSortChange,
+  responsiveFallback = "stacked-cards"
+}) {
+  const [densityState, setDensityState] = useState8(densityProp ?? "comfortable");
+  const [sortState, setSortState] = useState8({ key: sortByProp ?? null, direction: sortDirectionProp ?? "asc" });
+  const [selectionState, setSelectionState] = useState8([]);
+  const density = densityProp ?? densityState;
+  const sortBy = sortByProp ?? sortState.key;
+  const sortDirection = sortDirectionProp ?? sortState.direction;
+  const selection = selectedRowIds ?? selectionState;
+  const sortedRows = useMemo4(() => {
+    if (!sortBy) {
+      return rows;
+    }
+    const column = columns.find((item) => item.key === sortBy);
+    if (!column) {
+      return rows;
+    }
+    const next = [...rows].sort((left, right) => {
+      const leftValue = column.sortAccessor ? column.sortAccessor(left) : String(left[column.key] ?? "");
+      const rightValue = column.sortAccessor ? column.sortAccessor(right) : String(right[column.key] ?? "");
+      const result = compareValues(leftValue, rightValue);
+      return sortDirection === "asc" ? result : -result;
+    });
+    return next;
+  }, [rows, columns, sortBy, sortDirection]);
+  const allIds = useMemo4(() => sortedRows.map((row, index) => rowId(row, index)), [sortedRows, rowId]);
+  const allSelected = allIds.length > 0 && allIds.every((id) => selection.includes(id));
+  if (error) {
+    return /* @__PURE__ */ jsx15(StateBlock, { variant: "error", title: "Unable to load table", description: error, compact: true });
+  }
+  if (loading) {
+    return /* @__PURE__ */ jsx15(StateBlock, { variant: "loading", title: "Loading table", description: "Preparing enterprise data grid.", compact: true });
+  }
+  if (!rows.length) {
+    return /* @__PURE__ */ jsx15(
+      StateBlock,
+      {
+        variant: "empty",
+        title: "No rows available",
+        description: "Adjust filters or broaden scope to populate this table.",
+        compact: true
+      }
+    );
+  }
+  const horizontalSpacing = density === "compact" ? "xs" : "md";
+  const verticalSpacing = density === "compact" ? 6 : 10;
+  return /* @__PURE__ */ jsxs9(Stack8, { gap: "sm", children: [
+    /* @__PURE__ */ jsxs9(Group9, { justify: "space-between", align: "center", children: [
+      /* @__PURE__ */ jsxs9(Text10, { size: "sm", fw: 600, children: [
+        rows.length,
+        " rows"
+      ] }),
+      /* @__PURE__ */ jsx15(
+        SegmentedControl,
+        {
+          size: "xs",
+          value: density,
+          onChange: (value) => setDensityState(value),
+          data: [
+            { label: "Compact", value: "compact" },
+            { label: "Comfortable", value: "comfortable" }
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx15(ScrollArea2, { children: /* @__PURE__ */ jsxs9(
+      Table,
+      {
+        stickyHeader,
+        stickyHeaderOffset,
+        withTableBorder: true,
+        highlightOnHover: true,
+        striped: true,
+        horizontalSpacing,
+        verticalSpacing,
+        children: [
+          /* @__PURE__ */ jsx15(Table.Thead, { children: /* @__PURE__ */ jsxs9(Table.Tr, { children: [
+            /* @__PURE__ */ jsx15(Table.Th, { children: /* @__PURE__ */ jsx15(
+              Checkbox2,
+              {
+                "aria-label": "Select all rows",
+                checked: allSelected,
+                indeterminate: !allSelected && selection.length > 0,
+                onChange: (event) => {
+                  const next = event.currentTarget.checked ? allIds : [];
+                  if (onSelectedRowIdsChange) {
+                    onSelectedRowIdsChange(next);
+                  } else {
+                    setSelectionState(next);
+                  }
+                }
+              }
+            ) }),
+            columns.map((column) => /* @__PURE__ */ jsx15(Table.Th, { style: column.width ? { width: column.width } : void 0, children: column.sortable ? /* @__PURE__ */ jsx15(
+              "button",
+              {
+                type: "button",
+                "aria-label": `Sort by ${column.label}`,
+                onClick: () => {
+                  const nextDirection = sortBy === column.key && sortDirection === "asc" ? "desc" : "asc";
+                  if (onSortChange) {
+                    onSortChange(column.key, nextDirection);
+                  } else {
+                    setSortState({ key: column.key, direction: nextDirection });
+                  }
+                },
+                children: column.label
+              }
+            ) : column.label }, column.key))
+          ] }) }),
+          /* @__PURE__ */ jsx15(Table.Tbody, { children: sortedRows.map((row, index) => {
+            const id = rowId(row, index);
+            const checked = selection.includes(id);
+            return /* @__PURE__ */ jsxs9(Table.Tr, { children: [
+              /* @__PURE__ */ jsx15(Table.Td, { children: /* @__PURE__ */ jsx15(
+                Checkbox2,
+                {
+                  "aria-label": `Select row ${id}`,
+                  checked,
+                  onChange: () => {
+                    const next = checked ? selection.filter((item) => item !== id) : [...selection, id];
+                    if (onSelectedRowIdsChange) {
+                      onSelectedRowIdsChange(next);
+                    } else {
+                      setSelectionState(next);
+                    }
+                  }
+                }
+              ) }),
+              columns.map((column) => /* @__PURE__ */ jsx15(Table.Td, { children: column.render ? column.render(row) : String(row[column.key] ?? "") }, column.key))
+            ] }, id);
+          }) })
+        ]
+      }
+    ) }),
+    responsiveFallback === "stacked-cards" ? /* @__PURE__ */ jsx15(Stack8, { gap: "xs", children: sortedRows.slice(0, 3).map((row, index) => {
+      const id = rowId(row, index);
+      return /* @__PURE__ */ jsx15(
+        StateBlock,
+        {
+          variant: "info",
+          compact: true,
+          title: String(row[columns[0]?.key] ?? id),
+          description: columns.slice(1, 3).map((column) => `${column.label}: ${String(row[column.key] ?? "")}`).join(" | ")
+        },
+        `card-${id}`
+      );
+    }) }) : null
+  ] });
+}
+
+// src/OverlayManager.client.tsx
+import { createContext as createContext3, useContext as useContext3, useMemo as useMemo5, useState as useState9 } from "react";
+import { jsx as jsx16 } from "react/jsx-runtime";
+var OverlayManagerContext = createContext3(null);
+function OverlayManagerProvider({ children }) {
+  const [stack, setStack] = useState9([]);
+  const value = useMemo5(() => ({
+    stack,
+    registerOverlay: (overlay) => {
+      setStack((current) => {
+        const without = current.filter((item) => item.id !== overlay.id);
+        return [...without, overlay];
+      });
+    },
+    unregisterOverlay: (id) => {
+      setStack((current) => current.filter((item) => item.id !== id));
+    },
+    isTopMost: (id) => stack.length > 0 && stack[stack.length - 1]?.id === id,
+    requestClose: (id, reason) => {
+      if (stack.length === 0 || stack[stack.length - 1]?.id !== id) {
+        return null;
+      }
+      return reason;
+    }
+  }), [stack]);
+  return /* @__PURE__ */ jsx16(OverlayManagerContext.Provider, { value, children });
+}
+function useOverlayManager() {
+  const context = useContext3(OverlayManagerContext);
+  if (!context) {
+    throw new Error("useOverlayManager must be used within OverlayManagerProvider.");
+  }
+  return context;
+}
+
+// src/CommandPalette.client.tsx
+import { createContext as createContext4, useContext as useContext4, useEffect as useEffect4, useMemo as useMemo6, useState as useState10 } from "react";
+import { ActionIcon as ActionIcon4, Group as Group10, Modal as Modal2, Stack as Stack9, Text as Text11, TextInput as TextInput2 } from "@mantine/core";
+import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
+var CommandPaletteContext = createContext4(null);
+function normalize(text) {
+  return text.trim().toLowerCase();
+}
+function scoreCommand(command, query, recentUse) {
+  const q = normalize(query);
+  if (!q) {
+    return 0;
+  }
+  const label = normalize(command.label);
+  const keywords = command.keywords?.map(normalize) ?? [];
+  const prefix = label.startsWith(q) ? 1 : 0;
+  const keyword = keywords.some((item) => item.includes(q)) ? 1 : 0;
+  const recent = recentUse[command.id] ? 1 : 0;
+  return 0.6 * prefix + 0.3 * keyword + 0.1 * recent;
+}
+function CommandRegistryProvider({ children }) {
+  const [commands, setCommands] = useState10([]);
+  const [opened, setOpened] = useState10(false);
+  const value = useMemo6(() => ({
+    commands,
+    registerCommands: (next) => setCommands(next),
+    open: () => setOpened(true),
+    close: () => setOpened(false)
+  }), [commands]);
+  return /* @__PURE__ */ jsxs10(CommandPaletteContext.Provider, { value, children: [
+    children,
+    /* @__PURE__ */ jsx17(CommandPalette, { opened, onClose: () => setOpened(false) })
+  ] });
+}
+function useCommandLauncher() {
+  const context = useContext4(CommandPaletteContext);
+  if (!context) {
+    throw new Error("useCommandLauncher must be used within CommandRegistryProvider.");
+  }
+  return {
+    open: context.open,
+    close: context.close,
+    registerCommands: context.registerCommands
+  };
+}
+function CommandPalette({ opened, onClose }) {
+  const contextValue = useContext4(CommandPaletteContext);
+  if (!contextValue) {
+    throw new Error("CommandPalette must be used within CommandRegistryProvider.");
+  }
+  const registry = contextValue;
+  const [query, setQuery] = useState10("");
+  const [recentUse, setRecentUse] = useState10({});
+  const enabledCommands = registry.commands.filter((command) => command.enabledWhen ? command.enabledWhen() : true);
+  const filteredCommands = [...enabledCommands].map((command) => ({ command, score: scoreCommand(command, query, recentUse) })).filter(({ command, score }) => normalize(query) === "" || score > 0 || normalize(command.label).includes(normalize(query))).sort((a, b) => b.score - a.score).map((item) => item.command);
+  useEffect4(() => {
+    function onKeyDown(event) {
+      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
+        event.preventDefault();
+        registry.open();
+      }
+      if (event.key === "Escape" && opened) {
+        onClose();
+      }
+    }
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [registry, opened, onClose]);
+  return /* @__PURE__ */ jsx17(Modal2, { opened, onClose, title: "Quick actions", centered: true, children: /* @__PURE__ */ jsxs10(Stack9, { gap: "sm", children: [
+    /* @__PURE__ */ jsx17(
+      TextInput2,
+      {
+        "aria-label": "Command search",
+        placeholder: "Search commands",
+        value: query,
+        onChange: (event) => setQuery(event.currentTarget.value)
+      }
+    ),
+    filteredCommands.length === 0 ? /* @__PURE__ */ jsx17(Text11, { size: "sm", c: "dimmed", children: "No matching commands." }) : filteredCommands.map((command) => /* @__PURE__ */ jsxs10(Group10, { justify: "space-between", wrap: "nowrap", children: [
+      /* @__PURE__ */ jsx17(
+        "button",
+        {
+          type: "button",
+          onClick: async () => {
+            await command.run();
+            setRecentUse((current) => ({ ...current, [command.id]: Date.now() }));
+            onClose();
+          },
+          "aria-label": command.label,
+          children: command.label
+        }
+      ),
+      command.shortcut ? /* @__PURE__ */ jsx17(Text11, { size: "xs", c: "dimmed", children: command.shortcut }) : null
+    ] }, command.id)),
+    /* @__PURE__ */ jsx17(Group10, { justify: "flex-end", children: /* @__PURE__ */ jsx17(ActionIcon4, { variant: "subtle", "aria-label": "Close command palette", onClick: onClose, children: /* @__PURE__ */ jsx17(GdsIcons.Close, { size: "1rem" }) }) })
+  ] }) });
+}
+
+// src/Notifications.client.tsx
+import { createContext as createContext5, useContext as useContext5, useMemo as useMemo7, useState as useState11 } from "react";
+import { jsx as jsx18 } from "react/jsx-runtime";
+var GdsNotificationContext = createContext5(null);
+function GdsNotificationProvider({ children }) {
+  const [notifications, setNotifications] = useState11([]);
+  const value = useMemo7(() => ({
+    notifications,
+    notify: (message) => {
+      setNotifications((current) => {
+        const rest = current.filter((item) => item.id !== message.id);
+        return [...rest, message];
+      });
+      if (typeof message.autoCloseMs === "number" && message.autoCloseMs > 0) {
+        window.setTimeout(() => {
+          setNotifications((current) => current.filter((item) => item.id !== message.id));
+        }, message.autoCloseMs);
+      }
+    },
+    dismiss: (id) => {
+      setNotifications((current) => current.filter((item) => item.id !== id));
+    },
+    clear: () => {
+      setNotifications([]);
+    }
+  }), [notifications]);
+  return /* @__PURE__ */ jsx18(GdsNotificationContext.Provider, { value, children });
+}
+function useGdsNotifications() {
+  const context = useContext5(GdsNotificationContext);
+  if (!context) {
+    throw new Error("useGdsNotifications must be used within GdsNotificationProvider.");
+  }
+  return context;
+}
+function NotificationCenter({
+  title = "Notifications",
+  emptyMessage = "No active notifications."
+}) {
+  const { notifications, dismiss, clear } = useGdsNotifications();
+  return /* @__PURE__ */ jsx18(
+    NotificationCenterView,
+    {
+      title,
+      emptyMessage,
+      notifications,
+      onDismiss: dismiss,
+      onClear: clear
+    }
+  );
+}
+
+// src/Telemetry.client.tsx
+import { createContext as createContext6, useContext as useContext6, useMemo as useMemo8 } from "react";
+import { jsx as jsx19 } from "react/jsx-runtime";
+var GdsTelemetryContext = createContext6(null);
+function hashToUnit(value) {
+  let hash = 0;
+  for (let index = 0; index < value.length; index += 1) {
+    hash = (hash << 5) - hash + value.charCodeAt(index);
+    hash |= 0;
+  }
+  return Math.abs(hash % 1e3) / 1e3;
+}
+function redactContext(context) {
+  if (!context) {
+    return context;
+  }
+  return Object.entries(context).reduce((acc, [key, value]) => {
+    if (key.toLowerCase().includes("email") || key.toLowerCase().includes("name") || key.toLowerCase().includes("phone")) {
+      return acc;
+    }
+    acc[key] = value;
+    return acc;
+  }, {});
+}
+function GdsTelemetryProvider({ children, sink, sampleRate = 1 }) {
+  const value = useMemo8(() => ({
+    emit: (event) => {
+      if (hashToUnit(event.correlationId) > sampleRate) {
+        return;
+      }
+      sink?.({
+        ...event,
+        context: redactContext(event.context),
+        ts: Date.now()
+      });
+    }
+  }), [sampleRate, sink]);
+  return /* @__PURE__ */ jsx19(GdsTelemetryContext.Provider, { value, children });
+}
+function useGdsTelemetry() {
+  const context = useContext6(GdsTelemetryContext);
+  if (!context) {
+    throw new Error("useGdsTelemetry must be used within GdsTelemetryProvider.");
+  }
+  return context;
+}
+
+export {
+  SemanticButton,
+  ConfirmDialog,
+  ThemeToggle,
+  ReferenceThemeExplorer,
+  GameBoardTile,
+  listingQueryReducer,
+  ListingProvider,
+  useListingState,
+  useDiscoveryShellState,
+  DiscoveryShell,
+  DocsShell,
+  SidebarNav,
+  SidebarNavSection,
+  SidebarNavItem,
+  DocsCodeBlock,
+  ShareButtonGroup,
+  UploadDropzone,
+  AccessRecoveryPanel,
+  gdsFormReducer,
+  useGdsForm,
+  GdsFormProvider,
+  useGdsFormSnapshot,
+  FormErrorSummary,
+  ValidatedFieldMessage,
+  AdvancedDataTable,
+  OverlayManagerProvider,
+  useOverlayManager,
+  CommandRegistryProvider,
+  useCommandLauncher,
+  CommandPalette,
+  GdsNotificationProvider,
+  useGdsNotifications,
+  NotificationCenter,
+  GdsTelemetryProvider,
+  useGdsTelemetry
+};