@doneisbetter/gds-core 2.6.3 → 2.6.5

package/dist/chunk-BU3CRWRC.mjs

@@ -0,0 +1,905 @@
+import {
+  ActionBar,
+  FormField,
+  GdsIcons,
+  ListingCard,
+  ReferenceSection,
+  StateBlock,
+  getSemanticActionLabel,
+  resolveSemanticActionConfig
+} from "./chunk-6LOTZ3IZ.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" }) {
+  const { setColorScheme } = useMantineColorScheme();
+  const computedColorScheme = useComputedColorScheme("light", { getInitialValueInEffect: true });
+  const { t } = useGdsTranslation2();
+  const toggleColorScheme = () => {
+    setColorScheme(computedColorScheme === "dark" ? "light" : "dark");
+  };
+  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 { 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,
+  createPublicBrandTheme,
+  gdsDarkPublicTheme,
+  gdsEditorialPublicTheme,
+  gdsFlatSurfaceTheme,
+  gdsTheme
+} from "@doneisbetter/gds-theme";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var themePresetCatalog = {
+  default: {
+    label: "Default runtime theme",
+    bestFor: "Balanced multi-surface products that need the baseline GDS system.",
+    summary: "The default shared runtime lane for most adopters.",
+    themeKey: "gdsTheme"
+  },
+  "dark-public": {
+    label: "Dark public theme",
+    bestFor: "Dark-first public experiences and campaign-style landing surfaces.",
+    summary: "A darker public presentation lane with the shipped runtime rhythm intact.",
+    themeKey: "gdsDarkPublicTheme"
+  },
+  "flat-surface": {
+    label: "Flat surface theme",
+    bestFor: "Operational products that prefer quieter elevation and flatter surface contrast.",
+    summary: "Removes some visual weight without creating a second token authority.",
+    themeKey: "gdsFlatSurfaceTheme"
+  },
+  editorial: {
+    label: "Editorial serif theme",
+    bestFor: "Documentation, editorial, and content-led experiences.",
+    summary: "Adds a more expressive public reading tone while staying inside GDS contracts.",
+    themeKey: "gdsEditorialPublicTheme"
+  },
+  brand: {
+    label: "Brand theme generator",
+    bestFor: "Consumer teams that need controlled brand expression without forking the system.",
+    summary: "Composes the shipped helpers into a governed product-authored theme lane.",
+    themeKey: "createPublicBrandTheme(...)"
+  }
+};
+function ThemePreviewSurface({
+  preset,
+  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__ */ 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 }
+          ],
+          primaryAction: /* @__PURE__ */ jsx4(Button2, { size: "sm", children: "Inspect route" })
+        }
+      )
+    ] })
+  ] }) });
+}
+function ReferenceThemeExplorer() {
+  const [preset, setPreset] = useState2("default");
+  const [colorScheme, setColorScheme] = useState2("light");
+  const [brandPrimary, setBrandPrimary] = useState2("blue");
+  const [brandFlatSurfaces, setBrandFlatSurfaces] = useState2(true);
+  const [brandEditorialSerif, setBrandEditorialSerif] = useState2(false);
+  const [comparisonEnabled, setComparisonEnabled] = useState2(false);
+  const [comparisonPreset, setComparisonPreset] = useState2("editorial");
+  const resolveTheme = (presetId) => {
+    switch (presetId) {
+      case "dark-public":
+        return gdsDarkPublicTheme;
+      case "flat-surface":
+        return gdsFlatSurfaceTheme;
+      case "editorial":
+        return gdsEditorialPublicTheme;
+      case "brand":
+        return createPublicBrandTheme({
+          flatSurfaces: brandFlatSurfaces,
+          editorialSerif: brandEditorialSerif,
+          overrides: { primaryColor: brandPrimary }
+        });
+      default:
+        return gdsTheme;
+    }
+  };
+  const selectionSummary = themePresetCatalog[preset];
+  const comparisonSummary = themePresetCatalog[comparisonPreset];
+  const selectedTheme = useMemo(() => resolveTheme(preset), [preset, brandPrimary, brandFlatSurfaces, brandEditorialSerif]);
+  const comparedTheme = useMemo(() => resolveTheme(comparisonPreset), [comparisonPreset, brandPrimary, brandFlatSurfaces, brandEditorialSerif]);
+  const previewKey = `${preset}-${colorScheme}-${brandPrimary}-${brandFlatSurfaces}-${brandEditorialSerif}`;
+  const comparisonPreviewKey = `${comparisonPreset}-${colorScheme}-${brandPrimary}-${brandFlatSurfaces}-${brandEditorialSerif}`;
+  const reset = () => {
+    setPreset("default");
+    setColorScheme("light");
+    setBrandPrimary("blue");
+    setBrandFlatSurfaces(true);
+    setBrandEditorialSerif(false);
+    setComparisonEnabled(false);
+    setComparisonPreset("editorial");
+  };
+  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(Button2, { variant: "default", size: "sm", onClick: reset, children: "Reset theme lab" }),
+            /* @__PURE__ */ jsx4(Text2, { size: "sm", c: "dimmed", children: "The reference site remounts an isolated provider here so visitors can test shipped presets without changing the whole docs shell." })
+          ] }) }),
+          /* @__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", 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
+              ] })
+            ] }),
+            /* @__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: Object.entries(themePresetCatalog).filter(([value]) => value !== preset).map(([value, item]) => ({ value, label: item.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__ */ jsx4(Code, { block: true, fz: "10px", children: lane.themeKey })
+        ] }) }, lane.themeKey)) })
+      }
+    ),
+    /* @__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: colorScheme, children: /* @__PURE__ */ jsx4(ThemePreviewSurface, { preset: selectionSummary, colorScheme }) }, previewKey),
+          comparisonEnabled ? /* @__PURE__ */ jsx4(GdsProvider, { theme: comparedTheme, defaultColorScheme: colorScheme, 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 })
+          ] }) }) }, comparisonPreviewKey) : null
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx4(
+      ReferenceSection,
+      {
+        title: "Creator-Authored Experience Boundary",
+        description: "Creator-authored expression is allowed only through the sanctioned theme helpers and narrow exception process.",
+        tone: "supporting",
+        children: /* @__PURE__ */ jsx4(
+          StateBlock,
+          {
+            variant: "info",
+            title: "Shipped first, custom second",
+            description: "The official site uses shipped presets and the public brand generator first. Product-authored overrides must stay reviewable, testable, and scoped.",
+            compact: true
+          }
+        )
+      }
+    )
+  ] });
+}
+
+// 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/DiscoveryShell.tsx
+import { AppShell as MantineAppShell, Box, Burger, Group as Group3, ScrollArea } from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+function DiscoveryShell({
+  header,
+  sidebar,
+  footer,
+  children,
+  mobileNavigationLabel = "Toggle navigation",
+  defaultSidebarOpen = false,
+  stickySidebar = true,
+  sidebarWidth = 280,
+  headerHeight = 60,
+  shellPadding = "md",
+  collapseBreakpoint = "sm"
+}) {
+  const [opened, { toggle, close }] = useDisclosure(defaultSidebarOpen);
+  return /* @__PURE__ */ jsxs3(
+    MantineAppShell,
+    {
+      header: { height: headerHeight },
+      footer: footer ? { height: 68 } : void 0,
+      navbar: {
+        width: sidebarWidth,
+        breakpoint: collapseBreakpoint,
+        collapsed: { mobile: !opened }
+      },
+      padding: shellPadding,
+      children: [
+        /* @__PURE__ */ jsx6(MantineAppShell.Header, { children: /* @__PURE__ */ jsxs3(Group3, { h: "100%", px: "md", gap: "sm", wrap: "nowrap", children: [
+          /* @__PURE__ */ jsx6(
+            Burger,
+            {
+              opened,
+              onClick: toggle,
+              hiddenFrom: collapseBreakpoint,
+              size: "sm",
+              "aria-label": mobileNavigationLabel
+            }
+          ),
+          /* @__PURE__ */ jsx6(Box, { style: { flex: 1, minWidth: 0 }, children: header })
+        ] }) }),
+        /* @__PURE__ */ jsx6(MantineAppShell.Navbar, { p: "md", "data-sticky-sidebar": stickySidebar || void 0, children: /* @__PURE__ */ jsx6(ScrollArea, { h: "100%", type: "auto", children: /* @__PURE__ */ jsx6(
+          Box,
+          {
+            h: "100%",
+            style: stickySidebar ? {
+              display: "flex",
+              flexDirection: "column"
+            } : void 0,
+            children: sidebar
+          }
+        ) }) }),
+        footer ? /* @__PURE__ */ jsx6(MantineAppShell.Footer, { children: /* @__PURE__ */ jsx6(Group3, { h: "100%", px: "md", justify: "space-around", wrap: "nowrap", children: footer }) }) : null,
+        /* @__PURE__ */ jsx6(MantineAppShell.Main, { onClick: () => close(), children })
+      ]
+    }
+  );
+}
+
+// src/SidebarNav.tsx
+import { forwardRef } from "react";
+import { Box as Box2, NavLink, Stack as Stack2, Text as Text4, createPolymorphicComponent } from "@mantine/core";
+import { useGdsTranslation as useGdsTranslation3 } from "@doneisbetter/gds-theme";
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+function SidebarNav({ children, ariaLabel = "Primary navigation", gap = "md" }) {
+  return /* @__PURE__ */ jsx7(Stack2, { component: "nav", "aria-label": ariaLabel, gap, h: "100%", children });
+}
+function SidebarNavSection({ label, children, pushToBottom = false }) {
+  return /* @__PURE__ */ jsxs4(Stack2, { gap: "xs", mt: pushToBottom ? "auto" : void 0, children: [
+    label ? /* @__PURE__ */ jsx7(Text4, { size: "xs", fw: 700, c: "dimmed", children: label }) : null,
+    /* @__PURE__ */ jsx7(Stack2, { 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__ */ jsx7(
+      NavLink,
+      {
+        ref,
+        label: resolvedLabel,
+        description,
+        leftSection: icon ?? (Icon ? /* @__PURE__ */ jsx7(Icon, { size: "1rem", stroke: 1.5 }) : void 0),
+        rightSection: badge ? /* @__PURE__ */ jsx7(Box2, { 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 useState3 } from "react";
+import { ActionIcon as ActionIcon2, Code as Code2, Group as Group4, Paper as Paper3, Stack as Stack3, Text as Text5 } from "@mantine/core";
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+function DocsCodeBlock({ code, language, title, withCopy = true }) {
+  const [copied, setCopied] = useState3(false);
+  const handleCopy = async () => {
+    if (!navigator?.clipboard) {
+      return;
+    }
+    await navigator.clipboard.writeText(code);
+    setCopied(true);
+    window.setTimeout(() => setCopied(false), 1200);
+  };
+  return /* @__PURE__ */ jsx8(Paper3, { withBorder: true, radius: "lg", p: "md", children: /* @__PURE__ */ jsxs5(Stack3, { gap: "sm", children: [
+    title || withCopy ? /* @__PURE__ */ jsxs5(Group4, { justify: "space-between", align: "center", children: [
+      /* @__PURE__ */ jsxs5(Stack3, { gap: 0, children: [
+        title ? /* @__PURE__ */ jsx8(Text5, { fw: 600, children: title }) : null,
+        language ? /* @__PURE__ */ jsx8(Text5, { size: "xs", c: "dimmed", children: language }) : null
+      ] }),
+      withCopy ? /* @__PURE__ */ jsx8(
+        ActionIcon2,
+        {
+          variant: "subtle",
+          "aria-label": copied ? "Copied code block" : "Copy code block",
+          onClick: () => {
+            void handleCopy();
+          },
+          children: /* @__PURE__ */ jsx8(GdsIcons.Copy, { size: "1rem" })
+        }
+      ) : null
+    ] }) : null,
+    /* @__PURE__ */ jsx8(Code2, { block: true, children: code })
+  ] }) });
+}
+
+// src/ShareButtonGroup.tsx
+import { useState as useState4 } from "react";
+import { ActionIcon as ActionIcon3, Button as Button3, Group as Group5, Stack as Stack4, Text as Text6 } from "@mantine/core";
+import { jsx as jsx9, jsxs as jsxs6 } 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__ */ jsx9(ActionIcon3, { component: "a", href, target: "_blank", rel: "noreferrer", variant: "subtle", size: "lg", "aria-label": label, children: /* @__PURE__ */ jsx9(Icon, { size: "1rem", stroke: 1.75 }) }) : /* @__PURE__ */ jsx9(ActionIcon3, { variant: "subtle", size: "lg", "aria-label": label, onClick, children: /* @__PURE__ */ jsx9(Icon, { size: "1rem", stroke: 1.75 }) });
+  }
+  return href ? /* @__PURE__ */ jsx9(Button3, { component: "a", href, target: "_blank", rel: "noreferrer", variant: "default", leftSection: /* @__PURE__ */ jsx9(Icon, { size: "1rem", stroke: 1.75 }), children: label }) : /* @__PURE__ */ jsx9(Button3, { variant: "default", leftSection: /* @__PURE__ */ jsx9(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] = useState4(false);
+  const [shared, setShared] = useState4(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__ */ jsxs6(Stack4, { gap: "sm", children: [
+    /* @__PURE__ */ jsxs6(Stack4, { gap: 2, children: [
+      /* @__PURE__ */ jsx9(Text6, { fw: 600, children: label }),
+      description ? /* @__PURE__ */ jsx9(Text6, { size: "sm", c: "dimmed", children: description }) : null
+    ] }),
+    /* @__PURE__ */ jsx9(Group5, { gap: "sm", wrap: "wrap", children: channels.map((channel) => {
+      if (channel === "copy") {
+        return /* @__PURE__ */ jsx9(ShareAction, { channel, compact, onClick: () => void handleCopy() }, channel);
+      }
+      if (channel === "native") {
+        return /* @__PURE__ */ jsx9(ShareAction, { channel, compact, onClick: () => void handleNativeShare() }, channel);
+      }
+      return /* @__PURE__ */ jsx9(ShareAction, { channel, compact, href: hrefs[channel] }, channel);
+    }) }),
+    copied ? /* @__PURE__ */ jsx9(Text6, { size: "sm", c: "teal", children: "Link copied." }) : null,
+    shared ? /* @__PURE__ */ jsx9(Text6, { size: "sm", c: "teal", children: "Share sheet opened." }) : null
+  ] });
+}
+
+// src/UploadDropzone.tsx
+import { useRef, useState as useState5 } from "react";
+import { Box as Box3, Button as Button4, Group as Group6, Stack as Stack5, Text as Text7 } from "@mantine/core";
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+function UploadDropzone({
+  title,
+  description,
+  onFilesSelected,
+  accept,
+  multiple = true,
+  actionLabel = "Choose files",
+  mode = "panel"
+}) {
+  const inputRef = useRef(null);
+  const [dragging, setDragging] = useState5(false);
+  const UploadIcon = GdsIcons.Upload;
+  const forwardFiles = (files) => {
+    if (!files?.length || !onFilesSelected) {
+      return;
+    }
+    onFilesSelected(Array.from(files));
+  };
+  return /* @__PURE__ */ jsxs7(
+    Box3,
+    {
+      onDragOver: (event) => {
+        event.preventDefault();
+        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(${dragging ? "--mantine-color-violet-6" : "--mantine-color-default-border"})`,
+        borderRadius: "var(--mantine-radius-lg)",
+        background: dragging ? "var(--mantine-color-violet-light)" : "transparent"
+      },
+      children: [
+        /* @__PURE__ */ jsx10(
+          "input",
+          {
+            ref: inputRef,
+            type: "file",
+            hidden: true,
+            accept,
+            multiple,
+            onChange: (event) => forwardFiles(event.currentTarget.files)
+          }
+        ),
+        /* @__PURE__ */ jsxs7(Stack5, { align: mode === "inline" ? "flex-start" : "center", ta: mode === "inline" ? "left" : "center", gap: "sm", children: [
+          /* @__PURE__ */ jsx10(UploadIcon, { size: "1.5rem" }),
+          /* @__PURE__ */ jsx10(Text7, { fw: 600, children: title }),
+          description ? /* @__PURE__ */ jsx10(Text7, { size: "sm", c: "dimmed", children: description }) : null,
+          /* @__PURE__ */ jsx10(Group6, { children: /* @__PURE__ */ jsx10(Button4, { variant: "light", onClick: () => inputRef.current?.click(), children: actionLabel }) })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/AccessRecoveryPanel.tsx
+import { Group as Group7 } from "@mantine/core";
+import { useGdsTranslation as useGdsTranslation4 } from "@doneisbetter/gds-theme";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var stateBlockVariantByState = {
+  unauthenticated: "permission",
+  "expired-session": "info",
+  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."
+  },
+  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 "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__ */ jsx11(Group7, { gap: "sm", justify: "center", wrap: "wrap", children: actions.map((actionConfig, index) => /* @__PURE__ */ jsx11(
+    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__ */ jsx11(
+    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__ */ jsx11(
+        ActionGroup,
+        {
+          primaryAction: primaryAction ?? defaults.primary,
+          secondaryAction: secondaryAction ?? defaults.secondary,
+          tertiaryAction: tertiaryAction ?? defaults.tertiary
+        }
+      )
+    }
+  );
+}
+
+export {
+  SemanticButton,
+  ConfirmDialog,
+  ThemeToggle,
+  ReferenceThemeExplorer,
+  GameBoardTile,
+  DiscoveryShell,
+  SidebarNav,
+  SidebarNavSection,
+  SidebarNavItem,
+  DocsCodeBlock,
+  ShareButtonGroup,
+  UploadDropzone,
+  AccessRecoveryPanel
+};