@toolr/ui-design 0.1.0

package/dist/preset.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Shared Tailwind 4 preset for toolr apps.
+ *
+ * Consuming apps import the token CSS via:
+ *   @import "@toolr/ui-design/tokens";
+ *
+ * This preset provides shared theme extensions (breakpoints, etc.)
+ * that all apps should use.
+ */
+declare const toolrPreset: {
+    theme: {
+        extend: {
+            screens: {
+                '3xl': string;
+                '4xl': string;
+            };
+            fontFamily: {
+                sans: string[];
+            };
+        };
+    };
+};
+
+export { toolrPreset };

package/dist/preset.js

@@ -0,0 +1,17 @@
+// tailwind-preset.ts
+var toolrPreset = {
+  theme: {
+    extend: {
+      screens: {
+        "3xl": "100rem",
+        "4xl": "156.25rem"
+      },
+      fontFamily: {
+        sans: ["Inter", "system-ui", "Avenir", "Helvetica", "Arial", "sans-serif"]
+      }
+    }
+  }
+};
+export {
+  toolrPreset
+};

package/dist/tokens/tokens/primitives.css

@@ -0,0 +1,45 @@
+/* =============================================================================
+   Primitive Design Tokens — OLED Pure Neutral Scale
+   Pure achromatic scale with progressive surface lift from true black.
+
+   These are raw color values. Use semantic tokens (semantic.css) in components.
+   ============================================================================= */
+
+@theme {
+  /* Neutral scale (OLED Pure) */
+  --color-neutral-950: #000000;
+  --color-neutral-900: #050505;
+  --color-neutral-800: #0a0a0a;
+  --color-neutral-700: #1a1a1a;
+  --color-neutral-600: #333333;
+  --color-neutral-500: #666666;
+  --color-neutral-400: #999999;
+  --color-neutral-300: #cccccc;
+  --color-neutral-200: #e0e0e0;
+  --color-neutral-100: #f0f0f0;
+  --color-neutral-50:  #fafafa;
+
+  /* Disable Tailwind default gray to prevent accidental usage */
+  --color-gray-*: initial;
+}
+
+:root {
+  --color-black: #000000;
+  --color-white: #ffffff;
+
+  /* Accent colors (Tailwind 500 values — used via Tailwind classes, listed for reference) */
+  --color-blue-500: #3b82f6;
+  --color-blue-400: #60a5fa;
+  --color-green-500: #22c55e;
+  --color-red-500: #ef4444;
+  --color-purple-500: #a855f7;
+  --color-orange-500: #f97316;
+  --color-amber-500: #f59e0b;
+  --color-yellow-500: #eab308;
+  --color-pink-500: #ec4899;
+  --color-emerald-500: #10b981;
+  --color-teal-500: #14b8a6;
+  --color-cyan-500: #06b6d4;
+  --color-indigo-500: #6366f1;
+  --color-violet-500: #8b5cf6;
+}

package/dist/tokens/tokens/semantic.css

@@ -0,0 +1,46 @@
+/* =============================================================================
+   Semantic Design Tokens — Purpose-Based Names
+   References primitives from primitives.css
+
+   These tokens describe intent, not appearance.
+   Accent colors (blue-500/20, text-blue-400, etc.) stay Tailwind-native.
+   ============================================================================= */
+
+@import './primitives.css';
+
+:root {
+  /* Page-level backgrounds */
+  --background: var(--color-black);
+  --foreground: var(--color-neutral-300);
+
+  /* Surface: cards, panels, popups */
+  --surface: var(--color-neutral-800);
+  --surface-foreground: var(--color-neutral-300);
+  --surface-secondary: var(--color-neutral-900);
+  --surface-overlay: var(--color-neutral-700);
+
+  /* Muted: subdued elements, disabled states */
+  --muted: var(--color-neutral-800);
+  --muted-foreground: var(--color-neutral-500);
+
+  /* Text hierarchy */
+  --text-primary: var(--color-neutral-300);
+  --text-secondary: var(--color-neutral-500);
+  --text-tertiary: var(--color-neutral-400);
+  --text-emphasis: var(--color-white);
+
+  /* Borders */
+  --border: var(--color-neutral-700);
+  --border-subtle: var(--color-neutral-800);
+
+  /* Interactive: primary action color */
+  --primary: var(--color-blue-500);
+  --primary-foreground: var(--color-white);
+
+  /* Destructive actions */
+  --destructive: var(--color-red-500);
+  --destructive-foreground: var(--color-white);
+
+  /* Focus ring */
+  --ring: var(--color-blue-400);
+}

package/dist/tokens/tokens/theme.css

@@ -0,0 +1,11 @@
+/* =============================================================================
+   Tailwind 4 Theme Integration
+   Import this file in consuming apps: @import "@toolr/ui-design/tokens"
+   ============================================================================= */
+
+@import './semantic.css';
+
+@keyframes debounce-border-drain {
+  from { stroke-dashoffset: 0; }
+  to { stroke-dashoffset: -100; }
+}

package/dist/tokens/tokens/tokens.json

@@ -0,0 +1,65 @@
+{
+  "$schema": "https://tr.designtokens.org/format/",
+  "primitive": {
+    "$type": "color",
+    "black": { "$value": "#000000" },
+    "gray-950": { "$value": "#030712" },
+    "gray-900": { "$value": "#111827" },
+    "gray-800": { "$value": "#1f2937" },
+    "gray-700": { "$value": "#374151" },
+    "gray-600": { "$value": "#4b5563" },
+    "gray-500": { "$value": "#6b7280" },
+    "gray-400": { "$value": "#9ca3af" },
+    "gray-300": { "$value": "#d1d5db" },
+    "gray-200": { "$value": "#e5e7eb" },
+    "gray-100": { "$value": "#f3f4f6" },
+    "white": { "$value": "#ffffff" }
+  },
+  "semantic": {
+    "background": { "$type": "color", "$value": "{primitive.black}" },
+    "foreground": { "$type": "color", "$value": "{primitive.gray-300}" },
+    "surface": { "$type": "color", "$value": "{primitive.gray-800}" },
+    "surface-secondary": { "$type": "color", "$value": "{primitive.gray-900}" },
+    "surface-overlay": { "$type": "color", "$value": "{primitive.gray-700}" },
+    "muted": { "$type": "color", "$value": "{primitive.gray-800}" },
+    "muted-foreground": { "$type": "color", "$value": "{primitive.gray-500}" },
+    "text-primary": { "$type": "color", "$value": "{primitive.gray-300}" },
+    "text-secondary": { "$type": "color", "$value": "{primitive.gray-500}" },
+    "text-tertiary": { "$type": "color", "$value": "{primitive.gray-400}" },
+    "text-emphasis": { "$type": "color", "$value": "{primitive.white}" },
+    "border": { "$type": "color", "$value": "{primitive.gray-700}" },
+    "border-subtle": { "$type": "color", "$value": "{primitive.gray-800}" },
+    "primary": { "$type": "color", "$value": "#3b82f6" },
+    "destructive": { "$type": "color", "$value": "#ef4444" }
+  },
+  "typography": {
+    "$type": "dimension",
+    "body": { "$value": "14px", "$description": "text-sm — body text, descriptions" },
+    "small": { "$value": "12px", "$description": "text-xs — dominant size, labels, badges, helper text" },
+    "heading": { "$value": "18px", "$description": "text-lg — section headers (rare)" }
+  },
+  "font-weight": {
+    "$type": "dimension",
+    "default": { "$value": "500", "$description": "font-medium — dominant weight for text" },
+    "emphasis": { "$value": "600", "$description": "font-semibold — emphasis, important text" },
+    "strong": { "$value": "700", "$description": "font-bold — rare, special emphasis only" }
+  },
+  "spacing": {
+    "$type": "dimension",
+    "component-padding-sm": { "$value": "4px", "$description": "p-1 — tight spacing" },
+    "component-padding-md": { "$value": "8px", "$description": "p-2 — standard padding (dominant)" },
+    "component-padding-lg": { "$value": "12px", "$description": "p-3 — moderate padding" },
+    "component-padding-xl": { "$value": "16px", "$description": "p-4 — generous padding" },
+    "gap-tight": { "$value": "4px", "$description": "gap-1" },
+    "gap-normal": { "$value": "8px", "$description": "gap-2 — standard element spacing (dominant)" },
+    "gap-moderate": { "$value": "12px", "$description": "gap-3" },
+    "gap-section": { "$value": "16px", "$description": "gap-4" },
+    "gap-region": { "$value": "24px", "$description": "gap-6 — rare" }
+  },
+  "border-radius": {
+    "$type": "dimension",
+    "sm": { "$value": "4px", "$description": "rounded — standard rounding (dominant)" },
+    "lg": { "$value": "8px", "$description": "rounded-lg — modals, panels, cards" },
+    "full": { "$value": "9999px", "$description": "rounded-full — pills, badges" }
+  }
+}

package/index.ts

@@ -0,0 +1,123 @@
+// Shared types
+export { type FormColor } from './components/lib/form-colors.ts'
+export {
+  SCALE_KEYS, type ScaleKey, type ThemeId,
+  DARK_THEMES, LIGHT_THEMES, BASE_THEMES,
+  type AccentDef, ACCENT_DEFS,
+  satCurve, hslToHex, generateScale,
+  isLightTheme, applyTheme,
+} from './components/lib/theme-engine.ts'
+export { ToolrAppLogo, TOOLR_APPS, type ToolrAppId } from './components/lib/toolr-brand.tsx'
+export { AI_TOOL_LOGOS, AiToolIcon, AI_TOOL_NAMES, type AiToolKey } from './components/lib/ai-tools.tsx'
+
+// UI Components
+export { IconButton, CollapseButton, iconMap, type IconButtonProps, type CollapseButtonProps, type IconButtonColor, type IconButtonVariant, type IconButtonStatus, type IconName, type ActionItem } from './components/ui/icon-button.tsx'
+export { Label, type LabelProps, type LabelColor } from './components/ui/label.tsx'
+export { Badge, type BadgeProps, type BadgeColor } from './components/ui/badge.tsx'
+export { ConfirmBadge, type ConfirmBadgeProps, type ConfirmBadgeColor } from './components/ui/confirm-badge.tsx'
+export { Checkbox, type CheckboxProps, type CheckboxSize, type CheckboxColor, type CheckboxVariant } from './components/ui/checkbox.tsx'
+export { Toggle, type ToggleProps, type ToggleColor, type ToggleSize, type ToggleVariant } from './components/ui/toggle.tsx'
+export { Input, type InputProps } from './components/ui/input.tsx'
+export { NumberInput, type NumberInputProps } from './components/ui/number-input.tsx'
+export { Tooltip, TooltipButton, type TooltipContent, type TooltipPosition, type TooltipAlign } from './components/ui/tooltip.tsx'
+export { ScopeBadge, type ScopeType } from './components/ui/scope-badge.tsx'
+export { SegmentedToggle, type SegmentedToggleOption, type SegmentedToggleProps } from './components/ui/segmented-toggle.tsx'
+export { ResizableTextarea, type ResizableTextareaProps } from './components/ui/resizable-textarea.tsx'
+export { Select, type SelectProps, type SelectOption } from './components/ui/select.tsx'
+export { FilterDropdown, type FilterDropdownProps } from './components/ui/filter-dropdown.tsx'
+export { SortDropdown, type SortDropdownProps, type SortField } from './components/ui/sort-dropdown.tsx'
+export { FormActions, type FormActionsProps } from './components/ui/form-actions.tsx'
+export { ConfirmModal, AlertModal, type ConfirmModalProps, type AlertModalProps, type ModalKind, type ModalSize } from './components/ui/modal.tsx'
+export { ActionDialog, type ActionDialogProps } from './components/ui/action-dialog.tsx'
+export { ExecutionDetailsPanel, type ExecutionDetailsPanelProps, type ExecutionDetailRow } from './components/ui/execution-details-panel.tsx'
+export { SettingRow, type SettingRowProps } from './components/ui/setting-row.tsx'
+export { FileTree, collectDirPaths, type FileTreeProps, type FileTreeNode } from './components/ui/file-tree.tsx'
+export { EditorToolbar, type EditorToolbarProps } from './components/ui/editor-toolbar.tsx'
+export { BottomPanelHeader, type BottomPanelHeaderProps, type PanelTab, type StatusBanner } from './components/ui/bottom-panel-header.tsx'
+export { FrontmatterFormHeader, type FrontmatterFormHeaderProps } from './components/ui/frontmatter-form-header.tsx'
+export { EditorPlaceholderCard, type EditorPlaceholderCardProps } from './components/ui/editor-placeholder-card.tsx'
+export { DetailViewWrapper, type DetailViewWrapperProps } from './components/ui/detail-view-wrapper.tsx'
+export { RegistryCard, type RegistryCardProps, type RegistryItemType, type ExtensionSource, type SeedrItemStatus, formatCategory } from './components/ui/registry-card.tsx'
+export { RegistryDetail, type RegistryDetailProps } from './components/ui/registry-detail.tsx'
+export { FileStructureSection, getLanguageFromPath, type FileStructureSectionProps, type PreviewMode, type AccentColor } from './components/ui/file-structure-section.tsx'
+export { RegistryBrowser, type RegistryBrowserProps } from './components/ui/registry-browser.tsx'
+export { AiActionButton, type AiActionButtonProps, type AiActionStatus, type AiCompletionResult } from './components/ui/ai-action-button.tsx'
+export { AiExecutionActionButtons, type AiExecutionActionButtonsProps, type ExecutionStatus } from './components/ui/ai-execution-action-buttons.tsx'
+// Sections > Report a Bug
+export {
+  ReportBugForm, type ReportBugFormProps,
+  ScreenshotUploader, type ScreenshotUploaderProps, type Screenshot,
+  useReportBug, type UseReportBugOptions, type UseReportBugReturn,
+  submitIssueReport, ISSUE_TYPES,
+  type IssueType, type IssueReport, type IssueReportResult, type SystemInfo, type ScreenshotAttachment,
+  createErrorLogger, type ErrorLogger, type TrackedError,
+} from './components/sections/report-bug/index.ts'
+// Sections > Golden Snapshots
+export {
+  GoldenSyncPanel, type GoldenSyncPanelProps,
+  StatusOverview, type StatusOverviewProps,
+  FileDiffViewer, type FileDiffViewerProps,
+  SnapshotManager, type SnapshotManagerProps,
+  VersionManager, type VersionManagerProps,
+  useGoldenSync, formatDate, formatBytes, getLanguage,
+  type UseGoldenSyncOptions, type UseGoldenSyncReturn, type DiffTreeNode,
+  type ComponentVersion, type GoldenMeta, type DirectoryStatus, type SeedInfo, type GoldenStatus,
+  type FileDiffStatus, type FileDiffInfo, type DiffSummary, type ChangedComponents, type GoldenLiveDiff,
+  type SnapshotInfo, type SnapshotsManifest, type CreateSnapshotResult, type ResetResult,
+  type GoldenSnapshotsApi,
+} from './components/sections/golden-snapshots/index.ts'
+// Sections > AI Tools Paths
+export {
+  ToolsPathsPanel, type ToolsPathsPanelProps,
+  useToolsPaths, type UseToolsPathsOptions, type UseToolsPathsReturn,
+  type AiToolConfig, type ToolDetectionResult, type ToolsPathsApi,
+} from './components/sections/ai-tools-paths/index.ts'
+// Sections > Captured Issues
+export {
+  CapturedIssuesPanel, type CapturedIssuesPanelProps,
+  useCapturedIssues, type UseCapturedIssuesOptions, type UseCapturedIssuesReturn,
+  type CapturedError, type SubmittedError, type CapturedIssuesApi,
+} from './components/sections/captured-issues/index.ts'
+// Sections > Snapshot Browser
+export {
+  SnapshotBrowserPanel, type SnapshotBrowserPanelProps,
+  SnapshotTree, type SnapshotTreeProps,
+  useSnapshotBrowser, type UseSnapshotBrowserOptions, type UseSnapshotBrowserReturn,
+  type SnapshotEntry, type SnapshotItem, type SnapshotCategory, type SnapshotScope, type SnapshotBrowserApi,
+} from './components/sections/snapshot-browser/index.ts'
+// Sections > Snippets Editor
+export {
+  SnippetsEditor, type SnippetsEditorProps,
+  useSnippetsEditor, type UseSnippetsEditorOptions, type UseSnippetsEditorReturn,
+  SNIPPET_NAME_REGEX, type SnippetData, type SnippetsEditorApi,
+} from './components/sections/snippets-editor/index.ts'
+// Sections > Prompt Editor
+export {
+  TabbedPromptEditor, type TabbedPromptEditorProps,
+  FileTypeTabbedPromptEditor, type FileTypeTabbedPromptEditorProps,
+  SimulatorPromptEditor, type SimulatorPromptEditorProps,
+  usePromptEditor, type UsePromptEditorOptions, type UsePromptEditorReturn,
+  type ToolTab, type PromptPlaceholder, type PromptSnapshot, type PromptEditorApi,
+  type FileTypeOption, type ScenarioOption,
+} from './components/sections/prompt-editor/index.ts'
+export { CollapsibleSection, type CollapsibleSectionProps } from './components/ui/collapsible-section.tsx'
+export { FilesPanel, type FilesPanelProps, type FileEntry } from './components/ui/files-panel.tsx'
+export { SnippetsPanel, type SnippetsPanelProps, type Snippet } from './components/ui/snippets-panel.tsx'
+export { Breadcrumb, type BreadcrumbProps, type BreadcrumbSegment } from './components/ui/breadcrumb.tsx'
+export { NavigationBar, type NavigationBarProps } from './components/ui/navigation-bar.tsx'
+export { TabBar, type TabBarProps, type Tab } from './components/ui/tab-bar.tsx'
+export { LayoutTabBar, type LayoutTabBarProps, type LayoutTab } from './components/ui/layout-tab-bar.tsx'
+export { NavCard, type NavCardProps } from './components/ui/nav-card.tsx'
+export { ExtensionListCard, type ExtensionListCardProps } from './components/ui/extension-list-card.tsx'
+export { StatusCard, type StatusCardProps, type StatusItem } from './components/ui/status-card.tsx'
+export { SnapshotCard, type SnapshotCardProps } from './components/ui/snapshot-card.tsx'
+export { DetailSection, type DetailSectionProps, type DetailRow } from './components/ui/detail-section.tsx'
+export { SelectionGrid, type SelectionGridProps, type SelectionCardItem, type CodingToolId, type CodingToolPresetConfig } from './components/ui/selection-grid.tsx'
+
+// Hooks
+export { useClickOutside } from './components/hooks/use-click-outside.ts'
+export { useDropdownMaxHeight } from './components/hooks/use-dropdown-max-height.ts'
+export { useNavigationHistory, type UseNavigationHistoryReturn } from './components/hooks/use-navigation-history.ts'
+
+// Utilities
+export { cn } from './components/lib/cn.ts'

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@toolr/ui-design",
+  "version": "0.1.0",
+  "private": false,
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "source": "./index.ts",
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./tokens": {
+      "source": "./tokens/theme.css",
+      "default": "./dist/tokens/theme.css"
+    },
+    "./preset": {
+      "source": "./tailwind-preset.ts",
+      "import": "./dist/preset.js",
+      "types": "./dist/preset.d.ts"
+    },
+    "./content": {
+      "source": "./components/content/info-panel-primitives.tsx",
+      "import": "./dist/content.js",
+      "types": "./dist/content.d.ts"
+    },
+    "./diagrams": {
+      "source": "./components/diagrams/diagram-utils.tsx",
+      "import": "./dist/diagrams.js",
+      "types": "./dist/diagrams.d.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "index.ts",
+    "tailwind-preset.ts",
+    "components",
+    "tokens"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "postbuild": "cp -r tokens dist/tokens"
+  },
+  "peerDependencies": {
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
+  },
+  "dependencies": {
+    "@monaco-editor/react": "^4.7.0",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.559.0",
+    "monaco-editor": "^0.55.1",
+    "motion": "^12.33.0",
+    "tailwind-merge": "^3.3.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3"
+  }
+}

package/tailwind-preset.ts

@@ -0,0 +1,22 @@
+/**
+ * Shared Tailwind 4 preset for toolr apps.
+ *
+ * Consuming apps import the token CSS via:
+ *   @import "@toolr/ui-design/tokens";
+ *
+ * This preset provides shared theme extensions (breakpoints, etc.)
+ * that all apps should use.
+ */
+export const toolrPreset = {
+  theme: {
+    extend: {
+      screens: {
+        '3xl': '100rem',
+        '4xl': '156.25rem',
+      },
+      fontFamily: {
+        sans: ['Inter', 'system-ui', 'Avenir', 'Helvetica', 'Arial', 'sans-serif'],
+      },
+    },
+  },
+}

package/tokens/primitives.css

@@ -0,0 +1,45 @@
+/* =============================================================================
+   Primitive Design Tokens — OLED Pure Neutral Scale
+   Pure achromatic scale with progressive surface lift from true black.
+
+   These are raw color values. Use semantic tokens (semantic.css) in components.
+   ============================================================================= */
+
+@theme {
+  /* Neutral scale (OLED Pure) */
+  --color-neutral-950: #000000;
+  --color-neutral-900: #050505;
+  --color-neutral-800: #0a0a0a;
+  --color-neutral-700: #1a1a1a;
+  --color-neutral-600: #333333;
+  --color-neutral-500: #666666;
+  --color-neutral-400: #999999;
+  --color-neutral-300: #cccccc;
+  --color-neutral-200: #e0e0e0;
+  --color-neutral-100: #f0f0f0;
+  --color-neutral-50:  #fafafa;
+
+  /* Disable Tailwind default gray to prevent accidental usage */
+  --color-gray-*: initial;
+}
+
+:root {
+  --color-black: #000000;
+  --color-white: #ffffff;
+
+  /* Accent colors (Tailwind 500 values — used via Tailwind classes, listed for reference) */
+  --color-blue-500: #3b82f6;
+  --color-blue-400: #60a5fa;
+  --color-green-500: #22c55e;
+  --color-red-500: #ef4444;
+  --color-purple-500: #a855f7;
+  --color-orange-500: #f97316;
+  --color-amber-500: #f59e0b;
+  --color-yellow-500: #eab308;
+  --color-pink-500: #ec4899;
+  --color-emerald-500: #10b981;
+  --color-teal-500: #14b8a6;
+  --color-cyan-500: #06b6d4;
+  --color-indigo-500: #6366f1;
+  --color-violet-500: #8b5cf6;
+}

package/tokens/semantic.css

@@ -0,0 +1,46 @@
+/* =============================================================================
+   Semantic Design Tokens — Purpose-Based Names
+   References primitives from primitives.css
+
+   These tokens describe intent, not appearance.
+   Accent colors (blue-500/20, text-blue-400, etc.) stay Tailwind-native.
+   ============================================================================= */
+
+@import './primitives.css';
+
+:root {
+  /* Page-level backgrounds */
+  --background: var(--color-black);
+  --foreground: var(--color-neutral-300);
+
+  /* Surface: cards, panels, popups */
+  --surface: var(--color-neutral-800);
+  --surface-foreground: var(--color-neutral-300);
+  --surface-secondary: var(--color-neutral-900);
+  --surface-overlay: var(--color-neutral-700);
+
+  /* Muted: subdued elements, disabled states */
+  --muted: var(--color-neutral-800);
+  --muted-foreground: var(--color-neutral-500);
+
+  /* Text hierarchy */
+  --text-primary: var(--color-neutral-300);
+  --text-secondary: var(--color-neutral-500);
+  --text-tertiary: var(--color-neutral-400);
+  --text-emphasis: var(--color-white);
+
+  /* Borders */
+  --border: var(--color-neutral-700);
+  --border-subtle: var(--color-neutral-800);
+
+  /* Interactive: primary action color */
+  --primary: var(--color-blue-500);
+  --primary-foreground: var(--color-white);
+
+  /* Destructive actions */
+  --destructive: var(--color-red-500);
+  --destructive-foreground: var(--color-white);
+
+  /* Focus ring */
+  --ring: var(--color-blue-400);
+}

package/tokens/theme.css

@@ -0,0 +1,11 @@
+/* =============================================================================
+   Tailwind 4 Theme Integration
+   Import this file in consuming apps: @import "@toolr/ui-design/tokens"
+   ============================================================================= */
+
+@import './semantic.css';
+
+@keyframes debounce-border-drain {
+  from { stroke-dashoffset: 0; }
+  to { stroke-dashoffset: -100; }
+}

package/tokens/tokens.json

@@ -0,0 +1,65 @@
+{
+  "$schema": "https://tr.designtokens.org/format/",
+  "primitive": {
+    "$type": "color",
+    "black": { "$value": "#000000" },
+    "gray-950": { "$value": "#030712" },
+    "gray-900": { "$value": "#111827" },
+    "gray-800": { "$value": "#1f2937" },
+    "gray-700": { "$value": "#374151" },
+    "gray-600": { "$value": "#4b5563" },
+    "gray-500": { "$value": "#6b7280" },
+    "gray-400": { "$value": "#9ca3af" },
+    "gray-300": { "$value": "#d1d5db" },
+    "gray-200": { "$value": "#e5e7eb" },
+    "gray-100": { "$value": "#f3f4f6" },
+    "white": { "$value": "#ffffff" }
+  },
+  "semantic": {
+    "background": { "$type": "color", "$value": "{primitive.black}" },
+    "foreground": { "$type": "color", "$value": "{primitive.gray-300}" },
+    "surface": { "$type": "color", "$value": "{primitive.gray-800}" },
+    "surface-secondary": { "$type": "color", "$value": "{primitive.gray-900}" },
+    "surface-overlay": { "$type": "color", "$value": "{primitive.gray-700}" },
+    "muted": { "$type": "color", "$value": "{primitive.gray-800}" },
+    "muted-foreground": { "$type": "color", "$value": "{primitive.gray-500}" },
+    "text-primary": { "$type": "color", "$value": "{primitive.gray-300}" },
+    "text-secondary": { "$type": "color", "$value": "{primitive.gray-500}" },
+    "text-tertiary": { "$type": "color", "$value": "{primitive.gray-400}" },
+    "text-emphasis": { "$type": "color", "$value": "{primitive.white}" },
+    "border": { "$type": "color", "$value": "{primitive.gray-700}" },
+    "border-subtle": { "$type": "color", "$value": "{primitive.gray-800}" },
+    "primary": { "$type": "color", "$value": "#3b82f6" },
+    "destructive": { "$type": "color", "$value": "#ef4444" }
+  },
+  "typography": {
+    "$type": "dimension",
+    "body": { "$value": "14px", "$description": "text-sm — body text, descriptions" },
+    "small": { "$value": "12px", "$description": "text-xs — dominant size, labels, badges, helper text" },
+    "heading": { "$value": "18px", "$description": "text-lg — section headers (rare)" }
+  },
+  "font-weight": {
+    "$type": "dimension",
+    "default": { "$value": "500", "$description": "font-medium — dominant weight for text" },
+    "emphasis": { "$value": "600", "$description": "font-semibold — emphasis, important text" },
+    "strong": { "$value": "700", "$description": "font-bold — rare, special emphasis only" }
+  },
+  "spacing": {
+    "$type": "dimension",
+    "component-padding-sm": { "$value": "4px", "$description": "p-1 — tight spacing" },
+    "component-padding-md": { "$value": "8px", "$description": "p-2 — standard padding (dominant)" },
+    "component-padding-lg": { "$value": "12px", "$description": "p-3 — moderate padding" },
+    "component-padding-xl": { "$value": "16px", "$description": "p-4 — generous padding" },
+    "gap-tight": { "$value": "4px", "$description": "gap-1" },
+    "gap-normal": { "$value": "8px", "$description": "gap-2 — standard element spacing (dominant)" },
+    "gap-moderate": { "$value": "12px", "$description": "gap-3" },
+    "gap-section": { "$value": "16px", "$description": "gap-4" },
+    "gap-region": { "$value": "24px", "$description": "gap-6 — rare" }
+  },
+  "border-radius": {
+    "$type": "dimension",
+    "sm": { "$value": "4px", "$description": "rounded — standard rounding (dominant)" },
+    "lg": { "$value": "8px", "$description": "rounded-lg — modals, panels, cards" },
+    "full": { "$value": "9999px", "$description": "rounded-full — pills, badges" }
+  }
+}