@open-mercato/core 0.6.7-develop.6785.1.1dd7cfac55 → 0.6.7-develop.6795.1.8a3f27921c

package/dist/modules/design_system/gallery/entries/scaffolding.js

@@ -0,0 +1,378 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Archive, Copy, Download, Lock, Plus, Trash2, UserRound } from "lucide-react";
+import { Badge } from "@open-mercato/ui/primitives/badge";
+import { Button } from "@open-mercato/ui/primitives/button";
+import { Page, PageBody, PageHeader } from "@open-mercato/ui/backend/Page";
+import { CollapsibleSection, SectionHeader } from "@open-mercato/ui/backend/SectionHeader";
+import {
+  SectionNav,
+  SectionPage
+} from "@open-mercato/ui/backend/section-page";
+import {
+  ActionsDropdown,
+  FormFooter,
+  FormHeader
+} from "@open-mercato/ui/backend/forms";
+const demoSections = [
+  {
+    id: "account",
+    label: "Account",
+    items: [
+      { id: "profile", label: "Profile", href: "#profile", icon: /* @__PURE__ */ jsx(UserRound, { className: "size-4" }) },
+      { id: "security", label: "Security", href: "#security", icon: /* @__PURE__ */ jsx(Lock, { className: "size-4" }) }
+    ]
+  }
+];
+function SectionPageMiniDemo() {
+  return /* @__PURE__ */ jsx("div", { className: "h-80 w-full overflow-hidden rounded-lg border bg-background", children: /* @__PURE__ */ jsx(SectionPage, { title: "Settings", sections: demoSections, activePath: "#profile", children: /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold", children: "Profile" }),
+    /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Section content renders here." })
+  ] }) }) });
+}
+function SectionNavDemo() {
+  const [collapsed, setCollapsed] = React.useState(false);
+  return /* @__PURE__ */ jsx("div", { className: "w-64 rounded-lg border bg-background px-3 py-4", children: /* @__PURE__ */ jsx(
+    SectionNav,
+    {
+      title: "Settings",
+      sections: demoSections,
+      activePath: "#profile",
+      collapsed,
+      onToggleCollapse: () => setCollapsed((value) => !value)
+    }
+  ) });
+}
+const demoActions = [
+  { id: "duplicate", label: "Duplicate record", icon: Copy, onSelect: () => {
+  } },
+  { id: "export", label: "Export as CSV", icon: Download, onSelect: () => {
+  } },
+  { id: "delete", label: "Delete record", icon: Trash2, onSelect: () => {
+  } }
+];
+const pageEntry = {
+  id: "page",
+  title: "Page",
+  importPath: "@open-mercato/ui/backend/Page",
+  variants: [
+    {
+      id: "basic",
+      title: "Page + PageHeader + PageBody",
+      render: () => /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxs(Page, { children: [
+        /* @__PURE__ */ jsx(PageHeader, { title: "Currencies", description: "Exchange rates refresh nightly." }),
+        /* @__PURE__ */ jsx(PageBody, { children: /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-dashed p-6 text-sm text-muted-foreground", children: "Page content" }) })
+      ] }) }),
+      code: `import { Page, PageBody, PageHeader } from '@open-mercato/ui/backend/Page'
+
+<Page>
+  <PageHeader title={t('currencies.list.title')} description={t('currencies.list.description')} />
+  <PageBody>{/* DataTable, sections\u2026 */}</PageBody>
+</Page>`
+    },
+    {
+      id: "with-actions",
+      title: "Header actions",
+      render: () => /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxs(Page, { children: [
+        /* @__PURE__ */ jsx(
+          PageHeader,
+          {
+            title: "Currencies",
+            description: "Exchange rates refresh nightly.",
+            actions: /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", children: "Import" }),
+              /* @__PURE__ */ jsxs(Button, { size: "sm", children: [
+                /* @__PURE__ */ jsx(Plus, { className: "size-4" }),
+                " Add currency"
+              ] })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx(PageBody, { children: /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-dashed p-6 text-sm text-muted-foreground", children: "Page content" }) })
+      ] }) }),
+      code: `import { Plus } from 'lucide-react'
+import { Page, PageBody, PageHeader } from '@open-mercato/ui/backend/Page'
+import { Button } from '@open-mercato/ui/primitives/button'
+
+<Page>
+  <PageHeader
+    title={t('currencies.list.title')}
+    actions={
+      <>
+        <Button variant="outline" size="sm">Import</Button>
+        <Button size="sm"><Plus className="size-4" /> Add currency</Button>
+      </>
+    }
+  />
+  <PageBody>{/* \u2026 */}</PageBody>
+</Page>`
+    }
+  ]
+};
+const sectionHeaderEntry = {
+  id: "section-header",
+  title: "SectionHeader",
+  importPath: "@open-mercato/ui/backend/SectionHeader",
+  variants: [
+    {
+      id: "count-and-action",
+      title: "With count and action",
+      render: () => /* @__PURE__ */ jsx("div", { className: "w-full max-w-md", children: /* @__PURE__ */ jsx(
+        SectionHeader,
+        {
+          title: "Addresses",
+          count: 3,
+          action: /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "sm", children: [
+            /* @__PURE__ */ jsx(Plus, { className: "size-4" }),
+            " Add"
+          ] })
+        }
+      ) }),
+      code: `import { Plus } from 'lucide-react'
+import { SectionHeader } from '@open-mercato/ui/backend/SectionHeader'
+import { Button } from '@open-mercato/ui/primitives/button'
+
+<SectionHeader
+  title={t('customers.people.detail.addresses.title')}
+  count={addresses.length}
+  action={<Button variant="ghost" size="sm"><Plus className="size-4" /> {t('common.add')}</Button>}
+/>`
+    },
+    {
+      id: "collapsible",
+      title: "CollapsibleSection",
+      render: () => /* @__PURE__ */ jsx("div", { className: "w-full max-w-md", children: /* @__PURE__ */ jsx(CollapsibleSection, { title: "Billing details", count: 2, children: /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-dashed p-4 text-sm text-muted-foreground", children: "Section content" }) }) }),
+      code: `import { CollapsibleSection } from '@open-mercato/ui/backend/SectionHeader'
+
+<CollapsibleSection title={t('billing.details.title')} count={2}>
+  {/* section content */}
+</CollapsibleSection>`
+    }
+  ]
+};
+const sectionPageEntry = {
+  id: "section-page",
+  title: "SectionPage",
+  importPath: "@open-mercato/ui/backend/section-page",
+  variants: [
+    {
+      id: "miniature",
+      title: "Two-item miniature (clipped frame)",
+      render: () => /* @__PURE__ */ jsx(SectionPageMiniDemo, {}),
+      code: `import { UserRound, Lock } from 'lucide-react'
+import { SectionPage, type SectionNavGroup } from '@open-mercato/ui/backend/section-page'
+
+const sections: SectionNavGroup[] = [
+  {
+    id: 'account',
+    label: 'Account',
+    items: [
+      { id: 'profile', label: 'Profile', href: '/backend/profile', icon: <UserRound className="size-4" /> },
+      { id: 'security', label: 'Security', href: '/backend/profile/security', icon: <Lock className="size-4" /> },
+    ],
+  },
+]
+
+<SectionPage title={t('profile.title')} sections={sections} activePath={pathname}>
+  {children}
+</SectionPage>`
+    },
+    {
+      id: "section-nav",
+      title: "SectionNav (standalone, controlled collapse)",
+      render: () => /* @__PURE__ */ jsx(SectionNavDemo, {}),
+      code: `import { SectionNav, type SectionNavGroup } from '@open-mercato/ui/backend/section-page'
+
+const [collapsed, setCollapsed] = React.useState(false)
+
+<SectionNav
+  title={t('profile.title')}
+  sections={sections}
+  activePath={pathname}
+  collapsed={collapsed}
+  onToggleCollapse={() => setCollapsed((value) => !value)}
+/>`
+    }
+  ]
+};
+const formHeaderEntry = {
+  id: "form-header",
+  title: "FormHeader",
+  importPath: "@open-mercato/ui/backend/forms",
+  variants: [
+    {
+      id: "edit-mode",
+      title: "Edit mode",
+      render: () => /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx(
+        FormHeader,
+        {
+          backHref: "#form-header",
+          backLabel: "Back",
+          title: "Edit product",
+          actions: {
+            cancelHref: "#form-header",
+            cancelLabel: "Cancel",
+            submit: { label: "Save", pendingLabel: "Saving\u2026" }
+          }
+        }
+      ) }),
+      code: `import { FormHeader } from '@open-mercato/ui/backend/forms'
+
+<FormHeader
+  backHref="/backend/products"
+  backLabel={t('ui.navigation.back')}
+  title={t('products.edit.title')}
+  actions={{
+    cancelHref: '/backend/products',
+    cancelLabel: t('ui.forms.actions.cancel'),
+    submit: { formId: 'product-form', label: t('ui.forms.actions.save'), pendingLabel: t('ui.forms.actions.saving') },
+  }}
+/>`
+    },
+    {
+      id: "detail-mode",
+      title: "Detail mode",
+      render: () => /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx(
+        FormHeader,
+        {
+          mode: "detail",
+          backHref: "#form-header",
+          entityTypeLabel: "Company",
+          title: "Acme Logistics",
+          subtitle: "Created 12 Mar 2026",
+          statusBadge: /* @__PURE__ */ jsx(Badge, { variant: "muted", children: "Active" }),
+          menuActions: [
+            { id: "duplicate", label: "Duplicate", icon: Copy, onSelect: () => {
+            } },
+            { id: "archive", label: "Archive", icon: Archive, onSelect: () => {
+            } }
+          ],
+          onDelete: () => {
+          },
+          deleteLabel: "Delete"
+        }
+      ) }),
+      code: `import { Archive, Copy } from 'lucide-react'
+import { FormHeader } from '@open-mercato/ui/backend/forms'
+
+<FormHeader
+  mode="detail"
+  backHref="/backend/customers/companies"
+  entityTypeLabel={t('customers.companies.detail.entityType')}
+  title={company.name}
+  subtitle={t('customers.companies.detail.createdAt', { date: createdAt })}
+  statusBadge={<Badge variant="muted">{statusLabel}</Badge>}
+  menuActions={[
+    { id: 'duplicate', label: t('ui.actions.duplicate'), icon: Copy, onSelect: duplicate },
+    { id: 'archive', label: t('ui.actions.archive'), icon: Archive, onSelect: archive },
+  ]}
+  onDelete={confirmDelete}
+  deleteLabel={t('ui.forms.actions.delete')}
+/>`
+    }
+  ]
+};
+const formFooterEntry = {
+  id: "form-footer",
+  title: "FormFooter",
+  importPath: "@open-mercato/ui/backend/forms",
+  variants: [
+    {
+      id: "default",
+      title: "default",
+      render: () => /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx(
+        FormFooter,
+        {
+          actions: {
+            cancelHref: "#form-footer",
+            cancelLabel: "Cancel",
+            submit: { label: "Save changes", pendingLabel: "Saving\u2026" }
+          }
+        }
+      ) }),
+      code: `import { FormFooter } from '@open-mercato/ui/backend/forms'
+
+<FormFooter
+  actions={{
+    cancelHref: '/backend/products',
+    cancelLabel: t('ui.forms.actions.cancel'),
+    submit: { formId: 'product-form', label: t('ui.forms.actions.save'), pendingLabel: t('ui.forms.actions.saving') },
+  }}
+/>`
+    },
+    {
+      id: "embedded-with-delete",
+      title: "embedded, with delete",
+      render: () => /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx(
+        FormFooter,
+        {
+          embedded: true,
+          actions: {
+            showDelete: true,
+            onDelete: () => {
+            },
+            deleteLabel: "Delete",
+            cancelHref: "#form-footer",
+            cancelLabel: "Cancel",
+            submit: { label: "Save" }
+          }
+        }
+      ) }),
+      code: `import { FormFooter } from '@open-mercato/ui/backend/forms'
+
+<FormFooter
+  embedded
+  actions={{
+    showDelete: true,
+    onDelete: confirmDelete,
+    deleteLabel: t('ui.forms.actions.delete'),
+    cancelHref: '/backend/products',
+    cancelLabel: t('ui.forms.actions.cancel'),
+    submit: { label: t('ui.forms.actions.save') },
+  }}
+/>`
+    }
+  ]
+};
+const actionsDropdownEntry = {
+  id: "actions-dropdown",
+  title: "ActionsDropdown",
+  importPath: "@open-mercato/ui/backend/forms",
+  variants: [
+    {
+      id: "label-trigger",
+      title: "Label trigger",
+      render: () => /* @__PURE__ */ jsx(ActionsDropdown, { items: demoActions }),
+      code: `import { Copy, Download, Trash2 } from 'lucide-react'
+import { ActionsDropdown, type ActionItem } from '@open-mercato/ui/backend/forms'
+
+const items: ActionItem[] = [
+  { id: 'duplicate', label: t('ui.actions.duplicate'), icon: Copy, onSelect: duplicate },
+  { id: 'export', label: t('ui.actions.export'), icon: Download, onSelect: exportCsv },
+  { id: 'delete', label: t('ui.actions.delete'), icon: Trash2, onSelect: confirmDelete },
+]
+
+<ActionsDropdown items={items} />`
+    },
+    {
+      id: "icon-trigger",
+      title: "Icon trigger",
+      render: () => /* @__PURE__ */ jsx(ActionsDropdown, { items: demoActions, triggerMode: "icon", ariaLabel: "More actions" }),
+      code: `import { ActionsDropdown } from '@open-mercato/ui/backend/forms'
+
+<ActionsDropdown items={items} triggerMode="icon" ariaLabel={t('ui.actions.more')} />`
+    }
+  ]
+};
+const entries = [
+  pageEntry,
+  sectionHeaderEntry,
+  sectionPageEntry,
+  formHeaderEntry,
+  formFooterEntry,
+  actionsDropdownEntry
+];
+export {
+  entries
+};
+//# sourceMappingURL=scaffolding.js.map

package/dist/modules/design_system/gallery/entries/scaffolding.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/modules/design_system/gallery/entries/scaffolding.tsx"],
+  "sourcesContent": ["import * as React from 'react'\nimport { Archive, Copy, Download, Lock, Plus, Trash2, UserRound } from 'lucide-react'\nimport { Badge } from '@open-mercato/ui/primitives/badge'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { Page, PageBody, PageHeader } from '@open-mercato/ui/backend/Page'\nimport { CollapsibleSection, SectionHeader } from '@open-mercato/ui/backend/SectionHeader'\nimport {\n  SectionNav,\n  SectionPage,\n  type SectionNavGroup,\n} from '@open-mercato/ui/backend/section-page'\nimport {\n  ActionsDropdown,\n  FormFooter,\n  FormHeader,\n  type ActionItem,\n} from '@open-mercato/ui/backend/forms'\nimport type { GalleryEntry } from '../types'\n\n// Component titles and variant names are proper nouns from the codebase and\n// are deliberately not translated. `code` MUST contain the entry's importPath\n// (enforced by the registry-integrity test) and is always reviewed alongside\n// its sibling `render`.\n\n// The demos use `#`-anchors as hrefs so clicking inside the gallery never\n// navigates away, and every callback is a no-op.\n\nconst demoSections: SectionNavGroup[] = [\n  {\n    id: 'account',\n    label: 'Account',\n    items: [\n      { id: 'profile', label: 'Profile', href: '#profile', icon: <UserRound className=\"size-4\" /> },\n      { id: 'security', label: 'Security', href: '#security', icon: <Lock className=\"size-4\" /> },\n    ],\n  },\n]\n\n// SectionPage stretches to the viewport by design \u2014 the miniature demo clips\n// it inside a fixed-height frame so the two-item nav plus content stay small.\nfunction SectionPageMiniDemo() {\n  return (\n    <div className=\"h-80 w-full overflow-hidden rounded-lg border bg-background\">\n      <SectionPage title=\"Settings\" sections={demoSections} activePath=\"#profile\">\n        <div className=\"space-y-2\">\n          <h2 className=\"text-sm font-semibold\">Profile</h2>\n          <p className=\"text-sm text-muted-foreground\">Section content renders here.</p>\n        </div>\n      </SectionPage>\n    </div>\n  )\n}\n\n// SectionNav is controlled \u2014 the demo owns the collapsed state.\nfunction SectionNavDemo() {\n  const [collapsed, setCollapsed] = React.useState(false)\n  return (\n    <div className=\"w-64 rounded-lg border bg-background px-3 py-4\">\n      <SectionNav\n        title=\"Settings\"\n        sections={demoSections}\n        activePath=\"#profile\"\n        collapsed={collapsed}\n        onToggleCollapse={() => setCollapsed((value) => !value)}\n      />\n    </div>\n  )\n}\n\nconst demoActions: ActionItem[] = [\n  { id: 'duplicate', label: 'Duplicate record', icon: Copy, onSelect: () => {} },\n  { id: 'export', label: 'Export as CSV', icon: Download, onSelect: () => {} },\n  { id: 'delete', label: 'Delete record', icon: Trash2, onSelect: () => {} },\n]\n\nconst pageEntry: GalleryEntry = {\n  id: 'page',\n  title: 'Page',\n  importPath: '@open-mercato/ui/backend/Page',\n  variants: [\n    {\n      id: 'basic',\n      title: 'Page + PageHeader + PageBody',\n      render: () => (\n        <div className=\"w-full\">\n          <Page>\n            <PageHeader title=\"Currencies\" description=\"Exchange rates refresh nightly.\" />\n            <PageBody>\n              <div className=\"rounded-lg border border-dashed p-6 text-sm text-muted-foreground\">\n                Page content\n              </div>\n            </PageBody>\n          </Page>\n        </div>\n      ),\n      code: `import { Page, PageBody, PageHeader } from '@open-mercato/ui/backend/Page'\n\n<Page>\n  <PageHeader title={t('currencies.list.title')} description={t('currencies.list.description')} />\n  <PageBody>{/* DataTable, sections\u2026 */}</PageBody>\n</Page>`,\n    },\n    {\n      id: 'with-actions',\n      title: 'Header actions',\n      render: () => (\n        <div className=\"w-full\">\n          <Page>\n            <PageHeader\n              title=\"Currencies\"\n              description=\"Exchange rates refresh nightly.\"\n              actions={\n                <>\n                  <Button variant=\"outline\" size=\"sm\">\n                    Import\n                  </Button>\n                  <Button size=\"sm\">\n                    <Plus className=\"size-4\" /> Add currency\n                  </Button>\n                </>\n              }\n            />\n            <PageBody>\n              <div className=\"rounded-lg border border-dashed p-6 text-sm text-muted-foreground\">\n                Page content\n              </div>\n            </PageBody>\n          </Page>\n        </div>\n      ),\n      code: `import { Plus } from 'lucide-react'\nimport { Page, PageBody, PageHeader } from '@open-mercato/ui/backend/Page'\nimport { Button } from '@open-mercato/ui/primitives/button'\n\n<Page>\n  <PageHeader\n    title={t('currencies.list.title')}\n    actions={\n      <>\n        <Button variant=\"outline\" size=\"sm\">Import</Button>\n        <Button size=\"sm\"><Plus className=\"size-4\" /> Add currency</Button>\n      </>\n    }\n  />\n  <PageBody>{/* \u2026 */}</PageBody>\n</Page>`,\n    },\n  ],\n}\n\nconst sectionHeaderEntry: GalleryEntry = {\n  id: 'section-header',\n  title: 'SectionHeader',\n  importPath: '@open-mercato/ui/backend/SectionHeader',\n  variants: [\n    {\n      id: 'count-and-action',\n      title: 'With count and action',\n      render: () => (\n        <div className=\"w-full max-w-md\">\n          <SectionHeader\n            title=\"Addresses\"\n            count={3}\n            action={\n              <Button variant=\"ghost\" size=\"sm\">\n                <Plus className=\"size-4\" /> Add\n              </Button>\n            }\n          />\n        </div>\n      ),\n      code: `import { Plus } from 'lucide-react'\nimport { SectionHeader } from '@open-mercato/ui/backend/SectionHeader'\nimport { Button } from '@open-mercato/ui/primitives/button'\n\n<SectionHeader\n  title={t('customers.people.detail.addresses.title')}\n  count={addresses.length}\n  action={<Button variant=\"ghost\" size=\"sm\"><Plus className=\"size-4\" /> {t('common.add')}</Button>}\n/>`,\n    },\n    {\n      id: 'collapsible',\n      title: 'CollapsibleSection',\n      render: () => (\n        <div className=\"w-full max-w-md\">\n          <CollapsibleSection title=\"Billing details\" count={2}>\n            <div className=\"rounded-lg border border-dashed p-4 text-sm text-muted-foreground\">\n              Section content\n            </div>\n          </CollapsibleSection>\n        </div>\n      ),\n      code: `import { CollapsibleSection } from '@open-mercato/ui/backend/SectionHeader'\n\n<CollapsibleSection title={t('billing.details.title')} count={2}>\n  {/* section content */}\n</CollapsibleSection>`,\n    },\n  ],\n}\n\nconst sectionPageEntry: GalleryEntry = {\n  id: 'section-page',\n  title: 'SectionPage',\n  importPath: '@open-mercato/ui/backend/section-page',\n  variants: [\n    {\n      id: 'miniature',\n      title: 'Two-item miniature (clipped frame)',\n      render: () => <SectionPageMiniDemo />,\n      code: `import { UserRound, Lock } from 'lucide-react'\nimport { SectionPage, type SectionNavGroup } from '@open-mercato/ui/backend/section-page'\n\nconst sections: SectionNavGroup[] = [\n  {\n    id: 'account',\n    label: 'Account',\n    items: [\n      { id: 'profile', label: 'Profile', href: '/backend/profile', icon: <UserRound className=\"size-4\" /> },\n      { id: 'security', label: 'Security', href: '/backend/profile/security', icon: <Lock className=\"size-4\" /> },\n    ],\n  },\n]\n\n<SectionPage title={t('profile.title')} sections={sections} activePath={pathname}>\n  {children}\n</SectionPage>`,\n    },\n    {\n      id: 'section-nav',\n      title: 'SectionNav (standalone, controlled collapse)',\n      render: () => <SectionNavDemo />,\n      code: `import { SectionNav, type SectionNavGroup } from '@open-mercato/ui/backend/section-page'\n\nconst [collapsed, setCollapsed] = React.useState(false)\n\n<SectionNav\n  title={t('profile.title')}\n  sections={sections}\n  activePath={pathname}\n  collapsed={collapsed}\n  onToggleCollapse={() => setCollapsed((value) => !value)}\n/>`,\n    },\n  ],\n}\n\nconst formHeaderEntry: GalleryEntry = {\n  id: 'form-header',\n  title: 'FormHeader',\n  importPath: '@open-mercato/ui/backend/forms',\n  variants: [\n    {\n      id: 'edit-mode',\n      title: 'Edit mode',\n      render: () => (\n        <div className=\"w-full\">\n          <FormHeader\n            backHref=\"#form-header\"\n            backLabel=\"Back\"\n            title=\"Edit product\"\n            actions={{\n              cancelHref: '#form-header',\n              cancelLabel: 'Cancel',\n              submit: { label: 'Save', pendingLabel: 'Saving\u2026' },\n            }}\n          />\n        </div>\n      ),\n      code: `import { FormHeader } from '@open-mercato/ui/backend/forms'\n\n<FormHeader\n  backHref=\"/backend/products\"\n  backLabel={t('ui.navigation.back')}\n  title={t('products.edit.title')}\n  actions={{\n    cancelHref: '/backend/products',\n    cancelLabel: t('ui.forms.actions.cancel'),\n    submit: { formId: 'product-form', label: t('ui.forms.actions.save'), pendingLabel: t('ui.forms.actions.saving') },\n  }}\n/>`,\n    },\n    {\n      id: 'detail-mode',\n      title: 'Detail mode',\n      render: () => (\n        <div className=\"w-full\">\n          <FormHeader\n            mode=\"detail\"\n            backHref=\"#form-header\"\n            entityTypeLabel=\"Company\"\n            title=\"Acme Logistics\"\n            subtitle=\"Created 12 Mar 2026\"\n            statusBadge={<Badge variant=\"muted\">Active</Badge>}\n            menuActions={[\n              { id: 'duplicate', label: 'Duplicate', icon: Copy, onSelect: () => {} },\n              { id: 'archive', label: 'Archive', icon: Archive, onSelect: () => {} },\n            ]}\n            onDelete={() => {}}\n            deleteLabel=\"Delete\"\n          />\n        </div>\n      ),\n      code: `import { Archive, Copy } from 'lucide-react'\nimport { FormHeader } from '@open-mercato/ui/backend/forms'\n\n<FormHeader\n  mode=\"detail\"\n  backHref=\"/backend/customers/companies\"\n  entityTypeLabel={t('customers.companies.detail.entityType')}\n  title={company.name}\n  subtitle={t('customers.companies.detail.createdAt', { date: createdAt })}\n  statusBadge={<Badge variant=\"muted\">{statusLabel}</Badge>}\n  menuActions={[\n    { id: 'duplicate', label: t('ui.actions.duplicate'), icon: Copy, onSelect: duplicate },\n    { id: 'archive', label: t('ui.actions.archive'), icon: Archive, onSelect: archive },\n  ]}\n  onDelete={confirmDelete}\n  deleteLabel={t('ui.forms.actions.delete')}\n/>`,\n    },\n  ],\n}\n\nconst formFooterEntry: GalleryEntry = {\n  id: 'form-footer',\n  title: 'FormFooter',\n  importPath: '@open-mercato/ui/backend/forms',\n  variants: [\n    {\n      id: 'default',\n      title: 'default',\n      render: () => (\n        <div className=\"w-full\">\n          <FormFooter\n            actions={{\n              cancelHref: '#form-footer',\n              cancelLabel: 'Cancel',\n              submit: { label: 'Save changes', pendingLabel: 'Saving\u2026' },\n            }}\n          />\n        </div>\n      ),\n      code: `import { FormFooter } from '@open-mercato/ui/backend/forms'\n\n<FormFooter\n  actions={{\n    cancelHref: '/backend/products',\n    cancelLabel: t('ui.forms.actions.cancel'),\n    submit: { formId: 'product-form', label: t('ui.forms.actions.save'), pendingLabel: t('ui.forms.actions.saving') },\n  }}\n/>`,\n    },\n    {\n      id: 'embedded-with-delete',\n      title: 'embedded, with delete',\n      render: () => (\n        <div className=\"w-full\">\n          <FormFooter\n            embedded\n            actions={{\n              showDelete: true,\n              onDelete: () => {},\n              deleteLabel: 'Delete',\n              cancelHref: '#form-footer',\n              cancelLabel: 'Cancel',\n              submit: { label: 'Save' },\n            }}\n          />\n        </div>\n      ),\n      code: `import { FormFooter } from '@open-mercato/ui/backend/forms'\n\n<FormFooter\n  embedded\n  actions={{\n    showDelete: true,\n    onDelete: confirmDelete,\n    deleteLabel: t('ui.forms.actions.delete'),\n    cancelHref: '/backend/products',\n    cancelLabel: t('ui.forms.actions.cancel'),\n    submit: { label: t('ui.forms.actions.save') },\n  }}\n/>`,\n    },\n  ],\n}\n\nconst actionsDropdownEntry: GalleryEntry = {\n  id: 'actions-dropdown',\n  title: 'ActionsDropdown',\n  importPath: '@open-mercato/ui/backend/forms',\n  variants: [\n    {\n      id: 'label-trigger',\n      title: 'Label trigger',\n      render: () => <ActionsDropdown items={demoActions} />,\n      code: `import { Copy, Download, Trash2 } from 'lucide-react'\nimport { ActionsDropdown, type ActionItem } from '@open-mercato/ui/backend/forms'\n\nconst items: ActionItem[] = [\n  { id: 'duplicate', label: t('ui.actions.duplicate'), icon: Copy, onSelect: duplicate },\n  { id: 'export', label: t('ui.actions.export'), icon: Download, onSelect: exportCsv },\n  { id: 'delete', label: t('ui.actions.delete'), icon: Trash2, onSelect: confirmDelete },\n]\n\n<ActionsDropdown items={items} />`,\n    },\n    {\n      id: 'icon-trigger',\n      title: 'Icon trigger',\n      render: () => (\n        <ActionsDropdown items={demoActions} triggerMode=\"icon\" ariaLabel=\"More actions\" />\n      ),\n      code: `import { ActionsDropdown } from '@open-mercato/ui/backend/forms'\n\n<ActionsDropdown items={items} triggerMode=\"icon\" ariaLabel={t('ui.actions.more')} />`,\n    },\n  ],\n}\n\nexport const entries: GalleryEntry[] = [\n  pageEntry,\n  sectionHeaderEntry,\n  sectionPageEntry,\n  formHeaderEntry,\n  formFooterEntry,\n  actionsDropdownEntry,\n]\n"],
+  "mappings": "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",
+  "names": []
+}