@litelens/design-system 1.0.3

package/dist/chunk-QUNCRUSO.js

@@ -0,0 +1,12 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+// src/utils/common.ts
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function clamp(v, min, max) {
+  return Math.max(min, Math.min(max, v));
+}
+
+export { clamp, cn };

package/dist/chunk-TLJXC46A.js

@@ -0,0 +1 @@
+

package/dist/components/index.d.ts

@@ -0,0 +1,254 @@
+import * as React$1 from 'react';
+import { FC, ReactNode, Component, ErrorInfo, MouseEvent, PropsWithChildren, InputHTMLAttributes, CSSProperties } from 'react';
+
+interface Props$1 {
+    label: string;
+}
+declare const AnnotationBadge: FC<Props$1>;
+
+interface DividerProps {
+    className?: string;
+}
+declare const Divider: FC<DividerProps>;
+
+interface LegendItem {
+    label: string;
+    color: "green" | "amber" | "red";
+    count: number;
+}
+interface DonutChartProps {
+    label: string;
+    total: number;
+    running: number;
+    pending?: number;
+    failed?: number;
+    items: LegendItem[];
+    onNavigate?: () => void;
+}
+declare const DonutChart: FC<DonutChartProps>;
+
+interface EmptyStateProps {
+    icon: ReactNode;
+    title: string;
+    description?: string;
+    action?: ReactNode;
+}
+declare const EmptyState: FC<EmptyStateProps>;
+
+interface Props {
+    children: ReactNode;
+    fallback?: (error: Error, reset: () => void) => ReactNode;
+}
+interface State {
+    error: Error | null;
+    copied: boolean;
+}
+declare class ErrorBoundary extends Component<Props, State> {
+    state: State;
+    static getDerivedStateFromError(error: Error): Partial<State>;
+    componentDidCatch(error: Error, info: ErrorInfo): void;
+    reset: () => void;
+    copyError: () => void;
+    render(): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | React$1.ReactPortal | React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | React$1.JSX.Element | null | undefined;
+}
+
+interface LoadingSpinnerProps {
+    className?: string;
+}
+declare const LoadingSpinner: FC<LoadingSpinnerProps>;
+
+interface ResourceCellProps {
+    label: string;
+    percent: number;
+}
+declare const ResourceCell: FC<ResourceCellProps>;
+
+interface ResourceLinkProps {
+    children: ReactNode;
+    className?: string;
+    truncate?: boolean;
+    truncateTextClassName?: string;
+    onClick?: (e: MouseEvent) => void;
+}
+declare const ResourceLink: FC<ResourceLinkProps>;
+
+interface ButtonGroupProps {
+    children: ReactNode;
+    className?: string;
+}
+declare const ButtonGroup: FC<ButtonGroupProps>;
+
+interface ResourceBulkDeletionButtonProps {
+    count: number;
+    ariaLabel: string;
+    tooltip: string;
+    onClick: () => void;
+}
+declare const ResourceBulkDeletionButton: FC<ResourceBulkDeletionButtonProps>;
+
+interface ResourceCreationButtonProps {
+    ariaLabel: string;
+    tooltip: string;
+    onClick: () => void;
+}
+declare const ResourceCreationButton: FC<ResourceCreationButtonProps>;
+
+interface ResourceDeletionButtonProps {
+    onClick: () => void;
+    mode?: "menu-item" | "icon-button";
+    ariaLabel?: string;
+    disabled?: boolean;
+    isPending?: boolean;
+    label?: string;
+    className?: string;
+}
+declare const ResourceDeletionButton: FC<ResourceDeletionButtonProps>;
+
+interface ResourceModificationButtonProps {
+    onClick: () => void;
+    mode?: "menu-item" | "icon-button";
+    ariaLabel?: string;
+    disabled?: boolean;
+}
+declare const ResourceModificationButton: FC<ResourceModificationButtonProps>;
+
+interface ResourceRestartButtonProps {
+    onClick: () => void;
+    mode?: "menu-item" | "icon-button";
+    ariaLabel?: string;
+    disabled?: boolean;
+}
+declare const ResourceRestartButton: FC<ResourceRestartButtonProps>;
+
+interface ResourceScaleButtonProps {
+    onClick: () => void;
+    mode?: "menu-item" | "icon-button";
+    ariaLabel?: string;
+    disabled?: boolean;
+    isNotAllowed?: boolean;
+    notAllowedReason?: string;
+}
+declare const ResourceScaleButton: FC<ResourceScaleButtonProps>;
+
+interface ResourceDetailEmptyBodyProps {
+    resourceKind: string;
+}
+declare const ResourceDetailEmptyBody: FC<ResourceDetailEmptyBodyProps>;
+interface ResourceDetailDrawerProps extends PropsWithChildren {
+    open: boolean;
+    onClose: () => void;
+    className?: string;
+}
+declare const ResourceDetailDrawer: FC<ResourceDetailDrawerProps>;
+/** Wraps SheetHeader with standard drawer styling: flex row, centered items, bottom border, and consistent padding. */
+declare const ResourceDetailDrawerHeader: FC<PropsWithChildren<{
+    className?: string;
+}>>;
+interface ResourceDetailDrawerBodyProps extends PropsWithChildren {
+    /** Optional className for the inner content wrapper; use for p-0 or custom grid layouts. */
+    className?: string;
+}
+/** Wraps ScrollArea with standard drawer body scrolling; provides inner p-4 padding by default. */
+declare const ResourceDetailDrawerBody: FC<ResourceDetailDrawerBodyProps>;
+
+declare const LineIcon: FC<{
+    isError: boolean;
+    isSpinning: boolean;
+}>;
+
+interface SearchInputProps extends InputHTMLAttributes<HTMLInputElement> {
+    /** Width class for the wrapper (e.g., "w-68"). Defaults to "w-68" if not provided. */
+    wrapperClassName?: string;
+}
+declare const SearchInput: FC<SearchInputProps>;
+
+interface TimezoneSelectProps {
+    value: string;
+    onChange: (tz: string) => void;
+    "aria-labelledby"?: string;
+}
+declare const TimezoneSelect: FC<TimezoneSelectProps>;
+
+interface ConfirmationModalProps {
+    open: boolean;
+    title: ReactNode;
+    description: ReactNode;
+    confirmLabel?: string;
+    confirmVariant?: "default" | "destructive";
+    isPending: boolean;
+    onClose: () => void;
+    onConfirm: () => void;
+}
+declare const ConfirmationModal: FC<ConfirmationModalProps>;
+
+type DialogSize = "sm" | "md" | "lg" | "xl" | "2xl";
+interface FormModalProps {
+    open: boolean;
+    onOpenChange?: (open: boolean) => void;
+    onClose: () => void;
+    title: string | ReactNode;
+    children: ReactNode;
+    onSubmit: () => void | Promise<void>;
+    isLoading?: boolean;
+    submitDisabled?: boolean;
+    submitLabel?: string;
+    cancelLabel?: string;
+    size?: DialogSize;
+}
+declare const FormModal: FC<FormModalProps>;
+
+interface TableSkeletonLoaderProps {
+    rows?: number;
+    columns: number;
+    includeCheckbox?: boolean;
+    columnWidths?: string[];
+}
+declare const TableSkeletonLoader: FC<TableSkeletonLoaderProps>;
+
+interface TableSkeletonRowProps {
+    columns: number;
+    includeCheckbox?: boolean;
+    columnWidths?: string[];
+}
+declare const TableSkeletonRow: FC<TableSkeletonRowProps>;
+
+interface MarkdownProps {
+    children: string;
+    className?: string;
+}
+declare const Markdown: FC<MarkdownProps>;
+
+declare const TruncatedText: FC<{
+    text: string;
+    className?: string;
+    tooltipClassName?: string;
+    positionerClassName?: string;
+}>;
+
+interface SuccessToastProps {
+    title: string;
+    description: string;
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+}
+declare const SuccessToast: React.FC<SuccessToastProps>;
+
+declare function renderSuccessToast(props: SuccessToastProps): void;
+
+interface ErrorToastProps {
+    title: string;
+    description?: string;
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+}
+declare const ErrorToast: React.FC<ErrorToastProps>;
+
+declare function renderErrorToast(props: ErrorToastProps): void;
+
+declare const TOAST_STYLE: CSSProperties;
+
+export { AnnotationBadge, ButtonGroup, type ButtonGroupProps, ConfirmationModal, Divider, DonutChart, EmptyState, type EmptyStateProps, ErrorBoundary, ErrorToast, type ErrorToastProps, FormModal, LineIcon, LoadingSpinner, type LoadingSpinnerProps, Markdown, ResourceBulkDeletionButton, ResourceCell, ResourceCreationButton, ResourceDeletionButton, ResourceDetailDrawer, ResourceDetailDrawerBody, ResourceDetailDrawerHeader, type ResourceDetailDrawerProps, ResourceDetailEmptyBody, type ResourceDetailEmptyBodyProps, ResourceLink, ResourceModificationButton, ResourceRestartButton, ResourceScaleButton, SearchInput, SuccessToast, type SuccessToastProps, TOAST_STYLE, TableSkeletonLoader, type TableSkeletonLoaderProps, TableSkeletonRow, type TableSkeletonRowProps, TimezoneSelect, TruncatedText, renderErrorToast, renderSuccessToast };

package/dist/components/index.js

@@ -0,0 +1,4 @@
+export { AnnotationBadge, ButtonGroup, ConfirmationModal, Divider, DonutChart, EmptyState, ErrorBoundary, ErrorToast, FormModal, LineIcon, LoadingSpinner, Markdown, ResourceBulkDeletionButton, ResourceCell, ResourceCreationButton, ResourceDeletionButton, ResourceDetailDrawer, ResourceDetailDrawerBody, ResourceDetailDrawerHeader, ResourceDetailEmptyBody, ResourceLink, ResourceModificationButton, ResourceRestartButton, ResourceScaleButton, SearchInput, SuccessToast, TOAST_STYLE, TableSkeletonLoader, TableSkeletonRow, TimezoneSelect, TruncatedText, renderErrorToast, renderSuccessToast } from '../chunk-OI5436K4.js';
+import '../chunk-NPDXDIXD.js';
+import '../chunk-7YPL4ZPM.js';
+import '../chunk-QUNCRUSO.js';

package/dist/hooks/index.d.ts

@@ -0,0 +1,6 @@
+declare function useCopyToClipboard<T = true>(timeout?: number): {
+    copiedValue: T | null;
+    copy: (text: string, marker?: T) => void;
+};
+
+export { useCopyToClipboard };

package/dist/hooks/index.js

@@ -0,0 +1,2 @@
+import '../chunk-7M2VOCYN.js';
+export { useCopyToClipboard } from '../chunk-3ZL7QROP.js';

package/dist/index.d.ts

@@ -0,0 +1,27 @@
+export { Badge, Button, Checkbox, Collapsible, CollapsiblePanel, CollapsibleTrigger, ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuPortal, ContextMenuSeparator, ContextMenuTrigger, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerContent, DrawerPopup, DrawerPortal, DrawerViewport, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Input, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Slider, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsIndicator, TabsList, TabsTrigger, Textarea, TextareaProps, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, buttonVariants, textareaVariants } from './atoms/index.js';
+export { AppWindowIcon, ArrowLeftRightIcon, ArrowUpCircleIcon, ArrowUpIcon, BellIcon, BoxesIcon, CheckCircle2Icon, CheckIcon, ChevronDownIcon, ChevronRightIcon, ChevronUpIcon, ChevronsLeftIcon, ChevronsRightIcon, CircleCheckIcon, CircleXIcon, ClockIcon, ContainerIcon, CopyIcon, CpuIcon, DatabaseIcon, DownloadIcon, DropletIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FileTextIcon, FolderSyncIcon, FrownIcon, GaugeIcon, HardDriveIcon, HouseIcon, InfoIcon, KeyIcon, LayersIcon, LayoutDashboardIcon, Link2Icon, ListChecksIcon, Loader2Icon, LockIcon, LockOpenIcon, Maximize2Icon, Minimize2Icon, MinusIcon, MoreVerticalIcon, NetworkIcon, OctagonXIcon, PackageIcon, PauseIcon, PencilIcon, PlayIcon, PlugIcon, PlusIcon, RefreshCwIcon, RocketIcon, RotateCcwIcon, RouteIcon, SaveIcon, ScalingIcon, ScrollTextIcon, SearchIcon, ServerIcon, Settings2Icon, SettingsIcon, ShieldAlertIcon, ShieldCheckIcon, ShieldIcon, SlidersHorizontalIcon, SquareIcon, StarIcon, TerminalIcon, TimerIcon, Trash2Icon, TriangleAlertIcon, UserRoundIcon, WebhookIcon, XCircleIcon, XIcon } from 'lucide-react';
+export { toast } from 'sonner';
+export { AnnotationBadge, ButtonGroup, ButtonGroupProps, ConfirmationModal, Divider, DonutChart, EmptyState, EmptyStateProps, ErrorBoundary, ErrorToast, ErrorToastProps, FormModal, LineIcon, LoadingSpinner, LoadingSpinnerProps, Markdown, ResourceBulkDeletionButton, ResourceCell, ResourceCreationButton, ResourceDeletionButton, ResourceDetailDrawer, ResourceDetailDrawerBody, ResourceDetailDrawerHeader, ResourceDetailDrawerProps, ResourceDetailEmptyBody, ResourceDetailEmptyBodyProps, ResourceLink, ResourceModificationButton, ResourceRestartButton, ResourceScaleButton, SearchInput, SuccessToast, SuccessToastProps, TOAST_STYLE, TableSkeletonLoader, TableSkeletonLoaderProps, TableSkeletonRow, TableSkeletonRowProps, TimezoneSelect, TruncatedText, renderErrorToast, renderSuccessToast } from './components/index.js';
+export { useCopyToClipboard } from './hooks/index.js';
+export { NavEntry, NavGroup, NavItem, SharedNamespaceContext, SharedUnifiedTrayContentProps, SharedUnifiedTrayContext, SharedUnifiedTrayOpenParams, SharedUnifiedTrayTab, UnifiedTrayAllFamily, UnifiedTrayCoreFamily, UseQueryCallback } from './types/index.js';
+export { clamp, cn, formatRelativeTime, formatTs } from './utils/index.js';
+export { FullTextSearchInput, SplitAndHighlightText, UseFullTextSearchCustomOptions, UseFullTextSearchOptions, UseFullTextSearchReturn, UseFullTextSearchWithHandlersReturn, useFullTextSearch } from './libs/index.js';
+export { VariantProps } from 'class-variance-authority';
+import 'react';
+import 'class-variance-authority/types';
+import '@base-ui/react/use-render';
+import '@base-ui/react/button';
+import '@base-ui/react/checkbox';
+import '@base-ui/react/collapsible';
+import '@base-ui/react/context-menu';
+import '@base-ui/react/dialog';
+import '@base-ui/react/drawer';
+import '@base-ui/react/menu';
+import '@base-ui/react/scroll-area';
+import '@base-ui/react/select';
+import '@base-ui/react/separator';
+import '@base-ui/react/slider';
+import '@base-ui/react/switch';
+import '@base-ui/react/tabs';
+import '@base-ui/react/tooltip';
+import 'clsx';

package/dist/index.js

@@ -0,0 +1,11 @@
+export { Checkbox, Collapsible, CollapsiblePanel, CollapsibleTrigger, ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuPortal, ContextMenuSeparator, ContextMenuTrigger, Drawer, DrawerContent, DrawerPopup, DrawerPortal, DrawerViewport, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Slider, Switch, Tabs, TabsContent, TabsIndicator, TabsList, TabsTrigger, Textarea, Toaster, textareaVariants } from './chunk-FJE2X4E6.js';
+export { AnnotationBadge, ButtonGroup, ConfirmationModal, Divider, DonutChart, EmptyState, ErrorBoundary, ErrorToast, FormModal, LineIcon, LoadingSpinner, Markdown, ResourceBulkDeletionButton, ResourceCell, ResourceCreationButton, ResourceDeletionButton, ResourceDetailDrawer, ResourceDetailDrawerBody, ResourceDetailDrawerHeader, ResourceDetailEmptyBody, ResourceLink, ResourceModificationButton, ResourceRestartButton, ResourceScaleButton, SearchInput, SuccessToast, TOAST_STYLE, TableSkeletonLoader, TableSkeletonRow, TimezoneSelect, TruncatedText, renderErrorToast, renderSuccessToast } from './chunk-OI5436K4.js';
+export { Badge, Button, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, ScrollArea, ScrollBar, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, buttonVariants, toast } from './chunk-NPDXDIXD.js';
+import './chunk-7M2VOCYN.js';
+export { useCopyToClipboard } from './chunk-3ZL7QROP.js';
+import './chunk-TLJXC46A.js';
+export { formatRelativeTime, formatTs } from './chunk-CPX26L4M.js';
+export { FullTextSearchInput, useFullTextSearch } from './chunk-GPI6G5NM.js';
+export { SplitAndHighlightText } from './chunk-NFJMUQY6.js';
+export { AppWindowIcon, ArrowLeftRightIcon, ArrowUpCircleIcon, ArrowUpIcon, BellIcon, BoxesIcon, CheckCircle2Icon, CheckIcon, ChevronDownIcon, ChevronRightIcon, ChevronUpIcon, ChevronsLeftIcon, ChevronsRightIcon, CircleCheckIcon, CircleXIcon, ClockIcon, ContainerIcon, CopyIcon, CpuIcon, DatabaseIcon, DownloadIcon, DropletIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FileTextIcon, FolderSyncIcon, FrownIcon, GaugeIcon, HardDriveIcon, HouseIcon, InfoIcon, Input, KeyIcon, LayersIcon, LayoutDashboardIcon, Link2Icon, ListChecksIcon, Loader2Icon, LockIcon, LockOpenIcon, Maximize2Icon, Minimize2Icon, MinusIcon, MoreVerticalIcon, NetworkIcon, OctagonXIcon, PackageIcon, PauseIcon, PencilIcon, PlayIcon, PlugIcon, PlusIcon, RefreshCwIcon, RocketIcon, RotateCcwIcon, RouteIcon, SaveIcon, ScalingIcon, ScrollTextIcon, SearchIcon, ServerIcon, Settings2Icon, SettingsIcon, ShieldAlertIcon, ShieldCheckIcon, ShieldIcon, SlidersHorizontalIcon, SquareIcon, StarIcon, TerminalIcon, TimerIcon, Trash2Icon, TriangleAlertIcon, UserRoundIcon, WebhookIcon, XCircleIcon, XIcon } from './chunk-7YPL4ZPM.js';
+export { clamp, cn } from './chunk-QUNCRUSO.js';

package/dist/libs/index.d.ts

@@ -0,0 +1,48 @@
+import React__default, { FC } from 'react';
+
+interface FullTextSearchInputProps {
+    searchTerm: string;
+    matchCount: number;
+    currentMatchIdx: number;
+    onSearch: (term: string) => void;
+    onSearchNext: () => void;
+    ariaLabel?: string;
+}
+declare const FullTextSearchInput: FC<FullTextSearchInputProps>;
+
+interface SplitAndHighlightTextProps {
+    text: string;
+    term: string;
+    absoluteStart?: number;
+    activeMatchCharIdx?: number;
+}
+declare const SplitAndHighlightText: FC<SplitAndHighlightTextProps>;
+
+interface UseFullTextSearchReturn {
+    searchTerm: string;
+    matchCount: number;
+    currentMatchIdx: number;
+    setSearchTerm: (term: string) => void;
+    setMatchCount: (count: number) => void;
+    setCurrentMatchIdx: (idx: number) => void;
+    resetMatches: () => void;
+}
+interface UseFullTextSearchWithHandlersReturn extends UseFullTextSearchReturn {
+    matches: number[];
+    activeMatchCharIdx: number;
+    contentRef: React__default.RefObject<HTMLDivElement | null>;
+    handleSearch: (term: string) => void;
+    handleSearchNext: () => void;
+}
+interface UseFullTextSearchOptions {
+    text: string;
+}
+interface UseFullTextSearchCustomOptions {
+    onSearch: (term: string) => void;
+    onSearchNext: () => void;
+}
+declare function useFullTextSearch(options: UseFullTextSearchOptions): UseFullTextSearchWithHandlersReturn;
+declare function useFullTextSearch(options?: undefined): UseFullTextSearchReturn;
+declare function useFullTextSearch(options: UseFullTextSearchCustomOptions): UseFullTextSearchWithHandlersReturn;
+
+export { FullTextSearchInput, SplitAndHighlightText, type UseFullTextSearchCustomOptions, type UseFullTextSearchOptions, type UseFullTextSearchReturn, type UseFullTextSearchWithHandlersReturn, useFullTextSearch };

package/dist/libs/index.js

@@ -0,0 +1,4 @@
+export { FullTextSearchInput, useFullTextSearch } from '../chunk-GPI6G5NM.js';
+export { SplitAndHighlightText } from '../chunk-NFJMUQY6.js';
+import '../chunk-7YPL4ZPM.js';
+import '../chunk-QUNCRUSO.js';

package/dist/style.css

@@ -0,0 +1,65 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+
+@import "./styles.typography.css";
+@import "./styles.animation.css";
+@import "./styles.palette.css";
+
+@source "../src";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: calc(var(--radius) * 1.2);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+}
+
+:root {
+  --radius: 0.625rem;
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/75;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+  html {
+    @apply font-sans;
+  }
+}
+
+@layer utilities {
+  /* Focus Ring */
+  .focus-ring {
+    @apply focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/75;
+  }
+
+  .shadow-subtle {
+    box-shadow: 0 1px 3px color-mix(in oklch, var(--foreground) 5%, transparent);
+  }
+  .shadow-depth-1 {
+    box-shadow: 0 2px 8px color-mix(in oklch, var(--foreground) 8%, transparent);
+  }
+  .shadow-depth-2 {
+    box-shadow: 0 4px 16px color-mix(in oklch, var(--foreground) 12%, transparent);
+  }
+
+  /* Z-Index Scale */
+  .z-sticky {
+    @apply z-10;
+  }
+  .z-overlay {
+    @apply z-50;
+  }
+  .z-popover-nested {
+    @apply z-70;
+  }
+}

package/dist/styles.animation.css

@@ -0,0 +1,18 @@
+@layer utilities {
+  /* Transitions (150ms — Tailwind's default, declared explicitly) */
+  .transition-interactive {
+    @apply transition-all duration-150;
+  }
+  .transition-theme {
+    @apply transition-colors duration-150;
+  }
+  .transition-fade {
+    @apply transition-opacity duration-150;
+  }
+  .transition-focus {
+    @apply transition-[color,box-shadow] duration-150;
+  }
+  .transition-height {
+    @apply transition-[height] duration-150;
+  }
+}

package/dist/styles.js

@@ -0,0 +1 @@
+import "./style.css";

package/dist/styles.palette.css

@@ -0,0 +1,140 @@
+@theme inline {
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-destructive-soft: var(--destructive-soft);
+  --color-info: var(--info);
+  --color-info-soft: var(--info-soft);
+  --color-danger: var(--danger);
+  --color-danger-soft: var(--danger-soft);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-success-soft: var(--success-soft);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-warning-soft: var(--warning-soft);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-tertiary-surface: var(--tertiary-surface);
+  --color-secondary-surface: var(--secondary-surface);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --color-foreground: var(--foreground);
+  --color-background: var(--background);
+}
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --secondary-surface: oklch(0.96 0 0);
+  --tertiary-surface: oklch(0.93 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.637 0.237 25.331);
+  --destructive-soft: color-mix(in oklch, var(--destructive) 15%, var(--background));
+  --info: oklch(0.623 0.214 259.815);
+  --info-soft: color-mix(in oklch, var(--info) 15%, var(--background));
+  --danger: oklch(70.5% 0.213 47.604);
+  --danger-soft: color-mix(in oklch, var(--danger) 15%, var(--background));
+  --success: oklch(0.723 0.219 149.579);
+  --success-foreground: oklch(0.145 0 0);
+  --success-soft: color-mix(in oklch, var(--success) 15%, var(--background));
+  --warning: oklch(0.769 0.188 70.08);
+  --warning-foreground: oklch(0.145 0 0);
+  --warning-soft: color-mix(in oklch, var(--warning) 15%, var(--background));
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --secondary-surface: oklch(0.25 0 0);
+  --tertiary-surface: oklch(0.3 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.637 0.237 25.331);
+  --destructive-soft: color-mix(in oklch, var(--destructive) 15%, var(--background));
+  --info: oklch(0.623 0.214 259.815);
+  --info-soft: color-mix(in oklch, var(--info) 15%, var(--background));
+  --danger: oklch(70.5% 0.213 47.604);
+  --danger-soft: color-mix(in oklch, var(--danger) 15%, var(--background));
+  --success: oklch(0.723 0.219 149.579);
+  --success-foreground: oklch(0.145 0 0);
+  --success-soft: color-mix(in oklch, var(--success) 15%, var(--background));
+  --warning: oklch(0.769 0.188 70.08);
+  --warning-foreground: oklch(0.145 0 0);
+  --warning-soft: color-mix(in oklch, var(--warning) 15%, var(--background));
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}

package/dist/styles.typography.css

@@ -0,0 +1,57 @@
+@import "@fontsource-variable/geist";
+
+@theme inline {
+  --font-heading: var(--font-sans);
+  --font-sans: "Geist Variable", sans-serif;
+}
+
+@layer utilities {
+  /* Typography Scale
+   * Semantic wrappers over Tailwind v4's built-in --font-weight-* tokens (light 300, normal 400, medium 500, semibold 600, bold 700).
+   * Use these utilities (.text-h1, .text-h2, .text-body, etc.) instead of raw font-* classes to preserve semantic hierarchy.
+   */
+  .text-display {
+    @apply text-2xl font-bold;
+  }
+  .text-h1 {
+    @apply text-lg font-bold;
+  }
+  .text-h2 {
+    @apply text-base font-semibold;
+  }
+  .text-h3 {
+    @apply text-sm font-semibold;
+  }
+  .text-body {
+    @apply text-sm font-normal;
+  }
+  .text-caption {
+    @apply text-xs font-normal;
+  }
+  .text-label {
+    @apply text-xs font-medium;
+  }
+
+  /* Semantic Aliases (optional, for intent-based naming) */
+  .headline-display {
+    @apply text-2xl font-bold;
+  }
+  .headline-1 {
+    @apply text-lg font-bold;
+  }
+  .headline-2 {
+    @apply text-base font-semibold;
+  }
+  .headline-3 {
+    @apply text-sm font-semibold;
+  }
+  .body-text {
+    @apply text-sm font-normal;
+  }
+  .caption-text {
+    @apply text-xs font-normal;
+  }
+  .label-text {
+    @apply text-xs font-medium;
+  }
+}