@reopt-ai/opt-ui 1.4.1 → 1.6.0

package/dist/shells/index.cjs

@@ -1,65 +1,51 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-var _chunkX5WCXJAFcjs = require('../chunk-X5WCXJAF.cjs');
-require('../chunk-AFF2HPE5.cjs');
-require('../chunk-ONE3C5RV.cjs');
-
-// src/shells/index.ts
-
-
-
-
-
-var _optcharts = require('@reopt-ai/opt-charts');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-exports.AppMenubar = _chunkX5WCXJAFcjs.AppMenubar; exports.BranchSelect = _chunkX5WCXJAFcjs.BranchSelect; exports.CommandPalette = _chunkX5WCXJAFcjs.CommandPalette; exports.CommandPaletteTrigger = _chunkX5WCXJAFcjs.CommandPaletteTrigger; exports.ContentTabs = _chunkX5WCXJAFcjs.ContentTabs; exports.DashboardGrid = _chunkX5WCXJAFcjs.DashboardGrid; exports.DataTable = _chunkX5WCXJAFcjs.DataTable; exports.DeploymentTimeline = _chunkX5WCXJAFcjs.DeploymentTimeline; exports.DomainTable = _chunkX5WCXJAFcjs.DomainTable; exports.EditorToolbar = _chunkX5WCXJAFcjs.EditorToolbar; exports.EnvPanel = _chunkX5WCXJAFcjs.EnvPanel; exports.EventSparkline = _optcharts.EventSparkline; exports.FailureList = _chunkX5WCXJAFcjs.FailureList; exports.FaqAccordion = _chunkX5WCXJAFcjs.FaqAccordion; exports.KeyValueEditor = _chunkX5WCXJAFcjs.KeyValueEditor; exports.MetricsCard = _optcharts.MetricsCard; exports.NotificationToast = _chunkX5WCXJAFcjs.NotificationToast; exports.ProjectSwitcher = _chunkX5WCXJAFcjs.ProjectSwitcher; exports.ReportWidget = _optcharts.ReportWidget; exports.SearchCombobox = _chunkX5WCXJAFcjs.SearchCombobox; exports.SettingsForm = _chunkX5WCXJAFcjs.SettingsForm; exports.SidebarNav = _chunkX5WCXJAFcjs.SidebarNav; exports.StatusSelect = _chunkX5WCXJAFcjs.StatusSelect; exports.ToastProvider = _chunkX5WCXJAFcjs.ToastProvider; exports.TrendChart = _optcharts.TrendChart; exports.WorkflowCanvas = _chunkX5WCXJAFcjs.WorkflowCanvas; exports.useToast = _chunkX5WCXJAFcjs.useToast;
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_workflow_canvas = require("../workflow-canvas-3Jeevkgy.cjs");
+let _reopt_ai_opt_charts = require("@reopt-ai/opt-charts");
+exports.AppMenubar = require_workflow_canvas.AppMenubar;
+exports.BranchSelect = require_workflow_canvas.BranchSelect;
+exports.CommandPalette = require_workflow_canvas.CommandPalette;
+exports.CommandPaletteTrigger = require_workflow_canvas.CommandPaletteTrigger;
+exports.ContentTabs = require_workflow_canvas.ContentTabs;
+exports.DashboardGrid = require_workflow_canvas.DashboardGrid;
+exports.DataTable = require_workflow_canvas.DataTable;
+exports.DeploymentTimeline = require_workflow_canvas.DeploymentTimeline;
+exports.DomainTable = require_workflow_canvas.DomainTable;
+exports.EditorToolbar = require_workflow_canvas.EditorToolbar;
+exports.EnvPanel = require_workflow_canvas.EnvPanel;
+Object.defineProperty(exports, "EventSparkline", {
+	enumerable: true,
+	get: function() {
+		return _reopt_ai_opt_charts.EventSparkline;
+	}
+});
+exports.FailureList = require_workflow_canvas.FailureList;
+exports.FaqAccordion = require_workflow_canvas.FaqAccordion;
+exports.KeyValueEditor = require_workflow_canvas.KeyValueEditor;
+Object.defineProperty(exports, "MetricsCard", {
+	enumerable: true,
+	get: function() {
+		return _reopt_ai_opt_charts.MetricsCard;
+	}
+});
+exports.NotificationToast = require_workflow_canvas.NotificationToast;
+exports.ProjectSwitcher = require_workflow_canvas.ProjectSwitcher;
+Object.defineProperty(exports, "ReportWidget", {
+	enumerable: true,
+	get: function() {
+		return _reopt_ai_opt_charts.ReportWidget;
+	}
+});
+exports.SearchCombobox = require_workflow_canvas.SearchCombobox;
+exports.SettingsForm = require_workflow_canvas.SettingsForm;
+exports.SidebarNav = require_workflow_canvas.SidebarNav;
+exports.StatusSelect = require_workflow_canvas.StatusSelect;
+exports.ToastProvider = require_workflow_canvas.ToastProvider;
+Object.defineProperty(exports, "TrendChart", {
+	enumerable: true,
+	get: function() {
+		return _reopt_ai_opt_charts.TrendChart;
+	}
+});
+exports.WorkflowCanvas = require_workflow_canvas.WorkflowCanvas;
+exports.useToast = require_workflow_canvas.useToast;

package/dist/shells/index.d.cts

@@ -1,5 +1,4 @@
-export { A as AppMenubar, a as AppMenubarProps, B as BranchSelect, b as BranchSelectProps, C as ColumnDef, c as CommandPalette, d as CommandPaletteProps, e as CommandPaletteTrigger, f as CommandPaletteTriggerProps, g as ContentTabs, h as ContentTabsProps, D as DashboardGrid, i as DashboardGridProps, j as DataTable, k as DataTableProps, l as DeploymentTimeline, m as DeploymentTimelineProps, n as DomainTable, o as DomainTableProps, E as EditorToolbar, p as EditorToolbarProps, q as EnvPanel, r as EnvPanelProps, F as FailureList, s as FailureListLabels, t as FailureListProps, u as FaqAccordion, v as FaqAccordionProps, K as KeyValueEditor, w as KeyValueEditorLabels, x as KeyValueEditorProps, y as KeyValueEntry, N as NotificationToast, P as ProjectSwitcher, z as ProjectSwitcherProps, S as SearchCombobox, G as SearchComboboxProps, H as SettingsForm, I as SettingsFormProps, J as SidebarNav, L as SidebarNavProps, M as StatusSelect, O as StatusSelectProps, Q as ToastContextValue, R as ToastMessage, U as ToastProvider, V as ToastProviderProps, X as WorkflowCanvas, Y as WorkflowCanvasConnection, Z as WorkflowCanvasProps, _ as WorkflowCanvasStep, a0 as useToast } from '../index-BuvxoWHf.cjs';
-export { EventSparkline, EventSparklineLabels, EventSparklineProps, MetricsCard, MetricsCardProps, ReportWidget, ReportWidgetConfig, ReportWidgetLabels, ReportWidgetProps, ReportWidgetType, TrendChart, TrendChartProps } from '@reopt-ai/opt-charts';
-import 'react/jsx-runtime';
-import 'react';
-import '../types-D4-0lwaE.cjs';
+
+import { $ as CommandPaletteTriggerProps, A as ProjectSwitcher, B as EditorToolbar, C as DataTableProps, D as BranchSelectProps, E as BranchSelect, F as SettingsFormProps, G as AppMenubarProps, H as SidebarNav, I as FaqAccordion, J as SearchCombobox, K as StatusSelect, L as FaqAccordionProps, M as DeploymentTimeline, N as DeploymentTimelineProps, O as EnvPanel, P as SettingsForm, Q as CommandPaletteTrigger, R as ContentTabs, S as DataTable, T as DomainTableProps, U as SidebarNavProps, V as EditorToolbarProps, W as AppMenubar, X as DashboardGrid, Y as SearchComboboxProps, Z as DashboardGridProps, _ as ToastProviderProps, a as KeyValueEditor, b as useToast, c as KeyValueEntry, d as FailureListProps, et as CommandPalette, f as NotificationToast, g as ToastProvider, h as ToastMessage, i as WorkflowCanvasStep, j as ProjectSwitcherProps, k as EnvPanelProps, l as FailureList, m as ToastContextValue, n as WorkflowCanvasConnection, o as KeyValueEditorLabels, q as StatusSelectProps, r as WorkflowCanvasProps, s as KeyValueEditorProps, t as WorkflowCanvas, tt as CommandPaletteProps, u as FailureListLabels, w as DomainTable, x as ColumnDef, z as ContentTabsProps } from "../workflow-canvas-DghDRtHn.cjs";
+import { EventSparkline, EventSparklineLabels, EventSparklineProps, MetricsCard, MetricsCardProps, ReportWidget, ReportWidgetConfig, ReportWidgetLabels, ReportWidgetProps, ReportWidgetType, TrendChart, TrendChartProps } from "@reopt-ai/opt-charts";
+export { AppMenubar, type AppMenubarProps, BranchSelect, type BranchSelectProps, type ColumnDef, CommandPalette, type CommandPaletteProps, CommandPaletteTrigger, type CommandPaletteTriggerProps, ContentTabs, type ContentTabsProps, DashboardGrid, type DashboardGridProps, DataTable, type DataTableProps, DeploymentTimeline, type DeploymentTimelineProps, DomainTable, type DomainTableProps, EditorToolbar, type EditorToolbarProps, EnvPanel, type EnvPanelProps, EventSparkline, type EventSparklineLabels, type EventSparklineProps, FailureList, type FailureListLabels, type FailureListProps, FaqAccordion, type FaqAccordionProps, KeyValueEditor, type KeyValueEditorLabels, type KeyValueEditorProps, type KeyValueEntry, MetricsCard, type MetricsCardProps, NotificationToast, ProjectSwitcher, type ProjectSwitcherProps, ReportWidget, type ReportWidgetConfig, type ReportWidgetLabels, type ReportWidgetProps, type ReportWidgetType, SearchCombobox, type SearchComboboxProps, SettingsForm, type SettingsFormProps, SidebarNav, type SidebarNavProps, StatusSelect, type StatusSelectProps, type ToastContextValue, type ToastMessage, ToastProvider, type ToastProviderProps, TrendChart, type TrendChartProps, WorkflowCanvas, type WorkflowCanvasConnection, type WorkflowCanvasProps, type WorkflowCanvasStep, useToast };

package/dist/shells/index.d.ts

@@ -1,5 +1,4 @@
-export { A as AppMenubar, a as AppMenubarProps, B as BranchSelect, b as BranchSelectProps, C as ColumnDef, c as CommandPalette, d as CommandPaletteProps, e as CommandPaletteTrigger, f as CommandPaletteTriggerProps, g as ContentTabs, h as ContentTabsProps, D as DashboardGrid, i as DashboardGridProps, j as DataTable, k as DataTableProps, l as DeploymentTimeline, m as DeploymentTimelineProps, n as DomainTable, o as DomainTableProps, E as EditorToolbar, p as EditorToolbarProps, q as EnvPanel, r as EnvPanelProps, F as FailureList, s as FailureListLabels, t as FailureListProps, u as FaqAccordion, v as FaqAccordionProps, K as KeyValueEditor, w as KeyValueEditorLabels, x as KeyValueEditorProps, y as KeyValueEntry, N as NotificationToast, P as ProjectSwitcher, z as ProjectSwitcherProps, S as SearchCombobox, G as SearchComboboxProps, H as SettingsForm, I as SettingsFormProps, J as SidebarNav, L as SidebarNavProps, M as StatusSelect, O as StatusSelectProps, Q as ToastContextValue, R as ToastMessage, U as ToastProvider, V as ToastProviderProps, X as WorkflowCanvas, Y as WorkflowCanvasConnection, Z as WorkflowCanvasProps, _ as WorkflowCanvasStep, a0 as useToast } from '../index-BZ_lBlO1.js';
-export { EventSparkline, EventSparklineLabels, EventSparklineProps, MetricsCard, MetricsCardProps, ReportWidget, ReportWidgetConfig, ReportWidgetLabels, ReportWidgetProps, ReportWidgetType, TrendChart, TrendChartProps } from '@reopt-ai/opt-charts';
-import 'react/jsx-runtime';
-import 'react';
-import '../types-D4-0lwaE.js';
+
+import { $ as CommandPaletteTriggerProps, A as ProjectSwitcher, B as EditorToolbar, C as DataTableProps, D as BranchSelectProps, E as BranchSelect, F as SettingsFormProps, G as AppMenubarProps, H as SidebarNav, I as FaqAccordion, J as SearchCombobox, K as StatusSelect, L as FaqAccordionProps, M as DeploymentTimeline, N as DeploymentTimelineProps, O as EnvPanel, P as SettingsForm, Q as CommandPaletteTrigger, R as ContentTabs, S as DataTable, T as DomainTableProps, U as SidebarNavProps, V as EditorToolbarProps, W as AppMenubar, X as DashboardGrid, Y as SearchComboboxProps, Z as DashboardGridProps, _ as ToastProviderProps, a as KeyValueEditor, b as useToast, c as KeyValueEntry, d as FailureListProps, et as CommandPalette, f as NotificationToast, g as ToastProvider, h as ToastMessage, i as WorkflowCanvasStep, j as ProjectSwitcherProps, k as EnvPanelProps, l as FailureList, m as ToastContextValue, n as WorkflowCanvasConnection, o as KeyValueEditorLabels, q as StatusSelectProps, r as WorkflowCanvasProps, s as KeyValueEditorProps, t as WorkflowCanvas, tt as CommandPaletteProps, u as FailureListLabels, w as DomainTable, x as ColumnDef, z as ContentTabsProps } from "../workflow-canvas-Bar_O2SQ.js";
+import { EventSparkline, EventSparklineLabels, EventSparklineProps, MetricsCard, MetricsCardProps, ReportWidget, ReportWidgetConfig, ReportWidgetLabels, ReportWidgetProps, ReportWidgetType, TrendChart, TrendChartProps } from "@reopt-ai/opt-charts";
+export { AppMenubar, type AppMenubarProps, BranchSelect, type BranchSelectProps, type ColumnDef, CommandPalette, type CommandPaletteProps, CommandPaletteTrigger, type CommandPaletteTriggerProps, ContentTabs, type ContentTabsProps, DashboardGrid, type DashboardGridProps, DataTable, type DataTableProps, DeploymentTimeline, type DeploymentTimelineProps, DomainTable, type DomainTableProps, EditorToolbar, type EditorToolbarProps, EnvPanel, type EnvPanelProps, EventSparkline, type EventSparklineLabels, type EventSparklineProps, FailureList, type FailureListLabels, type FailureListProps, FaqAccordion, type FaqAccordionProps, KeyValueEditor, type KeyValueEditorLabels, type KeyValueEditorProps, type KeyValueEntry, MetricsCard, type MetricsCardProps, NotificationToast, ProjectSwitcher, type ProjectSwitcherProps, ReportWidget, type ReportWidgetConfig, type ReportWidgetLabels, type ReportWidgetProps, type ReportWidgetType, SearchCombobox, type SearchComboboxProps, SettingsForm, type SettingsFormProps, SidebarNav, type SidebarNavProps, StatusSelect, type StatusSelectProps, type ToastContextValue, type ToastMessage, ToastProvider, type ToastProviderProps, TrendChart, type TrendChartProps, WorkflowCanvas, type WorkflowCanvasConnection, type WorkflowCanvasProps, type WorkflowCanvasStep, useToast };

package/dist/shells/index.js

@@ -1,65 +1,4 @@
 "use client";
-import {
-  AppMenubar,
-  BranchSelect,
-  CommandPalette,
-  CommandPaletteTrigger,
-  ContentTabs,
-  DashboardGrid,
-  DataTable,
-  DeploymentTimeline,
-  DomainTable,
-  EditorToolbar,
-  EnvPanel,
-  FailureList,
-  FaqAccordion,
-  KeyValueEditor,
-  NotificationToast,
-  ProjectSwitcher,
-  SearchCombobox,
-  SettingsForm,
-  SidebarNav,
-  StatusSelect,
-  ToastProvider,
-  WorkflowCanvas,
-  useToast
-} from "../chunk-QWBHD54V.js";
-import "../chunk-RBM2RNC2.js";
-import "../chunk-3GWWZKX7.js";
-
-// src/shells/index.ts
-import {
-  MetricsCard,
-  TrendChart,
-  EventSparkline,
-  ReportWidget
-} from "@reopt-ai/opt-charts";
-export {
-  AppMenubar,
-  BranchSelect,
-  CommandPalette,
-  CommandPaletteTrigger,
-  ContentTabs,
-  DashboardGrid,
-  DataTable,
-  DeploymentTimeline,
-  DomainTable,
-  EditorToolbar,
-  EnvPanel,
-  EventSparkline,
-  FailureList,
-  FaqAccordion,
-  KeyValueEditor,
-  MetricsCard,
-  NotificationToast,
-  ProjectSwitcher,
-  ReportWidget,
-  SearchCombobox,
-  SettingsForm,
-  SidebarNav,
-  StatusSelect,
-  ToastProvider,
-  TrendChart,
-  WorkflowCanvas,
-  useToast
-};
+import { C as CommandPaletteTrigger, S as DashboardGrid, _ as EditorToolbar, a as ToastProvider, b as StatusSelect, c as DataTable, d as EnvPanel, f as ProjectSwitcher, g as ContentTabs, h as FaqAccordion, i as NotificationToast, l as DomainTable, m as SettingsForm, n as KeyValueEditor, p as DeploymentTimeline, r as FailureList, s as useToast, t as WorkflowCanvas, u as BranchSelect, v as SidebarNav, w as CommandPalette, x as SearchCombobox, y as AppMenubar } from "../workflow-canvas-BGBAcjf-.js";
+import { EventSparkline, MetricsCard, ReportWidget, TrendChart } from "@reopt-ai/opt-charts";
+export { AppMenubar, BranchSelect, CommandPalette, CommandPaletteTrigger, ContentTabs, DashboardGrid, DataTable, DeploymentTimeline, DomainTable, EditorToolbar, EnvPanel, EventSparkline, FailureList, FaqAccordion, KeyValueEditor, MetricsCard, NotificationToast, ProjectSwitcher, ReportWidget, SearchCombobox, SettingsForm, SidebarNav, StatusSelect, ToastProvider, TrendChart, WorkflowCanvas, useToast };

package/dist/tailwind.css

@@ -12,11 +12,11 @@
  */
 
 /* ── Theme Presets (5 presets × light/dark, natural force-light) ── */
-@import "./lib/theme/presets/default.css";
-@import "./lib/theme/presets/minimal.css";
-@import "./lib/theme/presets/natural.css";
-@import "./lib/theme/presets/pro.css";
-@import "./lib/theme/presets/mono-dark.css";
+@import "@reopt-ai/opt-ui/theme/presets/default.css";
+@import "@reopt-ai/opt-ui/theme/presets/minimal.css";
+@import "@reopt-ai/opt-ui/theme/presets/natural.css";
+@import "@reopt-ai/opt-ui/theme/presets/pro.css";
+@import "@reopt-ai/opt-ui/theme/presets/mono-dark.css";
 
 /* ── Dark Mode Variant ── */
 @custom-variant dark (&:where([data-theme$="-dark"], [data-theme$="-dark"] *));
@@ -116,6 +116,55 @@
   --weight-heading: var(--opt-weight-heading, 600);
 }
 
+/* ── Short semantic utility aliases ──
+ *
+ * `@theme inline`의 토큰 이름은 스코프를 접두사로 갖기 때문에(`--color-bg-subtle`,
+ * `--color-text-secondary`) 생성되는 유틸이 `bg-bg-subtle` / `text-text-secondary`
+ * 처럼 접두사가 두 번 반복된다. 소비자는 자연스럽게 짧은 쪽(`bg-subtle`,
+ * `text-secondary`)을 쓰고, 그 클래스는 존재하지 않아 스타일이 조용히 사라진다.
+ * 실제 소비 프로젝트에서 이 무음 실패가 반복 관측됐고(죽은 클래스 20회), 결국
+ * Tailwind를 우회해 CSS Module에서 `var(--opt-*)`를 직접 참조하는 경로로 이어졌다.
+ *
+ * 아래 alias는 그 짧은 이름을 정확한 시맨틱으로 1급 유틸로 만든다. 기존 이중어
+ * 이름(`bg-bg-subtle` 등)은 그대로 유효하다 — 제거가 아니라 추가다.
+ *
+ * 제약: static utility에는 alpha modifier가 붙지 않는다(`bg-subtle/40`은 생성되지
+ * 않음 — Tailwind의 `--modifier()`는 functional utility 전용). 투명도가 필요하면
+ * 정식 토큰 이름을 쓴다: `text-text-secondary/60`, `bg-accent-subtle` 등. */
+@utility bg-subtle {
+  background-color: var(--opt-bg-subtle);
+}
+@utility bg-muted {
+  background-color: var(--opt-bg-muted);
+}
+@utility bg-raised {
+  background-color: var(--opt-surface-raised);
+}
+@utility bg-overlay {
+  background-color: var(--opt-surface-overlay);
+}
+@utility bg-inset {
+  background-color: var(--opt-surface-inset);
+}
+@utility bg-input {
+  background-color: var(--opt-surface-input);
+}
+@utility text-primary {
+  color: var(--opt-text);
+}
+@utility text-secondary {
+  color: var(--opt-text-secondary);
+}
+@utility text-tertiary {
+  color: var(--opt-text-tertiary);
+}
+@utility border-subtle {
+  border-color: var(--opt-border-subtle);
+}
+@utility border-strong {
+  border-color: var(--opt-border-hover);
+}
+
 /* ── Density ── */
 [data-density="compact"],
 [data-harness-density="compact"] {

package/dist/theme/presets/default.css

@@ -182,12 +182,12 @@
 
 [data-theme="default-dark"] {
   /* Surface */
-  --opt-surface: hsl(204 4% 16%);
-  --opt-surface-raised: hsl(204 4% 16%);
-  --opt-surface-overlay: hsl(204 4% 16%);
-  --opt-surface-input: hsl(204 4% 10%);
-  --opt-surface-input-hover: hsl(204 4% 8%);
-  --opt-surface-inset: rgba(255, 255, 255, 0.04);
+  --opt-surface: hsl(204 5% 7%);
+  --opt-surface-raised: hsl(204 5% 9%);
+  --opt-surface-overlay: hsl(204 5% 12%);
+  --opt-surface-input: hsl(204 5% 5%);
+  --opt-surface-input-hover: hsl(204 5% 4%);
+  --opt-surface-inset: rgba(255, 255, 255, 0.02);
 
   /* Accent */
   --opt-accent: hsl(221 83% 53%);
@@ -242,18 +242,18 @@
 
   /* Border */
   --opt-border-width: 1px;
-  --opt-border: rgba(255, 255, 255, 0.1);
-  --opt-border-hover: rgba(255, 255, 255, 0.25);
-  --opt-border-subtle: rgba(255, 255, 255, 0.08);
+  --opt-border: rgba(255, 255, 255, 0.07);
+  --opt-border-hover: rgba(255, 255, 255, 0.18);
+  --opt-border-subtle: rgba(255, 255, 255, 0.04);
 
   /* Focus */
   --opt-ring: hsl(221 83% 53%);
-  --opt-ring-offset: hsl(204 4% 16%);
+  --opt-ring-offset: hsl(204 5% 7%);
 
   /* Background */
   --opt-bg: #0a0a0a;
-  --opt-bg-subtle: rgba(255, 255, 255, 0.06);
-  --opt-bg-muted: rgba(255, 255, 255, 0.08);
+  --opt-bg-subtle: rgba(255, 255, 255, 0.03);
+  --opt-bg-muted: rgba(255, 255, 255, 0.05);
 
   /* Status */
   --opt-success: hsl(142 71% 45%);

package/dist/theme/server.cjs

@@ -0,0 +1,310 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("@reopt-ai/opt-palette");
+const THEME_REGISTRY = {
+	default: {
+		id: "default",
+		label: "Default",
+		description: "Blue accent, balanced radius & shadow",
+		palette: {
+			seed: "#2563eb",
+			harmony: "split-complementary",
+			radiusScale: "medium",
+			shadowIntensity: "subtle",
+			neutralTemperature: "cool"
+		},
+		switcherSwatches: [
+			"hsl(221 83% 53%)",
+			"hsl(142 71% 45%)",
+			"hsl(38 92% 50%)"
+		]
+	},
+	minimal: {
+		id: "minimal",
+		label: "Minimal",
+		description: "Monochrome, no shadow, sharp edges",
+		palette: {
+			seed: "#333333",
+			harmony: "analogous",
+			radiusScale: "sharp",
+			shadowIntensity: "none",
+			neutralTemperature: "cool"
+		},
+		switcherSwatches: [
+			"hsl(0 0% 20%)",
+			"hsl(0 0% 45%)",
+			"hsl(0 0% 70%)"
+		]
+	},
+	natural: {
+		id: "natural",
+		label: "Natural",
+		description: "Always light — sage accent, warm cream",
+		forceLightOnly: true,
+		palette: {
+			seed: "#5a9376",
+			harmony: "complementary",
+			radiusScale: "medium",
+			shadowIntensity: "subtle",
+			neutralTemperature: "warm"
+		},
+		switcherSwatches: [
+			"hsl(155 38% 45%)",
+			"hsl(25 65% 55%)",
+			"hsl(45 75% 50%)"
+		]
+	},
+	pro: {
+		id: "pro",
+		label: "Pro",
+		description: "Neon blue accent, mono headings, ultra-dense",
+		palette: {
+			seed: "#0080ff",
+			harmony: "tetradic",
+			radiusScale: "sharp",
+			shadowIntensity: "subtle",
+			neutralTemperature: "cool"
+		},
+		switcherSwatches: [
+			"hsl(210 100% 55%)",
+			"hsl(170 90% 48%)",
+			"hsl(290 85% 60%)"
+		]
+	},
+	"mono-dark": {
+		id: "mono-dark",
+		label: "Mono Dark",
+		description: "OLED-friendly black, neon cyan accent, mono headings",
+		palette: {
+			seed: "#00d4ff",
+			harmony: "tetradic",
+			radiusScale: "sharp",
+			shadowIntensity: "subtle",
+			neutralTemperature: "cool"
+		},
+		switcherSwatches: [
+			"hsl(190 100% 50%)",
+			"hsl(0 0% 8%)",
+			"hsl(280 90% 65%)"
+		]
+	}
+};
+/** All registered preset ids in declaration order. */
+const THEME_PRESET_IDS = Object.keys(THEME_REGISTRY);
+/** Type guard for a known preset id. */
+function isThemePresetId(id) {
+	return id in THEME_REGISTRY;
+}
+/** Preset ids that suppress dark mode generation. */
+const FORCE_LIGHT_PRESET_IDS = new Set(THEME_PRESET_IDS.filter((id) => THEME_REGISTRY[id].forceLightOnly));
+/**
+* Map from removed preset ids to the closest surviving preset. Boot script and
+* `readStoredTheme` consult this so users with persisted `corporate`/`playful`
+* values silently land on a working preset on next page load instead of
+* showing the global default fallback for an unknown id.
+*
+* Keep this around indefinitely — localStorage values are forever and the
+* cost of two extra entries is negligible.
+*/
+const DEPRECATED_PRESET_MIGRATIONS = Object.freeze({
+	corporate: "default",
+	playful: "default"
+});
+/**
+* Resolve a possibly-deprecated preset id to a registered one. Returns the
+* input unchanged when it is already valid; returns the migration target when
+* it is a known deprecated id; returns `null` when the id is unknown
+* altogether (caller should fall back to its default).
+*/
+function migrateDeprecatedPresetId(id) {
+	if (!id) return null;
+	if (isThemePresetId(id)) return id;
+	if (id in DEPRECATED_PRESET_MIGRATIONS) return DEPRECATED_PRESET_MIGRATIONS[id];
+	return null;
+}
+//#endregion
+//#region src/lib/theme/theme-serialize.ts
+/**
+* theme-serialize.ts
+*
+* Pure helpers that turn a `ThemeSpec` into the artifacts the runtime needs:
+* resolved descriptor + mode, computed token maps for generated palettes, and
+* `<style>` CSS strings ready to be injected into `<head>`.
+*
+* Kept side-effect free so the boot script and the provider can share the
+* same logic without dragging React into the client bundle's critical path.
+*/
+/** Element id used for the global generated theme style tag. */
+const GLOBAL_THEME_STYLE_ID = "opt-global-theme";
+/** localStorage key for the persisted ThemeSpec (generated mode). */
+const THEME_SPEC_STORAGE_KEY = "opt-theme-spec";
+/**
+* localStorage key for the cached, pre-serialized token maps that match the
+* spec under `THEME_SPEC_STORAGE_KEY`. The boot script reads this directly so
+* it can inline tokens without invoking opt-palette at startup.
+*/
+const THEME_TOKENS_STORAGE_KEY = "opt-theme-tokens";
+//#endregion
+//#region src/lib/theme/theme-resolution.ts
+/**
+* Registered preset id list. Preferred for runtime iteration.
+* @deprecated Prefer `THEME_PRESET_IDS` from `./presets`.
+*/
+const THEME_PRESET_VALUES = THEME_PRESET_IDS;
+const THEME_MODE_VALUES = [
+	"light",
+	"dark",
+	"system"
+];
+const LEGACY_THEME_STORAGE_KEY = "opt-theme";
+const THEME_PRESET_STORAGE_KEY = "opt-preset";
+const THEME_MODE_STORAGE_KEY = "opt-mode";
+const DARK_MQ = "(prefers-color-scheme: dark)";
+/**
+* Presets that force light mode regardless of system dark/light preference.
+* Mirrors `FORCE_LIGHT_PRESET_IDS` from `./presets` — kept as alias for
+* existing imports.
+*/
+const FORCE_LIGHT_PRESETS = FORCE_LIGHT_PRESET_IDS;
+/** All valid compound theme names. Useful for static enumeration. */
+const ALL_COMPOUND_THEMES = THEME_PRESET_IDS.flatMap((id) => FORCE_LIGHT_PRESET_IDS.has(id) ? [id] : [id, `${id}-dark`]);
+function hasStorageMutation(storage) {
+	return typeof storage.setItem === "function" && typeof storage.removeItem === "function";
+}
+/** Handles is theme preset. */
+function isThemePreset(value) {
+	return typeof value === "string" && THEME_PRESET_VALUES.includes(value);
+}
+/** Handles is theme mode. */
+function isThemeMode(value) {
+	return typeof value === "string" && THEME_MODE_VALUES.includes(value);
+}
+/** Compute compound theme name from preset + resolved mode. */
+function getCompoundTheme(preset, resolvedMode) {
+	if (FORCE_LIGHT_PRESETS.has(preset)) return preset;
+	return resolvedMode === "dark" ? `${preset}-dark` : preset;
+}
+/** Handles resolve theme mode. */
+function resolveThemeMode(preset, mode, systemDark) {
+	if (FORCE_LIGHT_PRESETS.has(preset)) return "light";
+	if (mode === "system") return systemDark ? "dark" : "light";
+	return mode;
+}
+/** Handles read stored theme. */
+function readStoredTheme(storage, defaultPreset, defaultMode, options = {}) {
+	const legacy = storage.getItem(LEGACY_THEME_STORAGE_KEY);
+	const storedPreset = storage.getItem(THEME_PRESET_STORAGE_KEY);
+	const storedMode = storage.getItem(THEME_MODE_STORAGE_KEY);
+	let preset = defaultPreset;
+	if (typeof legacy === "string") {
+		const migratedLegacy = migrateDeprecatedPresetId(legacy);
+		if (migratedLegacy) {
+			if (options.migrateLegacy && hasStorageMutation(storage)) {
+				storage.setItem(THEME_PRESET_STORAGE_KEY, migratedLegacy);
+				storage.removeItem(LEGACY_THEME_STORAGE_KEY);
+			}
+			preset = migratedLegacy;
+		}
+	} else if (typeof storedPreset === "string") {
+		const migrated = migrateDeprecatedPresetId(storedPreset);
+		if (migrated) {
+			preset = migrated;
+			if (hasStorageMutation(storage) && migrated !== storedPreset && storedPreset in DEPRECATED_PRESET_MIGRATIONS) storage.setItem(THEME_PRESET_STORAGE_KEY, migrated);
+		}
+	}
+	const mode = isThemeMode(storedMode) ? storedMode : defaultMode;
+	return {
+		preset,
+		mode
+	};
+}
+/** Normalize a mode against an optional allowed-mode list. */
+function coerceThemeMode(mode, allowedModes, fallback = "system") {
+	var _allowedModes$;
+	if (!allowedModes || allowedModes.length === 0) return mode;
+	if (allowedModes.includes(mode)) return mode;
+	if (allowedModes.includes(fallback)) return fallback;
+	return (_allowedModes$ = allowedModes[0]) !== null && _allowedModes$ !== void 0 ? _allowedModes$ : fallback;
+}
+/**
+* Build the inline `<head>` boot script that paints the correct theme before
+* React mounts. Two paths:
+*
+* 1. **Generated** — when both `opt-theme-spec` (kind: "generated") and
+*    `opt-theme-tokens` are present and well-formed, a `<style id="…">` tag
+*    is inserted with the cached tokens and `<html data-theme>` is set to the
+*    generated id (with optional `-dark` suffix). This bypasses opt-palette
+*    at startup so first paint is instant.
+* 2. **Preset (legacy)** — falls through to the existing preset selector,
+*    including legacy `opt-theme` → `opt-preset` migration.
+*
+* Returned as a single minified line; intended for `dangerouslySetInnerHTML`.
+*/
+function createThemeBootScript(defaultPreset = "default", defaultMode = "system", options = {}) {
+	var _options$allowedModes, _allowedModes$2;
+	const presetValues = JSON.stringify(THEME_PRESET_VALUES);
+	const modeValues = JSON.stringify(THEME_MODE_VALUES);
+	const allowedModes = ((_options$allowedModes = options.allowedModes) === null || _options$allowedModes === void 0 ? void 0 : _options$allowedModes.length) ? options.allowedModes : THEME_MODE_VALUES;
+	const allowedModeValues = JSON.stringify(allowedModes);
+	const forceLightPresets = JSON.stringify(Array.from(FORCE_LIGHT_PRESETS));
+	const deprecatedMap = JSON.stringify(DEPRECATED_PRESET_MIGRATIONS);
+	const lockedPreset = options.lockedPreset;
+	const defaultPresetLiteral = JSON.stringify(lockedPreset !== null && lockedPreset !== void 0 ? lockedPreset : defaultPreset);
+	const defaultModeLiteral = JSON.stringify(coerceThemeMode(defaultMode, allowedModes, (_allowedModes$2 = allowedModes[0]) !== null && _allowedModes$2 !== void 0 ? _allowedModes$2 : "system"));
+	const lockedPresetLiteral = JSON.stringify(lockedPreset !== null && lockedPreset !== void 0 ? lockedPreset : null);
+	const styleId = JSON.stringify(GLOBAL_THEME_STYLE_ID);
+	const specKey = JSON.stringify(THEME_SPEC_STORAGE_KEY);
+	const tokensKey = JSON.stringify(THEME_TOKENS_STORAGE_KEY);
+	const presetKey = JSON.stringify(THEME_PRESET_STORAGE_KEY);
+	const modeKey = JSON.stringify(THEME_MODE_STORAGE_KEY);
+	const legacyKey = JSON.stringify(LEGACY_THEME_STORAGE_KEY);
+	const darkMq = JSON.stringify(DARK_MQ);
+	return `
+try {
+  var pv=${presetValues},mv=${modeValues},am=${allowedModeValues},fp=${forceLightPresets},dm=${deprecatedMap},lk=${lockedPresetLiteral};
+  function mp(v){if(typeof v!=="string")return null;if(pv.indexOf(v)>=0)return v;return Object.prototype.hasOwnProperty.call(dm,v)?dm[v]:null;}
+  var p=${defaultPresetLiteral};
+  if(!lk){
+    var lp=localStorage.getItem(${legacyKey}),sp=localStorage.getItem(${presetKey});
+    var lpm=mp(lp),spm=mp(sp);
+    p=lpm||spm||${defaultPresetLiteral};
+    if(lpm){localStorage.setItem(${presetKey},lpm);localStorage.removeItem(${legacyKey});}
+    else if(sp&&spm&&sp!==spm){localStorage.setItem(${presetKey},spm);}
+  }
+  var sm=localStorage.getItem(${modeKey});
+  var m=(typeof sm==="string"&&mv.indexOf(sm)>=0&&am.indexOf(sm)>=0)?sm:${defaultModeLiteral};
+  var spec=null,tk=null;
+  if(!lk){try{var sj=localStorage.getItem(${specKey});if(sj)spec=JSON.parse(sj);}catch(e){}}
+  if(!lk){try{var tj=localStorage.getItem(${tokensKey});if(tj)tk=JSON.parse(tj);}catch(e){}}
+  if(!lk&&spec&&spec.kind==="generated"&&tk&&typeof tk.id==="string"&&tk.light&&typeof tk.light==="object"){
+    var fld=spec.forceLightOnly===true;
+    var dk=!fld&&(m==="dark"||(m==="system"&&matchMedia(${darkMq}).matches));
+    var tt=(dk&&tk.dark)?tk.dark:tk.light;
+    var cid=(dk&&tk.dark)?(tk.id+"-dark"):tk.id;
+    var css="";
+    for(var k in tt){if(Object.prototype.hasOwnProperty.call(tt,k))css+=k+":"+tt[k]+";"}
+    var st=document.getElementById(${styleId});
+    if(!st){st=document.createElement("style");st.id=${styleId};document.head.appendChild(st);}
+    st.textContent='[data-theme="'+cid+'"]{'+css+'}';
+    document.documentElement.setAttribute("data-theme",cid);
+  } else {
+    var d=fp.indexOf(p)<0&&(m==="dark"||(m==="system"&&matchMedia(${darkMq}).matches));
+    document.documentElement.setAttribute("data-theme",d?p+"-dark":p);
+  }
+} catch(e){}`.replace(/\n\s*/g, "");
+}
+//#endregion
+exports.ALL_COMPOUND_THEMES = ALL_COMPOUND_THEMES;
+exports.DARK_MQ = DARK_MQ;
+exports.FORCE_LIGHT_PRESETS = FORCE_LIGHT_PRESETS;
+exports.LEGACY_THEME_STORAGE_KEY = LEGACY_THEME_STORAGE_KEY;
+exports.THEME_MODE_STORAGE_KEY = THEME_MODE_STORAGE_KEY;
+exports.THEME_MODE_VALUES = THEME_MODE_VALUES;
+exports.THEME_PRESET_STORAGE_KEY = THEME_PRESET_STORAGE_KEY;
+exports.THEME_PRESET_VALUES = THEME_PRESET_VALUES;
+exports.coerceThemeMode = coerceThemeMode;
+exports.createThemeBootScript = createThemeBootScript;
+exports.getCompoundTheme = getCompoundTheme;
+exports.isThemeMode = isThemeMode;
+exports.isThemePreset = isThemePreset;
+exports.readStoredTheme = readStoredTheme;
+exports.resolveThemeMode = resolveThemeMode;