@open-mercato/core 0.7.1-develop.7203.1.9396450b78 → 0.8.0

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

@@ -1,5 +1,22 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Building2, MoreHorizontal } from "lucide-react";
+import {
+  ContentLabelExample,
+  ContentCardExample,
+  KeyIconExamples,
+  PaymentIconExamples,
+  ChartLegendExamples,
+  ChartLegendDotExamples
+} from "../demos/key-components.js";
+import { keyComponentExampleCode } from "../demos/key-components-code.generated.js";
+import { TableCellExamples, TableHeaderExamples, tableCellExampleCode } from "../demos/table-cells.js";
+import { tableHeaderExampleCode } from "../demos/table-cells-code.generated.js";
+import { ActivityFeedExample } from "../demos/feeds.js";
+import { activityFeedExampleCode } from "../demos/feeds-code.generated.js";
+import * as React from "react";
+import { Building2, Check, ChevronLeft, ChevronRight, MoreHorizontal, Pin, Plus, Star, User, X } from "lucide-react";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { Button } from "@open-mercato/ui/primitives/button";
+import { ButtonGroup } from "@open-mercato/ui/primitives/button-group";
 import { Badge } from "@open-mercato/ui/primitives/badge";
 import { StatusBadge } from "@open-mercato/ui/primitives/status-badge";
 import { Tag } from "@open-mercato/ui/primitives/tag";
@@ -33,14 +50,545 @@ import {
   ActivityFeedStatusChip
 } from "@open-mercato/ui/primitives/activity-feed";
 import { IconButton } from "@open-mercato/ui/primitives/icon-button";
+import githubLogo from "../assets/github-logo.png";
+import avatarPhoto from "../assets/avatar-photo.png";
+import avatarMemoji from "../assets/avatar-memoji.png";
+import avatarIllustration from "../assets/avatar-illustration.png";
+function BadgeEntrySemanticPreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Badge, { variant: "success", children: t("design_system.gallery.samples.content.success") }),
+    /* @__PURE__ */ jsx(Badge, { variant: "warning", children: t("design_system.gallery.samples.content.warning") }),
+    /* @__PURE__ */ jsx(Badge, { variant: "info", children: t("design_system.gallery.samples.content.info") }),
+    /* @__PURE__ */ jsx(Badge, { variant: "neutral", children: t("design_system.gallery.samples.content.neutral") }),
+    /* @__PURE__ */ jsx(Badge, { variant: "error", children: t("design_system.gallery.samples.content.error") }),
+    /* @__PURE__ */ jsx(Badge, { variant: "brand", children: t("design_system.gallery.samples.content.brand") })
+  ] });
+}
+function BadgeEntrySizesPreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Badge, { variant: "info", size: "lg", children: t("design_system.gallery.samples.content.large") }),
+    /* @__PURE__ */ jsx(Badge, { variant: "info", size: "default", children: t("design_system.gallery.samples.content.default") }),
+    /* @__PURE__ */ jsx(Badge, { variant: "info", size: "sm", children: t("design_system.gallery.samples.content.small") })
+  ] });
+}
+function BadgeEntryDotPreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Badge, { variant: "success", dot: true, children: t("design_system.gallery.samples.content.active") }),
+    /* @__PURE__ */ jsx(Badge, { variant: "neutral", dot: true, children: t("design_system.gallery.samples.content.draft") }),
+    /* @__PURE__ */ jsx(Badge, { variant: "brand", dot: true, children: t("design_system.gallery.samples.content.customView") })
+  ] });
+}
+function StatusBadgeEntryWithDotPreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(StatusBadge, { variant: "success", dot: true, children: t("design_system.gallery.samples.content.active") }),
+    /* @__PURE__ */ jsx(StatusBadge, { variant: "warning", dot: true, children: t("design_system.gallery.samples.content.pending") }),
+    /* @__PURE__ */ jsx(StatusBadge, { variant: "error", dot: true, children: t("design_system.gallery.samples.content.failed") }),
+    /* @__PURE__ */ jsx(StatusBadge, { variant: "info", dot: true, children: t("design_system.gallery.samples.content.syncing") }),
+    /* @__PURE__ */ jsx(StatusBadge, { variant: "neutral", dot: true, children: t("design_system.gallery.samples.content.archived") })
+  ] });
+}
+function StatusBadgeEntryWithoutDotPreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(StatusBadge, { variant: "success", children: t("design_system.gallery.samples.content.paid") }),
+    /* @__PURE__ */ jsx(StatusBadge, { variant: "neutral", children: t("design_system.gallery.samples.content.draft") })
+  ] });
+}
+function TagEntryDotPreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Tag, { variant: "success", dot: true, children: t("design_system.gallery.samples.content.customer") }),
+    /* @__PURE__ */ jsx(Tag, { variant: "brand", dot: true, children: t("design_system.gallery.samples.content.renewal") }),
+    /* @__PURE__ */ jsx(Tag, { variant: "pink", dot: true, children: t("design_system.gallery.samples.content.campaign") })
+  ] });
+}
+function TableEntryDefaultPreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsxs(Table, { children: [
+    /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+      /* @__PURE__ */ jsx(TableHead, { children: t("design_system.gallery.samples.content.order") }),
+      /* @__PURE__ */ jsx(TableHead, { children: t("design_system.gallery.samples.content.customer") }),
+      /* @__PURE__ */ jsx(TableHead, { children: t("design_system.gallery.samples.content.status") }),
+      /* @__PURE__ */ jsx(TableHead, { className: "text-right", children: t("design_system.gallery.samples.content.total") })
+    ] }) }),
+    /* @__PURE__ */ jsxs(TableBody, { children: [
+      /* @__PURE__ */ jsxs(TableRow, { children: [
+        /* @__PURE__ */ jsx(TableCell, { children: "#1042" }),
+        /* @__PURE__ */ jsx(TableCell, { children: "Wei Chen" }),
+        /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(StatusBadge, { variant: "success", dot: true, children: t("design_system.gallery.samples.content.paid") }) }),
+        /* @__PURE__ */ jsx(TableCell, { className: "text-right", children: "$1,250.00" })
+      ] }),
+      /* @__PURE__ */ jsxs(TableRow, { children: [
+        /* @__PURE__ */ jsx(TableCell, { children: "#1041" }),
+        /* @__PURE__ */ jsx(TableCell, { children: "Laura Perez" }),
+        /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(StatusBadge, { variant: "warning", dot: true, children: t("design_system.gallery.samples.content.pending") }) }),
+        /* @__PURE__ */ jsx(TableCell, { className: "text-right", children: "$310.50" })
+      ] }),
+      /* @__PURE__ */ jsxs(TableRow, { children: [
+        /* @__PURE__ */ jsx(TableCell, { children: "#1040" }),
+        /* @__PURE__ */ jsx(TableCell, { children: "Omar Haddad" }),
+        /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(StatusBadge, { variant: "neutral", dot: true, children: t("design_system.gallery.samples.content.draft") }) }),
+        /* @__PURE__ */ jsx(TableCell, { className: "text-right", children: "$89.00" })
+      ] })
+    ] })
+  ] });
+}
+function TableEntryStripedPreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsxs(Table, { variant: "striped", children: [
+    /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+      /* @__PURE__ */ jsx(TableHead, { children: "SKU" }),
+      /* @__PURE__ */ jsx(TableHead, { children: t("design_system.gallery.samples.content.product") }),
+      /* @__PURE__ */ jsx(TableHead, { className: "text-right", children: t("design_system.gallery.samples.content.stock") })
+    ] }) }),
+    /* @__PURE__ */ jsxs(TableBody, { children: [
+      /* @__PURE__ */ jsxs(TableRow, { children: [
+        /* @__PURE__ */ jsx(TableCell, { children: "AP-100" }),
+        /* @__PURE__ */ jsx(TableCell, { children: t("design_system.gallery.samples.content.apexDeskLamp") }),
+        /* @__PURE__ */ jsx(TableCell, { className: "text-right", children: "120" })
+      ] }),
+      /* @__PURE__ */ jsxs(TableRow, { children: [
+        /* @__PURE__ */ jsx(TableCell, { children: "AP-101" }),
+        /* @__PURE__ */ jsx(TableCell, { children: t("design_system.gallery.samples.content.apexMonitorStand") }),
+        /* @__PURE__ */ jsx(TableCell, { className: "text-right", children: "64" })
+      ] }),
+      /* @__PURE__ */ jsxs(TableRow, { children: [
+        /* @__PURE__ */ jsx(TableCell, { children: "AP-102" }),
+        /* @__PURE__ */ jsx(TableCell, { children: t("design_system.gallery.samples.content.apexCableKit") }),
+        /* @__PURE__ */ jsx(TableCell, { className: "text-right", children: "310" })
+      ] }),
+      /* @__PURE__ */ jsxs(TableRow, { children: [
+        /* @__PURE__ */ jsx(TableCell, { children: "AP-103" }),
+        /* @__PURE__ */ jsx(TableCell, { children: t("design_system.gallery.samples.content.apexLaptopRiser") }),
+        /* @__PURE__ */ jsx(TableCell, { className: "text-right", children: "18" })
+      ] })
+    ] })
+  ] });
+}
+function TableEntryWithFooterPreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsxs(Table, { children: [
+    /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+      /* @__PURE__ */ jsx(TableHead, { children: t("design_system.gallery.samples.content.line") }),
+      /* @__PURE__ */ jsx(TableHead, { className: "text-right", children: t("design_system.gallery.samples.content.amount") })
+    ] }) }),
+    /* @__PURE__ */ jsxs(TableBody, { children: [
+      /* @__PURE__ */ jsxs(TableRow, { children: [
+        /* @__PURE__ */ jsx(TableCell, { children: t("design_system.gallery.samples.content.subtotal") }),
+        /* @__PURE__ */ jsx(TableCell, { className: "text-right", children: "$1,560.50" })
+      ] }),
+      /* @__PURE__ */ jsxs(TableRow, { children: [
+        /* @__PURE__ */ jsx(TableCell, { children: t("design_system.gallery.samples.content.shipping") }),
+        /* @__PURE__ */ jsx(TableCell, { className: "text-right", children: "$24.00" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(TableFooter, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+      /* @__PURE__ */ jsx(TableCell, { children: t("design_system.gallery.samples.content.total") }),
+      /* @__PURE__ */ jsx(TableCell, { className: "text-right", children: "$1,584.50" })
+    ] }) })
+  ] });
+}
+function CardEntryDefaultPreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsxs(Card, { className: "w-full max-w-sm", children: [
+    /* @__PURE__ */ jsxs(CardHeader, { children: [
+      /* @__PURE__ */ jsx(CardTitle, { children: t("design_system.gallery.samples.content.monthlyRevenue") }),
+      /* @__PURE__ */ jsx(CardDescription, { children: t("design_system.gallery.samples.content.netRevenueAcrossAllChannels") })
+    ] }),
+    /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx("p", { className: "text-2xl font-semibold", children: "$48,210" }) }),
+    /* @__PURE__ */ jsx(CardFooter, { children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("design_system.gallery.samples.content.updated5MinutesAgo") }) })
+  ] });
+}
+function CardEntryWithActionPreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsxs(Card, { className: "w-full max-w-sm", children: [
+    /* @__PURE__ */ jsxs(CardHeader, { children: [
+      /* @__PURE__ */ jsx(CardTitle, { children: t("design_system.gallery.samples.content.teamMembers") }),
+      /* @__PURE__ */ jsx(CardDescription, { children: t("design_system.gallery.samples.content.peopleWithAccessToThisWorkspace") }),
+      /* @__PURE__ */ jsx(CardAction, { children: /* @__PURE__ */ jsx(IconButton, { type: "button", variant: "ghost", "aria-label": t("design_system.gallery.samples.content.more"), children: /* @__PURE__ */ jsx(MoreHorizontal, {}) }) })
+    ] }),
+    /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs(AvatarStack, { max: 3, size: "sm", children: [
+      /* @__PURE__ */ jsx(Avatar, { label: "Wei Chen", size: "sm" }),
+      /* @__PURE__ */ jsx(Avatar, { label: "Laura Perez", size: "sm" }),
+      /* @__PURE__ */ jsx(Avatar, { label: "Omar Haddad", size: "sm" }),
+      /* @__PURE__ */ jsx(Avatar, { label: "Ines Kowalska", size: "sm" })
+    ] }) })
+  ] });
+}
+function SeparatorEntryDefaultPreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsxs("div", { className: "w-full max-w-sm", children: [
+    /* @__PURE__ */ jsx("p", { className: "text-sm", children: t("design_system.gallery.samples.content.shippingDetails") }),
+    /* @__PURE__ */ jsx(Separator, { className: "my-3" }),
+    /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("design_system.gallery.samples.content.billingDetails") })
+  ] });
+}
+function SeparatorEntryLabeledPreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "w-full max-w-sm", children: /* @__PURE__ */ jsx(Separator, { label: t("design_system.gallery.samples.content.or") }) });
+}
+function ScrollAreaEntryVerticalPreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsx(ScrollArea, { className: "h-40 w-full max-w-xs rounded-md border", children: /* @__PURE__ */ jsx("div", { className: "p-3", children: Array.from(
+    {
+      length: 20
+    },
+    (_, i) => /* @__PURE__ */ jsxs("p", { className: "border-b py-1.5 text-sm last:border-b-0", children: [
+      t("design_system.gallery.samples.content.warehouseZone"),
+      String.fromCharCode(65 + i % 6),
+      "-",
+      i + 1
+    ] }, i)
+  ) }) });
+}
+function ScrollAreaEntryHorizontalPreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsx(ScrollArea, { scrollbars: "horizontal", className: "w-full max-w-xs rounded-md border", children: /* @__PURE__ */ jsx("div", { className: "flex w-max gap-2 p-3", children: Array.from(
+    {
+      length: 12
+    },
+    (_, i) => /* @__PURE__ */ jsxs(Tag, { variant: "neutral", shape: "square", children: [
+      t("design_system.gallery.samples.content.channel"),
+      i + 1
+    ] }, i)
+  ) }) });
+}
+function ActivityFeedEntryBasicPreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsxs(ActivityFeed, { className: "w-full max-w-md", children: [
+    /* @__PURE__ */ jsx(
+      ActivityFeedItem,
+      {
+        avatar: /* @__PURE__ */ jsx(Avatar, { label: "Wei Chen", size: "sm" }),
+        title: /* @__PURE__ */ jsxs(Fragment, { children: [
+          "Wei Chen",
+          " ",
+          /* @__PURE__ */ jsx("span", { className: "font-normal text-muted-foreground", children: t("design_system.gallery.samples.content.created") }),
+          t("design_system.gallery.samples.content.order1042")
+        ] }),
+        timestamp: t("design_system.gallery.samples.content.4MinAgo")
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ActivityFeedItem,
+      {
+        avatar: /* @__PURE__ */ jsx(Avatar, { label: "Laura Perez", size: "sm" }),
+        title: /* @__PURE__ */ jsxs(Fragment, { children: [
+          "Laura Perez",
+          " ",
+          /* @__PURE__ */ jsx("span", { className: "font-normal text-muted-foreground", children: t("design_system.gallery.samples.content.updatedTheShippingAddress") })
+        ] }),
+        timestamp: t("design_system.gallery.samples.content.1HourAgo"),
+        actions: /* @__PURE__ */ jsx(IconButton, { variant: "ghost", size: "sm", "aria-label": t("design_system.gallery.samples.content.more"), children: /* @__PURE__ */ jsx(MoreHorizontal, {}) })
+      }
+    )
+  ] });
+}
+function ActivityFeedEntryWithAttachmentPreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsx(ActivityFeed, { className: "w-full max-w-md", children: /* @__PURE__ */ jsx(
+    ActivityFeedItem,
+    {
+      avatar: /* @__PURE__ */ jsx(Avatar, { label: "Omar Haddad", size: "sm" }),
+      title: /* @__PURE__ */ jsxs(Fragment, { children: [
+        "Omar Haddad",
+        " ",
+        /* @__PURE__ */ jsx("span", { className: "font-normal text-muted-foreground", children: t("design_system.gallery.samples.content.uploaded") }),
+        t("design_system.gallery.samples.content.q2FinancialReport")
+      ] }),
+      timestamp: t("design_system.gallery.samples.content.2DaysAgo"),
+      children: /* @__PURE__ */ jsx(ActivityFeedFileChip, { name: "apex-report.pdf", size: "4mb", onDownload: () => {
+      } })
+    }
+  ) });
+}
+function ActivityFeedEntryWithCommentPreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsx(ActivityFeed, { className: "w-full max-w-md", children: /* @__PURE__ */ jsx(
+    ActivityFeedItem,
+    {
+      avatar: /* @__PURE__ */ jsx(Avatar, { label: "Ines Kowalska", size: "sm" }),
+      title: /* @__PURE__ */ jsxs(Fragment, { children: [
+        "Ines Kowalska",
+        " ",
+        /* @__PURE__ */ jsx("span", { className: "font-normal text-muted-foreground", children: t("design_system.gallery.samples.content.commented") })
+      ] }),
+      timestamp: t("design_system.gallery.samples.content.6DaysAgo"),
+      children: /* @__PURE__ */ jsx(ActivityFeedComment, { onReply: () => {
+      }, children: t("design_system.gallery.samples.content.pleaseReviseTheRiskMetricsBeforeFriday") })
+    }
+  ) });
+}
+function ActivityFeedEntryStatusChipsPreview() {
+  const t = useT();
+  return /* @__PURE__ */ jsx(ActivityFeed, { className: "w-full max-w-md", children: /* @__PURE__ */ jsxs(
+    ActivityFeedItem,
+    {
+      avatar: /* @__PURE__ */ jsx(Avatar, { label: "Ravi Patel", size: "sm" }),
+      title: /* @__PURE__ */ jsxs(Fragment, { children: [
+        "Ravi Patel",
+        " ",
+        /* @__PURE__ */ jsx("span", { className: "font-normal text-muted-foreground", children: t("design_system.gallery.samples.content.moved3Tasks") })
+      ] }),
+      timestamp: t("design_system.gallery.samples.content.1WeekAgo"),
+      children: [
+        /* @__PURE__ */ jsx(ActivityFeedStatusChip, { status: "success", children: t("design_system.gallery.samples.content.approved") }),
+        /* @__PURE__ */ jsx(ActivityFeedStatusChip, { status: "warning", children: t("design_system.gallery.samples.content.needsReview") }),
+        /* @__PURE__ */ jsx(ActivityFeedStatusChip, { status: "error", children: t("design_system.gallery.samples.content.blocked") })
+      ]
+    }
+  ) });
+}
+const githubLogoSrc = typeof githubLogo === "string" ? githubLogo : githubLogo.src;
+const avatarPhotoSrc = typeof avatarPhoto === "string" ? avatarPhoto : avatarPhoto.src;
+const avatarMemojiSrc = typeof avatarMemoji === "string" ? avatarMemoji : avatarMemoji.src;
+const avatarIllustrationSrc = typeof avatarIllustration === "string" ? avatarIllustration : avatarIllustration.src;
+function AvatarBadgesDemo() {
+  const t = useT();
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-6 p-2", children: [
+    /* @__PURE__ */ jsx(
+      Avatar,
+      {
+        label: "Wei Chen",
+        ariaLabel: t("design_system.gallery.examples.avatar.verified"),
+        badge: /* @__PURE__ */ jsx(Check, { className: "size-3" }),
+        badgeClassName: "bg-status-info-icon text-white"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Avatar,
+      {
+        label: "Laura Perez",
+        ariaLabel: t("design_system.gallery.examples.avatar.pinned"),
+        badge: /* @__PURE__ */ jsx(Pin, { className: "size-3" }),
+        badgeClassName: "bg-accent-indigo text-white"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Avatar,
+      {
+        label: "Omar Haddad",
+        ariaLabel: t("design_system.gallery.examples.avatar.favorite"),
+        badge: /* @__PURE__ */ jsx(Star, { className: "size-3" }),
+        badgeClassName: "bg-status-success-icon text-white"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Avatar,
+      {
+        label: "Ines Kowalska",
+        ariaLabel: t("design_system.gallery.examples.avatar.add"),
+        badge: /* @__PURE__ */ jsx(Plus, { className: "size-3" })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Avatar,
+      {
+        label: "Ravi Patel",
+        ariaLabel: t("design_system.gallery.examples.avatar.remove"),
+        badge: /* @__PURE__ */ jsx(X, { className: "size-3" }),
+        badgeClassName: "bg-status-error-icon text-white"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Avatar,
+      {
+        label: "James Brown",
+        ariaLabel: t("design_system.gallery.examples.avatar.notification"),
+        status: "error",
+        statusPosition: "top-right"
+      }
+    )
+  ] });
+}
+function SeparatorActionDemo({ kind }) {
+  const t = useT();
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-2.5", children: [
+    /* @__PURE__ */ jsx(Separator, { className: "min-w-0 flex-1" }),
+    kind === "icon" ? /* @__PURE__ */ jsx(IconButton, { size: "default", "aria-label": t("design_system.gallery.examples.separator.add"), children: /* @__PURE__ */ jsx(Plus, { className: "size-5" }) }) : kind === "icon-group" ? /* @__PURE__ */ jsxs(ButtonGroup, { "aria-label": t("design_system.gallery.examples.separator.actions"), children: [
+      /* @__PURE__ */ jsx(IconButton, { size: "default", "aria-label": t("design_system.gallery.examples.separator.previous"), children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-5" }) }),
+      /* @__PURE__ */ jsx(IconButton, { size: "default", "aria-label": t("design_system.gallery.examples.separator.add"), children: /* @__PURE__ */ jsx(Plus, { className: "size-5" }) }),
+      /* @__PURE__ */ jsx(IconButton, { size: "default", "aria-label": t("design_system.gallery.examples.separator.next"), children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-5" }) })
+    ] }) : kind === "text" ? /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", variant: "outline", className: "px-2.5", children: t("design_system.gallery.examples.separator.add") }) : /* @__PURE__ */ jsxs(ButtonGroup, { size: "sm", "aria-label": t("design_system.gallery.examples.separator.actions"), children: [
+      /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", variant: "outline", className: "px-3.5", children: t("design_system.gallery.examples.separator.previous") }),
+      /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", variant: "outline", className: "px-3.5", children: t("design_system.gallery.examples.separator.add") }),
+      /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", variant: "outline", className: "px-3.5", children: t("design_system.gallery.examples.separator.next") })
+    ] }),
+    /* @__PURE__ */ jsx(Separator, { className: "min-w-0 flex-1" })
+  ] });
+}
+function SeparatorTextDemo({ kind }) {
+  const t = useT();
+  return kind === "text" ? /* @__PURE__ */ jsx(Separator, { section: true, label: t("design_system.gallery.examples.separator.or"), className: "bg-transparent px-2 py-1" }) : /* @__PURE__ */ jsxs("div", { className: "grid w-full gap-6", children: [
+    /* @__PURE__ */ jsx(Separator, { label: t("design_system.gallery.examples.separator.or"), labelAlign: "start" }),
+    /* @__PURE__ */ jsx(Separator, { label: t("design_system.gallery.examples.separator.or"), labelAlign: "center" }),
+    /* @__PURE__ */ jsx(Separator, { label: t("design_system.gallery.examples.separator.or"), labelAlign: "end" })
+  ] });
+}
+function BadgeAppearanceDemo({ appearance }) {
+  const t = useT();
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-3", children: ["neutral", "info", "warning", "error", "success", "pink", "yellow", "purple", "sky", "teal"].map(
+      (tone) => /* @__PURE__ */ jsx(Badge, { appearance, tone, dot: true, children: tone }, tone)
+    ) }),
+    /* @__PURE__ */ jsx("p", { className: "max-w-2xl text-xs leading-5 text-muted-foreground", children: t("design_system.gallery.examples.badgeTag.paletteHint") })
+  ] });
+}
+function BadgeSourceSizeDemo() {
+  const t = useT();
+  const label = t("design_system.gallery.examples.badgeTag.label");
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-6", children: [16, 20].map((size) => /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
+    /* @__PURE__ */ jsxs("span", { className: "w-12 text-xs text-muted-foreground", children: [
+      size,
+      "px"
+    ] }),
+    /* @__PURE__ */ jsx(Badge, { size, appearance: "filled", tone: "purple", children: label }),
+    /* @__PURE__ */ jsx(Badge, { size, appearance: "light", tone: "yellow", dot: true, children: label }),
+    /* @__PURE__ */ jsx(Badge, { size, appearance: "lighter", tone: "sky", leadingIcon: /* @__PURE__ */ jsx(User, {}), children: label }),
+    /* @__PURE__ */ jsx(Badge, { size, appearance: "stroke", tone: "teal", trailingIcon: /* @__PURE__ */ jsx(ChevronRight, {}), children: label }),
+    /* @__PURE__ */ jsx(Badge, { size, appearance: "filled", tone: "info", numeric: true, children: 2 }),
+    /* @__PURE__ */ jsx(Badge, { size, appearance: "filled", tone: "info", numeric: true, children: 125 }),
+    /* @__PURE__ */ jsx(Badge, { size, appearance: "stroke", tone: "purple", disabled: true, children: label })
+  ] }, size)) });
+}
+function BadgeContentDemo() {
+  const t = useT();
+  const label = t("design_system.gallery.examples.badgeTag.label");
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
+    /* @__PURE__ */ jsx(Badge, { appearance: "lighter", tone: "info", children: label }),
+    /* @__PURE__ */ jsx(Badge, { appearance: "lighter", tone: "info", dot: true, children: label }),
+    /* @__PURE__ */ jsx(Badge, { appearance: "lighter", tone: "info", leadingIcon: /* @__PURE__ */ jsx(User, {}), children: label }),
+    /* @__PURE__ */ jsx(Badge, { appearance: "lighter", tone: "info", trailingIcon: /* @__PURE__ */ jsx(ChevronRight, {}), children: label }),
+    /* @__PURE__ */ jsx(Badge, { appearance: "filled", tone: "info", children: 4 }),
+    /* @__PURE__ */ jsx(Badge, { appearance: "stroke", tone: "info", children: 24 })
+  ] });
+}
+function BadgeDisabledDemo() {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-3", children: ["filled", "light", "lighter", "stroke"].map((appearance) => /* @__PURE__ */ jsx(Badge, { appearance, tone: "info", disabled: true, leadingIcon: /* @__PURE__ */ jsx(User, {}), children: t("design_system.gallery.examples.badgeTag.locked") }, appearance)) });
+}
+function RemovableBadgeDemo() {
+  const t = useT();
+  const [visible, setVisible] = React.useState(true);
+  const region = t("design_system.gallery.examples.badgeTag.region");
+  const locked = t("design_system.gallery.examples.badgeTag.locked");
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
+    visible && /* @__PURE__ */ jsx(
+      Badge,
+      {
+        appearance: "lighter",
+        tone: "neutral",
+        removable: true,
+        onRemove: () => setVisible(false),
+        removeAriaLabel: t("design_system.gallery.examples.badgeTag.remove", {
+          label: region
+        }),
+        children: region
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Badge,
+      {
+        appearance: "lighter",
+        tone: "neutral",
+        disabled: true,
+        removable: true,
+        onRemove: () => setVisible(false),
+        removeAriaLabel: t("design_system.gallery.examples.badgeTag.remove", {
+          label: locked
+        }),
+        children: locked
+      }
+    ),
+    /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: "sm", disabled: visible, onClick: () => setVisible(true), children: t("design_system.gallery.examples.badgeTag.restore") })
+  ] });
+}
+function StatusAppearanceDemo({ appearance }) {
+  return /* @__PURE__ */ jsx("div", { className: "grid gap-4", children: [true, false].map((dot) => /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-3", children: ["success", "warning", "error", "info", "neutral"].map((variant) => /* @__PURE__ */ jsx(StatusBadge, { variant, appearance, dot, children: variant }, variant)) }, String(dot))) });
+}
+function TagAppearanceDemo({ appearance }) {
+  const t = useT();
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
+      /* @__PURE__ */ jsx(Tag, { appearance, children: t("design_system.gallery.examples.badgeTag.label") }),
+      /* @__PURE__ */ jsx(Tag, { appearance, leading: /* @__PURE__ */ jsx(User, {}), children: t("design_system.gallery.examples.badgeTag.customer") }),
+      /* @__PURE__ */ jsx(
+        Tag,
+        {
+          appearance,
+          leading: /* @__PURE__ */ jsx("img", { src: avatarPhotoSrc, alt: "", className: "size-4 rounded-full object-cover" }),
+          children: "James Brown"
+        }
+      ),
+      /* @__PURE__ */ jsx(Tag, { appearance, leading: /* @__PURE__ */ jsx("span", { children: "\u{1F1F5}\u{1F1F1}" }), children: t("design_system.gallery.examples.badgeTag.country") }),
+      /* @__PURE__ */ jsx(
+        Tag,
+        {
+          appearance,
+          leading: /* @__PURE__ */ jsx("img", { src: githubLogoSrc, alt: "", className: "size-4 rounded-sm bg-white" }),
+          children: "GitHub"
+        }
+      ),
+      /* @__PURE__ */ jsx(Tag, { appearance, leading: /* @__PURE__ */ jsx(Building2, {}), sublabel: "(4)", children: "Open Mercato" })
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "max-w-2xl text-xs leading-5 text-muted-foreground", children: t("design_system.gallery.examples.badgeTag.tagHint") })
+  ] });
+}
+function RemovableTagDemo() {
+  const t = useT();
+  const [removed, setRemoved] = React.useState([]);
+  const region = t("design_system.gallery.examples.badgeTag.region");
+  const locked = t("design_system.gallery.examples.badgeTag.locked");
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsx("p", { className: "max-w-2xl text-xs leading-5 text-muted-foreground", children: t("design_system.gallery.examples.badgeTag.statesHint") }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
+      ["stroke", "gray"].map((appearance) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+        !removed.includes(appearance) && /* @__PURE__ */ jsx(
+          Tag,
+          {
+            appearance,
+            leading: /* @__PURE__ */ jsx(User, {}),
+            sublabel: "(4)",
+            onRemove: () => setRemoved((current) => [...current, appearance]),
+            removeAriaLabel: t("design_system.gallery.examples.badgeTag.remove", {
+              label: region
+            }),
+            children: region
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Tag,
+          {
+            appearance,
+            disabled: true,
+            leading: /* @__PURE__ */ jsx(User, {}),
+            sublabel: "(4)",
+            onRemove: () => setRemoved((current) => [...current, appearance]),
+            removeAriaLabel: t("design_system.gallery.examples.badgeTag.remove", {
+              label: locked
+            }),
+            children: locked
+          }
+        )
+      ] }, appearance)),
+      /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: "sm", disabled: !removed.length, onClick: () => setRemoved([]), children: t("design_system.gallery.examples.badgeTag.restore") })
+    ] })
+  ] });
+}
 const badgeEntry = {
   id: "badge",
   title: "Badge",
   importPath: "@open-mercato/ui/primitives/badge",
+  figmaNodeId: "118:2324",
   usage: {
     do: [
       "Counts and short semantic labels; the brand variant for custom-view and renewal pills.",
-      "Semantic variants (success/warning/info/neutral/error) come from status tokens \u2014 no custom colors."
+      "Semantic variants (success/warning/info/neutral/error) come from status tokens \u2014 no custom colors.",
+      "Four appearances and ten color families; numeric sizes16/20 follow measured source dimensions. Named sizes and semantic status palettes retain application defaults; new category fills use measured Figma colors with accessible text."
     ],
     dont: ["Not for system statuses (use StatusBadge) or user-applied labels (use Tag)."]
   },
@@ -48,14 +596,7 @@ const badgeEntry = {
     {
       id: "semantic",
       title: "Semantic variants",
-      render: () => /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Badge, { variant: "success", children: "Success" }),
-        /* @__PURE__ */ jsx(Badge, { variant: "warning", children: "Warning" }),
-        /* @__PURE__ */ jsx(Badge, { variant: "info", children: "Info" }),
-        /* @__PURE__ */ jsx(Badge, { variant: "neutral", children: "Neutral" }),
-        /* @__PURE__ */ jsx(Badge, { variant: "error", children: "Error" }),
-        /* @__PURE__ */ jsx(Badge, { variant: "brand", children: "Brand" })
-      ] }),
+      render: () => /* @__PURE__ */ jsx(BadgeEntrySemanticPreview, {}),
       code: `import { Badge } from '@open-mercato/ui/primitives/badge'
 
 <Badge variant="success">Success</Badge>
@@ -68,11 +609,7 @@ const badgeEntry = {
     {
       id: "sizes",
       title: "Sizes",
-      render: () => /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Badge, { variant: "info", size: "lg", children: "Large" }),
-        /* @__PURE__ */ jsx(Badge, { variant: "info", size: "default", children: "Default" }),
-        /* @__PURE__ */ jsx(Badge, { variant: "info", size: "sm", children: "Small" })
-      ] }),
+      render: () => /* @__PURE__ */ jsx(BadgeEntrySizesPreview, {}),
       code: `import { Badge } from '@open-mercato/ui/primitives/badge'
 
 <Badge variant="info" size="lg">Large</Badge>
@@ -82,11 +619,7 @@ const badgeEntry = {
     {
       id: "dot",
       title: "With dot",
-      render: () => /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Badge, { variant: "success", dot: true, children: "Active" }),
-        /* @__PURE__ */ jsx(Badge, { variant: "neutral", dot: true, children: "Draft" }),
-        /* @__PURE__ */ jsx(Badge, { variant: "brand", dot: true, children: "Custom view" })
-      ] }),
+      render: () => /* @__PURE__ */ jsx(BadgeEntryDotPreview, {}),
       code: `import { Badge } from '@open-mercato/ui/primitives/badge'
 
 <Badge variant="success" dot>Active</Badge>
@@ -96,16 +629,107 @@ const badgeEntry = {
     {
       id: "removable",
       title: "Removable",
-      render: () => /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Badge, { variant: "neutral", removable: true, onRemove: () => {
-        }, children: "Filter: Region" }),
-        /* @__PURE__ */ jsx(Badge, { variant: "brand", removable: true, onRemove: () => {
-        }, children: "Renewal" })
-      ] }),
+      render: () => /* @__PURE__ */ jsx(RemovableBadgeDemo, {}),
+      code: `import * as React from 'react'
+import { Badge } from '@open-mercato/ui/primitives/badge'
+import { Button } from '@open-mercato/ui/primitives/button'
+
+const [visible, setVisible] = React.useState(true)
+{visible && <Badge appearance="lighter" tone="neutral" removable onRemove={() => setVisible(false)} removeAriaLabel={removeLabel}>{label}</Badge>}
+<Badge appearance="lighter" tone="neutral" disabled removable onRemove={() => setVisible(false)} removeAriaLabel={removeLockedLabel}>{lockedLabel}</Badge>
+<Button type="button" variant="outline" size="sm" disabled={visible} onClick={() => setVisible(true)}>{restoreLabel}</Button>`
+    },
+    {
+      id: "appearance-filled",
+      title: "Filled appearance",
+      render: () => /* @__PURE__ */ jsx(BadgeAppearanceDemo, { appearance: "filled" }),
       code: `import { Badge } from '@open-mercato/ui/primitives/badge'
 
-<Badge variant="neutral" removable onRemove={() => setRegion(null)}>Filter: Region</Badge>
-<Badge variant="brand" removable onRemove={() => clearTag()}>Renewal</Badge>`
+{(['neutral', 'info', 'warning', 'error', 'success', 'pink', 'yellow', 'purple', 'sky', 'teal'] as const).map(tone => (
+  <Badge key={tone} appearance="filled" tone={tone} dot>{tone}</Badge>
+))}`
+    },
+    {
+      id: "appearance-light",
+      title: "Light appearance",
+      render: () => /* @__PURE__ */ jsx(BadgeAppearanceDemo, { appearance: "light" }),
+      code: `import { Badge } from '@open-mercato/ui/primitives/badge'
+
+{(['neutral', 'info', 'warning', 'error', 'success', 'pink', 'yellow', 'purple', 'sky', 'teal'] as const).map(tone => (
+  <Badge key={tone} appearance="light" tone={tone} dot>{tone}</Badge>
+))}`
+    },
+    {
+      id: "appearance-lighter",
+      title: "Lighter appearance",
+      render: () => /* @__PURE__ */ jsx(BadgeAppearanceDemo, { appearance: "lighter" }),
+      code: `import { Badge } from '@open-mercato/ui/primitives/badge'
+
+{(['neutral', 'info', 'warning', 'error', 'success', 'pink', 'yellow', 'purple', 'sky', 'teal'] as const).map(tone => (
+  <Badge key={tone} appearance="lighter" tone={tone} dot>{tone}</Badge>
+))}`
+    },
+    {
+      id: "appearance-stroke",
+      title: "Stroke appearance",
+      render: () => /* @__PURE__ */ jsx(BadgeAppearanceDemo, { appearance: "stroke" }),
+      code: `import { Badge } from '@open-mercato/ui/primitives/badge'
+
+{(['neutral', 'info', 'warning', 'error', 'success', 'pink', 'yellow', 'purple', 'sky', 'teal'] as const).map(tone => (
+  <Badge key={tone} appearance="stroke" tone={tone} dot>{tone}</Badge>
+))}`
+    },
+    {
+      id: "content",
+      title: "Basic, dot, icons and numeric content",
+      render: () => /* @__PURE__ */ jsx(BadgeContentDemo, {}),
+      code: `import { Badge } from '@open-mercato/ui/primitives/badge'
+import { User, ChevronRight } from 'lucide-react'
+
+<Badge appearance="lighter" tone="info">{label}</Badge>
+<Badge appearance="lighter" tone="info" dot>{label}</Badge>
+<Badge appearance="lighter" tone="info" leadingIcon={<User />}>{label}</Badge>
+<Badge appearance="lighter" tone="info" trailingIcon={<ChevronRight />}>{label}</Badge>
+<Badge appearance="filled" tone="info">{4}</Badge>
+<Badge appearance="stroke" tone="info">{24}</Badge>`
+    },
+    {
+      id: "disabled",
+      title: "Disabled appearances",
+      render: () => /* @__PURE__ */ jsx(BadgeDisabledDemo, {}),
+      code: `import { Badge } from '@open-mercato/ui/primitives/badge'
+import { User } from 'lucide-react'
+
+{(['filled', 'light', 'lighter', 'stroke'] as const).map(appearance => (
+  <Badge key={appearance} appearance={appearance} tone="info" disabled leadingIcon={<User />}>{label}</Badge>
+))}`
+    },
+    {
+      id: "source-sizes",
+      title: "Source16px /20px and numeric content",
+      render: () => /* @__PURE__ */ jsx(BadgeSourceSizeDemo, {}),
+      code: `import { Badge } from '@open-mercato/ui/primitives/badge'
+import { User, ChevronRight } from 'lucide-react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+
+function BadgeSourceSizeDemo() {
+  const t = useT()
+  const label = t('design_system.gallery.examples.badgeTag.label')
+  return <div className="flex flex-col gap-6">
+    {([16, 20] as const).map(size => <div key={size} className="flex flex-wrap items-center gap-3">
+      <span className="w-12 text-xs text-muted-foreground">{size}px</span>
+      <Badge size={size} appearance="filled" tone="purple">{label}</Badge>
+      <Badge size={size} appearance="light" tone="yellow" dot>{label}</Badge>
+      <Badge size={size} appearance="lighter" tone="sky" leadingIcon={<User />}>{label}</Badge>
+      <Badge size={size} appearance="stroke" tone="teal" trailingIcon={<ChevronRight />}>{label}</Badge>
+      <Badge size={size} appearance="filled" tone="info" numeric>{2}</Badge>
+      <Badge size={size} appearance="filled" tone="info" numeric>{125}</Badge>
+      <Badge size={size} appearance="stroke" tone="purple" disabled>{label}</Badge>
+    </div>)}
+  </div>
+}
+
+<BadgeSourceSizeDemo />`
     }
   ]
 };
@@ -113,6 +737,7 @@ const statusBadgeEntry = {
   id: "status-badge",
   title: "StatusBadge",
   importPath: "@open-mercato/ui/primitives/status-badge",
+  figmaNodeId: "171:5100",
   usage: {
     do: [
       "System-computed statuses (active, pending, failed) \u2014 drive variants through a shared StatusMap.",
@@ -124,13 +749,7 @@ const statusBadgeEntry = {
     {
       id: "with-dot",
       title: "Variants with dot",
-      render: () => /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(StatusBadge, { variant: "success", dot: true, children: "Active" }),
-        /* @__PURE__ */ jsx(StatusBadge, { variant: "warning", dot: true, children: "Pending" }),
-        /* @__PURE__ */ jsx(StatusBadge, { variant: "error", dot: true, children: "Failed" }),
-        /* @__PURE__ */ jsx(StatusBadge, { variant: "info", dot: true, children: "Syncing" }),
-        /* @__PURE__ */ jsx(StatusBadge, { variant: "neutral", dot: true, children: "Archived" })
-      ] }),
+      render: () => /* @__PURE__ */ jsx(StatusBadgeEntryWithDotPreview, {}),
       code: `import { StatusBadge } from '@open-mercato/ui/primitives/status-badge'
 
 <StatusBadge variant="success" dot>Active</StatusBadge>
@@ -142,14 +761,31 @@ const statusBadgeEntry = {
     {
       id: "without-dot",
       title: "Without dot",
-      render: () => /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(StatusBadge, { variant: "success", children: "Paid" }),
-        /* @__PURE__ */ jsx(StatusBadge, { variant: "neutral", children: "Draft" })
-      ] }),
+      render: () => /* @__PURE__ */ jsx(StatusBadgeEntryWithoutDotPreview, {}),
       code: `import { StatusBadge } from '@open-mercato/ui/primitives/status-badge'
 
 <StatusBadge variant="success">Paid</StatusBadge>
 <StatusBadge variant="neutral">Draft</StatusBadge>`
+    },
+    {
+      id: "appearance-light",
+      title: "Light appearance, with and without dot",
+      render: () => /* @__PURE__ */ jsx(StatusAppearanceDemo, { appearance: "light" }),
+      code: `import { StatusBadge } from '@open-mercato/ui/primitives/status-badge'
+
+{[true, false].map(dot => (['success', 'warning', 'error', 'info', 'neutral'] as const).map(variant => (
+  <StatusBadge key={variant + String(dot)} variant={variant} appearance="light" dot={dot}>{variant}</StatusBadge>
+)))}`
+    },
+    {
+      id: "appearance-stroke",
+      title: "Stroke appearance, with and without dot",
+      render: () => /* @__PURE__ */ jsx(StatusAppearanceDemo, { appearance: "stroke" }),
+      code: `import { StatusBadge } from '@open-mercato/ui/primitives/status-badge'
+
+{[true, false].map(dot => (['success', 'warning', 'error', 'info', 'neutral'] as const).map(variant => (
+  <StatusBadge key={variant + String(dot)} variant={variant} appearance="stroke" dot={dot}>{variant}</StatusBadge>
+)))}`
     }
   ]
 };
@@ -157,6 +793,7 @@ const tagEntry = {
   id: "tag",
   title: "Tag",
   importPath: "@open-mercato/ui/primitives/tag",
+  figmaNodeId: "431:16147",
   usage: {
     do: ["User-applied labels and categories; map domain types via TagMap for consistency."],
     dont: ["Not for system status \u2014 that is StatusBadge."]
@@ -189,11 +826,7 @@ const tagEntry = {
     {
       id: "dot",
       title: "With dot",
-      render: () => /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Tag, { variant: "success", dot: true, children: "Customer" }),
-        /* @__PURE__ */ jsx(Tag, { variant: "brand", dot: true, children: "Renewal" }),
-        /* @__PURE__ */ jsx(Tag, { variant: "pink", dot: true, children: "Campaign" })
-      ] }),
+      render: () => /* @__PURE__ */ jsx(TagEntryDotPreview, {}),
       code: `import { Tag } from '@open-mercato/ui/primitives/tag'
 
 <Tag variant="success" dot>Customer</Tag>
@@ -215,16 +848,46 @@ const tagEntry = {
     {
       id: "removable",
       title: "Removable",
-      render: () => /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Tag, { variant: "neutral", onRemove: () => {
-        }, children: "Wholesale" }),
-        /* @__PURE__ */ jsx(Tag, { variant: "neutral", onRemove: () => {
-        }, disabled: true, children: "Locked" })
-      ] }),
+      render: () => /* @__PURE__ */ jsx(RemovableTagDemo, {}),
+      code: `import * as React from 'react'
+import { Tag } from '@open-mercato/ui/primitives/tag'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { User } from 'lucide-react'
+
+const [removed, setRemoved] = React.useState<string[]>([])
+{(['stroke', 'gray'] as const).map(appearance => <React.Fragment key={appearance}>
+  {!removed.includes(appearance) && <Tag appearance={appearance} leading={<User />} sublabel="(4)" onRemove={() => setRemoved(current => [...current, appearance])} removeAriaLabel={removeLabel}>{label}</Tag>}
+  <Tag appearance={appearance} disabled leading={<User />} sublabel="(4)" onRemove={() => setRemoved(current => [...current, appearance])} removeAriaLabel={removeLockedLabel}>{lockedLabel}</Tag>
+</React.Fragment>)}
+<Button type="button" variant="outline" size="sm" disabled={!removed.length} onClick={() => setRemoved([])}>{restoreLabel}</Button>`
+    },
+    {
+      id: "appearance-stroke",
+      title: "Stroke appearance and leading content",
+      render: () => /* @__PURE__ */ jsx(TagAppearanceDemo, { appearance: "stroke" }),
       code: `import { Tag } from '@open-mercato/ui/primitives/tag'
+import { User, Building2 } from 'lucide-react'
 
-<Tag variant="neutral" onRemove={() => removeTag('wholesale')}>Wholesale</Tag>
-<Tag variant="neutral" onRemove={() => {}} disabled>Locked</Tag>`
+<Tag appearance="stroke">{label}</Tag>
+<Tag appearance="stroke" leading={<User />}>{customerLabel}</Tag>
+<Tag appearance="stroke" leading={<img src={avatarPhotoSrc} alt="" className="size-4 rounded-full object-cover" />}>James Brown</Tag>
+<Tag appearance="stroke" leading={<span>\u{1F1F5}\u{1F1F1}</span>}>{countryLabel}</Tag>
+<Tag appearance="stroke" leading={<img src={githubLogoSrc} alt="" className="size-4 rounded-sm bg-white" />}>GitHub</Tag>
+<Tag appearance="stroke" leading={<Building2 />} sublabel="(4)">Open Mercato</Tag>`
+    },
+    {
+      id: "appearance-gray",
+      title: "Gray appearance and leading content",
+      render: () => /* @__PURE__ */ jsx(TagAppearanceDemo, { appearance: "gray" }),
+      code: `import { Tag } from '@open-mercato/ui/primitives/tag'
+import { User, Building2 } from 'lucide-react'
+
+<Tag appearance="gray">{label}</Tag>
+<Tag appearance="gray" leading={<User />}>{customerLabel}</Tag>
+<Tag appearance="gray" leading={<img src={avatarPhotoSrc} alt="" className="size-4 rounded-full object-cover" />}>James Brown</Tag>
+<Tag appearance="gray" leading={<span>\u{1F1F5}\u{1F1F1}</span>}>{countryLabel}</Tag>
+<Tag appearance="gray" leading={<img src={githubLogoSrc} alt="" className="size-4 rounded-sm bg-white" />}>GitHub</Tag>
+<Tag appearance="gray" leading={<Building2 />} sublabel="(4)">Open Mercato</Tag>`
     }
   ]
 };
@@ -232,6 +895,21 @@ const avatarEntry = {
   id: "avatar",
   title: "Avatar",
   importPath: "@open-mercato/ui/primitives/avatar",
+  figmaNodeId: "245:18786",
+  usage: {
+    do: [
+      "Use src for photos, Memoji, and illustrations; use label for initials or icon for an entity symbol.",
+      "Numeric sizes reproduce all nine Figma diameters: 20, 24, 32, 40, 48, 56, 64, 72, and 80 px. Legacy xs/sm/md/lg/xl sizes remain 20/28/36/48/64 px.",
+      "Numeric 20\u201332 px initials use one letter; 40\u201380 px use two. Font size, line height, and medium weight follow the source. The application font and tracking remain governed by existing tokens.",
+      "Photo stacks use the audited size-specific overlaps. Initial stacks reduce overlap where two letters need more room, and full overflow counts can widen beyond the avatar diameter.",
+      "The six top-status examples use the existing circular badge slot and semantic colors. They show supported compositions, not an exact replica of the Figma verified silhouette.",
+      "Local James Brown assets come from Figma nodes 246:11135, 246:11139, and 246:11141. The production image crop can differ from Figma."
+    ],
+    dont: [
+      "Do not assume square avatars or simultaneous top and bottom decorations are supported by the current API.",
+      "Do not render interactive actions inside the decorative badge slot; put actions in a separate button."
+    ]
+  },
   variants: [
     {
       id: "sizes",
@@ -251,6 +929,96 @@ const avatarEntry = {
 <Avatar label="Wei Chen" size="md" />
 <Avatar label="Wei Chen" size="sm" />
 <Avatar label="Wei Chen" size="xs" />`
+    },
+    {
+      id: "figma-sizes",
+      title: "Figma sizes (20\u201380 px)",
+      render: () => /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-end gap-6", children: [20, 24, 32, 40, 48, 56, 64, 72, 80].map((size) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-3", children: [
+        /* @__PURE__ */ jsx(Avatar, { label: "Wei Chen", size }),
+        /* @__PURE__ */ jsxs("code", { className: "text-xs text-muted-foreground", children: [
+          size,
+          "px"
+        ] })
+      ] }, size)) }),
+      code: `import { Avatar } from '@open-mercato/ui/primitives/avatar'
+
+<Avatar label="Wei Chen" size={20} />
+<Avatar label="Wei Chen" size={24} />
+<Avatar label="Wei Chen" size={32} />
+<Avatar label="Wei Chen" size={40} />
+<Avatar label="Wei Chen" size={48} />
+<Avatar label="Wei Chen" size={56} />
+<Avatar label="Wei Chen" size={64} />
+<Avatar label="Wei Chen" size={72} />
+<Avatar label="Wei Chen" size={80} />`
+    },
+    {
+      id: "figma-stack-sizes",
+      title: "Figma stack sizes and readable initials",
+      render: () => /* @__PURE__ */ jsx("div", { className: "grid w-full gap-6", children: [20, 24, 32, 40, 48, 56, 64, 72, 80].map((size) => /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-6", children: [
+        /* @__PURE__ */ jsxs("code", { className: "text-xs text-muted-foreground", children: [
+          size,
+          "px"
+        ] }),
+        /* @__PURE__ */ jsxs(AvatarStack, { size, max: 3, overflowCount: 12, children: [
+          /* @__PURE__ */ jsx(Avatar, { label: "Wei Chen", size }),
+          /* @__PURE__ */ jsx(Avatar, { label: "Laura Perez", size }),
+          /* @__PURE__ */ jsx(Avatar, { label: "Omar Haddad", size })
+        ] })
+      ] }, size)) }),
+      code: `import { Avatar, AvatarStack } from '@open-mercato/ui/primitives/avatar'
+
+{([20, 24, 32, 40, 48, 56, 64, 72, 80] as const).map((size) => (
+  <AvatarStack key={size} size={size} max={3} overflowCount={12}>
+    <Avatar label="Wei Chen" size={size} />
+    <Avatar label="Laura Perez" size={size} />
+    <Avatar label="Omar Haddad" size={size} />
+  </AvatarStack>
+))}`
+    },
+    {
+      id: "photo",
+      title: "Photo source",
+      render: () => /* @__PURE__ */ jsx(Avatar, { label: "James Brown", src: avatarPhotoSrc, size: "lg" }),
+      code: `import { Avatar } from '@open-mercato/ui/primitives/avatar'
+import photo from './avatar-photo.png'
+
+<Avatar label="James Brown" src={typeof photo === 'string' ? photo : photo.src} size="lg" />`
+    },
+    {
+      id: "memoji",
+      title: "Memoji source",
+      render: () => /* @__PURE__ */ jsx(Avatar, { label: "James Brown", src: avatarMemojiSrc, size: "lg", variant: "monochrome" }),
+      code: `import { Avatar } from '@open-mercato/ui/primitives/avatar'
+import memoji from './avatar-memoji.png'
+
+<Avatar label="James Brown" src={typeof memoji === 'string' ? memoji : memoji.src} size="lg" variant="monochrome" />`
+    },
+    {
+      id: "illustration",
+      title: "Illustration source",
+      render: () => /* @__PURE__ */ jsx(Avatar, { label: "James Brown", src: avatarIllustrationSrc, size: "lg", variant: "monochrome" }),
+      code: `import { Avatar } from '@open-mercato/ui/primitives/avatar'
+import illustration from './avatar-illustration.png'
+
+<Avatar label="James Brown" src={typeof illustration === 'string' ? illustration : illustration.src} size="lg" variant="monochrome" />`
+    },
+    {
+      id: "solid-background",
+      title: "Solid background",
+      render: () => /* @__PURE__ */ jsx(Avatar, { label: "James Brown", icon: /* @__PURE__ */ jsx("span", {}), size: "lg", variant: "monochrome" }),
+      code: `import { Avatar } from '@open-mercato/ui/primitives/avatar'
+
+<Avatar label="James Brown" icon={<span />} size="lg" variant="monochrome" />`
+    },
+    {
+      id: "person-icon",
+      title: "Person icon",
+      render: () => /* @__PURE__ */ jsx(Avatar, { label: "James Brown", icon: /* @__PURE__ */ jsx(User, {}), size: "lg", variant: "monochrome" }),
+      code: `import { User } from 'lucide-react'
+import { Avatar } from '@open-mercato/ui/primitives/avatar'
+
+<Avatar label="James Brown" icon={<User />} size="lg" variant="monochrome" />`
     },
     {
       id: "variants",
@@ -282,6 +1050,87 @@ import { Avatar } from '@open-mercato/ui/primitives/avatar'
 <Avatar label="Laura Perez" status="busy" />
 <Avatar label="Omar Haddad" status="away" />
 <Avatar label="Ines Kowalska" status="offline" />`
+    },
+    {
+      id: "top-badges",
+      title: "Top Status compositions",
+      render: () => /* @__PURE__ */ jsx(AvatarBadgesDemo, {}),
+      code: `import { Check, Pin, Star, Plus, X } from 'lucide-react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Avatar } from '@open-mercato/ui/primitives/avatar'
+
+function AvatarBadges() {
+  const t = useT()
+  return (
+    <div className="flex flex-wrap items-center gap-6 p-2">
+      <Avatar label="Wei Chen" ariaLabel={t('design_system.gallery.examples.avatar.verified')} badge={<Check className="size-3" />} badgeClassName="bg-status-info-icon text-white" />
+      <Avatar label="Laura Perez" ariaLabel={t('design_system.gallery.examples.avatar.pinned')} badge={<Pin className="size-3" />} badgeClassName="bg-accent-indigo text-white" />
+      <Avatar label="Omar Haddad" ariaLabel={t('design_system.gallery.examples.avatar.favorite')} badge={<Star className="size-3" />} badgeClassName="bg-status-success-icon text-white" />
+      <Avatar label="Ines Kowalska" ariaLabel={t('design_system.gallery.examples.avatar.add')} badge={<Plus className="size-3" />} />
+      <Avatar label="Ravi Patel" ariaLabel={t('design_system.gallery.examples.avatar.remove')} badge={<X className="size-3" />} badgeClassName="bg-status-error-icon text-white" />
+      <Avatar label="James Brown" ariaLabel={t('design_system.gallery.examples.avatar.notification')} status="error" statusPosition="top-right" />
+    </div>
+  )
+}`
+    },
+    {
+      id: "company-badge",
+      title: "Company badge composition",
+      render: () => /* @__PURE__ */ jsx(
+        Avatar,
+        {
+          label: "Acme Corp",
+          src: avatarPhotoSrc,
+          size: "lg",
+          badge: /* @__PURE__ */ jsx(Building2, { className: "size-3" }),
+          badgeClassName: "top-auto bottom-0 translate-y-1/4"
+        }
+      ),
+      code: `import { Building2 } from 'lucide-react'
+import { Avatar } from '@open-mercato/ui/primitives/avatar'
+import photo from './avatar-photo.png'
+
+<Avatar label="Acme Corp" src={typeof photo === 'string' ? photo : photo.src} size="lg" badge={<Building2 className="size-3" />} badgeClassName="top-auto bottom-0 translate-y-1/4" />`
+    },
+    {
+      id: "rings",
+      title: "Ring tones (code extension)",
+      render: () => /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-6 p-2", children: [
+        /* @__PURE__ */ jsx(Avatar, { label: "Wei Chen", ring: true }),
+        /* @__PURE__ */ jsx(Avatar, { label: "Laura Perez", ring: "success" }),
+        /* @__PURE__ */ jsx(Avatar, { label: "Omar Haddad", ring: "warning" }),
+        /* @__PURE__ */ jsx(Avatar, { label: "Ines Kowalska", ring: "error" }),
+        /* @__PURE__ */ jsx(Avatar, { label: "Ravi Patel", ring: "muted" })
+      ] }),
+      code: `import { Avatar } from '@open-mercato/ui/primitives/avatar'
+
+<div className="flex flex-wrap gap-6 p-2">
+  <Avatar label="Wei Chen" ring />
+  <Avatar label="Laura Perez" ring="success" />
+  <Avatar label="Omar Haddad" ring="warning" />
+  <Avatar label="Ines Kowalska" ring="error" />
+  <Avatar label="Ravi Patel" ring="muted" />
+</div>`
+    },
+    {
+      id: "stack-sizes",
+      title: "AvatarStack sizes and full overflow counts",
+      render: () => /* @__PURE__ */ jsx("div", { className: "grid gap-6", children: ["xs", "sm", "md", "lg", "xl"].map((size) => /* @__PURE__ */ jsxs(AvatarStack, { size, max: 3, overflowCount: 12, children: [
+        /* @__PURE__ */ jsx(Avatar, { label: "Wei Chen", size }),
+        /* @__PURE__ */ jsx(Avatar, { label: "Laura Perez", size }),
+        /* @__PURE__ */ jsx(Avatar, { label: "Omar Haddad", size })
+      ] }, size)) }),
+      code: `import { Avatar, AvatarStack } from '@open-mercato/ui/primitives/avatar'
+
+<div className="grid gap-6">
+  {(['xs', 'sm', 'md', 'lg', 'xl'] as const).map((size) => (
+    <AvatarStack key={size} size={size} max={3} overflowCount={12}>
+      <Avatar label="Wei Chen" size={size} />
+      <Avatar label="Laura Perez" size={size} />
+      <Avatar label="Omar Haddad" size={size} />
+    </AvatarStack>
+  ))}
+</div>`
     },
     {
       id: "stack",
@@ -344,37 +1193,28 @@ const tableEntry = {
   importPath: "@open-mercato/ui/primitives/table",
   figmaNodeId: "167144:147544",
   variants: [
+    {
+      id: "header-states",
+      title: "Header / default, disabled, empty and sorting",
+      render: () => /* @__PURE__ */ jsx(TableHeaderExamples, {}),
+      code: tableHeaderExampleCode
+    },
+    {
+      id: "cells-48",
+      title: "Cell catalogue / 48px rows",
+      render: () => /* @__PURE__ */ jsx(TableCellExamples, { rowHeight: 48 }),
+      code: tableCellExampleCode(48)
+    },
+    {
+      id: "cells-64",
+      title: "Cell catalogue / 64px rows",
+      render: () => /* @__PURE__ */ jsx(TableCellExamples, { rowHeight: 64 }),
+      code: tableCellExampleCode(64)
+    },
     {
       id: "default",
       title: "default",
-      render: () => /* @__PURE__ */ jsxs(Table, { children: [
-        /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
-          /* @__PURE__ */ jsx(TableHead, { children: "Order" }),
-          /* @__PURE__ */ jsx(TableHead, { children: "Customer" }),
-          /* @__PURE__ */ jsx(TableHead, { children: "Status" }),
-          /* @__PURE__ */ jsx(TableHead, { className: "text-right", children: "Total" })
-        ] }) }),
-        /* @__PURE__ */ jsxs(TableBody, { children: [
-          /* @__PURE__ */ jsxs(TableRow, { children: [
-            /* @__PURE__ */ jsx(TableCell, { children: "#1042" }),
-            /* @__PURE__ */ jsx(TableCell, { children: "Wei Chen" }),
-            /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(StatusBadge, { variant: "success", dot: true, children: "Paid" }) }),
-            /* @__PURE__ */ jsx(TableCell, { className: "text-right", children: "$1,250.00" })
-          ] }),
-          /* @__PURE__ */ jsxs(TableRow, { children: [
-            /* @__PURE__ */ jsx(TableCell, { children: "#1041" }),
-            /* @__PURE__ */ jsx(TableCell, { children: "Laura Perez" }),
-            /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(StatusBadge, { variant: "warning", dot: true, children: "Pending" }) }),
-            /* @__PURE__ */ jsx(TableCell, { className: "text-right", children: "$310.50" })
-          ] }),
-          /* @__PURE__ */ jsxs(TableRow, { children: [
-            /* @__PURE__ */ jsx(TableCell, { children: "#1040" }),
-            /* @__PURE__ */ jsx(TableCell, { children: "Omar Haddad" }),
-            /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(StatusBadge, { variant: "neutral", dot: true, children: "Draft" }) }),
-            /* @__PURE__ */ jsx(TableCell, { className: "text-right", children: "$89.00" })
-          ] })
-        ] })
-      ] }),
+      render: () => /* @__PURE__ */ jsx(TableEntryDefaultPreview, {}),
       code: `import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@open-mercato/ui/primitives/table'
 import { StatusBadge } from '@open-mercato/ui/primitives/status-badge'
 
@@ -400,35 +1240,7 @@ import { StatusBadge } from '@open-mercato/ui/primitives/status-badge'
     {
       id: "striped",
       title: "striped",
-      render: () => /* @__PURE__ */ jsxs(Table, { variant: "striped", children: [
-        /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
-          /* @__PURE__ */ jsx(TableHead, { children: "SKU" }),
-          /* @__PURE__ */ jsx(TableHead, { children: "Product" }),
-          /* @__PURE__ */ jsx(TableHead, { className: "text-right", children: "Stock" })
-        ] }) }),
-        /* @__PURE__ */ jsxs(TableBody, { children: [
-          /* @__PURE__ */ jsxs(TableRow, { children: [
-            /* @__PURE__ */ jsx(TableCell, { children: "AP-100" }),
-            /* @__PURE__ */ jsx(TableCell, { children: "Apex Desk Lamp" }),
-            /* @__PURE__ */ jsx(TableCell, { className: "text-right", children: "120" })
-          ] }),
-          /* @__PURE__ */ jsxs(TableRow, { children: [
-            /* @__PURE__ */ jsx(TableCell, { children: "AP-101" }),
-            /* @__PURE__ */ jsx(TableCell, { children: "Apex Monitor Stand" }),
-            /* @__PURE__ */ jsx(TableCell, { className: "text-right", children: "64" })
-          ] }),
-          /* @__PURE__ */ jsxs(TableRow, { children: [
-            /* @__PURE__ */ jsx(TableCell, { children: "AP-102" }),
-            /* @__PURE__ */ jsx(TableCell, { children: "Apex Cable Kit" }),
-            /* @__PURE__ */ jsx(TableCell, { className: "text-right", children: "310" })
-          ] }),
-          /* @__PURE__ */ jsxs(TableRow, { children: [
-            /* @__PURE__ */ jsx(TableCell, { children: "AP-103" }),
-            /* @__PURE__ */ jsx(TableCell, { children: "Apex Laptop Riser" }),
-            /* @__PURE__ */ jsx(TableCell, { className: "text-right", children: "18" })
-          ] })
-        ] })
-      ] }),
+      render: () => /* @__PURE__ */ jsx(TableEntryStripedPreview, {}),
       code: `import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@open-mercato/ui/primitives/table'
 
 <Table variant="striped">
@@ -445,26 +1257,7 @@ import { StatusBadge } from '@open-mercato/ui/primitives/status-badge'
     {
       id: "with-footer",
       title: "With footer",
-      render: () => /* @__PURE__ */ jsxs(Table, { children: [
-        /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
-          /* @__PURE__ */ jsx(TableHead, { children: "Line" }),
-          /* @__PURE__ */ jsx(TableHead, { className: "text-right", children: "Amount" })
-        ] }) }),
-        /* @__PURE__ */ jsxs(TableBody, { children: [
-          /* @__PURE__ */ jsxs(TableRow, { children: [
-            /* @__PURE__ */ jsx(TableCell, { children: "Subtotal" }),
-            /* @__PURE__ */ jsx(TableCell, { className: "text-right", children: "$1,560.50" })
-          ] }),
-          /* @__PURE__ */ jsxs(TableRow, { children: [
-            /* @__PURE__ */ jsx(TableCell, { children: "Shipping" }),
-            /* @__PURE__ */ jsx(TableCell, { className: "text-right", children: "$24.00" })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx(TableFooter, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
-          /* @__PURE__ */ jsx(TableCell, { children: "Total" }),
-          /* @__PURE__ */ jsx(TableCell, { className: "text-right", children: "$1,584.50" })
-        ] }) })
-      ] }),
+      render: () => /* @__PURE__ */ jsx(TableEntryWithFooterPreview, {}),
       code: `import { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell } from '@open-mercato/ui/primitives/table'
 
 <Table>
@@ -488,14 +1281,7 @@ const cardEntry = {
     {
       id: "default",
       title: "default",
-      render: () => /* @__PURE__ */ jsxs(Card, { className: "w-full max-w-sm", children: [
-        /* @__PURE__ */ jsxs(CardHeader, { children: [
-          /* @__PURE__ */ jsx(CardTitle, { children: "Monthly revenue" }),
-          /* @__PURE__ */ jsx(CardDescription, { children: "Net revenue across all channels." })
-        ] }),
-        /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx("p", { className: "text-2xl font-semibold", children: "$48,210" }) }),
-        /* @__PURE__ */ jsx(CardFooter, { children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Updated 5 minutes ago" }) })
-      ] }),
+      render: () => /* @__PURE__ */ jsx(CardEntryDefaultPreview, {}),
       code: `import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@open-mercato/ui/primitives/card'
 
 <Card>
@@ -514,32 +1300,28 @@ const cardEntry = {
     {
       id: "with-action",
       title: "With action slot",
-      render: () => /* @__PURE__ */ jsxs(Card, { className: "w-full max-w-sm", children: [
-        /* @__PURE__ */ jsxs(CardHeader, { children: [
-          /* @__PURE__ */ jsx(CardTitle, { children: "Team members" }),
-          /* @__PURE__ */ jsx(CardDescription, { children: "People with access to this workspace." }),
-          /* @__PURE__ */ jsx(CardAction, { children: /* @__PURE__ */ jsx(IconButton, { variant: "ghost", "aria-label": "More", children: /* @__PURE__ */ jsx(MoreHorizontal, {}) }) })
-        ] }),
-        /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs(AvatarStack, { max: 3, size: "sm", children: [
-          /* @__PURE__ */ jsx(Avatar, { label: "Wei Chen", size: "sm" }),
-          /* @__PURE__ */ jsx(Avatar, { label: "Laura Perez", size: "sm" }),
-          /* @__PURE__ */ jsx(Avatar, { label: "Omar Haddad", size: "sm" }),
-          /* @__PURE__ */ jsx(Avatar, { label: "Ines Kowalska", size: "sm" })
-        ] }) })
-      ] }),
+      render: () => /* @__PURE__ */ jsx(CardEntryWithActionPreview, {}),
       code: `import { MoreHorizontal } from 'lucide-react'
 import { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent } from '@open-mercato/ui/primitives/card'
 import { IconButton } from '@open-mercato/ui/primitives/icon-button'
+import { Avatar, AvatarStack } from '@open-mercato/ui/primitives/avatar'
 
-<Card>
+<Card className="w-full max-w-sm">
   <CardHeader>
     <CardTitle>Team members</CardTitle>
     <CardDescription>People with access to this workspace.</CardDescription>
     <CardAction>
-      <IconButton variant="ghost" aria-label="More"><MoreHorizontal /></IconButton>
+      <IconButton type="button" variant="ghost" aria-label="More"><MoreHorizontal /></IconButton>
     </CardAction>
   </CardHeader>
-  <CardContent>{/* content */}</CardContent>
+  <CardContent>
+    <AvatarStack max={3} size="sm">
+      <Avatar label="Wei Chen" size="sm" />
+      <Avatar label="Laura Perez" size="sm" />
+      <Avatar label="Omar Haddad" size="sm" />
+      <Avatar label="Ines Kowalska" size="sm" />
+    </AvatarStack>
+  </CardContent>
 </Card>`
     }
   ]
@@ -548,34 +1330,186 @@ const separatorEntry = {
   id: "separator",
   title: "Separator",
   importPath: "@open-mercato/ui/primitives/separator",
+  figmaNodeId: "414:4401",
+  usage: {
+    do: [
+      "The nine Figma Content Divider layouts are represented: line, line spacing, text and line, text only, solid text, icon button, icon button group, text button, and text button group.",
+      "Place action buttons between two flexible Separator rules with gap-2.5. ButtonGroup supplies joined borders; do not place interactive controls inside a separator role.",
+      "Vertical, dashed, and label-alignment examples expose the existing code API beyond the nine Figma layouts.",
+      "Compositions use production tokens and responsive width. The labeled primitive remains 12/16 px; the audited Figma text-and-line label is 11/12 px."
+    ]
+  },
   variants: [
     {
       id: "default",
       title: "default",
-      render: () => /* @__PURE__ */ jsxs("div", { className: "w-full max-w-sm", children: [
-        /* @__PURE__ */ jsx("p", { className: "text-sm", children: "Shipping details" }),
-        /* @__PURE__ */ jsx(Separator, { className: "my-3" }),
-        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Billing details" })
-      ] }),
+      render: () => /* @__PURE__ */ jsx(SeparatorEntryDefaultPreview, {}),
       code: `import { Separator } from '@open-mercato/ui/primitives/separator'
 
 <Separator className="my-3" />`
+    },
+    {
+      id: "line-spacing",
+      title: "Line Spacing",
+      render: () => /* @__PURE__ */ jsx("div", { className: "flex h-1 w-full items-center", children: /* @__PURE__ */ jsx(Separator, {}) }),
+      code: `import { Separator } from '@open-mercato/ui/primitives/separator'
+
+<div className="flex h-1 w-full items-center"><Separator /></div>`
     },
     {
       id: "labeled",
       title: "Labeled",
-      render: () => /* @__PURE__ */ jsx("div", { className: "w-full max-w-sm", children: /* @__PURE__ */ jsx(Separator, { label: "OR" }) }),
+      render: () => /* @__PURE__ */ jsx(SeparatorEntryLabeledPreview, {}),
       code: `import { Separator } from '@open-mercato/ui/primitives/separator'
 
 <Separator label="OR" />`
+    },
+    {
+      id: "text-divider",
+      title: "Text Divider",
+      render: () => /* @__PURE__ */ jsx(SeparatorTextDemo, { kind: "text" }),
+      code: `import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Separator } from '@open-mercato/ui/primitives/separator'
+
+function TextDivider() {
+  const t = useT()
+  return <Separator section label={t('design_system.gallery.examples.separator.or')} className="bg-transparent px-2 py-1" />
+}`
+    },
+    {
+      id: "label-alignments",
+      title: "Label alignments (code extension)",
+      render: () => /* @__PURE__ */ jsx(SeparatorTextDemo, { kind: "label-alignments" }),
+      code: `import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Separator } from '@open-mercato/ui/primitives/separator'
+
+function LabelAlignments() {
+  const t = useT()
+  return (
+    <div className="grid w-full gap-6">
+      <Separator label={t('design_system.gallery.examples.separator.or')} labelAlign="start" />
+      <Separator label={t('design_system.gallery.examples.separator.or')} labelAlign="center" />
+      <Separator label={t('design_system.gallery.examples.separator.or')} labelAlign="end" />
+    </div>
+  )
+}`
     },
     {
       id: "section",
       title: "Section header",
-      render: () => /* @__PURE__ */ jsx("div", { className: "w-full max-w-sm", children: /* @__PURE__ */ jsx(Separator, { section: true, label: "Amount & account" }) }),
+      render: () => /* @__PURE__ */ jsx("div", { className: "w-full max-w-sm", children: /* @__PURE__ */ jsx(Separator, { section: true, label: "Amount & account", className: "px-5" }) }),
       code: `import { Separator } from '@open-mercato/ui/primitives/separator'
 
-<Separator section label="Amount & account" />`
+<Separator section label="Amount & account" className="px-5" />`
+    },
+    {
+      id: "icon-button",
+      title: "Icon Button",
+      render: () => /* @__PURE__ */ jsx(SeparatorActionDemo, { kind: "icon" }),
+      code: `import { Plus } from 'lucide-react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { IconButton } from '@open-mercato/ui/primitives/icon-button'
+import { Separator } from '@open-mercato/ui/primitives/separator'
+
+function IconDivider() {
+  const t = useT()
+  return (
+    <div className="flex w-full items-center gap-2.5">
+      <Separator className="min-w-0 flex-1" />
+      <IconButton size="default" aria-label={t('design_system.gallery.examples.separator.add')}><Plus className="size-5" /></IconButton>
+      <Separator className="min-w-0 flex-1" />
+    </div>
+  )
+}`
+    },
+    {
+      id: "icon-button-group",
+      title: "Icon Button Group",
+      render: () => /* @__PURE__ */ jsx(SeparatorActionDemo, { kind: "icon-group" }),
+      code: `import { ChevronLeft, Plus, ChevronRight } from 'lucide-react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { IconButton } from '@open-mercato/ui/primitives/icon-button'
+import { ButtonGroup } from '@open-mercato/ui/primitives/button-group'
+import { Separator } from '@open-mercato/ui/primitives/separator'
+
+function IconGroupDivider() {
+  const t = useT()
+  return (
+    <div className="flex w-full items-center gap-2.5">
+      <Separator className="min-w-0 flex-1" />
+      <ButtonGroup aria-label={t('design_system.gallery.examples.separator.actions')}>
+        <IconButton size="default" aria-label={t('design_system.gallery.examples.separator.previous')}><ChevronLeft className="size-5" /></IconButton>
+        <IconButton size="default" aria-label={t('design_system.gallery.examples.separator.add')}><Plus className="size-5" /></IconButton>
+        <IconButton size="default" aria-label={t('design_system.gallery.examples.separator.next')}><ChevronRight className="size-5" /></IconButton>
+      </ButtonGroup>
+      <Separator className="min-w-0 flex-1" />
+    </div>
+  )
+}`
+    },
+    {
+      id: "text-button",
+      title: "Text Button",
+      render: () => /* @__PURE__ */ jsx(SeparatorActionDemo, { kind: "text" }),
+      code: `import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Separator } from '@open-mercato/ui/primitives/separator'
+
+function TextButtonDivider() {
+  const t = useT()
+  return (
+    <div className="flex w-full items-center gap-2.5">
+      <Separator className="min-w-0 flex-1" />
+      <Button type="button" size="sm" variant="outline" className="px-2.5">{t('design_system.gallery.examples.separator.add')}</Button>
+      <Separator className="min-w-0 flex-1" />
+    </div>
+  )
+}`
+    },
+    {
+      id: "text-button-group",
+      title: "Text Button Group",
+      render: () => /* @__PURE__ */ jsx(SeparatorActionDemo, { kind: "text-group" }),
+      code: `import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { ButtonGroup } from '@open-mercato/ui/primitives/button-group'
+import { Separator } from '@open-mercato/ui/primitives/separator'
+
+function TextGroupDivider() {
+  const t = useT()
+  return (
+    <div className="flex w-full items-center gap-2.5">
+      <Separator className="min-w-0 flex-1" />
+      <ButtonGroup size="sm" aria-label={t('design_system.gallery.examples.separator.actions')}>
+        <Button type="button" size="sm" variant="outline" className="px-3.5">{t('design_system.gallery.examples.separator.previous')}</Button>
+        <Button type="button" size="sm" variant="outline" className="px-3.5">{t('design_system.gallery.examples.separator.add')}</Button>
+        <Button type="button" size="sm" variant="outline" className="px-3.5">{t('design_system.gallery.examples.separator.next')}</Button>
+      </ButtonGroup>
+      <Separator className="min-w-0 flex-1" />
+    </div>
+  )
+}`
+    },
+    {
+      id: "vertical",
+      title: "Vertical (code extension)",
+      render: () => /* @__PURE__ */ jsxs("div", { className: "flex h-16 items-center gap-6", children: [
+        /* @__PURE__ */ jsx(Avatar, { label: "Wei Chen" }),
+        /* @__PURE__ */ jsx(Separator, { orientation: "vertical" }),
+        /* @__PURE__ */ jsx(Avatar, { label: "Laura Perez" }),
+        /* @__PURE__ */ jsx(Separator, { orientation: "vertical", variant: "dashed" }),
+        /* @__PURE__ */ jsx(Avatar, { label: "Omar Haddad" })
+      ] }),
+      code: `import { Avatar } from '@open-mercato/ui/primitives/avatar'
+import { Separator } from '@open-mercato/ui/primitives/separator'
+
+<div className="flex h-16 items-center gap-6">
+  <Avatar label="Wei Chen" />
+  <Separator orientation="vertical" />
+  <Avatar label="Laura Perez" />
+  <Separator orientation="vertical" variant="dashed" />
+  <Avatar label="Omar Haddad" />
+</div>`
     },
     {
       id: "dashed",
@@ -587,20 +1521,146 @@ const separatorEntry = {
     }
   ]
 };
+function FigmaScrollDemo({
+  size,
+  variant,
+  horizontal = false
+}) {
+  const t = useT();
+  return /* @__PURE__ */ jsx(
+    ScrollArea,
+    {
+      type: "always",
+      scrollbarSize: size,
+      scrollbarVariant: variant,
+      scrollbars: horizontal ? "horizontal" : "vertical",
+      className: "h-60 w-full max-w-xs rounded-md border border-border",
+      children: /* @__PURE__ */ jsx("div", { className: horizontal ? "flex w-max gap-4 p-6" : "flex flex-col gap-2 p-4 pr-8", children: Array.from(
+        {
+          length: 20
+        },
+        (_, index) => /* @__PURE__ */ jsx("p", { className: "whitespace-nowrap text-sm", children: t("design_system.gallery.samples.scroll.row", {
+          number: index + 1
+        }) }, index)
+      ) })
+    }
+  );
+}
 const scrollAreaEntry = {
   id: "scroll-area",
   title: "ScrollArea",
   importPath: "@open-mercato/ui/primitives/scroll-area",
+  figmaNodeId: "166941:61889",
   variants: [
+    {
+      id: "default-md",
+      title: "default / Medium",
+      render: () => /* @__PURE__ */ jsx(FigmaScrollDemo, { size: "md", variant: "default" }),
+      code: `import { ScrollArea } from '@open-mercato/ui/primitives/scroll-area'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+
+const t = useT()
+
+<ScrollArea type="always" scrollbarSize="md" scrollbarVariant="default" className="h-60 w-full max-w-xs rounded-md border border-border">
+  <div className="flex flex-col gap-2 p-4 pr-8">
+    {Array.from({ length: 20 }, (_, index) => <p key={index} className="whitespace-nowrap text-sm">{t('design_system.gallery.samples.scroll.row', { number: index + 1 })}</p>)}
+  </div>
+</ScrollArea>`
+    },
+    {
+      id: "default-sm",
+      title: "default / Small",
+      render: () => /* @__PURE__ */ jsx(FigmaScrollDemo, { size: "sm", variant: "default" }),
+      code: `import { ScrollArea } from '@open-mercato/ui/primitives/scroll-area'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+
+const t = useT()
+
+<ScrollArea type="always" scrollbarSize="sm" scrollbarVariant="default" className="h-60 w-full max-w-xs rounded-md border border-border">
+  <div className="flex flex-col gap-2 p-4 pr-8">
+    {Array.from({ length: 20 }, (_, index) => <p key={index} className="whitespace-nowrap text-sm">{t('design_system.gallery.samples.scroll.row', { number: index + 1 })}</p>)}
+  </div>
+</ScrollArea>`
+    },
+    {
+      id: "default-xs",
+      title: "default / X-Small",
+      render: () => /* @__PURE__ */ jsx(FigmaScrollDemo, { size: "xs", variant: "default" }),
+      code: `import { ScrollArea } from '@open-mercato/ui/primitives/scroll-area'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+
+const t = useT()
+
+<ScrollArea type="always" scrollbarSize="xs" scrollbarVariant="default" className="h-60 w-full max-w-xs rounded-md border border-border">
+  <div className="flex flex-col gap-2 p-4 pr-8">
+    {Array.from({ length: 20 }, (_, index) => <p key={index} className="whitespace-nowrap text-sm">{t('design_system.gallery.samples.scroll.row', { number: index + 1 })}</p>)}
+  </div>
+</ScrollArea>`
+    },
+    {
+      id: "lighter-md",
+      title: "lighter / Medium",
+      render: () => /* @__PURE__ */ jsx(FigmaScrollDemo, { size: "md", variant: "lighter" }),
+      code: `import { ScrollArea } from '@open-mercato/ui/primitives/scroll-area'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+
+const t = useT()
+
+<ScrollArea type="always" scrollbarSize="md" scrollbarVariant="lighter" className="h-60 w-full max-w-xs rounded-md border border-border">
+  <div className="flex flex-col gap-2 p-4 pr-8">
+    {Array.from({ length: 20 }, (_, index) => <p key={index} className="whitespace-nowrap text-sm">{t('design_system.gallery.samples.scroll.row', { number: index + 1 })}</p>)}
+  </div>
+</ScrollArea>`
+    },
+    {
+      id: "lighter-sm",
+      title: "lighter / Small",
+      render: () => /* @__PURE__ */ jsx(FigmaScrollDemo, { size: "sm", variant: "lighter" }),
+      code: `import { ScrollArea } from '@open-mercato/ui/primitives/scroll-area'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+
+const t = useT()
+
+<ScrollArea type="always" scrollbarSize="sm" scrollbarVariant="lighter" className="h-60 w-full max-w-xs rounded-md border border-border">
+  <div className="flex flex-col gap-2 p-4 pr-8">
+    {Array.from({ length: 20 }, (_, index) => <p key={index} className="whitespace-nowrap text-sm">{t('design_system.gallery.samples.scroll.row', { number: index + 1 })}</p>)}
+  </div>
+</ScrollArea>`
+    },
+    {
+      id: "lighter-xs",
+      title: "lighter / X-Small",
+      render: () => /* @__PURE__ */ jsx(FigmaScrollDemo, { size: "xs", variant: "lighter" }),
+      code: `import { ScrollArea } from '@open-mercato/ui/primitives/scroll-area'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+
+const t = useT()
+
+<ScrollArea type="always" scrollbarSize="xs" scrollbarVariant="lighter" className="h-60 w-full max-w-xs rounded-md border border-border">
+  <div className="flex flex-col gap-2 p-4 pr-8">
+    {Array.from({ length: 20 }, (_, index) => <p key={index} className="whitespace-nowrap text-sm">{t('design_system.gallery.samples.scroll.row', { number: index + 1 })}</p>)}
+  </div>
+</ScrollArea>`
+    },
+    {
+      id: "horizontal-figma",
+      title: "Horizontal / Lighter / Medium",
+      render: () => /* @__PURE__ */ jsx(FigmaScrollDemo, { size: "md", variant: "lighter", horizontal: true }),
+      code: `import { ScrollArea } from '@open-mercato/ui/primitives/scroll-area'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+
+const t = useT()
+
+<ScrollArea type="always" scrollbarSize="md" scrollbarVariant="lighter" scrollbars="horizontal" className="h-60 w-full max-w-xs rounded-md border border-border">
+  <div className="flex w-max gap-4 p-6">
+    {Array.from({ length: 20 }, (_, index) => <p key={index} className="whitespace-nowrap text-sm">{t('design_system.gallery.samples.scroll.row', { number: index + 1 })}</p>)}
+  </div>
+</ScrollArea>`
+    },
     {
       id: "vertical",
       title: "Vertical",
-      render: () => /* @__PURE__ */ jsx(ScrollArea, { className: "h-40 w-full max-w-xs rounded-md border", children: /* @__PURE__ */ jsx("div", { className: "p-3", children: Array.from({ length: 20 }, (_, i) => /* @__PURE__ */ jsxs("p", { className: "border-b py-1.5 text-sm last:border-b-0", children: [
-        "Warehouse zone ",
-        String.fromCharCode(65 + i % 6),
-        "-",
-        i + 1
-      ] }, i)) }) }),
+      render: () => /* @__PURE__ */ jsx(ScrollAreaEntryVerticalPreview, {}),
       code: `import { ScrollArea } from '@open-mercato/ui/primitives/scroll-area'
 
 <ScrollArea className="h-40 rounded-md border">
@@ -614,10 +1674,7 @@ const scrollAreaEntry = {
     {
       id: "horizontal",
       title: "Horizontal",
-      render: () => /* @__PURE__ */ jsx(ScrollArea, { scrollbars: "horizontal", className: "w-full max-w-xs rounded-md border", children: /* @__PURE__ */ jsx("div", { className: "flex w-max gap-2 p-3", children: Array.from({ length: 12 }, (_, i) => /* @__PURE__ */ jsxs(Tag, { variant: "neutral", shape: "square", children: [
-        "Channel ",
-        i + 1
-      ] }, i)) }) }),
+      render: () => /* @__PURE__ */ jsx(ScrollAreaEntryHorizontalPreview, {}),
       code: `import { ScrollArea } from '@open-mercato/ui/primitives/scroll-area'
 import { Tag } from '@open-mercato/ui/primitives/tag'
 
@@ -633,38 +1690,20 @@ import { Tag } from '@open-mercato/ui/primitives/tag'
 };
 const activityFeedEntry = {
   id: "activity-feed",
+  figmaNodeId: "166035:46833",
   title: "ActivityFeed",
   importPath: "@open-mercato/ui/primitives/activity-feed",
   variants: [
+    {
+      id: "source-composition",
+      title: "5 entry types / filter / actions",
+      render: () => /* @__PURE__ */ jsx(ActivityFeedExample, {}),
+      code: activityFeedExampleCode
+    },
     {
       id: "basic",
       title: "Basic entries",
-      render: () => /* @__PURE__ */ jsxs(ActivityFeed, { className: "w-full max-w-md", children: [
-        /* @__PURE__ */ jsx(
-          ActivityFeedItem,
-          {
-            avatar: /* @__PURE__ */ jsx(Avatar, { label: "Wei Chen", size: "sm" }),
-            title: /* @__PURE__ */ jsxs(Fragment, { children: [
-              "Wei Chen ",
-              /* @__PURE__ */ jsx("span", { className: "font-normal text-muted-foreground", children: "created" }),
-              " Order #1042"
-            ] }),
-            timestamp: "4 min ago"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          ActivityFeedItem,
-          {
-            avatar: /* @__PURE__ */ jsx(Avatar, { label: "Laura Perez", size: "sm" }),
-            title: /* @__PURE__ */ jsxs(Fragment, { children: [
-              "Laura Perez ",
-              /* @__PURE__ */ jsx("span", { className: "font-normal text-muted-foreground", children: "updated the shipping address" })
-            ] }),
-            timestamp: "1 hour ago",
-            actions: /* @__PURE__ */ jsx(IconButton, { variant: "ghost", size: "sm", "aria-label": "More", children: /* @__PURE__ */ jsx(MoreHorizontal, {}) })
-          }
-        )
-      ] }),
+      render: () => /* @__PURE__ */ jsx(ActivityFeedEntryBasicPreview, {}),
       code: `import { ActivityFeed, ActivityFeedItem } from '@open-mercato/ui/primitives/activity-feed'
 import { Avatar } from '@open-mercato/ui/primitives/avatar'
 
@@ -679,20 +1718,7 @@ import { Avatar } from '@open-mercato/ui/primitives/avatar'
     {
       id: "with-attachment",
       title: "File attachment",
-      render: () => /* @__PURE__ */ jsx(ActivityFeed, { className: "w-full max-w-md", children: /* @__PURE__ */ jsx(
-        ActivityFeedItem,
-        {
-          avatar: /* @__PURE__ */ jsx(Avatar, { label: "Omar Haddad", size: "sm" }),
-          title: /* @__PURE__ */ jsxs(Fragment, { children: [
-            "Omar Haddad ",
-            /* @__PURE__ */ jsx("span", { className: "font-normal text-muted-foreground", children: "uploaded" }),
-            " Q2 financial report"
-          ] }),
-          timestamp: "2 days ago",
-          children: /* @__PURE__ */ jsx(ActivityFeedFileChip, { name: "apex-report.pdf", size: "4mb", onDownload: () => {
-          } })
-        }
-      ) }),
+      render: () => /* @__PURE__ */ jsx(ActivityFeedEntryWithAttachmentPreview, {}),
       code: `import { ActivityFeed, ActivityFeedItem, ActivityFeedFileChip } from '@open-mercato/ui/primitives/activity-feed'
 import { Avatar } from '@open-mercato/ui/primitives/avatar'
 
@@ -707,19 +1733,7 @@ import { Avatar } from '@open-mercato/ui/primitives/avatar'
     {
       id: "with-comment",
       title: "Comment",
-      render: () => /* @__PURE__ */ jsx(ActivityFeed, { className: "w-full max-w-md", children: /* @__PURE__ */ jsx(
-        ActivityFeedItem,
-        {
-          avatar: /* @__PURE__ */ jsx(Avatar, { label: "Ines Kowalska", size: "sm" }),
-          title: /* @__PURE__ */ jsxs(Fragment, { children: [
-            "Ines Kowalska ",
-            /* @__PURE__ */ jsx("span", { className: "font-normal text-muted-foreground", children: "commented" })
-          ] }),
-          timestamp: "6 days ago",
-          children: /* @__PURE__ */ jsx(ActivityFeedComment, { onReply: () => {
-          }, children: "Please revise the risk metrics before Friday." })
-        }
-      ) }),
+      render: () => /* @__PURE__ */ jsx(ActivityFeedEntryWithCommentPreview, {}),
       code: `import { ActivityFeed, ActivityFeedItem, ActivityFeedComment } from '@open-mercato/ui/primitives/activity-feed'
 import { Avatar } from '@open-mercato/ui/primitives/avatar'
 
@@ -736,22 +1750,7 @@ import { Avatar } from '@open-mercato/ui/primitives/avatar'
     {
       id: "status-chips",
       title: "Status chips",
-      render: () => /* @__PURE__ */ jsx(ActivityFeed, { className: "w-full max-w-md", children: /* @__PURE__ */ jsxs(
-        ActivityFeedItem,
-        {
-          avatar: /* @__PURE__ */ jsx(Avatar, { label: "Ravi Patel", size: "sm" }),
-          title: /* @__PURE__ */ jsxs(Fragment, { children: [
-            "Ravi Patel ",
-            /* @__PURE__ */ jsx("span", { className: "font-normal text-muted-foreground", children: "moved 3 tasks" })
-          ] }),
-          timestamp: "1 week ago",
-          children: [
-            /* @__PURE__ */ jsx(ActivityFeedStatusChip, { status: "success", children: "Approved" }),
-            /* @__PURE__ */ jsx(ActivityFeedStatusChip, { status: "warning", children: "Needs review" }),
-            /* @__PURE__ */ jsx(ActivityFeedStatusChip, { status: "error", children: "Blocked" })
-          ]
-        }
-      ) }),
+      render: () => /* @__PURE__ */ jsx(ActivityFeedEntryStatusChipsPreview, {}),
       code: `import { ActivityFeed, ActivityFeedItem, ActivityFeedStatusChip } from '@open-mercato/ui/primitives/activity-feed'
 import { Avatar } from '@open-mercato/ui/primitives/avatar'
 
@@ -767,7 +1766,217 @@ import { Avatar } from '@open-mercato/ui/primitives/avatar'
     }
   ]
 };
+const content_labelEntry = {
+  id: "content-label",
+  title: "ContentLabel",
+  importPath: "@open-mercato/ui/primitives/content-label",
+  figmaNodeId: "2945:5539",
+  descriptionKey: "design_system.entries.content-label.description",
+  variants: [
+    {
+      id: "basic-40",
+      title: "basic-40",
+      render: () => /* @__PURE__ */ jsx(ContentLabelExample, { kind: "basic", size: 40 }),
+      code: keyComponentExampleCode('<ContentLabelExample kind="basic" size={40} />')
+    },
+    {
+      id: "icon-40",
+      title: "icon-40",
+      render: () => /* @__PURE__ */ jsx(ContentLabelExample, { kind: "icon", size: 40 }),
+      code: keyComponentExampleCode('<ContentLabelExample kind="icon" size={40} />')
+    },
+    {
+      id: "avatar-40",
+      title: "avatar-40",
+      render: () => /* @__PURE__ */ jsx(ContentLabelExample, { kind: "avatar", size: 40 }),
+      code: keyComponentExampleCode('<ContentLabelExample kind="avatar" size={40} />')
+    },
+    {
+      id: "brand-40",
+      title: "brand-40",
+      render: () => /* @__PURE__ */ jsx(ContentLabelExample, { kind: "brand", size: 40 }),
+      code: keyComponentExampleCode('<ContentLabelExample kind="brand" size={40} />')
+    },
+    {
+      id: "company-40",
+      title: "company-40",
+      render: () => /* @__PURE__ */ jsx(ContentLabelExample, { kind: "company", size: 40 }),
+      code: keyComponentExampleCode('<ContentLabelExample kind="company" size={40} />')
+    },
+    {
+      id: "basic-48",
+      title: "basic-48",
+      render: () => /* @__PURE__ */ jsx(ContentLabelExample, { kind: "basic", size: 48 }),
+      code: keyComponentExampleCode('<ContentLabelExample kind="basic" size={48} />')
+    },
+    {
+      id: "icon-48",
+      title: "icon-48",
+      render: () => /* @__PURE__ */ jsx(ContentLabelExample, { kind: "icon", size: 48 }),
+      code: keyComponentExampleCode('<ContentLabelExample kind="icon" size={48} />')
+    },
+    {
+      id: "avatar-48",
+      title: "avatar-48",
+      render: () => /* @__PURE__ */ jsx(ContentLabelExample, { kind: "avatar", size: 48 }),
+      code: keyComponentExampleCode('<ContentLabelExample kind="avatar" size={48} />')
+    },
+    {
+      id: "brand-48",
+      title: "brand-48",
+      render: () => /* @__PURE__ */ jsx(ContentLabelExample, { kind: "brand", size: 48 }),
+      code: keyComponentExampleCode('<ContentLabelExample kind="brand" size={48} />')
+    },
+    {
+      id: "company-48",
+      title: "company-48",
+      render: () => /* @__PURE__ */ jsx(ContentLabelExample, { kind: "company", size: 48 }),
+      code: keyComponentExampleCode('<ContentLabelExample kind="company" size={48} />')
+    },
+    {
+      id: "options",
+      title: "options",
+      render: () => /* @__PURE__ */ jsx(ContentLabelExample, { kind: "icon", size: 48, configurable: true }),
+      code: keyComponentExampleCode('<ContentLabelExample kind="icon" size={48} configurable />')
+    }
+  ]
+};
+const content_cardEntry = {
+  id: "content-card",
+  title: "ContentCard",
+  importPath: "@open-mercato/ui/primitives/content-card",
+  figmaNodeId: "2942:9503",
+  descriptionKey: "design_system.entries.content-card.description",
+  variants: [
+    {
+      id: "basic",
+      title: "basic",
+      render: () => /* @__PURE__ */ jsx(ContentCardExample, { kind: "basic" }),
+      code: keyComponentExampleCode('<ContentCardExample kind="basic" />')
+    },
+    {
+      id: "icon",
+      title: "icon",
+      render: () => /* @__PURE__ */ jsx(ContentCardExample, { kind: "icon" }),
+      code: keyComponentExampleCode('<ContentCardExample kind="icon" />')
+    },
+    {
+      id: "avatar",
+      title: "avatar",
+      render: () => /* @__PURE__ */ jsx(ContentCardExample, { kind: "avatar" }),
+      code: keyComponentExampleCode('<ContentCardExample kind="avatar" />')
+    },
+    {
+      id: "provider",
+      title: "provider",
+      render: () => /* @__PURE__ */ jsx(ContentCardExample, { kind: "provider" }),
+      code: keyComponentExampleCode('<ContentCardExample kind="provider" />')
+    },
+    {
+      id: "brand",
+      title: "brand",
+      render: () => /* @__PURE__ */ jsx(ContentCardExample, { kind: "brand" }),
+      code: keyComponentExampleCode('<ContentCardExample kind="brand" />')
+    },
+    {
+      id: "company",
+      title: "company",
+      render: () => /* @__PURE__ */ jsx(ContentCardExample, { kind: "company" }),
+      code: keyComponentExampleCode('<ContentCardExample kind="company" />')
+    },
+    {
+      id: "disabled",
+      title: "disabled",
+      render: () => /* @__PURE__ */ jsx(ContentCardExample, { kind: "icon", disabled: true }),
+      code: keyComponentExampleCode('<ContentCardExample kind="icon" disabled />')
+    }
+  ]
+};
+const key_iconEntry = {
+  id: "key-icon",
+  title: "KeyIcon",
+  importPath: "@open-mercato/ui/primitives/key-icon",
+  figmaNodeId: "263:1850",
+  descriptionKey: "design_system.entries.key-icon.description",
+  variants: [
+    {
+      id: "stroke",
+      title: "stroke",
+      render: () => /* @__PURE__ */ jsx(KeyIconExamples, {}),
+      code: keyComponentExampleCode("<KeyIconExamples />")
+    },
+    {
+      id: "lighter",
+      title: "lighter",
+      render: () => /* @__PURE__ */ jsx(KeyIconExamples, { appearance: "lighter" }),
+      code: keyComponentExampleCode('<KeyIconExamples appearance="lighter" />')
+    }
+  ]
+};
+const payment_iconEntry = {
+  id: "payment-icon",
+  title: "PaymentIcon",
+  importPath: "@open-mercato/ui/primitives/payment-icon",
+  figmaNodeId: "2942:9995",
+  descriptionKey: "design_system.entries.payment-icon.description",
+  variants: [
+    {
+      id: "categories",
+      title: "categories",
+      render: () => /* @__PURE__ */ jsx(PaymentIconExamples, {}),
+      code: keyComponentExampleCode("<PaymentIconExamples />")
+    }
+  ]
+};
+const chart_legendEntry = {
+  id: "chart-legend",
+  title: "ChartLegend",
+  importPath: "@open-mercato/ui/primitives/chart-legend",
+  figmaNodeId: "2942:9934",
+  descriptionKey: "design_system.entries.chart-legend.description",
+  variants: [
+    {
+      id: "colors",
+      title: "colors",
+      render: () => /* @__PURE__ */ jsx(ChartLegendExamples, {}),
+      code: keyComponentExampleCode("<ChartLegendExamples />")
+    },
+    {
+      id: "interactive",
+      title: "interactive",
+      render: () => /* @__PURE__ */ jsx(ChartLegendExamples, { interactive: true }),
+      code: keyComponentExampleCode("<ChartLegendExamples interactive />")
+    }
+  ]
+};
+const chart_legend_dotEntry = {
+  id: "chart-legend-dot",
+  title: "ChartLegendDot",
+  importPath: "@open-mercato/ui/primitives/chart-legend",
+  figmaNodeId: "2942:9880",
+  descriptionKey: "design_system.entries.chart-legend-dot.description",
+  variants: [
+    {
+      id: "size-16",
+      title: "size-16",
+      render: () => /* @__PURE__ */ jsx(ChartLegendDotExamples, {}),
+      code: keyComponentExampleCode("<ChartLegendDotExamples />")
+    },
+    {
+      id: "size-20",
+      title: "size-20",
+      render: () => /* @__PURE__ */ jsx(ChartLegendDotExamples, { size: 20 }),
+      code: keyComponentExampleCode("<ChartLegendDotExamples size={20} />")
+    }
+  ]
+};
 const entries = [
+  content_labelEntry,
+  content_cardEntry,
+  key_iconEntry,
+  payment_iconEntry,
+  chart_legendEntry,
+  chart_legend_dotEntry,
   badgeEntry,
   statusBadgeEntry,
   tagEntry,