@doneisbetter/gds-core 2.6.3 → 2.6.5

package/dist/index.js

@@ -23,6 +23,7 @@ __export(index_exports, {
   AccentPanel: () => AccentPanel,
   AccessRecoveryPanel: () => AccessRecoveryPanel,
   AccessSummary: () => AccessSummary,
+  ActionBar: () => ActionBar,
   ArticleShell: () => ArticleShell,
   AuthShell: () => AuthShell,
   BrowseSurface: () => BrowseSurface,
@@ -32,6 +33,8 @@ __export(index_exports, {
   ConsumerSection: () => ConsumerSection,
   CtaButtonGroup: () => CtaButtonGroup,
   DataToolbar: () => DataToolbar,
+  DetailProfileShell: () => DetailProfileShell,
+  DiscoveryShell: () => DiscoveryShell,
   DocsCodeBlock: () => DocsCodeBlock,
   DocsPageShell: () => DocsPageShell,
   EditorialCard: () => EditorialCard,
@@ -39,31 +42,47 @@ __export(index_exports, {
   EmptyState: () => EmptyState,
   FeatureBand: () => FeatureBand,
   FilterDrawer: () => FilterDrawer,
+  FoodMenuSection: () => FoodMenuSection,
   FormField: () => FormField,
   GameBoardTile: () => GameBoardTile,
   GdsIcons: () => GdsIcons,
   GdsVocabulary: () => GdsVocabulary,
+  ListingCard: () => ListingCard,
+  MapPanel: () => MapPanel,
   MediaCard: () => MediaCard,
   MediaField: () => MediaField,
   MetricCard: () => MetricCard,
   PageHeader: () => PageHeader,
   PlaceholderPanel: () => PlaceholderPanel,
+  PlaybackSurface: () => PlaybackSurface,
   ProductCard: () => ProductCard,
   ProgressCard: () => ProgressCard,
   PublicBrandFooter: () => PublicBrandFooter,
+  PublicFlowShell: () => PublicFlowShell,
+  PublicFoodCard: () => PublicFoodCard,
   PublicNav: () => PublicNav,
   PublicProductCard: () => PublicProductCard,
   PublicShell: () => PublicShell,
   PublicSiteFooter: () => PublicSiteFooter,
+  ReferenceLinkGrid: () => ReferenceLinkGrid,
+  ReferenceLocaleNotice: () => ReferenceLocaleNotice,
+  ReferenceSection: () => ReferenceSection,
+  ReferenceThemeExplorer: () => ReferenceThemeExplorer,
   SectionPanel: () => SectionPanel,
   SemanticButton: () => SemanticButton,
+  ShareButtonGroup: () => ShareButtonGroup,
+  SidebarNav: () => SidebarNav,
+  SidebarNavItem: () => SidebarNavItem,
+  SidebarNavSection: () => SidebarNavSection,
   SimpleDataTable: () => SimpleDataTable,
+  SocialAuthButtons: () => SocialAuthButtons,
   StateBlock: () => StateBlock,
   StatsSection: () => StatsSection,
   StatusBadge: () => StatusBadge,
   ThemeToggle: () => ThemeToggle,
   UploadDropzone: () => UploadDropzone,
   ar: () => ar,
+  createGdsVocabularyPack: () => createGdsVocabularyPack,
   de: () => de,
   en: () => en,
   es: () => es,
@@ -75,7 +94,9 @@ __export(index_exports, {
   he: () => he,
   hu: () => hu,
   it: () => it,
+  mergeGdsVocabularyPacks: () => mergeGdsVocabularyPacks,
   resolveAccentPanelStyles: () => resolveAccentPanelStyles,
+  resolveSemanticActionConfig: () => resolveSemanticActionConfig,
   ru: () => ru
 });
 module.exports = __toCommonJS(index_exports);
@@ -225,7 +246,6 @@ var GdsIcons = {
 
 // src/vocabulary.ts
 var GdsVocabulary = {
-  // Base
   settings: { id: "gds.action.settings", defaultMessage: "Settings", icon: GdsIcons.Settings, feedback: { icon: GdsIcons.Settings, color: "teal", messageId: "gds.feedback.saved" } },
   analytics: { id: "gds.action.analytics", defaultMessage: "Analytics", icon: GdsIcons.Analytics, feedback: { icon: GdsIcons.Analytics, color: "teal", messageId: "gds.feedback.loaded" } },
   dashboard: { id: "gds.action.dashboard", defaultMessage: "Dashboard", icon: GdsIcons.Dashboard, feedback: { icon: GdsIcons.Dashboard, color: "teal", messageId: "gds.feedback.loaded" } },
@@ -241,14 +261,12 @@ var GdsVocabulary = {
   close: { id: "gds.action.close", defaultMessage: "Close", icon: GdsIcons.Close, feedback: { icon: GdsIcons.Close, color: "gray", messageId: "gds.feedback.closed" } },
   language: { id: "gds.action.language", defaultMessage: "Language", icon: GdsIcons.Language, feedback: { icon: GdsIcons.Language, color: "teal", messageId: "gds.feedback.changed" } },
   theme: { id: "gds.action.theme", defaultMessage: "Theme", icon: GdsIcons.Theme, feedback: { icon: GdsIcons.Theme, color: "teal", messageId: "gds.feedback.changed" } },
-  // Navigation
   home: { id: "gds.action.home", defaultMessage: "Home", icon: GdsIcons.Home, feedback: { icon: GdsIcons.Home, color: "teal", messageId: "gds.feedback.opened" } },
   inbox: { id: "gds.action.inbox", defaultMessage: "Inbox", icon: GdsIcons.Inbox, feedback: { icon: GdsIcons.Inbox, color: "teal", messageId: "gds.feedback.opened" } },
   calendar: { id: "gds.action.calendar", defaultMessage: "Calendar", icon: GdsIcons.Calendar, feedback: { icon: GdsIcons.Calendar, color: "teal", messageId: "gds.feedback.opened" } },
   gallery: { id: "gds.action.gallery", defaultMessage: "Gallery", icon: GdsIcons.Gallery, feedback: { icon: GdsIcons.Gallery, color: "teal", messageId: "gds.feedback.opened" } },
   history: { id: "gds.action.history", defaultMessage: "History", icon: GdsIcons.History, feedback: { icon: GdsIcons.History, color: "teal", messageId: "gds.feedback.opened" } },
   profile: { id: "gds.action.profile", defaultMessage: "Profile", icon: GdsIcons.Profile, feedback: { icon: GdsIcons.Profile, color: "teal", messageId: "gds.feedback.opened" } },
-  // Actions
   send: { id: "gds.action.send", defaultMessage: "Send", icon: GdsIcons.Send, feedback: { icon: GdsIcons.Send, color: "blue", messageId: "gds.feedback.sent" } },
   reply: { id: "gds.action.reply", defaultMessage: "Reply", icon: GdsIcons.Reply, feedback: { icon: GdsIcons.Reply, color: "blue", messageId: "gds.feedback.replied" } },
   forward: { id: "gds.action.forward", defaultMessage: "Forward", icon: GdsIcons.Forward, feedback: { icon: GdsIcons.Forward, color: "blue", messageId: "gds.feedback.forwarded" } },
@@ -262,12 +280,10 @@ var GdsVocabulary = {
   uncheck: { id: "gds.action.uncheck", defaultMessage: "Uncheck", icon: GdsIcons.Uncheck, feedback: { icon: GdsIcons.Uncheck, color: "red", messageId: "gds.feedback.unchecked" } },
   complete: { id: "gds.action.complete", defaultMessage: "Complete", icon: GdsIcons.Complete, feedback: { icon: GdsIcons.Complete, color: "teal", messageId: "gds.feedback.completed" } },
   clear: { id: "gds.action.clear", defaultMessage: "Clear", icon: GdsIcons.Clear, feedback: { icon: GdsIcons.Clear, color: "red", messageId: "gds.feedback.cleared" } },
-  // Media (camera project)
   capture: { id: "gds.action.capture", defaultMessage: "Capture", icon: GdsIcons.Capture, feedback: { icon: GdsIcons.Capture, color: "teal", messageId: "gds.feedback.captured" } },
   record: { id: "gds.action.record", defaultMessage: "Record", icon: GdsIcons.Record, feedback: { icon: GdsIcons.Record, color: "teal", messageId: "gds.feedback.recorded" } },
   flip: { id: "gds.action.flip", defaultMessage: "Flip", icon: GdsIcons.Flip, feedback: { icon: GdsIcons.Flip, color: "teal", messageId: "gds.feedback.flipped" } },
   flash: { id: "gds.action.flash", defaultMessage: "Flash", icon: GdsIcons.Flash, feedback: { icon: GdsIcons.Flash, color: "teal", messageId: "gds.feedback.flashed" } },
-  // Domain specific (amanoba, classscout, kidex, habigoal)
   course: { id: "gds.action.course", defaultMessage: "Course", icon: GdsIcons.Course, feedback: { icon: GdsIcons.Course, color: "teal", messageId: "gds.feedback.done" } },
   lesson: { id: "gds.action.lesson", defaultMessage: "Lesson", icon: GdsIcons.Lesson, feedback: { icon: GdsIcons.Lesson, color: "teal", messageId: "gds.feedback.done" } },
   certificate: { id: "gds.action.certificate", defaultMessage: "Certificate", icon: GdsIcons.Certificate, feedback: { icon: GdsIcons.Certificate, color: "teal", messageId: "gds.feedback.done" } },
@@ -280,7 +296,6 @@ var GdsVocabulary = {
   goal: { id: "gds.action.goal", defaultMessage: "Goal", icon: GdsIcons.Goal, feedback: { icon: GdsIcons.Goal, color: "teal", messageId: "gds.feedback.done" } },
   streak: { id: "gds.action.streak", defaultMessage: "Streak", icon: GdsIcons.Streak, feedback: { icon: GdsIcons.Streak, color: "teal", messageId: "gds.feedback.done" } },
   reward: { id: "gds.action.reward", defaultMessage: "Reward", icon: GdsIcons.Reward, feedback: { icon: GdsIcons.Reward, color: "yellow", messageId: "gds.feedback.rewarded" } },
-  // Codebase analysis additions
   trophy: { id: "gds.action.trophy", defaultMessage: "Trophy", icon: GdsIcons.Trophy, feedback: { icon: GdsIcons.Trophy, color: "yellow", messageId: "gds.feedback.rewarded" } },
   crown: { id: "gds.action.crown", defaultMessage: "Crown", icon: GdsIcons.Crown, feedback: { icon: GdsIcons.Crown, color: "yellow", messageId: "gds.feedback.rewarded" } },
   pause: { id: "gds.action.pause", defaultMessage: "Pause", icon: GdsIcons.Pause, feedback: { icon: GdsIcons.Pause, color: "teal", messageId: "gds.feedback.paused" } },
@@ -300,7 +315,6 @@ var GdsVocabulary = {
   help: { id: "gds.action.help", defaultMessage: "Help", icon: GdsIcons.Help, feedback: { icon: GdsIcons.Help, color: "teal", messageId: "gds.feedback.done" } },
   filter: { id: "gds.action.filter", defaultMessage: "Filter", icon: GdsIcons.Filter, feedback: { icon: GdsIcons.Filter, color: "teal", messageId: "gds.feedback.filtered" } },
   sort: { id: "gds.action.sort", defaultMessage: "Sort", icon: GdsIcons.Sort, feedback: { icon: GdsIcons.Sort, color: "teal", messageId: "gds.feedback.sorted" } },
-  // Audit-driven additions
   export: { id: "gds.action.export", defaultMessage: "Export", icon: GdsIcons.Export, feedback: { icon: GdsIcons.Export, color: "teal", messageId: "gds.feedback.exported" } },
   import: { id: "gds.action.import", defaultMessage: "Import", icon: GdsIcons.Import, feedback: { icon: GdsIcons.Import, color: "teal", messageId: "gds.feedback.imported" } },
   preview: { id: "gds.action.preview", defaultMessage: "Preview", icon: GdsIcons.Preview, feedback: { icon: GdsIcons.Preview, color: "teal", messageId: "gds.feedback.previewed" } },
@@ -318,19 +332,61 @@ var GdsVocabulary = {
   refer: { id: "gds.action.refer", defaultMessage: "Refer", icon: GdsIcons.Refer, feedback: { icon: GdsIcons.Refer, color: "teal", messageId: "gds.feedback.referred" } },
   evidence: { id: "gds.action.evidence", defaultMessage: "Evidence", icon: GdsIcons.Evidence, feedback: { icon: GdsIcons.Evidence, color: "teal", messageId: "gds.feedback.added" } }
 };
-function getSemanticActionConfig(action) {
-  return GdsVocabulary[action];
+function createGdsVocabularyPack(namespace, actions) {
+  return {
+    namespace,
+    actions: Object.fromEntries(
+      Object.entries(actions).map(([key, definition]) => [
+        `${namespace}:${key}`,
+        {
+          ...definition,
+          id: `gds.action.${namespace}.${key}`
+        }
+      ])
+    )
+  };
+}
+function mergeGdsVocabularyPacks(packs = []) {
+  return packs.reduce((acc, pack) => {
+    for (const [key, definition] of Object.entries(pack.actions)) {
+      acc[key] = definition;
+    }
+    return acc;
+  }, {});
+}
+function resolveSemanticActionConfig(action, packs = []) {
+  const baseConfig = GdsVocabulary[action];
+  if (baseConfig) {
+    return baseConfig;
+  }
+  const merged = mergeGdsVocabularyPacks(packs);
+  const packConfig = merged[action];
+  if (packConfig) {
+    return packConfig;
+  }
+  throw new Error(`Unknown semantic action: ${action}`);
+}
+function getSemanticActionConfig(action, packs = []) {
+  return resolveSemanticActionConfig(action, packs);
 }
-function getSemanticActionLabel(action, translate) {
-  const config = getSemanticActionConfig(action);
+function getSemanticActionLabel(action, translate, packs = []) {
+  const config = resolveSemanticActionConfig(action, packs);
   return translate ? translate(config.id, config.defaultMessage) : config.defaultMessage;
 }
 
 // src/SemanticButton.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
-function SemanticButton({ action, loading, feedbackState, feedbackText, prerenderLabelOnly = true, ...props }) {
+function SemanticButton({
+  action,
+  loading,
+  feedbackState,
+  feedbackText,
+  prerenderLabelOnly = true,
+  vocabularyPacks = [],
+  ...props
+}) {
   const { t } = (0, import_gds_theme.useGdsTranslation)();
-  const config = GdsVocabulary[action];
+  const config = resolveSemanticActionConfig(action, vocabularyPacks);
   const [mounted, setMounted] = (0, import_react.useState)(!prerenderLabelOnly);
   const [internalFeedback, setInternalFeedback] = (0, import_react.useState)(null);
   (0, import_react.useEffect)(() => {
@@ -346,14 +402,14 @@ function SemanticButton({ action, loading, feedbackState, feedbackText, prerende
     }
   }, [feedbackState]);
   let Icon = config.icon;
-  let label = getSemanticActionLabel(action, t);
+  let label = getSemanticActionLabel(action, t, vocabularyPacks);
   let color = props.color;
   if (!mounted) {
     const { leftSection, ...buttonProps } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core3.Button, { loading, color, ...buttonProps, children: getSemanticActionLabel(action) });
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core3.Button, { loading, color, ...buttonProps, children: getSemanticActionLabel(action, void 0, vocabularyPacks) });
   }
   if (internalFeedback === "success") {
-    const defaultFeedback = "feedback" in config && config.feedback ? config.feedback : { icon: import_icons_react2.IconCheck, color: "teal", messageId: "gds.feedback.saved" };
+    const defaultFeedback = config.feedback ?? { icon: import_icons_react2.IconCheck, color: "teal", messageId: "gds.feedback.saved" };
     Icon = defaultFeedback.icon;
     label = feedbackText || t(defaultFeedback.messageId, "Success");
     color = defaultFeedback.color;
@@ -396,33 +452,702 @@ function ConfirmDialog({
   ] });
 }
 
-// src/ThemeToggle.tsx
-var import_core5 = require("@mantine/core");
-var import_gds_theme2 = require("@doneisbetter/gds-theme");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-function ThemeToggle({ size = "md" }) {
-  const { setColorScheme } = (0, import_core5.useMantineColorScheme)();
-  const computedColorScheme = (0, import_core5.useComputedColorScheme)("light", { getInitialValueInEffect: true });
-  const { t } = (0, import_gds_theme2.useGdsTranslation)();
-  const toggleColorScheme = () => {
-    setColorScheme(computedColorScheme === "dark" ? "light" : "dark");
-  };
-  const isDark = computedColorScheme === "dark";
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    import_core5.ActionIcon,
-    {
-      onClick: toggleColorScheme,
-      variant: "default",
-      size,
-      "aria-label": t("gds.aria.themeToggle", "Toggle color scheme"),
-      children: isDark ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(GdsIcons.Sun, { size: "1.2rem" }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(GdsIcons.Moon, { size: "1.2rem" })
-    }
-  );
-}
-
+// src/ThemeToggle.tsx
+var import_core5 = require("@mantine/core");
+var import_gds_theme2 = require("@doneisbetter/gds-theme");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function ThemeToggle({ size = "md" }) {
+  const { setColorScheme } = (0, import_core5.useMantineColorScheme)();
+  const computedColorScheme = (0, import_core5.useComputedColorScheme)("light", { getInitialValueInEffect: true });
+  const { t } = (0, import_gds_theme2.useGdsTranslation)();
+  const toggleColorScheme = () => {
+    setColorScheme(computedColorScheme === "dark" ? "light" : "dark");
+  };
+  const isDark = computedColorScheme === "dark";
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    import_core5.ActionIcon,
+    {
+      onClick: toggleColorScheme,
+      variant: "default",
+      size,
+      "aria-label": t("gds.aria.themeToggle", "Toggle color scheme"),
+      children: isDark ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(GdsIcons.Sun, { size: "1.2rem" }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(GdsIcons.Moon, { size: "1.2rem" })
+    }
+  );
+}
+
+// src/AccentPanel.tsx
+var import_core6 = require("@mantine/core");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var toneStyles = {
+  gray: {
+    bg: "light-dark(var(--mantine-color-gray-0), color-mix(in srgb, var(--mantine-color-gray-7) 88%, black))",
+    border: "light-dark(var(--mantine-color-gray-2), color-mix(in srgb, var(--mantine-color-gray-4) 70%, transparent))",
+    color: "light-dark(var(--mantine-color-gray-9), var(--mantine-color-gray-0))"
+  },
+  violet: {
+    bg: "light-dark(var(--mantine-color-violet-0), color-mix(in srgb, var(--mantine-color-violet-9) 70%, black))",
+    border: "light-dark(var(--mantine-color-violet-2), color-mix(in srgb, var(--mantine-color-violet-4) 75%, transparent))",
+    color: "light-dark(var(--mantine-color-violet-9), var(--mantine-color-violet-0))"
+  },
+  green: {
+    bg: "light-dark(var(--mantine-color-green-0), color-mix(in srgb, var(--mantine-color-green-9) 72%, black))",
+    border: "light-dark(var(--mantine-color-green-2), color-mix(in srgb, var(--mantine-color-green-4) 78%, transparent))",
+    color: "light-dark(var(--mantine-color-green-9), var(--mantine-color-green-0))"
+  },
+  red: {
+    bg: "light-dark(var(--mantine-color-red-0), color-mix(in srgb, var(--mantine-color-red-9) 72%, black))",
+    border: "light-dark(var(--mantine-color-red-2), color-mix(in srgb, var(--mantine-color-red-4) 78%, transparent))",
+    color: "light-dark(var(--mantine-color-red-9), var(--mantine-color-red-0))"
+  },
+  amber: {
+    bg: "light-dark(var(--mantine-color-yellow-0), color-mix(in srgb, var(--mantine-color-yellow-8) 78%, black))",
+    border: "light-dark(var(--mantine-color-yellow-3), color-mix(in srgb, var(--mantine-color-yellow-5) 70%, transparent))",
+    color: "light-dark(var(--mantine-color-yellow-9), var(--mantine-color-yellow-0))"
+  },
+  blue: {
+    bg: "light-dark(var(--mantine-color-blue-0), color-mix(in srgb, var(--mantine-color-blue-9) 74%, black))",
+    border: "light-dark(var(--mantine-color-blue-2), color-mix(in srgb, var(--mantine-color-blue-4) 75%, transparent))",
+    color: "light-dark(var(--mantine-color-blue-9), var(--mantine-color-blue-0))"
+  }
+};
+function resolveAccentPanelStyles(tone = "violet", variant = "subtle") {
+  const token = toneStyles[tone];
+  if (variant === "soft-outline") {
+    return {
+      backgroundColor: "light-dark(var(--mantine-color-body), color-mix(in srgb, var(--mantine-color-dark-7) 92%, black))",
+      border: `1px solid ${token.border}`,
+      color: token.color
+    };
+  }
+  return {
+    backgroundColor: token.bg,
+    border: `1px solid ${token.border}`,
+    color: token.color
+  };
+}
+function AccentPanel({
+  tone = "violet",
+  variant = "subtle",
+  title,
+  badge,
+  children
+}) {
+  const styles = resolveAccentPanelStyles(tone, variant);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core6.Paper, { withBorder: true, radius: "lg", p: "lg", style: styles, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_core6.Stack, { gap: "sm", children: [
+    title || badge ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_core6.Group, { justify: "space-between", align: "flex-start", gap: "sm", wrap: "wrap", children: [
+      title ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core6.Title, { order: 4, c: "inherit", children: title }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core6.Box, {}),
+      badge ? typeof badge === "string" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core6.Badge, { color: tone === "amber" ? "yellow" : tone, variant: "filled", children: badge }) : badge : null
+    ] }) : null,
+    typeof children === "string" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core6.Text, { c: "inherit", children }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core6.Box, { c: "inherit", children })
+  ] }) });
+}
+
+// src/ReferenceLocaleNotice.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function ReferenceLocaleNotice({ localeLabel, detail }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(AccentPanel, { tone: "amber", variant: "soft-outline", title: "Localization status", badge: localeLabel, children: detail });
+}
+
+// src/ReferenceLinkGrid.tsx
+var import_core7 = require("@mantine/core");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function ReferenceLinkGrid({
+  items,
+  columns = 3
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core7.SimpleGrid, { cols: { base: 1, sm: Math.min(columns, 2), xl: columns }, spacing: "lg", children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core7.Paper, { withBorder: true, radius: "xl", p: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_core7.Stack, { gap: "md", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_core7.Group, { justify: "space-between", align: "flex-start", gap: "sm", wrap: "wrap", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_core7.Stack, { gap: 6, maw: 540, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core7.Title, { order: 4, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core7.Anchor, { href: item.href, underline: "never", children: item.title }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core7.Text, { size: "sm", c: "dimmed", children: item.description })
+      ] }),
+      item.badge ? typeof item.badge === "string" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core7.Badge, { variant: "light", color: "violet", children: item.badge }) : item.badge : null
+    ] }),
+    item.meta ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core7.Text, { size: "sm", c: "dimmed", children: item.meta }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core7.Anchor, { href: item.href, fw: 600, children: "Open section" })
+  ] }) }, item.id)) });
+}
+
+// src/ReferenceSection.tsx
+var import_core9 = require("@mantine/core");
+
+// src/SectionPanel.tsx
+var import_core8 = require("@mantine/core");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var toneBackgrounds = {
+  default: "var(--mantine-color-body)",
+  supporting: "light-dark(var(--mantine-color-gray-0), color-mix(in srgb, var(--mantine-color-dark-7) 92%, black))",
+  warning: "light-dark(var(--mantine-color-yellow-0), color-mix(in srgb, var(--mantine-color-yellow-9) 18%, var(--mantine-color-body)))",
+  critical: "light-dark(var(--mantine-color-red-0), color-mix(in srgb, var(--mantine-color-red-9) 18%, var(--mantine-color-body)))"
+};
+function SectionPanel({
+  title,
+  description,
+  action,
+  children,
+  tone = "default",
+  id,
+  divided = true
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core8.Paper, { id, withBorder: true, radius: "xl", p: "lg", style: { background: toneBackgrounds[tone] }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core8.Stack, { gap: "md", children: [
+    title || description || action ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core8.Group, { justify: "space-between", align: "flex-start", gap: "md", wrap: "wrap", children: [
+        title || description ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core8.Stack, { gap: 4, children: [
+          title ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core8.Title, { order: 3, children: title }) : null,
+          description ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core8.Text, { size: "sm", c: "dimmed", children: description }) : null
+        ] }) : null,
+        action
+      ] }),
+      divided ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core8.Divider, {}) : null
+    ] }) : null,
+    children
+  ] }) });
+}
+
+// src/ReferenceSection.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function ReferenceSection({
+  title,
+  description,
+  eyebrow,
+  action,
+  href,
+  linkLabel = "Open section",
+  tone = "default",
+  children
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    SectionPanel,
+    {
+      tone,
+      title: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_core9.Stack, { gap: 4, children: [
+        eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_core9.Text, { size: "xs", fw: 700, c: "dimmed", children: eyebrow }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_core9.Group, { justify: "space-between", align: "flex-start", gap: "md", wrap: "wrap", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_core9.Stack, { gap: 4, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_core9.Text, { component: "span", fw: 700, size: "xl", children: title }),
+            description ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_core9.Text, { size: "sm", c: "dimmed", children: description }) : null
+          ] }),
+          href ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_core9.Anchor, { href, fw: 600, children: linkLabel }) : null
+        ] })
+      ] }),
+      action,
+      divided: false,
+      children
+    }
+  );
+}
+
+// src/ReferenceThemeExplorer.tsx
+var import_react2 = require("react");
+var import_core14 = require("@mantine/core");
+
+// src/ActionBar.tsx
+var import_core10 = require("@mantine/core");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function renderSemanticAction(action, slot, vocabularyPacks) {
+  const { action: actionId, variant, ariaLabel, ...props } = action;
+  const fallbackVariant = slot === "primary" ? "filled" : slot === "secondary" ? "default" : "subtle";
+  const config = resolveSemanticActionConfig(actionId, vocabularyPacks);
+  const Icon = config.icon;
+  const label = getSemanticActionLabel(actionId, void 0, vocabularyPacks);
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    import_core10.Button,
+    {
+      leftSection: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { size: "1rem", stroke: 1.75 }),
+      "aria-label": ariaLabel ?? label,
+      variant: variant ?? fallbackVariant,
+      ...props,
+      children: label
+    },
+    `${slot}-${actionId}`
+  );
+}
+function ActionBar({
+  primary,
+  secondary = [],
+  tertiary = [],
+  iconOnly = [],
+  gap = "sm",
+  vocabularyPacks = []
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_core10.Stack, { gap, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_core10.Group, { justify: "space-between", align: "center", gap, wrap: "wrap", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_core10.Group, { gap, wrap: "wrap", children: [
+      secondary.map((action) => renderSemanticAction(action, "secondary", vocabularyPacks)),
+      tertiary.map((action) => renderSemanticAction(action, "tertiary", vocabularyPacks))
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_core10.Group, { gap, wrap: "wrap", justify: "flex-end", style: { marginInlineStart: "auto" }, children: [
+      iconOnly.map(({ action, ariaLabel, ...props }) => {
+        const config = resolveSemanticActionConfig(action, vocabularyPacks);
+        const Icon = config.icon;
+        return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          import_core10.ActionIcon,
+          {
+            variant: "subtle",
+            size: "lg",
+            "aria-label": ariaLabel ?? getSemanticActionLabel(action, void 0, vocabularyPacks),
+            ...props,
+            children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { size: "1rem", stroke: 1.75 })
+          },
+          `icon-${action}`
+        );
+      }),
+      primary ? renderSemanticAction(primary, "primary", vocabularyPacks) : null
+    ] })
+  ] }) });
+}
+
+// src/FormField.tsx
+var import_core11 = require("@mantine/core");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function FormField({ label, description, error, children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core11.Box, { component: "label", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_core11.Stack, { gap: 4, children: [
+    typeof label === "string" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core11.Text, { size: "xs", fw: 600, c: "dimmed", children: label }) : label,
+    description ? typeof description === "string" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core11.Text, { size: "xs", c: "dimmed", children: description }) : description : null,
+    children,
+    error ? typeof error === "string" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core11.Text, { size: "xs", c: "red.7", children: error }) : error : null
+  ] }) });
+}
+
+// src/ListingCard.tsx
+var import_core12 = require("@mantine/core");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var ratioMap = {
+  "1:1": 1,
+  "4:3": 4 / 3,
+  "16:9": 16 / 9
+};
+var toneColorMap = {
+  default: void 0,
+  positive: "teal",
+  warning: "orange",
+  muted: "gray"
+};
+function ListingImageFallback({ mediaRatio }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.AspectRatio, { ratio: ratioMap[mediaRatio], children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    import_core12.ThemeIcon,
+    {
+      size: "100%",
+      radius: "md",
+      variant: "light",
+      color: "gray",
+      "aria-label": "No listing image available",
+      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(GdsIcons.Gallery, { size: "2rem" })
+    }
+  ) });
+}
+function ListingAffordance({ affordance }) {
+  const config = GdsVocabulary[affordance.action];
+  const Icon = config.icon;
+  const label = affordance.ariaLabel ?? getSemanticActionLabel(affordance.action);
+  if (affordance.href) {
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      import_core12.ActionIcon,
+      {
+        component: "a",
+        href: affordance.href,
+        variant: "subtle",
+        size: "lg",
+        "aria-label": label,
+        disabled: affordance.disabled,
+        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { size: "1rem", stroke: 1.75 })
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    import_core12.ActionIcon,
+    {
+      variant: "subtle",
+      size: "lg",
+      "aria-label": label,
+      onClick: affordance.onClick,
+      disabled: affordance.disabled,
+      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { size: "1rem", stroke: 1.75 })
+    }
+  );
+}
+function ListingCard({
+  title,
+  href,
+  description,
+  image,
+  mediaRatio = "4:3",
+  metadata = [],
+  featured = false,
+  sponsoredDisclosure,
+  price,
+  primaryAction,
+  saveAction,
+  shareAction,
+  compact = false
+}) {
+  const titleContent = href && typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Text, { component: "a", href, inherit: true, td: "none", children: title }) : title;
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Card, { withBorder: true, radius: "lg", padding: compact ? "md" : "lg", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_core12.Stack, { gap: compact ? "sm" : "md", children: [
+    image ?? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ListingImageFallback, { mediaRatio }),
+    featured || sponsoredDisclosure ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_core12.Group, { justify: "space-between", gap: "sm", wrap: "wrap", children: [
+      featured ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Badge, { variant: "light", color: "violet", children: "Featured" }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", {}),
+      sponsoredDisclosure ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Text, { size: "xs", c: "dimmed", children: sponsoredDisclosure }) : null
+    ] }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_core12.Stack, { gap: 4, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Title, { order: compact ? 5 : 4, lineClamp: 2, children: titleContent }),
+      description ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Text, { size: "sm", c: "dimmed", lineClamp: compact ? 2 : 3, children: description }) : null
+    ] }),
+    metadata.length ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Stack, { gap: "xs", children: metadata.map((item) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_core12.Group, { justify: "space-between", align: "flex-start", gap: "sm", wrap: "nowrap", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_core12.Group, { gap: "xs", wrap: "nowrap", style: { minWidth: 0, flex: 1 }, children: [
+        item.icon,
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Text, { size: "sm", c: item.tone ? toneColorMap[item.tone] : "dimmed", lineClamp: 1, children: item.label })
+      ] }),
+      item.value ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Text, { size: "sm", fw: 500, ta: "right", children: item.value }) : null
+    ] }, item.id)) }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_core12.Group, { justify: "space-between", align: "center", gap: "sm", wrap: "wrap", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Stack, { gap: 2, style: { minWidth: 0, flex: 1 }, children: price ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Text, { fw: 700, size: compact ? "md" : "lg", children: price }) : null }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_core12.Group, { gap: "xs", wrap: "nowrap", justify: "flex-end", style: { marginInlineStart: "auto" }, children: [
+        saveAction ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ListingAffordance, { affordance: saveAction }) : null,
+        shareAction ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ListingAffordance, { affordance: shareAction }) : null,
+        primaryAction
+      ] })
+    ] })
+  ] }) });
+}
+
+// src/StateBlock.tsx
+var import_core13 = require("@mantine/core");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var variantConfig = {
+  loading: { color: "violet", icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.Loader, { size: "sm" }) },
+  empty: { color: "gray", icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(GdsIcons.Inbox, { size: "1.1rem" }) },
+  error: { color: "red", icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(GdsIcons.Danger, { size: "1.1rem" }) },
+  permission: { color: "orange", icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(GdsIcons.Verify, { size: "1.1rem" }) },
+  disabled: { color: "gray", icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(GdsIcons.Toggle, { size: "1.1rem" }) },
+  success: { color: "teal", icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(GdsIcons.Success, { size: "1.1rem" }) },
+  info: { color: "blue", icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(GdsIcons.Info, { size: "1.1rem" }) },
+  "not-enough-data": { color: "yellow", icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(GdsIcons.Analytics, { size: "1.1rem" }) }
+};
+function StateBlock({
+  variant,
+  title,
+  description,
+  action,
+  icon,
+  compact = false
+}) {
+  const config = variantConfig[variant];
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    import_core13.Stack,
+    {
+      align: compact ? "flex-start" : "center",
+      justify: "center",
+      gap: "md",
+      py: compact ? "md" : "xl",
+      ta: compact ? "left" : "center",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.ThemeIcon, { variant: "light", color: config.color, size: compact ? "lg" : "xl", radius: "xl", children: icon ?? config.icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_core13.Stack, { gap: 6, align: compact ? "flex-start" : "center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.Title, { order: compact ? 4 : 3, children: title }),
+          description ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.Text, { c: "dimmed", maw: compact ? void 0 : 480, children: description }) : null
+        ] }),
+        action
+      ]
+    }
+  );
+}
+
+// src/ReferenceThemeExplorer.tsx
+var import_gds_theme3 = require("@doneisbetter/gds-theme");
+var import_jsx_runtime15 = require("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__ */ (0, import_jsx_runtime15.jsx)(import_core14.Paper, { withBorder: true, radius: "xl", p: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Stack, { gap: "lg", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Group, { justify: "space-between", align: "flex-start", wrap: "wrap", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Stack, { gap: 4, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Text, { fw: 700, children: preset.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Text, { size: "sm", c: "dimmed", children: preset.summary }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Text, { size: "sm", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("strong", { children: "Best for:" }),
+          " ",
+          preset.bestFor
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Text, { size: "sm", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("strong", { children: "Color scheme:" }),
+          " ",
+          colorScheme
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ThemeToggle, {})
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      ActionBar,
+      {
+        primary: { action: "save", size: "sm" },
+        secondary: [{ action: "cancel", size: "sm" }],
+        tertiary: [{ action: "preview", size: "sm" }]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.SimpleGrid, { cols: { base: 1, md: 2 }, spacing: "md", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Paper, { withBorder: true, radius: "lg", p: "md", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Stack, { gap: "sm", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Text, { fw: 700, size: "sm", children: "Token-backed controls" }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(FormField, { label: "Reference input", description: "Inputs stay inside the theme lane instead of drifting into route-local styling.", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.TextInput, { placeholder: "Search or type a route name" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Group, { gap: "xs", wrap: "wrap", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Badge, { color: "teal", variant: "light", children: "Success" }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Badge, { color: "orange", variant: "light", children: "Warning" }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Badge, { color: "red", variant: "light", children: "Critical" })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        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__ */ (0, import_jsx_runtime15.jsx)(import_core14.Button, { size: "sm", children: "Inspect route" })
+        }
+      )
+    ] })
+  ] }) });
+}
+function ReferenceThemeExplorer() {
+  const [preset, setPreset] = (0, import_react2.useState)("default");
+  const [colorScheme, setColorScheme] = (0, import_react2.useState)("light");
+  const [brandPrimary, setBrandPrimary] = (0, import_react2.useState)("blue");
+  const [brandFlatSurfaces, setBrandFlatSurfaces] = (0, import_react2.useState)(true);
+  const [brandEditorialSerif, setBrandEditorialSerif] = (0, import_react2.useState)(false);
+  const [comparisonEnabled, setComparisonEnabled] = (0, import_react2.useState)(false);
+  const [comparisonPreset, setComparisonPreset] = (0, import_react2.useState)("editorial");
+  const resolveTheme = (presetId) => {
+    switch (presetId) {
+      case "dark-public":
+        return import_gds_theme3.gdsDarkPublicTheme;
+      case "flat-surface":
+        return import_gds_theme3.gdsFlatSurfaceTheme;
+      case "editorial":
+        return import_gds_theme3.gdsEditorialPublicTheme;
+      case "brand":
+        return (0, import_gds_theme3.createPublicBrandTheme)({
+          flatSurfaces: brandFlatSurfaces,
+          editorialSerif: brandEditorialSerif,
+          overrides: { primaryColor: brandPrimary }
+        });
+      default:
+        return import_gds_theme3.gdsTheme;
+    }
+  };
+  const selectionSummary = themePresetCatalog[preset];
+  const comparisonSummary = themePresetCatalog[comparisonPreset];
+  const selectedTheme = (0, import_react2.useMemo)(() => resolveTheme(preset), [preset, brandPrimary, brandFlatSurfaces, brandEditorialSerif]);
+  const comparedTheme = (0, import_react2.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__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Stack, { gap: "xl", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      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__ */ (0, import_jsx_runtime15.jsxs)(import_core14.SimpleGrid, { cols: { base: 1, md: 2, xl: 3 }, spacing: "lg", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Paper, { withBorder: true, radius: "xl", p: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Stack, { gap: "md", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Title, { order: 4, children: "Theme preset" }),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(FormField, { label: "Preset", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              import_core14.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__ */ (0, import_jsx_runtime15.jsx)(FormField, { label: "Preview color scheme", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              import_core14.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__ */ (0, import_jsx_runtime15.jsx)(import_core14.Button, { variant: "default", size: "sm", onClick: reset, children: "Reset theme lab" }),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Text, { 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__ */ (0, import_jsx_runtime15.jsx)(import_core14.Paper, { withBorder: true, radius: "xl", p: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Stack, { gap: "md", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Title, { order: 4, children: "Brand builder options" }),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(FormField, { label: "Brand primary color", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              import_core14.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__ */ (0, import_jsx_runtime15.jsx)(
+              import_core14.Checkbox,
+              {
+                label: "Use flat surfaces",
+                checked: brandFlatSurfaces,
+                onChange: (event) => setBrandFlatSurfaces(event.currentTarget.checked),
+                disabled: preset !== "brand"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              import_core14.Checkbox,
+              {
+                label: "Use editorial serif headings",
+                checked: brandEditorialSerif,
+                onChange: (event) => setBrandEditorialSerif(event.currentTarget.checked),
+                disabled: preset !== "brand"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Text, { size: "sm", c: "dimmed", children: "The generator composes shipped helpers instead of creating a second theme authority inside the website." })
+          ] }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Paper, { withBorder: true, radius: "xl", p: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Stack, { gap: "md", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Title, { order: 4, children: "Current selection summary" }),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Stack, { gap: 6, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Text, { fw: 700, children: selectionSummary.label }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Text, { size: "sm", c: "dimmed", children: selectionSummary.summary }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Text, { size: "sm", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("strong", { children: "Best for:" }),
+                " ",
+                selectionSummary.bestFor
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Text, { size: "sm", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("strong", { children: "Runtime lane:" }),
+                " ",
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Code, { children: selectionSummary.themeKey })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Text, { size: "sm", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("strong", { children: "Color scheme:" }),
+                " ",
+                colorScheme
+              ] })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              import_core14.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__ */ (0, import_jsx_runtime15.jsx)(FormField, { label: "Comparison preset", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              import_core14.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__ */ (0, import_jsx_runtime15.jsx)(
+      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__ */ (0, import_jsx_runtime15.jsx)(import_core14.SimpleGrid, { cols: { base: 1, md: 2, xl: 5 }, spacing: "md", children: Object.values(themePresetCatalog).map((lane) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Paper, { withBorder: true, radius: "lg", p: "md", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Stack, { gap: 6, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Text, { fw: 700, size: "sm", children: lane.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Text, { size: "sm", c: "dimmed", children: lane.summary }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Code, { block: true, fz: "10px", children: lane.themeKey })
+        ] }) }, lane.themeKey)) })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      ReferenceSection,
+      {
+        title: "Live Theme Preview",
+        description: "Visitors can test the shipped presets, compare lanes, and inspect actual GDS surfaces under each theme.",
+        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.SimpleGrid, { cols: { base: 1, xl: comparisonEnabled ? 2 : 1 }, spacing: "lg", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_gds_theme3.GdsProvider, { theme: selectedTheme, defaultColorScheme: colorScheme, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ThemePreviewSurface, { preset: selectionSummary, colorScheme }) }, previewKey),
+          comparisonEnabled ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_gds_theme3.GdsProvider, { theme: comparedTheme, defaultColorScheme: colorScheme, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Paper, { withBorder: true, radius: "xl", p: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Stack, { gap: "md", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Group, { justify: "space-between", align: "flex-start", wrap: "wrap", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Stack, { gap: 4, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Text, { fw: 700, children: "Comparison Preview Surface" }),
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Text, { size: "sm", c: "dimmed", children: "Compare another shipped theme against the current selection before adopting it downstream." })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Badge, { color: "violet", variant: "light", children: comparisonSummary.label })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ThemePreviewSurface, { preset: comparisonSummary, colorScheme })
+          ] }) }) }, comparisonPreviewKey) : null
+        ] })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      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__ */ (0, import_jsx_runtime15.jsx)(
+          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/ChoiceChip.tsx
-var import_core6 = require("@mantine/core");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_core15 = require("@mantine/core");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function ChoiceChip({
   label,
   active = false,
@@ -439,8 +1164,8 @@ function ChoiceChip({
   };
   if (href) {
     const LinkComponent = component || "a";
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      import_core6.Badge,
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      import_core15.Badge,
       {
         component: LinkComponent,
         href,
@@ -452,8 +1177,8 @@ function ChoiceChip({
   }
   if (onClick || component) {
     const ButtonComponent = component || "button";
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      import_core6.Badge,
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      import_core15.Badge,
       {
         component: ButtonComponent,
         type: component ? void 0 : "button",
@@ -464,37 +1189,37 @@ function ChoiceChip({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core6.Badge, { ...sharedProps, children: label });
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_core15.Badge, { ...sharedProps, children: label });
 }
 
 // src/MetricCard.tsx
-var import_core7 = require("@mantine/core");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_core16 = require("@mantine/core");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var trendColors = {
   positive: "teal",
   negative: "red",
   neutral: "gray"
 };
 function MetricCard({ label, value, description, trend, icon, footer }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_core7.Card, { withBorder: true, radius: "lg", padding: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_core7.Stack, { gap: "md", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_core7.Group, { justify: "space-between", align: "flex-start", wrap: "nowrap", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_core7.Stack, { gap: 4, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_core7.Text, { size: "sm", c: "dimmed", fw: 600, children: label }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_core7.Title, { order: 3, children: value })
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Card, { withBorder: true, radius: "lg", padding: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_core16.Stack, { gap: "md", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_core16.Group, { justify: "space-between", align: "flex-start", wrap: "nowrap", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_core16.Stack, { gap: 4, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Text, { size: "sm", c: "dimmed", fw: 600, children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Title, { order: 3, children: value })
       ] }),
-      icon ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_core7.ThemeIcon, { variant: "light", size: "xl", radius: "xl", "aria-hidden": true, children: icon }) : null
+      icon ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.ThemeIcon, { variant: "light", size: "xl", radius: "xl", "aria-hidden": true, children: icon }) : null
     ] }),
-    description || trend ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_core7.Group, { justify: "space-between", align: "center", gap: "sm", children: [
-      description ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_core7.Text, { size: "sm", c: "dimmed", flex: 1, children: description }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", {}),
-      trend ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_core7.Badge, { color: trendColors[trend.tone ?? "neutral"], variant: "light", children: trend.label }) : null
+    description || trend ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_core16.Group, { justify: "space-between", align: "center", gap: "sm", children: [
+      description ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Text, { size: "sm", c: "dimmed", flex: 1, children: description }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", {}),
+      trend ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Badge, { color: trendColors[trend.tone ?? "neutral"], variant: "light", children: trend.label }) : null
     ] }) : null,
     footer
   ] }) });
 }
 
 // src/ProgressCard.tsx
-var import_core8 = require("@mantine/core");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_core17 = require("@mantine/core");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function ProgressCard({
   label,
   value,
@@ -503,63 +1228,30 @@ function ProgressCard({
   description,
   action
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core8.Card, { withBorder: true, radius: "lg", padding: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_core8.Stack, { gap: "md", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_core8.Group, { justify: "space-between", align: "flex-start", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_core8.Stack, { gap: 4, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core8.Text, { size: "sm", c: "dimmed", fw: 600, children: label }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core8.Title, { order: 3, children: value })
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_core17.Card, { withBorder: true, radius: "lg", padding: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_core17.Stack, { gap: "md", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_core17.Group, { justify: "space-between", align: "flex-start", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_core17.Stack, { gap: 4, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_core17.Text, { size: "sm", c: "dimmed", fw: 600, children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_core17.Title, { order: 3, children: value })
       ] }),
       action
     ] }),
-    description ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core8.Text, { size: "sm", c: "dimmed", children: description }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_core8.Stack, { gap: 6, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_core8.Group, { justify: "space-between", gap: "sm", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core8.Text, { size: "sm", fw: 500, children: progressLabel ?? "Progress" }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_core8.Text, { size: "sm", c: "dimmed", children: [
+    description ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_core17.Text, { size: "sm", c: "dimmed", children: description }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_core17.Stack, { gap: 6, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_core17.Group, { justify: "space-between", gap: "sm", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_core17.Text, { size: "sm", fw: 500, children: progressLabel ?? "Progress" }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_core17.Text, { size: "sm", c: "dimmed", children: [
           Math.round(progress),
           "%"
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core8.Progress, { value: progress, radius: "xl", size: "md" })
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_core17.Progress, { value: progress, radius: "xl", size: "md" })
     ] })
   ] }) });
 }
 
-// src/SectionPanel.tsx
-var import_core9 = require("@mantine/core");
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var toneBackgrounds = {
-  default: "var(--mantine-color-body)",
-  supporting: "light-dark(var(--mantine-color-gray-0), color-mix(in srgb, var(--mantine-color-dark-7) 92%, black))",
-  warning: "light-dark(var(--mantine-color-yellow-0), color-mix(in srgb, var(--mantine-color-yellow-9) 18%, var(--mantine-color-body)))",
-  critical: "light-dark(var(--mantine-color-red-0), color-mix(in srgb, var(--mantine-color-red-9) 18%, var(--mantine-color-body)))"
-};
-function SectionPanel({
-  title,
-  description,
-  action,
-  children,
-  tone = "default",
-  id,
-  divided = true
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core9.Paper, { id, withBorder: true, radius: "xl", p: "lg", style: { background: toneBackgrounds[tone] }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core9.Stack, { gap: "md", children: [
-    title || description || action ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core9.Group, { justify: "space-between", align: "flex-start", gap: "md", wrap: "wrap", children: [
-        title || description ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core9.Stack, { gap: 4, children: [
-          title ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core9.Title, { order: 3, children: title }) : null,
-          description ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core9.Text, { size: "sm", c: "dimmed", children: description }) : null
-        ] }) : null,
-        action
-      ] }),
-      divided ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core9.Divider, {}) : null
-    ] }) : null,
-    children
-  ] }) });
-}
-
 // src/ConsumerSection.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function ConsumerSection({
   title,
   description,
@@ -567,23 +1259,23 @@ function ConsumerSection({
   children,
   tone = "default"
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SectionPanel, { title, description, action, tone, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(SectionPanel, { title, description, action, tone, children });
 }
 
 // src/ConsumerDashboardGrid.tsx
-var import_core10 = require("@mantine/core");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_core18 = require("@mantine/core");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function ConsumerDashboardGrid({
   children,
   columns = 3
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_core10.SimpleGrid, { cols: { base: 1, sm: Math.min(columns, 2), lg: columns }, spacing: "lg", children });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_core18.SimpleGrid, { cols: { base: 1, sm: Math.min(columns, 2), lg: columns }, spacing: "lg", children });
 }
 
 // src/GameBoardTile.tsx
-var import_core11 = require("@mantine/core");
+var import_core19 = require("@mantine/core");
 var import_hooks = require("@mantine/hooks");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function GameBoardTile({
   face,
   revealed,
@@ -592,12 +1284,12 @@ function GameBoardTile({
   onPress,
   highlightColor
 }) {
-  const theme = (0, import_core11.useMantineTheme)();
+  const theme = (0, import_core19.useMantineTheme)();
   const reduceMotion = (0, import_hooks.useMediaQuery)("(prefers-reduced-motion: reduce)");
   const highlighted = revealed && !matched;
   const revealBg = highlightColor ?? (typeof theme.primaryColor === "string" ? `${theme.primaryColor}.5` : "violet.5");
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core11.UnstyledButton, { w: "100%", disabled, onClick: onPress, "aria-pressed": revealed, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    import_core11.Paper,
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core19.UnstyledButton, { w: "100%", disabled, onClick: onPress, "aria-pressed": revealed, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    import_core19.Paper,
     {
       withBorder: true,
       radius: "md",
@@ -612,14 +1304,14 @@ function GameBoardTile({
           transform: reduceMotion || !highlighted ? "scale(1)" : "scale(1.02)"
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core11.Center, { h: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core11.Text, { size: "xl", fw: 700, children: face }) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core19.Center, { h: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core19.Text, { size: "xl", fw: 700, children: face }) })
     }
   ) });
 }
 
 // src/EditorialCard.tsx
-var import_core12 = require("@mantine/core");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_core20 = require("@mantine/core");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var tonePalette = {
   default: {
     accent: "violet",
@@ -639,8 +1331,8 @@ var tonePalette = {
   }
 };
 function EditorialMediaFallback({ compact }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.AspectRatio, { ratio: compact ? 16 / 10 : 4 / 3, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-    import_core12.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_core20.AspectRatio, { ratio: compact ? 16 / 10 : 4 / 3, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    import_core20.Box,
     {
       style: {
         display: "grid",
@@ -650,7 +1342,7 @@ function EditorialMediaFallback({ compact }) {
         background: "var(--mantine-color-gray-0)",
         borderRadius: "var(--mantine-radius-md)"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(GdsIcons.Gallery, { size: compact ? "1.5rem" : "2rem" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(GdsIcons.Gallery, { size: compact ? "1.5rem" : "2rem" })
     }
   ) });
 }
@@ -673,8 +1365,8 @@ function EditorialCard({
   const featured = variant === "featured";
   const palette = tonePalette[tone];
   const interactiveProps = href ? { component: "a", href } : onClick ? { component: "button", onClick, type: "button" } : {};
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-    import_core12.Card,
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+    import_core20.Card,
     {
       className: classNames?.root,
       withBorder: true,
@@ -688,21 +1380,21 @@ function EditorialCard({
         cursor: href || onClick ? "pointer" : "default"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Card.Section, { className: classNames?.media, children: media ?? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(EditorialMediaFallback, { compact }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_core12.Stack, { gap: "md", p: compact ? "md" : "lg", className: classNames?.body, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_core12.Group, { justify: "space-between", align: "flex-start", gap: "sm", wrap: "wrap", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_core12.Stack, { gap: 4, flex: 1, children: [
-              eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Text, { size: "xs", fw: 700, c: "dimmed", children: eyebrow }) : null,
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Title, { order: compact ? 4 : 3, className: classNames?.title, children: title })
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_core20.Card.Section, { className: classNames?.media, children: media ?? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(EditorialMediaFallback, { compact }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_core20.Stack, { gap: "md", p: compact ? "md" : "lg", className: classNames?.body, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_core20.Group, { justify: "space-between", align: "flex-start", gap: "sm", wrap: "wrap", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_core20.Stack, { gap: 4, flex: 1, children: [
+              eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_core20.Text, { size: "xs", fw: 700, c: "dimmed", children: eyebrow }) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_core20.Title, { order: compact ? 4 : 3, className: classNames?.title, children: title })
             ] }),
-            badge ? typeof badge === "string" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Badge, { color: palette.accent, variant: "light", children: badge }) : badge : null
+            badge ? typeof badge === "string" ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_core20.Badge, { color: palette.accent, variant: "light", children: badge }) : badge : null
           ] }),
-          description ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Text, { size: "sm", c: "dimmed", children: description }) : null,
-          meta ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Text, { size: "sm", c: "dimmed", className: classNames?.meta, children: meta }) : null,
-          href || onClick || ctaLabel ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_core12.Group, { gap: 6, c: `${palette.accent}.7`, className: classNames?.action, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Text, { fw: 600, size: "sm", children: ctaLabel }),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-              import_core12.Anchor,
+          description ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_core20.Text, { size: "sm", c: "dimmed", children: description }) : null,
+          meta ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_core20.Text, { size: "sm", c: "dimmed", className: classNames?.meta, children: meta }) : null,
+          href || onClick || ctaLabel ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_core20.Group, { gap: 6, c: `${palette.accent}.7`, className: classNames?.action, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_core20.Text, { fw: 600, size: "sm", children: ctaLabel }),
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              import_core20.Anchor,
               {
                 component: "span",
                 underline: "never",
@@ -719,8 +1411,8 @@ function EditorialCard({
 }
 
 // src/ProductCard.tsx
-var import_core13 = require("@mantine/core");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_core21 = require("@mantine/core");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function ProductCard({
   title,
   description,
@@ -733,39 +1425,39 @@ function ProductCard({
   footer
 }) {
   const MoreIcon = GdsIcons.Menu;
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.Card, { withBorder: true, radius: "lg", padding: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_core13.Stack, { gap: "md", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core21.Card, { withBorder: true, radius: "lg", padding: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_core21.Stack, { gap: "md", children: [
     media,
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_core13.Group, { justify: "space-between", align: "flex-start", wrap: "nowrap", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_core13.Group, { align: "flex-start", gap: "sm", wrap: "nowrap", children: [
-        icon ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.ThemeIcon, { variant: "light", size: "xl", radius: "xl", "aria-hidden": true, children: icon }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_core13.Stack, { gap: 4, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.Title, { order: 4, children: title }),
-          description ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.Text, { size: "sm", c: "dimmed", lineClamp: 3, children: description }) : null
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_core21.Group, { justify: "space-between", align: "flex-start", wrap: "nowrap", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_core21.Group, { align: "flex-start", gap: "sm", wrap: "nowrap", children: [
+        icon ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core21.ThemeIcon, { variant: "light", size: "xl", radius: "xl", "aria-hidden": true, children: icon }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_core21.Stack, { gap: 4, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core21.Title, { order: 4, children: title }),
+          description ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core21.Text, { size: "sm", c: "dimmed", lineClamp: 3, children: description }) : null
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_core13.Group, { gap: "xs", align: "center", wrap: "nowrap", children: [
-        typeof status === "string" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.Badge, { variant: "light", children: status }) : status,
-        secondaryActions.length ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_core13.Menu, { position: "bottom-end", withinPortal: true, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.Menu.Target, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.ActionIcon, { variant: "subtle", "aria-label": "More actions", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MoreIcon, { size: "1rem" }) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.Menu.Dropdown, { children: secondaryActions.map(
-            (action) => action.href ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.Menu.Item, { component: "a", href: action.href, color: action.color, children: action.label }, action.label) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.Menu.Item, { onClick: action.onClick, color: action.color, children: action.label }, action.label)
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_core21.Group, { gap: "xs", align: "center", wrap: "nowrap", children: [
+        typeof status === "string" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core21.Badge, { variant: "light", children: status }) : status,
+        secondaryActions.length ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_core21.Menu, { position: "bottom-end", withinPortal: true, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core21.Menu.Target, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core21.ActionIcon, { variant: "subtle", "aria-label": "More actions", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(MoreIcon, { size: "1rem" }) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core21.Menu.Dropdown, { children: secondaryActions.map(
+            (action) => action.href ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core21.Menu.Item, { component: "a", href: action.href, color: action.color, children: action.label }, action.label) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core21.Menu.Item, { onClick: action.onClick, color: action.color, children: action.label }, action.label)
           ) })
         ] }) : null
       ] })
     ] }),
-    metadata.length ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.Stack, { gap: 6, children: metadata.map((item) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_core13.Group, { justify: "space-between", gap: "sm", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.Text, { size: "sm", c: "dimmed", children: item.label }),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.Text, { size: "sm", fw: 500, ta: "right", children: item.value })
+    metadata.length ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core21.Stack, { gap: 6, children: metadata.map((item) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_core21.Group, { justify: "space-between", gap: "sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core21.Text, { size: "sm", c: "dimmed", children: item.label }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core21.Text, { size: "sm", fw: 500, ta: "right", children: item.value })
     ] }, item.label)) }) : null,
-    primaryAction ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.Group, { justify: "space-between", children: primaryAction }) : null,
+    primaryAction ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core21.Group, { justify: "space-between", children: primaryAction }) : null,
     footer
   ] }) });
 }
 
 // src/PublicProductCard.tsx
-var import_react2 = require("react");
-var import_core14 = require("@mantine/core");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_react3 = require("react");
+var import_core22 = require("@mantine/core");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var stateConfig = {
   available: { label: "Available", color: "teal" },
   limited: { label: "Limited", color: "yellow" },
@@ -773,38 +1465,38 @@ var stateConfig = {
   preorder: { label: "Preorder", color: "violet" }
 };
 function enhanceAction(action, disabled) {
-  if (!(0, import_react2.isValidElement)(action)) {
+  if (!(0, import_react3.isValidElement)(action)) {
     return action;
   }
-  return (0, import_react2.cloneElement)(action, {
+  return (0, import_react3.cloneElement)(action, {
     disabled: disabled || Boolean(action.props.disabled),
     "aria-disabled": disabled || void 0
   });
 }
 function ImageFallback({ compact }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.AspectRatio, { ratio: compact ? 16 / 9 : 4 / 3, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-    import_core14.ThemeIcon,
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core22.AspectRatio, { ratio: compact ? 16 / 9 : 4 / 3, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    import_core22.ThemeIcon,
     {
       size: "100%",
       radius: "md",
       variant: "light",
       color: "gray",
       "aria-label": "No product image available",
-      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(GdsIcons.Gallery, { size: compact ? "1.5rem" : "2rem" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(GdsIcons.Gallery, { size: compact ? "1.5rem" : "2rem" })
     }
   ) });
 }
 function LoadingCard({ compact }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Card, { withBorder: true, radius: "lg", padding: compact ? "md" : "lg", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Stack, { gap: "md", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.AspectRatio, { ratio: compact ? 16 / 9 : 4 / 3, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Skeleton, { radius: "md" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Stack, { gap: "xs", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Skeleton, { height: 20, radius: "sm", width: "70%" }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Skeleton, { height: 14, radius: "sm", width: "100%" }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Skeleton, { height: 14, radius: "sm", width: "85%" })
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core22.Card, { withBorder: true, radius: "lg", padding: compact ? "md" : "lg", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_core22.Stack, { gap: "md", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core22.AspectRatio, { ratio: compact ? 16 / 9 : 4 / 3, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core22.Skeleton, { radius: "md" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_core22.Stack, { gap: "xs", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core22.Skeleton, { height: 20, radius: "sm", width: "70%" }),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core22.Skeleton, { height: 14, radius: "sm", width: "100%" }),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core22.Skeleton, { height: 14, radius: "sm", width: "85%" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Group, { justify: "space-between", align: "center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Skeleton, { height: 18, radius: "sm", width: 72 }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Skeleton, { height: 36, radius: "md", width: 120 })
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_core22.Group, { justify: "space-between", align: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core22.Skeleton, { height: 18, radius: "sm", width: 72 }),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core22.Skeleton, { height: 36, radius: "md", width: 120 })
     ] })
   ] }) });
 }
@@ -827,7 +1519,7 @@ function PublicProductCard({
   disabled = false
 }) {
   if (loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(LoadingCard, { compact });
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(LoadingCard, { compact });
   }
   const isActionDisabled = disabled || state === "sold-out";
   const resolvedPrimaryAction = enhanceAction(primaryAction, isActionDisabled);
@@ -840,46 +1532,211 @@ function PublicProductCard({
   const pickupHelper = helperKind === "pickup" ? helperText : pickupNote;
   const inventoryHelper = helperKind === "inventory" ? helperText : inventoryNote;
   const hasSupportingRegion = Boolean(price || supportingHelper || pickupHelper || inventoryHelper);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Card, { withBorder: true, radius: "lg", padding: compact ? "md" : "lg", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Stack, { gap: compact ? "sm" : "md", children: [
-    image ?? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ImageFallback, { compact }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Group, { justify: "space-between", align: "flex-start", wrap: "nowrap", gap: "sm", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Stack, { gap: 4, style: { minWidth: 0, flex: 1 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Title, { order: compact ? 5 : 4, lineClamp: 2, children: title }),
-        description ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Text, { size: "sm", c: "dimmed", lineClamp: compact ? 2 : 3, children: description }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core22.Card, { withBorder: true, radius: "lg", padding: compact ? "md" : "lg", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_core22.Stack, { gap: compact ? "sm" : "md", children: [
+    image ?? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ImageFallback, { compact }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_core22.Group, { justify: "space-between", align: "flex-start", wrap: "nowrap", gap: "sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_core22.Stack, { gap: 4, style: { minWidth: 0, flex: 1 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core22.Title, { order: compact ? 5 : 4, lineClamp: 2, children: title }),
+        description ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core22.Text, { size: "sm", c: "dimmed", lineClamp: compact ? 2 : 3, children: description }) : null
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Badge, { variant: "light", color: stateBadge.color, children: stateBadge.label })
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core22.Badge, { variant: "light", color: stateBadge.color, children: stateBadge.label })
     ] }),
-    hasSupportingRegion ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Group, { justify: "space-between", align: "flex-end", gap: "sm", wrap: "nowrap", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Stack, { gap: 2, style: { minWidth: 0, flex: 1 }, children: [
-        price ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Text, { fw: 700, size: compact ? "md" : "lg", children: price }) : null,
-        supportingHelper ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Text, { size: "xs", c: "dimmed", children: supportingHelper }) : null
+    hasSupportingRegion ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_core22.Group, { justify: "space-between", align: "flex-end", gap: "sm", wrap: "nowrap", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_core22.Stack, { gap: 2, style: { minWidth: 0, flex: 1 }, children: [
+        price ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core22.Text, { fw: 700, size: compact ? "md" : "lg", children: price }) : null,
+        supportingHelper ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core22.Text, { size: "xs", c: "dimmed", children: supportingHelper }) : null
       ] }),
       resolvedPrimaryAction
-    ] }) : resolvedPrimaryAction ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Group, { justify: "flex-end", children: resolvedPrimaryAction }) : null,
-    pickupHelper || inventoryHelper || metadata.length ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Stack, { gap: 6, children: [
-      pickupHelper ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Group, { justify: "space-between", gap: "sm", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Text, { size: "sm", c: "dimmed", children: "Pickup" }),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Text, { size: "sm", fw: 500, ta: "right", children: pickupHelper })
+    ] }) : resolvedPrimaryAction ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core22.Group, { justify: "flex-end", children: resolvedPrimaryAction }) : null,
+    pickupHelper || inventoryHelper || metadata.length ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_core22.Stack, { gap: 6, children: [
+      pickupHelper ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_core22.Group, { justify: "space-between", gap: "sm", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core22.Text, { size: "sm", c: "dimmed", children: "Pickup" }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core22.Text, { size: "sm", fw: 500, ta: "right", children: pickupHelper })
       ] }) : null,
-      inventoryHelper ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Group, { justify: "space-between", gap: "sm", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Text, { size: "sm", c: "dimmed", children: "Availability" }),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Text, { size: "sm", fw: 500, ta: "right", children: inventoryHelper })
+      inventoryHelper ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_core22.Group, { justify: "space-between", gap: "sm", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core22.Text, { size: "sm", c: "dimmed", children: "Availability" }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core22.Text, { size: "sm", fw: 500, ta: "right", children: inventoryHelper })
       ] }) : null,
-      metadata.map((item) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Group, { justify: "space-between", gap: "sm", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Text, { size: "sm", c: "dimmed", children: item.label }),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Text, { size: "sm", fw: 500, ta: "right", children: item.value })
+      metadata.map((item) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_core22.Group, { justify: "space-between", gap: "sm", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core22.Text, { size: "sm", c: "dimmed", children: item.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core22.Text, { size: "sm", fw: 500, ta: "right", children: item.value })
       ] }, item.label))
     ] }) : null,
-    resolvedSecondaryAction ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Group, { justify: "flex-end", children: resolvedSecondaryAction }) : null
+    resolvedSecondaryAction ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core22.Group, { justify: "flex-end", children: resolvedSecondaryAction }) : null
+  ] }) });
+}
+
+// src/PublicFoodCard.tsx
+var import_react4 = require("react");
+var import_core23 = require("@mantine/core");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var ratioMap2 = {
+  square: 1,
+  dish: 4 / 3,
+  landscape: 16 / 9
+};
+var stateConfig2 = {
+  available: { label: "Available", color: "teal" },
+  preorder: { label: "Preorder", color: "violet" },
+  limited: { label: "Limited batch", color: "yellow" },
+  "sold-out": { label: "Sold out", color: "red" },
+  "coming-soon": { label: "Coming soon", color: "gray" }
+};
+var markerToneMap = {
+  default: "gray",
+  positive: "teal",
+  warning: "orange",
+  muted: "dark"
+};
+function enhanceAction2(action, disabled) {
+  if (!(0, import_react4.isValidElement)(action)) {
+    return action;
+  }
+  return (0, import_react4.cloneElement)(action, {
+    disabled: disabled || Boolean(action.props.disabled),
+    "aria-disabled": disabled || void 0
+  });
+}
+function FoodImageFallback({ mediaRatio }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core23.AspectRatio, { ratio: ratioMap2[mediaRatio], children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core23.ThemeIcon, { size: "100%", radius: "md", variant: "light", color: "gray", "aria-label": "No food image available", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(GdsIcons.Gallery, { size: "2rem" }) }) });
+}
+function LoadingFoodCard({ mediaRatio }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core23.Card, { withBorder: true, radius: "lg", padding: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_core23.Stack, { gap: "md", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core23.AspectRatio, { ratio: ratioMap2[mediaRatio], children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core23.Skeleton, { radius: "md" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_core23.Stack, { gap: "xs", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core23.Skeleton, { height: 20, radius: "sm", width: "72%" }),
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core23.Skeleton, { height: 14, radius: "sm", width: "96%" }),
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core23.Skeleton, { height: 14, radius: "sm", width: "78%" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_core23.Group, { justify: "space-between", align: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core23.Skeleton, { height: 18, radius: "sm", width: 96 }),
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core23.Skeleton, { height: 36, radius: "md", width: 112 })
+    ] })
+  ] }) });
+}
+function PublicFoodCard({
+  title,
+  description,
+  image,
+  price,
+  priceNote,
+  state,
+  helperText,
+  pickupNote,
+  freshnessNote,
+  markers = [],
+  metadata = [],
+  primaryAction,
+  secondaryAction,
+  quantityHint,
+  mediaRatio = "dish",
+  loading = false,
+  disabled = false
+}) {
+  if (loading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(LoadingFoodCard, { mediaRatio });
+  }
+  const stateBadge = stateConfig2[state];
+  const isActionDisabled = disabled || state === "sold-out" || state === "coming-soon";
+  const resolvedPrimaryAction = enhanceAction2(primaryAction, isActionDisabled);
+  const resolvedSecondaryAction = enhanceAction2(secondaryAction, disabled);
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core23.Card, { withBorder: true, radius: "lg", padding: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_core23.Stack, { gap: "md", children: [
+    image ?? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(FoodImageFallback, { mediaRatio }),
+    markers.length > 0 || quantityHint ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_core23.Group, { justify: "space-between", align: "center", wrap: "wrap", gap: "xs", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core23.Group, { gap: "xs", wrap: "wrap", children: markers.map((marker) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core23.Badge, { variant: "light", color: markerToneMap[marker.tone ?? "default"], children: marker.label }, marker.id)) }),
+      quantityHint ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core23.Text, { size: "xs", fw: 600, c: "dimmed", children: quantityHint }) : null
+    ] }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_core23.Group, { justify: "space-between", align: "flex-start", gap: "sm", wrap: "nowrap", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_core23.Stack, { gap: 4, style: { minWidth: 0, flex: 1 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core23.Title, { order: 4, lineClamp: 2, children: title }),
+        description ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core23.Text, { size: "sm", c: "dimmed", lineClamp: 3, children: description }) : null
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core23.Badge, { variant: "light", color: stateBadge.color, children: stateBadge.label })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_core23.Group, { justify: "space-between", align: "flex-end", gap: "sm", wrap: "nowrap", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_core23.Stack, { gap: 2, style: { minWidth: 0, flex: 1 }, children: [
+        price ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core23.Text, { fw: 800, size: "lg", children: price }) : null,
+        priceNote ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core23.Text, { size: "xs", c: "dimmed", children: priceNote }) : null,
+        helperText ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core23.Text, { size: "sm", c: "dimmed", children: helperText }) : null
+      ] }),
+      resolvedPrimaryAction
+    ] }),
+    pickupNote || freshnessNote || metadata.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_core23.Stack, { gap: 6, children: [
+      pickupNote ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_core23.Group, { justify: "space-between", align: "flex-start", gap: "sm", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core23.Text, { size: "sm", c: "dimmed", children: "Pickup" }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core23.Text, { size: "sm", fw: 500, ta: "right", children: pickupNote })
+      ] }) : null,
+      freshnessNote ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_core23.Group, { justify: "space-between", align: "flex-start", gap: "sm", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core23.Text, { size: "sm", c: "dimmed", children: "Freshness" }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core23.Text, { size: "sm", fw: 500, ta: "right", children: freshnessNote })
+      ] }) : null,
+      metadata.map((item) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core23.Group, { justify: "space-between", align: "flex-start", gap: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_core23.Group, { gap: "xs", wrap: "nowrap", children: [
+        item.icon,
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core23.Text, { size: "sm", c: "dimmed", children: item.label })
+      ] }) }, item.id))
+    ] }) : null,
+    resolvedSecondaryAction ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core23.Group, { justify: "flex-end", children: resolvedSecondaryAction }) : null
+  ] }) });
+}
+
+// src/FoodMenuSection.tsx
+var import_core24 = require("@mantine/core");
+var import_jsx_runtime26 = require("react/jsx-runtime");
+function FoodMenuSection({
+  title,
+  description,
+  eyebrow,
+  categories,
+  sectionNote,
+  action,
+  emptyState,
+  columns = 3,
+  showEmptyCategories = false
+}) {
+  const normalizedCategories = (categories ?? []).filter(Boolean);
+  const visibleCategories = showEmptyCategories ? normalizedCategories : normalizedCategories.filter((category) => category.items.length > 0);
+  if (!visibleCategories.length) {
+    return emptyState ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_jsx_runtime26.Fragment, { children: emptyState }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      EmptyState,
+      {
+        title: "No active menu available",
+        description: "Publish grouped menu categories here when the current weekly or seasonal menu is ready."
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_core24.Box, { component: "section", "aria-label": typeof title === "string" ? title : "Food menu section", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_core24.Stack, { gap: "xl", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_core24.Group, { justify: "space-between", align: "flex-start", gap: "md", wrap: "wrap", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_core24.Stack, { gap: 4, children: [
+        eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_core24.Text, { size: "xs", fw: 700, c: "dimmed", tt: "uppercase", children: eyebrow }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_core24.Title, { order: 2, children: title }),
+        description ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_core24.Text, { size: "sm", c: "dimmed", maw: 760, children: description }) : null,
+        sectionNote ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_core24.Text, { size: "sm", c: "dimmed", children: sectionNote }) : null
+      ] }),
+      action
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_core24.Stack, { gap: "xl", children: visibleCategories.map((category) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_core24.Stack, { gap: "md", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_core24.Stack, { gap: 4, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_core24.Title, { order: 3, children: category.title }),
+        category.description ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_core24.Text, { size: "sm", c: "dimmed", children: category.description }) : null,
+        category.helperNote ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_core24.Text, { size: "sm", c: "dimmed", children: category.helperNote }) : null
+      ] }),
+      category.items.length ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_core24.SimpleGrid, { cols: { base: 1, sm: Math.min(columns, 2), lg: columns }, spacing: "lg", children: category.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(PublicFoodCard, { ...item }, item.id)) }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        EmptyState,
+        {
+          title: "No items in this category",
+          description: "This category is defined, but it does not currently have any visible dishes or bundles."
+        }
+      )
+    ] }, category.id)) })
   ] }) });
 }
 
 // src/BrowseSurface.tsx
-var import_core17 = require("@mantine/core");
+var import_core26 = require("@mantine/core");
 
 // src/DataToolbar.tsx
-var import_core15 = require("@mantine/core");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_core25 = require("@mantine/core");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function DataToolbar({
   searchSlot,
   filterSlot,
@@ -888,20 +1745,20 @@ function DataToolbar({
   createAction,
   activeFilters = []
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_core15.Stack, { gap: "sm", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_core15.Group, { justify: "space-between", align: "flex-start", gap: "sm", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_core15.Group, { flex: 1, align: "flex-start", gap: "sm", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_core25.Stack, { gap: "sm", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_core25.Group, { justify: "space-between", align: "flex-start", gap: "sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_core25.Group, { flex: 1, align: "flex-start", gap: "sm", children: [
         searchSlot,
         filterSlot,
         sortSlot
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_core15.Group, { gap: "sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_core25.Group, { gap: "sm", children: [
         resetAction,
         createAction
       ] })
     ] }),
-    activeFilters.length ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_core15.Group, { gap: "xs", children: activeFilters.map((filter) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-      import_core15.Badge,
+    activeFilters.length ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_core25.Group, { gap: "xs", children: activeFilters.map((filter) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      import_core25.Badge,
       {
         variant: "light",
         rightSection: filter.onRemove ? "\xD7" : void 0,
@@ -914,50 +1771,8 @@ function DataToolbar({
   ] });
 }
 
-// src/StateBlock.tsx
-var import_core16 = require("@mantine/core");
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var variantConfig = {
-  loading: { color: "violet", icon: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Loader, { size: "sm" }) },
-  empty: { color: "gray", icon: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(GdsIcons.Inbox, { size: "1.1rem" }) },
-  error: { color: "red", icon: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(GdsIcons.Danger, { size: "1.1rem" }) },
-  permission: { color: "orange", icon: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(GdsIcons.Verify, { size: "1.1rem" }) },
-  disabled: { color: "gray", icon: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(GdsIcons.Toggle, { size: "1.1rem" }) },
-  success: { color: "teal", icon: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(GdsIcons.Success, { size: "1.1rem" }) },
-  info: { color: "blue", icon: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(GdsIcons.Info, { size: "1.1rem" }) },
-  "not-enough-data": { color: "yellow", icon: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(GdsIcons.Analytics, { size: "1.1rem" }) }
-};
-function StateBlock({
-  variant,
-  title,
-  description,
-  action,
-  icon,
-  compact = false
-}) {
-  const config = variantConfig[variant];
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
-    import_core16.Stack,
-    {
-      align: compact ? "flex-start" : "center",
-      justify: "center",
-      gap: "md",
-      py: compact ? "md" : "xl",
-      ta: compact ? "left" : "center",
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.ThemeIcon, { variant: "light", color: config.color, size: compact ? "lg" : "xl", radius: "xl", children: icon ?? config.icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_core16.Stack, { gap: 6, align: compact ? "flex-start" : "center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Title, { order: compact ? 4 : 3, children: title }),
-          description ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Text, { c: "dimmed", maw: compact ? void 0 : 480, children: description }) : null
-        ] }),
-        action
-      ]
-    }
-  );
-}
-
 // src/BrowseSurface.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function BrowseSurface({
   eyebrow,
   title,
@@ -991,22 +1806,22 @@ function BrowseSurface({
   }));
   let body = content;
   if (loading) {
-    body = /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(StateBlock, { variant: "loading", title: loadingTitle, description: loadingDescription, compact: true });
+    body = /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(StateBlock, { variant: "loading", title: loadingTitle, description: loadingDescription, compact: true });
   } else if (error) {
-    body = /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(StateBlock, { variant: "error", title: errorTitle, description: error, action: errorAction ?? emptyAction, compact: true });
+    body = /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(StateBlock, { variant: "error", title: errorTitle, description: error, action: errorAction ?? emptyAction, compact: true });
   } else if (empty) {
-    body = /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(StateBlock, { variant: "empty", title: emptyTitle, description: emptyDescription, action: emptyAction, compact: true });
+    body = /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(StateBlock, { variant: "empty", title: emptyTitle, description: emptyDescription, action: emptyAction, compact: true });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_core17.Stack, { gap: "lg", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_core17.Paper, { withBorder: true, radius: "xl", p: "xl", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_core17.Stack, { gap: "lg", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_core17.Group, { justify: "space-between", align: "flex-start", gap: "md", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_core17.Stack, { gap: "xs", maw: 760, children: [
-          eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_core17.Text, { size: "xs", fw: 700, tt: "uppercase", c: "dimmed", style: { letterSpacing: "0.18em" }, children: eyebrow }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_core17.Title, { order: 1, children: title }),
-          description ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_core17.Text, { size: "lg", c: "dimmed", children: description }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_core26.Stack, { gap: "lg", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core26.Paper, { withBorder: true, radius: "xl", p: "xl", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_core26.Stack, { gap: "lg", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_core26.Group, { justify: "space-between", align: "flex-start", gap: "md", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_core26.Stack, { gap: "xs", maw: 760, children: [
+          eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core26.Text, { size: "xs", fw: 700, tt: "uppercase", c: "dimmed", style: { letterSpacing: "0.18em" }, children: eyebrow }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core26.Title, { order: 1, children: title }),
+          description ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core26.Text, { size: "lg", c: "dimmed", children: description }) : null
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_core17.Stack, { align: "flex-end", gap: "xs", children: [
-          typeof resultCount === "number" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_core17.Badge, { size: "lg", radius: "xl", variant: "light", color: "violet", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_core26.Stack, { align: "flex-end", gap: "xs", children: [
+          typeof resultCount === "number" ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_core26.Badge, { size: "lg", radius: "xl", variant: "light", color: "violet", children: [
             resultCount,
             " ",
             resultLabel
@@ -1014,10 +1829,10 @@ function BrowseSurface({
           primaryControls
         ] })
       ] }),
-      scopeOptions.length ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_core17.Stack, { gap: "xs", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_core17.Text, { size: "sm", fw: 600, c: "dimmed", children: scopeLabel }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_core17.Group, { gap: "xs", wrap: "wrap", children: scopeOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-          import_core17.Button,
+      scopeOptions.length ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_core26.Stack, { gap: "xs", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core26.Text, { size: "sm", fw: 600, c: "dimmed", children: scopeLabel }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core26.Group, { gap: "xs", wrap: "wrap", children: scopeOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          import_core26.Button,
           {
             variant: option.active ? "filled" : "default",
             color: option.active ? "violet" : "gray",
@@ -1029,30 +1844,30 @@ function BrowseSurface({
           option.id
         )) })
       ] }) : null,
-      locationControls ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_core17.Stack, { gap: "xs", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_core17.Text, { size: "sm", fw: 600, c: "dimmed", children: "Location" }),
+      locationControls ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_core26.Stack, { gap: "xs", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core26.Text, { size: "sm", fw: 600, c: "dimmed", children: "Location" }),
         locationControls
       ] }) : null,
-      toolbar || sortControl ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_core17.SimpleGrid, { cols: { base: 1, lg: sortControl ? 2 : 1 }, spacing: "md", children: [
-        toolbar ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      toolbar || sortControl ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_core26.SimpleGrid, { cols: { base: 1, lg: sortControl ? 2 : 1 }, spacing: "md", children: [
+        toolbar ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           DataToolbar,
           {
             ...toolbar,
             activeFilters: toolbarFilters.length ? toolbarFilters : toolbar.fallbackActiveFilters
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_core17.Box, {}),
-        sortControl ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_core17.Stack, { gap: "xs", align: "stretch", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_core17.Text, { size: "sm", fw: 600, c: "dimmed", children: "Sort" }),
+        ) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core26.Box, {}),
+        sortControl ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_core26.Stack, { gap: "xs", align: "stretch", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core26.Text, { size: "sm", fw: 600, c: "dimmed", children: "Sort" }),
           sortControl
         ] }) : null
       ] }) : null,
-      mobileFilters ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_core17.Stack, { hiddenFrom: "lg", gap: "xs", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_core17.Text, { size: "sm", fw: 600, c: "dimmed", children: "Filters" }),
+      mobileFilters ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_core26.Stack, { hiddenFrom: "lg", gap: "xs", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core26.Text, { size: "sm", fw: 600, c: "dimmed", children: "Filters" }),
         mobileFilters
       ] }) : null,
-      filterDrawer ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_core17.Box, { hiddenFrom: "lg", children: filterDrawer }) : null,
-      activeFilters.length ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_core17.Group, { gap: "xs", wrap: "wrap", children: activeFilters.map((filter) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-        import_core17.Badge,
+      filterDrawer ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core26.Box, { hiddenFrom: "lg", children: filterDrawer }) : null,
+      activeFilters.length ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core26.Group, { gap: "xs", wrap: "wrap", children: activeFilters.map((filter) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        import_core26.Badge,
         {
           variant: "light",
           color: "violet",
@@ -1063,92 +1878,52 @@ function BrowseSurface({
         },
         filter.id
       )) }) : null
-    ] }) }),
-    body
-  ] });
-}
-
-// src/AccentPanel.tsx
-var import_core18 = require("@mantine/core");
-var import_jsx_runtime19 = require("react/jsx-runtime");
-var toneStyles = {
-  gray: {
-    bg: "light-dark(var(--mantine-color-gray-0), color-mix(in srgb, var(--mantine-color-gray-7) 88%, black))",
-    border: "light-dark(var(--mantine-color-gray-2), color-mix(in srgb, var(--mantine-color-gray-4) 70%, transparent))",
-    color: "light-dark(var(--mantine-color-gray-9), var(--mantine-color-gray-0))"
-  },
-  violet: {
-    bg: "light-dark(var(--mantine-color-violet-0), color-mix(in srgb, var(--mantine-color-violet-9) 70%, black))",
-    border: "light-dark(var(--mantine-color-violet-2), color-mix(in srgb, var(--mantine-color-violet-4) 75%, transparent))",
-    color: "light-dark(var(--mantine-color-violet-9), var(--mantine-color-violet-0))"
-  },
-  green: {
-    bg: "light-dark(var(--mantine-color-green-0), color-mix(in srgb, var(--mantine-color-green-9) 72%, black))",
-    border: "light-dark(var(--mantine-color-green-2), color-mix(in srgb, var(--mantine-color-green-4) 78%, transparent))",
-    color: "light-dark(var(--mantine-color-green-9), var(--mantine-color-green-0))"
-  },
-  red: {
-    bg: "light-dark(var(--mantine-color-red-0), color-mix(in srgb, var(--mantine-color-red-9) 72%, black))",
-    border: "light-dark(var(--mantine-color-red-2), color-mix(in srgb, var(--mantine-color-red-4) 78%, transparent))",
-    color: "light-dark(var(--mantine-color-red-9), var(--mantine-color-red-0))"
-  },
-  amber: {
-    bg: "light-dark(var(--mantine-color-yellow-0), color-mix(in srgb, var(--mantine-color-yellow-8) 78%, black))",
-    border: "light-dark(var(--mantine-color-yellow-3), color-mix(in srgb, var(--mantine-color-yellow-5) 70%, transparent))",
-    color: "light-dark(var(--mantine-color-yellow-9), var(--mantine-color-yellow-0))"
-  },
-  blue: {
-    bg: "light-dark(var(--mantine-color-blue-0), color-mix(in srgb, var(--mantine-color-blue-9) 74%, black))",
-    border: "light-dark(var(--mantine-color-blue-2), color-mix(in srgb, var(--mantine-color-blue-4) 75%, transparent))",
-    color: "light-dark(var(--mantine-color-blue-9), var(--mantine-color-blue-0))"
-  }
-};
-function resolveAccentPanelStyles(tone = "violet", variant = "subtle") {
-  const token = toneStyles[tone];
-  if (variant === "soft-outline") {
-    return {
-      backgroundColor: "light-dark(var(--mantine-color-body), color-mix(in srgb, var(--mantine-color-dark-7) 92%, black))",
-      border: `1px solid ${token.border}`,
-      color: token.color
-    };
-  }
-  return {
-    backgroundColor: token.bg,
-    border: `1px solid ${token.border}`,
-    color: token.color
-  };
+    ] }) }),
+    body
+  ] });
 }
-function AccentPanel({
-  tone = "violet",
-  variant = "subtle",
-  title,
-  badge,
-  children
+
+// src/DetailProfileShell.tsx
+var import_core27 = require("@mantine/core");
+var import_jsx_runtime29 = require("react/jsx-runtime");
+function DetailProfileShell({
+  mode = "page",
+  hero,
+  actions,
+  sections,
+  related,
+  padding = "lg",
+  showDividers = true
 }) {
-  const styles = resolveAccentPanelStyles(tone, variant);
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_core18.Paper, { withBorder: true, radius: "lg", p: "lg", style: styles, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_core18.Stack, { gap: "sm", children: [
-    title || badge ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_core18.Group, { justify: "space-between", align: "flex-start", gap: "sm", wrap: "wrap", children: [
-      title ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_core18.Title, { order: 4, c: "inherit", children: title }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_core18.Box, {}),
-      badge ? typeof badge === "string" ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_core18.Badge, { color: tone === "amber" ? "yellow" : tone, variant: "filled", children: badge }) : badge : null
-    ] }) : null,
-    typeof children === "string" ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_core18.Text, { c: "inherit", children }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_core18.Box, { c: "inherit", children })
+  const content = sections.filter(Boolean);
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core27.Paper, { withBorder: mode === "drawer", radius: mode === "drawer" ? "xl" : "md", p: padding, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_core27.Stack, { gap: "lg", children: [
+    hero,
+    actions,
+    content.map((section, index) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_core27.Stack, { gap: "lg", children: [
+      index > 0 && showDividers ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core27.Divider, {}) : null,
+      section
+    ] }, index)),
+    related ? /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
+      content.length && showDividers ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core27.Divider, {}) : null,
+      related
+    ] }) : null
   ] }) });
 }
 
 // src/PublicShell.tsx
-var import_core20 = require("@mantine/core");
+var import_core29 = require("@mantine/core");
 
 // src/PublicNav.tsx
-var import_core19 = require("@mantine/core");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_core28 = require("@mantine/core");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function PublicNav({ items, activeId, renderLink }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_core19.Group, { component: "nav", "aria-label": "Primary", gap: "lg", wrap: "nowrap", children: items.map((item) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core28.Group, { component: "nav", "aria-label": "Primary", gap: "lg", wrap: "nowrap", children: items.map((item) => {
     const active = item.id === activeId;
     if (renderLink) {
-      return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children: renderLink(item, active) }, item.id);
+      return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { children: renderLink(item, active) }, item.id);
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-      import_core19.Anchor,
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      import_core28.Anchor,
       {
         href: item.href,
         "aria-current": active ? "page" : void 0,
@@ -1165,15 +1940,15 @@ function PublicNav({ items, activeId, renderLink }) {
 }
 
 // src/PublicShell.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function InlineMobileNavigation({
   mobileNavigation,
   className,
   mode
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_core20.Box, { component: "details", hiddenFrom: "sm", className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
-      import_core20.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_core29.Box, { component: "details", hiddenFrom: "sm", className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+      import_core29.Box,
       {
         component: "summary",
         "aria-label": mode === "drawer" ? "Open site navigation drawer" : "Open site navigation",
@@ -1185,13 +1960,13 @@ function InlineMobileNavigation({
           gap: "0.5rem"
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core20.Burger, { opened: false, "aria-hidden": true }),
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core20.Text, { size: "sm", fw: 600, children: "Menu" })
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Burger, { opened: false, "aria-hidden": true }),
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Text, { size: "sm", fw: 600, children: "Menu" })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-      import_core20.Box,
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      import_core29.Box,
       {
         mt: "sm",
         p: "sm",
@@ -1200,7 +1975,7 @@ function InlineMobileNavigation({
           border: "1px solid var(--mantine-color-default-border)",
           background: mode === "drawer" ? "light-dark(var(--mantine-color-white), color-mix(in srgb, var(--mantine-color-dark-7) 92%, black))" : "var(--mantine-color-body)"
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core20.Stack, { gap: "sm", children: mobileNavigation })
+        children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Stack, { gap: "sm", children: mobileNavigation })
       }
     )
   ] });
@@ -1221,30 +1996,30 @@ function PublicShell({
   mobileNavigationMode = "sheet",
   classNames
 }) {
-  const resolvedNavigation = navigation ?? (navItems ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(PublicNav, { items: navItems, activeId: activeNavId }) : null);
+  const resolvedNavigation = navigation ?? (navItems ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(PublicNav, { items: navItems, activeId: activeNavId }) : null);
   const containerSize = maxContentWidth ?? (compact ? "md" : "lg");
   const headerHeight = headerVariant === "compact" ? 64 : headerVariant === "branded-quiet" ? 88 : 72;
   const mainPadding = headerVariant === "compact" ? "lg" : "xl";
   const usesInlineMobileNavigation = Boolean(mobileNavigation) && mobileNavigationMode !== "sheet";
   const usesSheetMobileNavigation = Boolean(mobileNavigation) && mobileNavigationMode === "sheet";
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
-    import_core20.AppShell,
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+    import_core29.AppShell,
     {
       className: classNames?.root,
       header: { height: headerHeight },
       footer: usesSheetMobileNavigation ? { height: 68 } : void 0,
       padding: 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core20.AppShell.Header, { withBorder: headerBordered, className: classNames?.header, "data-header-variant": headerVariant, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core20.Container, { size: containerSize, h: "100%", py: headerVariant === "branded-quiet" ? "sm" : 0, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
-          import_core20.Group,
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.AppShell.Header, { withBorder: headerBordered, className: classNames?.header, "data-header-variant": headerVariant, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Container, { size: containerSize, h: "100%", py: headerVariant === "branded-quiet" ? "sm" : 0, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+          import_core29.Group,
           {
             h: "100%",
             justify: "space-between",
             wrap: "nowrap",
             gap: headerVariant === "compact" ? "sm" : "lg",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_core20.Group, { wrap: "nowrap", gap: headerVariant === "compact" ? "xs" : "sm", className: classNames?.brand, children: [
-                usesInlineMobileNavigation ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_core29.Group, { wrap: "nowrap", gap: headerVariant === "compact" ? "xs" : "sm", className: classNames?.brand, children: [
+                usesInlineMobileNavigation ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                   InlineMobileNavigation,
                   {
                     mobileNavigation,
@@ -1252,36 +2027,144 @@ function PublicShell({
                     mode: mobileNavigationMode
                   }
                 ) : null,
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core20.Box, { children: brand })
+                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Box, { children: brand })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core20.Group, { visibleFrom: "sm", gap: headerVariant === "compact" ? "md" : "lg", className: classNames?.navigation, children: resolvedNavigation }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core20.Group, { gap: "sm", className: classNames?.actions, children: actions })
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Group, { visibleFrom: "sm", gap: headerVariant === "compact" ? "md" : "lg", className: classNames?.navigation, children: resolvedNavigation }),
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Group, { gap: "sm", className: classNames?.actions, children: actions })
             ]
           }
         ) }) }),
-        usesSheetMobileNavigation ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core20.AppShell.Footer, { withBorder: true, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core20.Container, { size: containerSize, h: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core20.Group, { h: "100%", justify: "space-around", wrap: "nowrap", children: mobileNavigation }) }) }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_core20.AppShell.Main, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core20.Container, { size: containerSize, py: mainPadding, className: classNames?.content, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core20.Stack, { gap: "xl", children }) }),
-          footer ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core20.Box, { component: typeof footer === "string" ? "footer" : "div", py: "xl", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core20.Container, { size: containerSize, children: typeof footer === "string" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core20.Text, { size: "sm", c: "dimmed", children: footer }) : footer }) }) : null
+        usesSheetMobileNavigation ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.AppShell.Footer, { withBorder: true, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Container, { size: containerSize, h: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Group, { h: "100%", justify: "space-around", wrap: "nowrap", children: mobileNavigation }) }) }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_core29.AppShell.Main, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Container, { size: containerSize, py: mainPadding, className: classNames?.content, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Stack, { gap: "xl", children }) }),
+          footer ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Box, { component: typeof footer === "string" ? "footer" : "div", py: "xl", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Container, { size: containerSize, children: typeof footer === "string" ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Text, { size: "sm", c: "dimmed", children: footer }) : footer }) }) : null
         ] })
       ]
     }
   );
 }
 
+// src/DiscoveryShell.tsx
+var import_core30 = require("@mantine/core");
+var import_hooks2 = require("@mantine/hooks");
+var import_jsx_runtime32 = require("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 }] = (0, import_hooks2.useDisclosure)(defaultSidebarOpen);
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+    import_core30.AppShell,
+    {
+      header: { height: headerHeight },
+      footer: footer ? { height: 68 } : void 0,
+      navbar: {
+        width: sidebarWidth,
+        breakpoint: collapseBreakpoint,
+        collapsed: { mobile: !opened }
+      },
+      padding: shellPadding,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core30.AppShell.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_core30.Group, { h: "100%", px: "md", gap: "sm", wrap: "nowrap", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            import_core30.Burger,
+            {
+              opened,
+              onClick: toggle,
+              hiddenFrom: collapseBreakpoint,
+              size: "sm",
+              "aria-label": mobileNavigationLabel
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core30.Box, { style: { flex: 1, minWidth: 0 }, children: header })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core30.AppShell.Navbar, { p: "md", "data-sticky-sidebar": stickySidebar || void 0, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core30.ScrollArea, { h: "100%", type: "auto", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          import_core30.Box,
+          {
+            h: "100%",
+            style: stickySidebar ? {
+              display: "flex",
+              flexDirection: "column"
+            } : void 0,
+            children: sidebar
+          }
+        ) }) }),
+        footer ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core30.AppShell.Footer, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core30.Group, { h: "100%", px: "md", justify: "space-around", wrap: "nowrap", children: footer }) }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core30.AppShell.Main, { onClick: () => close(), children })
+      ]
+    }
+  );
+}
+
+// src/SidebarNav.tsx
+var import_react5 = require("react");
+var import_core31 = require("@mantine/core");
+var import_gds_theme4 = require("@doneisbetter/gds-theme");
+var import_jsx_runtime33 = require("react/jsx-runtime");
+function SidebarNav({ children, ariaLabel = "Primary navigation", gap = "md" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core31.Stack, { component: "nav", "aria-label": ariaLabel, gap, h: "100%", children });
+}
+function SidebarNavSection({ label, children, pushToBottom = false }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_core31.Stack, { gap: "xs", mt: pushToBottom ? "auto" : void 0, children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core31.Text, { size: "xs", fw: 700, c: "dimmed", children: label }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core31.Stack, { gap: 4, children })
+  ] });
+}
+var _SidebarNavItem = (0, import_react5.forwardRef)(
+  ({
+    action,
+    label,
+    description,
+    badge,
+    icon,
+    "aria-label": ariaLabel,
+    "aria-current": ariaCurrent,
+    vocabularyPacks = [],
+    ...props
+  }, ref) => {
+    const { t } = (0, import_gds_theme4.useGdsTranslation)();
+    const config = action ? resolveSemanticActionConfig(action, vocabularyPacks) : null;
+    const Icon = config?.icon;
+    const resolvedLabel = label ?? (action ? getSemanticActionLabel(action, t, vocabularyPacks) : void 0);
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      import_core31.NavLink,
+      {
+        ref,
+        label: resolvedLabel,
+        description,
+        leftSection: icon ?? (Icon ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Icon, { size: "1rem", stroke: 1.5 }) : void 0),
+        rightSection: badge ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core31.Box, { children: badge }) : props.rightSection,
+        "aria-label": ariaLabel ?? (typeof resolvedLabel === "string" ? resolvedLabel : void 0),
+        "aria-current": props.active ? "page" : ariaCurrent,
+        ...props
+      }
+    );
+  }
+);
+var SidebarNavItem = (0, import_core31.createPolymorphicComponent)(_SidebarNavItem);
+
 // src/PublicSiteFooter.tsx
-var import_core21 = require("@mantine/core");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_core32 = require("@mantine/core");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function PublicSiteFooter({ children, meta }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_core21.Stack, { component: "footer", gap: "xs", children: [
-    children ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_core21.Text, { size: "sm", children }) : null,
-    meta ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_core21.Group, { gap: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_core21.Text, { size: "xs", c: "dimmed", children: meta }) }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_core32.Stack, { component: "footer", gap: "xs", children: [
+    children ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_core32.Text, { size: "sm", children }) : null,
+    meta ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_core32.Group, { gap: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_core32.Text, { size: "xs", c: "dimmed", children: meta }) }) : null
   ] });
 }
 
 // src/PublicBrandFooter.tsx
-var import_core22 = require("@mantine/core");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_core33 = require("@mantine/core");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 function PublicBrandFooter({
   media,
   brandTitle,
@@ -1296,8 +2179,8 @@ function PublicBrandFooter({
   const mediaSpan = layoutVariant === "immersive-media" ? 5 : 4;
   const primarySpan = media ? layoutVariant === "balanced-quote" ? 4 : 4 : secondary ? 6 : 12;
   const secondarySpan = media ? Math.max(3, 12 - mediaSpan - primarySpan) : Math.max(4, 12 - primarySpan);
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-    import_core22.Paper,
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    import_core33.Paper,
     {
       component: "footer",
       withBorder: true,
@@ -1305,19 +2188,19 @@ function PublicBrandFooter({
       p: compact ? "lg" : "xl",
       className: classNames?.root,
       "data-layout-variant": layoutVariant,
-      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_core22.Stack, { gap: "lg", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_core22.Grid, { gutter: compact ? "lg" : "xl", align: "flex-start", children: [
-          media ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core22.Grid.Col, { span: { base: 12, md: mediaSpan }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core22.Box, { className: classNames?.media, children: media }) }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core22.Grid.Col, { span: { base: 12, md: primarySpan }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_core22.Stack, { gap: compact ? "xs" : "sm", className: classNames?.primary, children: [
-            brandTitle ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core22.Title, { order: 4, children: brandTitle }) : null,
-            description ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core22.Text, { c: "dimmed", children: description }) : null,
-            actions ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core22.Box, { children: actions }) : null
+      children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_core33.Stack, { gap: "lg", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_core33.Grid, { gutter: compact ? "lg" : "xl", align: "flex-start", children: [
+          media ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_core33.Grid.Col, { span: { base: 12, md: mediaSpan }, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_core33.Box, { className: classNames?.media, children: media }) }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_core33.Grid.Col, { span: { base: 12, md: primarySpan }, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_core33.Stack, { gap: compact ? "xs" : "sm", className: classNames?.primary, children: [
+            brandTitle ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_core33.Title, { order: 4, children: brandTitle }) : null,
+            description ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_core33.Text, { c: "dimmed", children: description }) : null,
+            actions ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_core33.Box, { children: actions }) : null
           ] }) }),
-          secondary ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core22.Grid.Col, { span: { base: 12, md: secondarySpan }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core22.Stack, { gap: compact ? "xs" : "sm", className: classNames?.secondary, children: secondary }) }) : null
+          secondary ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_core33.Grid.Col, { span: { base: 12, md: secondarySpan }, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_core33.Stack, { gap: compact ? "xs" : "sm", className: classNames?.secondary, children: secondary }) }) : null
         ] }),
-        legal ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core22.Divider, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core22.Group, { justify: "space-between", gap: "sm", wrap: "wrap", className: classNames?.legal, children: typeof legal === "string" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core22.Text, { size: "sm", c: "dimmed", children: legal }) : legal })
+        legal ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_core33.Divider, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_core33.Group, { justify: "space-between", gap: "sm", wrap: "wrap", className: classNames?.legal, children: typeof legal === "string" ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_core33.Text, { size: "sm", c: "dimmed", children: legal }) : legal })
         ] }) : null
       ] })
     }
@@ -1325,50 +2208,126 @@ function PublicBrandFooter({
 }
 
 // src/AuthShell.tsx
-var import_core23 = require("@mantine/core");
-var import_jsx_runtime24 = require("react/jsx-runtime");
-function AuthShell({ title, description, brand, headerActions, footer, helper, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core23.Box, { py: { base: "xl", md: "4rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core23.Container, { size: "xs", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_core23.Stack, { gap: "xl", children: [
-    brand || headerActions ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_core23.Group, { justify: brand && headerActions ? "space-between" : "center", align: "center", children: [
-      brand ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core23.Box, { children: brand }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core23.Box, {}),
-      headerActions ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core23.Group, { gap: "sm", children: headerActions }) : null
+var import_core34 = require("@mantine/core");
+var import_jsx_runtime36 = require("react/jsx-runtime");
+function AuthShell({
+  title,
+  description,
+  brand,
+  headerActions,
+  footer,
+  helper,
+  socialAuth,
+  dividerLabel = "Or continue with your account",
+  children
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core34.Box, { py: { base: "xl", md: "4rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core34.Container, { size: "xs", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_core34.Stack, { gap: "xl", children: [
+    brand || headerActions ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_core34.Group, { justify: brand && headerActions ? "space-between" : "center", align: "center", children: [
+      brand ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core34.Box, { children: brand }) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core34.Box, {}),
+      headerActions ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core34.Group, { gap: "sm", children: headerActions }) : null
     ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core23.Card, { withBorder: true, radius: "lg", padding: "xl", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_core23.Stack, { gap: "lg", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_core23.Stack, { gap: "xs", ta: "center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core23.Title, { order: 2, children: title }),
-        description ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core23.Text, { c: "dimmed", size: "sm", children: description }) : null
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core34.Card, { withBorder: true, radius: "lg", padding: "xl", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_core34.Stack, { gap: "lg", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_core34.Stack, { gap: "xs", ta: "center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core34.Title, { order: 2, children: title }),
+        description ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core34.Text, { c: "dimmed", size: "sm", children: description }) : null
       ] }),
+      socialAuth ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core34.Box, { children: socialAuth }) : null,
+      socialAuth ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core34.Divider, { label: dividerLabel, labelPosition: "center" }) : null,
       children,
-      helper ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core23.Text, { size: "sm", c: "dimmed", ta: "center", children: helper }) : null
+      helper ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core34.Text, { size: "sm", c: "dimmed", ta: "center", children: helper }) : null
     ] }) }),
-    footer ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core23.Text, { size: "sm", c: "dimmed", ta: "center", children: footer }) : null
+    footer ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core34.Text, { size: "sm", c: "dimmed", ta: "center", children: footer }) : null
   ] }) }) });
 }
 
+// src/SocialAuthButtons.tsx
+var import_core35 = require("@mantine/core");
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var providerConfig = {
+  google: { label: "Google", mark: "G", color: "red" },
+  apple: { label: "Apple", mark: "A", color: "dark" },
+  github: { label: "GitHub", mark: "GH", color: "gray" },
+  facebook: { label: "Facebook", mark: "F", color: "blue" },
+  microsoft: { label: "Microsoft", mark: "M", color: "cyan" },
+  linkedin: { label: "LinkedIn", mark: "in", color: "blue" },
+  discord: { label: "Discord", mark: "D", color: "indigo" },
+  x: { label: "X", mark: "X", color: "dark" },
+  email: { label: "Email", mark: "@", color: "gray" }
+};
+function ProviderMark({ id }) {
+  const config = providerConfig[id] ?? { label: id, mark: id.slice(0, 2).toUpperCase(), color: "gray" };
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core35.ThemeIcon, { variant: "light", color: config.color, radius: "xl", size: "md", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core35.Text, { size: "xs", fw: 700, children: config.mark }) });
+}
+function SocialAuthButton({ provider, compact = false }) {
+  const config = providerConfig[provider.id] ?? { label: provider.id, mark: provider.id.slice(0, 2).toUpperCase(), color: "gray" };
+  const label = provider.label ?? `Continue with ${config.label}`;
+  const buttonProps = provider.href ? { component: "a", href: provider.href } : { onClick: provider.onClick };
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    import_core35.Button,
+    {
+      variant: "default",
+      justify: "space-between",
+      fullWidth: true,
+      size: compact ? "sm" : "md",
+      leftSection: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ProviderMark, { id: provider.id }),
+      disabled: provider.disabled,
+      loading: provider.loading,
+      ...buttonProps,
+      children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_core35.Stack, { gap: 0, align: "flex-start", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core35.Text, { inherit: true, children: label }),
+        provider.description ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core35.Text, { size: "xs", c: "dimmed", lh: 1.2, children: provider.description }) : null
+      ] })
+    }
+  );
+}
+function SocialAuthButtons({
+  providers,
+  title = "Continue with a trusted provider",
+  description,
+  layout = "stack",
+  compact = false
+}) {
+  if (!providers.length) {
+    return null;
+  }
+  const content = providers.map((provider) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(SocialAuthButton, { provider, compact }, provider.id));
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_core35.Stack, { gap: "md", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_core35.Stack, { gap: 4, ta: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_core35.Group, { justify: "center", gap: "xs", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(GdsIcons.Login, { size: "1rem" }),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core35.Text, { fw: 600, children: title })
+      ] }),
+      description ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core35.Text, { size: "sm", c: "dimmed", children: description }) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core35.Divider, {}),
+    layout === "grid" ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core35.SimpleGrid, { cols: { base: 1, sm: 2 }, spacing: "sm", children: content }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core35.Stack, { gap: "sm", children: content })
+  ] });
+}
+
 // src/ArticleShell.tsx
-var import_core24 = require("@mantine/core");
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_core36 = require("@mantine/core");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 function ArticleShell({ eyebrow, title, lead, meta, sideRail, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core24.Container, { size: "lg", py: "xl", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_core24.Group, { align: "flex-start", gap: "xl", wrap: "nowrap", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_core24.Stack, { gap: "lg", maw: 760, flex: 1, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_core24.Stack, { gap: "sm", children: [
-        eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core24.Text, { size: "sm", fw: 700, c: "dimmed", tt: "uppercase", children: eyebrow }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core24.Title, { order: 1, children: title }),
-        lead ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core24.Text, { size: "lg", c: "dimmed", children: lead }) : null,
-        meta ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core24.Group, { gap: "md", children: meta }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core36.Container, { size: "lg", py: "xl", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_core36.Group, { align: "flex-start", gap: "xl", wrap: "nowrap", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_core36.Stack, { gap: "lg", maw: 760, flex: 1, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_core36.Stack, { gap: "sm", children: [
+        eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core36.Text, { size: "sm", fw: 700, c: "dimmed", tt: "uppercase", children: eyebrow }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core36.Title, { order: 1, children: title }),
+        lead ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core36.Text, { size: "lg", c: "dimmed", children: lead }) : null,
+        meta ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core36.Group, { gap: "md", children: meta }) : null
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core24.Stack, { gap: "md", children })
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core36.Stack, { gap: "md", children })
     ] }),
-    sideRail ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core24.Stack, { visibleFrom: "lg", gap: "md", w: 240, children: sideRail }) : null
+    sideRail ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core36.Stack, { visibleFrom: "lg", gap: "md", w: 240, children: sideRail }) : null
   ] }) });
 }
 
 // src/DocsCodeBlock.tsx
-var import_react3 = require("react");
-var import_core25 = require("@mantine/core");
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_react6 = require("react");
+var import_core37 = require("@mantine/core");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 function DocsCodeBlock({ code, language, title, withCopy = true }) {
-  const [copied, setCopied] = (0, import_react3.useState)(false);
+  const [copied, setCopied] = (0, import_react6.useState)(false);
   const handleCopy = async () => {
     if (!navigator?.clipboard) {
       return;
@@ -1377,44 +2336,44 @@ function DocsCodeBlock({ code, language, title, withCopy = true }) {
     setCopied(true);
     window.setTimeout(() => setCopied(false), 1200);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_core25.Paper, { withBorder: true, radius: "lg", p: "md", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_core25.Stack, { gap: "sm", children: [
-    title || withCopy ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_core25.Group, { justify: "space-between", align: "center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_core25.Stack, { gap: 0, children: [
-        title ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_core25.Text, { fw: 600, children: title }) : null,
-        language ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_core25.Text, { size: "xs", c: "dimmed", children: language }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_core37.Paper, { withBorder: true, radius: "lg", p: "md", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_core37.Stack, { gap: "sm", children: [
+    title || withCopy ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_core37.Group, { justify: "space-between", align: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_core37.Stack, { gap: 0, children: [
+        title ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_core37.Text, { fw: 600, children: title }) : null,
+        language ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_core37.Text, { size: "xs", c: "dimmed", children: language }) : null
       ] }),
-      withCopy ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-        import_core25.ActionIcon,
+      withCopy ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+        import_core37.ActionIcon,
         {
           variant: "subtle",
           "aria-label": copied ? "Copied code block" : "Copy code block",
           onClick: () => {
             void handleCopy();
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(GdsIcons.Copy, { size: "1rem" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(GdsIcons.Copy, { size: "1rem" })
         }
       ) : null
     ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_core25.Code, { block: true, children: code })
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_core37.Code, { block: true, children: code })
   ] }) });
 }
 
 // src/CtaButtonGroup.tsx
-var import_core26 = require("@mantine/core");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_core38 = require("@mantine/core");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 function CtaButtonGroup({ primary, secondary, tertiary }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_core26.Stack, { gap: "sm", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_core26.Group, { gap: "sm", align: "stretch", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { children: primary }),
-      secondary ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { children: secondary }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_core38.Stack, { gap: "sm", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_core38.Group, { gap: "sm", align: "stretch", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { children: primary }),
+      secondary ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { children: secondary }) : null
     ] }),
-    tertiary ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { children: tertiary }) : null
+    tertiary ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { children: tertiary }) : null
   ] });
 }
 
 // src/DocsPageShell.tsx
-var import_core27 = require("@mantine/core");
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_core39 = require("@mantine/core");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 function DocsPageShell({
   breadcrumbs = [],
   title,
@@ -1425,27 +2384,27 @@ function DocsPageShell({
   footerNext,
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core27.Container, { size: "lg", py: "xl", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_core27.Group, { align: "flex-start", gap: "xl", wrap: "nowrap", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_core27.Stack, { component: "article", gap: "lg", maw: 760, flex: 1, children: [
-      breadcrumbs.length ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core27.Breadcrumbs, { children: breadcrumbs.map(
-        (crumb) => crumb.href ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core27.Anchor, { href: crumb.href, children: crumb.label }, `${crumb.label}-${crumb.href}`) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core27.Text, { children: crumb.label }, crumb.label)
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_core39.Container, { size: "lg", py: "xl", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_core39.Group, { align: "flex-start", gap: "xl", wrap: "nowrap", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_core39.Stack, { component: "article", gap: "lg", maw: 760, flex: 1, children: [
+      breadcrumbs.length ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_core39.Breadcrumbs, { children: breadcrumbs.map(
+        (crumb) => crumb.href ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_core39.Anchor, { href: crumb.href, children: crumb.label }, `${crumb.label}-${crumb.href}`) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_core39.Text, { children: crumb.label }, crumb.label)
       ) }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_core27.Stack, { gap: "sm", children: [
-        eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core27.Text, { size: "sm", fw: 700, c: "dimmed", children: eyebrow }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core27.Title, { order: 1, children: title }),
-        lead ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core27.Text, { size: "lg", c: "dimmed", children: lead }) : null,
-        meta ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core27.Group, { gap: "md", children: meta }) : null
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_core39.Stack, { gap: "sm", children: [
+        eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_core39.Text, { size: "sm", fw: 700, c: "dimmed", children: eyebrow }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_core39.Title, { order: 1, children: title }),
+        lead ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_core39.Text, { size: "lg", c: "dimmed", children: lead }) : null,
+        meta ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_core39.Group, { gap: "md", children: meta }) : null
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core27.Stack, { gap: "md", children }),
-      footerNext ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core27.Anchor, { href: footerNext.href, fw: 600, children: footerNext.label }) : null
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_core39.Stack, { gap: "md", children }),
+      footerNext ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_core39.Anchor, { href: footerNext.href, fw: 600, children: footerNext.label }) : null
     ] }),
-    sideRail ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core27.Stack, { visibleFrom: "lg", gap: "md", w: 240, children: sideRail }) : null
+    sideRail ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_core39.Stack, { visibleFrom: "lg", gap: "md", w: 240, children: sideRail }) : null
   ] }) });
 }
 
 // src/EditorialHero.tsx
-var import_core28 = require("@mantine/core");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_core40 = require("@mantine/core");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 function resolveActionVariant(action, index, seenPrimary) {
   const requested = action.variant ?? (index === 0 ? "primary" : "secondary");
   if (requested === "primary" && !seenPrimary) {
@@ -1457,8 +2416,8 @@ function resolveActionVariant(action, index, seenPrimary) {
   return { variant: "default", seenPrimary };
 }
 function HeroAction({ action, variant }) {
-  const content = /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-    import_core28.Anchor,
+  const content = /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    import_core40.Anchor,
     {
       href: action.href,
       onClick: action.onClick,
@@ -1482,8 +2441,8 @@ function HeroAction({ action, variant }) {
     }
   );
   if (!action.href) {
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-      import_core28.Box,
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      import_core40.Box,
       {
         component: "button",
         type: "button",
@@ -1510,30 +2469,30 @@ function HeroAction({ action, variant }) {
   return content;
 }
 function LoadingHero({ compact }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.Paper, { withBorder: true, radius: "xl", p: compact ? "lg" : "xl", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_core28.Grid, { gutter: compact ? "lg" : "xl", align: "center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.Grid.Col, { span: { base: 12, md: 6 }, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_core28.Stack, { gap: "md", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.Skeleton, { height: 16, width: 96, radius: "xl" }),
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.Skeleton, { height: 48, width: "90%", radius: "md" }),
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.Skeleton, { height: 18, width: "100%", radius: "md" }),
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.Skeleton, { height: 18, width: "82%", radius: "md" }),
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_core28.Group, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.Skeleton, { height: 40, width: 140, radius: "md" }),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.Skeleton, { height: 40, width: 140, radius: "md" })
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core40.Paper, { withBorder: true, radius: "xl", p: compact ? "lg" : "xl", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_core40.Grid, { gutter: compact ? "lg" : "xl", align: "center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core40.Grid.Col, { span: { base: 12, md: 6 }, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_core40.Stack, { gap: "md", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core40.Skeleton, { height: 16, width: 96, radius: "xl" }),
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core40.Skeleton, { height: 48, width: "90%", radius: "md" }),
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core40.Skeleton, { height: 18, width: "100%", radius: "md" }),
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core40.Skeleton, { height: 18, width: "82%", radius: "md" }),
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_core40.Group, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core40.Skeleton, { height: 40, width: 140, radius: "md" }),
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core40.Skeleton, { height: 40, width: 140, radius: "md" })
       ] })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.Grid.Col, { span: { base: 12, md: 6 }, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.AspectRatio, { ratio: 16 / 11, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.Skeleton, { radius: "lg" }) }) })
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core40.Grid.Col, { span: { base: 12, md: 6 }, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core40.AspectRatio, { ratio: 16 / 11, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core40.Skeleton, { radius: "lg" }) }) })
   ] }) });
 }
 function MediaFallback() {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.AspectRatio, { ratio: 16 / 11, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-    import_core28.ThemeIcon,
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core40.AspectRatio, { ratio: 16 / 11, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    import_core40.ThemeIcon,
     {
       size: "100%",
       radius: "lg",
       color: "gray",
       variant: "light",
       "aria-label": "Hero media is unavailable",
-      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(GdsIcons.Gallery, { size: "2.5rem" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(GdsIcons.Gallery, { size: "2.5rem" })
     }
   ) });
 }
@@ -1553,8 +2512,8 @@ function MediaFrame({
   } else if (mediaFade === "soft-start") {
     overlayBackground = "linear-gradient(90deg, light-dark(rgba(255,255,255,0.9), rgba(17,24,39,0.72)) 0%, rgba(255,255,255,0) 28%)";
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
-    import_core28.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+    import_core40.Box,
     {
       component: "figure",
       m: 0,
@@ -1567,9 +2526,9 @@ function MediaFrame({
       },
       "aria-label": mediaAlt,
       children: [
-        media ?? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(MediaFallback, {}),
-        media && overlayBackground ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-          import_core28.Box,
+        media ?? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(MediaFallback, {}),
+        media && overlayBackground ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+          import_core40.Box,
           {
             "aria-hidden": true,
             style: {
@@ -1602,7 +2561,7 @@ function EditorialHero({
   classNames
 }) {
   if (loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(LoadingHero, { compact });
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(LoadingHero, { compact });
   }
   const stackAlign = align === "center" ? "center" : "flex-start";
   const textAlign = align === "center" ? "center" : "left";
@@ -1610,15 +2569,15 @@ function EditorialHero({
   const renderedActions = actions.slice(0, 3).map((action, index) => {
     const resolved = resolveActionVariant(action, index, seenPrimary);
     seenPrimary = resolved.seenPrimary;
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(HeroAction, { action, variant: resolved.variant }, `${action.label}-${index}`);
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(HeroAction, { action, variant: resolved.variant }, `${action.label}-${index}`);
   });
-  const textSlot = /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_core28.Stack, { gap: compact ? "md" : "lg", justify: "center", h: "100%", className: classNames?.content, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_core28.Stack, { gap: "sm", align: stackAlign, children: [
-      eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.Text, { size: "sm", fw: 700, c: "dimmed", ta: textAlign, children: eyebrow }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.Title, { order: 1, maw: 760, ta: textAlign, children: title }),
-      description ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.Text, { size: compact ? "md" : "lg", c: "dimmed", maw: 720, ta: textAlign, children: description }) : null
+  const textSlot = /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_core40.Stack, { gap: compact ? "md" : "lg", justify: "center", h: "100%", className: classNames?.content, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_core40.Stack, { gap: "sm", align: stackAlign, children: [
+      eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core40.Text, { size: "sm", fw: 700, c: "dimmed", ta: textAlign, children: eyebrow }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core40.Title, { order: 1, maw: 760, ta: textAlign, children: title }),
+      description ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core40.Text, { size: compact ? "md" : "lg", c: "dimmed", maw: 720, ta: textAlign, children: description }) : null
     ] }),
-    renderedActions.length ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.Box, { className: classNames?.actions, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    renderedActions.length ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core40.Box, { className: classNames?.actions, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
       CtaButtonGroup,
       {
         primary: renderedActions[0],
@@ -1626,8 +2585,8 @@ function EditorialHero({
         tertiary: renderedActions[2]
       }
     ) }) : null,
-    meta.length ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.Group, { gap: "sm", wrap: "wrap", "aria-label": "Supporting details", className: classNames?.meta, children: meta.map((item) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
-      import_core28.Group,
+    meta.length ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core40.Group, { gap: "sm", wrap: "wrap", "aria-label": "Supporting details", className: classNames?.meta, children: meta.map((item) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+      import_core40.Group,
       {
         gap: 6,
         px: "sm",
@@ -1638,17 +2597,17 @@ function EditorialHero({
         },
         children: [
           item.icon,
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.Text, { size: "sm", c: "dimmed", children: item.label })
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core40.Text, { size: "sm", c: "dimmed", children: item.label })
         ]
       },
       item.id
     )) }) : null
   ] });
-  const mediaSlot = error ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(AccentPanel, { tone: "red", variant: "soft-outline", title: "Media unavailable", children: error }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(MediaFrame, { media, mediaAlt, mediaFade, className: classNames?.media });
-  const textCol = /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.Grid.Col, { span: { base: 12, md: 6 }, order: { base: 1, md: mediaPosition === "left" ? 2 : 1 }, children: textSlot });
-  const mediaCol = /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.Grid.Col, { span: { base: 12, md: 6 }, order: { base: 2, md: mediaPosition === "left" ? 1 : 2 }, children: mediaSlot });
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-    import_core28.Paper,
+  const mediaSlot = error ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(AccentPanel, { tone: "red", variant: "soft-outline", title: "Media unavailable", children: error }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(MediaFrame, { media, mediaAlt, mediaFade, className: classNames?.media });
+  const textCol = /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core40.Grid.Col, { span: { base: 12, md: 6 }, order: { base: 1, md: mediaPosition === "left" ? 2 : 1 }, children: textSlot });
+  const mediaCol = /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core40.Grid.Col, { span: { base: 12, md: 6 }, order: { base: 2, md: mediaPosition === "left" ? 1 : 2 }, children: mediaSlot });
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    import_core40.Paper,
     {
       component: "section",
       withBorder: true,
@@ -1656,7 +2615,7 @@ function EditorialHero({
       p: compact ? "lg" : "xl",
       className: classNames?.root,
       style: surfaceVariant === "flat-public" ? { boxShadow: "none" } : void 0,
-      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_core28.Grid, { gutter: compact ? "lg" : "xl", align: "center", children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_core40.Grid, { gutter: compact ? "lg" : "xl", align: "center", children: [
         textCol,
         mediaCol
       ] })
@@ -1665,19 +2624,19 @@ function EditorialHero({
 }
 
 // src/FeatureBand.tsx
-var import_core29 = require("@mantine/core");
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_core41 = require("@mantine/core");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 function FeatureBandSkeleton({
   columns = 3,
   bordered = true,
   variant = "default"
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core29.SimpleGrid, { cols: { base: 1, sm: Math.min(columns, 2), lg: columns }, spacing: "lg", children: Array.from({ length: columns }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core29.Paper, { withBorder: bordered, radius: "lg", p: variant === "compact" ? "md" : "lg", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_core29.Stack, { gap: "md", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core29.Skeleton, { height: variant === "process" ? 28 : 42, width: variant === "process" ? 72 : 42, radius: "xl" }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_core29.Stack, { gap: "xs", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core29.Skeleton, { height: 20, width: "75%", radius: "md" }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core29.Skeleton, { height: 14, width: "100%", radius: "md" }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core29.Skeleton, { height: 14, width: "82%", radius: "md" })
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core41.SimpleGrid, { cols: { base: 1, sm: Math.min(columns, 2), lg: columns }, spacing: "lg", children: Array.from({ length: columns }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core41.Paper, { withBorder: bordered, radius: "lg", p: variant === "compact" ? "md" : "lg", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_core41.Stack, { gap: "md", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core41.Skeleton, { height: variant === "process" ? 28 : 42, width: variant === "process" ? 72 : 42, radius: "xl" }),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_core41.Stack, { gap: "xs", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core41.Skeleton, { height: 20, width: "75%", radius: "md" }),
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core41.Skeleton, { height: 14, width: "100%", radius: "md" }),
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core41.Skeleton, { height: 14, width: "82%", radius: "md" })
     ] })
   ] }) }, index)) });
 }
@@ -1690,10 +2649,10 @@ function FeatureBand({
   variant = "default"
 }) {
   if (loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(FeatureBandSkeleton, { columns, bordered, variant });
+    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(FeatureBandSkeleton, { columns, bordered, variant });
   }
   if (!items.length) {
-    return emptyState ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_jsx_runtime30.Fragment, { children: emptyState }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    return emptyState ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_jsx_runtime43.Fragment, { children: emptyState }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
       EmptyState,
       {
         title: "No supporting details available",
@@ -1701,9 +2660,9 @@ function FeatureBand({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core29.Box, { component: "section", "aria-label": "Supporting features", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core29.SimpleGrid, { cols: { base: 1, sm: Math.min(columns, 2), lg: columns }, spacing: "lg", children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core29.Paper, { withBorder: bordered, radius: "lg", p: variant === "compact" ? "md" : "lg", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_core29.Stack, { gap: "md", children: [
-    variant === "process" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core29.Group, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-      import_core29.Text,
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core41.Box, { component: "section", "aria-label": "Supporting features", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core41.SimpleGrid, { cols: { base: 1, sm: Math.min(columns, 2), lg: columns }, spacing: "lg", children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core41.Paper, { withBorder: bordered, radius: "lg", p: variant === "compact" ? "md" : "lg", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_core41.Stack, { gap: "md", children: [
+    variant === "process" ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core41.Group, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+      import_core41.Text,
       {
         fw: 800,
         size: "sm",
@@ -1715,19 +2674,352 @@ function FeatureBand({
         },
         children: item.stepLabel ?? `Step ${index + 1}`
       }
-    ) }) : item.media ? item.media : item.icon ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core29.Group, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core29.ThemeIcon, { size: "xl", radius: "xl", variant: "light", color: "violet", children: item.icon }) }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core29.Group, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core29.ThemeIcon, { size: "xl", radius: "xl", variant: "light", color: "gray", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GdsIcons.Info, { size: "1.25rem" }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_core29.Stack, { gap: "xs", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core29.Title, { order: 4, children: item.title }),
-      item.description ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core29.Text, { c: "dimmed", children: item.description }) : null,
-      item.meta ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core29.Text, { size: "sm", c: "dimmed", children: item.meta }) : null
+    ) }) : item.media ? item.media : item.icon ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core41.Group, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core41.ThemeIcon, { size: "xl", radius: "xl", variant: "light", color: "violet", children: item.icon }) }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core41.Group, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core41.ThemeIcon, { size: "xl", radius: "xl", variant: "light", color: "gray", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(GdsIcons.Info, { size: "1.25rem" }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_core41.Stack, { gap: "xs", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core41.Title, { order: 4, children: item.title }),
+      item.description ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core41.Text, { c: "dimmed", children: item.description }) : null,
+      item.meta ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core41.Text, { size: "sm", c: "dimmed", children: item.meta }) : null
     ] })
   ] }) }, item.id)) }) });
 }
 
+// src/MapPanel.tsx
+var import_core42 = require("@mantine/core");
+var import_jsx_runtime44 = require("react/jsx-runtime");
+function MapPanel({
+  title,
+  description,
+  actions,
+  loading = false,
+  empty,
+  error,
+  embedTitle,
+  iframeSrc,
+  iframeSandbox = "allow-scripts allow-same-origin allow-popups",
+  renderMap,
+  minHeight = 320
+}) {
+  let body;
+  if (loading) {
+    body = /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+      StateBlock,
+      {
+        variant: "loading",
+        title: "Loading map",
+        description: "The shared map panel is still preparing the embedded surface.",
+        compact: true
+      }
+    );
+  } else if (error) {
+    body = /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(StateBlock, { variant: "error", title: "Map unavailable", description: error, compact: true });
+  } else if (!iframeSrc && !renderMap) {
+    body = /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+      StateBlock,
+      {
+        variant: "empty",
+        title: "No map available",
+        description: empty ?? "Add coordinates or a sanctioned embed source to render this panel.",
+        compact: true
+      }
+    );
+  } else if (renderMap) {
+    body = /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_core42.Box, { style: { minHeight }, children: renderMap() });
+  } else {
+    body = /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_core42.AspectRatio, { ratio: 16 / 9, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+      "iframe",
+      {
+        src: iframeSrc,
+        title: embedTitle ?? "Embedded map",
+        sandbox: iframeSandbox,
+        loading: "lazy",
+        referrerPolicy: "no-referrer-when-downgrade",
+        style: { width: "100%", height: "100%", border: 0, borderRadius: 12 }
+      }
+    ) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_core42.Paper, { withBorder: true, radius: "xl", p: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_core42.Stack, { gap: "md", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_core42.Group, { justify: "space-between", align: "flex-start", gap: "md", wrap: "wrap", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_core42.Stack, { gap: 4, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_core42.Title, { order: 3, children: title }),
+        description ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_core42.Text, { size: "sm", c: "dimmed", children: description }) : null
+      ] }),
+      actions ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ActionBar, { ...actions }) : null
+    ] }),
+    body
+  ] }) });
+}
+
+// src/PublicFlowShell.tsx
+var import_core43 = require("@mantine/core");
+var import_jsx_runtime45 = require("react/jsx-runtime");
+var stageTone = {
+  idle: { label: "Idle", color: "gray" },
+  loading: { label: "Loading", color: "blue" },
+  ready: { label: "Ready", color: "teal" },
+  error: { label: "Error", color: "red" },
+  complete: { label: "Complete", color: "teal" }
+};
+function toActionBar(actions = []) {
+  if (!actions.length) {
+    return void 0;
+  }
+  const ordered = [...actions].sort((left, right) => {
+    const rank = { primary: 0, secondary: 1, tertiary: 2 };
+    return rank[left.priority] - rank[right.priority];
+  });
+  const primary = ordered.find((action) => action.priority === "primary");
+  const secondary = ordered.filter((action) => action.priority === "secondary");
+  const tertiary = ordered.filter((action) => action.priority === "tertiary");
+  return {
+    primary: primary ? {
+      action: primary.action,
+      disabled: primary.disabled,
+      loading: primary.loading,
+      onClick: primary.onClick
+    } : void 0,
+    secondary: secondary.map((action) => ({
+      action: action.action,
+      disabled: action.disabled,
+      loading: action.loading,
+      onClick: action.onClick
+    })),
+    tertiary: tertiary.map((action) => ({
+      action: action.action,
+      disabled: action.disabled,
+      loading: action.loading,
+      onClick: action.onClick
+    }))
+  };
+}
+function PublicFlowShell({
+  stage,
+  eyebrow,
+  exitAction,
+  hardwareSurface,
+  emptyState,
+  errorState
+}) {
+  const tone = stageTone[stage.status];
+  const actionBar = toActionBar(stage.actions);
+  let body = stage.body;
+  if (stage.status === "loading") {
+    body = /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+      StateBlock,
+      {
+        variant: "loading",
+        title: "Preparing flow",
+        description: stage.description ?? "The current public flow stage is still loading."
+      }
+    );
+  } else if (stage.status === "error") {
+    body = errorState ?? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+      StateBlock,
+      {
+        variant: "error",
+        title: "Flow unavailable",
+        description: stage.description ?? "This public flow could not continue safely."
+      }
+    );
+  } else if (!stage.body && !hardwareSurface) {
+    body = emptyState ?? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+      EmptyState,
+      {
+        title: "No stage content available",
+        description: "Add the current flow stage body or a bounded hardware surface to render this contract."
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_core43.Paper, { withBorder: true, radius: "xl", p: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_core43.Stack, { gap: "lg", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_core43.Group, { justify: "space-between", align: "flex-start", gap: "md", wrap: "wrap", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_core43.Stack, { gap: 4, children: [
+        eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_core43.Text, { size: "xs", fw: 700, c: "dimmed", tt: "uppercase", children: eyebrow }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_core43.Group, { gap: "sm", wrap: "wrap", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_core43.Title, { order: 2, children: stage.title }),
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_core43.Badge, { variant: "light", color: tone.color, children: tone.label })
+        ] }),
+        stage.description ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_core43.Text, { size: "sm", c: "dimmed", children: stage.description }) : null
+      ] }),
+      exitAction
+    ] }),
+    stage.notice ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_core43.Text, { size: "sm", c: "dimmed", children: stage.notice }) : null,
+    body,
+    hardwareSurface,
+    stage.aside,
+    actionBar ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(ActionBar, { ...actionBar }) : null
+  ] }) });
+}
+
+// src/PlaybackSurface.tsx
+var import_core44 = require("@mantine/core");
+var import_jsx_runtime46 = require("react/jsx-runtime");
+var stateTone = {
+  loading: { label: "Loading", color: "blue" },
+  ready: { label: "Ready", color: "teal" },
+  playing: { label: "Playing", color: "teal" },
+  empty: { label: "Empty", color: "gray" },
+  error: { label: "Error", color: "red" },
+  degraded: { label: "Degraded", color: "orange" }
+};
+function PlaybackSurface({
+  title,
+  state,
+  media,
+  statusMessage,
+  controls,
+  emptyState,
+  errorState,
+  overlays,
+  mode = "embedded"
+}) {
+  const tone = stateTone[state];
+  let content;
+  if (state === "loading") {
+    content = /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+      StateBlock,
+      {
+        variant: "loading",
+        title: "Loading playback",
+        description: "The playback surface is still preparing timed or fullscreen media."
+      }
+    );
+  } else if (state === "empty") {
+    content = emptyState ?? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+      EmptyState,
+      {
+        title: "No playback content available",
+        description: "Add media assets or a playlist to render this playback surface."
+      }
+    );
+  } else if (state === "error") {
+    content = errorState ?? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+      StateBlock,
+      {
+        variant: "error",
+        title: "Playback unavailable",
+        description: "The playback surface could not render the current media safely."
+      }
+    );
+  } else {
+    content = /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_core44.Stack, { gap: "md", children: [
+      media,
+      overlays
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_core44.Paper, { withBorder: true, radius: "xl", p: "lg", "data-playback-mode": mode, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_core44.Stack, { gap: "md", children: [
+    title || statusMessage || controls ? /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_core44.Group, { justify: "space-between", align: "flex-start", gap: "md", wrap: "wrap", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_core44.Stack, { gap: 4, children: [
+        title ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_core44.Title, { order: 3, children: title }) : null,
+        statusMessage ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_core44.Text, { size: "sm", c: "dimmed", children: statusMessage }) : null
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_core44.Group, { gap: "sm", align: "center", wrap: "wrap", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_core44.Badge, { variant: "light", color: tone.color, children: tone.label }),
+        controls
+      ] })
+    ] }) : null,
+    state === "degraded" ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+      StateBlock,
+      {
+        variant: "info",
+        title: "Playback degraded",
+        description: statusMessage ?? "Playback is continuing with reduced fidelity or recoverable media failures.",
+        compact: true
+      }
+    ) : null,
+    content
+  ] }) });
+}
+
+// src/ShareButtonGroup.tsx
+var import_react7 = require("react");
+var import_core45 = require("@mantine/core");
+var import_jsx_runtime47 = require("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__ */ (0, import_jsx_runtime47.jsx)(import_core45.ActionIcon, { component: "a", href, target: "_blank", rel: "noreferrer", variant: "subtle", size: "lg", "aria-label": label, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Icon, { size: "1rem", stroke: 1.75 }) }) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_core45.ActionIcon, { variant: "subtle", size: "lg", "aria-label": label, onClick, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Icon, { size: "1rem", stroke: 1.75 }) });
+  }
+  return href ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_core45.Button, { component: "a", href, target: "_blank", rel: "noreferrer", variant: "default", leftSection: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Icon, { size: "1rem", stroke: 1.75 }), children: label }) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_core45.Button, { variant: "default", leftSection: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(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] = (0, import_react7.useState)(false);
+  const [shared, setShared] = (0, import_react7.useState)(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__ */ (0, import_jsx_runtime47.jsxs)(import_core45.Stack, { gap: "sm", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_core45.Stack, { gap: 2, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_core45.Text, { fw: 600, children: label }),
+      description ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_core45.Text, { size: "sm", c: "dimmed", children: description }) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_core45.Group, { gap: "sm", wrap: "wrap", children: channels.map((channel) => {
+      if (channel === "copy") {
+        return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ShareAction, { channel, compact, onClick: () => void handleCopy() }, channel);
+      }
+      if (channel === "native") {
+        return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ShareAction, { channel, compact, onClick: () => void handleNativeShare() }, channel);
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ShareAction, { channel, compact, href: hrefs[channel] }, channel);
+    }) }),
+    copied ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_core45.Text, { size: "sm", c: "teal", children: "Link copied." }) : null,
+    shared ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_core45.Text, { size: "sm", c: "teal", children: "Share sheet opened." }) : null
+  ] });
+}
+
 // src/UploadDropzone.tsx
-var import_react4 = require("react");
-var import_core30 = require("@mantine/core");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_react8 = require("react");
+var import_core46 = require("@mantine/core");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 function UploadDropzone({
   title,
   description,
@@ -1737,8 +3029,8 @@ function UploadDropzone({
   actionLabel = "Choose files",
   mode = "panel"
 }) {
-  const inputRef = (0, import_react4.useRef)(null);
-  const [dragging, setDragging] = (0, import_react4.useState)(false);
+  const inputRef = (0, import_react8.useRef)(null);
+  const [dragging, setDragging] = (0, import_react8.useState)(false);
   const UploadIcon = GdsIcons.Upload;
   const forwardFiles = (files) => {
     if (!files?.length || !onFilesSelected) {
@@ -1746,8 +3038,8 @@ function UploadDropzone({
     }
     onFilesSelected(Array.from(files));
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
-    import_core30.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+    import_core46.Box,
     {
       onDragOver: (event) => {
         event.preventDefault();
@@ -1766,7 +3058,7 @@ function UploadDropzone({
         background: dragging ? "var(--mantine-color-violet-light)" : "transparent"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
           "input",
           {
             ref: inputRef,
@@ -1777,11 +3069,11 @@ function UploadDropzone({
             onChange: (event) => forwardFiles(event.currentTarget.files)
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_core30.Stack, { align: mode === "inline" ? "flex-start" : "center", ta: mode === "inline" ? "left" : "center", gap: "sm", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(UploadIcon, { size: "1.5rem" }),
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core30.Text, { fw: 600, children: title }),
-          description ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core30.Text, { size: "sm", c: "dimmed", children: description }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core30.Group, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core30.Button, { variant: "light", onClick: () => inputRef.current?.click(), children: actionLabel }) })
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_core46.Stack, { align: mode === "inline" ? "flex-start" : "center", ta: mode === "inline" ? "left" : "center", gap: "sm", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(UploadIcon, { size: "1.5rem" }),
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_core46.Text, { fw: 600, children: title }),
+          description ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_core46.Text, { size: "sm", c: "dimmed", children: description }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_core46.Group, { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_core46.Button, { variant: "light", onClick: () => inputRef.current?.click(), children: actionLabel }) })
         ] })
       ]
     }
@@ -1789,22 +3081,8 @@ function UploadDropzone({
 }
 
 // src/MediaField.tsx
-var import_core32 = require("@mantine/core");
-
-// src/FormField.tsx
-var import_core31 = require("@mantine/core");
-var import_jsx_runtime32 = require("react/jsx-runtime");
-function FormField({ label, description, error, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core31.Box, { component: "label", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_core31.Stack, { gap: 4, children: [
-    typeof label === "string" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core31.Text, { size: "xs", fw: 600, c: "dimmed", children: label }) : label,
-    description ? typeof description === "string" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core31.Text, { size: "xs", c: "dimmed", children: description }) : description : null,
-    children,
-    error ? typeof error === "string" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core31.Text, { size: "xs", c: "red.7", children: error }) : error : null
-  ] }) });
-}
-
-// src/MediaField.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_core47 = require("@mantine/core");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 var stateLabels = {
   empty: { label: "Empty", color: "gray" },
   selected: { label: "Selected", color: "blue" },
@@ -1832,32 +3110,32 @@ function MediaField({
   mode = "stacked"
 }) {
   const stateBadge = stateLabels[state];
-  const resolvedRemoveAction = removeAction ?? (onRemove ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core32.Button, { type: "button", variant: "light", color: "red", onClick: onRemove, children: "Remove" }) : null);
-  const resolvedResetAction = resetAction ?? (onReset ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core32.Button, { type: "button", variant: "default", onClick: onReset, children: "Reset" }) : null);
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  const resolvedRemoveAction = removeAction ?? (onRemove ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_core47.Button, { type: "button", variant: "light", color: "red", onClick: onRemove, children: "Remove" }) : null);
+  const resolvedResetAction = resetAction ?? (onReset ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_core47.Button, { type: "button", variant: "default", onClick: onReset, children: "Reset" }) : null);
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
     FormField,
     {
       label,
       description,
       error,
-      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core32.Paper, { withBorder: true, radius: "xl", p: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_core32.Stack, { gap: "md", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core32.Group, { justify: "flex-end", align: "center", gap: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_core32.Group, { gap: "xs", justify: "flex-end", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core32.Badge, { variant: "light", color: stateBadge.color, children: stateBadge.label }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_core47.Paper, { withBorder: true, radius: "xl", p: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_core47.Stack, { gap: "md", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_core47.Group, { justify: "flex-end", align: "center", gap: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_core47.Group, { gap: "xs", justify: "flex-end", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_core47.Badge, { variant: "light", color: stateBadge.color, children: stateBadge.label }),
           statusAction
         ] }) }),
         preview ? preview : null,
-        uploadControl || urlInput ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core32.Divider, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_core32.Stack, { gap: "sm", style: mode === "split" ? { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))" } : void 0, children: [
+        uploadControl || urlInput ? /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_core47.Divider, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_core47.Stack, { gap: "sm", style: mode === "split" ? { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))" } : void 0, children: [
             uploadControl,
             urlInput
           ] })
         ] }) : null,
-        value ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core32.Text, { size: "sm", c: "dimmed", style: { wordBreak: "break-all" }, children: value }) : null,
-        helpText ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core32.Text, { size: "sm", c: "dimmed", children: helpText }) : null,
-        policyText ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core32.Text, { size: "sm", c: error ? "red.7" : "dimmed", children: policyText }) : null,
+        value ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_core47.Text, { size: "sm", c: "dimmed", style: { wordBreak: "break-all" }, children: value }) : null,
+        helpText ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_core47.Text, { size: "sm", c: "dimmed", children: helpText }) : null,
+        policyText ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_core47.Text, { size: "sm", c: error ? "red.7" : "dimmed", children: policyText }) : null,
         typeof error !== "string" && error ? error : null,
-        resolvedRemoveAction || resolvedResetAction ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_core32.Group, { gap: "sm", children: [
+        resolvedRemoveAction || resolvedResetAction ? /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_core47.Group, { gap: "sm", children: [
           resolvedResetAction,
           retryAction,
           resolvedRemoveAction
@@ -1868,50 +3146,50 @@ function MediaField({
 }
 
 // src/MediaCard.tsx
-var import_core33 = require("@mantine/core");
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_core48 = require("@mantine/core");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 function MediaCard({ title, image, description, status, overlay, actions = [] }) {
   const EyeIcon = GdsIcons.Eye;
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_core33.Card, { withBorder: true, radius: "lg", padding: "md", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_core33.Card.Section, { pos: "relative", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_core48.Card, { withBorder: true, radius: "lg", padding: "md", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_core48.Card.Section, { pos: "relative", children: [
       image,
-      overlay ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { style: { position: "absolute", inset: 12, display: "flex", justifyContent: "flex-end", alignItems: "flex-start" }, children: overlay }) : null
+      overlay ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { style: { position: "absolute", inset: 12, display: "flex", justifyContent: "flex-end", alignItems: "flex-start" }, children: overlay }) : null
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_core33.Stack, { gap: "sm", mt: "md", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_core33.Group, { justify: "space-between", align: "flex-start", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_core33.Stack, { gap: 4, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_core33.Title, { order: 4, children: title }),
-          description ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_core33.Text, { size: "sm", c: "dimmed", lineClamp: 2, children: description }) : null
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_core48.Stack, { gap: "sm", mt: "md", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_core48.Group, { justify: "space-between", align: "flex-start", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_core48.Stack, { gap: 4, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_core48.Title, { order: 4, children: title }),
+          description ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_core48.Text, { size: "sm", c: "dimmed", lineClamp: 2, children: description }) : null
         ] }),
-        status ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_core33.Badge, { variant: "light", children: status }) : null
+        status ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_core48.Badge, { variant: "light", children: status }) : null
       ] }),
-      actions.length ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_core33.Group, { justify: "flex-end", gap: "xs", children: actions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_core33.ActionIcon, { variant: "light", "aria-label": action.label, onClick: action.onClick, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(EyeIcon, { size: "1rem" }) }, action.label)) }) : null
+      actions.length ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_core48.Group, { justify: "flex-end", gap: "xs", children: actions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_core48.ActionIcon, { variant: "light", "aria-label": action.label, onClick: action.onClick, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(EyeIcon, { size: "1rem" }) }, action.label)) }) : null
     ] })
   ] });
 }
 
 // src/AccessSummary.tsx
-var import_core34 = require("@mantine/core");
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_core49 = require("@mantine/core");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 function AccessSummary({ title, roles, scope, blocked = false, description }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_core34.Card, { withBorder: true, radius: "lg", padding: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_core34.Stack, { gap: "sm", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_core34.Group, { justify: "space-between", align: "center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_core34.Title, { order: 4, children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_core34.Badge, { color: blocked ? "red" : "teal", variant: "light", children: blocked ? "Blocked" : "Allowed" })
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_core49.Card, { withBorder: true, radius: "lg", padding: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_core49.Stack, { gap: "sm", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_core49.Group, { justify: "space-between", align: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_core49.Title, { order: 4, children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_core49.Badge, { color: blocked ? "red" : "teal", variant: "light", children: blocked ? "Blocked" : "Allowed" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_core34.Group, { gap: "xs", children: roles.map((role) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_core34.Badge, { variant: "outline", children: role }, role)) }),
-    scope ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_core34.Text, { size: "sm", c: "dimmed", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_core49.Group, { gap: "xs", children: roles.map((role) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_core49.Badge, { variant: "outline", children: role }, role)) }),
+    scope ? /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_core49.Text, { size: "sm", c: "dimmed", children: [
       "Scope: ",
       scope
     ] }) : null,
-    description ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_core34.Text, { size: "sm", children: description }) : null
+    description ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_core49.Text, { size: "sm", children: description }) : null
   ] }) });
 }
 
 // src/AccessRecoveryPanel.tsx
-var import_core35 = require("@mantine/core");
-var import_gds_theme3 = require("@doneisbetter/gds-theme");
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_core50 = require("@mantine/core");
+var import_gds_theme5 = require("@doneisbetter/gds-theme");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 var stateBlockVariantByState = {
   unauthenticated: "permission",
   "expired-session": "info",
@@ -1980,7 +3258,7 @@ function ActionGroup({
   if (actions.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core35.Group, { gap: "sm", justify: "center", wrap: "wrap", children: actions.map((actionConfig, index) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_core50.Group, { gap: "sm", justify: "center", wrap: "wrap", children: actions.map((actionConfig, index) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
     SemanticButton,
     {
       action: actionConfig.action,
@@ -2006,7 +3284,7 @@ function AccessRecoveryPanel({
   supportAction,
   compact = false
 }) {
-  const { t } = (0, import_gds_theme3.useGdsTranslation)();
+  const { t } = (0, import_gds_theme5.useGdsTranslation)();
   const defaultCopy = defaultCopyByState[state];
   const defaults = defaultActionsForState(state, {
     onRetry,
@@ -2014,14 +3292,14 @@ function AccessRecoveryPanel({
     onBack,
     supportAction
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
     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__ */ (0, import_jsx_runtime36.jsx)(
+      action: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
         ActionGroup,
         {
           primaryAction: primaryAction ?? defaults.primary,
@@ -2034,8 +3312,8 @@ function AccessRecoveryPanel({
 }
 
 // src/PageHeader.tsx
-var import_core36 = require("@mantine/core");
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_core51 = require("@mantine/core");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 function PageHeader({
   title,
   description,
@@ -2046,19 +3324,19 @@ function PageHeader({
 }) {
   const resolvedDescription = description ?? subtitle;
   const eyebrowProps = eyebrowVariant === "ornamental" ? { tt: "uppercase", style: { letterSpacing: "0.12em" } } : {};
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_core36.Group, { justify: "space-between", align: "flex-start", gap: "lg", wrap: "wrap", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_core36.Stack, { gap: "xs", children: [
-      eyebrow && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core36.Text, { size: "xs", fw: 700, c: "dimmed", ...eyebrowProps, children: eyebrow }),
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core36.Title, { order: 1, children: title }),
-      resolvedDescription && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core36.Text, { c: "dimmed", maw: 720, children: resolvedDescription })
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_core51.Group, { justify: "space-between", align: "flex-start", gap: "lg", wrap: "wrap", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_core51.Stack, { gap: "xs", children: [
+      eyebrow && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_core51.Text, { size: "xs", fw: 700, c: "dimmed", ...eyebrowProps, children: eyebrow }),
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_core51.Title, { order: 1, children: title }),
+      resolvedDescription && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_core51.Text, { c: "dimmed", maw: 720, children: resolvedDescription })
     ] }),
-    actions ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core36.Box, { children: actions }) : null
+    actions ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_core51.Box, { children: actions }) : null
   ] });
 }
 
 // src/FilterDrawer.tsx
-var import_core37 = require("@mantine/core");
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_core52 = require("@mantine/core");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 function FilterDrawer({
   opened,
   onClose,
@@ -2074,8 +3352,8 @@ function FilterDrawer({
 }) {
   const resolvedPrimaryAction = applyAction ?? primaryAction;
   const resolvedSecondaryAction = resetAction ?? secondaryAction;
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-    import_core37.Drawer,
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+    import_core52.Drawer,
     {
       opened,
       onClose,
@@ -2083,11 +3361,11 @@ function FilterDrawer({
       position: mode === "bottom-sheet" ? "bottom" : "right",
       size: mode === "bottom-sheet" ? "auto" : "md",
       radius: mode === "bottom-sheet" ? "xl" : void 0,
-      children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_core37.Stack, { gap: "md", children: [
-        description ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core37.Text, { size: "sm", c: "dimmed", children: description }) : null,
+      children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_core52.Stack, { gap: "md", children: [
+        description ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_core52.Text, { size: "sm", c: "dimmed", children: description }) : null,
         children,
-        resolvedPrimaryAction || resolvedSecondaryAction || closeAction ? /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_core37.Group, { justify: "space-between", mt: "md", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_core37.Group, { gap: "sm", children: [
+        resolvedPrimaryAction || resolvedSecondaryAction || closeAction ? /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_core52.Group, { justify: "space-between", mt: "md", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_core52.Group, { gap: "sm", children: [
             closeAction,
             resolvedSecondaryAction
           ] }),
@@ -2099,8 +3377,8 @@ function FilterDrawer({
 }
 
 // src/PlaceholderPanel.tsx
-var import_core38 = require("@mantine/core");
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_core53 = require("@mantine/core");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 function PlaceholderPanel({
   title,
   description,
@@ -2110,16 +3388,16 @@ function PlaceholderPanel({
   mode
 }) {
   if (mode === "live" && children) {
-    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_jsx_runtime39.Fragment, { children });
+    return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_jsx_runtime55.Fragment, { children });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_core38.Card, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_core38.Stack, { gap: "md", children: [
-    badge ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_core38.Badge, { variant: "light", color: "blue", w: "fit-content", children: badge }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_core38.Stack, { gap: "xs", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_core38.Title, { order: 4, children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_core38.Text, { c: "dimmed", children: description })
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_core53.Card, { children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_core53.Stack, { gap: "md", children: [
+    badge ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_core53.Badge, { variant: "light", color: "blue", w: "fit-content", children: badge }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_core53.Stack, { gap: "xs", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_core53.Title, { order: 4, children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_core53.Text, { c: "dimmed", children: description })
     ] }),
-    footer ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_core38.Text, { size: "sm", children: footer }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    footer ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_core53.Text, { size: "sm", children: footer }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
       StateBlock,
       {
         variant: "not-enough-data",
@@ -2132,8 +3410,8 @@ function PlaceholderPanel({
 }
 
 // src/SimpleDataTable.tsx
-var import_core39 = require("@mantine/core");
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_core54 = require("@mantine/core");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 function SimpleDataTable({
   columns,
   rows,
@@ -2144,23 +3422,23 @@ function SimpleDataTable({
   getRowKey
 }) {
   if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(StateBlock, { variant: "error", title: "Unable to load data", description: error, compact: true });
+    return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(StateBlock, { variant: "error", title: "Unable to load data", description: error, compact: true });
   }
   if (loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(StateBlock, { variant: "loading", title: "Loading data", description: "Please wait while the shared dataset is prepared.", compact: true });
+    return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(StateBlock, { variant: "loading", title: "Loading data", description: "Please wait while the shared dataset is prepared.", compact: true });
   }
   if (!rows.length) {
-    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(StateBlock, { variant: "empty", title: emptyTitle, description: emptyDescription, compact: true });
+    return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(StateBlock, { variant: "empty", title: emptyTitle, description: emptyDescription, compact: true });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_core39.ScrollArea, { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_core39.Table, { striped: true, highlightOnHover: true, withTableBorder: true, withColumnBorders: true, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_core39.Table.Thead, { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_core39.Table.Tr, { children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_core39.Table.Th, { children: column.header }, String(column.key))) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_core39.Table.Tbody, { children: rows.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_core39.Table.Tr, { children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_core39.Table.Td, { children: column.render ? column.render(row) : String(row[column.key] ?? "") }, String(column.key))) }, getRowKey ? getRowKey(row, index) : index)) })
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_core54.ScrollArea, { children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_core54.Table, { striped: true, highlightOnHover: true, withTableBorder: true, withColumnBorders: true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_core54.Table.Thead, { children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_core54.Table.Tr, { children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_core54.Table.Th, { children: column.header }, String(column.key))) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_core54.Table.Tbody, { children: rows.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_core54.Table.Tr, { children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_core54.Table.Td, { children: column.render ? column.render(row) : String(row[column.key] ?? "") }, String(column.key))) }, getRowKey ? getRowKey(row, index) : index)) })
   ] }) });
 }
 
 // src/StatsSection.tsx
-var import_core40 = require("@mantine/core");
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_core55 = require("@mantine/core");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 function StatsSection({
   title,
   loading = false,
@@ -2172,11 +3450,11 @@ function StatsSection({
 }) {
   let content = children;
   if (error) {
-    content = /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(StateBlock, { variant: "error", title: "Unable to load statistics", description: error, compact: true });
+    content = /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(StateBlock, { variant: "error", title: "Unable to load statistics", description: error, compact: true });
   } else if (loading) {
-    content = /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(StateBlock, { variant: "loading", title: "Loading statistics", description: "This shared data surface is still synchronizing.", compact: true });
+    content = /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(StateBlock, { variant: "loading", title: "Loading statistics", description: "This shared data surface is still synchronizing.", compact: true });
   } else if (belowThreshold) {
-    content = /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    content = /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
       StateBlock,
       {
         variant: "not-enough-data",
@@ -2186,10 +3464,10 @@ function StatsSection({
       }
     );
   } else if (placeholder) {
-    content = /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(PlaceholderPanel, { ...placeholder, mode: "placeholder" });
+    content = /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(PlaceholderPanel, { ...placeholder, mode: "placeholder" });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_core40.Stack, { gap: "md", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_core40.Title, { order: 3, children: title }),
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_core55.Stack, { gap: "md", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_core55.Title, { order: 3, children: title }),
     content
   ] });
 }
@@ -3501,6 +4779,7 @@ function getGdsMessages(locale) {
   AccentPanel,
   AccessRecoveryPanel,
   AccessSummary,
+  ActionBar,
   ArticleShell,
   AuthShell,
   BrowseSurface,
@@ -3510,6 +4789,8 @@ function getGdsMessages(locale) {
   ConsumerSection,
   CtaButtonGroup,
   DataToolbar,
+  DetailProfileShell,
+  DiscoveryShell,
   DocsCodeBlock,
   DocsPageShell,
   EditorialCard,
@@ -3517,31 +4798,47 @@ function getGdsMessages(locale) {
   EmptyState,
   FeatureBand,
   FilterDrawer,
+  FoodMenuSection,
   FormField,
   GameBoardTile,
   GdsIcons,
   GdsVocabulary,
+  ListingCard,
+  MapPanel,
   MediaCard,
   MediaField,
   MetricCard,
   PageHeader,
   PlaceholderPanel,
+  PlaybackSurface,
   ProductCard,
   ProgressCard,
   PublicBrandFooter,
+  PublicFlowShell,
+  PublicFoodCard,
   PublicNav,
   PublicProductCard,
   PublicShell,
   PublicSiteFooter,
+  ReferenceLinkGrid,
+  ReferenceLocaleNotice,
+  ReferenceSection,
+  ReferenceThemeExplorer,
   SectionPanel,
   SemanticButton,
+  ShareButtonGroup,
+  SidebarNav,
+  SidebarNavItem,
+  SidebarNavSection,
   SimpleDataTable,
+  SocialAuthButtons,
   StateBlock,
   StatsSection,
   StatusBadge,
   ThemeToggle,
   UploadDropzone,
   ar,
+  createGdsVocabularyPack,
   de,
   en,
   es,
@@ -3553,6 +4850,8 @@ function getGdsMessages(locale) {
   he,
   hu,
   it,
+  mergeGdsVocabularyPacks,
   resolveAccentPanelStyles,
+  resolveSemanticActionConfig,
   ru
 });