@offlinemediainc/offline-ui 0.1.3 → 0.2.0

package/dist/chunk-XOGYSEME.cjs

@@ -0,0 +1,1505 @@
+'use strict';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// src/design-system/semantics/colors.ts
+var semanticColors = {
+  brand: {
+    /** Yellow-400 (#de8e0f) - brand accent for highlights, badges, premium touches. NEVER for buttons */
+    primary: "yellow-400",
+    /** Blue-400 (#004fff) - for links and clickable text ONLY */
+    interactive: "blue-400"
+  },
+  text: {
+    /** Gray-900 (#191919) - primary text, headings, important content */
+    primary: "gray-900",
+    /** Gray-600 (#636363) - secondary/supporting text */
+    secondary: "gray-600",
+    /** Gray-500 (#7c7c7c) - muted text, timestamps, helpers */
+    muted: "gray-500",
+    /** White text on dark backgrounds */
+    onDark: "white",
+    /** Blue-400 for clickable links */
+    link: "blue-400",
+    /** Success green for positive text */
+    positive: "semantic-success500",
+    /** Red for error/negative text */
+    negative: "red-400"
+  },
+  surface: {
+    /** White - default page/card background */
+    default: "white",
+    /** Gray-50 (#ececec) - muted/secondary backgrounds */
+    muted: "gray-50",
+    /** White with shadow-elevated for floating surfaces */
+    elevated: "white + shadow-elevated"
+  },
+  border: {
+    /** Gray-200 (#c6c6c6) - default borders */
+    default: "gray-200",
+    /** Gray-300 (#aeaeae) - stronger borders */
+    strong: "gray-300",
+    /** Yellow-400 - interactive/accent borders */
+    interactive: "yellow-400",
+    /** Gray-900 - focus ring borders */
+    focus: "gray-900"
+  },
+  feedback: {
+    /** Chart-3 (#099250) - success, positive, growth */
+    positive: "chart-3",
+    /** Chart-5 (#d31a0c) - error, negative, problems */
+    negative: "chart-5",
+    /** Yellow-400 - warning states */
+    warning: "yellow-400",
+    /** Chart-4 (#636363) - neutral/baseline */
+    neutral: "chart-4"
+  }
+};
+var colorHexValues = {
+  "yellow-25": "#fff2d8",
+  "yellow-50": "#ffe9bd",
+  "yellow-100": "#ffd386",
+  "yellow-200": "#ffbd54",
+  "yellow-300": "#f0a52c",
+  "yellow-400": "#de8e0f",
+  "yellow-500": "#c57900",
+  "yellow-600": "#a76700",
+  "yellow-700": "#835100",
+  "yellow-800": "#5c3900",
+  "yellow-900": "#331f00",
+  "blue-25": "#d8e7ff",
+  "blue-50": "#bed6ff",
+  "blue-100": "#85afff",
+  "blue-200": "#508bff",
+  "blue-300": "#236aff",
+  "blue-400": "#004fff",
+  "blue-500": "#0046e0",
+  "blue-600": "#003bbb",
+  "blue-700": "#002e91",
+  "blue-800": "#001f63",
+  "blue-900": "#001033",
+  "gray-25": "#f2f2f2",
+  "gray-50": "#ececec",
+  "gray-100": "#dfdfdf",
+  "gray-200": "#c6c6c6",
+  "gray-300": "#aeaeae",
+  "gray-400": "#959595",
+  "gray-500": "#7c7c7c",
+  "gray-600": "#636363",
+  "gray-700": "#4a4a4a",
+  "gray-800": "#323232",
+  "gray-900": "#191919",
+  "red-400": "#d31a0c",
+  "semantic-success500": "#099250",
+  "chart-1": "#de8e0f",
+  "chart-2": "#004fff",
+  "chart-3": "#099250",
+  "chart-4": "#636363",
+  "chart-5": "#d31a0c",
+  "chart-6": "#a76700",
+  "chart-7": "#003bbb",
+  "chart-8": "#959595"
+};
+
+// src/design-system/semantics/typography.ts
+var typographyDecisions = {
+  // Page structure
+  /** Hero headlines, major section titles - Cabinet Grotesk, use sparingly */
+  pageTitle: "display-small",
+  /** Section headings within pages */
+  sectionHeading: "headline-medium",
+  /** Card titles, panel headers */
+  cardTitle: "headline-small",
+  // Stats & metrics
+  /** Large stat values in dashboards */
+  statValueLarge: "display-medium",
+  /** Smaller stat values */
+  statValueSmall: "display-small",
+  /** Labels under stat values */
+  statLabel: "body-small",
+  // Body text
+  /** Default body text */
+  bodyDefault: "body-medium",
+  /** Secondary/supporting body text */
+  bodySecondary: "body-small",
+  // Forms
+  /** Form field labels */
+  formLabel: "label-medium",
+  /** Helper text below inputs */
+  formHelper: "body-small text-muted",
+  /** Error messages below inputs */
+  formError: "body-small text-negative",
+  // UI elements
+  /** Button text */
+  buttonText: "label-medium",
+  /** Sidebar/nav items */
+  navItem: "body-medium",
+  /** Badge text */
+  badgeText: "label-small",
+  /** Table header cells */
+  tableHeader: "label-medium",
+  /** Table body cells */
+  tableCell: "body-medium",
+  /** Timestamps, dates */
+  timestamp: "body-small text-muted",
+  // Empty states
+  /** Empty state headline */
+  emptyStateTitle: "headline-small",
+  /** Empty state description */
+  emptyStateDescription: "body-medium text-muted",
+  // Dialog/Modal
+  /** Dialog title */
+  dialogTitle: "headline-medium",
+  /** Dialog description */
+  dialogDescription: "body-medium text-muted",
+  // Sidebar
+  /** Sidebar section labels */
+  sidebarLabel: "nav-label",
+  /** Sidebar navigation items */
+  sidebarItem: "body-medium",
+  // Breadcrumb
+  /** Breadcrumb items */
+  breadcrumbItem: "body-small",
+  /** Current breadcrumb (muted) */
+  breadcrumbCurrent: "body-small text-muted"
+};
+var fontFamilyDecisions = {
+  /** Cabinet Grotesk - hero headlines, major titles. Use sparingly for impact */
+  display: "var(--font-cabinet-grotesk), var(--font-satoshi), sans-serif",
+  /** Satoshi - everything else: headlines, body, labels. The workhorse font */
+  body: "var(--font-satoshi), sans-serif",
+  /** DM Mono - stats, numbers, code. When precision matters */
+  mono: "var(--font-dm-mono), 'DM Mono', monospace"
+};
+var typographyScale = {
+  "display-large": { size: "36px", lineHeight: "100%", weight: 800, font: "Cabinet Grotesk" },
+  "display-medium": { size: "32px", lineHeight: "100%", weight: 800, font: "Cabinet Grotesk" },
+  "display-small": { size: "29px", lineHeight: "100%", weight: 800, font: "Cabinet Grotesk" },
+  "headline-large": { size: "26px", lineHeight: "32px", weight: 700, font: "Satoshi" },
+  "headline-medium": { size: "23px", lineHeight: "28px", weight: 700, font: "Satoshi" },
+  "headline-small": { size: "20px", lineHeight: "24px", weight: 700, font: "Satoshi" },
+  "title-large": { size: "18px", lineHeight: "22px", weight: 700, font: "Satoshi" },
+  "title-medium": { size: "16px", lineHeight: "20px", weight: 700, font: "Satoshi" },
+  "title-small": { size: "14px", lineHeight: "18px", weight: 700, font: "Satoshi" },
+  "body-large": { size: "16px", lineHeight: "24px", weight: 500, font: "Satoshi" },
+  "body-medium": { size: "14px", lineHeight: "20px", weight: 500, font: "Satoshi" },
+  "body-small": { size: "12px", lineHeight: "16px", weight: 500, font: "Satoshi" },
+  "body-x-small": { size: "10px", lineHeight: "14px", weight: 500, font: "Satoshi" },
+  "label-large": { size: "14px", lineHeight: "18px", weight: 700, font: "Satoshi" },
+  "label-medium": { size: "12px", lineHeight: "16px", weight: 700, font: "Satoshi" },
+  "label-small": { size: "10px", lineHeight: "14px", weight: 700, font: "Satoshi" },
+  "stat-mono": { weight: 500, letterSpacing: "0.04em", font: "DM Mono" }
+};
+
+// src/design-system/components/decisions.ts
+var componentDecisions = {
+  lists: {
+    /** Clickable list rows (partners, offers, events) */
+    clickableRow: "Item",
+    /** Structured data with sorting/filtering */
+    dataTable: "Table",
+    /** Grid of cards (dashboard, gallery) */
+    cardGrid: "Card in grid",
+    /** Simple bulleted/numbered lists */
+    simpleList: "ul with body-medium",
+    /** Key-value pairs */
+    descriptionList: "dl with label-medium dt and body-medium dd"
+  },
+  feedback: {
+    /** Success after action (save, create, delete) */
+    actionSuccess: "toast.success",
+    /** Error after action */
+    actionError: "toast.error",
+    /** Warning banner in content area */
+    inlineWarning: "Alert variant=warning",
+    /** Error banner in content area */
+    inlineError: "Alert variant=destructive",
+    /** Form field validation error */
+    fieldError: "body-small text-negative below input",
+    /** Info/tip banner */
+    inlineInfo: "Alert variant=default"
+  },
+  modals: {
+    /** Forms, content entry, multi-step flows */
+    formEntry: "Dialog",
+    /** Destructive action confirmation (delete, discard) */
+    confirmDestructive: "AlertDialog",
+    /** Side panel for details, secondary content */
+    sidePanel: "Sheet side=right",
+    /** Mobile navigation drawer */
+    mobileNav: "Sheet side=left",
+    /** Mobile action sheets */
+    mobileActions: "Sheet side=bottom h-auto max-h-[80vh]",
+    /** Preview/detail view */
+    preview: "Dialog or Sheet"
+  },
+  navigation: {
+    /** Primary app navigation */
+    primaryNav: "Sidebar",
+    /** Page-level tabs */
+    pageTabs: "Tabs",
+    /** Location breadcrumbs */
+    breadcrumbs: "Breadcrumb",
+    /** Section header with back button */
+    sectionHeader: "Breadcrumb + headline",
+    /** Dropdown navigation menu */
+    dropdownNav: "DropdownMenu"
+  },
+  selection: {
+    /** Single choice from 2-5 options */
+    singleFromFew: "radio group",
+    /** Single choice from many options */
+    singleFromMany: "Select",
+    /** Multiple choices allowed */
+    multiple: "Checkbox group",
+    /** On/off toggle */
+    toggle: "single Checkbox",
+    /** Segmented control (view modes) */
+    segmented: "Tabs variant=pill"
+  },
+  data: {
+    /** Status indicator */
+    status: "Badge",
+    /** Progress indication */
+    progress: "Progress",
+    /** Avatar/profile image */
+    avatar: "Avatar",
+    /** Data visualization */
+    chart: "Chart (recharts)",
+    /** Loading placeholder */
+    skeleton: "Skeleton"
+  },
+  forms: {
+    /** Single-line text input */
+    textInput: "Input",
+    /** Multi-line text input */
+    textArea: "Textarea",
+    /** Email/password/number input */
+    typedInput: "Input type=email|password|number",
+    /** OTP/verification code */
+    otpInput: "InputOTP",
+    /** Form field label */
+    label: "Label htmlFor={id}",
+    /** Checkbox with label */
+    checkbox: "Checkbox + Label"
+  },
+  layout: {
+    /** Content card container */
+    card: "Card",
+    /** Expandable content */
+    accordion: "Accordion",
+    /** Collapsible section */
+    collapsible: "Collapsible",
+    /** Visual divider */
+    separator: "Separator",
+    /** Hover information */
+    tooltip: "Tooltip"
+  }
+};
+
+// src/design-system/components/registry.ts
+var componentRegistry = {
+  // Layout Components
+  Card: {
+    name: "Card",
+    status: "approved",
+    description: "Container for grouped content with optional header/footer",
+    imports: ["Card", "CardHeader", "CardTitle", "CardDescription", "CardContent", "CardFooter"],
+    composition: ["CardHeader", "CardTitle", "CardDescription", "CardContent", "CardFooter"]
+  },
+  Item: {
+    name: "Item",
+    status: "approved",
+    description: "Flexible list item with media, content, and actions slots",
+    imports: ["Item", "ItemMedia", "ItemContent", "ItemTitle", "ItemDescription", "ItemActions"],
+    variants: { variant: ["default", "outline", "muted"] },
+    composition: ["ItemMedia", "ItemContent", "ItemTitle", "ItemDescription", "ItemActions"]
+  },
+  Separator: {
+    name: "Separator",
+    status: "approved",
+    description: "Visual divider between sections",
+    imports: ["Separator"]
+  },
+  // Navigation Components
+  Sidebar: {
+    name: "Sidebar",
+    status: "approved",
+    description: "Primary navigation sidebar with collapsible state",
+    imports: [
+      "Sidebar",
+      "SidebarContent",
+      "SidebarGroup",
+      "SidebarGroupLabel",
+      "SidebarGroupContent",
+      "SidebarMenu",
+      "SidebarMenuItem",
+      "SidebarMenuButton",
+      "SidebarHeader",
+      "SidebarFooter",
+      "SidebarTrigger",
+      "SidebarProvider"
+    ],
+    composition: ["SidebarHeader", "SidebarContent", "SidebarGroup", "SidebarFooter"]
+  },
+  OfflineSidebar: {
+    name: "OfflineSidebar",
+    status: "approved",
+    description: "Pre-configured sidebar with Offline branding (requires Next.js)",
+    imports: ["OfflineSidebar", "OfflineSidebarNav", "OfflineSidebarFooter"]
+  },
+  Breadcrumb: {
+    name: "Breadcrumb",
+    status: "approved",
+    description: "Location breadcrumb trail",
+    imports: [
+      "Breadcrumb",
+      "BreadcrumbList",
+      "BreadcrumbItem",
+      "BreadcrumbLink",
+      "BreadcrumbPage",
+      "BreadcrumbSeparator"
+    ],
+    composition: ["BreadcrumbList", "BreadcrumbItem", "BreadcrumbLink", "BreadcrumbPage"]
+  },
+  Tabs: {
+    name: "Tabs",
+    status: "approved",
+    description: "Tab navigation for switching views",
+    imports: ["Tabs", "TabsList", "TabsTrigger", "TabsContent"],
+    variants: { style: ["default (pill)", "line (underline)"] },
+    composition: ["TabsList", "TabsTrigger", "TabsContent"]
+  },
+  DropdownMenu: {
+    name: "DropdownMenu",
+    status: "approved",
+    description: "Dropdown menu for actions",
+    imports: [
+      "DropdownMenu",
+      "DropdownMenuTrigger",
+      "DropdownMenuContent",
+      "DropdownMenuItem",
+      "DropdownMenuSeparator",
+      "DropdownMenuLabel"
+    ],
+    composition: ["DropdownMenuTrigger", "DropdownMenuContent", "DropdownMenuItem"]
+  },
+  // Action Components
+  Button: {
+    name: "Button",
+    status: "approved",
+    description: "Primary action trigger. Black (default) is primary color per brand",
+    imports: ["Button", "buttonVariants"],
+    variants: {
+      variant: ["default", "secondary", "outline", "ghost", "destructive", "link"],
+      size: ["default", "sm", "lg", "icon"]
+    }
+  },
+  Badge: {
+    name: "Badge",
+    status: "approved",
+    description: "Status indicators, tags, labels",
+    imports: ["Badge", "badgeVariants"],
+    variants: {
+      variant: ["default", "secondary", "destructive", "success", "warning", "outline"]
+    }
+  },
+  // Form Components
+  Input: {
+    name: "Input",
+    status: "approved",
+    description: "Single-line text input",
+    imports: ["Input"]
+  },
+  Label: {
+    name: "Label",
+    status: "approved",
+    description: "Form field label - always use with htmlFor",
+    imports: ["Label"]
+  },
+  Checkbox: {
+    name: "Checkbox",
+    status: "approved",
+    description: "Checkbox for boolean/multi-select",
+    imports: ["Checkbox"]
+  },
+  InputOTP: {
+    name: "InputOTP",
+    status: "approved",
+    description: "OTP/verification code input",
+    imports: ["InputOTP", "InputOTPGroup", "InputOTPSlot", "InputOTPSeparator"],
+    composition: ["InputOTPGroup", "InputOTPSlot"]
+  },
+  Progress: {
+    name: "Progress",
+    status: "approved",
+    description: "Progress bar indicator",
+    imports: ["Progress"]
+  },
+  // Overlay Components
+  Dialog: {
+    name: "Dialog",
+    status: "approved",
+    description: "Modal for forms and content. User can dismiss freely",
+    imports: [
+      "Dialog",
+      "DialogTrigger",
+      "DialogContent",
+      "DialogHeader",
+      "DialogFooter",
+      "DialogTitle",
+      "DialogDescription",
+      "DialogClose"
+    ],
+    composition: ["DialogTrigger", "DialogContent", "DialogHeader", "DialogFooter"]
+  },
+  AlertDialog: {
+    name: "AlertDialog",
+    status: "approved",
+    description: "Interruption requiring decision. Cannot dismiss by clicking outside",
+    imports: [
+      "AlertDialog",
+      "AlertDialogTrigger",
+      "AlertDialogContent",
+      "AlertDialogHeader",
+      "AlertDialogFooter",
+      "AlertDialogTitle",
+      "AlertDialogDescription",
+      "AlertDialogAction",
+      "AlertDialogCancel"
+    ],
+    composition: ["AlertDialogTrigger", "AlertDialogContent", "AlertDialogAction", "AlertDialogCancel"]
+  },
+  Sheet: {
+    name: "Sheet",
+    status: "approved",
+    description: "Slide-in panel for secondary content",
+    imports: [
+      "Sheet",
+      "SheetTrigger",
+      "SheetContent",
+      "SheetHeader",
+      "SheetFooter",
+      "SheetTitle",
+      "SheetDescription",
+      "SheetClose"
+    ],
+    variants: { side: ["right", "left", "top", "bottom"] },
+    composition: ["SheetTrigger", "SheetContent", "SheetHeader", "SheetFooter"]
+  },
+  Tooltip: {
+    name: "Tooltip",
+    status: "approved",
+    description: "Hover/focus information overlay",
+    imports: ["Tooltip", "TooltipTrigger", "TooltipContent", "TooltipProvider"],
+    composition: ["TooltipTrigger", "TooltipContent"]
+  },
+  // Data Display Components
+  Avatar: {
+    name: "Avatar",
+    status: "approved",
+    description: "User/entity avatar with fallback",
+    imports: ["Avatar", "AvatarImage", "AvatarFallback"],
+    composition: ["AvatarImage", "AvatarFallback"],
+    sizes: ["default", "sm", "lg"]
+  },
+  Skeleton: {
+    name: "Skeleton",
+    status: "approved",
+    description: "Loading placeholder matching content shape",
+    imports: ["Skeleton"]
+  },
+  Chart: {
+    name: "Chart",
+    status: "approved",
+    description: "Data visualization wrapper for Recharts",
+    imports: ["ChartContainer", "ChartTooltip", "ChartTooltipContent", "ChartLegend", "ChartLegendContent"]
+  },
+  // Interactive Components
+  Accordion: {
+    name: "Accordion",
+    status: "approved",
+    description: "Expandable content sections",
+    imports: ["Accordion", "AccordionItem", "AccordionTrigger", "AccordionContent"],
+    composition: ["AccordionItem", "AccordionTrigger", "AccordionContent"]
+  },
+  Collapsible: {
+    name: "Collapsible",
+    status: "approved",
+    description: "Single collapsible section",
+    imports: ["Collapsible", "CollapsibleTrigger", "CollapsibleContent"],
+    composition: ["CollapsibleTrigger", "CollapsibleContent"]
+  },
+  // Draft Components (not recommended for production)
+  Select: {
+    name: "Select",
+    status: "draft",
+    description: "Dropdown select - still being refined",
+    imports: [
+      "Select",
+      "SelectTrigger",
+      "SelectContent",
+      "SelectItem",
+      "SelectValue",
+      "SelectGroup",
+      "SelectLabel"
+    ]
+  },
+  Sonner: {
+    name: "Sonner",
+    status: "draft",
+    description: "Toast notifications - integration in progress",
+    imports: ["Toaster", "toast"]
+  },
+  Table: {
+    name: "Table",
+    status: "draft",
+    description: "Data table - needs more patterns",
+    imports: [
+      "Table",
+      "TableHeader",
+      "TableBody",
+      "TableFooter",
+      "TableHead",
+      "TableRow",
+      "TableCell",
+      "TableCaption"
+    ]
+  },
+  Textarea: {
+    name: "Textarea",
+    status: "draft",
+    description: "Multi-line text input - under review",
+    imports: ["Textarea"]
+  }
+};
+var approvedComponents = Object.entries(componentRegistry).filter(([_, meta]) => meta.status === "approved").map(([name]) => name);
+var draftComponents = Object.entries(componentRegistry).filter(([_, meta]) => meta.status === "draft").map(([name]) => name);
+
+// src/design-system/patterns/layout.ts
+var layoutPatterns = {
+  page: {
+    /** Content area max width */
+    maxWidth: "max-w-4xl",
+    /** Wider content area (dashboards, tables) */
+    maxWidthWide: "max-w-6xl",
+    /** Page padding */
+    padding: "px-4 py-6",
+    /** Gap between major sections */
+    sectionGap: "space-y-8",
+    /** Main content wrapper */
+    wrapper: "mx-auto px-4 py-6"
+  },
+  cards: {
+    /** Standard card padding */
+    padding: "p-6",
+    /** Compact card padding */
+    paddingCompact: "p-4",
+    /** Gap between cards in grid */
+    gap: "gap-4",
+    /** 2-column responsive grid */
+    grid2col: "grid grid-cols-1 md:grid-cols-2 gap-4",
+    /** 3-column responsive grid */
+    grid3col: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4",
+    /** 4-column responsive grid */
+    grid4col: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4",
+    /** Stack of cards */
+    stack: "flex flex-col gap-4"
+  },
+  forms: {
+    /** Gap between form fields */
+    fieldGap: "space-y-4",
+    /** Gap between label and input */
+    labelGap: "mb-2",
+    /** Gap between input and helper text */
+    helperGap: "mt-1",
+    /** Gap between buttons in button group */
+    buttonGap: "gap-2",
+    /** Gap between form sections */
+    sectionGap: "space-y-6",
+    /** Form container */
+    container: "space-y-4",
+    /** Form actions row */
+    actions: "flex justify-end gap-2 pt-4",
+    /** Full-width form field */
+    fieldFull: "w-full",
+    /** Inline field pair */
+    fieldPair: "grid grid-cols-2 gap-4"
+  },
+  inline: {
+    /** Icon + text alignment */
+    iconText: "inline-flex items-center gap-2",
+    /** Badge group spacing */
+    badges: "flex flex-wrap gap-2",
+    /** Button group spacing */
+    buttons: "flex items-center gap-2",
+    /** Tag list */
+    tags: "flex flex-wrap gap-1"
+  },
+  header: {
+    /** Page header with title and actions */
+    pageHeader: "flex items-center justify-between mb-6",
+    /** Section header */
+    sectionHeader: "flex items-center justify-between mb-4",
+    /** Card header */
+    cardHeader: "flex items-center justify-between"
+  },
+  sidebar: {
+    /** Sidebar width */
+    width: "w-64",
+    /** Collapsed sidebar width */
+    widthCollapsed: "w-16",
+    /** Content area with sidebar */
+    contentWithSidebar: "ml-64",
+    /** Mobile: full width content */
+    contentMobile: "ml-0"
+  },
+  responsive: {
+    /** Hide on mobile, show on tablet+ */
+    hideMobile: "hidden md:block",
+    /** Show on mobile, hide on tablet+ */
+    showMobile: "md:hidden",
+    /** Stack on mobile, row on tablet+ */
+    stackToRow: "flex flex-col md:flex-row",
+    /** Full width on mobile, auto on tablet+ */
+    fullToAuto: "w-full md:w-auto"
+  }
+};
+
+// src/design-system/patterns/states.ts
+var statePatterns = {
+  loading: {
+    /** Full page loading skeleton */
+    page: "Skeleton matching page structure",
+    /** Card loading skeleton */
+    card: "Skeleton matching card structure",
+    /** Button loading state */
+    button: {
+      icon: "Loader2",
+      text: "Loading...",
+      classes: "disabled opacity-50",
+      iconClasses: "animate-spin mr-2 h-4 w-4"
+    },
+    /** Inline loading spinner */
+    inline: {
+      icon: "Loader2",
+      classes: "animate-spin h-4 w-4"
+    },
+    /** Table row skeleton */
+    tableRow: "Skeleton h-12 w-full",
+    /** List item skeleton */
+    listItem: "Skeleton h-16 w-full",
+    /** Avatar skeleton */
+    avatar: "Skeleton h-10 w-10 rounded-full"
+  },
+  empty: {
+    /** Empty state container structure */
+    structure: "flex flex-col items-center justify-center py-12 text-center",
+    /** Empty state icon */
+    icon: {
+      classes: "h-12 w-12 text-muted-foreground mb-4",
+      note: "Use relevant lucide icon for context"
+    },
+    /** Empty state title */
+    title: {
+      classes: "headline-small mb-2"
+    },
+    /** Empty state description */
+    description: {
+      classes: "body-medium text-muted-foreground max-w-sm mx-auto mb-4"
+    },
+    /** Empty state action button */
+    action: {
+      variant: "outline",
+      note: "Optional - only if user can take action to fill empty state"
+    }
+  },
+  error: {
+    /** Full page error */
+    page: {
+      component: "Alert",
+      variant: "destructive",
+      includeRetry: true,
+      classes: "max-w-lg mx-auto my-8"
+    },
+    /** Inline error message */
+    inline: {
+      classes: "body-small text-destructive"
+    },
+    /** Form field error */
+    field: {
+      inputClasses: "border-destructive focus:ring-destructive",
+      messageClasses: "body-small text-destructive mt-1"
+    },
+    /** Error banner */
+    banner: {
+      component: "Alert",
+      variant: "destructive",
+      classes: "mb-4"
+    }
+  },
+  disabled: {
+    /** Disabled opacity */
+    opacity: "opacity-50",
+    /** Disabled cursor */
+    cursor: "cursor-not-allowed",
+    /** Prevent interaction */
+    interaction: "pointer-events-none",
+    /** Combined disabled classes */
+    combined: "opacity-50 cursor-not-allowed pointer-events-none"
+  },
+  success: {
+    /** Success toast */
+    toast: {
+      method: "toast.success",
+      duration: 3e3
+    },
+    /** Inline success message */
+    inline: {
+      classes: "body-small text-[var(--semantic-success500)]"
+    },
+    /** Success banner */
+    banner: {
+      component: "Alert",
+      variant: "default",
+      icon: "CheckCircle",
+      classes: "border-[var(--semantic-success500)] bg-green-50"
+    }
+  },
+  warning: {
+    /** Warning banner */
+    banner: {
+      component: "Alert",
+      variant: "warning",
+      icon: "AlertTriangle"
+    },
+    /** Inline warning */
+    inline: {
+      classes: "body-small text-[var(--colors-yellow-600)]"
+    }
+  }
+};
+
+// src/design-system/patterns/interactions.ts
+var interactionPatterns = {
+  clickableCard: {
+    /** Default state */
+    default: "shadow-card transition-shadow duration-200",
+    /** Hover state */
+    hover: "hover:shadow-elevated",
+    /** Cursor */
+    cursor: "cursor-pointer",
+    /** Combined classes */
+    combined: "shadow-card hover:shadow-elevated cursor-pointer transition-shadow duration-200",
+    /** With border change */
+    withBorder: "border border-gray-200 hover:border-gray-300 cursor-pointer transition-colors"
+  },
+  link: {
+    /** Default link styling */
+    default: "text-[var(--colors-blue-400)] underline-offset-4",
+    /** Hover state */
+    hover: "hover:underline",
+    /** Combined classes */
+    combined: "text-[var(--colors-blue-400)] underline-offset-4 hover:underline",
+    /** Navigation link (no underline by default) */
+    nav: "text-[var(--colors-blue-400)] hover:underline underline-offset-4"
+  },
+  iconButton: {
+    /** Default state */
+    default: "p-2 rounded-md transition-colors",
+    /** Hover state */
+    hover: "hover:bg-muted",
+    /** Combined classes */
+    combined: "p-2 rounded-md hover:bg-muted transition-colors",
+    /** Destructive icon button */
+    destructive: "p-2 rounded-md hover:bg-destructive/10 hover:text-destructive transition-colors"
+  },
+  tableRow: {
+    /** Default state */
+    default: "transition-colors",
+    /** Hover state */
+    hover: "hover:bg-muted/50",
+    /** Combined classes */
+    combined: "hover:bg-muted/50 transition-colors",
+    /** Clickable row */
+    clickable: "hover:bg-muted/50 cursor-pointer transition-colors"
+  },
+  listItem: {
+    /** Default Item hover */
+    default: "transition-colors",
+    /** Hover state */
+    hover: "hover:bg-muted/50",
+    /** Active/selected state */
+    active: "bg-muted",
+    /** Combined for clickable items */
+    combined: "hover:bg-muted/50 cursor-pointer transition-colors"
+  },
+  button: {
+    /** Focus ring */
+    focus: "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+    /** Active/pressed state */
+    active: "active:scale-[0.98]",
+    /** Transition */
+    transition: "transition-colors"
+  },
+  input: {
+    /** Default state */
+    default: "border border-gray-200 transition-colors",
+    /** Hover state */
+    hover: "hover:border-gray-300",
+    /** Focus state */
+    focus: "focus:border-gray-900 focus:ring-2 focus:ring-gray-900/10",
+    /** Error state */
+    error: "border-destructive focus:border-destructive focus:ring-destructive/10",
+    /** Combined */
+    combined: "border border-gray-200 hover:border-gray-300 focus:border-gray-900 focus:ring-2 focus:ring-gray-900/10 transition-colors"
+  },
+  menuItem: {
+    /** Default state */
+    default: "transition-colors rounded-sm",
+    /** Hover/focus state */
+    hover: "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
+    /** Combined classes */
+    combined: "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground rounded-sm transition-colors"
+  },
+  sidebarItem: {
+    /** Default state */
+    default: "transition-colors rounded-md",
+    /** Hover state */
+    hover: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+    /** Active/current page */
+    active: "bg-sidebar-accent text-sidebar-accent-foreground",
+    /** Combined */
+    combined: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground rounded-md transition-colors"
+  },
+  transitions: {
+    /** Fast transition (colors, opacity) */
+    fast: "transition-colors duration-150",
+    /** Medium transition (transform, shadow) */
+    medium: "transition-all duration-200",
+    /** Slow transition (layout) */
+    slow: "transition-all duration-300",
+    /** Ease functions */
+    ease: {
+      default: "ease-in-out",
+      in: "ease-in",
+      out: "ease-out",
+      bounce: "cubic-bezier(0.68, -0.55, 0.265, 1.55)"
+    }
+  }
+};
+
+// src/design-system/patterns/charts.ts
+var chartPatterns = {
+  /** Order of colors when assigning to data series */
+  colorPriority: ["chart-1", "chart-3", "chart-5", "chart-4", "chart-6", "chart-8"],
+  /** Rating distribution color mapping (5-star to 1-star) */
+  ratingDistribution: {
+    "5": "chart-3",
+    // Green - great
+    "4": "chart-1",
+    // Yellow - good
+    "3": "chart-4",
+    // Gray - neutral
+    "2": "chart-5",
+    // Red - poor
+    "1": "chart-5"
+    // Red - poor
+  },
+  /** Colors for positive/growth metrics */
+  positiveMetrics: ["chart-1", "chart-3", "chart-6"],
+  /** Colors for negative/decline metrics */
+  negativeMetrics: ["chart-5", "chart-4", "chart-8"],
+  /** Comparison pairs (e.g., this period vs last period) */
+  comparisonPairs: {
+    current: "chart-1",
+    previous: "chart-4"
+  },
+  /** Axis styling (Recharts) */
+  axisStyle: {
+    tickLine: false,
+    axisLine: false,
+    tick: {
+      fill: "hsl(var(--muted-foreground))",
+      fontSize: 12
+    },
+    tickMargin: 8
+  },
+  /** Y-axis specific */
+  yAxisStyle: {
+    tickLine: false,
+    axisLine: false,
+    tick: {
+      fill: "hsl(var(--muted-foreground))",
+      fontSize: 12
+    },
+    width: 40
+  },
+  /** X-axis specific */
+  xAxisStyle: {
+    tickLine: false,
+    axisLine: false,
+    tick: {
+      fill: "hsl(var(--muted-foreground))",
+      fontSize: 12
+    },
+    height: 40
+  },
+  /** Bar chart corner radius */
+  barRadius: [4, 4, 0, 0],
+  /** Grid styling */
+  gridStyle: {
+    stroke: "hsl(var(--border))",
+    strokeDasharray: "3 3"
+  },
+  /** Tooltip styling */
+  tooltipStyle: {
+    contentStyle: {
+      backgroundColor: "hsl(var(--popover))",
+      border: "1px solid hsl(var(--border))",
+      borderRadius: "6px",
+      boxShadow: "var(--card-shadow)"
+    },
+    labelStyle: {
+      fontWeight: 600,
+      marginBottom: 4
+    }
+  },
+  /** Legend styling */
+  legendStyle: {
+    iconType: "circle",
+    iconSize: 8,
+    wrapperStyle: {
+      paddingTop: 16
+    }
+  },
+  /** Chart container sizing */
+  containerSizing: {
+    /** Small chart (sparkline, mini) */
+    small: { height: 100 },
+    /** Medium chart (card) */
+    medium: { height: 200 },
+    /** Large chart (main view) */
+    large: { height: 300 },
+    /** Full height (dashboard) */
+    full: { height: 400 }
+  },
+  /** Margin presets */
+  margins: {
+    /** No labels */
+    none: { top: 0, right: 0, bottom: 0, left: 0 },
+    /** With axis labels */
+    withAxis: { top: 10, right: 10, bottom: 30, left: 40 },
+    /** With legend */
+    withLegend: { top: 10, right: 10, bottom: 50, left: 40 }
+  },
+  /** Semantic data series names */
+  semanticSeries: {
+    revenue: { color: "chart-1", label: "Revenue" },
+    growth: { color: "chart-3", label: "Growth" },
+    decline: { color: "chart-5", label: "Decline" },
+    baseline: { color: "chart-4", label: "Baseline" },
+    target: { color: "chart-2", label: "Target" }
+  }
+};
+
+// src/design-system/patterns/modals.ts
+var modalPatterns = {
+  sizes: {
+    /** Small dialogs (simple confirm, single field) */
+    small: "max-w-sm",
+    /** Default dialogs (forms, content) */
+    default: "max-w-lg",
+    /** Large dialogs (complex forms, multi-step) */
+    large: "max-w-2xl",
+    /** Extra large (previews, rich content) */
+    xl: "max-w-3xl",
+    /** Full width (tables, complex layouts) */
+    full: "max-w-4xl"
+  },
+  /** Header with icon (for important dialogs) */
+  headerWithIcon: {
+    /** Icon container base classes */
+    iconContainer: "size-12 rounded-full flex items-center justify-center mb-4",
+    /** Positive/success icon background */
+    iconPositive: "bg-yellow-100 text-yellow-600",
+    /** Info icon background */
+    iconInfo: "bg-blue-100 text-blue-600",
+    /** Destructive/warning icon background */
+    iconDestructive: "bg-red-100 text-red-600",
+    /** Success icon background */
+    iconSuccess: "bg-green-100 text-green-600",
+    /** Icon size inside container */
+    iconSize: "h-6 w-6"
+  },
+  /** Footer patterns */
+  footer: {
+    /** Standard alignment */
+    alignment: "flex justify-end gap-2",
+    /** Cancel button comes first (left) */
+    cancelFirst: true,
+    /** Destructive actions */
+    destructive: {
+      cancelVariant: "outline",
+      actionVariant: "destructive"
+    },
+    /** Standard actions */
+    standard: {
+      cancelVariant: "outline",
+      actionVariant: "default"
+    }
+  },
+  /** Mobile considerations */
+  mobile: {
+    /** Dialog content height constraint */
+    dialogHeight: "max-h-[90vh] overflow-y-auto",
+    /** Bottom sheet height */
+    bottomSheetHeight: "h-auto max-h-[80vh]",
+    /** Full screen dialog */
+    fullScreen: "fixed inset-0 max-w-none rounded-none"
+  },
+  /** Sheet-specific patterns */
+  sheet: {
+    /** Right panel (default) - detail views */
+    right: {
+      side: "right",
+      width: "w-[400px] sm:max-w-[540px]"
+    },
+    /** Left panel - mobile navigation */
+    left: {
+      side: "left",
+      width: "w-[300px] sm:max-w-[400px]"
+    },
+    /** Bottom panel - mobile actions */
+    bottom: {
+      side: "bottom",
+      height: "h-auto max-h-[80vh]",
+      rounded: "rounded-t-xl"
+    }
+  },
+  /** AlertDialog specific (destructive confirmations) */
+  alertDialog: {
+    /** Header: title + description only. NO icons, NO decoration */
+    headerRule: "Title and description text only",
+    /** Footer button order */
+    buttonOrder: ["AlertDialogCancel", "AlertDialogAction"],
+    /** Action button for destructive */
+    destructiveAction: {
+      variant: "destructive",
+      text: "Delete"
+      // or appropriate action verb
+    },
+    /** Standard messaging */
+    messaging: {
+      title: "Action verb + object (e.g., 'Delete this item?')",
+      description: "Consequence explanation (e.g., 'This action cannot be undone.')"
+    }
+  },
+  /** Common dialog content patterns */
+  contentPatterns: {
+    /** Form dialog */
+    form: {
+      spacing: "space-y-4",
+      footerSpacing: "pt-4"
+    },
+    /** Confirmation dialog */
+    confirmation: {
+      textAlign: "text-center",
+      spacing: "space-y-2"
+    },
+    /** Detail/preview dialog */
+    detail: {
+      maxHeight: "max-h-[70vh]",
+      overflow: "overflow-y-auto"
+    }
+  },
+  /** Animation timing */
+  animation: {
+    /** Dialog fade/scale */
+    dialog: "duration-200",
+    /** Sheet slide */
+    sheet: "duration-300",
+    /** Overlay fade */
+    overlay: "duration-200"
+  }
+};
+
+// src/design-system/mappings/icons.ts
+var iconMappings = {
+  /** Action icons - for buttons and interactive elements */
+  actions: {
+    edit: "Pencil",
+    delete: "Trash2",
+    add: "Plus",
+    create: "Plus",
+    close: "X",
+    cancel: "X",
+    menu: "MoreVertical",
+    menuHorizontal: "MoreHorizontal",
+    settings: "Settings",
+    copy: "Copy",
+    duplicate: "Copy",
+    download: "Download",
+    upload: "Upload",
+    refresh: "RefreshCw",
+    save: "Save",
+    send: "Send",
+    search: "Search",
+    filter: "Filter",
+    sort: "ArrowUpDown",
+    archive: "Archive",
+    restore: "ArchiveRestore",
+    undo: "Undo2",
+    redo: "Redo2",
+    print: "Printer",
+    export: "FileDown",
+    import: "FileUp"
+  },
+  /** Navigation icons */
+  navigation: {
+    back: "ArrowLeft",
+    forward: "ArrowRight",
+    up: "ArrowUp",
+    down: "ArrowDown",
+    external: "ExternalLink",
+    expand: "ChevronDown",
+    collapse: "ChevronUp",
+    chevronLeft: "ChevronLeft",
+    chevronRight: "ChevronRight",
+    home: "Home",
+    menu: "Menu",
+    sidebar: "PanelLeft",
+    grid: "LayoutGrid",
+    list: "List"
+  },
+  /** Status icons */
+  status: {
+    success: "CheckCircle",
+    check: "Check",
+    warning: "AlertTriangle",
+    error: "AlertCircle",
+    info: "Info",
+    loading: "Loader2",
+    pending: "Clock",
+    scheduled: "CalendarClock",
+    draft: "FileEdit",
+    active: "CircleDot",
+    inactive: "Circle",
+    verified: "BadgeCheck",
+    locked: "Lock",
+    unlocked: "Unlock",
+    visible: "Eye",
+    hidden: "EyeOff"
+  },
+  /** Domain-specific icons */
+  domain: {
+    calendar: "Calendar",
+    date: "Calendar",
+    time: "Clock",
+    location: "MapPin",
+    address: "MapPin",
+    team: "Users",
+    user: "User",
+    profile: "UserCircle",
+    email: "Mail",
+    phone: "Phone",
+    money: "DollarSign",
+    payment: "CreditCard",
+    invoice: "Receipt",
+    rating: "Star",
+    favorite: "Heart",
+    bookmark: "Bookmark",
+    share: "Share2",
+    link: "Link",
+    attachment: "Paperclip",
+    image: "Image",
+    file: "File",
+    folder: "Folder",
+    document: "FileText",
+    chart: "BarChart3",
+    analytics: "TrendingUp",
+    dashboard: "LayoutDashboard",
+    notification: "Bell",
+    message: "MessageSquare",
+    comment: "MessageCircle",
+    tag: "Tag",
+    category: "Folder",
+    partner: "Building2",
+    company: "Building",
+    store: "Store",
+    product: "Package",
+    inventory: "Boxes",
+    order: "ShoppingCart",
+    offer: "Ticket",
+    event: "CalendarDays",
+    campaign: "Megaphone"
+  },
+  /** Form icons */
+  form: {
+    required: "Asterisk",
+    optional: "Circle",
+    help: "HelpCircle",
+    clear: "XCircle",
+    show: "Eye",
+    hide: "EyeOff",
+    increment: "Plus",
+    decrement: "Minus"
+  },
+  /** Empty state icons */
+  emptyStates: {
+    noData: "Inbox",
+    noResults: "SearchX",
+    noItems: "PackageOpen",
+    noContent: "FileX",
+    noAccess: "ShieldX",
+    error: "AlertOctagon",
+    maintenance: "Wrench",
+    construction: "Construction"
+  }
+};
+var getIcon = (category, key) => {
+  const categoryIcons = iconMappings[category];
+  return categoryIcons[key];
+};
+
+// src/design-system/mappings/badges.ts
+var badgeMappings = {
+  /** Status badge variants */
+  status: {
+    // Positive states
+    active: "success",
+    live: "success",
+    complete: "success",
+    completed: "success",
+    approved: "success",
+    verified: "success",
+    published: "success",
+    online: "success",
+    // Pending/in-progress states
+    pending: "warning",
+    pendingReview: "warning",
+    inReview: "warning",
+    processing: "warning",
+    scheduled: "warning",
+    // Neutral/draft states
+    draft: "secondary",
+    inProgress: "secondary",
+    paused: "secondary",
+    inactive: "secondary",
+    offline: "secondary",
+    // Negative states
+    error: "destructive",
+    failed: "destructive",
+    cancelled: "destructive",
+    rejected: "destructive",
+    expired: "destructive",
+    overdue: "destructive",
+    // Past/archived states
+    archived: "outline",
+    closed: "outline",
+    ended: "outline",
+    past: "outline"
+  },
+  /** Generic tag styling */
+  tags: "outline",
+  /** Premium/VIP styling (use CSS class, not Badge component) */
+  premium: {
+    className: "badge-premium",
+    note: "Use badge-premium CSS class, not Badge component variant"
+  },
+  /** Badge with shadow for floating effect */
+  floating: {
+    additionalClass: "shadow-tag",
+    note: "Add shadow-tag class to Badge for floating effect"
+  }
+};
+var getBadgeVariant = (status) => {
+  const normalizedStatus = status.toLowerCase().replace(/[\s-_]/g, "");
+  const statusMap = badgeMappings.status;
+  if (statusMap[normalizedStatus]) {
+    return statusMap[normalizedStatus];
+  }
+  for (const [key, variant] of Object.entries(statusMap)) {
+    if (normalizedStatus.includes(key.toLowerCase())) {
+      return variant;
+    }
+  }
+  return "secondary";
+};
+var statusLabels = {
+  active: "Active",
+  live: "Live",
+  complete: "Complete",
+  completed: "Completed",
+  approved: "Approved",
+  verified: "Verified",
+  published: "Published",
+  online: "Online",
+  pending: "Pending",
+  pendingReview: "Pending Review",
+  inReview: "In Review",
+  processing: "Processing",
+  scheduled: "Scheduled",
+  draft: "Draft",
+  inProgress: "In Progress",
+  paused: "Paused",
+  inactive: "Inactive",
+  offline: "Offline",
+  error: "Error",
+  failed: "Failed",
+  cancelled: "Cancelled",
+  rejected: "Rejected",
+  expired: "Expired",
+  overdue: "Overdue",
+  archived: "Archived",
+  closed: "Closed",
+  ended: "Ended",
+  past: "Past"
+};
+
+// src/design-system/index.ts
+var offlineDesignSystem = {
+  /** Package metadata */
+  meta: {
+    name: "@offlinemediainc/offline-ui",
+    version: "0.2.0",
+    description: "Offline Media Design System - LLM-friendly design decisions and patterns"
+  },
+  /** Quick reference for most common decisions */
+  quickReference: {
+    colors: {
+      primary: "#191919 (gray-900) - buttons, text, UI elements",
+      accent: "#de8e0f (yellow-400) - ACCENT ONLY, never buttons",
+      link: "#004fff (blue-400) - clickable text only",
+      success: "#099250 (chart-3) - positive feedback",
+      error: "#d31a0c (chart-5) - errors, destructive"
+    },
+    fonts: {
+      display: "Cabinet Grotesk - hero headlines only",
+      body: "Satoshi - everything else",
+      mono: "DM Mono - stats and numbers"
+    },
+    shadows: {
+      card: "shadow-card - default for containers",
+      floating: "shadow-tag - floating badges",
+      modal: "shadow-elevated - dialogs, popovers"
+    },
+    components: {
+      formModal: "Dialog",
+      destructiveConfirm: "AlertDialog",
+      sidePanel: "Sheet side=right",
+      listItem: "Item",
+      toast: "toast.success / toast.error"
+    }
+  },
+  /** Semantic color and typography mappings */
+  semantics: {
+    colors: semanticColors,
+    colorHexValues,
+    typography: typographyDecisions,
+    fontFamilies: fontFamilyDecisions,
+    typographyScale
+  },
+  /** Component decisions and metadata */
+  components: {
+    decisions: componentDecisions,
+    registry: componentRegistry,
+    approved: approvedComponents,
+    draft: draftComponents
+  },
+  /** Layout, state, and interaction patterns */
+  patterns: {
+    layout: layoutPatterns,
+    states: statePatterns,
+    interactions: interactionPatterns,
+    charts: chartPatterns,
+    modals: modalPatterns
+  },
+  /** Icon and badge mappings */
+  mappings: {
+    icons: iconMappings,
+    badges: badgeMappings,
+    statusLabels
+  },
+  /** Design rules and anti-patterns */
+  rules: {
+    critical: [
+      "NEVER use yellow (#de8e0f) for buttons - yellow is accent only",
+      "Blue (#004fff) is ONLY for clickable text links",
+      "AlertDialog headers: title + description only, NO icons or decoration",
+      "Icon-only buttons MUST have aria-label",
+      "Inputs MUST be paired with Label using htmlFor"
+    ],
+    guidelines: [
+      "Use CSS variables instead of hardcoded hex values",
+      "Match shadow level to element importance: card < tag < elevated",
+      "Use Cabinet Grotesk (display-*) sparingly for hero headlines",
+      "Use stat-mono for numerical data and statistics",
+      "Add max-h-[90vh] overflow-y-auto to Dialog for mobile"
+    ],
+    antiPatterns: [
+      { bad: "Yellow buttons", fix: "Use Button variant='default' (black)" },
+      { bad: "Home icon in breadcrumb", fix: "Use 'Home' text instead" },
+      { bad: "Decorated AlertDialog headers", fix: "Title + description only" },
+      { bad: "Missing input labels", fix: "Always pair Input with Label htmlFor" },
+      { bad: "Hardcoded colors", fix: "Use CSS variables or semantic classes" },
+      { bad: "Overusing premium styling", fix: "Reserve for actual premium content" }
+    ]
+  }
+};
+
+exports.__objRest = __objRest;
+exports.__spreadProps = __spreadProps;
+exports.__spreadValues = __spreadValues;
+exports.approvedComponents = approvedComponents;
+exports.badgeMappings = badgeMappings;
+exports.chartPatterns = chartPatterns;
+exports.colorHexValues = colorHexValues;
+exports.componentDecisions = componentDecisions;
+exports.componentRegistry = componentRegistry;
+exports.draftComponents = draftComponents;
+exports.fontFamilyDecisions = fontFamilyDecisions;
+exports.getBadgeVariant = getBadgeVariant;
+exports.getIcon = getIcon;
+exports.iconMappings = iconMappings;
+exports.interactionPatterns = interactionPatterns;
+exports.layoutPatterns = layoutPatterns;
+exports.modalPatterns = modalPatterns;
+exports.offlineDesignSystem = offlineDesignSystem;
+exports.semanticColors = semanticColors;
+exports.statePatterns = statePatterns;
+exports.statusLabels = statusLabels;
+exports.typographyDecisions = typographyDecisions;
+exports.typographyScale = typographyScale;
+//# sourceMappingURL=chunk-XOGYSEME.cjs.map
+//# sourceMappingURL=chunk-XOGYSEME.cjs.map