@offlinemediainc/offline-ui 0.1.3 → 0.2.0

package/dist/design-system/index.d.ts

@@ -0,0 +1,2109 @@
+type ColorToken = `yellow-${25 | 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900}` | `blue-${25 | 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900}` | `gray-${25 | 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900}` | `chart-${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8}` | "red-400" | "semantic-success500" | "white" | "black";
+type TypographyClass = "display-large" | "display-medium" | "display-small" | "headline-large" | "headline-medium" | "headline-small" | "title-large" | "title-medium" | "title-small" | "body-large" | "body-medium" | "body-small" | "body-x-small" | "label-large" | "label-medium" | "label-small" | "stat-mono" | "nav-label" | "nav-link";
+type ShadowLevel = "shadow-card" | "shadow-tag" | "shadow-elevated";
+type BadgeVariant = "default" | "secondary" | "destructive" | "success" | "warning" | "outline" | "link";
+type ButtonVariant = "default" | "secondary" | "destructive" | "outline" | "ghost" | "link";
+type ButtonSize = "default" | "sm" | "lg" | "icon";
+type LucideIconName = string;
+type TailwindClass = string;
+interface ComponentMeta {
+    name: string;
+    status: "approved" | "draft";
+    description: string;
+    imports: string[];
+    variants?: Record<string, string[]>;
+    sizes?: string[];
+    composition?: string[];
+}
+
+declare const semanticColors: {
+    readonly brand: {
+        /** Yellow-400 (#de8e0f) - brand accent for highlights, badges, premium touches. NEVER for buttons */
+        readonly primary: "yellow-400";
+        /** Blue-400 (#004fff) - for links and clickable text ONLY */
+        readonly interactive: "blue-400";
+    };
+    readonly text: {
+        /** Gray-900 (#191919) - primary text, headings, important content */
+        readonly primary: "gray-900";
+        /** Gray-600 (#636363) - secondary/supporting text */
+        readonly secondary: "gray-600";
+        /** Gray-500 (#7c7c7c) - muted text, timestamps, helpers */
+        readonly muted: "gray-500";
+        /** White text on dark backgrounds */
+        readonly onDark: "white";
+        /** Blue-400 for clickable links */
+        readonly link: "blue-400";
+        /** Success green for positive text */
+        readonly positive: "semantic-success500";
+        /** Red for error/negative text */
+        readonly negative: "red-400";
+    };
+    readonly surface: {
+        /** White - default page/card background */
+        readonly default: "white";
+        /** Gray-50 (#ececec) - muted/secondary backgrounds */
+        readonly muted: "gray-50";
+        /** White with shadow-elevated for floating surfaces */
+        readonly elevated: "white + shadow-elevated";
+    };
+    readonly border: {
+        /** Gray-200 (#c6c6c6) - default borders */
+        readonly default: "gray-200";
+        /** Gray-300 (#aeaeae) - stronger borders */
+        readonly strong: "gray-300";
+        /** Yellow-400 - interactive/accent borders */
+        readonly interactive: "yellow-400";
+        /** Gray-900 - focus ring borders */
+        readonly focus: "gray-900";
+    };
+    readonly feedback: {
+        /** Chart-3 (#099250) - success, positive, growth */
+        readonly positive: "chart-3";
+        /** Chart-5 (#d31a0c) - error, negative, problems */
+        readonly negative: "chart-5";
+        /** Yellow-400 - warning states */
+        readonly warning: "yellow-400";
+        /** Chart-4 (#636363) - neutral/baseline */
+        readonly neutral: "chart-4";
+    };
+};
+declare const colorHexValues: {
+    readonly "yellow-25": "#fff2d8";
+    readonly "yellow-50": "#ffe9bd";
+    readonly "yellow-100": "#ffd386";
+    readonly "yellow-200": "#ffbd54";
+    readonly "yellow-300": "#f0a52c";
+    readonly "yellow-400": "#de8e0f";
+    readonly "yellow-500": "#c57900";
+    readonly "yellow-600": "#a76700";
+    readonly "yellow-700": "#835100";
+    readonly "yellow-800": "#5c3900";
+    readonly "yellow-900": "#331f00";
+    readonly "blue-25": "#d8e7ff";
+    readonly "blue-50": "#bed6ff";
+    readonly "blue-100": "#85afff";
+    readonly "blue-200": "#508bff";
+    readonly "blue-300": "#236aff";
+    readonly "blue-400": "#004fff";
+    readonly "blue-500": "#0046e0";
+    readonly "blue-600": "#003bbb";
+    readonly "blue-700": "#002e91";
+    readonly "blue-800": "#001f63";
+    readonly "blue-900": "#001033";
+    readonly "gray-25": "#f2f2f2";
+    readonly "gray-50": "#ececec";
+    readonly "gray-100": "#dfdfdf";
+    readonly "gray-200": "#c6c6c6";
+    readonly "gray-300": "#aeaeae";
+    readonly "gray-400": "#959595";
+    readonly "gray-500": "#7c7c7c";
+    readonly "gray-600": "#636363";
+    readonly "gray-700": "#4a4a4a";
+    readonly "gray-800": "#323232";
+    readonly "gray-900": "#191919";
+    readonly "red-400": "#d31a0c";
+    readonly "semantic-success500": "#099250";
+    readonly "chart-1": "#de8e0f";
+    readonly "chart-2": "#004fff";
+    readonly "chart-3": "#099250";
+    readonly "chart-4": "#636363";
+    readonly "chart-5": "#d31a0c";
+    readonly "chart-6": "#a76700";
+    readonly "chart-7": "#003bbb";
+    readonly "chart-8": "#959595";
+};
+type SemanticColors = typeof semanticColors;
+type ColorHexValues = typeof colorHexValues;
+
+declare const typographyDecisions: {
+    /** Hero headlines, major section titles - Cabinet Grotesk, use sparingly */
+    readonly pageTitle: "display-small";
+    /** Section headings within pages */
+    readonly sectionHeading: "headline-medium";
+    /** Card titles, panel headers */
+    readonly cardTitle: "headline-small";
+    /** Large stat values in dashboards */
+    readonly statValueLarge: "display-medium";
+    /** Smaller stat values */
+    readonly statValueSmall: "display-small";
+    /** Labels under stat values */
+    readonly statLabel: "body-small";
+    /** Default body text */
+    readonly bodyDefault: "body-medium";
+    /** Secondary/supporting body text */
+    readonly bodySecondary: "body-small";
+    /** Form field labels */
+    readonly formLabel: "label-medium";
+    /** Helper text below inputs */
+    readonly formHelper: "body-small text-muted";
+    /** Error messages below inputs */
+    readonly formError: "body-small text-negative";
+    /** Button text */
+    readonly buttonText: "label-medium";
+    /** Sidebar/nav items */
+    readonly navItem: "body-medium";
+    /** Badge text */
+    readonly badgeText: "label-small";
+    /** Table header cells */
+    readonly tableHeader: "label-medium";
+    /** Table body cells */
+    readonly tableCell: "body-medium";
+    /** Timestamps, dates */
+    readonly timestamp: "body-small text-muted";
+    /** Empty state headline */
+    readonly emptyStateTitle: "headline-small";
+    /** Empty state description */
+    readonly emptyStateDescription: "body-medium text-muted";
+    /** Dialog title */
+    readonly dialogTitle: "headline-medium";
+    /** Dialog description */
+    readonly dialogDescription: "body-medium text-muted";
+    /** Sidebar section labels */
+    readonly sidebarLabel: "nav-label";
+    /** Sidebar navigation items */
+    readonly sidebarItem: "body-medium";
+    /** Breadcrumb items */
+    readonly breadcrumbItem: "body-small";
+    /** Current breadcrumb (muted) */
+    readonly breadcrumbCurrent: "body-small text-muted";
+};
+declare const fontFamilyDecisions: {
+    /** Cabinet Grotesk - hero headlines, major titles. Use sparingly for impact */
+    readonly display: "var(--font-cabinet-grotesk), var(--font-satoshi), sans-serif";
+    /** Satoshi - everything else: headlines, body, labels. The workhorse font */
+    readonly body: "var(--font-satoshi), sans-serif";
+    /** DM Mono - stats, numbers, code. When precision matters */
+    readonly mono: "var(--font-dm-mono), 'DM Mono', monospace";
+};
+declare const typographyScale: {
+    readonly "display-large": {
+        readonly size: "36px";
+        readonly lineHeight: "100%";
+        readonly weight: 800;
+        readonly font: "Cabinet Grotesk";
+    };
+    readonly "display-medium": {
+        readonly size: "32px";
+        readonly lineHeight: "100%";
+        readonly weight: 800;
+        readonly font: "Cabinet Grotesk";
+    };
+    readonly "display-small": {
+        readonly size: "29px";
+        readonly lineHeight: "100%";
+        readonly weight: 800;
+        readonly font: "Cabinet Grotesk";
+    };
+    readonly "headline-large": {
+        readonly size: "26px";
+        readonly lineHeight: "32px";
+        readonly weight: 700;
+        readonly font: "Satoshi";
+    };
+    readonly "headline-medium": {
+        readonly size: "23px";
+        readonly lineHeight: "28px";
+        readonly weight: 700;
+        readonly font: "Satoshi";
+    };
+    readonly "headline-small": {
+        readonly size: "20px";
+        readonly lineHeight: "24px";
+        readonly weight: 700;
+        readonly font: "Satoshi";
+    };
+    readonly "title-large": {
+        readonly size: "18px";
+        readonly lineHeight: "22px";
+        readonly weight: 700;
+        readonly font: "Satoshi";
+    };
+    readonly "title-medium": {
+        readonly size: "16px";
+        readonly lineHeight: "20px";
+        readonly weight: 700;
+        readonly font: "Satoshi";
+    };
+    readonly "title-small": {
+        readonly size: "14px";
+        readonly lineHeight: "18px";
+        readonly weight: 700;
+        readonly font: "Satoshi";
+    };
+    readonly "body-large": {
+        readonly size: "16px";
+        readonly lineHeight: "24px";
+        readonly weight: 500;
+        readonly font: "Satoshi";
+    };
+    readonly "body-medium": {
+        readonly size: "14px";
+        readonly lineHeight: "20px";
+        readonly weight: 500;
+        readonly font: "Satoshi";
+    };
+    readonly "body-small": {
+        readonly size: "12px";
+        readonly lineHeight: "16px";
+        readonly weight: 500;
+        readonly font: "Satoshi";
+    };
+    readonly "body-x-small": {
+        readonly size: "10px";
+        readonly lineHeight: "14px";
+        readonly weight: 500;
+        readonly font: "Satoshi";
+    };
+    readonly "label-large": {
+        readonly size: "14px";
+        readonly lineHeight: "18px";
+        readonly weight: 700;
+        readonly font: "Satoshi";
+    };
+    readonly "label-medium": {
+        readonly size: "12px";
+        readonly lineHeight: "16px";
+        readonly weight: 700;
+        readonly font: "Satoshi";
+    };
+    readonly "label-small": {
+        readonly size: "10px";
+        readonly lineHeight: "14px";
+        readonly weight: 700;
+        readonly font: "Satoshi";
+    };
+    readonly "stat-mono": {
+        readonly weight: 500;
+        readonly letterSpacing: "0.04em";
+        readonly font: "DM Mono";
+    };
+};
+type TypographyDecisions = typeof typographyDecisions;
+type FontFamilyDecisions = typeof fontFamilyDecisions;
+type TypographyScale = typeof typographyScale;
+
+declare const componentDecisions: {
+    readonly lists: {
+        /** Clickable list rows (partners, offers, events) */
+        readonly clickableRow: "Item";
+        /** Structured data with sorting/filtering */
+        readonly dataTable: "Table";
+        /** Grid of cards (dashboard, gallery) */
+        readonly cardGrid: "Card in grid";
+        /** Simple bulleted/numbered lists */
+        readonly simpleList: "ul with body-medium";
+        /** Key-value pairs */
+        readonly descriptionList: "dl with label-medium dt and body-medium dd";
+    };
+    readonly feedback: {
+        /** Success after action (save, create, delete) */
+        readonly actionSuccess: "toast.success";
+        /** Error after action */
+        readonly actionError: "toast.error";
+        /** Warning banner in content area */
+        readonly inlineWarning: "Alert variant=warning";
+        /** Error banner in content area */
+        readonly inlineError: "Alert variant=destructive";
+        /** Form field validation error */
+        readonly fieldError: "body-small text-negative below input";
+        /** Info/tip banner */
+        readonly inlineInfo: "Alert variant=default";
+    };
+    readonly modals: {
+        /** Forms, content entry, multi-step flows */
+        readonly formEntry: "Dialog";
+        /** Destructive action confirmation (delete, discard) */
+        readonly confirmDestructive: "AlertDialog";
+        /** Side panel for details, secondary content */
+        readonly sidePanel: "Sheet side=right";
+        /** Mobile navigation drawer */
+        readonly mobileNav: "Sheet side=left";
+        /** Mobile action sheets */
+        readonly mobileActions: "Sheet side=bottom h-auto max-h-[80vh]";
+        /** Preview/detail view */
+        readonly preview: "Dialog or Sheet";
+    };
+    readonly navigation: {
+        /** Primary app navigation */
+        readonly primaryNav: "Sidebar";
+        /** Page-level tabs */
+        readonly pageTabs: "Tabs";
+        /** Location breadcrumbs */
+        readonly breadcrumbs: "Breadcrumb";
+        /** Section header with back button */
+        readonly sectionHeader: "Breadcrumb + headline";
+        /** Dropdown navigation menu */
+        readonly dropdownNav: "DropdownMenu";
+    };
+    readonly selection: {
+        /** Single choice from 2-5 options */
+        readonly singleFromFew: "radio group";
+        /** Single choice from many options */
+        readonly singleFromMany: "Select";
+        /** Multiple choices allowed */
+        readonly multiple: "Checkbox group";
+        /** On/off toggle */
+        readonly toggle: "single Checkbox";
+        /** Segmented control (view modes) */
+        readonly segmented: "Tabs variant=pill";
+    };
+    readonly data: {
+        /** Status indicator */
+        readonly status: "Badge";
+        /** Progress indication */
+        readonly progress: "Progress";
+        /** Avatar/profile image */
+        readonly avatar: "Avatar";
+        /** Data visualization */
+        readonly chart: "Chart (recharts)";
+        /** Loading placeholder */
+        readonly skeleton: "Skeleton";
+    };
+    readonly forms: {
+        /** Single-line text input */
+        readonly textInput: "Input";
+        /** Multi-line text input */
+        readonly textArea: "Textarea";
+        /** Email/password/number input */
+        readonly typedInput: "Input type=email|password|number";
+        /** OTP/verification code */
+        readonly otpInput: "InputOTP";
+        /** Form field label */
+        readonly label: "Label htmlFor={id}";
+        /** Checkbox with label */
+        readonly checkbox: "Checkbox + Label";
+    };
+    readonly layout: {
+        /** Content card container */
+        readonly card: "Card";
+        /** Expandable content */
+        readonly accordion: "Accordion";
+        /** Collapsible section */
+        readonly collapsible: "Collapsible";
+        /** Visual divider */
+        readonly separator: "Separator";
+        /** Hover information */
+        readonly tooltip: "Tooltip";
+    };
+};
+type ComponentDecisions = typeof componentDecisions;
+
+declare const componentRegistry: Record<string, ComponentMeta>;
+declare const approvedComponents: string[];
+declare const draftComponents: string[];
+type ComponentRegistry = typeof componentRegistry;
+
+declare const layoutPatterns: {
+    readonly page: {
+        /** Content area max width */
+        readonly maxWidth: "max-w-4xl";
+        /** Wider content area (dashboards, tables) */
+        readonly maxWidthWide: "max-w-6xl";
+        /** Page padding */
+        readonly padding: "px-4 py-6";
+        /** Gap between major sections */
+        readonly sectionGap: "space-y-8";
+        /** Main content wrapper */
+        readonly wrapper: "mx-auto px-4 py-6";
+    };
+    readonly cards: {
+        /** Standard card padding */
+        readonly padding: "p-6";
+        /** Compact card padding */
+        readonly paddingCompact: "p-4";
+        /** Gap between cards in grid */
+        readonly gap: "gap-4";
+        /** 2-column responsive grid */
+        readonly grid2col: "grid grid-cols-1 md:grid-cols-2 gap-4";
+        /** 3-column responsive grid */
+        readonly grid3col: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4";
+        /** 4-column responsive grid */
+        readonly grid4col: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4";
+        /** Stack of cards */
+        readonly stack: "flex flex-col gap-4";
+    };
+    readonly forms: {
+        /** Gap between form fields */
+        readonly fieldGap: "space-y-4";
+        /** Gap between label and input */
+        readonly labelGap: "mb-2";
+        /** Gap between input and helper text */
+        readonly helperGap: "mt-1";
+        /** Gap between buttons in button group */
+        readonly buttonGap: "gap-2";
+        /** Gap between form sections */
+        readonly sectionGap: "space-y-6";
+        /** Form container */
+        readonly container: "space-y-4";
+        /** Form actions row */
+        readonly actions: "flex justify-end gap-2 pt-4";
+        /** Full-width form field */
+        readonly fieldFull: "w-full";
+        /** Inline field pair */
+        readonly fieldPair: "grid grid-cols-2 gap-4";
+    };
+    readonly inline: {
+        /** Icon + text alignment */
+        readonly iconText: "inline-flex items-center gap-2";
+        /** Badge group spacing */
+        readonly badges: "flex flex-wrap gap-2";
+        /** Button group spacing */
+        readonly buttons: "flex items-center gap-2";
+        /** Tag list */
+        readonly tags: "flex flex-wrap gap-1";
+    };
+    readonly header: {
+        /** Page header with title and actions */
+        readonly pageHeader: "flex items-center justify-between mb-6";
+        /** Section header */
+        readonly sectionHeader: "flex items-center justify-between mb-4";
+        /** Card header */
+        readonly cardHeader: "flex items-center justify-between";
+    };
+    readonly sidebar: {
+        /** Sidebar width */
+        readonly width: "w-64";
+        /** Collapsed sidebar width */
+        readonly widthCollapsed: "w-16";
+        /** Content area with sidebar */
+        readonly contentWithSidebar: "ml-64";
+        /** Mobile: full width content */
+        readonly contentMobile: "ml-0";
+    };
+    readonly responsive: {
+        /** Hide on mobile, show on tablet+ */
+        readonly hideMobile: "hidden md:block";
+        /** Show on mobile, hide on tablet+ */
+        readonly showMobile: "md:hidden";
+        /** Stack on mobile, row on tablet+ */
+        readonly stackToRow: "flex flex-col md:flex-row";
+        /** Full width on mobile, auto on tablet+ */
+        readonly fullToAuto: "w-full md:w-auto";
+    };
+};
+type LayoutPatterns = typeof layoutPatterns;
+
+declare const statePatterns: {
+    readonly loading: {
+        /** Full page loading skeleton */
+        readonly page: "Skeleton matching page structure";
+        /** Card loading skeleton */
+        readonly card: "Skeleton matching card structure";
+        /** Button loading state */
+        readonly button: {
+            readonly icon: "Loader2";
+            readonly text: "Loading...";
+            readonly classes: "disabled opacity-50";
+            readonly iconClasses: "animate-spin mr-2 h-4 w-4";
+        };
+        /** Inline loading spinner */
+        readonly inline: {
+            readonly icon: "Loader2";
+            readonly classes: "animate-spin h-4 w-4";
+        };
+        /** Table row skeleton */
+        readonly tableRow: "Skeleton h-12 w-full";
+        /** List item skeleton */
+        readonly listItem: "Skeleton h-16 w-full";
+        /** Avatar skeleton */
+        readonly avatar: "Skeleton h-10 w-10 rounded-full";
+    };
+    readonly empty: {
+        /** Empty state container structure */
+        readonly structure: "flex flex-col items-center justify-center py-12 text-center";
+        /** Empty state icon */
+        readonly icon: {
+            readonly classes: "h-12 w-12 text-muted-foreground mb-4";
+            readonly note: "Use relevant lucide icon for context";
+        };
+        /** Empty state title */
+        readonly title: {
+            readonly classes: "headline-small mb-2";
+        };
+        /** Empty state description */
+        readonly description: {
+            readonly classes: "body-medium text-muted-foreground max-w-sm mx-auto mb-4";
+        };
+        /** Empty state action button */
+        readonly action: {
+            readonly variant: "outline";
+            readonly note: "Optional - only if user can take action to fill empty state";
+        };
+    };
+    readonly error: {
+        /** Full page error */
+        readonly page: {
+            readonly component: "Alert";
+            readonly variant: "destructive";
+            readonly includeRetry: true;
+            readonly classes: "max-w-lg mx-auto my-8";
+        };
+        /** Inline error message */
+        readonly inline: {
+            readonly classes: "body-small text-destructive";
+        };
+        /** Form field error */
+        readonly field: {
+            readonly inputClasses: "border-destructive focus:ring-destructive";
+            readonly messageClasses: "body-small text-destructive mt-1";
+        };
+        /** Error banner */
+        readonly banner: {
+            readonly component: "Alert";
+            readonly variant: "destructive";
+            readonly classes: "mb-4";
+        };
+    };
+    readonly disabled: {
+        /** Disabled opacity */
+        readonly opacity: "opacity-50";
+        /** Disabled cursor */
+        readonly cursor: "cursor-not-allowed";
+        /** Prevent interaction */
+        readonly interaction: "pointer-events-none";
+        /** Combined disabled classes */
+        readonly combined: "opacity-50 cursor-not-allowed pointer-events-none";
+    };
+    readonly success: {
+        /** Success toast */
+        readonly toast: {
+            readonly method: "toast.success";
+            readonly duration: 3000;
+        };
+        /** Inline success message */
+        readonly inline: {
+            readonly classes: "body-small text-[var(--semantic-success500)]";
+        };
+        /** Success banner */
+        readonly banner: {
+            readonly component: "Alert";
+            readonly variant: "default";
+            readonly icon: "CheckCircle";
+            readonly classes: "border-[var(--semantic-success500)] bg-green-50";
+        };
+    };
+    readonly warning: {
+        /** Warning banner */
+        readonly banner: {
+            readonly component: "Alert";
+            readonly variant: "warning";
+            readonly icon: "AlertTriangle";
+        };
+        /** Inline warning */
+        readonly inline: {
+            readonly classes: "body-small text-[var(--colors-yellow-600)]";
+        };
+    };
+};
+type StatePatterns = typeof statePatterns;
+
+declare const interactionPatterns: {
+    readonly clickableCard: {
+        /** Default state */
+        readonly default: "shadow-card transition-shadow duration-200";
+        /** Hover state */
+        readonly hover: "hover:shadow-elevated";
+        /** Cursor */
+        readonly cursor: "cursor-pointer";
+        /** Combined classes */
+        readonly combined: "shadow-card hover:shadow-elevated cursor-pointer transition-shadow duration-200";
+        /** With border change */
+        readonly withBorder: "border border-gray-200 hover:border-gray-300 cursor-pointer transition-colors";
+    };
+    readonly link: {
+        /** Default link styling */
+        readonly default: "text-[var(--colors-blue-400)] underline-offset-4";
+        /** Hover state */
+        readonly hover: "hover:underline";
+        /** Combined classes */
+        readonly combined: "text-[var(--colors-blue-400)] underline-offset-4 hover:underline";
+        /** Navigation link (no underline by default) */
+        readonly nav: "text-[var(--colors-blue-400)] hover:underline underline-offset-4";
+    };
+    readonly iconButton: {
+        /** Default state */
+        readonly default: "p-2 rounded-md transition-colors";
+        /** Hover state */
+        readonly hover: "hover:bg-muted";
+        /** Combined classes */
+        readonly combined: "p-2 rounded-md hover:bg-muted transition-colors";
+        /** Destructive icon button */
+        readonly destructive: "p-2 rounded-md hover:bg-destructive/10 hover:text-destructive transition-colors";
+    };
+    readonly tableRow: {
+        /** Default state */
+        readonly default: "transition-colors";
+        /** Hover state */
+        readonly hover: "hover:bg-muted/50";
+        /** Combined classes */
+        readonly combined: "hover:bg-muted/50 transition-colors";
+        /** Clickable row */
+        readonly clickable: "hover:bg-muted/50 cursor-pointer transition-colors";
+    };
+    readonly listItem: {
+        /** Default Item hover */
+        readonly default: "transition-colors";
+        /** Hover state */
+        readonly hover: "hover:bg-muted/50";
+        /** Active/selected state */
+        readonly active: "bg-muted";
+        /** Combined for clickable items */
+        readonly combined: "hover:bg-muted/50 cursor-pointer transition-colors";
+    };
+    readonly button: {
+        /** Focus ring */
+        readonly focus: "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";
+        /** Active/pressed state */
+        readonly active: "active:scale-[0.98]";
+        /** Transition */
+        readonly transition: "transition-colors";
+    };
+    readonly input: {
+        /** Default state */
+        readonly default: "border border-gray-200 transition-colors";
+        /** Hover state */
+        readonly hover: "hover:border-gray-300";
+        /** Focus state */
+        readonly focus: "focus:border-gray-900 focus:ring-2 focus:ring-gray-900/10";
+        /** Error state */
+        readonly error: "border-destructive focus:border-destructive focus:ring-destructive/10";
+        /** Combined */
+        readonly combined: "border border-gray-200 hover:border-gray-300 focus:border-gray-900 focus:ring-2 focus:ring-gray-900/10 transition-colors";
+    };
+    readonly menuItem: {
+        /** Default state */
+        readonly default: "transition-colors rounded-sm";
+        /** Hover/focus state */
+        readonly hover: "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground";
+        /** Combined classes */
+        readonly combined: "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground rounded-sm transition-colors";
+    };
+    readonly sidebarItem: {
+        /** Default state */
+        readonly default: "transition-colors rounded-md";
+        /** Hover state */
+        readonly hover: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground";
+        /** Active/current page */
+        readonly active: "bg-sidebar-accent text-sidebar-accent-foreground";
+        /** Combined */
+        readonly combined: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground rounded-md transition-colors";
+    };
+    readonly transitions: {
+        /** Fast transition (colors, opacity) */
+        readonly fast: "transition-colors duration-150";
+        /** Medium transition (transform, shadow) */
+        readonly medium: "transition-all duration-200";
+        /** Slow transition (layout) */
+        readonly slow: "transition-all duration-300";
+        /** Ease functions */
+        readonly ease: {
+            readonly default: "ease-in-out";
+            readonly in: "ease-in";
+            readonly out: "ease-out";
+            readonly bounce: "cubic-bezier(0.68, -0.55, 0.265, 1.55)";
+        };
+    };
+};
+type InteractionPatterns = typeof interactionPatterns;
+
+declare const chartPatterns: {
+    /** Order of colors when assigning to data series */
+    readonly colorPriority: readonly ["chart-1", "chart-3", "chart-5", "chart-4", "chart-6", "chart-8"];
+    /** Rating distribution color mapping (5-star to 1-star) */
+    readonly ratingDistribution: {
+        readonly "5": "chart-3";
+        readonly "4": "chart-1";
+        readonly "3": "chart-4";
+        readonly "2": "chart-5";
+        readonly "1": "chart-5";
+    };
+    /** Colors for positive/growth metrics */
+    readonly positiveMetrics: readonly ["chart-1", "chart-3", "chart-6"];
+    /** Colors for negative/decline metrics */
+    readonly negativeMetrics: readonly ["chart-5", "chart-4", "chart-8"];
+    /** Comparison pairs (e.g., this period vs last period) */
+    readonly comparisonPairs: {
+        readonly current: "chart-1";
+        readonly previous: "chart-4";
+    };
+    /** Axis styling (Recharts) */
+    readonly axisStyle: {
+        readonly tickLine: false;
+        readonly axisLine: false;
+        readonly tick: {
+            readonly fill: "hsl(var(--muted-foreground))";
+            readonly fontSize: 12;
+        };
+        readonly tickMargin: 8;
+    };
+    /** Y-axis specific */
+    readonly yAxisStyle: {
+        readonly tickLine: false;
+        readonly axisLine: false;
+        readonly tick: {
+            readonly fill: "hsl(var(--muted-foreground))";
+            readonly fontSize: 12;
+        };
+        readonly width: 40;
+    };
+    /** X-axis specific */
+    readonly xAxisStyle: {
+        readonly tickLine: false;
+        readonly axisLine: false;
+        readonly tick: {
+            readonly fill: "hsl(var(--muted-foreground))";
+            readonly fontSize: 12;
+        };
+        readonly height: 40;
+    };
+    /** Bar chart corner radius */
+    readonly barRadius: [number, number, number, number];
+    /** Grid styling */
+    readonly gridStyle: {
+        readonly stroke: "hsl(var(--border))";
+        readonly strokeDasharray: "3 3";
+    };
+    /** Tooltip styling */
+    readonly tooltipStyle: {
+        readonly contentStyle: {
+            readonly backgroundColor: "hsl(var(--popover))";
+            readonly border: "1px solid hsl(var(--border))";
+            readonly borderRadius: "6px";
+            readonly boxShadow: "var(--card-shadow)";
+        };
+        readonly labelStyle: {
+            readonly fontWeight: 600;
+            readonly marginBottom: 4;
+        };
+    };
+    /** Legend styling */
+    readonly legendStyle: {
+        readonly iconType: "circle";
+        readonly iconSize: 8;
+        readonly wrapperStyle: {
+            readonly paddingTop: 16;
+        };
+    };
+    /** Chart container sizing */
+    readonly containerSizing: {
+        /** Small chart (sparkline, mini) */
+        readonly small: {
+            readonly height: 100;
+        };
+        /** Medium chart (card) */
+        readonly medium: {
+            readonly height: 200;
+        };
+        /** Large chart (main view) */
+        readonly large: {
+            readonly height: 300;
+        };
+        /** Full height (dashboard) */
+        readonly full: {
+            readonly height: 400;
+        };
+    };
+    /** Margin presets */
+    readonly margins: {
+        /** No labels */
+        readonly none: {
+            readonly top: 0;
+            readonly right: 0;
+            readonly bottom: 0;
+            readonly left: 0;
+        };
+        /** With axis labels */
+        readonly withAxis: {
+            readonly top: 10;
+            readonly right: 10;
+            readonly bottom: 30;
+            readonly left: 40;
+        };
+        /** With legend */
+        readonly withLegend: {
+            readonly top: 10;
+            readonly right: 10;
+            readonly bottom: 50;
+            readonly left: 40;
+        };
+    };
+    /** Semantic data series names */
+    readonly semanticSeries: {
+        readonly revenue: {
+            readonly color: "chart-1";
+            readonly label: "Revenue";
+        };
+        readonly growth: {
+            readonly color: "chart-3";
+            readonly label: "Growth";
+        };
+        readonly decline: {
+            readonly color: "chart-5";
+            readonly label: "Decline";
+        };
+        readonly baseline: {
+            readonly color: "chart-4";
+            readonly label: "Baseline";
+        };
+        readonly target: {
+            readonly color: "chart-2";
+            readonly label: "Target";
+        };
+    };
+};
+type ChartPatterns = typeof chartPatterns;
+
+declare const modalPatterns: {
+    readonly sizes: {
+        /** Small dialogs (simple confirm, single field) */
+        readonly small: "max-w-sm";
+        /** Default dialogs (forms, content) */
+        readonly default: "max-w-lg";
+        /** Large dialogs (complex forms, multi-step) */
+        readonly large: "max-w-2xl";
+        /** Extra large (previews, rich content) */
+        readonly xl: "max-w-3xl";
+        /** Full width (tables, complex layouts) */
+        readonly full: "max-w-4xl";
+    };
+    /** Header with icon (for important dialogs) */
+    readonly headerWithIcon: {
+        /** Icon container base classes */
+        readonly iconContainer: "size-12 rounded-full flex items-center justify-center mb-4";
+        /** Positive/success icon background */
+        readonly iconPositive: "bg-yellow-100 text-yellow-600";
+        /** Info icon background */
+        readonly iconInfo: "bg-blue-100 text-blue-600";
+        /** Destructive/warning icon background */
+        readonly iconDestructive: "bg-red-100 text-red-600";
+        /** Success icon background */
+        readonly iconSuccess: "bg-green-100 text-green-600";
+        /** Icon size inside container */
+        readonly iconSize: "h-6 w-6";
+    };
+    /** Footer patterns */
+    readonly footer: {
+        /** Standard alignment */
+        readonly alignment: "flex justify-end gap-2";
+        /** Cancel button comes first (left) */
+        readonly cancelFirst: true;
+        /** Destructive actions */
+        readonly destructive: {
+            readonly cancelVariant: "outline";
+            readonly actionVariant: "destructive";
+        };
+        /** Standard actions */
+        readonly standard: {
+            readonly cancelVariant: "outline";
+            readonly actionVariant: "default";
+        };
+    };
+    /** Mobile considerations */
+    readonly mobile: {
+        /** Dialog content height constraint */
+        readonly dialogHeight: "max-h-[90vh] overflow-y-auto";
+        /** Bottom sheet height */
+        readonly bottomSheetHeight: "h-auto max-h-[80vh]";
+        /** Full screen dialog */
+        readonly fullScreen: "fixed inset-0 max-w-none rounded-none";
+    };
+    /** Sheet-specific patterns */
+    readonly sheet: {
+        /** Right panel (default) - detail views */
+        readonly right: {
+            readonly side: "right";
+            readonly width: "w-[400px] sm:max-w-[540px]";
+        };
+        /** Left panel - mobile navigation */
+        readonly left: {
+            readonly side: "left";
+            readonly width: "w-[300px] sm:max-w-[400px]";
+        };
+        /** Bottom panel - mobile actions */
+        readonly bottom: {
+            readonly side: "bottom";
+            readonly height: "h-auto max-h-[80vh]";
+            readonly rounded: "rounded-t-xl";
+        };
+    };
+    /** AlertDialog specific (destructive confirmations) */
+    readonly alertDialog: {
+        /** Header: title + description only. NO icons, NO decoration */
+        readonly headerRule: "Title and description text only";
+        /** Footer button order */
+        readonly buttonOrder: readonly ["AlertDialogCancel", "AlertDialogAction"];
+        /** Action button for destructive */
+        readonly destructiveAction: {
+            readonly variant: "destructive";
+            readonly text: "Delete";
+        };
+        /** Standard messaging */
+        readonly messaging: {
+            readonly title: "Action verb + object (e.g., 'Delete this item?')";
+            readonly description: "Consequence explanation (e.g., 'This action cannot be undone.')";
+        };
+    };
+    /** Common dialog content patterns */
+    readonly contentPatterns: {
+        /** Form dialog */
+        readonly form: {
+            readonly spacing: "space-y-4";
+            readonly footerSpacing: "pt-4";
+        };
+        /** Confirmation dialog */
+        readonly confirmation: {
+            readonly textAlign: "text-center";
+            readonly spacing: "space-y-2";
+        };
+        /** Detail/preview dialog */
+        readonly detail: {
+            readonly maxHeight: "max-h-[70vh]";
+            readonly overflow: "overflow-y-auto";
+        };
+    };
+    /** Animation timing */
+    readonly animation: {
+        /** Dialog fade/scale */
+        readonly dialog: "duration-200";
+        /** Sheet slide */
+        readonly sheet: "duration-300";
+        /** Overlay fade */
+        readonly overlay: "duration-200";
+    };
+};
+type ModalPatterns = typeof modalPatterns;
+
+declare const iconMappings: {
+    /** Action icons - for buttons and interactive elements */
+    readonly actions: {
+        readonly edit: "Pencil";
+        readonly delete: "Trash2";
+        readonly add: "Plus";
+        readonly create: "Plus";
+        readonly close: "X";
+        readonly cancel: "X";
+        readonly menu: "MoreVertical";
+        readonly menuHorizontal: "MoreHorizontal";
+        readonly settings: "Settings";
+        readonly copy: "Copy";
+        readonly duplicate: "Copy";
+        readonly download: "Download";
+        readonly upload: "Upload";
+        readonly refresh: "RefreshCw";
+        readonly save: "Save";
+        readonly send: "Send";
+        readonly search: "Search";
+        readonly filter: "Filter";
+        readonly sort: "ArrowUpDown";
+        readonly archive: "Archive";
+        readonly restore: "ArchiveRestore";
+        readonly undo: "Undo2";
+        readonly redo: "Redo2";
+        readonly print: "Printer";
+        readonly export: "FileDown";
+        readonly import: "FileUp";
+    };
+    /** Navigation icons */
+    readonly navigation: {
+        readonly back: "ArrowLeft";
+        readonly forward: "ArrowRight";
+        readonly up: "ArrowUp";
+        readonly down: "ArrowDown";
+        readonly external: "ExternalLink";
+        readonly expand: "ChevronDown";
+        readonly collapse: "ChevronUp";
+        readonly chevronLeft: "ChevronLeft";
+        readonly chevronRight: "ChevronRight";
+        readonly home: "Home";
+        readonly menu: "Menu";
+        readonly sidebar: "PanelLeft";
+        readonly grid: "LayoutGrid";
+        readonly list: "List";
+    };
+    /** Status icons */
+    readonly status: {
+        readonly success: "CheckCircle";
+        readonly check: "Check";
+        readonly warning: "AlertTriangle";
+        readonly error: "AlertCircle";
+        readonly info: "Info";
+        readonly loading: "Loader2";
+        readonly pending: "Clock";
+        readonly scheduled: "CalendarClock";
+        readonly draft: "FileEdit";
+        readonly active: "CircleDot";
+        readonly inactive: "Circle";
+        readonly verified: "BadgeCheck";
+        readonly locked: "Lock";
+        readonly unlocked: "Unlock";
+        readonly visible: "Eye";
+        readonly hidden: "EyeOff";
+    };
+    /** Domain-specific icons */
+    readonly domain: {
+        readonly calendar: "Calendar";
+        readonly date: "Calendar";
+        readonly time: "Clock";
+        readonly location: "MapPin";
+        readonly address: "MapPin";
+        readonly team: "Users";
+        readonly user: "User";
+        readonly profile: "UserCircle";
+        readonly email: "Mail";
+        readonly phone: "Phone";
+        readonly money: "DollarSign";
+        readonly payment: "CreditCard";
+        readonly invoice: "Receipt";
+        readonly rating: "Star";
+        readonly favorite: "Heart";
+        readonly bookmark: "Bookmark";
+        readonly share: "Share2";
+        readonly link: "Link";
+        readonly attachment: "Paperclip";
+        readonly image: "Image";
+        readonly file: "File";
+        readonly folder: "Folder";
+        readonly document: "FileText";
+        readonly chart: "BarChart3";
+        readonly analytics: "TrendingUp";
+        readonly dashboard: "LayoutDashboard";
+        readonly notification: "Bell";
+        readonly message: "MessageSquare";
+        readonly comment: "MessageCircle";
+        readonly tag: "Tag";
+        readonly category: "Folder";
+        readonly partner: "Building2";
+        readonly company: "Building";
+        readonly store: "Store";
+        readonly product: "Package";
+        readonly inventory: "Boxes";
+        readonly order: "ShoppingCart";
+        readonly offer: "Ticket";
+        readonly event: "CalendarDays";
+        readonly campaign: "Megaphone";
+    };
+    /** Form icons */
+    readonly form: {
+        readonly required: "Asterisk";
+        readonly optional: "Circle";
+        readonly help: "HelpCircle";
+        readonly clear: "XCircle";
+        readonly show: "Eye";
+        readonly hide: "EyeOff";
+        readonly increment: "Plus";
+        readonly decrement: "Minus";
+    };
+    /** Empty state icons */
+    readonly emptyStates: {
+        readonly noData: "Inbox";
+        readonly noResults: "SearchX";
+        readonly noItems: "PackageOpen";
+        readonly noContent: "FileX";
+        readonly noAccess: "ShieldX";
+        readonly error: "AlertOctagon";
+        readonly maintenance: "Wrench";
+        readonly construction: "Construction";
+    };
+};
+declare const getIcon: (category: keyof typeof iconMappings, key: string) => string | undefined;
+type IconMappings = typeof iconMappings;
+
+declare const badgeMappings: {
+    /** Status badge variants */
+    readonly status: {
+        readonly active: "success";
+        readonly live: "success";
+        readonly complete: "success";
+        readonly completed: "success";
+        readonly approved: "success";
+        readonly verified: "success";
+        readonly published: "success";
+        readonly online: "success";
+        readonly pending: "warning";
+        readonly pendingReview: "warning";
+        readonly inReview: "warning";
+        readonly processing: "warning";
+        readonly scheduled: "warning";
+        readonly draft: "secondary";
+        readonly inProgress: "secondary";
+        readonly paused: "secondary";
+        readonly inactive: "secondary";
+        readonly offline: "secondary";
+        readonly error: "destructive";
+        readonly failed: "destructive";
+        readonly cancelled: "destructive";
+        readonly rejected: "destructive";
+        readonly expired: "destructive";
+        readonly overdue: "destructive";
+        readonly archived: "outline";
+        readonly closed: "outline";
+        readonly ended: "outline";
+        readonly past: "outline";
+    };
+    /** Generic tag styling */
+    readonly tags: "outline";
+    /** Premium/VIP styling (use CSS class, not Badge component) */
+    readonly premium: {
+        readonly className: "badge-premium";
+        readonly note: "Use badge-premium CSS class, not Badge component variant";
+    };
+    /** Badge with shadow for floating effect */
+    readonly floating: {
+        readonly additionalClass: "shadow-tag";
+        readonly note: "Add shadow-tag class to Badge for floating effect";
+    };
+};
+declare const getBadgeVariant: (status: string) => string;
+declare const statusLabels: Record<string, string>;
+type BadgeMappings = typeof badgeMappings;
+
+/**
+ * Complete Offline Design System
+ *
+ * Use this object for LLM consumption - it contains all design decisions,
+ * patterns, and component guidance in a single queryable structure.
+ *
+ * @example
+ * // What color for positive feedback?
+ * offlineDesignSystem.semantics.colors.feedback.positive // "chart-3"
+ *
+ * // What component for delete confirmation?
+ * offlineDesignSystem.components.decisions.modals.confirmDestructive // "AlertDialog"
+ *
+ * // What typography for stat values?
+ * offlineDesignSystem.semantics.typography.statValueLarge // "display-medium"
+ *
+ * // What icon for delete action?
+ * offlineDesignSystem.mappings.icons.actions.delete // "Trash2"
+ *
+ * // What spacing between form fields?
+ * offlineDesignSystem.patterns.layout.forms.fieldGap // "space-y-4"
+ */
+declare const offlineDesignSystem: {
+    /** Package metadata */
+    readonly meta: {
+        readonly name: "@offlinemediainc/offline-ui";
+        readonly version: "0.2.0";
+        readonly description: "Offline Media Design System - LLM-friendly design decisions and patterns";
+    };
+    /** Quick reference for most common decisions */
+    readonly quickReference: {
+        readonly colors: {
+            readonly primary: "#191919 (gray-900) - buttons, text, UI elements";
+            readonly accent: "#de8e0f (yellow-400) - ACCENT ONLY, never buttons";
+            readonly link: "#004fff (blue-400) - clickable text only";
+            readonly success: "#099250 (chart-3) - positive feedback";
+            readonly error: "#d31a0c (chart-5) - errors, destructive";
+        };
+        readonly fonts: {
+            readonly display: "Cabinet Grotesk - hero headlines only";
+            readonly body: "Satoshi - everything else";
+            readonly mono: "DM Mono - stats and numbers";
+        };
+        readonly shadows: {
+            readonly card: "shadow-card - default for containers";
+            readonly floating: "shadow-tag - floating badges";
+            readonly modal: "shadow-elevated - dialogs, popovers";
+        };
+        readonly components: {
+            readonly formModal: "Dialog";
+            readonly destructiveConfirm: "AlertDialog";
+            readonly sidePanel: "Sheet side=right";
+            readonly listItem: "Item";
+            readonly toast: "toast.success / toast.error";
+        };
+    };
+    /** Semantic color and typography mappings */
+    readonly semantics: {
+        readonly colors: {
+            readonly brand: {
+                readonly primary: "yellow-400";
+                readonly interactive: "blue-400";
+            };
+            readonly text: {
+                readonly primary: "gray-900";
+                readonly secondary: "gray-600";
+                readonly muted: "gray-500";
+                readonly onDark: "white";
+                readonly link: "blue-400";
+                readonly positive: "semantic-success500";
+                readonly negative: "red-400";
+            };
+            readonly surface: {
+                readonly default: "white";
+                readonly muted: "gray-50";
+                readonly elevated: "white + shadow-elevated";
+            };
+            readonly border: {
+                readonly default: "gray-200";
+                readonly strong: "gray-300";
+                readonly interactive: "yellow-400";
+                readonly focus: "gray-900";
+            };
+            readonly feedback: {
+                readonly positive: "chart-3";
+                readonly negative: "chart-5";
+                readonly warning: "yellow-400";
+                readonly neutral: "chart-4";
+            };
+        };
+        readonly colorHexValues: {
+            readonly "yellow-25": "#fff2d8";
+            readonly "yellow-50": "#ffe9bd";
+            readonly "yellow-100": "#ffd386";
+            readonly "yellow-200": "#ffbd54";
+            readonly "yellow-300": "#f0a52c";
+            readonly "yellow-400": "#de8e0f";
+            readonly "yellow-500": "#c57900";
+            readonly "yellow-600": "#a76700";
+            readonly "yellow-700": "#835100";
+            readonly "yellow-800": "#5c3900";
+            readonly "yellow-900": "#331f00";
+            readonly "blue-25": "#d8e7ff";
+            readonly "blue-50": "#bed6ff";
+            readonly "blue-100": "#85afff";
+            readonly "blue-200": "#508bff";
+            readonly "blue-300": "#236aff";
+            readonly "blue-400": "#004fff";
+            readonly "blue-500": "#0046e0";
+            readonly "blue-600": "#003bbb";
+            readonly "blue-700": "#002e91";
+            readonly "blue-800": "#001f63";
+            readonly "blue-900": "#001033";
+            readonly "gray-25": "#f2f2f2";
+            readonly "gray-50": "#ececec";
+            readonly "gray-100": "#dfdfdf";
+            readonly "gray-200": "#c6c6c6";
+            readonly "gray-300": "#aeaeae";
+            readonly "gray-400": "#959595";
+            readonly "gray-500": "#7c7c7c";
+            readonly "gray-600": "#636363";
+            readonly "gray-700": "#4a4a4a";
+            readonly "gray-800": "#323232";
+            readonly "gray-900": "#191919";
+            readonly "red-400": "#d31a0c";
+            readonly "semantic-success500": "#099250";
+            readonly "chart-1": "#de8e0f";
+            readonly "chart-2": "#004fff";
+            readonly "chart-3": "#099250";
+            readonly "chart-4": "#636363";
+            readonly "chart-5": "#d31a0c";
+            readonly "chart-6": "#a76700";
+            readonly "chart-7": "#003bbb";
+            readonly "chart-8": "#959595";
+        };
+        readonly typography: {
+            readonly pageTitle: "display-small";
+            readonly sectionHeading: "headline-medium";
+            readonly cardTitle: "headline-small";
+            readonly statValueLarge: "display-medium";
+            readonly statValueSmall: "display-small";
+            readonly statLabel: "body-small";
+            readonly bodyDefault: "body-medium";
+            readonly bodySecondary: "body-small";
+            readonly formLabel: "label-medium";
+            readonly formHelper: "body-small text-muted";
+            readonly formError: "body-small text-negative";
+            readonly buttonText: "label-medium";
+            readonly navItem: "body-medium";
+            readonly badgeText: "label-small";
+            readonly tableHeader: "label-medium";
+            readonly tableCell: "body-medium";
+            readonly timestamp: "body-small text-muted";
+            readonly emptyStateTitle: "headline-small";
+            readonly emptyStateDescription: "body-medium text-muted";
+            readonly dialogTitle: "headline-medium";
+            readonly dialogDescription: "body-medium text-muted";
+            readonly sidebarLabel: "nav-label";
+            readonly sidebarItem: "body-medium";
+            readonly breadcrumbItem: "body-small";
+            readonly breadcrumbCurrent: "body-small text-muted";
+        };
+        readonly fontFamilies: {
+            readonly display: "var(--font-cabinet-grotesk), var(--font-satoshi), sans-serif";
+            readonly body: "var(--font-satoshi), sans-serif";
+            readonly mono: "var(--font-dm-mono), 'DM Mono', monospace";
+        };
+        readonly typographyScale: {
+            readonly "display-large": {
+                readonly size: "36px";
+                readonly lineHeight: "100%";
+                readonly weight: 800;
+                readonly font: "Cabinet Grotesk";
+            };
+            readonly "display-medium": {
+                readonly size: "32px";
+                readonly lineHeight: "100%";
+                readonly weight: 800;
+                readonly font: "Cabinet Grotesk";
+            };
+            readonly "display-small": {
+                readonly size: "29px";
+                readonly lineHeight: "100%";
+                readonly weight: 800;
+                readonly font: "Cabinet Grotesk";
+            };
+            readonly "headline-large": {
+                readonly size: "26px";
+                readonly lineHeight: "32px";
+                readonly weight: 700;
+                readonly font: "Satoshi";
+            };
+            readonly "headline-medium": {
+                readonly size: "23px";
+                readonly lineHeight: "28px";
+                readonly weight: 700;
+                readonly font: "Satoshi";
+            };
+            readonly "headline-small": {
+                readonly size: "20px";
+                readonly lineHeight: "24px";
+                readonly weight: 700;
+                readonly font: "Satoshi";
+            };
+            readonly "title-large": {
+                readonly size: "18px";
+                readonly lineHeight: "22px";
+                readonly weight: 700;
+                readonly font: "Satoshi";
+            };
+            readonly "title-medium": {
+                readonly size: "16px";
+                readonly lineHeight: "20px";
+                readonly weight: 700;
+                readonly font: "Satoshi";
+            };
+            readonly "title-small": {
+                readonly size: "14px";
+                readonly lineHeight: "18px";
+                readonly weight: 700;
+                readonly font: "Satoshi";
+            };
+            readonly "body-large": {
+                readonly size: "16px";
+                readonly lineHeight: "24px";
+                readonly weight: 500;
+                readonly font: "Satoshi";
+            };
+            readonly "body-medium": {
+                readonly size: "14px";
+                readonly lineHeight: "20px";
+                readonly weight: 500;
+                readonly font: "Satoshi";
+            };
+            readonly "body-small": {
+                readonly size: "12px";
+                readonly lineHeight: "16px";
+                readonly weight: 500;
+                readonly font: "Satoshi";
+            };
+            readonly "body-x-small": {
+                readonly size: "10px";
+                readonly lineHeight: "14px";
+                readonly weight: 500;
+                readonly font: "Satoshi";
+            };
+            readonly "label-large": {
+                readonly size: "14px";
+                readonly lineHeight: "18px";
+                readonly weight: 700;
+                readonly font: "Satoshi";
+            };
+            readonly "label-medium": {
+                readonly size: "12px";
+                readonly lineHeight: "16px";
+                readonly weight: 700;
+                readonly font: "Satoshi";
+            };
+            readonly "label-small": {
+                readonly size: "10px";
+                readonly lineHeight: "14px";
+                readonly weight: 700;
+                readonly font: "Satoshi";
+            };
+            readonly "stat-mono": {
+                readonly weight: 500;
+                readonly letterSpacing: "0.04em";
+                readonly font: "DM Mono";
+            };
+        };
+    };
+    /** Component decisions and metadata */
+    readonly components: {
+        readonly decisions: {
+            readonly lists: {
+                readonly clickableRow: "Item";
+                readonly dataTable: "Table";
+                readonly cardGrid: "Card in grid";
+                readonly simpleList: "ul with body-medium";
+                readonly descriptionList: "dl with label-medium dt and body-medium dd";
+            };
+            readonly feedback: {
+                readonly actionSuccess: "toast.success";
+                readonly actionError: "toast.error";
+                readonly inlineWarning: "Alert variant=warning";
+                readonly inlineError: "Alert variant=destructive";
+                readonly fieldError: "body-small text-negative below input";
+                readonly inlineInfo: "Alert variant=default";
+            };
+            readonly modals: {
+                readonly formEntry: "Dialog";
+                readonly confirmDestructive: "AlertDialog";
+                readonly sidePanel: "Sheet side=right";
+                readonly mobileNav: "Sheet side=left";
+                readonly mobileActions: "Sheet side=bottom h-auto max-h-[80vh]";
+                readonly preview: "Dialog or Sheet";
+            };
+            readonly navigation: {
+                readonly primaryNav: "Sidebar";
+                readonly pageTabs: "Tabs";
+                readonly breadcrumbs: "Breadcrumb";
+                readonly sectionHeader: "Breadcrumb + headline";
+                readonly dropdownNav: "DropdownMenu";
+            };
+            readonly selection: {
+                readonly singleFromFew: "radio group";
+                readonly singleFromMany: "Select";
+                readonly multiple: "Checkbox group";
+                readonly toggle: "single Checkbox";
+                readonly segmented: "Tabs variant=pill";
+            };
+            readonly data: {
+                readonly status: "Badge";
+                readonly progress: "Progress";
+                readonly avatar: "Avatar";
+                readonly chart: "Chart (recharts)";
+                readonly skeleton: "Skeleton";
+            };
+            readonly forms: {
+                readonly textInput: "Input";
+                readonly textArea: "Textarea";
+                readonly typedInput: "Input type=email|password|number";
+                readonly otpInput: "InputOTP";
+                readonly label: "Label htmlFor={id}";
+                readonly checkbox: "Checkbox + Label";
+            };
+            readonly layout: {
+                readonly card: "Card";
+                readonly accordion: "Accordion";
+                readonly collapsible: "Collapsible";
+                readonly separator: "Separator";
+                readonly tooltip: "Tooltip";
+            };
+        };
+        readonly registry: Record<string, ComponentMeta>;
+        readonly approved: string[];
+        readonly draft: string[];
+    };
+    /** Layout, state, and interaction patterns */
+    readonly patterns: {
+        readonly layout: {
+            readonly page: {
+                readonly maxWidth: "max-w-4xl";
+                readonly maxWidthWide: "max-w-6xl";
+                readonly padding: "px-4 py-6";
+                readonly sectionGap: "space-y-8";
+                readonly wrapper: "mx-auto px-4 py-6";
+            };
+            readonly cards: {
+                readonly padding: "p-6";
+                readonly paddingCompact: "p-4";
+                readonly gap: "gap-4";
+                readonly grid2col: "grid grid-cols-1 md:grid-cols-2 gap-4";
+                readonly grid3col: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4";
+                readonly grid4col: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4";
+                readonly stack: "flex flex-col gap-4";
+            };
+            readonly forms: {
+                readonly fieldGap: "space-y-4";
+                readonly labelGap: "mb-2";
+                readonly helperGap: "mt-1";
+                readonly buttonGap: "gap-2";
+                readonly sectionGap: "space-y-6";
+                readonly container: "space-y-4";
+                readonly actions: "flex justify-end gap-2 pt-4";
+                readonly fieldFull: "w-full";
+                readonly fieldPair: "grid grid-cols-2 gap-4";
+            };
+            readonly inline: {
+                readonly iconText: "inline-flex items-center gap-2";
+                readonly badges: "flex flex-wrap gap-2";
+                readonly buttons: "flex items-center gap-2";
+                readonly tags: "flex flex-wrap gap-1";
+            };
+            readonly header: {
+                readonly pageHeader: "flex items-center justify-between mb-6";
+                readonly sectionHeader: "flex items-center justify-between mb-4";
+                readonly cardHeader: "flex items-center justify-between";
+            };
+            readonly sidebar: {
+                readonly width: "w-64";
+                readonly widthCollapsed: "w-16";
+                readonly contentWithSidebar: "ml-64";
+                readonly contentMobile: "ml-0";
+            };
+            readonly responsive: {
+                readonly hideMobile: "hidden md:block";
+                readonly showMobile: "md:hidden";
+                readonly stackToRow: "flex flex-col md:flex-row";
+                readonly fullToAuto: "w-full md:w-auto";
+            };
+        };
+        readonly states: {
+            readonly loading: {
+                readonly page: "Skeleton matching page structure";
+                readonly card: "Skeleton matching card structure";
+                readonly button: {
+                    readonly icon: "Loader2";
+                    readonly text: "Loading...";
+                    readonly classes: "disabled opacity-50";
+                    readonly iconClasses: "animate-spin mr-2 h-4 w-4";
+                };
+                readonly inline: {
+                    readonly icon: "Loader2";
+                    readonly classes: "animate-spin h-4 w-4";
+                };
+                readonly tableRow: "Skeleton h-12 w-full";
+                readonly listItem: "Skeleton h-16 w-full";
+                readonly avatar: "Skeleton h-10 w-10 rounded-full";
+            };
+            readonly empty: {
+                readonly structure: "flex flex-col items-center justify-center py-12 text-center";
+                readonly icon: {
+                    readonly classes: "h-12 w-12 text-muted-foreground mb-4";
+                    readonly note: "Use relevant lucide icon for context";
+                };
+                readonly title: {
+                    readonly classes: "headline-small mb-2";
+                };
+                readonly description: {
+                    readonly classes: "body-medium text-muted-foreground max-w-sm mx-auto mb-4";
+                };
+                readonly action: {
+                    readonly variant: "outline";
+                    readonly note: "Optional - only if user can take action to fill empty state";
+                };
+            };
+            readonly error: {
+                readonly page: {
+                    readonly component: "Alert";
+                    readonly variant: "destructive";
+                    readonly includeRetry: true;
+                    readonly classes: "max-w-lg mx-auto my-8";
+                };
+                readonly inline: {
+                    readonly classes: "body-small text-destructive";
+                };
+                readonly field: {
+                    readonly inputClasses: "border-destructive focus:ring-destructive";
+                    readonly messageClasses: "body-small text-destructive mt-1";
+                };
+                readonly banner: {
+                    readonly component: "Alert";
+                    readonly variant: "destructive";
+                    readonly classes: "mb-4";
+                };
+            };
+            readonly disabled: {
+                readonly opacity: "opacity-50";
+                readonly cursor: "cursor-not-allowed";
+                readonly interaction: "pointer-events-none";
+                readonly combined: "opacity-50 cursor-not-allowed pointer-events-none";
+            };
+            readonly success: {
+                readonly toast: {
+                    readonly method: "toast.success";
+                    readonly duration: 3000;
+                };
+                readonly inline: {
+                    readonly classes: "body-small text-[var(--semantic-success500)]";
+                };
+                readonly banner: {
+                    readonly component: "Alert";
+                    readonly variant: "default";
+                    readonly icon: "CheckCircle";
+                    readonly classes: "border-[var(--semantic-success500)] bg-green-50";
+                };
+            };
+            readonly warning: {
+                readonly banner: {
+                    readonly component: "Alert";
+                    readonly variant: "warning";
+                    readonly icon: "AlertTriangle";
+                };
+                readonly inline: {
+                    readonly classes: "body-small text-[var(--colors-yellow-600)]";
+                };
+            };
+        };
+        readonly interactions: {
+            readonly clickableCard: {
+                readonly default: "shadow-card transition-shadow duration-200";
+                readonly hover: "hover:shadow-elevated";
+                readonly cursor: "cursor-pointer";
+                readonly combined: "shadow-card hover:shadow-elevated cursor-pointer transition-shadow duration-200";
+                readonly withBorder: "border border-gray-200 hover:border-gray-300 cursor-pointer transition-colors";
+            };
+            readonly link: {
+                readonly default: "text-[var(--colors-blue-400)] underline-offset-4";
+                readonly hover: "hover:underline";
+                readonly combined: "text-[var(--colors-blue-400)] underline-offset-4 hover:underline";
+                readonly nav: "text-[var(--colors-blue-400)] hover:underline underline-offset-4";
+            };
+            readonly iconButton: {
+                readonly default: "p-2 rounded-md transition-colors";
+                readonly hover: "hover:bg-muted";
+                readonly combined: "p-2 rounded-md hover:bg-muted transition-colors";
+                readonly destructive: "p-2 rounded-md hover:bg-destructive/10 hover:text-destructive transition-colors";
+            };
+            readonly tableRow: {
+                readonly default: "transition-colors";
+                readonly hover: "hover:bg-muted/50";
+                readonly combined: "hover:bg-muted/50 transition-colors";
+                readonly clickable: "hover:bg-muted/50 cursor-pointer transition-colors";
+            };
+            readonly listItem: {
+                readonly default: "transition-colors";
+                readonly hover: "hover:bg-muted/50";
+                readonly active: "bg-muted";
+                readonly combined: "hover:bg-muted/50 cursor-pointer transition-colors";
+            };
+            readonly button: {
+                readonly focus: "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";
+                readonly active: "active:scale-[0.98]";
+                readonly transition: "transition-colors";
+            };
+            readonly input: {
+                readonly default: "border border-gray-200 transition-colors";
+                readonly hover: "hover:border-gray-300";
+                readonly focus: "focus:border-gray-900 focus:ring-2 focus:ring-gray-900/10";
+                readonly error: "border-destructive focus:border-destructive focus:ring-destructive/10";
+                readonly combined: "border border-gray-200 hover:border-gray-300 focus:border-gray-900 focus:ring-2 focus:ring-gray-900/10 transition-colors";
+            };
+            readonly menuItem: {
+                readonly default: "transition-colors rounded-sm";
+                readonly hover: "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground";
+                readonly combined: "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground rounded-sm transition-colors";
+            };
+            readonly sidebarItem: {
+                readonly default: "transition-colors rounded-md";
+                readonly hover: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground";
+                readonly active: "bg-sidebar-accent text-sidebar-accent-foreground";
+                readonly combined: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground rounded-md transition-colors";
+            };
+            readonly transitions: {
+                readonly fast: "transition-colors duration-150";
+                readonly medium: "transition-all duration-200";
+                readonly slow: "transition-all duration-300";
+                readonly ease: {
+                    readonly default: "ease-in-out";
+                    readonly in: "ease-in";
+                    readonly out: "ease-out";
+                    readonly bounce: "cubic-bezier(0.68, -0.55, 0.265, 1.55)";
+                };
+            };
+        };
+        readonly charts: {
+            readonly colorPriority: readonly ["chart-1", "chart-3", "chart-5", "chart-4", "chart-6", "chart-8"];
+            readonly ratingDistribution: {
+                readonly "5": "chart-3";
+                readonly "4": "chart-1";
+                readonly "3": "chart-4";
+                readonly "2": "chart-5";
+                readonly "1": "chart-5";
+            };
+            readonly positiveMetrics: readonly ["chart-1", "chart-3", "chart-6"];
+            readonly negativeMetrics: readonly ["chart-5", "chart-4", "chart-8"];
+            readonly comparisonPairs: {
+                readonly current: "chart-1";
+                readonly previous: "chart-4";
+            };
+            readonly axisStyle: {
+                readonly tickLine: false;
+                readonly axisLine: false;
+                readonly tick: {
+                    readonly fill: "hsl(var(--muted-foreground))";
+                    readonly fontSize: 12;
+                };
+                readonly tickMargin: 8;
+            };
+            readonly yAxisStyle: {
+                readonly tickLine: false;
+                readonly axisLine: false;
+                readonly tick: {
+                    readonly fill: "hsl(var(--muted-foreground))";
+                    readonly fontSize: 12;
+                };
+                readonly width: 40;
+            };
+            readonly xAxisStyle: {
+                readonly tickLine: false;
+                readonly axisLine: false;
+                readonly tick: {
+                    readonly fill: "hsl(var(--muted-foreground))";
+                    readonly fontSize: 12;
+                };
+                readonly height: 40;
+            };
+            readonly barRadius: [number, number, number, number];
+            readonly gridStyle: {
+                readonly stroke: "hsl(var(--border))";
+                readonly strokeDasharray: "3 3";
+            };
+            readonly tooltipStyle: {
+                readonly contentStyle: {
+                    readonly backgroundColor: "hsl(var(--popover))";
+                    readonly border: "1px solid hsl(var(--border))";
+                    readonly borderRadius: "6px";
+                    readonly boxShadow: "var(--card-shadow)";
+                };
+                readonly labelStyle: {
+                    readonly fontWeight: 600;
+                    readonly marginBottom: 4;
+                };
+            };
+            readonly legendStyle: {
+                readonly iconType: "circle";
+                readonly iconSize: 8;
+                readonly wrapperStyle: {
+                    readonly paddingTop: 16;
+                };
+            };
+            readonly containerSizing: {
+                readonly small: {
+                    readonly height: 100;
+                };
+                readonly medium: {
+                    readonly height: 200;
+                };
+                readonly large: {
+                    readonly height: 300;
+                };
+                readonly full: {
+                    readonly height: 400;
+                };
+            };
+            readonly margins: {
+                readonly none: {
+                    readonly top: 0;
+                    readonly right: 0;
+                    readonly bottom: 0;
+                    readonly left: 0;
+                };
+                readonly withAxis: {
+                    readonly top: 10;
+                    readonly right: 10;
+                    readonly bottom: 30;
+                    readonly left: 40;
+                };
+                readonly withLegend: {
+                    readonly top: 10;
+                    readonly right: 10;
+                    readonly bottom: 50;
+                    readonly left: 40;
+                };
+            };
+            readonly semanticSeries: {
+                readonly revenue: {
+                    readonly color: "chart-1";
+                    readonly label: "Revenue";
+                };
+                readonly growth: {
+                    readonly color: "chart-3";
+                    readonly label: "Growth";
+                };
+                readonly decline: {
+                    readonly color: "chart-5";
+                    readonly label: "Decline";
+                };
+                readonly baseline: {
+                    readonly color: "chart-4";
+                    readonly label: "Baseline";
+                };
+                readonly target: {
+                    readonly color: "chart-2";
+                    readonly label: "Target";
+                };
+            };
+        };
+        readonly modals: {
+            readonly sizes: {
+                readonly small: "max-w-sm";
+                readonly default: "max-w-lg";
+                readonly large: "max-w-2xl";
+                readonly xl: "max-w-3xl";
+                readonly full: "max-w-4xl";
+            };
+            readonly headerWithIcon: {
+                readonly iconContainer: "size-12 rounded-full flex items-center justify-center mb-4";
+                readonly iconPositive: "bg-yellow-100 text-yellow-600";
+                readonly iconInfo: "bg-blue-100 text-blue-600";
+                readonly iconDestructive: "bg-red-100 text-red-600";
+                readonly iconSuccess: "bg-green-100 text-green-600";
+                readonly iconSize: "h-6 w-6";
+            };
+            readonly footer: {
+                readonly alignment: "flex justify-end gap-2";
+                readonly cancelFirst: true;
+                readonly destructive: {
+                    readonly cancelVariant: "outline";
+                    readonly actionVariant: "destructive";
+                };
+                readonly standard: {
+                    readonly cancelVariant: "outline";
+                    readonly actionVariant: "default";
+                };
+            };
+            readonly mobile: {
+                readonly dialogHeight: "max-h-[90vh] overflow-y-auto";
+                readonly bottomSheetHeight: "h-auto max-h-[80vh]";
+                readonly fullScreen: "fixed inset-0 max-w-none rounded-none";
+            };
+            readonly sheet: {
+                readonly right: {
+                    readonly side: "right";
+                    readonly width: "w-[400px] sm:max-w-[540px]";
+                };
+                readonly left: {
+                    readonly side: "left";
+                    readonly width: "w-[300px] sm:max-w-[400px]";
+                };
+                readonly bottom: {
+                    readonly side: "bottom";
+                    readonly height: "h-auto max-h-[80vh]";
+                    readonly rounded: "rounded-t-xl";
+                };
+            };
+            readonly alertDialog: {
+                readonly headerRule: "Title and description text only";
+                readonly buttonOrder: readonly ["AlertDialogCancel", "AlertDialogAction"];
+                readonly destructiveAction: {
+                    readonly variant: "destructive";
+                    readonly text: "Delete";
+                };
+                readonly messaging: {
+                    readonly title: "Action verb + object (e.g., 'Delete this item?')";
+                    readonly description: "Consequence explanation (e.g., 'This action cannot be undone.')";
+                };
+            };
+            readonly contentPatterns: {
+                readonly form: {
+                    readonly spacing: "space-y-4";
+                    readonly footerSpacing: "pt-4";
+                };
+                readonly confirmation: {
+                    readonly textAlign: "text-center";
+                    readonly spacing: "space-y-2";
+                };
+                readonly detail: {
+                    readonly maxHeight: "max-h-[70vh]";
+                    readonly overflow: "overflow-y-auto";
+                };
+            };
+            readonly animation: {
+                readonly dialog: "duration-200";
+                readonly sheet: "duration-300";
+                readonly overlay: "duration-200";
+            };
+        };
+    };
+    /** Icon and badge mappings */
+    readonly mappings: {
+        readonly icons: {
+            readonly actions: {
+                readonly edit: "Pencil";
+                readonly delete: "Trash2";
+                readonly add: "Plus";
+                readonly create: "Plus";
+                readonly close: "X";
+                readonly cancel: "X";
+                readonly menu: "MoreVertical";
+                readonly menuHorizontal: "MoreHorizontal";
+                readonly settings: "Settings";
+                readonly copy: "Copy";
+                readonly duplicate: "Copy";
+                readonly download: "Download";
+                readonly upload: "Upload";
+                readonly refresh: "RefreshCw";
+                readonly save: "Save";
+                readonly send: "Send";
+                readonly search: "Search";
+                readonly filter: "Filter";
+                readonly sort: "ArrowUpDown";
+                readonly archive: "Archive";
+                readonly restore: "ArchiveRestore";
+                readonly undo: "Undo2";
+                readonly redo: "Redo2";
+                readonly print: "Printer";
+                readonly export: "FileDown";
+                readonly import: "FileUp";
+            };
+            readonly navigation: {
+                readonly back: "ArrowLeft";
+                readonly forward: "ArrowRight";
+                readonly up: "ArrowUp";
+                readonly down: "ArrowDown";
+                readonly external: "ExternalLink";
+                readonly expand: "ChevronDown";
+                readonly collapse: "ChevronUp";
+                readonly chevronLeft: "ChevronLeft";
+                readonly chevronRight: "ChevronRight";
+                readonly home: "Home";
+                readonly menu: "Menu";
+                readonly sidebar: "PanelLeft";
+                readonly grid: "LayoutGrid";
+                readonly list: "List";
+            };
+            readonly status: {
+                readonly success: "CheckCircle";
+                readonly check: "Check";
+                readonly warning: "AlertTriangle";
+                readonly error: "AlertCircle";
+                readonly info: "Info";
+                readonly loading: "Loader2";
+                readonly pending: "Clock";
+                readonly scheduled: "CalendarClock";
+                readonly draft: "FileEdit";
+                readonly active: "CircleDot";
+                readonly inactive: "Circle";
+                readonly verified: "BadgeCheck";
+                readonly locked: "Lock";
+                readonly unlocked: "Unlock";
+                readonly visible: "Eye";
+                readonly hidden: "EyeOff";
+            };
+            readonly domain: {
+                readonly calendar: "Calendar";
+                readonly date: "Calendar";
+                readonly time: "Clock";
+                readonly location: "MapPin";
+                readonly address: "MapPin";
+                readonly team: "Users";
+                readonly user: "User";
+                readonly profile: "UserCircle";
+                readonly email: "Mail";
+                readonly phone: "Phone";
+                readonly money: "DollarSign";
+                readonly payment: "CreditCard";
+                readonly invoice: "Receipt";
+                readonly rating: "Star";
+                readonly favorite: "Heart";
+                readonly bookmark: "Bookmark";
+                readonly share: "Share2";
+                readonly link: "Link";
+                readonly attachment: "Paperclip";
+                readonly image: "Image";
+                readonly file: "File";
+                readonly folder: "Folder";
+                readonly document: "FileText";
+                readonly chart: "BarChart3";
+                readonly analytics: "TrendingUp";
+                readonly dashboard: "LayoutDashboard";
+                readonly notification: "Bell";
+                readonly message: "MessageSquare";
+                readonly comment: "MessageCircle";
+                readonly tag: "Tag";
+                readonly category: "Folder";
+                readonly partner: "Building2";
+                readonly company: "Building";
+                readonly store: "Store";
+                readonly product: "Package";
+                readonly inventory: "Boxes";
+                readonly order: "ShoppingCart";
+                readonly offer: "Ticket";
+                readonly event: "CalendarDays";
+                readonly campaign: "Megaphone";
+            };
+            readonly form: {
+                readonly required: "Asterisk";
+                readonly optional: "Circle";
+                readonly help: "HelpCircle";
+                readonly clear: "XCircle";
+                readonly show: "Eye";
+                readonly hide: "EyeOff";
+                readonly increment: "Plus";
+                readonly decrement: "Minus";
+            };
+            readonly emptyStates: {
+                readonly noData: "Inbox";
+                readonly noResults: "SearchX";
+                readonly noItems: "PackageOpen";
+                readonly noContent: "FileX";
+                readonly noAccess: "ShieldX";
+                readonly error: "AlertOctagon";
+                readonly maintenance: "Wrench";
+                readonly construction: "Construction";
+            };
+        };
+        readonly badges: {
+            readonly status: {
+                readonly active: "success";
+                readonly live: "success";
+                readonly complete: "success";
+                readonly completed: "success";
+                readonly approved: "success";
+                readonly verified: "success";
+                readonly published: "success";
+                readonly online: "success";
+                readonly pending: "warning";
+                readonly pendingReview: "warning";
+                readonly inReview: "warning";
+                readonly processing: "warning";
+                readonly scheduled: "warning";
+                readonly draft: "secondary";
+                readonly inProgress: "secondary";
+                readonly paused: "secondary";
+                readonly inactive: "secondary";
+                readonly offline: "secondary";
+                readonly error: "destructive";
+                readonly failed: "destructive";
+                readonly cancelled: "destructive";
+                readonly rejected: "destructive";
+                readonly expired: "destructive";
+                readonly overdue: "destructive";
+                readonly archived: "outline";
+                readonly closed: "outline";
+                readonly ended: "outline";
+                readonly past: "outline";
+            };
+            readonly tags: "outline";
+            readonly premium: {
+                readonly className: "badge-premium";
+                readonly note: "Use badge-premium CSS class, not Badge component variant";
+            };
+            readonly floating: {
+                readonly additionalClass: "shadow-tag";
+                readonly note: "Add shadow-tag class to Badge for floating effect";
+            };
+        };
+        readonly statusLabels: Record<string, string>;
+    };
+    /** Design rules and anti-patterns */
+    readonly rules: {
+        readonly critical: readonly ["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"];
+        readonly guidelines: readonly ["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"];
+        readonly antiPatterns: readonly [{
+            readonly bad: "Yellow buttons";
+            readonly fix: "Use Button variant='default' (black)";
+        }, {
+            readonly bad: "Home icon in breadcrumb";
+            readonly fix: "Use 'Home' text instead";
+        }, {
+            readonly bad: "Decorated AlertDialog headers";
+            readonly fix: "Title + description only";
+        }, {
+            readonly bad: "Missing input labels";
+            readonly fix: "Always pair Input with Label htmlFor";
+        }, {
+            readonly bad: "Hardcoded colors";
+            readonly fix: "Use CSS variables or semantic classes";
+        }, {
+            readonly bad: "Overusing premium styling";
+            readonly fix: "Reserve for actual premium content";
+        }];
+    };
+};
+type OfflineDesignSystem = typeof offlineDesignSystem;
+
+export { type BadgeMappings, type BadgeVariant, type ButtonSize, type ButtonVariant, type ChartPatterns, type ColorHexValues, type ColorToken, type ComponentDecisions, type ComponentMeta, type ComponentRegistry, type FontFamilyDecisions, type IconMappings, type InteractionPatterns, type LayoutPatterns, type LucideIconName, type ModalPatterns, type OfflineDesignSystem, type SemanticColors, type ShadowLevel, type StatePatterns, type TailwindClass, type TypographyClass, type TypographyDecisions, type TypographyScale, approvedComponents, badgeMappings, chartPatterns, colorHexValues, componentDecisions, componentRegistry, draftComponents, fontFamilyDecisions, getBadgeVariant, getIcon, iconMappings, interactionPatterns, layoutPatterns, modalPatterns, offlineDesignSystem, semanticColors, statePatterns, statusLabels, typographyDecisions, typographyScale };