@doneisbetter/gds-core 2.6.1 → 2.6.4

package/dist/{chunk-6B42ANK7.mjs → chunk-BAS4ZGKL.mjs}

@@ -223,7 +223,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" } },
@@ -239,14 +238,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" } },
@@ -260,12 +257,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" } },
@@ -278,7 +273,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" } },
@@ -298,7 +292,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" } },
@@ -316,35 +309,178 @@ 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 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, packs = []) {
+  const config = resolveSemanticActionConfig(action, packs);
+  return translate ? translate(config.id, config.defaultMessage) : config.defaultMessage;
+}
+
+// src/ChoiceChip.tsx
+import { Badge as Badge2 } from "@mantine/core";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function ChoiceChip({
+  label,
+  active = false,
+  href,
+  onClick,
+  component,
+  ...props
+}) {
+  const sharedProps = {
+    variant: active ? "filled" : "light",
+    size: "sm",
+    radius: "xl",
+    ...props
+  };
+  if (href) {
+    const LinkComponent = component || "a";
+    return /* @__PURE__ */ jsx3(
+      Badge2,
+      {
+        component: LinkComponent,
+        href,
+        "aria-current": active ? "page" : void 0,
+        ...sharedProps,
+        children: label
+      }
+    );
+  }
+  if (onClick || component) {
+    const ButtonComponent = component || "button";
+    return /* @__PURE__ */ jsx3(
+      Badge2,
+      {
+        component: ButtonComponent,
+        type: component ? void 0 : "button",
+        onClick,
+        "aria-pressed": onClick ? active : void 0,
+        ...sharedProps,
+        children: label
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx3(Badge2, { ...sharedProps, children: label });
+}
+
+// src/ActionBar.tsx
+import { ActionIcon, Button, Group, Stack as Stack2 } from "@mantine/core";
+import { jsx as jsx4, jsxs as jsxs2 } from "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__ */ jsx4(
+    Button,
+    {
+      leftSection: /* @__PURE__ */ jsx4(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__ */ jsx4(Stack2, { gap, children: /* @__PURE__ */ jsxs2(Group, { justify: "space-between", align: "center", gap, wrap: "wrap", children: [
+    /* @__PURE__ */ jsxs2(Group, { gap, wrap: "wrap", children: [
+      secondary.map((action) => renderSemanticAction(action, "secondary", vocabularyPacks)),
+      tertiary.map((action) => renderSemanticAction(action, "tertiary", vocabularyPacks))
+    ] }),
+    /* @__PURE__ */ jsxs2(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__ */ jsx4(
+          ActionIcon,
+          {
+            variant: "subtle",
+            size: "lg",
+            "aria-label": ariaLabel ?? getSemanticActionLabel(action, void 0, vocabularyPacks),
+            ...props,
+            children: /* @__PURE__ */ jsx4(Icon, { size: "1rem", stroke: 1.75 })
+          },
+          `icon-${action}`
+        );
+      }),
+      primary ? renderSemanticAction(primary, "primary", vocabularyPacks) : null
+    ] })
+  ] }) });
+}
 
 // src/MetricCard.tsx
-import { Badge as Badge2, Card, Group, Stack as Stack2, Text as Text2, ThemeIcon, Title as Title2 } from "@mantine/core";
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Badge as Badge3, Card, Group as Group2, Stack as Stack3, Text as Text2, ThemeIcon, Title as Title2 } from "@mantine/core";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var trendColors = {
   positive: "teal",
   negative: "red",
   neutral: "gray"
 };
 function MetricCard({ label, value, description, trend, icon, footer }) {
-  return /* @__PURE__ */ jsx3(Card, { withBorder: true, radius: "lg", padding: "lg", children: /* @__PURE__ */ jsxs2(Stack2, { gap: "md", children: [
-    /* @__PURE__ */ jsxs2(Group, { justify: "space-between", align: "flex-start", wrap: "nowrap", children: [
-      /* @__PURE__ */ jsxs2(Stack2, { gap: 4, children: [
-        /* @__PURE__ */ jsx3(Text2, { size: "sm", c: "dimmed", fw: 600, children: label }),
-        /* @__PURE__ */ jsx3(Title2, { order: 3, children: value })
+  return /* @__PURE__ */ jsx5(Card, { withBorder: true, radius: "lg", padding: "lg", children: /* @__PURE__ */ jsxs3(Stack3, { gap: "md", children: [
+    /* @__PURE__ */ jsxs3(Group2, { justify: "space-between", align: "flex-start", wrap: "nowrap", children: [
+      /* @__PURE__ */ jsxs3(Stack3, { gap: 4, children: [
+        /* @__PURE__ */ jsx5(Text2, { size: "sm", c: "dimmed", fw: 600, children: label }),
+        /* @__PURE__ */ jsx5(Title2, { order: 3, children: value })
       ] }),
-      icon ? /* @__PURE__ */ jsx3(ThemeIcon, { variant: "light", size: "xl", radius: "xl", "aria-hidden": true, children: icon }) : null
+      icon ? /* @__PURE__ */ jsx5(ThemeIcon, { variant: "light", size: "xl", radius: "xl", "aria-hidden": true, children: icon }) : null
     ] }),
-    description || trend ? /* @__PURE__ */ jsxs2(Group, { justify: "space-between", align: "center", gap: "sm", children: [
-      description ? /* @__PURE__ */ jsx3(Text2, { size: "sm", c: "dimmed", flex: 1, children: description }) : /* @__PURE__ */ jsx3("span", {}),
-      trend ? /* @__PURE__ */ jsx3(Badge2, { color: trendColors[trend.tone ?? "neutral"], variant: "light", children: trend.label }) : null
+    description || trend ? /* @__PURE__ */ jsxs3(Group2, { justify: "space-between", align: "center", gap: "sm", children: [
+      description ? /* @__PURE__ */ jsx5(Text2, { size: "sm", c: "dimmed", flex: 1, children: description }) : /* @__PURE__ */ jsx5("span", {}),
+      trend ? /* @__PURE__ */ jsx5(Badge3, { color: trendColors[trend.tone ?? "neutral"], variant: "light", children: trend.label }) : null
     ] }) : null,
     footer
   ] }) });
 }
 
 // src/ProgressCard.tsx
-import { Card as Card2, Group as Group2, Progress, Stack as Stack3, Text as Text3, Title as Title3 } from "@mantine/core";
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Card as Card2, Group as Group3, Progress, Stack as Stack4, Text as Text3, Title as Title3 } from "@mantine/core";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 function ProgressCard({
   label,
   value,
@@ -353,31 +489,31 @@ function ProgressCard({
   description,
   action
 }) {
-  return /* @__PURE__ */ jsx4(Card2, { withBorder: true, radius: "lg", padding: "lg", children: /* @__PURE__ */ jsxs3(Stack3, { gap: "md", children: [
-    /* @__PURE__ */ jsxs3(Group2, { justify: "space-between", align: "flex-start", children: [
-      /* @__PURE__ */ jsxs3(Stack3, { gap: 4, children: [
-        /* @__PURE__ */ jsx4(Text3, { size: "sm", c: "dimmed", fw: 600, children: label }),
-        /* @__PURE__ */ jsx4(Title3, { order: 3, children: value })
+  return /* @__PURE__ */ jsx6(Card2, { withBorder: true, radius: "lg", padding: "lg", children: /* @__PURE__ */ jsxs4(Stack4, { gap: "md", children: [
+    /* @__PURE__ */ jsxs4(Group3, { justify: "space-between", align: "flex-start", children: [
+      /* @__PURE__ */ jsxs4(Stack4, { gap: 4, children: [
+        /* @__PURE__ */ jsx6(Text3, { size: "sm", c: "dimmed", fw: 600, children: label }),
+        /* @__PURE__ */ jsx6(Title3, { order: 3, children: value })
       ] }),
       action
     ] }),
-    description ? /* @__PURE__ */ jsx4(Text3, { size: "sm", c: "dimmed", children: description }) : null,
-    /* @__PURE__ */ jsxs3(Stack3, { gap: 6, children: [
-      /* @__PURE__ */ jsxs3(Group2, { justify: "space-between", gap: "sm", children: [
-        /* @__PURE__ */ jsx4(Text3, { size: "sm", fw: 500, children: progressLabel ?? "Progress" }),
-        /* @__PURE__ */ jsxs3(Text3, { size: "sm", c: "dimmed", children: [
+    description ? /* @__PURE__ */ jsx6(Text3, { size: "sm", c: "dimmed", children: description }) : null,
+    /* @__PURE__ */ jsxs4(Stack4, { gap: 6, children: [
+      /* @__PURE__ */ jsxs4(Group3, { justify: "space-between", gap: "sm", children: [
+        /* @__PURE__ */ jsx6(Text3, { size: "sm", fw: 500, children: progressLabel ?? "Progress" }),
+        /* @__PURE__ */ jsxs4(Text3, { size: "sm", c: "dimmed", children: [
           Math.round(progress),
           "%"
         ] })
       ] }),
-      /* @__PURE__ */ jsx4(Progress, { value: progress, radius: "xl", size: "md" })
+      /* @__PURE__ */ jsx6(Progress, { value: progress, radius: "xl", size: "md" })
     ] })
   ] }) });
 }
 
 // src/SectionPanel.tsx
-import { Divider, Group as Group3, Paper, Stack as Stack4, Text as Text4, Title as Title4 } from "@mantine/core";
-import { Fragment, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Divider, Group as Group4, Paper, Stack as Stack5, Text as Text4, Title as Title4 } from "@mantine/core";
+import { Fragment, jsx as jsx7, jsxs as jsxs5 } from "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))",
@@ -393,23 +529,23 @@ function SectionPanel({
   id,
   divided = true
 }) {
-  return /* @__PURE__ */ jsx5(Paper, { id, withBorder: true, radius: "xl", p: "lg", style: { background: toneBackgrounds[tone] }, children: /* @__PURE__ */ jsxs4(Stack4, { gap: "md", children: [
-    title || description || action ? /* @__PURE__ */ jsxs4(Fragment, { children: [
-      /* @__PURE__ */ jsxs4(Group3, { justify: "space-between", align: "flex-start", gap: "md", wrap: "wrap", children: [
-        title || description ? /* @__PURE__ */ jsxs4(Stack4, { gap: 4, children: [
-          title ? /* @__PURE__ */ jsx5(Title4, { order: 3, children: title }) : null,
-          description ? /* @__PURE__ */ jsx5(Text4, { size: "sm", c: "dimmed", children: description }) : null
+  return /* @__PURE__ */ jsx7(Paper, { id, withBorder: true, radius: "xl", p: "lg", style: { background: toneBackgrounds[tone] }, children: /* @__PURE__ */ jsxs5(Stack5, { gap: "md", children: [
+    title || description || action ? /* @__PURE__ */ jsxs5(Fragment, { children: [
+      /* @__PURE__ */ jsxs5(Group4, { justify: "space-between", align: "flex-start", gap: "md", wrap: "wrap", children: [
+        title || description ? /* @__PURE__ */ jsxs5(Stack5, { gap: 4, children: [
+          title ? /* @__PURE__ */ jsx7(Title4, { order: 3, children: title }) : null,
+          description ? /* @__PURE__ */ jsx7(Text4, { size: "sm", c: "dimmed", children: description }) : null
         ] }) : null,
         action
       ] }),
-      divided ? /* @__PURE__ */ jsx5(Divider, {}) : null
+      divided ? /* @__PURE__ */ jsx7(Divider, {}) : null
     ] }) : null,
     children
   ] }) });
 }
 
 // src/ConsumerSection.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 function ConsumerSection({
   title,
   description,
@@ -417,22 +553,22 @@ function ConsumerSection({
   children,
   tone = "default"
 }) {
-  return /* @__PURE__ */ jsx6(SectionPanel, { title, description, action, tone, children });
+  return /* @__PURE__ */ jsx8(SectionPanel, { title, description, action, tone, children });
 }
 
 // src/ConsumerDashboardGrid.tsx
 import { SimpleGrid } from "@mantine/core";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 function ConsumerDashboardGrid({
   children,
   columns = 3
 }) {
-  return /* @__PURE__ */ jsx7(SimpleGrid, { cols: { base: 1, sm: Math.min(columns, 2), lg: columns }, spacing: "lg", children });
+  return /* @__PURE__ */ jsx9(SimpleGrid, { cols: { base: 1, sm: Math.min(columns, 2), lg: columns }, spacing: "lg", children });
 }
 
 // src/EditorialCard.tsx
-import { Anchor, AspectRatio, Badge as Badge3, Box as Box2, Card as Card3, Group as Group4, Stack as Stack5, Text as Text5, Title as Title5 } from "@mantine/core";
-import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Anchor, AspectRatio, Badge as Badge4, Box as Box2, Card as Card3, Group as Group5, Stack as Stack6, Text as Text5, Title as Title5 } from "@mantine/core";
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
 var tonePalette = {
   default: {
     accent: "violet",
@@ -452,7 +588,7 @@ var tonePalette = {
   }
 };
 function EditorialMediaFallback({ compact }) {
-  return /* @__PURE__ */ jsx8(AspectRatio, { ratio: compact ? 16 / 10 : 4 / 3, children: /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx10(AspectRatio, { ratio: compact ? 16 / 10 : 4 / 3, children: /* @__PURE__ */ jsx10(
     Box2,
     {
       style: {
@@ -463,7 +599,7 @@ function EditorialMediaFallback({ compact }) {
         background: "var(--mantine-color-gray-0)",
         borderRadius: "var(--mantine-radius-md)"
       },
-      children: /* @__PURE__ */ jsx8(GdsIcons.Gallery, { size: compact ? "1.5rem" : "2rem" })
+      children: /* @__PURE__ */ jsx10(GdsIcons.Gallery, { size: compact ? "1.5rem" : "2rem" })
     }
   ) });
 }
@@ -486,7 +622,7 @@ function EditorialCard({
   const featured = variant === "featured";
   const palette = tonePalette[tone];
   const interactiveProps = href ? { component: "a", href } : onClick ? { component: "button", onClick, type: "button" } : {};
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     Card3,
     {
       className: classNames?.root,
@@ -501,20 +637,20 @@ function EditorialCard({
         cursor: href || onClick ? "pointer" : "default"
       },
       children: [
-        /* @__PURE__ */ jsx8(Card3.Section, { className: classNames?.media, children: media ?? /* @__PURE__ */ jsx8(EditorialMediaFallback, { compact }) }),
-        /* @__PURE__ */ jsxs5(Stack5, { gap: "md", p: compact ? "md" : "lg", className: classNames?.body, children: [
-          /* @__PURE__ */ jsxs5(Group4, { justify: "space-between", align: "flex-start", gap: "sm", wrap: "wrap", children: [
-            /* @__PURE__ */ jsxs5(Stack5, { gap: 4, flex: 1, children: [
-              eyebrow ? /* @__PURE__ */ jsx8(Text5, { size: "xs", fw: 700, c: "dimmed", children: eyebrow }) : null,
-              /* @__PURE__ */ jsx8(Title5, { order: compact ? 4 : 3, className: classNames?.title, children: title })
+        /* @__PURE__ */ jsx10(Card3.Section, { className: classNames?.media, children: media ?? /* @__PURE__ */ jsx10(EditorialMediaFallback, { compact }) }),
+        /* @__PURE__ */ jsxs6(Stack6, { gap: "md", p: compact ? "md" : "lg", className: classNames?.body, children: [
+          /* @__PURE__ */ jsxs6(Group5, { justify: "space-between", align: "flex-start", gap: "sm", wrap: "wrap", children: [
+            /* @__PURE__ */ jsxs6(Stack6, { gap: 4, flex: 1, children: [
+              eyebrow ? /* @__PURE__ */ jsx10(Text5, { size: "xs", fw: 700, c: "dimmed", children: eyebrow }) : null,
+              /* @__PURE__ */ jsx10(Title5, { order: compact ? 4 : 3, className: classNames?.title, children: title })
             ] }),
-            badge ? typeof badge === "string" ? /* @__PURE__ */ jsx8(Badge3, { color: palette.accent, variant: "light", children: badge }) : badge : null
+            badge ? typeof badge === "string" ? /* @__PURE__ */ jsx10(Badge4, { color: palette.accent, variant: "light", children: badge }) : badge : null
           ] }),
-          description ? /* @__PURE__ */ jsx8(Text5, { size: "sm", c: "dimmed", children: description }) : null,
-          meta ? /* @__PURE__ */ jsx8(Text5, { size: "sm", c: "dimmed", className: classNames?.meta, children: meta }) : null,
-          href || onClick || ctaLabel ? /* @__PURE__ */ jsxs5(Group4, { gap: 6, c: `${palette.accent}.7`, className: classNames?.action, children: [
-            /* @__PURE__ */ jsx8(Text5, { fw: 600, size: "sm", children: ctaLabel }),
-            /* @__PURE__ */ jsx8(
+          description ? /* @__PURE__ */ jsx10(Text5, { size: "sm", c: "dimmed", children: description }) : null,
+          meta ? /* @__PURE__ */ jsx10(Text5, { size: "sm", c: "dimmed", className: classNames?.meta, children: meta }) : null,
+          href || onClick || ctaLabel ? /* @__PURE__ */ jsxs6(Group5, { gap: 6, c: `${palette.accent}.7`, className: classNames?.action, children: [
+            /* @__PURE__ */ jsx10(Text5, { fw: 600, size: "sm", children: ctaLabel }),
+            /* @__PURE__ */ jsx10(
               Anchor,
               {
                 component: "span",
@@ -532,8 +668,8 @@ function EditorialCard({
 }
 
 // src/ProductCard.tsx
-import { Badge as Badge4, Card as Card4, Group as Group5, Menu, Stack as Stack6, Text as Text6, ThemeIcon as ThemeIcon2, Title as Title6, ActionIcon } from "@mantine/core";
-import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Badge as Badge5, Card as Card4, Group as Group6, Menu, Stack as Stack7, Text as Text6, ThemeIcon as ThemeIcon2, Title as Title6, ActionIcon as ActionIcon2 } from "@mantine/core";
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
 function ProductCard({
   title,
   description,
@@ -546,39 +682,39 @@ function ProductCard({
   footer
 }) {
   const MoreIcon = GdsIcons.Menu;
-  return /* @__PURE__ */ jsx9(Card4, { withBorder: true, radius: "lg", padding: "lg", children: /* @__PURE__ */ jsxs6(Stack6, { gap: "md", children: [
+  return /* @__PURE__ */ jsx11(Card4, { withBorder: true, radius: "lg", padding: "lg", children: /* @__PURE__ */ jsxs7(Stack7, { gap: "md", children: [
     media,
-    /* @__PURE__ */ jsxs6(Group5, { justify: "space-between", align: "flex-start", wrap: "nowrap", children: [
-      /* @__PURE__ */ jsxs6(Group5, { align: "flex-start", gap: "sm", wrap: "nowrap", children: [
-        icon ? /* @__PURE__ */ jsx9(ThemeIcon2, { variant: "light", size: "xl", radius: "xl", "aria-hidden": true, children: icon }) : null,
-        /* @__PURE__ */ jsxs6(Stack6, { gap: 4, children: [
-          /* @__PURE__ */ jsx9(Title6, { order: 4, children: title }),
-          description ? /* @__PURE__ */ jsx9(Text6, { size: "sm", c: "dimmed", lineClamp: 3, children: description }) : null
+    /* @__PURE__ */ jsxs7(Group6, { justify: "space-between", align: "flex-start", wrap: "nowrap", children: [
+      /* @__PURE__ */ jsxs7(Group6, { align: "flex-start", gap: "sm", wrap: "nowrap", children: [
+        icon ? /* @__PURE__ */ jsx11(ThemeIcon2, { variant: "light", size: "xl", radius: "xl", "aria-hidden": true, children: icon }) : null,
+        /* @__PURE__ */ jsxs7(Stack7, { gap: 4, children: [
+          /* @__PURE__ */ jsx11(Title6, { order: 4, children: title }),
+          description ? /* @__PURE__ */ jsx11(Text6, { size: "sm", c: "dimmed", lineClamp: 3, children: description }) : null
         ] })
       ] }),
-      /* @__PURE__ */ jsxs6(Group5, { gap: "xs", align: "center", wrap: "nowrap", children: [
-        typeof status === "string" ? /* @__PURE__ */ jsx9(Badge4, { variant: "light", children: status }) : status,
-        secondaryActions.length ? /* @__PURE__ */ jsxs6(Menu, { position: "bottom-end", withinPortal: true, children: [
-          /* @__PURE__ */ jsx9(Menu.Target, { children: /* @__PURE__ */ jsx9(ActionIcon, { variant: "subtle", "aria-label": "More actions", children: /* @__PURE__ */ jsx9(MoreIcon, { size: "1rem" }) }) }),
-          /* @__PURE__ */ jsx9(Menu.Dropdown, { children: secondaryActions.map(
-            (action) => action.href ? /* @__PURE__ */ jsx9(Menu.Item, { component: "a", href: action.href, color: action.color, children: action.label }, action.label) : /* @__PURE__ */ jsx9(Menu.Item, { onClick: action.onClick, color: action.color, children: action.label }, action.label)
+      /* @__PURE__ */ jsxs7(Group6, { gap: "xs", align: "center", wrap: "nowrap", children: [
+        typeof status === "string" ? /* @__PURE__ */ jsx11(Badge5, { variant: "light", children: status }) : status,
+        secondaryActions.length ? /* @__PURE__ */ jsxs7(Menu, { position: "bottom-end", withinPortal: true, children: [
+          /* @__PURE__ */ jsx11(Menu.Target, { children: /* @__PURE__ */ jsx11(ActionIcon2, { variant: "subtle", "aria-label": "More actions", children: /* @__PURE__ */ jsx11(MoreIcon, { size: "1rem" }) }) }),
+          /* @__PURE__ */ jsx11(Menu.Dropdown, { children: secondaryActions.map(
+            (action) => action.href ? /* @__PURE__ */ jsx11(Menu.Item, { component: "a", href: action.href, color: action.color, children: action.label }, action.label) : /* @__PURE__ */ jsx11(Menu.Item, { onClick: action.onClick, color: action.color, children: action.label }, action.label)
           ) })
         ] }) : null
       ] })
     ] }),
-    metadata.length ? /* @__PURE__ */ jsx9(Stack6, { gap: 6, children: metadata.map((item) => /* @__PURE__ */ jsxs6(Group5, { justify: "space-between", gap: "sm", children: [
-      /* @__PURE__ */ jsx9(Text6, { size: "sm", c: "dimmed", children: item.label }),
-      /* @__PURE__ */ jsx9(Text6, { size: "sm", fw: 500, ta: "right", children: item.value })
+    metadata.length ? /* @__PURE__ */ jsx11(Stack7, { gap: 6, children: metadata.map((item) => /* @__PURE__ */ jsxs7(Group6, { justify: "space-between", gap: "sm", children: [
+      /* @__PURE__ */ jsx11(Text6, { size: "sm", c: "dimmed", children: item.label }),
+      /* @__PURE__ */ jsx11(Text6, { size: "sm", fw: 500, ta: "right", children: item.value })
     ] }, item.label)) }) : null,
-    primaryAction ? /* @__PURE__ */ jsx9(Group5, { justify: "space-between", children: primaryAction }) : null,
+    primaryAction ? /* @__PURE__ */ jsx11(Group6, { justify: "space-between", children: primaryAction }) : null,
     footer
   ] }) });
 }
 
 // src/PublicProductCard.tsx
 import { cloneElement, isValidElement } from "react";
-import { AspectRatio as AspectRatio2, Badge as Badge5, Card as Card5, Group as Group6, Skeleton, Stack as Stack7, Text as Text7, ThemeIcon as ThemeIcon3, Title as Title7 } from "@mantine/core";
-import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+import { AspectRatio as AspectRatio2, Badge as Badge6, Card as Card5, Group as Group7, Skeleton, Stack as Stack8, Text as Text7, ThemeIcon as ThemeIcon3, Title as Title7 } from "@mantine/core";
+import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
 var stateConfig = {
   available: { label: "Available", color: "teal" },
   limited: { label: "Limited", color: "yellow" },
@@ -595,7 +731,7 @@ function enhanceAction(action, disabled) {
   });
 }
 function ImageFallback({ compact }) {
-  return /* @__PURE__ */ jsx10(AspectRatio2, { ratio: compact ? 16 / 9 : 4 / 3, children: /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx12(AspectRatio2, { ratio: compact ? 16 / 9 : 4 / 3, children: /* @__PURE__ */ jsx12(
     ThemeIcon3,
     {
       size: "100%",
@@ -603,21 +739,21 @@ function ImageFallback({ compact }) {
       variant: "light",
       color: "gray",
       "aria-label": "No product image available",
-      children: /* @__PURE__ */ jsx10(GdsIcons.Gallery, { size: compact ? "1.5rem" : "2rem" })
+      children: /* @__PURE__ */ jsx12(GdsIcons.Gallery, { size: compact ? "1.5rem" : "2rem" })
     }
   ) });
 }
 function LoadingCard({ compact }) {
-  return /* @__PURE__ */ jsx10(Card5, { withBorder: true, radius: "lg", padding: compact ? "md" : "lg", children: /* @__PURE__ */ jsxs7(Stack7, { gap: "md", children: [
-    /* @__PURE__ */ jsx10(AspectRatio2, { ratio: compact ? 16 / 9 : 4 / 3, children: /* @__PURE__ */ jsx10(Skeleton, { radius: "md" }) }),
-    /* @__PURE__ */ jsxs7(Stack7, { gap: "xs", children: [
-      /* @__PURE__ */ jsx10(Skeleton, { height: 20, radius: "sm", width: "70%" }),
-      /* @__PURE__ */ jsx10(Skeleton, { height: 14, radius: "sm", width: "100%" }),
-      /* @__PURE__ */ jsx10(Skeleton, { height: 14, radius: "sm", width: "85%" })
+  return /* @__PURE__ */ jsx12(Card5, { withBorder: true, radius: "lg", padding: compact ? "md" : "lg", children: /* @__PURE__ */ jsxs8(Stack8, { gap: "md", children: [
+    /* @__PURE__ */ jsx12(AspectRatio2, { ratio: compact ? 16 / 9 : 4 / 3, children: /* @__PURE__ */ jsx12(Skeleton, { radius: "md" }) }),
+    /* @__PURE__ */ jsxs8(Stack8, { gap: "xs", children: [
+      /* @__PURE__ */ jsx12(Skeleton, { height: 20, radius: "sm", width: "70%" }),
+      /* @__PURE__ */ jsx12(Skeleton, { height: 14, radius: "sm", width: "100%" }),
+      /* @__PURE__ */ jsx12(Skeleton, { height: 14, radius: "sm", width: "85%" })
     ] }),
-    /* @__PURE__ */ jsxs7(Group6, { justify: "space-between", align: "center", children: [
-      /* @__PURE__ */ jsx10(Skeleton, { height: 18, radius: "sm", width: 72 }),
-      /* @__PURE__ */ jsx10(Skeleton, { height: 36, radius: "md", width: 120 })
+    /* @__PURE__ */ jsxs8(Group7, { justify: "space-between", align: "center", children: [
+      /* @__PURE__ */ jsx12(Skeleton, { height: 18, radius: "sm", width: 72 }),
+      /* @__PURE__ */ jsx12(Skeleton, { height: 36, radius: "md", width: 120 })
     ] })
   ] }) });
 }
@@ -640,7 +776,7 @@ function PublicProductCard({
   disabled = false
 }) {
   if (loading) {
-    return /* @__PURE__ */ jsx10(LoadingCard, { compact });
+    return /* @__PURE__ */ jsx12(LoadingCard, { compact });
   }
   const isActionDisabled = disabled || state === "sold-out";
   const resolvedPrimaryAction = enhanceAction(primaryAction, isActionDisabled);
@@ -653,43 +789,309 @@ function PublicProductCard({
   const pickupHelper = helperKind === "pickup" ? helperText : pickupNote;
   const inventoryHelper = helperKind === "inventory" ? helperText : inventoryNote;
   const hasSupportingRegion = Boolean(price || supportingHelper || pickupHelper || inventoryHelper);
-  return /* @__PURE__ */ jsx10(Card5, { withBorder: true, radius: "lg", padding: compact ? "md" : "lg", children: /* @__PURE__ */ jsxs7(Stack7, { gap: compact ? "sm" : "md", children: [
-    image ?? /* @__PURE__ */ jsx10(ImageFallback, { compact }),
-    /* @__PURE__ */ jsxs7(Group6, { justify: "space-between", align: "flex-start", wrap: "nowrap", gap: "sm", children: [
-      /* @__PURE__ */ jsxs7(Stack7, { gap: 4, style: { minWidth: 0, flex: 1 }, children: [
-        /* @__PURE__ */ jsx10(Title7, { order: compact ? 5 : 4, lineClamp: 2, children: title }),
-        description ? /* @__PURE__ */ jsx10(Text7, { size: "sm", c: "dimmed", lineClamp: compact ? 2 : 3, children: description }) : null
+  return /* @__PURE__ */ jsx12(Card5, { withBorder: true, radius: "lg", padding: compact ? "md" : "lg", children: /* @__PURE__ */ jsxs8(Stack8, { gap: compact ? "sm" : "md", children: [
+    image ?? /* @__PURE__ */ jsx12(ImageFallback, { compact }),
+    /* @__PURE__ */ jsxs8(Group7, { justify: "space-between", align: "flex-start", wrap: "nowrap", gap: "sm", children: [
+      /* @__PURE__ */ jsxs8(Stack8, { gap: 4, style: { minWidth: 0, flex: 1 }, children: [
+        /* @__PURE__ */ jsx12(Title7, { order: compact ? 5 : 4, lineClamp: 2, children: title }),
+        description ? /* @__PURE__ */ jsx12(Text7, { size: "sm", c: "dimmed", lineClamp: compact ? 2 : 3, children: description }) : null
       ] }),
-      /* @__PURE__ */ jsx10(Badge5, { variant: "light", color: stateBadge.color, children: stateBadge.label })
+      /* @__PURE__ */ jsx12(Badge6, { variant: "light", color: stateBadge.color, children: stateBadge.label })
     ] }),
-    hasSupportingRegion ? /* @__PURE__ */ jsxs7(Group6, { justify: "space-between", align: "flex-end", gap: "sm", wrap: "nowrap", children: [
-      /* @__PURE__ */ jsxs7(Stack7, { gap: 2, style: { minWidth: 0, flex: 1 }, children: [
-        price ? /* @__PURE__ */ jsx10(Text7, { fw: 700, size: compact ? "md" : "lg", children: price }) : null,
-        supportingHelper ? /* @__PURE__ */ jsx10(Text7, { size: "xs", c: "dimmed", children: supportingHelper }) : null
+    hasSupportingRegion ? /* @__PURE__ */ jsxs8(Group7, { justify: "space-between", align: "flex-end", gap: "sm", wrap: "nowrap", children: [
+      /* @__PURE__ */ jsxs8(Stack8, { gap: 2, style: { minWidth: 0, flex: 1 }, children: [
+        price ? /* @__PURE__ */ jsx12(Text7, { fw: 700, size: compact ? "md" : "lg", children: price }) : null,
+        supportingHelper ? /* @__PURE__ */ jsx12(Text7, { size: "xs", c: "dimmed", children: supportingHelper }) : null
       ] }),
       resolvedPrimaryAction
-    ] }) : resolvedPrimaryAction ? /* @__PURE__ */ jsx10(Group6, { justify: "flex-end", children: resolvedPrimaryAction }) : null,
-    pickupHelper || inventoryHelper || metadata.length ? /* @__PURE__ */ jsxs7(Stack7, { gap: 6, children: [
-      pickupHelper ? /* @__PURE__ */ jsxs7(Group6, { justify: "space-between", gap: "sm", children: [
-        /* @__PURE__ */ jsx10(Text7, { size: "sm", c: "dimmed", children: "Pickup" }),
-        /* @__PURE__ */ jsx10(Text7, { size: "sm", fw: 500, ta: "right", children: pickupHelper })
+    ] }) : resolvedPrimaryAction ? /* @__PURE__ */ jsx12(Group7, { justify: "flex-end", children: resolvedPrimaryAction }) : null,
+    pickupHelper || inventoryHelper || metadata.length ? /* @__PURE__ */ jsxs8(Stack8, { gap: 6, children: [
+      pickupHelper ? /* @__PURE__ */ jsxs8(Group7, { justify: "space-between", gap: "sm", children: [
+        /* @__PURE__ */ jsx12(Text7, { size: "sm", c: "dimmed", children: "Pickup" }),
+        /* @__PURE__ */ jsx12(Text7, { size: "sm", fw: 500, ta: "right", children: pickupHelper })
       ] }) : null,
-      inventoryHelper ? /* @__PURE__ */ jsxs7(Group6, { justify: "space-between", gap: "sm", children: [
-        /* @__PURE__ */ jsx10(Text7, { size: "sm", c: "dimmed", children: "Availability" }),
-        /* @__PURE__ */ jsx10(Text7, { size: "sm", fw: 500, ta: "right", children: inventoryHelper })
+      inventoryHelper ? /* @__PURE__ */ jsxs8(Group7, { justify: "space-between", gap: "sm", children: [
+        /* @__PURE__ */ jsx12(Text7, { size: "sm", c: "dimmed", children: "Availability" }),
+        /* @__PURE__ */ jsx12(Text7, { size: "sm", fw: 500, ta: "right", children: inventoryHelper })
       ] }) : null,
-      metadata.map((item) => /* @__PURE__ */ jsxs7(Group6, { justify: "space-between", gap: "sm", children: [
-        /* @__PURE__ */ jsx10(Text7, { size: "sm", c: "dimmed", children: item.label }),
-        /* @__PURE__ */ jsx10(Text7, { size: "sm", fw: 500, ta: "right", children: item.value })
+      metadata.map((item) => /* @__PURE__ */ jsxs8(Group7, { justify: "space-between", gap: "sm", children: [
+        /* @__PURE__ */ jsx12(Text7, { size: "sm", c: "dimmed", children: item.label }),
+        /* @__PURE__ */ jsx12(Text7, { size: "sm", fw: 500, ta: "right", children: item.value })
       ] }, item.label))
     ] }) : null,
-    resolvedSecondaryAction ? /* @__PURE__ */ jsx10(Group6, { justify: "flex-end", children: resolvedSecondaryAction }) : null
+    resolvedSecondaryAction ? /* @__PURE__ */ jsx12(Group7, { justify: "flex-end", children: resolvedSecondaryAction }) : null
+  ] }) });
+}
+
+// src/PublicFoodCard.tsx
+import { cloneElement as cloneElement2, isValidElement as isValidElement2 } from "react";
+import { AspectRatio as AspectRatio3, Badge as Badge7, Card as Card6, Group as Group8, Skeleton as Skeleton2, Stack as Stack9, Text as Text8, ThemeIcon as ThemeIcon4, Title as Title8 } from "@mantine/core";
+import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+var ratioMap = {
+  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 (!isValidElement2(action)) {
+    return action;
+  }
+  return cloneElement2(action, {
+    disabled: disabled || Boolean(action.props.disabled),
+    "aria-disabled": disabled || void 0
+  });
+}
+function FoodImageFallback({ mediaRatio }) {
+  return /* @__PURE__ */ jsx13(AspectRatio3, { ratio: ratioMap[mediaRatio], children: /* @__PURE__ */ jsx13(ThemeIcon4, { size: "100%", radius: "md", variant: "light", color: "gray", "aria-label": "No food image available", children: /* @__PURE__ */ jsx13(GdsIcons.Gallery, { size: "2rem" }) }) });
+}
+function LoadingFoodCard({ mediaRatio }) {
+  return /* @__PURE__ */ jsx13(Card6, { withBorder: true, radius: "lg", padding: "lg", children: /* @__PURE__ */ jsxs9(Stack9, { gap: "md", children: [
+    /* @__PURE__ */ jsx13(AspectRatio3, { ratio: ratioMap[mediaRatio], children: /* @__PURE__ */ jsx13(Skeleton2, { radius: "md" }) }),
+    /* @__PURE__ */ jsxs9(Stack9, { gap: "xs", children: [
+      /* @__PURE__ */ jsx13(Skeleton2, { height: 20, radius: "sm", width: "72%" }),
+      /* @__PURE__ */ jsx13(Skeleton2, { height: 14, radius: "sm", width: "96%" }),
+      /* @__PURE__ */ jsx13(Skeleton2, { height: 14, radius: "sm", width: "78%" })
+    ] }),
+    /* @__PURE__ */ jsxs9(Group8, { justify: "space-between", align: "center", children: [
+      /* @__PURE__ */ jsx13(Skeleton2, { height: 18, radius: "sm", width: 96 }),
+      /* @__PURE__ */ jsx13(Skeleton2, { 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__ */ jsx13(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__ */ jsx13(Card6, { withBorder: true, radius: "lg", padding: "lg", children: /* @__PURE__ */ jsxs9(Stack9, { gap: "md", children: [
+    image ?? /* @__PURE__ */ jsx13(FoodImageFallback, { mediaRatio }),
+    markers.length > 0 || quantityHint ? /* @__PURE__ */ jsxs9(Group8, { justify: "space-between", align: "center", wrap: "wrap", gap: "xs", children: [
+      /* @__PURE__ */ jsx13(Group8, { gap: "xs", wrap: "wrap", children: markers.map((marker) => /* @__PURE__ */ jsx13(Badge7, { variant: "light", color: markerToneMap[marker.tone ?? "default"], children: marker.label }, marker.id)) }),
+      quantityHint ? /* @__PURE__ */ jsx13(Text8, { size: "xs", fw: 600, c: "dimmed", children: quantityHint }) : null
+    ] }) : null,
+    /* @__PURE__ */ jsxs9(Group8, { justify: "space-between", align: "flex-start", gap: "sm", wrap: "nowrap", children: [
+      /* @__PURE__ */ jsxs9(Stack9, { gap: 4, style: { minWidth: 0, flex: 1 }, children: [
+        /* @__PURE__ */ jsx13(Title8, { order: 4, lineClamp: 2, children: title }),
+        description ? /* @__PURE__ */ jsx13(Text8, { size: "sm", c: "dimmed", lineClamp: 3, children: description }) : null
+      ] }),
+      /* @__PURE__ */ jsx13(Badge7, { variant: "light", color: stateBadge.color, children: stateBadge.label })
+    ] }),
+    /* @__PURE__ */ jsxs9(Group8, { justify: "space-between", align: "flex-end", gap: "sm", wrap: "nowrap", children: [
+      /* @__PURE__ */ jsxs9(Stack9, { gap: 2, style: { minWidth: 0, flex: 1 }, children: [
+        price ? /* @__PURE__ */ jsx13(Text8, { fw: 800, size: "lg", children: price }) : null,
+        priceNote ? /* @__PURE__ */ jsx13(Text8, { size: "xs", c: "dimmed", children: priceNote }) : null,
+        helperText ? /* @__PURE__ */ jsx13(Text8, { size: "sm", c: "dimmed", children: helperText }) : null
+      ] }),
+      resolvedPrimaryAction
+    ] }),
+    pickupNote || freshnessNote || metadata.length > 0 ? /* @__PURE__ */ jsxs9(Stack9, { gap: 6, children: [
+      pickupNote ? /* @__PURE__ */ jsxs9(Group8, { justify: "space-between", align: "flex-start", gap: "sm", children: [
+        /* @__PURE__ */ jsx13(Text8, { size: "sm", c: "dimmed", children: "Pickup" }),
+        /* @__PURE__ */ jsx13(Text8, { size: "sm", fw: 500, ta: "right", children: pickupNote })
+      ] }) : null,
+      freshnessNote ? /* @__PURE__ */ jsxs9(Group8, { justify: "space-between", align: "flex-start", gap: "sm", children: [
+        /* @__PURE__ */ jsx13(Text8, { size: "sm", c: "dimmed", children: "Freshness" }),
+        /* @__PURE__ */ jsx13(Text8, { size: "sm", fw: 500, ta: "right", children: freshnessNote })
+      ] }) : null,
+      metadata.map((item) => /* @__PURE__ */ jsx13(Group8, { justify: "space-between", align: "flex-start", gap: "sm", children: /* @__PURE__ */ jsxs9(Group8, { gap: "xs", wrap: "nowrap", children: [
+        item.icon,
+        /* @__PURE__ */ jsx13(Text8, { size: "sm", c: "dimmed", children: item.label })
+      ] }) }, item.id))
+    ] }) : null,
+    resolvedSecondaryAction ? /* @__PURE__ */ jsx13(Group8, { justify: "flex-end", children: resolvedSecondaryAction }) : null
+  ] }) });
+}
+
+// src/FoodMenuSection.tsx
+import { Box as Box3, Group as Group9, SimpleGrid as SimpleGrid2, Stack as Stack10, Text as Text9, Title as Title9 } from "@mantine/core";
+import { Fragment as Fragment2, jsx as jsx14, jsxs as jsxs10 } from "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__ */ jsx14(Fragment2, { children: emptyState }) : /* @__PURE__ */ jsx14(
+      EmptyState,
+      {
+        title: "No active menu available",
+        description: "Publish grouped menu categories here when the current weekly or seasonal menu is ready."
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx14(Box3, { component: "section", "aria-label": typeof title === "string" ? title : "Food menu section", children: /* @__PURE__ */ jsxs10(Stack10, { gap: "xl", children: [
+    /* @__PURE__ */ jsxs10(Group9, { justify: "space-between", align: "flex-start", gap: "md", wrap: "wrap", children: [
+      /* @__PURE__ */ jsxs10(Stack10, { gap: 4, children: [
+        eyebrow ? /* @__PURE__ */ jsx14(Text9, { size: "xs", fw: 700, c: "dimmed", tt: "uppercase", children: eyebrow }) : null,
+        /* @__PURE__ */ jsx14(Title9, { order: 2, children: title }),
+        description ? /* @__PURE__ */ jsx14(Text9, { size: "sm", c: "dimmed", maw: 760, children: description }) : null,
+        sectionNote ? /* @__PURE__ */ jsx14(Text9, { size: "sm", c: "dimmed", children: sectionNote }) : null
+      ] }),
+      action
+    ] }),
+    /* @__PURE__ */ jsx14(Stack10, { gap: "xl", children: visibleCategories.map((category) => /* @__PURE__ */ jsxs10(Stack10, { gap: "md", children: [
+      /* @__PURE__ */ jsxs10(Stack10, { gap: 4, children: [
+        /* @__PURE__ */ jsx14(Title9, { order: 3, children: category.title }),
+        category.description ? /* @__PURE__ */ jsx14(Text9, { size: "sm", c: "dimmed", children: category.description }) : null,
+        category.helperNote ? /* @__PURE__ */ jsx14(Text9, { size: "sm", c: "dimmed", children: category.helperNote }) : null
+      ] }),
+      category.items.length ? /* @__PURE__ */ jsx14(SimpleGrid2, { cols: { base: 1, sm: Math.min(columns, 2), lg: columns }, spacing: "lg", children: category.items.map((item) => /* @__PURE__ */ jsx14(PublicFoodCard, { ...item }, item.id)) }) : /* @__PURE__ */ jsx14(
+        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/ListingCard.tsx
+import { ActionIcon as ActionIcon3, AspectRatio as AspectRatio4, Badge as Badge8, Card as Card7, Group as Group10, Stack as Stack11, Text as Text10, ThemeIcon as ThemeIcon5, Title as Title10 } from "@mantine/core";
+import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+var ratioMap2 = {
+  "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__ */ jsx15(AspectRatio4, { ratio: ratioMap2[mediaRatio], children: /* @__PURE__ */ jsx15(
+    ThemeIcon5,
+    {
+      size: "100%",
+      radius: "md",
+      variant: "light",
+      color: "gray",
+      "aria-label": "No listing image available",
+      children: /* @__PURE__ */ jsx15(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__ */ jsx15(
+      ActionIcon3,
+      {
+        component: "a",
+        href: affordance.href,
+        variant: "subtle",
+        size: "lg",
+        "aria-label": label,
+        disabled: affordance.disabled,
+        children: /* @__PURE__ */ jsx15(Icon, { size: "1rem", stroke: 1.75 })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx15(
+    ActionIcon3,
+    {
+      variant: "subtle",
+      size: "lg",
+      "aria-label": label,
+      onClick: affordance.onClick,
+      disabled: affordance.disabled,
+      children: /* @__PURE__ */ jsx15(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__ */ jsx15(Text10, { component: "a", href, inherit: true, td: "none", children: title }) : title;
+  return /* @__PURE__ */ jsx15(Card7, { withBorder: true, radius: "lg", padding: compact ? "md" : "lg", children: /* @__PURE__ */ jsxs11(Stack11, { gap: compact ? "sm" : "md", children: [
+    image ?? /* @__PURE__ */ jsx15(ListingImageFallback, { mediaRatio }),
+    featured || sponsoredDisclosure ? /* @__PURE__ */ jsxs11(Group10, { justify: "space-between", gap: "sm", wrap: "wrap", children: [
+      featured ? /* @__PURE__ */ jsx15(Badge8, { variant: "light", color: "violet", children: "Featured" }) : /* @__PURE__ */ jsx15("span", {}),
+      sponsoredDisclosure ? /* @__PURE__ */ jsx15(Text10, { size: "xs", c: "dimmed", children: sponsoredDisclosure }) : null
+    ] }) : null,
+    /* @__PURE__ */ jsxs11(Stack11, { gap: 4, children: [
+      /* @__PURE__ */ jsx15(Title10, { order: compact ? 5 : 4, lineClamp: 2, children: titleContent }),
+      description ? /* @__PURE__ */ jsx15(Text10, { size: "sm", c: "dimmed", lineClamp: compact ? 2 : 3, children: description }) : null
+    ] }),
+    metadata.length ? /* @__PURE__ */ jsx15(Stack11, { gap: "xs", children: metadata.map((item) => /* @__PURE__ */ jsxs11(Group10, { justify: "space-between", align: "flex-start", gap: "sm", wrap: "nowrap", children: [
+      /* @__PURE__ */ jsxs11(Group10, { gap: "xs", wrap: "nowrap", style: { minWidth: 0, flex: 1 }, children: [
+        item.icon,
+        /* @__PURE__ */ jsx15(Text10, { size: "sm", c: item.tone ? toneColorMap[item.tone] : "dimmed", lineClamp: 1, children: item.label })
+      ] }),
+      item.value ? /* @__PURE__ */ jsx15(Text10, { size: "sm", fw: 500, ta: "right", children: item.value }) : null
+    ] }, item.id)) }) : null,
+    /* @__PURE__ */ jsxs11(Group10, { justify: "space-between", align: "center", gap: "sm", wrap: "wrap", children: [
+      /* @__PURE__ */ jsx15(Stack11, { gap: 2, style: { minWidth: 0, flex: 1 }, children: price ? /* @__PURE__ */ jsx15(Text10, { fw: 700, size: compact ? "md" : "lg", children: price }) : null }),
+      /* @__PURE__ */ jsxs11(Group10, { gap: "xs", wrap: "nowrap", justify: "flex-end", style: { marginInlineStart: "auto" }, children: [
+        saveAction ? /* @__PURE__ */ jsx15(ListingAffordance, { affordance: saveAction }) : null,
+        shareAction ? /* @__PURE__ */ jsx15(ListingAffordance, { affordance: shareAction }) : null,
+        primaryAction
+      ] })
+    ] })
   ] }) });
 }
 
 // src/DataToolbar.tsx
-import { Badge as Badge6, Group as Group7, Stack as Stack8 } from "@mantine/core";
-import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Badge as Badge9, Group as Group11, Stack as Stack12 } from "@mantine/core";
+import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
 function DataToolbar({
   searchSlot,
   filterSlot,
@@ -698,20 +1100,20 @@ function DataToolbar({
   createAction,
   activeFilters = []
 }) {
-  return /* @__PURE__ */ jsxs8(Stack8, { gap: "sm", children: [
-    /* @__PURE__ */ jsxs8(Group7, { justify: "space-between", align: "flex-start", gap: "sm", children: [
-      /* @__PURE__ */ jsxs8(Group7, { flex: 1, align: "flex-start", gap: "sm", children: [
+  return /* @__PURE__ */ jsxs12(Stack12, { gap: "sm", children: [
+    /* @__PURE__ */ jsxs12(Group11, { justify: "space-between", align: "flex-start", gap: "sm", children: [
+      /* @__PURE__ */ jsxs12(Group11, { flex: 1, align: "flex-start", gap: "sm", children: [
         searchSlot,
         filterSlot,
         sortSlot
       ] }),
-      /* @__PURE__ */ jsxs8(Group7, { gap: "sm", children: [
+      /* @__PURE__ */ jsxs12(Group11, { gap: "sm", children: [
         resetAction,
         createAction
       ] })
     ] }),
-    activeFilters.length ? /* @__PURE__ */ jsx11(Group7, { gap: "xs", children: activeFilters.map((filter) => /* @__PURE__ */ jsx11(
-      Badge6,
+    activeFilters.length ? /* @__PURE__ */ jsx16(Group11, { gap: "xs", children: activeFilters.map((filter) => /* @__PURE__ */ jsx16(
+      Badge9,
       {
         variant: "light",
         rightSection: filter.onRemove ? "\xD7" : void 0,
@@ -725,17 +1127,17 @@ function DataToolbar({
 }
 
 // src/StateBlock.tsx
-import { Loader, Stack as Stack9, Text as Text8, ThemeIcon as ThemeIcon4, Title as Title8 } from "@mantine/core";
-import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Loader, Stack as Stack13, Text as Text11, ThemeIcon as ThemeIcon6, Title as Title11 } from "@mantine/core";
+import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
 var variantConfig = {
-  loading: { color: "violet", icon: /* @__PURE__ */ jsx12(Loader, { size: "sm" }) },
-  empty: { color: "gray", icon: /* @__PURE__ */ jsx12(GdsIcons.Inbox, { size: "1.1rem" }) },
-  error: { color: "red", icon: /* @__PURE__ */ jsx12(GdsIcons.Danger, { size: "1.1rem" }) },
-  permission: { color: "orange", icon: /* @__PURE__ */ jsx12(GdsIcons.Verify, { size: "1.1rem" }) },
-  disabled: { color: "gray", icon: /* @__PURE__ */ jsx12(GdsIcons.Toggle, { size: "1.1rem" }) },
-  success: { color: "teal", icon: /* @__PURE__ */ jsx12(GdsIcons.Success, { size: "1.1rem" }) },
-  info: { color: "blue", icon: /* @__PURE__ */ jsx12(GdsIcons.Info, { size: "1.1rem" }) },
-  "not-enough-data": { color: "yellow", icon: /* @__PURE__ */ jsx12(GdsIcons.Analytics, { size: "1.1rem" }) }
+  loading: { color: "violet", icon: /* @__PURE__ */ jsx17(Loader, { size: "sm" }) },
+  empty: { color: "gray", icon: /* @__PURE__ */ jsx17(GdsIcons.Inbox, { size: "1.1rem" }) },
+  error: { color: "red", icon: /* @__PURE__ */ jsx17(GdsIcons.Danger, { size: "1.1rem" }) },
+  permission: { color: "orange", icon: /* @__PURE__ */ jsx17(GdsIcons.Verify, { size: "1.1rem" }) },
+  disabled: { color: "gray", icon: /* @__PURE__ */ jsx17(GdsIcons.Toggle, { size: "1.1rem" }) },
+  success: { color: "teal", icon: /* @__PURE__ */ jsx17(GdsIcons.Success, { size: "1.1rem" }) },
+  info: { color: "blue", icon: /* @__PURE__ */ jsx17(GdsIcons.Info, { size: "1.1rem" }) },
+  "not-enough-data": { color: "yellow", icon: /* @__PURE__ */ jsx17(GdsIcons.Analytics, { size: "1.1rem" }) }
 };
 function StateBlock({
   variant,
@@ -746,8 +1148,8 @@ function StateBlock({
   compact = false
 }) {
   const config = variantConfig[variant];
-  return /* @__PURE__ */ jsxs9(
-    Stack9,
+  return /* @__PURE__ */ jsxs13(
+    Stack13,
     {
       align: compact ? "flex-start" : "center",
       justify: "center",
@@ -755,10 +1157,10 @@ function StateBlock({
       py: compact ? "md" : "xl",
       ta: compact ? "left" : "center",
       children: [
-        /* @__PURE__ */ jsx12(ThemeIcon4, { variant: "light", color: config.color, size: compact ? "lg" : "xl", radius: "xl", children: icon ?? config.icon }),
-        /* @__PURE__ */ jsxs9(Stack9, { gap: 6, align: compact ? "flex-start" : "center", children: [
-          /* @__PURE__ */ jsx12(Title8, { order: compact ? 4 : 3, children: title }),
-          description ? /* @__PURE__ */ jsx12(Text8, { c: "dimmed", maw: compact ? void 0 : 480, children: description }) : null
+        /* @__PURE__ */ jsx17(ThemeIcon6, { variant: "light", color: config.color, size: compact ? "lg" : "xl", radius: "xl", children: icon ?? config.icon }),
+        /* @__PURE__ */ jsxs13(Stack13, { gap: 6, align: compact ? "flex-start" : "center", children: [
+          /* @__PURE__ */ jsx17(Title11, { order: compact ? 4 : 3, children: title }),
+          description ? /* @__PURE__ */ jsx17(Text11, { c: "dimmed", maw: compact ? void 0 : 480, children: description }) : null
         ] }),
         action
       ]
@@ -767,8 +1169,8 @@ function StateBlock({
 }
 
 // src/BrowseSurface.tsx
-import { Badge as Badge7, Box as Box3, Button, Group as Group8, Paper as Paper2, SimpleGrid as SimpleGrid2, Stack as Stack10, Text as Text9, Title as Title9 } from "@mantine/core";
-import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Badge as Badge10, Box as Box4, Button as Button2, Group as Group12, Paper as Paper2, SimpleGrid as SimpleGrid3, Stack as Stack14, Text as Text12, Title as Title12 } from "@mantine/core";
+import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
 function BrowseSurface({
   eyebrow,
   title,
@@ -802,22 +1204,22 @@ function BrowseSurface({
   }));
   let body = content;
   if (loading) {
-    body = /* @__PURE__ */ jsx13(StateBlock, { variant: "loading", title: loadingTitle, description: loadingDescription, compact: true });
+    body = /* @__PURE__ */ jsx18(StateBlock, { variant: "loading", title: loadingTitle, description: loadingDescription, compact: true });
   } else if (error) {
-    body = /* @__PURE__ */ jsx13(StateBlock, { variant: "error", title: errorTitle, description: error, action: errorAction ?? emptyAction, compact: true });
+    body = /* @__PURE__ */ jsx18(StateBlock, { variant: "error", title: errorTitle, description: error, action: errorAction ?? emptyAction, compact: true });
   } else if (empty) {
-    body = /* @__PURE__ */ jsx13(StateBlock, { variant: "empty", title: emptyTitle, description: emptyDescription, action: emptyAction, compact: true });
+    body = /* @__PURE__ */ jsx18(StateBlock, { variant: "empty", title: emptyTitle, description: emptyDescription, action: emptyAction, compact: true });
   }
-  return /* @__PURE__ */ jsxs10(Stack10, { gap: "lg", children: [
-    /* @__PURE__ */ jsx13(Paper2, { withBorder: true, radius: "xl", p: "xl", children: /* @__PURE__ */ jsxs10(Stack10, { gap: "lg", children: [
-      /* @__PURE__ */ jsxs10(Group8, { justify: "space-between", align: "flex-start", gap: "md", children: [
-        /* @__PURE__ */ jsxs10(Stack10, { gap: "xs", maw: 760, children: [
-          eyebrow ? /* @__PURE__ */ jsx13(Text9, { size: "xs", fw: 700, tt: "uppercase", c: "dimmed", style: { letterSpacing: "0.18em" }, children: eyebrow }) : null,
-          /* @__PURE__ */ jsx13(Title9, { order: 1, children: title }),
-          description ? /* @__PURE__ */ jsx13(Text9, { size: "lg", c: "dimmed", children: description }) : null
+  return /* @__PURE__ */ jsxs14(Stack14, { gap: "lg", children: [
+    /* @__PURE__ */ jsx18(Paper2, { withBorder: true, radius: "xl", p: "xl", children: /* @__PURE__ */ jsxs14(Stack14, { gap: "lg", children: [
+      /* @__PURE__ */ jsxs14(Group12, { justify: "space-between", align: "flex-start", gap: "md", children: [
+        /* @__PURE__ */ jsxs14(Stack14, { gap: "xs", maw: 760, children: [
+          eyebrow ? /* @__PURE__ */ jsx18(Text12, { size: "xs", fw: 700, tt: "uppercase", c: "dimmed", style: { letterSpacing: "0.18em" }, children: eyebrow }) : null,
+          /* @__PURE__ */ jsx18(Title12, { order: 1, children: title }),
+          description ? /* @__PURE__ */ jsx18(Text12, { size: "lg", c: "dimmed", children: description }) : null
         ] }),
-        /* @__PURE__ */ jsxs10(Stack10, { align: "flex-end", gap: "xs", children: [
-          typeof resultCount === "number" ? /* @__PURE__ */ jsxs10(Badge7, { size: "lg", radius: "xl", variant: "light", color: "violet", children: [
+        /* @__PURE__ */ jsxs14(Stack14, { align: "flex-end", gap: "xs", children: [
+          typeof resultCount === "number" ? /* @__PURE__ */ jsxs14(Badge10, { size: "lg", radius: "xl", variant: "light", color: "violet", children: [
             resultCount,
             " ",
             resultLabel
@@ -825,10 +1227,10 @@ function BrowseSurface({
           primaryControls
         ] })
       ] }),
-      scopeOptions.length ? /* @__PURE__ */ jsxs10(Stack10, { gap: "xs", children: [
-        /* @__PURE__ */ jsx13(Text9, { size: "sm", fw: 600, c: "dimmed", children: scopeLabel }),
-        /* @__PURE__ */ jsx13(Group8, { gap: "xs", wrap: "wrap", children: scopeOptions.map((option) => /* @__PURE__ */ jsx13(
-          Button,
+      scopeOptions.length ? /* @__PURE__ */ jsxs14(Stack14, { gap: "xs", children: [
+        /* @__PURE__ */ jsx18(Text12, { size: "sm", fw: 600, c: "dimmed", children: scopeLabel }),
+        /* @__PURE__ */ jsx18(Group12, { gap: "xs", wrap: "wrap", children: scopeOptions.map((option) => /* @__PURE__ */ jsx18(
+          Button2,
           {
             variant: option.active ? "filled" : "default",
             color: option.active ? "violet" : "gray",
@@ -840,30 +1242,30 @@ function BrowseSurface({
           option.id
         )) })
       ] }) : null,
-      locationControls ? /* @__PURE__ */ jsxs10(Stack10, { gap: "xs", children: [
-        /* @__PURE__ */ jsx13(Text9, { size: "sm", fw: 600, c: "dimmed", children: "Location" }),
+      locationControls ? /* @__PURE__ */ jsxs14(Stack14, { gap: "xs", children: [
+        /* @__PURE__ */ jsx18(Text12, { size: "sm", fw: 600, c: "dimmed", children: "Location" }),
         locationControls
       ] }) : null,
-      toolbar || sortControl ? /* @__PURE__ */ jsxs10(SimpleGrid2, { cols: { base: 1, lg: sortControl ? 2 : 1 }, spacing: "md", children: [
-        toolbar ? /* @__PURE__ */ jsx13(
+      toolbar || sortControl ? /* @__PURE__ */ jsxs14(SimpleGrid3, { cols: { base: 1, lg: sortControl ? 2 : 1 }, spacing: "md", children: [
+        toolbar ? /* @__PURE__ */ jsx18(
           DataToolbar,
           {
             ...toolbar,
             activeFilters: toolbarFilters.length ? toolbarFilters : toolbar.fallbackActiveFilters
           }
-        ) : /* @__PURE__ */ jsx13(Box3, {}),
-        sortControl ? /* @__PURE__ */ jsxs10(Stack10, { gap: "xs", align: "stretch", children: [
-          /* @__PURE__ */ jsx13(Text9, { size: "sm", fw: 600, c: "dimmed", children: "Sort" }),
+        ) : /* @__PURE__ */ jsx18(Box4, {}),
+        sortControl ? /* @__PURE__ */ jsxs14(Stack14, { gap: "xs", align: "stretch", children: [
+          /* @__PURE__ */ jsx18(Text12, { size: "sm", fw: 600, c: "dimmed", children: "Sort" }),
           sortControl
         ] }) : null
       ] }) : null,
-      mobileFilters ? /* @__PURE__ */ jsxs10(Stack10, { hiddenFrom: "lg", gap: "xs", children: [
-        /* @__PURE__ */ jsx13(Text9, { size: "sm", fw: 600, c: "dimmed", children: "Filters" }),
+      mobileFilters ? /* @__PURE__ */ jsxs14(Stack14, { hiddenFrom: "lg", gap: "xs", children: [
+        /* @__PURE__ */ jsx18(Text12, { size: "sm", fw: 600, c: "dimmed", children: "Filters" }),
         mobileFilters
       ] }) : null,
-      filterDrawer ? /* @__PURE__ */ jsx13(Box3, { hiddenFrom: "lg", children: filterDrawer }) : null,
-      activeFilters.length ? /* @__PURE__ */ jsx13(Group8, { gap: "xs", wrap: "wrap", children: activeFilters.map((filter) => /* @__PURE__ */ jsx13(
-        Badge7,
+      filterDrawer ? /* @__PURE__ */ jsx18(Box4, { hiddenFrom: "lg", children: filterDrawer }) : null,
+      activeFilters.length ? /* @__PURE__ */ jsx18(Group12, { gap: "xs", wrap: "wrap", children: activeFilters.map((filter) => /* @__PURE__ */ jsx18(
+        Badge10,
         {
           variant: "light",
           color: "violet",
@@ -880,8 +1282,8 @@ function BrowseSurface({
 }
 
 // src/AccentPanel.tsx
-import { Badge as Badge8, Box as Box4, Group as Group9, Paper as Paper3, Stack as Stack11, Text as Text10, Title as Title10 } from "@mantine/core";
-import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Badge as Badge11, Box as Box5, Group as Group13, Paper as Paper3, Stack as Stack15, Text as Text13, Title as Title13 } from "@mantine/core";
+import { jsx as jsx19, jsxs as jsxs15 } from "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))",
@@ -937,25 +1339,52 @@ function AccentPanel({
   children
 }) {
   const styles = resolveAccentPanelStyles(tone, variant);
-  return /* @__PURE__ */ jsx14(Paper3, { withBorder: true, radius: "lg", p: "lg", style: styles, children: /* @__PURE__ */ jsxs11(Stack11, { gap: "sm", children: [
-    title || badge ? /* @__PURE__ */ jsxs11(Group9, { justify: "space-between", align: "flex-start", gap: "sm", wrap: "wrap", children: [
-      title ? /* @__PURE__ */ jsx14(Title10, { order: 4, c: "inherit", children: title }) : /* @__PURE__ */ jsx14(Box4, {}),
-      badge ? typeof badge === "string" ? /* @__PURE__ */ jsx14(Badge8, { color: tone === "amber" ? "yellow" : tone, variant: "filled", children: badge }) : badge : null
+  return /* @__PURE__ */ jsx19(Paper3, { withBorder: true, radius: "lg", p: "lg", style: styles, children: /* @__PURE__ */ jsxs15(Stack15, { gap: "sm", children: [
+    title || badge ? /* @__PURE__ */ jsxs15(Group13, { justify: "space-between", align: "flex-start", gap: "sm", wrap: "wrap", children: [
+      title ? /* @__PURE__ */ jsx19(Title13, { order: 4, c: "inherit", children: title }) : /* @__PURE__ */ jsx19(Box5, {}),
+      badge ? typeof badge === "string" ? /* @__PURE__ */ jsx19(Badge11, { color: tone === "amber" ? "yellow" : tone, variant: "filled", children: badge }) : badge : null
     ] }) : null,
-    typeof children === "string" ? /* @__PURE__ */ jsx14(Text10, { c: "inherit", children }) : /* @__PURE__ */ jsx14(Box4, { c: "inherit", children })
+    typeof children === "string" ? /* @__PURE__ */ jsx19(Text13, { c: "inherit", children }) : /* @__PURE__ */ jsx19(Box5, { c: "inherit", children })
+  ] }) });
+}
+
+// src/DetailProfileShell.tsx
+import { Divider as Divider2, Paper as Paper4, Stack as Stack16 } from "@mantine/core";
+import { Fragment as Fragment3, jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
+function DetailProfileShell({
+  mode = "page",
+  hero,
+  actions,
+  sections,
+  related,
+  padding = "lg",
+  showDividers = true
+}) {
+  const content = sections.filter(Boolean);
+  return /* @__PURE__ */ jsx20(Paper4, { withBorder: mode === "drawer", radius: mode === "drawer" ? "xl" : "md", p: padding, children: /* @__PURE__ */ jsxs16(Stack16, { gap: "lg", children: [
+    hero,
+    actions,
+    content.map((section, index) => /* @__PURE__ */ jsxs16(Stack16, { gap: "lg", children: [
+      index > 0 && showDividers ? /* @__PURE__ */ jsx20(Divider2, {}) : null,
+      section
+    ] }, index)),
+    related ? /* @__PURE__ */ jsxs16(Fragment3, { children: [
+      content.length && showDividers ? /* @__PURE__ */ jsx20(Divider2, {}) : null,
+      related
+    ] }) : null
   ] }) });
 }
 
 // src/PublicNav.tsx
-import { Anchor as Anchor2, Group as Group10 } from "@mantine/core";
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { Anchor as Anchor2, Group as Group14 } from "@mantine/core";
+import { jsx as jsx21 } from "react/jsx-runtime";
 function PublicNav({ items, activeId, renderLink }) {
-  return /* @__PURE__ */ jsx15(Group10, { component: "nav", "aria-label": "Primary", gap: "lg", wrap: "nowrap", children: items.map((item) => {
+  return /* @__PURE__ */ jsx21(Group14, { component: "nav", "aria-label": "Primary", gap: "lg", wrap: "nowrap", children: items.map((item) => {
     const active = item.id === activeId;
     if (renderLink) {
-      return /* @__PURE__ */ jsx15("span", { children: renderLink(item, active) }, item.id);
+      return /* @__PURE__ */ jsx21("span", { children: renderLink(item, active) }, item.id);
     }
-    return /* @__PURE__ */ jsx15(
+    return /* @__PURE__ */ jsx21(
       Anchor2,
       {
         href: item.href,
@@ -973,16 +1402,16 @@ function PublicNav({ items, activeId, renderLink }) {
 }
 
 // src/PublicShell.tsx
-import { AppShell, Box as Box5, Burger, Container, Group as Group11, Stack as Stack12, Text as Text11 } from "@mantine/core";
-import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+import { AppShell, Box as Box6, Burger, Container, Group as Group15, Stack as Stack17, Text as Text14 } from "@mantine/core";
+import { jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
 function InlineMobileNavigation({
   mobileNavigation,
   className,
   mode
 }) {
-  return /* @__PURE__ */ jsxs12(Box5, { component: "details", hiddenFrom: "sm", className, children: [
-    /* @__PURE__ */ jsxs12(
-      Box5,
+  return /* @__PURE__ */ jsxs17(Box6, { component: "details", hiddenFrom: "sm", className, children: [
+    /* @__PURE__ */ jsxs17(
+      Box6,
       {
         component: "summary",
         "aria-label": mode === "drawer" ? "Open site navigation drawer" : "Open site navigation",
@@ -994,13 +1423,13 @@ function InlineMobileNavigation({
           gap: "0.5rem"
         },
         children: [
-          /* @__PURE__ */ jsx16(Burger, { opened: false, "aria-hidden": true }),
-          /* @__PURE__ */ jsx16(Text11, { size: "sm", fw: 600, children: "Menu" })
+          /* @__PURE__ */ jsx22(Burger, { opened: false, "aria-hidden": true }),
+          /* @__PURE__ */ jsx22(Text14, { size: "sm", fw: 600, children: "Menu" })
         ]
       }
     ),
-    /* @__PURE__ */ jsx16(
-      Box5,
+    /* @__PURE__ */ jsx22(
+      Box6,
       {
         mt: "sm",
         p: "sm",
@@ -1009,7 +1438,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__ */ jsx16(Stack12, { gap: "sm", children: mobileNavigation })
+        children: /* @__PURE__ */ jsx22(Stack17, { gap: "sm", children: mobileNavigation })
       }
     )
   ] });
@@ -1030,13 +1459,13 @@ function PublicShell({
   mobileNavigationMode = "sheet",
   classNames
 }) {
-  const resolvedNavigation = navigation ?? (navItems ? /* @__PURE__ */ jsx16(PublicNav, { items: navItems, activeId: activeNavId }) : null);
+  const resolvedNavigation = navigation ?? (navItems ? /* @__PURE__ */ jsx22(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__ */ jsxs12(
+  return /* @__PURE__ */ jsxs17(
     AppShell,
     {
       className: classNames?.root,
@@ -1044,16 +1473,16 @@ function PublicShell({
       footer: usesSheetMobileNavigation ? { height: 68 } : void 0,
       padding: 0,
       children: [
-        /* @__PURE__ */ jsx16(AppShell.Header, { withBorder: headerBordered, className: classNames?.header, "data-header-variant": headerVariant, children: /* @__PURE__ */ jsx16(Container, { size: containerSize, h: "100%", py: headerVariant === "branded-quiet" ? "sm" : 0, children: /* @__PURE__ */ jsxs12(
-          Group11,
+        /* @__PURE__ */ jsx22(AppShell.Header, { withBorder: headerBordered, className: classNames?.header, "data-header-variant": headerVariant, children: /* @__PURE__ */ jsx22(Container, { size: containerSize, h: "100%", py: headerVariant === "branded-quiet" ? "sm" : 0, children: /* @__PURE__ */ jsxs17(
+          Group15,
           {
             h: "100%",
             justify: "space-between",
             wrap: "nowrap",
             gap: headerVariant === "compact" ? "sm" : "lg",
             children: [
-              /* @__PURE__ */ jsxs12(Group11, { wrap: "nowrap", gap: headerVariant === "compact" ? "xs" : "sm", className: classNames?.brand, children: [
-                usesInlineMobileNavigation ? /* @__PURE__ */ jsx16(
+              /* @__PURE__ */ jsxs17(Group15, { wrap: "nowrap", gap: headerVariant === "compact" ? "xs" : "sm", className: classNames?.brand, children: [
+                usesInlineMobileNavigation ? /* @__PURE__ */ jsx22(
                   InlineMobileNavigation,
                   {
                     mobileNavigation,
@@ -1061,17 +1490,17 @@ function PublicShell({
                     mode: mobileNavigationMode
                   }
                 ) : null,
-                /* @__PURE__ */ jsx16(Box5, { children: brand })
+                /* @__PURE__ */ jsx22(Box6, { children: brand })
               ] }),
-              /* @__PURE__ */ jsx16(Group11, { visibleFrom: "sm", gap: headerVariant === "compact" ? "md" : "lg", className: classNames?.navigation, children: resolvedNavigation }),
-              /* @__PURE__ */ jsx16(Group11, { gap: "sm", className: classNames?.actions, children: actions })
+              /* @__PURE__ */ jsx22(Group15, { visibleFrom: "sm", gap: headerVariant === "compact" ? "md" : "lg", className: classNames?.navigation, children: resolvedNavigation }),
+              /* @__PURE__ */ jsx22(Group15, { gap: "sm", className: classNames?.actions, children: actions })
             ]
           }
         ) }) }),
-        usesSheetMobileNavigation ? /* @__PURE__ */ jsx16(AppShell.Footer, { withBorder: true, children: /* @__PURE__ */ jsx16(Container, { size: containerSize, h: "100%", children: /* @__PURE__ */ jsx16(Group11, { h: "100%", justify: "space-around", wrap: "nowrap", children: mobileNavigation }) }) }) : null,
-        /* @__PURE__ */ jsxs12(AppShell.Main, { children: [
-          /* @__PURE__ */ jsx16(Container, { size: containerSize, py: mainPadding, className: classNames?.content, children: /* @__PURE__ */ jsx16(Stack12, { gap: "xl", children }) }),
-          footer ? /* @__PURE__ */ jsx16(Box5, { component: typeof footer === "string" ? "footer" : "div", py: "xl", children: /* @__PURE__ */ jsx16(Container, { size: containerSize, children: typeof footer === "string" ? /* @__PURE__ */ jsx16(Text11, { size: "sm", c: "dimmed", children: footer }) : footer }) }) : null
+        usesSheetMobileNavigation ? /* @__PURE__ */ jsx22(AppShell.Footer, { withBorder: true, children: /* @__PURE__ */ jsx22(Container, { size: containerSize, h: "100%", children: /* @__PURE__ */ jsx22(Group15, { h: "100%", justify: "space-around", wrap: "nowrap", children: mobileNavigation }) }) }) : null,
+        /* @__PURE__ */ jsxs17(AppShell.Main, { children: [
+          /* @__PURE__ */ jsx22(Container, { size: containerSize, py: mainPadding, className: classNames?.content, children: /* @__PURE__ */ jsx22(Stack17, { gap: "xl", children }) }),
+          footer ? /* @__PURE__ */ jsx22(Box6, { component: typeof footer === "string" ? "footer" : "div", py: "xl", children: /* @__PURE__ */ jsx22(Container, { size: containerSize, children: typeof footer === "string" ? /* @__PURE__ */ jsx22(Text14, { size: "sm", c: "dimmed", children: footer }) : footer }) }) : null
         ] })
       ]
     }
@@ -1079,18 +1508,18 @@ function PublicShell({
 }
 
 // src/PublicSiteFooter.tsx
-import { Group as Group12, Stack as Stack13, Text as Text12 } from "@mantine/core";
-import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Group as Group16, Stack as Stack18, Text as Text15 } from "@mantine/core";
+import { jsx as jsx23, jsxs as jsxs18 } from "react/jsx-runtime";
 function PublicSiteFooter({ children, meta }) {
-  return /* @__PURE__ */ jsxs13(Stack13, { component: "footer", gap: "xs", children: [
-    children ? /* @__PURE__ */ jsx17(Text12, { size: "sm", children }) : null,
-    meta ? /* @__PURE__ */ jsx17(Group12, { gap: "sm", children: /* @__PURE__ */ jsx17(Text12, { size: "xs", c: "dimmed", children: meta }) }) : null
+  return /* @__PURE__ */ jsxs18(Stack18, { component: "footer", gap: "xs", children: [
+    children ? /* @__PURE__ */ jsx23(Text15, { size: "sm", children }) : null,
+    meta ? /* @__PURE__ */ jsx23(Group16, { gap: "sm", children: /* @__PURE__ */ jsx23(Text15, { size: "xs", c: "dimmed", children: meta }) }) : null
   ] });
 }
 
 // src/PublicBrandFooter.tsx
-import { Box as Box6, Divider as Divider2, Grid, Group as Group13, Paper as Paper4, Stack as Stack14, Text as Text13, Title as Title11 } from "@mantine/core";
-import { Fragment as Fragment2, jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Box as Box7, Divider as Divider3, Grid, Group as Group17, Paper as Paper5, Stack as Stack19, Text as Text16, Title as Title14 } from "@mantine/core";
+import { Fragment as Fragment4, jsx as jsx24, jsxs as jsxs19 } from "react/jsx-runtime";
 function PublicBrandFooter({
   media,
   brandTitle,
@@ -1105,8 +1534,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__ */ jsx18(
-    Paper4,
+  return /* @__PURE__ */ jsx24(
+    Paper5,
     {
       component: "footer",
       withBorder: true,
@@ -1114,19 +1543,19 @@ function PublicBrandFooter({
       p: compact ? "lg" : "xl",
       className: classNames?.root,
       "data-layout-variant": layoutVariant,
-      children: /* @__PURE__ */ jsxs14(Stack14, { gap: "lg", children: [
-        /* @__PURE__ */ jsxs14(Grid, { gutter: compact ? "lg" : "xl", align: "flex-start", children: [
-          media ? /* @__PURE__ */ jsx18(Grid.Col, { span: { base: 12, md: mediaSpan }, children: /* @__PURE__ */ jsx18(Box6, { className: classNames?.media, children: media }) }) : null,
-          /* @__PURE__ */ jsx18(Grid.Col, { span: { base: 12, md: primarySpan }, children: /* @__PURE__ */ jsxs14(Stack14, { gap: compact ? "xs" : "sm", className: classNames?.primary, children: [
-            brandTitle ? /* @__PURE__ */ jsx18(Title11, { order: 4, children: brandTitle }) : null,
-            description ? /* @__PURE__ */ jsx18(Text13, { c: "dimmed", children: description }) : null,
-            actions ? /* @__PURE__ */ jsx18(Box6, { children: actions }) : null
+      children: /* @__PURE__ */ jsxs19(Stack19, { gap: "lg", children: [
+        /* @__PURE__ */ jsxs19(Grid, { gutter: compact ? "lg" : "xl", align: "flex-start", children: [
+          media ? /* @__PURE__ */ jsx24(Grid.Col, { span: { base: 12, md: mediaSpan }, children: /* @__PURE__ */ jsx24(Box7, { className: classNames?.media, children: media }) }) : null,
+          /* @__PURE__ */ jsx24(Grid.Col, { span: { base: 12, md: primarySpan }, children: /* @__PURE__ */ jsxs19(Stack19, { gap: compact ? "xs" : "sm", className: classNames?.primary, children: [
+            brandTitle ? /* @__PURE__ */ jsx24(Title14, { order: 4, children: brandTitle }) : null,
+            description ? /* @__PURE__ */ jsx24(Text16, { c: "dimmed", children: description }) : null,
+            actions ? /* @__PURE__ */ jsx24(Box7, { children: actions }) : null
           ] }) }),
-          secondary ? /* @__PURE__ */ jsx18(Grid.Col, { span: { base: 12, md: secondarySpan }, children: /* @__PURE__ */ jsx18(Stack14, { gap: compact ? "xs" : "sm", className: classNames?.secondary, children: secondary }) }) : null
+          secondary ? /* @__PURE__ */ jsx24(Grid.Col, { span: { base: 12, md: secondarySpan }, children: /* @__PURE__ */ jsx24(Stack19, { gap: compact ? "xs" : "sm", className: classNames?.secondary, children: secondary }) }) : null
         ] }),
-        legal ? /* @__PURE__ */ jsxs14(Fragment2, { children: [
-          /* @__PURE__ */ jsx18(Divider2, {}),
-          /* @__PURE__ */ jsx18(Group13, { justify: "space-between", gap: "sm", wrap: "wrap", className: classNames?.legal, children: typeof legal === "string" ? /* @__PURE__ */ jsx18(Text13, { size: "sm", c: "dimmed", children: legal }) : legal })
+        legal ? /* @__PURE__ */ jsxs19(Fragment4, { children: [
+          /* @__PURE__ */ jsx24(Divider3, {}),
+          /* @__PURE__ */ jsx24(Group17, { justify: "space-between", gap: "sm", wrap: "wrap", className: classNames?.legal, children: typeof legal === "string" ? /* @__PURE__ */ jsx24(Text16, { size: "sm", c: "dimmed", children: legal }) : legal })
         ] }) : null
       ] })
     }
@@ -1134,57 +1563,136 @@ function PublicBrandFooter({
 }
 
 // src/AuthShell.tsx
-import { Box as Box7, Card as Card6, Container as Container2, Group as Group14, Stack as Stack15, Text as Text14, Title as Title12 } from "@mantine/core";
-import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
-function AuthShell({ title, description, brand, footer, helper, children }) {
-  return /* @__PURE__ */ jsx19(Box7, { py: { base: "xl", md: "4rem" }, children: /* @__PURE__ */ jsx19(Container2, { size: "xs", children: /* @__PURE__ */ jsxs15(Stack15, { gap: "xl", children: [
-    brand ? /* @__PURE__ */ jsx19(Group14, { justify: "center", children: brand }) : null,
-    /* @__PURE__ */ jsx19(Card6, { withBorder: true, radius: "lg", padding: "xl", children: /* @__PURE__ */ jsxs15(Stack15, { gap: "lg", children: [
-      /* @__PURE__ */ jsxs15(Stack15, { gap: "xs", ta: "center", children: [
-        /* @__PURE__ */ jsx19(Title12, { order: 2, children: title }),
-        description ? /* @__PURE__ */ jsx19(Text14, { c: "dimmed", size: "sm", children: description }) : null
+import { Box as Box8, Card as Card8, Container as Container2, Divider as Divider4, Group as Group18, Stack as Stack20, Text as Text17, Title as Title15 } from "@mantine/core";
+import { jsx as jsx25, jsxs as jsxs20 } from "react/jsx-runtime";
+function AuthShell({
+  title,
+  description,
+  brand,
+  headerActions,
+  footer,
+  helper,
+  socialAuth,
+  dividerLabel = "Or continue with your account",
+  children
+}) {
+  return /* @__PURE__ */ jsx25(Box8, { py: { base: "xl", md: "4rem" }, children: /* @__PURE__ */ jsx25(Container2, { size: "xs", children: /* @__PURE__ */ jsxs20(Stack20, { gap: "xl", children: [
+    brand || headerActions ? /* @__PURE__ */ jsxs20(Group18, { justify: brand && headerActions ? "space-between" : "center", align: "center", children: [
+      brand ? /* @__PURE__ */ jsx25(Box8, { children: brand }) : /* @__PURE__ */ jsx25(Box8, {}),
+      headerActions ? /* @__PURE__ */ jsx25(Group18, { gap: "sm", children: headerActions }) : null
+    ] }) : null,
+    /* @__PURE__ */ jsx25(Card8, { withBorder: true, radius: "lg", padding: "xl", children: /* @__PURE__ */ jsxs20(Stack20, { gap: "lg", children: [
+      /* @__PURE__ */ jsxs20(Stack20, { gap: "xs", ta: "center", children: [
+        /* @__PURE__ */ jsx25(Title15, { order: 2, children: title }),
+        description ? /* @__PURE__ */ jsx25(Text17, { c: "dimmed", size: "sm", children: description }) : null
       ] }),
+      socialAuth ? /* @__PURE__ */ jsx25(Box8, { children: socialAuth }) : null,
+      socialAuth ? /* @__PURE__ */ jsx25(Divider4, { label: dividerLabel, labelPosition: "center" }) : null,
       children,
-      helper ? /* @__PURE__ */ jsx19(Text14, { size: "sm", c: "dimmed", ta: "center", children: helper }) : null
+      helper ? /* @__PURE__ */ jsx25(Text17, { size: "sm", c: "dimmed", ta: "center", children: helper }) : null
     ] }) }),
-    footer ? /* @__PURE__ */ jsx19(Text14, { size: "sm", c: "dimmed", ta: "center", children: footer }) : null
+    footer ? /* @__PURE__ */ jsx25(Text17, { size: "sm", c: "dimmed", ta: "center", children: footer }) : null
   ] }) }) });
 }
 
+// src/SocialAuthButtons.tsx
+import { Button as Button3, Divider as Divider5, Group as Group19, SimpleGrid as SimpleGrid4, Stack as Stack21, Text as Text18, ThemeIcon as ThemeIcon7 } from "@mantine/core";
+import { jsx as jsx26, jsxs as jsxs21 } from "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__ */ jsx26(ThemeIcon7, { variant: "light", color: config.color, radius: "xl", size: "md", "aria-hidden": "true", children: /* @__PURE__ */ jsx26(Text18, { 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__ */ jsx26(
+    Button3,
+    {
+      variant: "default",
+      justify: "space-between",
+      fullWidth: true,
+      size: compact ? "sm" : "md",
+      leftSection: /* @__PURE__ */ jsx26(ProviderMark, { id: provider.id }),
+      disabled: provider.disabled,
+      loading: provider.loading,
+      ...buttonProps,
+      children: /* @__PURE__ */ jsxs21(Stack21, { gap: 0, align: "flex-start", children: [
+        /* @__PURE__ */ jsx26(Text18, { inherit: true, children: label }),
+        provider.description ? /* @__PURE__ */ jsx26(Text18, { 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__ */ jsx26(SocialAuthButton, { provider, compact }, provider.id));
+  return /* @__PURE__ */ jsxs21(Stack21, { gap: "md", children: [
+    /* @__PURE__ */ jsxs21(Stack21, { gap: 4, ta: "center", children: [
+      /* @__PURE__ */ jsxs21(Group19, { justify: "center", gap: "xs", children: [
+        /* @__PURE__ */ jsx26(GdsIcons.Login, { size: "1rem" }),
+        /* @__PURE__ */ jsx26(Text18, { fw: 600, children: title })
+      ] }),
+      description ? /* @__PURE__ */ jsx26(Text18, { size: "sm", c: "dimmed", children: description }) : null
+    ] }),
+    /* @__PURE__ */ jsx26(Divider5, {}),
+    layout === "grid" ? /* @__PURE__ */ jsx26(SimpleGrid4, { cols: { base: 1, sm: 2 }, spacing: "sm", children: content }) : /* @__PURE__ */ jsx26(Stack21, { gap: "sm", children: content })
+  ] });
+}
+
 // src/ArticleShell.tsx
-import { Container as Container3, Group as Group15, Stack as Stack16, Text as Text15, Title as Title13 } from "@mantine/core";
-import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Container as Container3, Group as Group20, Stack as Stack22, Text as Text19, Title as Title16 } from "@mantine/core";
+import { jsx as jsx27, jsxs as jsxs22 } from "react/jsx-runtime";
 function ArticleShell({ eyebrow, title, lead, meta, sideRail, children }) {
-  return /* @__PURE__ */ jsx20(Container3, { size: "lg", py: "xl", children: /* @__PURE__ */ jsxs16(Group15, { align: "flex-start", gap: "xl", wrap: "nowrap", children: [
-    /* @__PURE__ */ jsxs16(Stack16, { gap: "lg", maw: 760, flex: 1, children: [
-      /* @__PURE__ */ jsxs16(Stack16, { gap: "sm", children: [
-        eyebrow ? /* @__PURE__ */ jsx20(Text15, { size: "sm", fw: 700, c: "dimmed", tt: "uppercase", children: eyebrow }) : null,
-        /* @__PURE__ */ jsx20(Title13, { order: 1, children: title }),
-        lead ? /* @__PURE__ */ jsx20(Text15, { size: "lg", c: "dimmed", children: lead }) : null,
-        meta ? /* @__PURE__ */ jsx20(Group15, { gap: "md", children: meta }) : null
+  return /* @__PURE__ */ jsx27(Container3, { size: "lg", py: "xl", children: /* @__PURE__ */ jsxs22(Group20, { align: "flex-start", gap: "xl", wrap: "nowrap", children: [
+    /* @__PURE__ */ jsxs22(Stack22, { gap: "lg", maw: 760, flex: 1, children: [
+      /* @__PURE__ */ jsxs22(Stack22, { gap: "sm", children: [
+        eyebrow ? /* @__PURE__ */ jsx27(Text19, { size: "sm", fw: 700, c: "dimmed", tt: "uppercase", children: eyebrow }) : null,
+        /* @__PURE__ */ jsx27(Title16, { order: 1, children: title }),
+        lead ? /* @__PURE__ */ jsx27(Text19, { size: "lg", c: "dimmed", children: lead }) : null,
+        meta ? /* @__PURE__ */ jsx27(Group20, { gap: "md", children: meta }) : null
       ] }),
-      /* @__PURE__ */ jsx20(Stack16, { gap: "md", children })
+      /* @__PURE__ */ jsx27(Stack22, { gap: "md", children })
     ] }),
-    sideRail ? /* @__PURE__ */ jsx20(Stack16, { visibleFrom: "lg", gap: "md", w: 240, children: sideRail }) : null
+    sideRail ? /* @__PURE__ */ jsx27(Stack22, { visibleFrom: "lg", gap: "md", w: 240, children: sideRail }) : null
   ] }) });
 }
 
 // src/CtaButtonGroup.tsx
-import { Group as Group16, Stack as Stack17 } from "@mantine/core";
-import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Group as Group21, Stack as Stack23 } from "@mantine/core";
+import { jsx as jsx28, jsxs as jsxs23 } from "react/jsx-runtime";
 function CtaButtonGroup({ primary, secondary, tertiary }) {
-  return /* @__PURE__ */ jsxs17(Stack17, { gap: "sm", children: [
-    /* @__PURE__ */ jsxs17(Group16, { gap: "sm", align: "stretch", children: [
-      /* @__PURE__ */ jsx21("div", { children: primary }),
-      secondary ? /* @__PURE__ */ jsx21("div", { children: secondary }) : null
+  return /* @__PURE__ */ jsxs23(Stack23, { gap: "sm", children: [
+    /* @__PURE__ */ jsxs23(Group21, { gap: "sm", align: "stretch", children: [
+      /* @__PURE__ */ jsx28("div", { children: primary }),
+      secondary ? /* @__PURE__ */ jsx28("div", { children: secondary }) : null
     ] }),
-    tertiary ? /* @__PURE__ */ jsx21("div", { children: tertiary }) : null
+    tertiary ? /* @__PURE__ */ jsx28("div", { children: tertiary }) : null
   ] });
 }
 
 // src/DocsPageShell.tsx
-import { Anchor as Anchor3, Breadcrumbs, Container as Container4, Group as Group17, Stack as Stack18, Text as Text16, Title as Title14 } from "@mantine/core";
-import { jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Anchor as Anchor3, Breadcrumbs, Container as Container4, Group as Group22, Stack as Stack24, Text as Text20, Title as Title17 } from "@mantine/core";
+import { jsx as jsx29, jsxs as jsxs24 } from "react/jsx-runtime";
 function DocsPageShell({
   breadcrumbs = [],
   title,
@@ -1195,27 +1703,27 @@ function DocsPageShell({
   footerNext,
   children
 }) {
-  return /* @__PURE__ */ jsx22(Container4, { size: "lg", py: "xl", children: /* @__PURE__ */ jsxs18(Group17, { align: "flex-start", gap: "xl", wrap: "nowrap", children: [
-    /* @__PURE__ */ jsxs18(Stack18, { component: "article", gap: "lg", maw: 760, flex: 1, children: [
-      breadcrumbs.length ? /* @__PURE__ */ jsx22(Breadcrumbs, { children: breadcrumbs.map(
-        (crumb) => crumb.href ? /* @__PURE__ */ jsx22(Anchor3, { href: crumb.href, children: crumb.label }, `${crumb.label}-${crumb.href}`) : /* @__PURE__ */ jsx22(Text16, { children: crumb.label }, crumb.label)
+  return /* @__PURE__ */ jsx29(Container4, { size: "lg", py: "xl", children: /* @__PURE__ */ jsxs24(Group22, { align: "flex-start", gap: "xl", wrap: "nowrap", children: [
+    /* @__PURE__ */ jsxs24(Stack24, { component: "article", gap: "lg", maw: 760, flex: 1, children: [
+      breadcrumbs.length ? /* @__PURE__ */ jsx29(Breadcrumbs, { children: breadcrumbs.map(
+        (crumb) => crumb.href ? /* @__PURE__ */ jsx29(Anchor3, { href: crumb.href, children: crumb.label }, `${crumb.label}-${crumb.href}`) : /* @__PURE__ */ jsx29(Text20, { children: crumb.label }, crumb.label)
       ) }) : null,
-      /* @__PURE__ */ jsxs18(Stack18, { gap: "sm", children: [
-        eyebrow ? /* @__PURE__ */ jsx22(Text16, { size: "sm", fw: 700, c: "dimmed", children: eyebrow }) : null,
-        /* @__PURE__ */ jsx22(Title14, { order: 1, children: title }),
-        lead ? /* @__PURE__ */ jsx22(Text16, { size: "lg", c: "dimmed", children: lead }) : null,
-        meta ? /* @__PURE__ */ jsx22(Group17, { gap: "md", children: meta }) : null
+      /* @__PURE__ */ jsxs24(Stack24, { gap: "sm", children: [
+        eyebrow ? /* @__PURE__ */ jsx29(Text20, { size: "sm", fw: 700, c: "dimmed", children: eyebrow }) : null,
+        /* @__PURE__ */ jsx29(Title17, { order: 1, children: title }),
+        lead ? /* @__PURE__ */ jsx29(Text20, { size: "lg", c: "dimmed", children: lead }) : null,
+        meta ? /* @__PURE__ */ jsx29(Group22, { gap: "md", children: meta }) : null
       ] }),
-      /* @__PURE__ */ jsx22(Stack18, { gap: "md", children }),
-      footerNext ? /* @__PURE__ */ jsx22(Anchor3, { href: footerNext.href, fw: 600, children: footerNext.label }) : null
+      /* @__PURE__ */ jsx29(Stack24, { gap: "md", children }),
+      footerNext ? /* @__PURE__ */ jsx29(Anchor3, { href: footerNext.href, fw: 600, children: footerNext.label }) : null
     ] }),
-    sideRail ? /* @__PURE__ */ jsx22(Stack18, { visibleFrom: "lg", gap: "md", w: 240, children: sideRail }) : null
+    sideRail ? /* @__PURE__ */ jsx29(Stack24, { visibleFrom: "lg", gap: "md", w: 240, children: sideRail }) : null
   ] }) });
 }
 
 // src/EditorialHero.tsx
-import { Anchor as Anchor4, AspectRatio as AspectRatio3, Box as Box8, Grid as Grid2, Group as Group18, Paper as Paper5, Skeleton as Skeleton2, Stack as Stack19, Text as Text17, ThemeIcon as ThemeIcon5, Title as Title15 } from "@mantine/core";
-import { jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Anchor as Anchor4, AspectRatio as AspectRatio5, Box as Box9, Grid as Grid2, Group as Group23, Paper as Paper6, Skeleton as Skeleton3, Stack as Stack25, Text as Text21, ThemeIcon as ThemeIcon8, Title as Title18 } from "@mantine/core";
+import { jsx as jsx30, jsxs as jsxs25 } from "react/jsx-runtime";
 function resolveActionVariant(action, index, seenPrimary) {
   const requested = action.variant ?? (index === 0 ? "primary" : "secondary");
   if (requested === "primary" && !seenPrimary) {
@@ -1227,7 +1735,7 @@ function resolveActionVariant(action, index, seenPrimary) {
   return { variant: "default", seenPrimary };
 }
 function HeroAction({ action, variant }) {
-  const content = /* @__PURE__ */ jsx23(
+  const content = /* @__PURE__ */ jsx30(
     Anchor4,
     {
       href: action.href,
@@ -1252,8 +1760,8 @@ function HeroAction({ action, variant }) {
     }
   );
   if (!action.href) {
-    return /* @__PURE__ */ jsx23(
-      Box8,
+    return /* @__PURE__ */ jsx30(
+      Box9,
       {
         component: "button",
         type: "button",
@@ -1280,30 +1788,30 @@ function HeroAction({ action, variant }) {
   return content;
 }
 function LoadingHero({ compact }) {
-  return /* @__PURE__ */ jsx23(Paper5, { withBorder: true, radius: "xl", p: compact ? "lg" : "xl", children: /* @__PURE__ */ jsxs19(Grid2, { gutter: compact ? "lg" : "xl", align: "center", children: [
-    /* @__PURE__ */ jsx23(Grid2.Col, { span: { base: 12, md: 6 }, children: /* @__PURE__ */ jsxs19(Stack19, { gap: "md", children: [
-      /* @__PURE__ */ jsx23(Skeleton2, { height: 16, width: 96, radius: "xl" }),
-      /* @__PURE__ */ jsx23(Skeleton2, { height: 48, width: "90%", radius: "md" }),
-      /* @__PURE__ */ jsx23(Skeleton2, { height: 18, width: "100%", radius: "md" }),
-      /* @__PURE__ */ jsx23(Skeleton2, { height: 18, width: "82%", radius: "md" }),
-      /* @__PURE__ */ jsxs19(Group18, { children: [
-        /* @__PURE__ */ jsx23(Skeleton2, { height: 40, width: 140, radius: "md" }),
-        /* @__PURE__ */ jsx23(Skeleton2, { height: 40, width: 140, radius: "md" })
+  return /* @__PURE__ */ jsx30(Paper6, { withBorder: true, radius: "xl", p: compact ? "lg" : "xl", children: /* @__PURE__ */ jsxs25(Grid2, { gutter: compact ? "lg" : "xl", align: "center", children: [
+    /* @__PURE__ */ jsx30(Grid2.Col, { span: { base: 12, md: 6 }, children: /* @__PURE__ */ jsxs25(Stack25, { gap: "md", children: [
+      /* @__PURE__ */ jsx30(Skeleton3, { height: 16, width: 96, radius: "xl" }),
+      /* @__PURE__ */ jsx30(Skeleton3, { height: 48, width: "90%", radius: "md" }),
+      /* @__PURE__ */ jsx30(Skeleton3, { height: 18, width: "100%", radius: "md" }),
+      /* @__PURE__ */ jsx30(Skeleton3, { height: 18, width: "82%", radius: "md" }),
+      /* @__PURE__ */ jsxs25(Group23, { children: [
+        /* @__PURE__ */ jsx30(Skeleton3, { height: 40, width: 140, radius: "md" }),
+        /* @__PURE__ */ jsx30(Skeleton3, { height: 40, width: 140, radius: "md" })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx23(Grid2.Col, { span: { base: 12, md: 6 }, children: /* @__PURE__ */ jsx23(AspectRatio3, { ratio: 16 / 11, children: /* @__PURE__ */ jsx23(Skeleton2, { radius: "lg" }) }) })
+    /* @__PURE__ */ jsx30(Grid2.Col, { span: { base: 12, md: 6 }, children: /* @__PURE__ */ jsx30(AspectRatio5, { ratio: 16 / 11, children: /* @__PURE__ */ jsx30(Skeleton3, { radius: "lg" }) }) })
   ] }) });
 }
 function MediaFallback() {
-  return /* @__PURE__ */ jsx23(AspectRatio3, { ratio: 16 / 11, children: /* @__PURE__ */ jsx23(
-    ThemeIcon5,
+  return /* @__PURE__ */ jsx30(AspectRatio5, { ratio: 16 / 11, children: /* @__PURE__ */ jsx30(
+    ThemeIcon8,
     {
       size: "100%",
       radius: "lg",
       color: "gray",
       variant: "light",
       "aria-label": "Hero media is unavailable",
-      children: /* @__PURE__ */ jsx23(GdsIcons.Gallery, { size: "2.5rem" })
+      children: /* @__PURE__ */ jsx30(GdsIcons.Gallery, { size: "2.5rem" })
     }
   ) });
 }
@@ -1323,8 +1831,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__ */ jsxs19(
-    Box8,
+  return /* @__PURE__ */ jsxs25(
+    Box9,
     {
       component: "figure",
       m: 0,
@@ -1337,9 +1845,9 @@ function MediaFrame({
       },
       "aria-label": mediaAlt,
       children: [
-        media ?? /* @__PURE__ */ jsx23(MediaFallback, {}),
-        media && overlayBackground ? /* @__PURE__ */ jsx23(
-          Box8,
+        media ?? /* @__PURE__ */ jsx30(MediaFallback, {}),
+        media && overlayBackground ? /* @__PURE__ */ jsx30(
+          Box9,
           {
             "aria-hidden": true,
             style: {
@@ -1372,7 +1880,7 @@ function EditorialHero({
   classNames
 }) {
   if (loading) {
-    return /* @__PURE__ */ jsx23(LoadingHero, { compact });
+    return /* @__PURE__ */ jsx30(LoadingHero, { compact });
   }
   const stackAlign = align === "center" ? "center" : "flex-start";
   const textAlign = align === "center" ? "center" : "left";
@@ -1380,15 +1888,15 @@ function EditorialHero({
   const renderedActions = actions.slice(0, 3).map((action, index) => {
     const resolved = resolveActionVariant(action, index, seenPrimary);
     seenPrimary = resolved.seenPrimary;
-    return /* @__PURE__ */ jsx23(HeroAction, { action, variant: resolved.variant }, `${action.label}-${index}`);
+    return /* @__PURE__ */ jsx30(HeroAction, { action, variant: resolved.variant }, `${action.label}-${index}`);
   });
-  const textSlot = /* @__PURE__ */ jsxs19(Stack19, { gap: compact ? "md" : "lg", justify: "center", h: "100%", className: classNames?.content, children: [
-    /* @__PURE__ */ jsxs19(Stack19, { gap: "sm", align: stackAlign, children: [
-      eyebrow ? /* @__PURE__ */ jsx23(Text17, { size: "sm", fw: 700, c: "dimmed", ta: textAlign, children: eyebrow }) : null,
-      /* @__PURE__ */ jsx23(Title15, { order: 1, maw: 760, ta: textAlign, children: title }),
-      description ? /* @__PURE__ */ jsx23(Text17, { size: compact ? "md" : "lg", c: "dimmed", maw: 720, ta: textAlign, children: description }) : null
+  const textSlot = /* @__PURE__ */ jsxs25(Stack25, { gap: compact ? "md" : "lg", justify: "center", h: "100%", className: classNames?.content, children: [
+    /* @__PURE__ */ jsxs25(Stack25, { gap: "sm", align: stackAlign, children: [
+      eyebrow ? /* @__PURE__ */ jsx30(Text21, { size: "sm", fw: 700, c: "dimmed", ta: textAlign, children: eyebrow }) : null,
+      /* @__PURE__ */ jsx30(Title18, { order: 1, maw: 760, ta: textAlign, children: title }),
+      description ? /* @__PURE__ */ jsx30(Text21, { size: compact ? "md" : "lg", c: "dimmed", maw: 720, ta: textAlign, children: description }) : null
     ] }),
-    renderedActions.length ? /* @__PURE__ */ jsx23(Box8, { className: classNames?.actions, children: /* @__PURE__ */ jsx23(
+    renderedActions.length ? /* @__PURE__ */ jsx30(Box9, { className: classNames?.actions, children: /* @__PURE__ */ jsx30(
       CtaButtonGroup,
       {
         primary: renderedActions[0],
@@ -1396,8 +1904,8 @@ function EditorialHero({
         tertiary: renderedActions[2]
       }
     ) }) : null,
-    meta.length ? /* @__PURE__ */ jsx23(Group18, { gap: "sm", wrap: "wrap", "aria-label": "Supporting details", className: classNames?.meta, children: meta.map((item) => /* @__PURE__ */ jsxs19(
-      Group18,
+    meta.length ? /* @__PURE__ */ jsx30(Group23, { gap: "sm", wrap: "wrap", "aria-label": "Supporting details", className: classNames?.meta, children: meta.map((item) => /* @__PURE__ */ jsxs25(
+      Group23,
       {
         gap: 6,
         px: "sm",
@@ -1408,17 +1916,17 @@ function EditorialHero({
         },
         children: [
           item.icon,
-          /* @__PURE__ */ jsx23(Text17, { size: "sm", c: "dimmed", children: item.label })
+          /* @__PURE__ */ jsx30(Text21, { size: "sm", c: "dimmed", children: item.label })
         ]
       },
       item.id
     )) }) : null
   ] });
-  const mediaSlot = error ? /* @__PURE__ */ jsx23(AccentPanel, { tone: "red", variant: "soft-outline", title: "Media unavailable", children: error }) : /* @__PURE__ */ jsx23(MediaFrame, { media, mediaAlt, mediaFade, className: classNames?.media });
-  const textCol = /* @__PURE__ */ jsx23(Grid2.Col, { span: { base: 12, md: 6 }, order: { base: 1, md: mediaPosition === "left" ? 2 : 1 }, children: textSlot });
-  const mediaCol = /* @__PURE__ */ jsx23(Grid2.Col, { span: { base: 12, md: 6 }, order: { base: 2, md: mediaPosition === "left" ? 1 : 2 }, children: mediaSlot });
-  return /* @__PURE__ */ jsx23(
-    Paper5,
+  const mediaSlot = error ? /* @__PURE__ */ jsx30(AccentPanel, { tone: "red", variant: "soft-outline", title: "Media unavailable", children: error }) : /* @__PURE__ */ jsx30(MediaFrame, { media, mediaAlt, mediaFade, className: classNames?.media });
+  const textCol = /* @__PURE__ */ jsx30(Grid2.Col, { span: { base: 12, md: 6 }, order: { base: 1, md: mediaPosition === "left" ? 2 : 1 }, children: textSlot });
+  const mediaCol = /* @__PURE__ */ jsx30(Grid2.Col, { span: { base: 12, md: 6 }, order: { base: 2, md: mediaPosition === "left" ? 1 : 2 }, children: mediaSlot });
+  return /* @__PURE__ */ jsx30(
+    Paper6,
     {
       component: "section",
       withBorder: true,
@@ -1426,7 +1934,7 @@ function EditorialHero({
       p: compact ? "lg" : "xl",
       className: classNames?.root,
       style: surfaceVariant === "flat-public" ? { boxShadow: "none" } : void 0,
-      children: /* @__PURE__ */ jsxs19(Grid2, { gutter: compact ? "lg" : "xl", align: "center", children: [
+      children: /* @__PURE__ */ jsxs25(Grid2, { gutter: compact ? "lg" : "xl", align: "center", children: [
         textCol,
         mediaCol
       ] })
@@ -1435,19 +1943,19 @@ function EditorialHero({
 }
 
 // src/FeatureBand.tsx
-import { Box as Box9, Group as Group19, Paper as Paper6, SimpleGrid as SimpleGrid3, Skeleton as Skeleton3, Stack as Stack20, Text as Text18, ThemeIcon as ThemeIcon6, Title as Title16 } from "@mantine/core";
-import { Fragment as Fragment3, jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Box as Box10, Group as Group24, Paper as Paper7, SimpleGrid as SimpleGrid5, Skeleton as Skeleton4, Stack as Stack26, Text as Text22, ThemeIcon as ThemeIcon9, Title as Title19 } from "@mantine/core";
+import { Fragment as Fragment5, jsx as jsx31, jsxs as jsxs26 } from "react/jsx-runtime";
 function FeatureBandSkeleton({
   columns = 3,
   bordered = true,
   variant = "default"
 }) {
-  return /* @__PURE__ */ jsx24(SimpleGrid3, { cols: { base: 1, sm: Math.min(columns, 2), lg: columns }, spacing: "lg", children: Array.from({ length: columns }).map((_, index) => /* @__PURE__ */ jsx24(Paper6, { withBorder: bordered, radius: "lg", p: variant === "compact" ? "md" : "lg", children: /* @__PURE__ */ jsxs20(Stack20, { gap: "md", children: [
-    /* @__PURE__ */ jsx24(Skeleton3, { height: variant === "process" ? 28 : 42, width: variant === "process" ? 72 : 42, radius: "xl" }),
-    /* @__PURE__ */ jsxs20(Stack20, { gap: "xs", children: [
-      /* @__PURE__ */ jsx24(Skeleton3, { height: 20, width: "75%", radius: "md" }),
-      /* @__PURE__ */ jsx24(Skeleton3, { height: 14, width: "100%", radius: "md" }),
-      /* @__PURE__ */ jsx24(Skeleton3, { height: 14, width: "82%", radius: "md" })
+  return /* @__PURE__ */ jsx31(SimpleGrid5, { cols: { base: 1, sm: Math.min(columns, 2), lg: columns }, spacing: "lg", children: Array.from({ length: columns }).map((_, index) => /* @__PURE__ */ jsx31(Paper7, { withBorder: bordered, radius: "lg", p: variant === "compact" ? "md" : "lg", children: /* @__PURE__ */ jsxs26(Stack26, { gap: "md", children: [
+    /* @__PURE__ */ jsx31(Skeleton4, { height: variant === "process" ? 28 : 42, width: variant === "process" ? 72 : 42, radius: "xl" }),
+    /* @__PURE__ */ jsxs26(Stack26, { gap: "xs", children: [
+      /* @__PURE__ */ jsx31(Skeleton4, { height: 20, width: "75%", radius: "md" }),
+      /* @__PURE__ */ jsx31(Skeleton4, { height: 14, width: "100%", radius: "md" }),
+      /* @__PURE__ */ jsx31(Skeleton4, { height: 14, width: "82%", radius: "md" })
     ] })
   ] }) }, index)) });
 }
@@ -1460,10 +1968,10 @@ function FeatureBand({
   variant = "default"
 }) {
   if (loading) {
-    return /* @__PURE__ */ jsx24(FeatureBandSkeleton, { columns, bordered, variant });
+    return /* @__PURE__ */ jsx31(FeatureBandSkeleton, { columns, bordered, variant });
   }
   if (!items.length) {
-    return emptyState ? /* @__PURE__ */ jsx24(Fragment3, { children: emptyState }) : /* @__PURE__ */ jsx24(
+    return emptyState ? /* @__PURE__ */ jsx31(Fragment5, { children: emptyState }) : /* @__PURE__ */ jsx31(
       EmptyState,
       {
         title: "No supporting details available",
@@ -1471,9 +1979,9 @@ function FeatureBand({
       }
     );
   }
-  return /* @__PURE__ */ jsx24(Box9, { component: "section", "aria-label": "Supporting features", children: /* @__PURE__ */ jsx24(SimpleGrid3, { cols: { base: 1, sm: Math.min(columns, 2), lg: columns }, spacing: "lg", children: items.map((item, index) => /* @__PURE__ */ jsx24(Paper6, { withBorder: bordered, radius: "lg", p: variant === "compact" ? "md" : "lg", children: /* @__PURE__ */ jsxs20(Stack20, { gap: "md", children: [
-    variant === "process" ? /* @__PURE__ */ jsx24(Group19, { children: /* @__PURE__ */ jsx24(
-      Text18,
+  return /* @__PURE__ */ jsx31(Box10, { component: "section", "aria-label": "Supporting features", children: /* @__PURE__ */ jsx31(SimpleGrid5, { cols: { base: 1, sm: Math.min(columns, 2), lg: columns }, spacing: "lg", children: items.map((item, index) => /* @__PURE__ */ jsx31(Paper7, { withBorder: bordered, radius: "lg", p: variant === "compact" ? "md" : "lg", children: /* @__PURE__ */ jsxs26(Stack26, { gap: "md", children: [
+    variant === "process" ? /* @__PURE__ */ jsx31(Group24, { children: /* @__PURE__ */ jsx31(
+      Text22,
       {
         fw: 800,
         size: "sm",
@@ -1485,30 +1993,276 @@ function FeatureBand({
         },
         children: item.stepLabel ?? `Step ${index + 1}`
       }
-    ) }) : item.media ? item.media : item.icon ? /* @__PURE__ */ jsx24(Group19, { children: /* @__PURE__ */ jsx24(ThemeIcon6, { size: "xl", radius: "xl", variant: "light", color: "violet", children: item.icon }) }) : /* @__PURE__ */ jsx24(Group19, { children: /* @__PURE__ */ jsx24(ThemeIcon6, { size: "xl", radius: "xl", variant: "light", color: "gray", "aria-hidden": true, children: /* @__PURE__ */ jsx24(GdsIcons.Info, { size: "1.25rem" }) }) }),
-    /* @__PURE__ */ jsxs20(Stack20, { gap: "xs", children: [
-      /* @__PURE__ */ jsx24(Title16, { order: 4, children: item.title }),
-      item.description ? /* @__PURE__ */ jsx24(Text18, { c: "dimmed", children: item.description }) : null,
-      item.meta ? /* @__PURE__ */ jsx24(Text18, { size: "sm", c: "dimmed", children: item.meta }) : null
+    ) }) : item.media ? item.media : item.icon ? /* @__PURE__ */ jsx31(Group24, { children: /* @__PURE__ */ jsx31(ThemeIcon9, { size: "xl", radius: "xl", variant: "light", color: "violet", children: item.icon }) }) : /* @__PURE__ */ jsx31(Group24, { children: /* @__PURE__ */ jsx31(ThemeIcon9, { size: "xl", radius: "xl", variant: "light", color: "gray", "aria-hidden": true, children: /* @__PURE__ */ jsx31(GdsIcons.Info, { size: "1.25rem" }) }) }),
+    /* @__PURE__ */ jsxs26(Stack26, { gap: "xs", children: [
+      /* @__PURE__ */ jsx31(Title19, { order: 4, children: item.title }),
+      item.description ? /* @__PURE__ */ jsx31(Text22, { c: "dimmed", children: item.description }) : null,
+      item.meta ? /* @__PURE__ */ jsx31(Text22, { size: "sm", c: "dimmed", children: item.meta }) : null
     ] })
   ] }) }, item.id)) }) });
 }
 
+// src/MapPanel.tsx
+import { AspectRatio as AspectRatio6, Box as Box11, Group as Group25, Paper as Paper8, Stack as Stack27, Text as Text23, Title as Title20 } from "@mantine/core";
+import { jsx as jsx32, jsxs as jsxs27 } from "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__ */ jsx32(
+      StateBlock,
+      {
+        variant: "loading",
+        title: "Loading map",
+        description: "The shared map panel is still preparing the embedded surface.",
+        compact: true
+      }
+    );
+  } else if (error) {
+    body = /* @__PURE__ */ jsx32(StateBlock, { variant: "error", title: "Map unavailable", description: error, compact: true });
+  } else if (!iframeSrc && !renderMap) {
+    body = /* @__PURE__ */ jsx32(
+      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__ */ jsx32(Box11, { style: { minHeight }, children: renderMap() });
+  } else {
+    body = /* @__PURE__ */ jsx32(AspectRatio6, { ratio: 16 / 9, children: /* @__PURE__ */ jsx32(
+      "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__ */ jsx32(Paper8, { withBorder: true, radius: "xl", p: "lg", children: /* @__PURE__ */ jsxs27(Stack27, { gap: "md", children: [
+    /* @__PURE__ */ jsxs27(Group25, { justify: "space-between", align: "flex-start", gap: "md", wrap: "wrap", children: [
+      /* @__PURE__ */ jsxs27(Stack27, { gap: 4, children: [
+        /* @__PURE__ */ jsx32(Title20, { order: 3, children: title }),
+        description ? /* @__PURE__ */ jsx32(Text23, { size: "sm", c: "dimmed", children: description }) : null
+      ] }),
+      actions ? /* @__PURE__ */ jsx32(ActionBar, { ...actions }) : null
+    ] }),
+    body
+  ] }) });
+}
+
+// src/PublicFlowShell.tsx
+import { Badge as Badge12, Group as Group26, Paper as Paper9, Stack as Stack28, Text as Text24, Title as Title21 } from "@mantine/core";
+import { jsx as jsx33, jsxs as jsxs28 } from "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__ */ jsx33(
+      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__ */ jsx33(
+      StateBlock,
+      {
+        variant: "error",
+        title: "Flow unavailable",
+        description: stage.description ?? "This public flow could not continue safely."
+      }
+    );
+  } else if (!stage.body && !hardwareSurface) {
+    body = emptyState ?? /* @__PURE__ */ jsx33(
+      EmptyState,
+      {
+        title: "No stage content available",
+        description: "Add the current flow stage body or a bounded hardware surface to render this contract."
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx33(Paper9, { withBorder: true, radius: "xl", p: "lg", children: /* @__PURE__ */ jsxs28(Stack28, { gap: "lg", children: [
+    /* @__PURE__ */ jsxs28(Group26, { justify: "space-between", align: "flex-start", gap: "md", wrap: "wrap", children: [
+      /* @__PURE__ */ jsxs28(Stack28, { gap: 4, children: [
+        eyebrow ? /* @__PURE__ */ jsx33(Text24, { size: "xs", fw: 700, c: "dimmed", tt: "uppercase", children: eyebrow }) : null,
+        /* @__PURE__ */ jsxs28(Group26, { gap: "sm", wrap: "wrap", children: [
+          /* @__PURE__ */ jsx33(Title21, { order: 2, children: stage.title }),
+          /* @__PURE__ */ jsx33(Badge12, { variant: "light", color: tone.color, children: tone.label })
+        ] }),
+        stage.description ? /* @__PURE__ */ jsx33(Text24, { size: "sm", c: "dimmed", children: stage.description }) : null
+      ] }),
+      exitAction
+    ] }),
+    stage.notice ? /* @__PURE__ */ jsx33(Text24, { size: "sm", c: "dimmed", children: stage.notice }) : null,
+    body,
+    hardwareSurface,
+    stage.aside,
+    actionBar ? /* @__PURE__ */ jsx33(ActionBar, { ...actionBar }) : null
+  ] }) });
+}
+
+// src/PlaybackSurface.tsx
+import { Badge as Badge13, Group as Group27, Paper as Paper10, Stack as Stack29, Text as Text25, Title as Title22 } from "@mantine/core";
+import { jsx as jsx34, jsxs as jsxs29 } from "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__ */ jsx34(
+      StateBlock,
+      {
+        variant: "loading",
+        title: "Loading playback",
+        description: "The playback surface is still preparing timed or fullscreen media."
+      }
+    );
+  } else if (state === "empty") {
+    content = emptyState ?? /* @__PURE__ */ jsx34(
+      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__ */ jsx34(
+      StateBlock,
+      {
+        variant: "error",
+        title: "Playback unavailable",
+        description: "The playback surface could not render the current media safely."
+      }
+    );
+  } else {
+    content = /* @__PURE__ */ jsxs29(Stack29, { gap: "md", children: [
+      media,
+      overlays
+    ] });
+  }
+  return /* @__PURE__ */ jsx34(Paper10, { withBorder: true, radius: "xl", p: "lg", "data-playback-mode": mode, children: /* @__PURE__ */ jsxs29(Stack29, { gap: "md", children: [
+    title || statusMessage || controls ? /* @__PURE__ */ jsxs29(Group27, { justify: "space-between", align: "flex-start", gap: "md", wrap: "wrap", children: [
+      /* @__PURE__ */ jsxs29(Stack29, { gap: 4, children: [
+        title ? /* @__PURE__ */ jsx34(Title22, { order: 3, children: title }) : null,
+        statusMessage ? /* @__PURE__ */ jsx34(Text25, { size: "sm", c: "dimmed", children: statusMessage }) : null
+      ] }),
+      /* @__PURE__ */ jsxs29(Group27, { gap: "sm", align: "center", wrap: "wrap", children: [
+        /* @__PURE__ */ jsx34(Badge13, { variant: "light", color: tone.color, children: tone.label }),
+        controls
+      ] })
+    ] }) : null,
+    state === "degraded" ? /* @__PURE__ */ jsx34(
+      StateBlock,
+      {
+        variant: "info",
+        title: "Playback degraded",
+        description: statusMessage ?? "Playback is continuing with reduced fidelity or recoverable media failures.",
+        compact: true
+      }
+    ) : null,
+    content
+  ] }) });
+}
+
 // src/FormField.tsx
-import { Box as Box10, Stack as Stack21, Text as Text19 } from "@mantine/core";
-import { jsx as jsx25, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Box as Box12, Stack as Stack30, Text as Text26 } from "@mantine/core";
+import { jsx as jsx35, jsxs as jsxs30 } from "react/jsx-runtime";
 function FormField({ label, description, error, children }) {
-  return /* @__PURE__ */ jsx25(Box10, { component: "label", children: /* @__PURE__ */ jsxs21(Stack21, { gap: 4, children: [
-    typeof label === "string" ? /* @__PURE__ */ jsx25(Text19, { size: "xs", fw: 600, c: "dimmed", children: label }) : label,
-    description ? typeof description === "string" ? /* @__PURE__ */ jsx25(Text19, { size: "xs", c: "dimmed", children: description }) : description : null,
+  return /* @__PURE__ */ jsx35(Box12, { component: "label", children: /* @__PURE__ */ jsxs30(Stack30, { gap: 4, children: [
+    typeof label === "string" ? /* @__PURE__ */ jsx35(Text26, { size: "xs", fw: 600, c: "dimmed", children: label }) : label,
+    description ? typeof description === "string" ? /* @__PURE__ */ jsx35(Text26, { size: "xs", c: "dimmed", children: description }) : description : null,
     children,
-    error ? typeof error === "string" ? /* @__PURE__ */ jsx25(Text19, { size: "xs", c: "red.7", children: error }) : error : null
+    error ? typeof error === "string" ? /* @__PURE__ */ jsx35(Text26, { size: "xs", c: "red.7", children: error }) : error : null
   ] }) });
 }
 
 // src/MediaField.tsx
-import { Badge as Badge9, Button as Button2, Divider as Divider3, Group as Group20, Paper as Paper7, Stack as Stack22, Text as Text20 } from "@mantine/core";
-import { Fragment as Fragment4, jsx as jsx26, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Badge as Badge14, Button as Button4, Divider as Divider6, Group as Group28, Paper as Paper11, Stack as Stack31, Text as Text27 } from "@mantine/core";
+import { Fragment as Fragment6, jsx as jsx36, jsxs as jsxs31 } from "react/jsx-runtime";
 var stateLabels = {
   empty: { label: "Empty", color: "gray" },
   selected: { label: "Selected", color: "blue" },
@@ -1536,32 +2290,32 @@ function MediaField({
   mode = "stacked"
 }) {
   const stateBadge = stateLabels[state];
-  const resolvedRemoveAction = removeAction ?? (onRemove ? /* @__PURE__ */ jsx26(Button2, { type: "button", variant: "light", color: "red", onClick: onRemove, children: "Remove" }) : null);
-  const resolvedResetAction = resetAction ?? (onReset ? /* @__PURE__ */ jsx26(Button2, { type: "button", variant: "default", onClick: onReset, children: "Reset" }) : null);
-  return /* @__PURE__ */ jsx26(
+  const resolvedRemoveAction = removeAction ?? (onRemove ? /* @__PURE__ */ jsx36(Button4, { type: "button", variant: "light", color: "red", onClick: onRemove, children: "Remove" }) : null);
+  const resolvedResetAction = resetAction ?? (onReset ? /* @__PURE__ */ jsx36(Button4, { type: "button", variant: "default", onClick: onReset, children: "Reset" }) : null);
+  return /* @__PURE__ */ jsx36(
     FormField,
     {
       label,
       description,
       error,
-      children: /* @__PURE__ */ jsx26(Paper7, { withBorder: true, radius: "xl", p: "lg", children: /* @__PURE__ */ jsxs22(Stack22, { gap: "md", children: [
-        /* @__PURE__ */ jsx26(Group20, { justify: "flex-end", align: "center", gap: "sm", children: /* @__PURE__ */ jsxs22(Group20, { gap: "xs", justify: "flex-end", children: [
-          /* @__PURE__ */ jsx26(Badge9, { variant: "light", color: stateBadge.color, children: stateBadge.label }),
+      children: /* @__PURE__ */ jsx36(Paper11, { withBorder: true, radius: "xl", p: "lg", children: /* @__PURE__ */ jsxs31(Stack31, { gap: "md", children: [
+        /* @__PURE__ */ jsx36(Group28, { justify: "flex-end", align: "center", gap: "sm", children: /* @__PURE__ */ jsxs31(Group28, { gap: "xs", justify: "flex-end", children: [
+          /* @__PURE__ */ jsx36(Badge14, { variant: "light", color: stateBadge.color, children: stateBadge.label }),
           statusAction
         ] }) }),
         preview ? preview : null,
-        uploadControl || urlInput ? /* @__PURE__ */ jsxs22(Fragment4, { children: [
-          /* @__PURE__ */ jsx26(Divider3, {}),
-          /* @__PURE__ */ jsxs22(Stack22, { gap: "sm", style: mode === "split" ? { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))" } : void 0, children: [
+        uploadControl || urlInput ? /* @__PURE__ */ jsxs31(Fragment6, { children: [
+          /* @__PURE__ */ jsx36(Divider6, {}),
+          /* @__PURE__ */ jsxs31(Stack31, { gap: "sm", style: mode === "split" ? { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))" } : void 0, children: [
             uploadControl,
             urlInput
           ] })
         ] }) : null,
-        value ? /* @__PURE__ */ jsx26(Text20, { size: "sm", c: "dimmed", style: { wordBreak: "break-all" }, children: value }) : null,
-        helpText ? /* @__PURE__ */ jsx26(Text20, { size: "sm", c: "dimmed", children: helpText }) : null,
-        policyText ? /* @__PURE__ */ jsx26(Text20, { size: "sm", c: error ? "red.7" : "dimmed", children: policyText }) : null,
+        value ? /* @__PURE__ */ jsx36(Text27, { size: "sm", c: "dimmed", style: { wordBreak: "break-all" }, children: value }) : null,
+        helpText ? /* @__PURE__ */ jsx36(Text27, { size: "sm", c: "dimmed", children: helpText }) : null,
+        policyText ? /* @__PURE__ */ jsx36(Text27, { size: "sm", c: error ? "red.7" : "dimmed", children: policyText }) : null,
         typeof error !== "string" && error ? error : null,
-        resolvedRemoveAction || resolvedResetAction ? /* @__PURE__ */ jsxs22(Group20, { gap: "sm", children: [
+        resolvedRemoveAction || resolvedResetAction ? /* @__PURE__ */ jsxs31(Group28, { gap: "sm", children: [
           resolvedResetAction,
           retryAction,
           resolvedRemoveAction
@@ -1572,70 +2326,72 @@ function MediaField({
 }
 
 // src/MediaCard.tsx
-import { ActionIcon as ActionIcon2, Badge as Badge10, Card as Card7, Group as Group21, Stack as Stack23, Text as Text21, Title as Title17 } from "@mantine/core";
-import { jsx as jsx27, jsxs as jsxs23 } from "react/jsx-runtime";
+import { ActionIcon as ActionIcon4, Badge as Badge15, Card as Card9, Group as Group29, Stack as Stack32, Text as Text28, Title as Title23 } from "@mantine/core";
+import { jsx as jsx37, jsxs as jsxs32 } from "react/jsx-runtime";
 function MediaCard({ title, image, description, status, overlay, actions = [] }) {
   const EyeIcon = GdsIcons.Eye;
-  return /* @__PURE__ */ jsxs23(Card7, { withBorder: true, radius: "lg", padding: "md", children: [
-    /* @__PURE__ */ jsxs23(Card7.Section, { pos: "relative", children: [
+  return /* @__PURE__ */ jsxs32(Card9, { withBorder: true, radius: "lg", padding: "md", children: [
+    /* @__PURE__ */ jsxs32(Card9.Section, { pos: "relative", children: [
       image,
-      overlay ? /* @__PURE__ */ jsx27("div", { style: { position: "absolute", inset: 12, display: "flex", justifyContent: "flex-end", alignItems: "flex-start" }, children: overlay }) : null
+      overlay ? /* @__PURE__ */ jsx37("div", { style: { position: "absolute", inset: 12, display: "flex", justifyContent: "flex-end", alignItems: "flex-start" }, children: overlay }) : null
     ] }),
-    /* @__PURE__ */ jsxs23(Stack23, { gap: "sm", mt: "md", children: [
-      /* @__PURE__ */ jsxs23(Group21, { justify: "space-between", align: "flex-start", children: [
-        /* @__PURE__ */ jsxs23(Stack23, { gap: 4, children: [
-          /* @__PURE__ */ jsx27(Title17, { order: 4, children: title }),
-          description ? /* @__PURE__ */ jsx27(Text21, { size: "sm", c: "dimmed", lineClamp: 2, children: description }) : null
+    /* @__PURE__ */ jsxs32(Stack32, { gap: "sm", mt: "md", children: [
+      /* @__PURE__ */ jsxs32(Group29, { justify: "space-between", align: "flex-start", children: [
+        /* @__PURE__ */ jsxs32(Stack32, { gap: 4, children: [
+          /* @__PURE__ */ jsx37(Title23, { order: 4, children: title }),
+          description ? /* @__PURE__ */ jsx37(Text28, { size: "sm", c: "dimmed", lineClamp: 2, children: description }) : null
         ] }),
-        status ? /* @__PURE__ */ jsx27(Badge10, { variant: "light", children: status }) : null
+        status ? /* @__PURE__ */ jsx37(Badge15, { variant: "light", children: status }) : null
       ] }),
-      actions.length ? /* @__PURE__ */ jsx27(Group21, { justify: "flex-end", gap: "xs", children: actions.map((action) => /* @__PURE__ */ jsx27(ActionIcon2, { variant: "light", "aria-label": action.label, onClick: action.onClick, children: /* @__PURE__ */ jsx27(EyeIcon, { size: "1rem" }) }, action.label)) }) : null
+      actions.length ? /* @__PURE__ */ jsx37(Group29, { justify: "flex-end", gap: "xs", children: actions.map((action) => /* @__PURE__ */ jsx37(ActionIcon4, { variant: "light", "aria-label": action.label, onClick: action.onClick, children: /* @__PURE__ */ jsx37(EyeIcon, { size: "1rem" }) }, action.label)) }) : null
     ] })
   ] });
 }
 
 // src/AccessSummary.tsx
-import { Badge as Badge11, Card as Card8, Group as Group22, Stack as Stack24, Text as Text22, Title as Title18 } from "@mantine/core";
-import { jsx as jsx28, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Badge as Badge16, Card as Card10, Group as Group30, Stack as Stack33, Text as Text29, Title as Title24 } from "@mantine/core";
+import { jsx as jsx38, jsxs as jsxs33 } from "react/jsx-runtime";
 function AccessSummary({ title, roles, scope, blocked = false, description }) {
-  return /* @__PURE__ */ jsx28(Card8, { withBorder: true, radius: "lg", padding: "lg", children: /* @__PURE__ */ jsxs24(Stack24, { gap: "sm", children: [
-    /* @__PURE__ */ jsxs24(Group22, { justify: "space-between", align: "center", children: [
-      /* @__PURE__ */ jsx28(Title18, { order: 4, children: title }),
-      /* @__PURE__ */ jsx28(Badge11, { color: blocked ? "red" : "teal", variant: "light", children: blocked ? "Blocked" : "Allowed" })
+  return /* @__PURE__ */ jsx38(Card10, { withBorder: true, radius: "lg", padding: "lg", children: /* @__PURE__ */ jsxs33(Stack33, { gap: "sm", children: [
+    /* @__PURE__ */ jsxs33(Group30, { justify: "space-between", align: "center", children: [
+      /* @__PURE__ */ jsx38(Title24, { order: 4, children: title }),
+      /* @__PURE__ */ jsx38(Badge16, { color: blocked ? "red" : "teal", variant: "light", children: blocked ? "Blocked" : "Allowed" })
     ] }),
-    /* @__PURE__ */ jsx28(Group22, { gap: "xs", children: roles.map((role) => /* @__PURE__ */ jsx28(Badge11, { variant: "outline", children: role }, role)) }),
-    scope ? /* @__PURE__ */ jsxs24(Text22, { size: "sm", c: "dimmed", children: [
+    /* @__PURE__ */ jsx38(Group30, { gap: "xs", children: roles.map((role) => /* @__PURE__ */ jsx38(Badge16, { variant: "outline", children: role }, role)) }),
+    scope ? /* @__PURE__ */ jsxs33(Text29, { size: "sm", c: "dimmed", children: [
       "Scope: ",
       scope
     ] }) : null,
-    description ? /* @__PURE__ */ jsx28(Text22, { size: "sm", children: description }) : null
+    description ? /* @__PURE__ */ jsx38(Text29, { size: "sm", children: description }) : null
   ] }) });
 }
 
 // src/PageHeader.tsx
-import { Box as Box11, Group as Group23, Stack as Stack25, Text as Text23, Title as Title19 } from "@mantine/core";
-import { jsx as jsx29, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Box as Box13, Group as Group31, Stack as Stack34, Text as Text30, Title as Title25 } from "@mantine/core";
+import { jsx as jsx39, jsxs as jsxs34 } from "react/jsx-runtime";
 function PageHeader({
   title,
   description,
+  subtitle,
   eyebrow,
   actions,
   eyebrowVariant = "neutral"
 }) {
+  const resolvedDescription = description ?? subtitle;
   const eyebrowProps = eyebrowVariant === "ornamental" ? { tt: "uppercase", style: { letterSpacing: "0.12em" } } : {};
-  return /* @__PURE__ */ jsxs25(Group23, { justify: "space-between", align: "flex-start", gap: "lg", wrap: "wrap", children: [
-    /* @__PURE__ */ jsxs25(Stack25, { gap: "xs", children: [
-      eyebrow && /* @__PURE__ */ jsx29(Text23, { size: "xs", fw: 700, c: "dimmed", ...eyebrowProps, children: eyebrow }),
-      /* @__PURE__ */ jsx29(Title19, { order: 1, children: title }),
-      description && /* @__PURE__ */ jsx29(Text23, { c: "dimmed", maw: 720, children: description })
+  return /* @__PURE__ */ jsxs34(Group31, { justify: "space-between", align: "flex-start", gap: "lg", wrap: "wrap", children: [
+    /* @__PURE__ */ jsxs34(Stack34, { gap: "xs", children: [
+      eyebrow && /* @__PURE__ */ jsx39(Text30, { size: "xs", fw: 700, c: "dimmed", ...eyebrowProps, children: eyebrow }),
+      /* @__PURE__ */ jsx39(Title25, { order: 1, children: title }),
+      resolvedDescription && /* @__PURE__ */ jsx39(Text30, { c: "dimmed", maw: 720, children: resolvedDescription })
     ] }),
-    actions ? /* @__PURE__ */ jsx29(Box11, { children: actions }) : null
+    actions ? /* @__PURE__ */ jsx39(Box13, { children: actions }) : null
   ] });
 }
 
 // src/FilterDrawer.tsx
-import { Drawer, Group as Group24, Stack as Stack26, Text as Text24 } from "@mantine/core";
-import { jsx as jsx30, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Drawer, Group as Group32, Stack as Stack35, Text as Text31 } from "@mantine/core";
+import { jsx as jsx40, jsxs as jsxs35 } from "react/jsx-runtime";
 function FilterDrawer({
   opened,
   onClose,
@@ -1651,7 +2407,7 @@ function FilterDrawer({
 }) {
   const resolvedPrimaryAction = applyAction ?? primaryAction;
   const resolvedSecondaryAction = resetAction ?? secondaryAction;
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx40(
     Drawer,
     {
       opened,
@@ -1660,11 +2416,11 @@ function FilterDrawer({
       position: mode === "bottom-sheet" ? "bottom" : "right",
       size: mode === "bottom-sheet" ? "auto" : "md",
       radius: mode === "bottom-sheet" ? "xl" : void 0,
-      children: /* @__PURE__ */ jsxs26(Stack26, { gap: "md", children: [
-        description ? /* @__PURE__ */ jsx30(Text24, { size: "sm", c: "dimmed", children: description }) : null,
+      children: /* @__PURE__ */ jsxs35(Stack35, { gap: "md", children: [
+        description ? /* @__PURE__ */ jsx40(Text31, { size: "sm", c: "dimmed", children: description }) : null,
         children,
-        resolvedPrimaryAction || resolvedSecondaryAction || closeAction ? /* @__PURE__ */ jsxs26(Group24, { justify: "space-between", mt: "md", children: [
-          /* @__PURE__ */ jsxs26(Group24, { gap: "sm", children: [
+        resolvedPrimaryAction || resolvedSecondaryAction || closeAction ? /* @__PURE__ */ jsxs35(Group32, { justify: "space-between", mt: "md", children: [
+          /* @__PURE__ */ jsxs35(Group32, { gap: "sm", children: [
             closeAction,
             resolvedSecondaryAction
           ] }),
@@ -1676,8 +2432,8 @@ function FilterDrawer({
 }
 
 // src/PlaceholderPanel.tsx
-import { Badge as Badge12, Card as Card9, Stack as Stack27, Text as Text25, Title as Title20 } from "@mantine/core";
-import { Fragment as Fragment5, jsx as jsx31, jsxs as jsxs27 } from "react/jsx-runtime";
+import { Badge as Badge17, Card as Card11, Stack as Stack36, Text as Text32, Title as Title26 } from "@mantine/core";
+import { Fragment as Fragment7, jsx as jsx41, jsxs as jsxs36 } from "react/jsx-runtime";
 function PlaceholderPanel({
   title,
   description,
@@ -1687,16 +2443,16 @@ function PlaceholderPanel({
   mode
 }) {
   if (mode === "live" && children) {
-    return /* @__PURE__ */ jsx31(Fragment5, { children });
+    return /* @__PURE__ */ jsx41(Fragment7, { children });
   }
-  return /* @__PURE__ */ jsx31(Card9, { children: /* @__PURE__ */ jsxs27(Stack27, { gap: "md", children: [
-    badge ? /* @__PURE__ */ jsx31(Badge12, { variant: "light", color: "blue", w: "fit-content", children: badge }) : null,
-    /* @__PURE__ */ jsxs27(Stack27, { gap: "xs", children: [
-      /* @__PURE__ */ jsx31(Title20, { order: 4, children: title }),
-      /* @__PURE__ */ jsx31(Text25, { c: "dimmed", children: description })
+  return /* @__PURE__ */ jsx41(Card11, { children: /* @__PURE__ */ jsxs36(Stack36, { gap: "md", children: [
+    badge ? /* @__PURE__ */ jsx41(Badge17, { variant: "light", color: "blue", w: "fit-content", children: badge }) : null,
+    /* @__PURE__ */ jsxs36(Stack36, { gap: "xs", children: [
+      /* @__PURE__ */ jsx41(Title26, { order: 4, children: title }),
+      /* @__PURE__ */ jsx41(Text32, { c: "dimmed", children: description })
     ] }),
-    footer ? /* @__PURE__ */ jsx31(Text25, { size: "sm", children: footer }) : null,
-    /* @__PURE__ */ jsx31(
+    footer ? /* @__PURE__ */ jsx41(Text32, { size: "sm", children: footer }) : null,
+    /* @__PURE__ */ jsx41(
       StateBlock,
       {
         variant: "not-enough-data",
@@ -1710,7 +2466,7 @@ function PlaceholderPanel({
 
 // src/SimpleDataTable.tsx
 import { ScrollArea, Table } from "@mantine/core";
-import { jsx as jsx32, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs37 } from "react/jsx-runtime";
 function SimpleDataTable({
   columns,
   rows,
@@ -1721,23 +2477,23 @@ function SimpleDataTable({
   getRowKey
 }) {
   if (error) {
-    return /* @__PURE__ */ jsx32(StateBlock, { variant: "error", title: "Unable to load data", description: error, compact: true });
+    return /* @__PURE__ */ jsx42(StateBlock, { variant: "error", title: "Unable to load data", description: error, compact: true });
   }
   if (loading) {
-    return /* @__PURE__ */ jsx32(StateBlock, { variant: "loading", title: "Loading data", description: "Please wait while the shared dataset is prepared.", compact: true });
+    return /* @__PURE__ */ jsx42(StateBlock, { variant: "loading", title: "Loading data", description: "Please wait while the shared dataset is prepared.", compact: true });
   }
   if (!rows.length) {
-    return /* @__PURE__ */ jsx32(StateBlock, { variant: "empty", title: emptyTitle, description: emptyDescription, compact: true });
+    return /* @__PURE__ */ jsx42(StateBlock, { variant: "empty", title: emptyTitle, description: emptyDescription, compact: true });
   }
-  return /* @__PURE__ */ jsx32(ScrollArea, { children: /* @__PURE__ */ jsxs28(Table, { striped: true, highlightOnHover: true, withTableBorder: true, withColumnBorders: true, children: [
-    /* @__PURE__ */ jsx32(Table.Thead, { children: /* @__PURE__ */ jsx32(Table.Tr, { children: columns.map((column) => /* @__PURE__ */ jsx32(Table.Th, { children: column.header }, String(column.key))) }) }),
-    /* @__PURE__ */ jsx32(Table.Tbody, { children: rows.map((row, index) => /* @__PURE__ */ jsx32(Table.Tr, { children: columns.map((column) => /* @__PURE__ */ jsx32(Table.Td, { children: column.render ? column.render(row) : String(row[column.key] ?? "") }, String(column.key))) }, getRowKey ? getRowKey(row, index) : index)) })
+  return /* @__PURE__ */ jsx42(ScrollArea, { children: /* @__PURE__ */ jsxs37(Table, { striped: true, highlightOnHover: true, withTableBorder: true, withColumnBorders: true, children: [
+    /* @__PURE__ */ jsx42(Table.Thead, { children: /* @__PURE__ */ jsx42(Table.Tr, { children: columns.map((column) => /* @__PURE__ */ jsx42(Table.Th, { children: column.header }, String(column.key))) }) }),
+    /* @__PURE__ */ jsx42(Table.Tbody, { children: rows.map((row, index) => /* @__PURE__ */ jsx42(Table.Tr, { children: columns.map((column) => /* @__PURE__ */ jsx42(Table.Td, { children: column.render ? column.render(row) : String(row[column.key] ?? "") }, String(column.key))) }, getRowKey ? getRowKey(row, index) : index)) })
   ] }) });
 }
 
 // src/StatsSection.tsx
-import { Stack as Stack28, Title as Title21 } from "@mantine/core";
-import { jsx as jsx33, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Stack as Stack37, Title as Title27 } from "@mantine/core";
+import { jsx as jsx43, jsxs as jsxs38 } from "react/jsx-runtime";
 function StatsSection({
   title,
   loading = false,
@@ -1749,11 +2505,11 @@ function StatsSection({
 }) {
   let content = children;
   if (error) {
-    content = /* @__PURE__ */ jsx33(StateBlock, { variant: "error", title: "Unable to load statistics", description: error, compact: true });
+    content = /* @__PURE__ */ jsx43(StateBlock, { variant: "error", title: "Unable to load statistics", description: error, compact: true });
   } else if (loading) {
-    content = /* @__PURE__ */ jsx33(StateBlock, { variant: "loading", title: "Loading statistics", description: "This shared data surface is still synchronizing.", compact: true });
+    content = /* @__PURE__ */ jsx43(StateBlock, { variant: "loading", title: "Loading statistics", description: "This shared data surface is still synchronizing.", compact: true });
   } else if (belowThreshold) {
-    content = /* @__PURE__ */ jsx33(
+    content = /* @__PURE__ */ jsx43(
       StateBlock,
       {
         variant: "not-enough-data",
@@ -1763,10 +2519,10 @@ function StatsSection({
       }
     );
   } else if (placeholder) {
-    content = /* @__PURE__ */ jsx33(PlaceholderPanel, { ...placeholder, mode: "placeholder" });
+    content = /* @__PURE__ */ jsx43(PlaceholderPanel, { ...placeholder, mode: "placeholder" });
   }
-  return /* @__PURE__ */ jsxs29(Stack28, { gap: "md", children: [
-    /* @__PURE__ */ jsx33(Title21, { order: 3, children: title }),
+  return /* @__PURE__ */ jsxs38(Stack37, { gap: "md", children: [
+    /* @__PURE__ */ jsx43(Title27, { order: 3, children: title }),
     content
   ] });
 }
@@ -3079,6 +3835,13 @@ export {
   EmptyState,
   GdsIcons,
   GdsVocabulary,
+  createGdsVocabularyPack,
+  mergeGdsVocabularyPacks,
+  resolveSemanticActionConfig,
+  getSemanticActionConfig,
+  getSemanticActionLabel,
+  ChoiceChip,
+  ActionBar,
   MetricCard,
   ProgressCard,
   SectionPanel,
@@ -3087,21 +3850,29 @@ export {
   EditorialCard,
   ProductCard,
   PublicProductCard,
+  PublicFoodCard,
+  FoodMenuSection,
+  ListingCard,
   DataToolbar,
   StateBlock,
   BrowseSurface,
   resolveAccentPanelStyles,
   AccentPanel,
+  DetailProfileShell,
   PublicNav,
   PublicShell,
   PublicSiteFooter,
   PublicBrandFooter,
   AuthShell,
+  SocialAuthButtons,
   ArticleShell,
   CtaButtonGroup,
   DocsPageShell,
   EditorialHero,
   FeatureBand,
+  MapPanel,
+  PublicFlowShell,
+  PlaybackSurface,
   FormField,
   MediaField,
   MediaCard,