@doneisbetter/gds-core 2.6.3 → 2.6.4

package/dist/server.js

@@ -30,33 +30,42 @@ __export(server_exports, {
   ConsumerSection: () => ConsumerSection,
   CtaButtonGroup: () => CtaButtonGroup,
   DataToolbar: () => DataToolbar,
+  DetailProfileShell: () => DetailProfileShell,
   DocsPageShell: () => DocsPageShell,
   EditorialCard: () => EditorialCard,
   EditorialHero: () => EditorialHero,
   EmptyState: () => EmptyState,
   FeatureBand: () => FeatureBand,
   FilterDrawer: () => FilterDrawer,
+  FoodMenuSection: () => FoodMenuSection,
   FormField: () => FormField,
   GdsIcons: () => GdsIcons,
   GdsVocabulary: () => GdsVocabulary,
+  ListingCard: () => ListingCard,
+  MapPanel: () => MapPanel,
   MediaCard: () => MediaCard,
   MediaField: () => MediaField,
   MetricCard: () => MetricCard,
   PageHeader: () => PageHeader,
   PlaceholderPanel: () => PlaceholderPanel,
+  PlaybackSurface: () => PlaybackSurface,
   ProductCard: () => ProductCard,
   ProgressCard: () => ProgressCard,
   PublicBrandFooter: () => PublicBrandFooter,
+  PublicFlowShell: () => PublicFlowShell,
+  PublicFoodCard: () => PublicFoodCard,
   PublicNav: () => PublicNav,
   PublicProductCard: () => PublicProductCard,
   PublicShell: () => PublicShell,
   PublicSiteFooter: () => PublicSiteFooter,
   SectionPanel: () => SectionPanel,
   SimpleDataTable: () => SimpleDataTable,
+  SocialAuthButtons: () => SocialAuthButtons,
   StateBlock: () => StateBlock,
   StatsSection: () => StatsSection,
   StatusBadge: () => StatusBadge,
   ar: () => ar,
+  createGdsVocabularyPack: () => createGdsVocabularyPack,
   de: () => de,
   en: () => en,
   es: () => es,
@@ -68,7 +77,9 @@ __export(server_exports, {
   he: () => he,
   hu: () => hu,
   it: () => it,
+  mergeGdsVocabularyPacks: () => mergeGdsVocabularyPacks,
   resolveAccentPanelStyles: () => resolveAccentPanelStyles,
+  resolveSemanticActionConfig: () => resolveSemanticActionConfig,
   ru: () => ru
 });
 module.exports = __toCommonJS(server_exports);
@@ -183,7 +194,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" } },
@@ -199,14 +209,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" } },
@@ -220,12 +228,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" } },
@@ -238,7 +244,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" } },
@@ -258,7 +263,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" } },
@@ -276,11 +280,45 @@ var GdsVocabulary = {
   refer: { id: "gds.action.refer", defaultMessage: "Refer", icon: GdsIcons.Refer, feedback: { icon: GdsIcons.Refer, color: "teal", messageId: "gds.feedback.referred" } },
   evidence: { id: "gds.action.evidence", defaultMessage: "Evidence", icon: GdsIcons.Evidence, feedback: { icon: GdsIcons.Evidence, color: "teal", messageId: "gds.feedback.added" } }
 };
-function getSemanticActionConfig(action) {
-  return GdsVocabulary[action];
+function createGdsVocabularyPack(namespace, actions) {
+  return {
+    namespace,
+    actions: Object.fromEntries(
+      Object.entries(actions).map(([key, definition]) => [
+        `${namespace}:${key}`,
+        {
+          ...definition,
+          id: `gds.action.${namespace}.${key}`
+        }
+      ])
+    )
+  };
+}
+function mergeGdsVocabularyPacks(packs = []) {
+  return packs.reduce((acc, pack) => {
+    for (const [key, definition] of Object.entries(pack.actions)) {
+      acc[key] = definition;
+    }
+    return acc;
+  }, {});
+}
+function resolveSemanticActionConfig(action, packs = []) {
+  const baseConfig = GdsVocabulary[action];
+  if (baseConfig) {
+    return baseConfig;
+  }
+  const merged = mergeGdsVocabularyPacks(packs);
+  const packConfig = merged[action];
+  if (packConfig) {
+    return packConfig;
+  }
+  throw new Error(`Unknown semantic action: ${action}`);
 }
-function getSemanticActionLabel(action, translate) {
-  const config = getSemanticActionConfig(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;
 }
 
@@ -727,12 +765,278 @@ function PublicProductCard({
   ] }) });
 }
 
-// src/BrowseSurface.tsx
+// src/PublicFoodCard.tsx
+var import_react2 = require("react");
+var import_core11 = require("@mantine/core");
+var import_jsx_runtime12 = require("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 (!(0, import_react2.isValidElement)(action)) {
+    return action;
+  }
+  return (0, import_react2.cloneElement)(action, {
+    disabled: disabled || Boolean(action.props.disabled),
+    "aria-disabled": disabled || void 0
+  });
+}
+function FoodImageFallback({ mediaRatio }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core11.AspectRatio, { ratio: ratioMap[mediaRatio], children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core11.ThemeIcon, { size: "100%", radius: "md", variant: "light", color: "gray", "aria-label": "No food image available", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(GdsIcons.Gallery, { size: "2rem" }) }) });
+}
+function LoadingFoodCard({ mediaRatio }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core11.Card, { withBorder: true, radius: "lg", padding: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_core11.Stack, { gap: "md", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core11.AspectRatio, { ratio: ratioMap[mediaRatio], children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core11.Skeleton, { radius: "md" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_core11.Stack, { gap: "xs", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core11.Skeleton, { height: 20, radius: "sm", width: "72%" }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core11.Skeleton, { height: 14, radius: "sm", width: "96%" }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core11.Skeleton, { height: 14, radius: "sm", width: "78%" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_core11.Group, { justify: "space-between", align: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core11.Skeleton, { height: 18, radius: "sm", width: 96 }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core11.Skeleton, { height: 36, radius: "md", width: 112 })
+    ] })
+  ] }) });
+}
+function PublicFoodCard({
+  title,
+  description,
+  image,
+  price,
+  priceNote,
+  state,
+  helperText,
+  pickupNote,
+  freshnessNote,
+  markers = [],
+  metadata = [],
+  primaryAction,
+  secondaryAction,
+  quantityHint,
+  mediaRatio = "dish",
+  loading = false,
+  disabled = false
+}) {
+  if (loading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(LoadingFoodCard, { mediaRatio });
+  }
+  const stateBadge = stateConfig2[state];
+  const isActionDisabled = disabled || state === "sold-out" || state === "coming-soon";
+  const resolvedPrimaryAction = enhanceAction2(primaryAction, isActionDisabled);
+  const resolvedSecondaryAction = enhanceAction2(secondaryAction, disabled);
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core11.Card, { withBorder: true, radius: "lg", padding: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_core11.Stack, { gap: "md", children: [
+    image ?? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(FoodImageFallback, { mediaRatio }),
+    markers.length > 0 || quantityHint ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_core11.Group, { justify: "space-between", align: "center", wrap: "wrap", gap: "xs", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core11.Group, { gap: "xs", wrap: "wrap", children: markers.map((marker) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core11.Badge, { variant: "light", color: markerToneMap[marker.tone ?? "default"], children: marker.label }, marker.id)) }),
+      quantityHint ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core11.Text, { size: "xs", fw: 600, c: "dimmed", children: quantityHint }) : null
+    ] }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_core11.Group, { justify: "space-between", align: "flex-start", gap: "sm", wrap: "nowrap", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_core11.Stack, { gap: 4, style: { minWidth: 0, flex: 1 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core11.Title, { order: 4, lineClamp: 2, children: title }),
+        description ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core11.Text, { size: "sm", c: "dimmed", lineClamp: 3, children: description }) : null
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core11.Badge, { variant: "light", color: stateBadge.color, children: stateBadge.label })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_core11.Group, { justify: "space-between", align: "flex-end", gap: "sm", wrap: "nowrap", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_core11.Stack, { gap: 2, style: { minWidth: 0, flex: 1 }, children: [
+        price ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core11.Text, { fw: 800, size: "lg", children: price }) : null,
+        priceNote ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core11.Text, { size: "xs", c: "dimmed", children: priceNote }) : null,
+        helperText ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core11.Text, { size: "sm", c: "dimmed", children: helperText }) : null
+      ] }),
+      resolvedPrimaryAction
+    ] }),
+    pickupNote || freshnessNote || metadata.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_core11.Stack, { gap: 6, children: [
+      pickupNote ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_core11.Group, { justify: "space-between", align: "flex-start", gap: "sm", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core11.Text, { size: "sm", c: "dimmed", children: "Pickup" }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core11.Text, { size: "sm", fw: 500, ta: "right", children: pickupNote })
+      ] }) : null,
+      freshnessNote ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_core11.Group, { justify: "space-between", align: "flex-start", gap: "sm", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core11.Text, { size: "sm", c: "dimmed", children: "Freshness" }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core11.Text, { size: "sm", fw: 500, ta: "right", children: freshnessNote })
+      ] }) : null,
+      metadata.map((item) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core11.Group, { justify: "space-between", align: "flex-start", gap: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_core11.Group, { gap: "xs", wrap: "nowrap", children: [
+        item.icon,
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core11.Text, { size: "sm", c: "dimmed", children: item.label })
+      ] }) }, item.id))
+    ] }) : null,
+    resolvedSecondaryAction ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core11.Group, { justify: "flex-end", children: resolvedSecondaryAction }) : null
+  ] }) });
+}
+
+// src/FoodMenuSection.tsx
+var import_core12 = require("@mantine/core");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function FoodMenuSection({
+  title,
+  description,
+  eyebrow,
+  categories,
+  sectionNote,
+  action,
+  emptyState,
+  columns = 3,
+  showEmptyCategories = false
+}) {
+  const normalizedCategories = (categories ?? []).filter(Boolean);
+  const visibleCategories = showEmptyCategories ? normalizedCategories : normalizedCategories.filter((category) => category.items.length > 0);
+  if (!visibleCategories.length) {
+    return emptyState ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: emptyState }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      EmptyState,
+      {
+        title: "No active menu available",
+        description: "Publish grouped menu categories here when the current weekly or seasonal menu is ready."
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Box, { component: "section", "aria-label": typeof title === "string" ? title : "Food menu section", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_core12.Stack, { gap: "xl", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_core12.Group, { justify: "space-between", align: "flex-start", gap: "md", wrap: "wrap", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_core12.Stack, { gap: 4, children: [
+        eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Text, { size: "xs", fw: 700, c: "dimmed", tt: "uppercase", children: eyebrow }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Title, { order: 2, children: title }),
+        description ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Text, { size: "sm", c: "dimmed", maw: 760, children: description }) : null,
+        sectionNote ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Text, { size: "sm", c: "dimmed", children: sectionNote }) : null
+      ] }),
+      action
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Stack, { gap: "xl", children: visibleCategories.map((category) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_core12.Stack, { gap: "md", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_core12.Stack, { gap: 4, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Title, { order: 3, children: category.title }),
+        category.description ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Text, { size: "sm", c: "dimmed", children: category.description }) : null,
+        category.helperNote ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Text, { size: "sm", c: "dimmed", children: category.helperNote }) : null
+      ] }),
+      category.items.length ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.SimpleGrid, { cols: { base: 1, sm: Math.min(columns, 2), lg: columns }, spacing: "lg", children: category.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PublicFoodCard, { ...item }, item.id)) }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        EmptyState,
+        {
+          title: "No items in this category",
+          description: "This category is defined, but it does not currently have any visible dishes or bundles."
+        }
+      )
+    ] }, category.id)) })
+  ] }) });
+}
+
+// src/ListingCard.tsx
 var import_core13 = require("@mantine/core");
+var import_jsx_runtime14 = require("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__ */ (0, import_jsx_runtime14.jsx)(import_core13.AspectRatio, { ratio: ratioMap2[mediaRatio], children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    import_core13.ThemeIcon,
+    {
+      size: "100%",
+      radius: "md",
+      variant: "light",
+      color: "gray",
+      "aria-label": "No listing image available",
+      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(GdsIcons.Gallery, { size: "2rem" })
+    }
+  ) });
+}
+function ListingAffordance({ affordance }) {
+  const config = GdsVocabulary[affordance.action];
+  const Icon = config.icon;
+  const label = affordance.ariaLabel ?? getSemanticActionLabel(affordance.action);
+  if (affordance.href) {
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      import_core13.ActionIcon,
+      {
+        component: "a",
+        href: affordance.href,
+        variant: "subtle",
+        size: "lg",
+        "aria-label": label,
+        disabled: affordance.disabled,
+        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { size: "1rem", stroke: 1.75 })
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    import_core13.ActionIcon,
+    {
+      variant: "subtle",
+      size: "lg",
+      "aria-label": label,
+      onClick: affordance.onClick,
+      disabled: affordance.disabled,
+      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { size: "1rem", stroke: 1.75 })
+    }
+  );
+}
+function ListingCard({
+  title,
+  href,
+  description,
+  image,
+  mediaRatio = "4:3",
+  metadata = [],
+  featured = false,
+  sponsoredDisclosure,
+  price,
+  primaryAction,
+  saveAction,
+  shareAction,
+  compact = false
+}) {
+  const titleContent = href && typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.Text, { component: "a", href, inherit: true, td: "none", children: title }) : title;
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.Card, { withBorder: true, radius: "lg", padding: compact ? "md" : "lg", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_core13.Stack, { gap: compact ? "sm" : "md", children: [
+    image ?? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ListingImageFallback, { mediaRatio }),
+    featured || sponsoredDisclosure ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_core13.Group, { justify: "space-between", gap: "sm", wrap: "wrap", children: [
+      featured ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.Badge, { variant: "light", color: "violet", children: "Featured" }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", {}),
+      sponsoredDisclosure ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.Text, { size: "xs", c: "dimmed", children: sponsoredDisclosure }) : null
+    ] }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_core13.Stack, { gap: 4, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.Title, { order: compact ? 5 : 4, lineClamp: 2, children: titleContent }),
+      description ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.Text, { size: "sm", c: "dimmed", lineClamp: compact ? 2 : 3, children: description }) : null
+    ] }),
+    metadata.length ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.Stack, { gap: "xs", children: metadata.map((item) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_core13.Group, { justify: "space-between", align: "flex-start", gap: "sm", wrap: "nowrap", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_core13.Group, { gap: "xs", wrap: "nowrap", style: { minWidth: 0, flex: 1 }, children: [
+        item.icon,
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.Text, { size: "sm", c: item.tone ? toneColorMap[item.tone] : "dimmed", lineClamp: 1, children: item.label })
+      ] }),
+      item.value ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.Text, { size: "sm", fw: 500, ta: "right", children: item.value }) : null
+    ] }, item.id)) }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_core13.Group, { justify: "space-between", align: "center", gap: "sm", wrap: "wrap", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.Stack, { gap: 2, style: { minWidth: 0, flex: 1 }, children: price ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.Text, { fw: 700, size: compact ? "md" : "lg", children: price }) : null }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_core13.Group, { gap: "xs", wrap: "nowrap", justify: "flex-end", style: { marginInlineStart: "auto" }, children: [
+        saveAction ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ListingAffordance, { affordance: saveAction }) : null,
+        shareAction ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ListingAffordance, { affordance: shareAction }) : null,
+        primaryAction
+      ] })
+    ] })
+  ] }) });
+}
+
+// src/BrowseSurface.tsx
+var import_core16 = require("@mantine/core");
 
 // src/DataToolbar.tsx
-var import_core11 = require("@mantine/core");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_core14 = require("@mantine/core");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function DataToolbar({
   searchSlot,
   filterSlot,
@@ -741,20 +1045,20 @@ function DataToolbar({
   createAction,
   activeFilters = []
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_core11.Stack, { gap: "sm", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_core11.Group, { justify: "space-between", align: "flex-start", gap: "sm", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_core11.Group, { flex: 1, align: "flex-start", gap: "sm", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Stack, { gap: "sm", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Group, { justify: "space-between", align: "flex-start", gap: "sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Group, { flex: 1, align: "flex-start", gap: "sm", children: [
         searchSlot,
         filterSlot,
         sortSlot
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_core11.Group, { gap: "sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Group, { gap: "sm", children: [
         resetAction,
         createAction
       ] })
     ] }),
-    activeFilters.length ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core11.Group, { gap: "xs", children: activeFilters.map((filter) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      import_core11.Badge,
+    activeFilters.length ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Group, { gap: "xs", children: activeFilters.map((filter) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      import_core14.Badge,
       {
         variant: "light",
         rightSection: filter.onRemove ? "\xD7" : void 0,
@@ -768,17 +1072,17 @@ function DataToolbar({
 }
 
 // src/StateBlock.tsx
-var import_core12 = require("@mantine/core");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_core15 = require("@mantine/core");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var variantConfig = {
-  loading: { color: "violet", icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Loader, { size: "sm" }) },
-  empty: { color: "gray", icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(GdsIcons.Inbox, { size: "1.1rem" }) },
-  error: { color: "red", icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(GdsIcons.Danger, { size: "1.1rem" }) },
-  permission: { color: "orange", icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(GdsIcons.Verify, { size: "1.1rem" }) },
-  disabled: { color: "gray", icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(GdsIcons.Toggle, { size: "1.1rem" }) },
-  success: { color: "teal", icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(GdsIcons.Success, { size: "1.1rem" }) },
-  info: { color: "blue", icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(GdsIcons.Info, { size: "1.1rem" }) },
-  "not-enough-data": { color: "yellow", icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(GdsIcons.Analytics, { size: "1.1rem" }) }
+  loading: { color: "violet", icon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_core15.Loader, { size: "sm" }) },
+  empty: { color: "gray", icon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(GdsIcons.Inbox, { size: "1.1rem" }) },
+  error: { color: "red", icon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(GdsIcons.Danger, { size: "1.1rem" }) },
+  permission: { color: "orange", icon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(GdsIcons.Verify, { size: "1.1rem" }) },
+  disabled: { color: "gray", icon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(GdsIcons.Toggle, { size: "1.1rem" }) },
+  success: { color: "teal", icon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(GdsIcons.Success, { size: "1.1rem" }) },
+  info: { color: "blue", icon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(GdsIcons.Info, { size: "1.1rem" }) },
+  "not-enough-data": { color: "yellow", icon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(GdsIcons.Analytics, { size: "1.1rem" }) }
 };
 function StateBlock({
   variant,
@@ -789,8 +1093,8 @@ function StateBlock({
   compact = false
 }) {
   const config = variantConfig[variant];
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-    import_core12.Stack,
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+    import_core15.Stack,
     {
       align: compact ? "flex-start" : "center",
       justify: "center",
@@ -798,10 +1102,10 @@ function StateBlock({
       py: compact ? "md" : "xl",
       ta: compact ? "left" : "center",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.ThemeIcon, { variant: "light", color: config.color, size: compact ? "lg" : "xl", radius: "xl", children: icon ?? config.icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_core12.Stack, { gap: 6, align: compact ? "flex-start" : "center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Title, { order: compact ? 4 : 3, children: title }),
-          description ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Text, { c: "dimmed", maw: compact ? void 0 : 480, children: description }) : null
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_core15.ThemeIcon, { variant: "light", color: config.color, size: compact ? "lg" : "xl", radius: "xl", children: icon ?? config.icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_core15.Stack, { gap: 6, align: compact ? "flex-start" : "center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_core15.Title, { order: compact ? 4 : 3, children: title }),
+          description ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_core15.Text, { c: "dimmed", maw: compact ? void 0 : 480, children: description }) : null
         ] }),
         action
       ]
@@ -810,7 +1114,7 @@ function StateBlock({
 }
 
 // src/BrowseSurface.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function BrowseSurface({
   eyebrow,
   title,
@@ -844,22 +1148,22 @@ function BrowseSurface({
   }));
   let body = content;
   if (loading) {
-    body = /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(StateBlock, { variant: "loading", title: loadingTitle, description: loadingDescription, compact: true });
+    body = /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(StateBlock, { variant: "loading", title: loadingTitle, description: loadingDescription, compact: true });
   } else if (error) {
-    body = /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(StateBlock, { variant: "error", title: errorTitle, description: error, action: errorAction ?? emptyAction, compact: true });
+    body = /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(StateBlock, { variant: "error", title: errorTitle, description: error, action: errorAction ?? emptyAction, compact: true });
   } else if (empty) {
-    body = /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(StateBlock, { variant: "empty", title: emptyTitle, description: emptyDescription, action: emptyAction, compact: true });
+    body = /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(StateBlock, { variant: "empty", title: emptyTitle, description: emptyDescription, action: emptyAction, compact: true });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_core13.Stack, { gap: "lg", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.Paper, { withBorder: true, radius: "xl", p: "xl", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_core13.Stack, { gap: "lg", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_core13.Group, { justify: "space-between", align: "flex-start", gap: "md", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_core13.Stack, { gap: "xs", maw: 760, children: [
-          eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.Text, { size: "xs", fw: 700, tt: "uppercase", c: "dimmed", style: { letterSpacing: "0.18em" }, children: eyebrow }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.Title, { order: 1, children: title }),
-          description ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.Text, { size: "lg", c: "dimmed", children: description }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_core16.Stack, { gap: "lg", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Paper, { withBorder: true, radius: "xl", p: "xl", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_core16.Stack, { gap: "lg", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_core16.Group, { justify: "space-between", align: "flex-start", gap: "md", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_core16.Stack, { gap: "xs", maw: 760, children: [
+          eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Text, { size: "xs", fw: 700, tt: "uppercase", c: "dimmed", style: { letterSpacing: "0.18em" }, children: eyebrow }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Title, { order: 1, children: title }),
+          description ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Text, { size: "lg", c: "dimmed", children: description }) : null
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_core13.Stack, { align: "flex-end", gap: "xs", children: [
-          typeof resultCount === "number" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_core13.Badge, { size: "lg", radius: "xl", variant: "light", color: "violet", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_core16.Stack, { align: "flex-end", gap: "xs", children: [
+          typeof resultCount === "number" ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_core16.Badge, { size: "lg", radius: "xl", variant: "light", color: "violet", children: [
             resultCount,
             " ",
             resultLabel
@@ -867,10 +1171,10 @@ function BrowseSurface({
           primaryControls
         ] })
       ] }),
-      scopeOptions.length ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_core13.Stack, { gap: "xs", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.Text, { size: "sm", fw: 600, c: "dimmed", children: scopeLabel }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.Group, { gap: "xs", wrap: "wrap", children: scopeOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-          import_core13.Button,
+      scopeOptions.length ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_core16.Stack, { gap: "xs", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Text, { size: "sm", fw: 600, c: "dimmed", children: scopeLabel }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Group, { gap: "xs", wrap: "wrap", children: scopeOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          import_core16.Button,
           {
             variant: option.active ? "filled" : "default",
             color: option.active ? "violet" : "gray",
@@ -882,30 +1186,30 @@ function BrowseSurface({
           option.id
         )) })
       ] }) : null,
-      locationControls ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_core13.Stack, { gap: "xs", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.Text, { size: "sm", fw: 600, c: "dimmed", children: "Location" }),
+      locationControls ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_core16.Stack, { gap: "xs", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Text, { size: "sm", fw: 600, c: "dimmed", children: "Location" }),
         locationControls
       ] }) : null,
-      toolbar || sortControl ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_core13.SimpleGrid, { cols: { base: 1, lg: sortControl ? 2 : 1 }, spacing: "md", children: [
-        toolbar ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      toolbar || sortControl ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_core16.SimpleGrid, { cols: { base: 1, lg: sortControl ? 2 : 1 }, spacing: "md", children: [
+        toolbar ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           DataToolbar,
           {
             ...toolbar,
             activeFilters: toolbarFilters.length ? toolbarFilters : toolbar.fallbackActiveFilters
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.Box, {}),
-        sortControl ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_core13.Stack, { gap: "xs", align: "stretch", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.Text, { size: "sm", fw: 600, c: "dimmed", children: "Sort" }),
+        ) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Box, {}),
+        sortControl ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_core16.Stack, { gap: "xs", align: "stretch", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Text, { size: "sm", fw: 600, c: "dimmed", children: "Sort" }),
           sortControl
         ] }) : null
       ] }) : null,
-      mobileFilters ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_core13.Stack, { hiddenFrom: "lg", gap: "xs", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.Text, { size: "sm", fw: 600, c: "dimmed", children: "Filters" }),
+      mobileFilters ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_core16.Stack, { hiddenFrom: "lg", gap: "xs", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Text, { size: "sm", fw: 600, c: "dimmed", children: "Filters" }),
         mobileFilters
       ] }) : null,
-      filterDrawer ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.Box, { hiddenFrom: "lg", children: filterDrawer }) : null,
-      activeFilters.length ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.Group, { gap: "xs", wrap: "wrap", children: activeFilters.map((filter) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-        import_core13.Badge,
+      filterDrawer ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Box, { hiddenFrom: "lg", children: filterDrawer }) : null,
+      activeFilters.length ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Group, { gap: "xs", wrap: "wrap", children: activeFilters.map((filter) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        import_core16.Badge,
         {
           variant: "light",
           color: "violet",
@@ -922,8 +1226,8 @@ function BrowseSurface({
 }
 
 // src/AccentPanel.tsx
-var import_core14 = require("@mantine/core");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_core17 = require("@mantine/core");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var toneStyles = {
   gray: {
     bg: "light-dark(var(--mantine-color-gray-0), color-mix(in srgb, var(--mantine-color-gray-7) 88%, black))",
@@ -979,29 +1283,56 @@ function AccentPanel({
   children
 }) {
   const styles = resolveAccentPanelStyles(tone, variant);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Paper, { withBorder: true, radius: "lg", p: "lg", style: styles, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Stack, { gap: "sm", children: [
-    title || badge ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Group, { justify: "space-between", align: "flex-start", gap: "sm", wrap: "wrap", children: [
-      title ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Title, { order: 4, c: "inherit", children: title }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Box, {}),
-      badge ? typeof badge === "string" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Badge, { color: tone === "amber" ? "yellow" : tone, variant: "filled", children: badge }) : badge : null
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_core17.Paper, { withBorder: true, radius: "lg", p: "lg", style: styles, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_core17.Stack, { gap: "sm", children: [
+    title || badge ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_core17.Group, { justify: "space-between", align: "flex-start", gap: "sm", wrap: "wrap", children: [
+      title ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_core17.Title, { order: 4, c: "inherit", children: title }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_core17.Box, {}),
+      badge ? typeof badge === "string" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_core17.Badge, { color: tone === "amber" ? "yellow" : tone, variant: "filled", children: badge }) : badge : null
     ] }) : null,
-    typeof children === "string" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Text, { c: "inherit", children }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Box, { c: "inherit", children })
+    typeof children === "string" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_core17.Text, { c: "inherit", children }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_core17.Box, { c: "inherit", children })
+  ] }) });
+}
+
+// src/DetailProfileShell.tsx
+var import_core18 = require("@mantine/core");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+function DetailProfileShell({
+  mode = "page",
+  hero,
+  actions,
+  sections,
+  related,
+  padding = "lg",
+  showDividers = true
+}) {
+  const content = sections.filter(Boolean);
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_core18.Paper, { withBorder: mode === "drawer", radius: mode === "drawer" ? "xl" : "md", p: padding, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_core18.Stack, { gap: "lg", children: [
+    hero,
+    actions,
+    content.map((section, index) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_core18.Stack, { gap: "lg", children: [
+      index > 0 && showDividers ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_core18.Divider, {}) : null,
+      section
+    ] }, index)),
+    related ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+      content.length && showDividers ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_core18.Divider, {}) : null,
+      related
+    ] }) : null
   ] }) });
 }
 
 // src/PublicShell.tsx
-var import_core16 = require("@mantine/core");
+var import_core20 = require("@mantine/core");
 
 // src/PublicNav.tsx
-var import_core15 = require("@mantine/core");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_core19 = require("@mantine/core");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function PublicNav({ items, activeId, renderLink }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_core15.Group, { component: "nav", "aria-label": "Primary", gap: "lg", wrap: "nowrap", children: items.map((item) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_core19.Group, { component: "nav", "aria-label": "Primary", gap: "lg", wrap: "nowrap", children: items.map((item) => {
     const active = item.id === activeId;
     if (renderLink) {
-      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: renderLink(item, active) }, item.id);
+      return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children: renderLink(item, active) }, item.id);
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-      import_core15.Anchor,
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      import_core19.Anchor,
       {
         href: item.href,
         "aria-current": active ? "page" : void 0,
@@ -1018,15 +1349,15 @@ function PublicNav({ items, activeId, renderLink }) {
 }
 
 // src/PublicShell.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function InlineMobileNavigation({
   mobileNavigation,
   className,
   mode
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_core16.Box, { component: "details", hiddenFrom: "sm", className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
-      import_core16.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_core20.Box, { component: "details", hiddenFrom: "sm", className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+      import_core20.Box,
       {
         component: "summary",
         "aria-label": mode === "drawer" ? "Open site navigation drawer" : "Open site navigation",
@@ -1038,13 +1369,13 @@ function InlineMobileNavigation({
           gap: "0.5rem"
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Burger, { opened: false, "aria-hidden": true }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Text, { size: "sm", fw: 600, children: "Menu" })
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core20.Burger, { opened: false, "aria-hidden": true }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core20.Text, { size: "sm", fw: 600, children: "Menu" })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-      import_core16.Box,
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      import_core20.Box,
       {
         mt: "sm",
         p: "sm",
@@ -1053,7 +1384,7 @@ function InlineMobileNavigation({
           border: "1px solid var(--mantine-color-default-border)",
           background: mode === "drawer" ? "light-dark(var(--mantine-color-white), color-mix(in srgb, var(--mantine-color-dark-7) 92%, black))" : "var(--mantine-color-body)"
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Stack, { gap: "sm", children: mobileNavigation })
+        children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core20.Stack, { gap: "sm", children: mobileNavigation })
       }
     )
   ] });
@@ -1074,30 +1405,30 @@ function PublicShell({
   mobileNavigationMode = "sheet",
   classNames
 }) {
-  const resolvedNavigation = navigation ?? (navItems ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(PublicNav, { items: navItems, activeId: activeNavId }) : null);
+  const resolvedNavigation = navigation ?? (navItems ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(PublicNav, { items: navItems, activeId: activeNavId }) : null);
   const containerSize = maxContentWidth ?? (compact ? "md" : "lg");
   const headerHeight = headerVariant === "compact" ? 64 : headerVariant === "branded-quiet" ? 88 : 72;
   const mainPadding = headerVariant === "compact" ? "lg" : "xl";
   const usesInlineMobileNavigation = Boolean(mobileNavigation) && mobileNavigationMode !== "sheet";
   const usesSheetMobileNavigation = Boolean(mobileNavigation) && mobileNavigationMode === "sheet";
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
-    import_core16.AppShell,
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+    import_core20.AppShell,
     {
       className: classNames?.root,
       header: { height: headerHeight },
       footer: usesSheetMobileNavigation ? { height: 68 } : void 0,
       padding: 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.AppShell.Header, { withBorder: headerBordered, className: classNames?.header, "data-header-variant": headerVariant, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Container, { size: containerSize, h: "100%", py: headerVariant === "branded-quiet" ? "sm" : 0, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
-          import_core16.Group,
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core20.AppShell.Header, { withBorder: headerBordered, className: classNames?.header, "data-header-variant": headerVariant, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core20.Container, { size: containerSize, h: "100%", py: headerVariant === "branded-quiet" ? "sm" : 0, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+          import_core20.Group,
           {
             h: "100%",
             justify: "space-between",
             wrap: "nowrap",
             gap: headerVariant === "compact" ? "sm" : "lg",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_core16.Group, { wrap: "nowrap", gap: headerVariant === "compact" ? "xs" : "sm", className: classNames?.brand, children: [
-                usesInlineMobileNavigation ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_core20.Group, { wrap: "nowrap", gap: headerVariant === "compact" ? "xs" : "sm", className: classNames?.brand, children: [
+                usesInlineMobileNavigation ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   InlineMobileNavigation,
                   {
                     mobileNavigation,
@@ -1105,17 +1436,17 @@ function PublicShell({
                     mode: mobileNavigationMode
                   }
                 ) : null,
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Box, { children: brand })
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core20.Box, { children: brand })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Group, { visibleFrom: "sm", gap: headerVariant === "compact" ? "md" : "lg", className: classNames?.navigation, children: resolvedNavigation }),
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Group, { gap: "sm", className: classNames?.actions, children: actions })
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core20.Group, { visibleFrom: "sm", gap: headerVariant === "compact" ? "md" : "lg", className: classNames?.navigation, children: resolvedNavigation }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core20.Group, { gap: "sm", className: classNames?.actions, children: actions })
             ]
           }
         ) }) }),
-        usesSheetMobileNavigation ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.AppShell.Footer, { withBorder: true, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Container, { size: containerSize, h: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Group, { h: "100%", justify: "space-around", wrap: "nowrap", children: mobileNavigation }) }) }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_core16.AppShell.Main, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Container, { size: containerSize, py: mainPadding, className: classNames?.content, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Stack, { gap: "xl", children }) }),
-          footer ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Box, { component: typeof footer === "string" ? "footer" : "div", py: "xl", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Container, { size: containerSize, children: typeof footer === "string" ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Text, { size: "sm", c: "dimmed", children: footer }) : footer }) }) : null
+        usesSheetMobileNavigation ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core20.AppShell.Footer, { withBorder: true, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core20.Container, { size: containerSize, h: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core20.Group, { h: "100%", justify: "space-around", wrap: "nowrap", children: mobileNavigation }) }) }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_core20.AppShell.Main, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core20.Container, { size: containerSize, py: mainPadding, className: classNames?.content, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core20.Stack, { gap: "xl", children }) }),
+          footer ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core20.Box, { component: typeof footer === "string" ? "footer" : "div", py: "xl", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core20.Container, { size: containerSize, children: typeof footer === "string" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core20.Text, { size: "sm", c: "dimmed", children: footer }) : footer }) }) : null
         ] })
       ]
     }
@@ -1123,18 +1454,18 @@ function PublicShell({
 }
 
 // src/PublicSiteFooter.tsx
-var import_core17 = require("@mantine/core");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_core21 = require("@mantine/core");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function PublicSiteFooter({ children, meta }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_core17.Stack, { component: "footer", gap: "xs", children: [
-    children ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_core17.Text, { size: "sm", children }) : null,
-    meta ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_core17.Group, { gap: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_core17.Text, { size: "xs", c: "dimmed", children: meta }) }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_core21.Stack, { component: "footer", gap: "xs", children: [
+    children ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_core21.Text, { size: "sm", children }) : null,
+    meta ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_core21.Group, { gap: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_core21.Text, { size: "xs", c: "dimmed", children: meta }) }) : null
   ] });
 }
 
 // src/PublicBrandFooter.tsx
-var import_core18 = require("@mantine/core");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_core22 = require("@mantine/core");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function PublicBrandFooter({
   media,
   brandTitle,
@@ -1149,8 +1480,8 @@ function PublicBrandFooter({
   const mediaSpan = layoutVariant === "immersive-media" ? 5 : 4;
   const primarySpan = media ? layoutVariant === "balanced-quote" ? 4 : 4 : secondary ? 6 : 12;
   const secondarySpan = media ? Math.max(3, 12 - mediaSpan - primarySpan) : Math.max(4, 12 - primarySpan);
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-    import_core18.Paper,
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    import_core22.Paper,
     {
       component: "footer",
       withBorder: true,
@@ -1158,19 +1489,19 @@ function PublicBrandFooter({
       p: compact ? "lg" : "xl",
       className: classNames?.root,
       "data-layout-variant": layoutVariant,
-      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_core18.Stack, { gap: "lg", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_core18.Grid, { gutter: compact ? "lg" : "xl", align: "flex-start", children: [
-          media ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_core18.Grid.Col, { span: { base: 12, md: mediaSpan }, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_core18.Box, { className: classNames?.media, children: media }) }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_core18.Grid.Col, { span: { base: 12, md: primarySpan }, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_core18.Stack, { gap: compact ? "xs" : "sm", className: classNames?.primary, children: [
-            brandTitle ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_core18.Title, { order: 4, children: brandTitle }) : null,
-            description ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_core18.Text, { c: "dimmed", children: description }) : null,
-            actions ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_core18.Box, { children: actions }) : null
+      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_core22.Stack, { gap: "lg", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_core22.Grid, { gutter: compact ? "lg" : "xl", align: "flex-start", children: [
+          media ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core22.Grid.Col, { span: { base: 12, md: mediaSpan }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core22.Box, { className: classNames?.media, children: media }) }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core22.Grid.Col, { span: { base: 12, md: primarySpan }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_core22.Stack, { gap: compact ? "xs" : "sm", className: classNames?.primary, children: [
+            brandTitle ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core22.Title, { order: 4, children: brandTitle }) : null,
+            description ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core22.Text, { c: "dimmed", children: description }) : null,
+            actions ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core22.Box, { children: actions }) : null
           ] }) }),
-          secondary ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_core18.Grid.Col, { span: { base: 12, md: secondarySpan }, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_core18.Stack, { gap: compact ? "xs" : "sm", className: classNames?.secondary, children: secondary }) }) : null
+          secondary ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core22.Grid.Col, { span: { base: 12, md: secondarySpan }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core22.Stack, { gap: compact ? "xs" : "sm", className: classNames?.secondary, children: secondary }) }) : null
         ] }),
-        legal ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_core18.Divider, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_core18.Group, { justify: "space-between", gap: "sm", wrap: "wrap", className: classNames?.legal, children: typeof legal === "string" ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_core18.Text, { size: "sm", c: "dimmed", children: legal }) : legal })
+        legal ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core22.Divider, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core22.Group, { justify: "space-between", gap: "sm", wrap: "wrap", className: classNames?.legal, children: typeof legal === "string" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core22.Text, { size: "sm", c: "dimmed", children: legal }) : legal })
         ] }) : null
       ] })
     }
@@ -1178,60 +1509,136 @@ function PublicBrandFooter({
 }
 
 // src/AuthShell.tsx
-var import_core19 = require("@mantine/core");
-var import_jsx_runtime20 = require("react/jsx-runtime");
-function AuthShell({ title, description, brand, headerActions, footer, helper, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_core19.Box, { py: { base: "xl", md: "4rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_core19.Container, { size: "xs", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_core19.Stack, { gap: "xl", children: [
-    brand || headerActions ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_core19.Group, { justify: brand && headerActions ? "space-between" : "center", align: "center", children: [
-      brand ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_core19.Box, { children: brand }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_core19.Box, {}),
-      headerActions ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_core19.Group, { gap: "sm", children: headerActions }) : null
+var import_core23 = require("@mantine/core");
+var import_jsx_runtime24 = require("react/jsx-runtime");
+function AuthShell({
+  title,
+  description,
+  brand,
+  headerActions,
+  footer,
+  helper,
+  socialAuth,
+  dividerLabel = "Or continue with your account",
+  children
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core23.Box, { py: { base: "xl", md: "4rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core23.Container, { size: "xs", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_core23.Stack, { gap: "xl", children: [
+    brand || headerActions ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_core23.Group, { justify: brand && headerActions ? "space-between" : "center", align: "center", children: [
+      brand ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core23.Box, { children: brand }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core23.Box, {}),
+      headerActions ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core23.Group, { gap: "sm", children: headerActions }) : null
     ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_core19.Card, { withBorder: true, radius: "lg", padding: "xl", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_core19.Stack, { gap: "lg", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_core19.Stack, { gap: "xs", ta: "center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_core19.Title, { order: 2, children: title }),
-        description ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_core19.Text, { c: "dimmed", size: "sm", children: description }) : null
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core23.Card, { withBorder: true, radius: "lg", padding: "xl", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_core23.Stack, { gap: "lg", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_core23.Stack, { gap: "xs", ta: "center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core23.Title, { order: 2, children: title }),
+        description ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core23.Text, { c: "dimmed", size: "sm", children: description }) : null
       ] }),
+      socialAuth ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core23.Box, { children: socialAuth }) : null,
+      socialAuth ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core23.Divider, { label: dividerLabel, labelPosition: "center" }) : null,
       children,
-      helper ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_core19.Text, { size: "sm", c: "dimmed", ta: "center", children: helper }) : null
+      helper ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core23.Text, { size: "sm", c: "dimmed", ta: "center", children: helper }) : null
     ] }) }),
-    footer ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_core19.Text, { size: "sm", c: "dimmed", ta: "center", children: footer }) : null
+    footer ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core23.Text, { size: "sm", c: "dimmed", ta: "center", children: footer }) : null
   ] }) }) });
 }
 
+// src/SocialAuthButtons.tsx
+var import_core24 = require("@mantine/core");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var providerConfig = {
+  google: { label: "Google", mark: "G", color: "red" },
+  apple: { label: "Apple", mark: "A", color: "dark" },
+  github: { label: "GitHub", mark: "GH", color: "gray" },
+  facebook: { label: "Facebook", mark: "F", color: "blue" },
+  microsoft: { label: "Microsoft", mark: "M", color: "cyan" },
+  linkedin: { label: "LinkedIn", mark: "in", color: "blue" },
+  discord: { label: "Discord", mark: "D", color: "indigo" },
+  x: { label: "X", mark: "X", color: "dark" },
+  email: { label: "Email", mark: "@", color: "gray" }
+};
+function ProviderMark({ id }) {
+  const config = providerConfig[id] ?? { label: id, mark: id.slice(0, 2).toUpperCase(), color: "gray" };
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core24.ThemeIcon, { variant: "light", color: config.color, radius: "xl", size: "md", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core24.Text, { size: "xs", fw: 700, children: config.mark }) });
+}
+function SocialAuthButton({ provider, compact = false }) {
+  const config = providerConfig[provider.id] ?? { label: provider.id, mark: provider.id.slice(0, 2).toUpperCase(), color: "gray" };
+  const label = provider.label ?? `Continue with ${config.label}`;
+  const buttonProps = provider.href ? { component: "a", href: provider.href } : { onClick: provider.onClick };
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    import_core24.Button,
+    {
+      variant: "default",
+      justify: "space-between",
+      fullWidth: true,
+      size: compact ? "sm" : "md",
+      leftSection: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ProviderMark, { id: provider.id }),
+      disabled: provider.disabled,
+      loading: provider.loading,
+      ...buttonProps,
+      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_core24.Stack, { gap: 0, align: "flex-start", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core24.Text, { inherit: true, children: label }),
+        provider.description ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core24.Text, { size: "xs", c: "dimmed", lh: 1.2, children: provider.description }) : null
+      ] })
+    }
+  );
+}
+function SocialAuthButtons({
+  providers,
+  title = "Continue with a trusted provider",
+  description,
+  layout = "stack",
+  compact = false
+}) {
+  if (!providers.length) {
+    return null;
+  }
+  const content = providers.map((provider) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(SocialAuthButton, { provider, compact }, provider.id));
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_core24.Stack, { gap: "md", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_core24.Stack, { gap: 4, ta: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_core24.Group, { justify: "center", gap: "xs", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(GdsIcons.Login, { size: "1rem" }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core24.Text, { fw: 600, children: title })
+      ] }),
+      description ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core24.Text, { size: "sm", c: "dimmed", children: description }) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core24.Divider, {}),
+    layout === "grid" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core24.SimpleGrid, { cols: { base: 1, sm: 2 }, spacing: "sm", children: content }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core24.Stack, { gap: "sm", children: content })
+  ] });
+}
+
 // src/ArticleShell.tsx
-var import_core20 = require("@mantine/core");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_core25 = require("@mantine/core");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function ArticleShell({ eyebrow, title, lead, meta, sideRail, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core20.Container, { size: "lg", py: "xl", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_core20.Group, { align: "flex-start", gap: "xl", wrap: "nowrap", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_core20.Stack, { gap: "lg", maw: 760, flex: 1, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_core20.Stack, { gap: "sm", children: [
-        eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core20.Text, { size: "sm", fw: 700, c: "dimmed", tt: "uppercase", children: eyebrow }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core20.Title, { order: 1, children: title }),
-        lead ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core20.Text, { size: "lg", c: "dimmed", children: lead }) : null,
-        meta ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core20.Group, { gap: "md", children: meta }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_core25.Container, { size: "lg", py: "xl", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_core25.Group, { align: "flex-start", gap: "xl", wrap: "nowrap", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_core25.Stack, { gap: "lg", maw: 760, flex: 1, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_core25.Stack, { gap: "sm", children: [
+        eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_core25.Text, { size: "sm", fw: 700, c: "dimmed", tt: "uppercase", children: eyebrow }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_core25.Title, { order: 1, children: title }),
+        lead ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_core25.Text, { size: "lg", c: "dimmed", children: lead }) : null,
+        meta ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_core25.Group, { gap: "md", children: meta }) : null
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core20.Stack, { gap: "md", children })
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_core25.Stack, { gap: "md", children })
     ] }),
-    sideRail ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core20.Stack, { visibleFrom: "lg", gap: "md", w: 240, children: sideRail }) : null
+    sideRail ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_core25.Stack, { visibleFrom: "lg", gap: "md", w: 240, children: sideRail }) : null
   ] }) });
 }
 
 // src/CtaButtonGroup.tsx
-var import_core21 = require("@mantine/core");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_core26 = require("@mantine/core");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function CtaButtonGroup({ primary, secondary, tertiary }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_core21.Stack, { gap: "sm", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_core21.Group, { gap: "sm", align: "stretch", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { children: primary }),
-      secondary ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { children: secondary }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_core26.Stack, { gap: "sm", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_core26.Group, { gap: "sm", align: "stretch", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { children: primary }),
+      secondary ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { children: secondary }) : null
     ] }),
-    tertiary ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { children: tertiary }) : null
+    tertiary ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { children: tertiary }) : null
   ] });
 }
 
 // src/DocsPageShell.tsx
-var import_core22 = require("@mantine/core");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_core27 = require("@mantine/core");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function DocsPageShell({
   breadcrumbs = [],
   title,
@@ -1242,27 +1649,27 @@ function DocsPageShell({
   footerNext,
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core22.Container, { size: "lg", py: "xl", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_core22.Group, { align: "flex-start", gap: "xl", wrap: "nowrap", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_core22.Stack, { component: "article", gap: "lg", maw: 760, flex: 1, children: [
-      breadcrumbs.length ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core22.Breadcrumbs, { children: breadcrumbs.map(
-        (crumb) => crumb.href ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core22.Anchor, { href: crumb.href, children: crumb.label }, `${crumb.label}-${crumb.href}`) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core22.Text, { children: crumb.label }, crumb.label)
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core27.Container, { size: "lg", py: "xl", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_core27.Group, { align: "flex-start", gap: "xl", wrap: "nowrap", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_core27.Stack, { component: "article", gap: "lg", maw: 760, flex: 1, children: [
+      breadcrumbs.length ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core27.Breadcrumbs, { children: breadcrumbs.map(
+        (crumb) => crumb.href ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core27.Anchor, { href: crumb.href, children: crumb.label }, `${crumb.label}-${crumb.href}`) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core27.Text, { children: crumb.label }, crumb.label)
       ) }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_core22.Stack, { gap: "sm", children: [
-        eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core22.Text, { size: "sm", fw: 700, c: "dimmed", children: eyebrow }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core22.Title, { order: 1, children: title }),
-        lead ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core22.Text, { size: "lg", c: "dimmed", children: lead }) : null,
-        meta ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core22.Group, { gap: "md", children: meta }) : null
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_core27.Stack, { gap: "sm", children: [
+        eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core27.Text, { size: "sm", fw: 700, c: "dimmed", children: eyebrow }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core27.Title, { order: 1, children: title }),
+        lead ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core27.Text, { size: "lg", c: "dimmed", children: lead }) : null,
+        meta ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core27.Group, { gap: "md", children: meta }) : null
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core22.Stack, { gap: "md", children }),
-      footerNext ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core22.Anchor, { href: footerNext.href, fw: 600, children: footerNext.label }) : null
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core27.Stack, { gap: "md", children }),
+      footerNext ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core27.Anchor, { href: footerNext.href, fw: 600, children: footerNext.label }) : null
     ] }),
-    sideRail ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core22.Stack, { visibleFrom: "lg", gap: "md", w: 240, children: sideRail }) : null
+    sideRail ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core27.Stack, { visibleFrom: "lg", gap: "md", w: 240, children: sideRail }) : null
   ] }) });
 }
 
 // src/EditorialHero.tsx
-var import_core23 = require("@mantine/core");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_core28 = require("@mantine/core");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function resolveActionVariant(action, index, seenPrimary) {
   const requested = action.variant ?? (index === 0 ? "primary" : "secondary");
   if (requested === "primary" && !seenPrimary) {
@@ -1274,8 +1681,8 @@ function resolveActionVariant(action, index, seenPrimary) {
   return { variant: "default", seenPrimary };
 }
 function HeroAction({ action, variant }) {
-  const content = /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-    import_core23.Anchor,
+  const content = /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    import_core28.Anchor,
     {
       href: action.href,
       onClick: action.onClick,
@@ -1299,8 +1706,8 @@ function HeroAction({ action, variant }) {
     }
   );
   if (!action.href) {
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-      import_core23.Box,
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      import_core28.Box,
       {
         component: "button",
         type: "button",
@@ -1327,30 +1734,30 @@ function HeroAction({ action, variant }) {
   return content;
 }
 function LoadingHero({ compact }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core23.Paper, { withBorder: true, radius: "xl", p: compact ? "lg" : "xl", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_core23.Grid, { gutter: compact ? "lg" : "xl", align: "center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core23.Grid.Col, { span: { base: 12, md: 6 }, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_core23.Stack, { gap: "md", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core23.Skeleton, { height: 16, width: 96, radius: "xl" }),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core23.Skeleton, { height: 48, width: "90%", radius: "md" }),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core23.Skeleton, { height: 18, width: "100%", radius: "md" }),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core23.Skeleton, { height: 18, width: "82%", radius: "md" }),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_core23.Group, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core23.Skeleton, { height: 40, width: 140, radius: "md" }),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core23.Skeleton, { height: 40, width: 140, radius: "md" })
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.Paper, { withBorder: true, radius: "xl", p: compact ? "lg" : "xl", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_core28.Grid, { gutter: compact ? "lg" : "xl", align: "center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.Grid.Col, { span: { base: 12, md: 6 }, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_core28.Stack, { gap: "md", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.Skeleton, { height: 16, width: 96, radius: "xl" }),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.Skeleton, { height: 48, width: "90%", radius: "md" }),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.Skeleton, { height: 18, width: "100%", radius: "md" }),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.Skeleton, { height: 18, width: "82%", radius: "md" }),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_core28.Group, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.Skeleton, { height: 40, width: 140, radius: "md" }),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.Skeleton, { height: 40, width: 140, radius: "md" })
       ] })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core23.Grid.Col, { span: { base: 12, md: 6 }, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core23.AspectRatio, { ratio: 16 / 11, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core23.Skeleton, { radius: "lg" }) }) })
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.Grid.Col, { span: { base: 12, md: 6 }, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.AspectRatio, { ratio: 16 / 11, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.Skeleton, { radius: "lg" }) }) })
   ] }) });
 }
 function MediaFallback() {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core23.AspectRatio, { ratio: 16 / 11, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-    import_core23.ThemeIcon,
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.AspectRatio, { ratio: 16 / 11, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    import_core28.ThemeIcon,
     {
       size: "100%",
       radius: "lg",
       color: "gray",
       variant: "light",
       "aria-label": "Hero media is unavailable",
-      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(GdsIcons.Gallery, { size: "2.5rem" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(GdsIcons.Gallery, { size: "2.5rem" })
     }
   ) });
 }
@@ -1370,8 +1777,8 @@ function MediaFrame({
   } else if (mediaFade === "soft-start") {
     overlayBackground = "linear-gradient(90deg, light-dark(rgba(255,255,255,0.9), rgba(17,24,39,0.72)) 0%, rgba(255,255,255,0) 28%)";
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
-    import_core23.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+    import_core28.Box,
     {
       component: "figure",
       m: 0,
@@ -1384,9 +1791,9 @@ function MediaFrame({
       },
       "aria-label": mediaAlt,
       children: [
-        media ?? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(MediaFallback, {}),
-        media && overlayBackground ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-          import_core23.Box,
+        media ?? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(MediaFallback, {}),
+        media && overlayBackground ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          import_core28.Box,
           {
             "aria-hidden": true,
             style: {
@@ -1419,7 +1826,7 @@ function EditorialHero({
   classNames
 }) {
   if (loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(LoadingHero, { compact });
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(LoadingHero, { compact });
   }
   const stackAlign = align === "center" ? "center" : "flex-start";
   const textAlign = align === "center" ? "center" : "left";
@@ -1427,15 +1834,15 @@ function EditorialHero({
   const renderedActions = actions.slice(0, 3).map((action, index) => {
     const resolved = resolveActionVariant(action, index, seenPrimary);
     seenPrimary = resolved.seenPrimary;
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(HeroAction, { action, variant: resolved.variant }, `${action.label}-${index}`);
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(HeroAction, { action, variant: resolved.variant }, `${action.label}-${index}`);
   });
-  const textSlot = /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_core23.Stack, { gap: compact ? "md" : "lg", justify: "center", h: "100%", className: classNames?.content, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_core23.Stack, { gap: "sm", align: stackAlign, children: [
-      eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core23.Text, { size: "sm", fw: 700, c: "dimmed", ta: textAlign, children: eyebrow }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core23.Title, { order: 1, maw: 760, ta: textAlign, children: title }),
-      description ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core23.Text, { size: compact ? "md" : "lg", c: "dimmed", maw: 720, ta: textAlign, children: description }) : null
+  const textSlot = /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_core28.Stack, { gap: compact ? "md" : "lg", justify: "center", h: "100%", className: classNames?.content, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_core28.Stack, { gap: "sm", align: stackAlign, children: [
+      eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.Text, { size: "sm", fw: 700, c: "dimmed", ta: textAlign, children: eyebrow }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.Title, { order: 1, maw: 760, ta: textAlign, children: title }),
+      description ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.Text, { size: compact ? "md" : "lg", c: "dimmed", maw: 720, ta: textAlign, children: description }) : null
     ] }),
-    renderedActions.length ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core23.Box, { className: classNames?.actions, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    renderedActions.length ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.Box, { className: classNames?.actions, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       CtaButtonGroup,
       {
         primary: renderedActions[0],
@@ -1443,8 +1850,8 @@ function EditorialHero({
         tertiary: renderedActions[2]
       }
     ) }) : null,
-    meta.length ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core23.Group, { gap: "sm", wrap: "wrap", "aria-label": "Supporting details", className: classNames?.meta, children: meta.map((item) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
-      import_core23.Group,
+    meta.length ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.Group, { gap: "sm", wrap: "wrap", "aria-label": "Supporting details", className: classNames?.meta, children: meta.map((item) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+      import_core28.Group,
       {
         gap: 6,
         px: "sm",
@@ -1455,17 +1862,17 @@ function EditorialHero({
         },
         children: [
           item.icon,
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core23.Text, { size: "sm", c: "dimmed", children: item.label })
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.Text, { size: "sm", c: "dimmed", children: item.label })
         ]
       },
       item.id
     )) }) : null
   ] });
-  const mediaSlot = error ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(AccentPanel, { tone: "red", variant: "soft-outline", title: "Media unavailable", children: error }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(MediaFrame, { media, mediaAlt, mediaFade, className: classNames?.media });
-  const textCol = /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core23.Grid.Col, { span: { base: 12, md: 6 }, order: { base: 1, md: mediaPosition === "left" ? 2 : 1 }, children: textSlot });
-  const mediaCol = /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core23.Grid.Col, { span: { base: 12, md: 6 }, order: { base: 2, md: mediaPosition === "left" ? 1 : 2 }, children: mediaSlot });
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-    import_core23.Paper,
+  const mediaSlot = error ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(AccentPanel, { tone: "red", variant: "soft-outline", title: "Media unavailable", children: error }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(MediaFrame, { media, mediaAlt, mediaFade, className: classNames?.media });
+  const textCol = /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.Grid.Col, { span: { base: 12, md: 6 }, order: { base: 1, md: mediaPosition === "left" ? 2 : 1 }, children: textSlot });
+  const mediaCol = /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.Grid.Col, { span: { base: 12, md: 6 }, order: { base: 2, md: mediaPosition === "left" ? 1 : 2 }, children: mediaSlot });
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    import_core28.Paper,
     {
       component: "section",
       withBorder: true,
@@ -1473,7 +1880,7 @@ function EditorialHero({
       p: compact ? "lg" : "xl",
       className: classNames?.root,
       style: surfaceVariant === "flat-public" ? { boxShadow: "none" } : void 0,
-      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_core23.Grid, { gutter: compact ? "lg" : "xl", align: "center", children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_core28.Grid, { gutter: compact ? "lg" : "xl", align: "center", children: [
         textCol,
         mediaCol
       ] })
@@ -1482,19 +1889,19 @@ function EditorialHero({
 }
 
 // src/FeatureBand.tsx
-var import_core24 = require("@mantine/core");
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_core29 = require("@mantine/core");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function FeatureBandSkeleton({
   columns = 3,
   bordered = true,
   variant = "default"
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core24.SimpleGrid, { cols: { base: 1, sm: Math.min(columns, 2), lg: columns }, spacing: "lg", children: Array.from({ length: columns }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core24.Paper, { withBorder: bordered, radius: "lg", p: variant === "compact" ? "md" : "lg", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_core24.Stack, { gap: "md", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core24.Skeleton, { height: variant === "process" ? 28 : 42, width: variant === "process" ? 72 : 42, radius: "xl" }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_core24.Stack, { gap: "xs", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core24.Skeleton, { height: 20, width: "75%", radius: "md" }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core24.Skeleton, { height: 14, width: "100%", radius: "md" }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core24.Skeleton, { height: 14, width: "82%", radius: "md" })
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core29.SimpleGrid, { cols: { base: 1, sm: Math.min(columns, 2), lg: columns }, spacing: "lg", children: Array.from({ length: columns }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core29.Paper, { withBorder: bordered, radius: "lg", p: variant === "compact" ? "md" : "lg", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_core29.Stack, { gap: "md", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core29.Skeleton, { height: variant === "process" ? 28 : 42, width: variant === "process" ? 72 : 42, radius: "xl" }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_core29.Stack, { gap: "xs", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core29.Skeleton, { height: 20, width: "75%", radius: "md" }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core29.Skeleton, { height: 14, width: "100%", radius: "md" }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core29.Skeleton, { height: 14, width: "82%", radius: "md" })
     ] })
   ] }) }, index)) });
 }
@@ -1507,10 +1914,10 @@ function FeatureBand({
   variant = "default"
 }) {
   if (loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(FeatureBandSkeleton, { columns, bordered, variant });
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(FeatureBandSkeleton, { columns, bordered, variant });
   }
   if (!items.length) {
-    return emptyState ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_jsx_runtime25.Fragment, { children: emptyState }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    return emptyState ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_jsx_runtime30.Fragment, { children: emptyState }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       EmptyState,
       {
         title: "No supporting details available",
@@ -1518,9 +1925,9 @@ function FeatureBand({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core24.Box, { component: "section", "aria-label": "Supporting features", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core24.SimpleGrid, { cols: { base: 1, sm: Math.min(columns, 2), lg: columns }, spacing: "lg", children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core24.Paper, { withBorder: bordered, radius: "lg", p: variant === "compact" ? "md" : "lg", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_core24.Stack, { gap: "md", children: [
-    variant === "process" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core24.Group, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-      import_core24.Text,
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core29.Box, { component: "section", "aria-label": "Supporting features", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core29.SimpleGrid, { cols: { base: 1, sm: Math.min(columns, 2), lg: columns }, spacing: "lg", children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core29.Paper, { withBorder: bordered, radius: "lg", p: variant === "compact" ? "md" : "lg", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_core29.Stack, { gap: "md", children: [
+    variant === "process" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core29.Group, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      import_core29.Text,
       {
         fw: 800,
         size: "sm",
@@ -1532,32 +1939,335 @@ function FeatureBand({
         },
         children: item.stepLabel ?? `Step ${index + 1}`
       }
-    ) }) : item.media ? item.media : item.icon ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core24.Group, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core24.ThemeIcon, { size: "xl", radius: "xl", variant: "light", color: "violet", children: item.icon }) }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core24.Group, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core24.ThemeIcon, { size: "xl", radius: "xl", variant: "light", color: "gray", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(GdsIcons.Info, { size: "1.25rem" }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_core24.Stack, { gap: "xs", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core24.Title, { order: 4, children: item.title }),
-      item.description ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core24.Text, { c: "dimmed", children: item.description }) : null,
-      item.meta ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core24.Text, { size: "sm", c: "dimmed", children: item.meta }) : null
+    ) }) : item.media ? item.media : item.icon ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core29.Group, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core29.ThemeIcon, { size: "xl", radius: "xl", variant: "light", color: "violet", children: item.icon }) }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core29.Group, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core29.ThemeIcon, { size: "xl", radius: "xl", variant: "light", color: "gray", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GdsIcons.Info, { size: "1.25rem" }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_core29.Stack, { gap: "xs", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core29.Title, { order: 4, children: item.title }),
+      item.description ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core29.Text, { c: "dimmed", children: item.description }) : null,
+      item.meta ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core29.Text, { size: "sm", c: "dimmed", children: item.meta }) : null
     ] })
   ] }) }, item.id)) }) });
 }
 
+// src/MapPanel.tsx
+var import_core31 = require("@mantine/core");
+
+// src/ActionBar.tsx
+var import_core30 = require("@mantine/core");
+var import_jsx_runtime31 = require("react/jsx-runtime");
+function renderSemanticAction(action, slot, vocabularyPacks) {
+  const { action: actionId, variant, ariaLabel, ...props } = action;
+  const fallbackVariant = slot === "primary" ? "filled" : slot === "secondary" ? "default" : "subtle";
+  const config = resolveSemanticActionConfig(actionId, vocabularyPacks);
+  const Icon = config.icon;
+  const label = getSemanticActionLabel(actionId, void 0, vocabularyPacks);
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    import_core30.Button,
+    {
+      leftSection: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Icon, { size: "1rem", stroke: 1.75 }),
+      "aria-label": ariaLabel ?? label,
+      variant: variant ?? fallbackVariant,
+      ...props,
+      children: label
+    },
+    `${slot}-${actionId}`
+  );
+}
+function ActionBar({
+  primary,
+  secondary = [],
+  tertiary = [],
+  iconOnly = [],
+  gap = "sm",
+  vocabularyPacks = []
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core30.Stack, { gap, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_core30.Group, { justify: "space-between", align: "center", gap, wrap: "wrap", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_core30.Group, { gap, wrap: "wrap", children: [
+      secondary.map((action) => renderSemanticAction(action, "secondary", vocabularyPacks)),
+      tertiary.map((action) => renderSemanticAction(action, "tertiary", vocabularyPacks))
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_core30.Group, { gap, wrap: "wrap", justify: "flex-end", style: { marginInlineStart: "auto" }, children: [
+      iconOnly.map(({ action, ariaLabel, ...props }) => {
+        const config = resolveSemanticActionConfig(action, vocabularyPacks);
+        const Icon = config.icon;
+        return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+          import_core30.ActionIcon,
+          {
+            variant: "subtle",
+            size: "lg",
+            "aria-label": ariaLabel ?? getSemanticActionLabel(action, void 0, vocabularyPacks),
+            ...props,
+            children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Icon, { size: "1rem", stroke: 1.75 })
+          },
+          `icon-${action}`
+        );
+      }),
+      primary ? renderSemanticAction(primary, "primary", vocabularyPacks) : null
+    ] })
+  ] }) });
+}
+
+// src/MapPanel.tsx
+var import_jsx_runtime32 = require("react/jsx-runtime");
+function MapPanel({
+  title,
+  description,
+  actions,
+  loading = false,
+  empty,
+  error,
+  embedTitle,
+  iframeSrc,
+  iframeSandbox = "allow-scripts allow-same-origin allow-popups",
+  renderMap,
+  minHeight = 320
+}) {
+  let body;
+  if (loading) {
+    body = /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      StateBlock,
+      {
+        variant: "loading",
+        title: "Loading map",
+        description: "The shared map panel is still preparing the embedded surface.",
+        compact: true
+      }
+    );
+  } else if (error) {
+    body = /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(StateBlock, { variant: "error", title: "Map unavailable", description: error, compact: true });
+  } else if (!iframeSrc && !renderMap) {
+    body = /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      StateBlock,
+      {
+        variant: "empty",
+        title: "No map available",
+        description: empty ?? "Add coordinates or a sanctioned embed source to render this panel.",
+        compact: true
+      }
+    );
+  } else if (renderMap) {
+    body = /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core31.Box, { style: { minHeight }, children: renderMap() });
+  } else {
+    body = /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core31.AspectRatio, { ratio: 16 / 9, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      "iframe",
+      {
+        src: iframeSrc,
+        title: embedTitle ?? "Embedded map",
+        sandbox: iframeSandbox,
+        loading: "lazy",
+        referrerPolicy: "no-referrer-when-downgrade",
+        style: { width: "100%", height: "100%", border: 0, borderRadius: 12 }
+      }
+    ) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core31.Paper, { withBorder: true, radius: "xl", p: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_core31.Stack, { gap: "md", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_core31.Group, { justify: "space-between", align: "flex-start", gap: "md", wrap: "wrap", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_core31.Stack, { gap: 4, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core31.Title, { order: 3, children: title }),
+        description ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core31.Text, { size: "sm", c: "dimmed", children: description }) : null
+      ] }),
+      actions ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ActionBar, { ...actions }) : null
+    ] }),
+    body
+  ] }) });
+}
+
+// src/PublicFlowShell.tsx
+var import_core32 = require("@mantine/core");
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var stageTone = {
+  idle: { label: "Idle", color: "gray" },
+  loading: { label: "Loading", color: "blue" },
+  ready: { label: "Ready", color: "teal" },
+  error: { label: "Error", color: "red" },
+  complete: { label: "Complete", color: "teal" }
+};
+function toActionBar(actions = []) {
+  if (!actions.length) {
+    return void 0;
+  }
+  const ordered = [...actions].sort((left, right) => {
+    const rank = { primary: 0, secondary: 1, tertiary: 2 };
+    return rank[left.priority] - rank[right.priority];
+  });
+  const primary = ordered.find((action) => action.priority === "primary");
+  const secondary = ordered.filter((action) => action.priority === "secondary");
+  const tertiary = ordered.filter((action) => action.priority === "tertiary");
+  return {
+    primary: primary ? {
+      action: primary.action,
+      disabled: primary.disabled,
+      loading: primary.loading,
+      onClick: primary.onClick
+    } : void 0,
+    secondary: secondary.map((action) => ({
+      action: action.action,
+      disabled: action.disabled,
+      loading: action.loading,
+      onClick: action.onClick
+    })),
+    tertiary: tertiary.map((action) => ({
+      action: action.action,
+      disabled: action.disabled,
+      loading: action.loading,
+      onClick: action.onClick
+    }))
+  };
+}
+function PublicFlowShell({
+  stage,
+  eyebrow,
+  exitAction,
+  hardwareSurface,
+  emptyState,
+  errorState
+}) {
+  const tone = stageTone[stage.status];
+  const actionBar = toActionBar(stage.actions);
+  let body = stage.body;
+  if (stage.status === "loading") {
+    body = /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      StateBlock,
+      {
+        variant: "loading",
+        title: "Preparing flow",
+        description: stage.description ?? "The current public flow stage is still loading."
+      }
+    );
+  } else if (stage.status === "error") {
+    body = errorState ?? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      StateBlock,
+      {
+        variant: "error",
+        title: "Flow unavailable",
+        description: stage.description ?? "This public flow could not continue safely."
+      }
+    );
+  } else if (!stage.body && !hardwareSurface) {
+    body = emptyState ?? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      EmptyState,
+      {
+        title: "No stage content available",
+        description: "Add the current flow stage body or a bounded hardware surface to render this contract."
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core32.Paper, { withBorder: true, radius: "xl", p: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_core32.Stack, { gap: "lg", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_core32.Group, { justify: "space-between", align: "flex-start", gap: "md", wrap: "wrap", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_core32.Stack, { gap: 4, children: [
+        eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core32.Text, { size: "xs", fw: 700, c: "dimmed", tt: "uppercase", children: eyebrow }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_core32.Group, { gap: "sm", wrap: "wrap", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core32.Title, { order: 2, children: stage.title }),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core32.Badge, { variant: "light", color: tone.color, children: tone.label })
+        ] }),
+        stage.description ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core32.Text, { size: "sm", c: "dimmed", children: stage.description }) : null
+      ] }),
+      exitAction
+    ] }),
+    stage.notice ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core32.Text, { size: "sm", c: "dimmed", children: stage.notice }) : null,
+    body,
+    hardwareSurface,
+    stage.aside,
+    actionBar ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ActionBar, { ...actionBar }) : null
+  ] }) });
+}
+
+// src/PlaybackSurface.tsx
+var import_core33 = require("@mantine/core");
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var stateTone = {
+  loading: { label: "Loading", color: "blue" },
+  ready: { label: "Ready", color: "teal" },
+  playing: { label: "Playing", color: "teal" },
+  empty: { label: "Empty", color: "gray" },
+  error: { label: "Error", color: "red" },
+  degraded: { label: "Degraded", color: "orange" }
+};
+function PlaybackSurface({
+  title,
+  state,
+  media,
+  statusMessage,
+  controls,
+  emptyState,
+  errorState,
+  overlays,
+  mode = "embedded"
+}) {
+  const tone = stateTone[state];
+  let content;
+  if (state === "loading") {
+    content = /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      StateBlock,
+      {
+        variant: "loading",
+        title: "Loading playback",
+        description: "The playback surface is still preparing timed or fullscreen media."
+      }
+    );
+  } else if (state === "empty") {
+    content = emptyState ?? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      EmptyState,
+      {
+        title: "No playback content available",
+        description: "Add media assets or a playlist to render this playback surface."
+      }
+    );
+  } else if (state === "error") {
+    content = errorState ?? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      StateBlock,
+      {
+        variant: "error",
+        title: "Playback unavailable",
+        description: "The playback surface could not render the current media safely."
+      }
+    );
+  } else {
+    content = /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_core33.Stack, { gap: "md", children: [
+      media,
+      overlays
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_core33.Paper, { withBorder: true, radius: "xl", p: "lg", "data-playback-mode": mode, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_core33.Stack, { gap: "md", children: [
+    title || statusMessage || controls ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_core33.Group, { justify: "space-between", align: "flex-start", gap: "md", wrap: "wrap", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_core33.Stack, { gap: 4, children: [
+        title ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_core33.Title, { order: 3, children: title }) : null,
+        statusMessage ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_core33.Text, { size: "sm", c: "dimmed", children: statusMessage }) : null
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_core33.Group, { gap: "sm", align: "center", wrap: "wrap", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_core33.Badge, { variant: "light", color: tone.color, children: tone.label }),
+        controls
+      ] })
+    ] }) : null,
+    state === "degraded" ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      StateBlock,
+      {
+        variant: "info",
+        title: "Playback degraded",
+        description: statusMessage ?? "Playback is continuing with reduced fidelity or recoverable media failures.",
+        compact: true
+      }
+    ) : null,
+    content
+  ] }) });
+}
+
 // src/MediaField.tsx
-var import_core26 = require("@mantine/core");
+var import_core35 = require("@mantine/core");
 
 // src/FormField.tsx
-var import_core25 = require("@mantine/core");
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_core34 = require("@mantine/core");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 function FormField({ label, description, error, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_core25.Box, { component: "label", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_core25.Stack, { gap: 4, children: [
-    typeof label === "string" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_core25.Text, { size: "xs", fw: 600, c: "dimmed", children: label }) : label,
-    description ? typeof description === "string" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_core25.Text, { size: "xs", c: "dimmed", children: description }) : description : null,
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_core34.Box, { component: "label", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_core34.Stack, { gap: 4, children: [
+    typeof label === "string" ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_core34.Text, { size: "xs", fw: 600, c: "dimmed", children: label }) : label,
+    description ? typeof description === "string" ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_core34.Text, { size: "xs", c: "dimmed", children: description }) : description : null,
     children,
-    error ? typeof error === "string" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_core25.Text, { size: "xs", c: "red.7", children: error }) : error : null
+    error ? typeof error === "string" ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_core34.Text, { size: "xs", c: "red.7", children: error }) : error : null
   ] }) });
 }
 
 // src/MediaField.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var stateLabels = {
   empty: { label: "Empty", color: "gray" },
   selected: { label: "Selected", color: "blue" },
@@ -1585,32 +2295,32 @@ function MediaField({
   mode = "stacked"
 }) {
   const stateBadge = stateLabels[state];
-  const resolvedRemoveAction = removeAction ?? (onRemove ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_core26.Button, { type: "button", variant: "light", color: "red", onClick: onRemove, children: "Remove" }) : null);
-  const resolvedResetAction = resetAction ?? (onReset ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_core26.Button, { type: "button", variant: "default", onClick: onReset, children: "Reset" }) : null);
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  const resolvedRemoveAction = removeAction ?? (onRemove ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core35.Button, { type: "button", variant: "light", color: "red", onClick: onRemove, children: "Remove" }) : null);
+  const resolvedResetAction = resetAction ?? (onReset ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core35.Button, { type: "button", variant: "default", onClick: onReset, children: "Reset" }) : null);
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     FormField,
     {
       label,
       description,
       error,
-      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_core26.Paper, { withBorder: true, radius: "xl", p: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_core26.Stack, { gap: "md", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_core26.Group, { justify: "flex-end", align: "center", gap: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_core26.Group, { gap: "xs", justify: "flex-end", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_core26.Badge, { variant: "light", color: stateBadge.color, children: stateBadge.label }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core35.Paper, { withBorder: true, radius: "xl", p: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_core35.Stack, { gap: "md", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core35.Group, { justify: "flex-end", align: "center", gap: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_core35.Group, { gap: "xs", justify: "flex-end", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core35.Badge, { variant: "light", color: stateBadge.color, children: stateBadge.label }),
           statusAction
         ] }) }),
         preview ? preview : null,
-        uploadControl || urlInput ? /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_core26.Divider, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_core26.Stack, { gap: "sm", style: mode === "split" ? { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))" } : void 0, children: [
+        uploadControl || urlInput ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core35.Divider, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_core35.Stack, { gap: "sm", style: mode === "split" ? { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))" } : void 0, children: [
             uploadControl,
             urlInput
           ] })
         ] }) : null,
-        value ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_core26.Text, { size: "sm", c: "dimmed", style: { wordBreak: "break-all" }, children: value }) : null,
-        helpText ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_core26.Text, { size: "sm", c: "dimmed", children: helpText }) : null,
-        policyText ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_core26.Text, { size: "sm", c: error ? "red.7" : "dimmed", children: policyText }) : null,
+        value ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core35.Text, { size: "sm", c: "dimmed", style: { wordBreak: "break-all" }, children: value }) : null,
+        helpText ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core35.Text, { size: "sm", c: "dimmed", children: helpText }) : null,
+        policyText ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core35.Text, { size: "sm", c: error ? "red.7" : "dimmed", children: policyText }) : null,
         typeof error !== "string" && error ? error : null,
-        resolvedRemoveAction || resolvedResetAction ? /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_core26.Group, { gap: "sm", children: [
+        resolvedRemoveAction || resolvedResetAction ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_core35.Group, { gap: "sm", children: [
           resolvedResetAction,
           retryAction,
           resolvedRemoveAction
@@ -1621,49 +2331,49 @@ function MediaField({
 }
 
 // src/MediaCard.tsx
-var import_core27 = require("@mantine/core");
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_core36 = require("@mantine/core");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 function MediaCard({ title, image, description, status, overlay, actions = [] }) {
   const EyeIcon = GdsIcons.Eye;
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_core27.Card, { withBorder: true, radius: "lg", padding: "md", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_core27.Card.Section, { pos: "relative", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_core36.Card, { withBorder: true, radius: "lg", padding: "md", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_core36.Card.Section, { pos: "relative", children: [
       image,
-      overlay ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { style: { position: "absolute", inset: 12, display: "flex", justifyContent: "flex-end", alignItems: "flex-start" }, children: overlay }) : null
+      overlay ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { style: { position: "absolute", inset: 12, display: "flex", justifyContent: "flex-end", alignItems: "flex-start" }, children: overlay }) : null
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_core27.Stack, { gap: "sm", mt: "md", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_core27.Group, { justify: "space-between", align: "flex-start", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_core27.Stack, { gap: 4, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core27.Title, { order: 4, children: title }),
-          description ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core27.Text, { size: "sm", c: "dimmed", lineClamp: 2, children: description }) : null
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_core36.Stack, { gap: "sm", mt: "md", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_core36.Group, { justify: "space-between", align: "flex-start", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_core36.Stack, { gap: 4, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core36.Title, { order: 4, children: title }),
+          description ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core36.Text, { size: "sm", c: "dimmed", lineClamp: 2, children: description }) : null
         ] }),
-        status ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core27.Badge, { variant: "light", children: status }) : null
+        status ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core36.Badge, { variant: "light", children: status }) : null
       ] }),
-      actions.length ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core27.Group, { justify: "flex-end", gap: "xs", children: actions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core27.ActionIcon, { variant: "light", "aria-label": action.label, onClick: action.onClick, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(EyeIcon, { size: "1rem" }) }, action.label)) }) : null
+      actions.length ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core36.Group, { justify: "flex-end", gap: "xs", children: actions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core36.ActionIcon, { variant: "light", "aria-label": action.label, onClick: action.onClick, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(EyeIcon, { size: "1rem" }) }, action.label)) }) : null
     ] })
   ] });
 }
 
 // src/AccessSummary.tsx
-var import_core28 = require("@mantine/core");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_core37 = require("@mantine/core");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 function AccessSummary({ title, roles, scope, blocked = false, description }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.Card, { withBorder: true, radius: "lg", padding: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_core28.Stack, { gap: "sm", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_core28.Group, { justify: "space-between", align: "center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.Title, { order: 4, children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.Badge, { color: blocked ? "red" : "teal", variant: "light", children: blocked ? "Blocked" : "Allowed" })
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core37.Card, { withBorder: true, radius: "lg", padding: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_core37.Stack, { gap: "sm", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_core37.Group, { justify: "space-between", align: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core37.Title, { order: 4, children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core37.Badge, { color: blocked ? "red" : "teal", variant: "light", children: blocked ? "Blocked" : "Allowed" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.Group, { gap: "xs", children: roles.map((role) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.Badge, { variant: "outline", children: role }, role)) }),
-    scope ? /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_core28.Text, { size: "sm", c: "dimmed", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core37.Group, { gap: "xs", children: roles.map((role) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core37.Badge, { variant: "outline", children: role }, role)) }),
+    scope ? /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_core37.Text, { size: "sm", c: "dimmed", children: [
       "Scope: ",
       scope
     ] }) : null,
-    description ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.Text, { size: "sm", children: description }) : null
+    description ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core37.Text, { size: "sm", children: description }) : null
   ] }) });
 }
 
 // src/PageHeader.tsx
-var import_core29 = require("@mantine/core");
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_core38 = require("@mantine/core");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 function PageHeader({
   title,
   description,
@@ -1674,19 +2384,19 @@ function PageHeader({
 }) {
   const resolvedDescription = description ?? subtitle;
   const eyebrowProps = eyebrowVariant === "ornamental" ? { tt: "uppercase", style: { letterSpacing: "0.12em" } } : {};
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_core29.Group, { justify: "space-between", align: "flex-start", gap: "lg", wrap: "wrap", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_core29.Stack, { gap: "xs", children: [
-      eyebrow && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core29.Text, { size: "xs", fw: 700, c: "dimmed", ...eyebrowProps, children: eyebrow }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core29.Title, { order: 1, children: title }),
-      resolvedDescription && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core29.Text, { c: "dimmed", maw: 720, children: resolvedDescription })
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_core38.Group, { justify: "space-between", align: "flex-start", gap: "lg", wrap: "wrap", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_core38.Stack, { gap: "xs", children: [
+      eyebrow && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_core38.Text, { size: "xs", fw: 700, c: "dimmed", ...eyebrowProps, children: eyebrow }),
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_core38.Title, { order: 1, children: title }),
+      resolvedDescription && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_core38.Text, { c: "dimmed", maw: 720, children: resolvedDescription })
     ] }),
-    actions ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core29.Box, { children: actions }) : null
+    actions ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_core38.Box, { children: actions }) : null
   ] });
 }
 
 // src/FilterDrawer.tsx
-var import_core30 = require("@mantine/core");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_core39 = require("@mantine/core");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 function FilterDrawer({
   opened,
   onClose,
@@ -1702,8 +2412,8 @@ function FilterDrawer({
 }) {
   const resolvedPrimaryAction = applyAction ?? primaryAction;
   const resolvedSecondaryAction = resetAction ?? secondaryAction;
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-    import_core30.Drawer,
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    import_core39.Drawer,
     {
       opened,
       onClose,
@@ -1711,11 +2421,11 @@ function FilterDrawer({
       position: mode === "bottom-sheet" ? "bottom" : "right",
       size: mode === "bottom-sheet" ? "auto" : "md",
       radius: mode === "bottom-sheet" ? "xl" : void 0,
-      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_core30.Stack, { gap: "md", children: [
-        description ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core30.Text, { size: "sm", c: "dimmed", children: description }) : null,
+      children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_core39.Stack, { gap: "md", children: [
+        description ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_core39.Text, { size: "sm", c: "dimmed", children: description }) : null,
         children,
-        resolvedPrimaryAction || resolvedSecondaryAction || closeAction ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_core30.Group, { justify: "space-between", mt: "md", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_core30.Group, { gap: "sm", children: [
+        resolvedPrimaryAction || resolvedSecondaryAction || closeAction ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_core39.Group, { justify: "space-between", mt: "md", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_core39.Group, { gap: "sm", children: [
             closeAction,
             resolvedSecondaryAction
           ] }),
@@ -1727,8 +2437,8 @@ function FilterDrawer({
 }
 
 // src/PlaceholderPanel.tsx
-var import_core31 = require("@mantine/core");
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_core40 = require("@mantine/core");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 function PlaceholderPanel({
   title,
   description,
@@ -1738,16 +2448,16 @@ function PlaceholderPanel({
   mode
 }) {
   if (mode === "live" && children) {
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_jsx_runtime32.Fragment, { children });
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_jsx_runtime41.Fragment, { children });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core31.Card, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_core31.Stack, { gap: "md", children: [
-    badge ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core31.Badge, { variant: "light", color: "blue", w: "fit-content", children: badge }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_core31.Stack, { gap: "xs", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core31.Title, { order: 4, children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core31.Text, { c: "dimmed", children: description })
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_core40.Card, { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_core40.Stack, { gap: "md", children: [
+    badge ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_core40.Badge, { variant: "light", color: "blue", w: "fit-content", children: badge }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_core40.Stack, { gap: "xs", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_core40.Title, { order: 4, children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_core40.Text, { c: "dimmed", children: description })
     ] }),
-    footer ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core31.Text, { size: "sm", children: footer }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    footer ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_core40.Text, { size: "sm", children: footer }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
       StateBlock,
       {
         variant: "not-enough-data",
@@ -1760,8 +2470,8 @@ function PlaceholderPanel({
 }
 
 // src/SimpleDataTable.tsx
-var import_core32 = require("@mantine/core");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_core41 = require("@mantine/core");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 function SimpleDataTable({
   columns,
   rows,
@@ -1772,23 +2482,23 @@ function SimpleDataTable({
   getRowKey
 }) {
   if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(StateBlock, { variant: "error", title: "Unable to load data", description: error, compact: true });
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(StateBlock, { variant: "error", title: "Unable to load data", description: error, compact: true });
   }
   if (loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(StateBlock, { variant: "loading", title: "Loading data", description: "Please wait while the shared dataset is prepared.", compact: true });
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(StateBlock, { variant: "loading", title: "Loading data", description: "Please wait while the shared dataset is prepared.", compact: true });
   }
   if (!rows.length) {
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(StateBlock, { variant: "empty", title: emptyTitle, description: emptyDescription, compact: true });
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(StateBlock, { variant: "empty", title: emptyTitle, description: emptyDescription, compact: true });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core32.ScrollArea, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_core32.Table, { striped: true, highlightOnHover: true, withTableBorder: true, withColumnBorders: true, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core32.Table.Thead, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core32.Table.Tr, { children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core32.Table.Th, { children: column.header }, String(column.key))) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core32.Table.Tbody, { children: rows.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core32.Table.Tr, { children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core32.Table.Td, { children: column.render ? column.render(row) : String(row[column.key] ?? "") }, String(column.key))) }, getRowKey ? getRowKey(row, index) : index)) })
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core41.ScrollArea, { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_core41.Table, { striped: true, highlightOnHover: true, withTableBorder: true, withColumnBorders: true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core41.Table.Thead, { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core41.Table.Tr, { children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core41.Table.Th, { children: column.header }, String(column.key))) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core41.Table.Tbody, { children: rows.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core41.Table.Tr, { children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core41.Table.Td, { children: column.render ? column.render(row) : String(row[column.key] ?? "") }, String(column.key))) }, getRowKey ? getRowKey(row, index) : index)) })
   ] }) });
 }
 
 // src/StatsSection.tsx
-var import_core33 = require("@mantine/core");
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_core42 = require("@mantine/core");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 function StatsSection({
   title,
   loading = false,
@@ -1800,11 +2510,11 @@ function StatsSection({
 }) {
   let content = children;
   if (error) {
-    content = /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(StateBlock, { variant: "error", title: "Unable to load statistics", description: error, compact: true });
+    content = /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(StateBlock, { variant: "error", title: "Unable to load statistics", description: error, compact: true });
   } else if (loading) {
-    content = /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(StateBlock, { variant: "loading", title: "Loading statistics", description: "This shared data surface is still synchronizing.", compact: true });
+    content = /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(StateBlock, { variant: "loading", title: "Loading statistics", description: "This shared data surface is still synchronizing.", compact: true });
   } else if (belowThreshold) {
-    content = /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    content = /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
       StateBlock,
       {
         variant: "not-enough-data",
@@ -1814,10 +2524,10 @@ function StatsSection({
       }
     );
   } else if (placeholder) {
-    content = /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(PlaceholderPanel, { ...placeholder, mode: "placeholder" });
+    content = /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PlaceholderPanel, { ...placeholder, mode: "placeholder" });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_core33.Stack, { gap: "md", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_core33.Title, { order: 3, children: title }),
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_core42.Stack, { gap: "md", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core42.Title, { order: 3, children: title }),
     content
   ] });
 }
@@ -3136,33 +3846,42 @@ function getGdsMessages(locale) {
   ConsumerSection,
   CtaButtonGroup,
   DataToolbar,
+  DetailProfileShell,
   DocsPageShell,
   EditorialCard,
   EditorialHero,
   EmptyState,
   FeatureBand,
   FilterDrawer,
+  FoodMenuSection,
   FormField,
   GdsIcons,
   GdsVocabulary,
+  ListingCard,
+  MapPanel,
   MediaCard,
   MediaField,
   MetricCard,
   PageHeader,
   PlaceholderPanel,
+  PlaybackSurface,
   ProductCard,
   ProgressCard,
   PublicBrandFooter,
+  PublicFlowShell,
+  PublicFoodCard,
   PublicNav,
   PublicProductCard,
   PublicShell,
   PublicSiteFooter,
   SectionPanel,
   SimpleDataTable,
+  SocialAuthButtons,
   StateBlock,
   StatsSection,
   StatusBadge,
   ar,
+  createGdsVocabularyPack,
   de,
   en,
   es,
@@ -3174,6 +3893,8 @@ function getGdsMessages(locale) {
   he,
   hu,
   it,
+  mergeGdsVocabularyPacks,
   resolveAccentPanelStyles,
+  resolveSemanticActionConfig,
   ru
 });