@reopt-ai/opt-ui 1.4.1

package/dist/shells/index.cjs

@@ -0,0 +1,65 @@
+"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;

package/dist/shells/index.d.cts

@@ -0,0 +1,5 @@
+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';

package/dist/shells/index.d.ts

@@ -0,0 +1,5 @@
+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';

package/dist/shells/index.js

@@ -0,0 +1,65 @@
+"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
+};

package/dist/tailwind.css

@@ -0,0 +1,401 @@
+/*
+ * @reopt-ai/opt-ui — Tailwind v4 Integration
+ *
+ * Usage in consumer project's globals.css:
+ *
+ *   @import "tailwindcss";
+ *   @import "@reopt-ai/opt-ui/tailwind.css";
+ *   @source "../../node_modules/@reopt-ai/opt-ui/src";
+ *
+ * Requires: data-theme attribute on <html> (e.g. data-theme="default")
+ * Use OptThemeProvider for automatic theme management.
+ */
+
+/* ── 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";
+
+/* ── Dark Mode Variant ── */
+@custom-variant dark (&:where([data-theme$="-dark"], [data-theme$="-dark"] *));
+
+/* ── CSS Variable → Tailwind Utility Mapping ── */
+@theme inline {
+  /* Surface colors */
+  --color-surface: var(--opt-surface);
+  --color-surface-raised: var(--opt-surface-raised);
+  --color-surface-overlay: var(--opt-surface-overlay);
+  --color-surface-input: var(--opt-surface-input);
+  --color-surface-input-hover: var(--opt-surface-input-hover);
+  --color-surface-inset: var(--opt-surface-inset);
+
+  /* Accent colors */
+  --color-accent: var(--opt-accent);
+  --color-accent-hover: var(--opt-accent-hover);
+  --color-accent-active: var(--opt-accent-active);
+  --color-accent-subtle: var(--opt-accent-subtle);
+  --color-accent-fg: var(--opt-accent-fg);
+
+  /* Text colors */
+  --color-text-primary: var(--opt-text);
+  --color-text-secondary: var(--opt-text-secondary);
+  --color-text-tertiary: var(--opt-text-tertiary);
+
+  /* Border colors */
+  --color-border: var(--opt-border);
+  --color-border-hover: var(--opt-border-hover);
+  --color-border-subtle: var(--opt-border-subtle);
+
+  /* Focus ring */
+  --color-ring: var(--opt-ring);
+  --color-ring-offset: var(--opt-ring-offset);
+
+  /* Background colors */
+  --color-bg: var(--opt-bg);
+  --color-bg-subtle: var(--opt-bg-subtle);
+  --color-bg-muted: var(--opt-bg-muted);
+
+  /* Status colors */
+  --color-success: var(--opt-success);
+  --color-success-subtle: var(--opt-success-subtle);
+  --color-success-fg: var(--opt-success-fg);
+  --color-warning: var(--opt-warning);
+  --color-warning-subtle: var(--opt-warning-subtle);
+  --color-warning-fg: var(--opt-warning-fg);
+  --color-danger: var(--opt-danger);
+  --color-danger-subtle: var(--opt-danger-subtle);
+  --color-danger-fg: var(--opt-danger-fg);
+  --color-info: var(--opt-info);
+  --color-info-subtle: var(--opt-info-subtle);
+  --color-info-fg: var(--opt-info-fg);
+
+  /* Chart colors */
+  --color-chart-1: var(--opt-chart-1);
+  --color-chart-2: var(--opt-chart-2);
+  --color-chart-3: var(--opt-chart-3);
+  --color-chart-4: var(--opt-chart-4);
+  --color-chart-5: var(--opt-chart-5);
+  --color-chart-6: var(--opt-chart-6);
+  --color-chart-7: var(--opt-chart-7);
+  --color-chart-8: var(--opt-chart-8);
+  --color-chart-9: var(--opt-chart-9);
+  --color-chart-10: var(--opt-chart-10);
+  --color-chart-11: var(--opt-chart-11);
+  --color-chart-12: var(--opt-chart-12);
+  --color-chart-13: var(--opt-chart-13);
+  --color-chart-14: var(--opt-chart-14);
+  --color-chart-15: var(--opt-chart-15);
+  --color-chart-16: var(--opt-chart-16);
+
+  /* Semantic aliases */
+  --color-background: var(--opt-bg);
+  --color-foreground: var(--opt-text);
+
+  /* Border radius */
+  --radius-sm: var(--opt-radius-sm);
+  --radius-md: var(--opt-radius-md);
+  --radius-lg: var(--opt-radius-lg);
+  --radius-xl: var(--opt-radius-xl);
+
+  /* Shadows */
+  --shadow-sm: var(--opt-shadow-sm);
+  --shadow-md: var(--opt-shadow-md);
+  --shadow-lg: var(--opt-shadow-lg);
+
+  /* Semantic spacing */
+  --spacing-section: var(--opt-space-section);
+  --spacing-group: var(--opt-space-group);
+  --spacing-element: var(--opt-space-element);
+
+  /* Typography */
+  --font-heading: var(--opt-font-heading, system-ui, sans-serif);
+  --font-body: var(--opt-font-body, system-ui, sans-serif);
+  --tracking-heading: var(--opt-tracking-heading, -0.015em);
+  --weight-heading: var(--opt-weight-heading, 600);
+}
+
+/* ── Density ── */
+[data-density="compact"],
+[data-harness-density="compact"] {
+  --opt-control-sm: 1.75rem;
+  --opt-control-md: 2.25rem;
+  --opt-control-lg: 2.75rem;
+  --opt-control-padding-sm: 0.625rem;
+  --opt-control-padding-md: 0.75rem;
+  --opt-control-padding-lg: 1rem;
+  --opt-space-element: var(--opt-space-1-5);
+  --opt-space-group: var(--opt-space-3);
+}
+
+/* ── Semantic typography roles ── */
+.opt-type-body,
+.opt-type-label,
+.opt-type-supporting,
+.opt-type-code,
+.opt-type-heading-1,
+.opt-type-heading-2,
+.opt-type-heading-3,
+.opt-type-heading-4,
+.opt-type-heading-5,
+.opt-type-heading-6,
+.opt-type-display-1,
+.opt-type-display-2,
+.opt-type-display-3 {
+  font-size: var(--opt-type-size);
+  font-weight: var(--opt-type-weight);
+  line-height: var(--opt-type-leading);
+}
+
+.opt-type-body {
+  --opt-type-size: var(--opt-text-body-size);
+  --opt-type-weight: var(--opt-text-body-weight);
+  --opt-type-leading: var(--opt-text-body-leading);
+}
+.opt-type-label {
+  --opt-type-size: var(--opt-text-label-size);
+  --opt-type-weight: var(--opt-text-label-weight);
+  --opt-type-leading: var(--opt-text-label-leading);
+}
+.opt-type-supporting {
+  --opt-type-size: var(--opt-text-supporting-size);
+  --opt-type-weight: var(--opt-text-supporting-weight);
+  --opt-type-leading: var(--opt-text-supporting-leading);
+}
+.opt-type-code {
+  --opt-type-size: var(--opt-text-code-size);
+  --opt-type-weight: var(--opt-text-code-weight);
+  --opt-type-leading: var(--opt-text-code-leading);
+  font-family: var(--opt-font-code);
+}
+.opt-type-heading-1 {
+  --opt-type-size: var(--opt-text-heading-1-size);
+  --opt-type-weight: var(--opt-text-heading-1-weight);
+  --opt-type-leading: var(--opt-text-heading-1-leading);
+}
+.opt-type-heading-2 {
+  --opt-type-size: var(--opt-text-heading-2-size);
+  --opt-type-weight: var(--opt-text-heading-2-weight);
+  --opt-type-leading: var(--opt-text-heading-2-leading);
+}
+.opt-type-heading-3 {
+  --opt-type-size: var(--opt-text-heading-3-size);
+  --opt-type-weight: var(--opt-text-heading-3-weight);
+  --opt-type-leading: var(--opt-text-heading-3-leading);
+}
+.opt-type-heading-4 {
+  --opt-type-size: var(--opt-text-heading-4-size);
+  --opt-type-weight: var(--opt-text-heading-4-weight);
+  --opt-type-leading: var(--opt-text-heading-4-leading);
+}
+.opt-type-heading-5 {
+  --opt-type-size: var(--opt-text-heading-5-size);
+  --opt-type-weight: var(--opt-text-heading-5-weight);
+  --opt-type-leading: var(--opt-text-heading-5-leading);
+}
+.opt-type-heading-6 {
+  --opt-type-size: var(--opt-text-heading-6-size);
+  --opt-type-weight: var(--opt-text-heading-6-weight);
+  --opt-type-leading: var(--opt-text-heading-6-leading);
+}
+.opt-type-display-1 {
+  --opt-type-size: var(--opt-text-display-1-size);
+  --opt-type-weight: var(--opt-text-display-1-weight);
+  --opt-type-leading: var(--opt-text-display-1-leading);
+}
+.opt-type-display-2 {
+  --opt-type-size: var(--opt-text-display-2-size);
+  --opt-type-weight: var(--opt-text-display-2-weight);
+  --opt-type-leading: var(--opt-text-display-2-leading);
+}
+.opt-type-display-3 {
+  --opt-type-size: var(--opt-text-display-3-size);
+  --opt-type-weight: var(--opt-text-display-3-weight);
+  --opt-type-leading: var(--opt-text-display-3-leading);
+}
+
+/* ── Base Styles ── */
+body {
+  background: var(--opt-bg);
+  color: var(--opt-text);
+  font-family: var(--opt-font-body, system-ui, sans-serif);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: var(--opt-font-heading, system-ui, sans-serif);
+  letter-spacing: var(--opt-tracking-heading, -0.015em);
+  font-weight: var(--opt-weight-heading, 600);
+}
+
+h1[tabindex="-1"]:focus,
+h2[tabindex="-1"]:focus {
+  outline: none;
+}
+
+/* ── Primitive Transition States ──
+ *
+ * floating-ui-backed primitives (Popover, Menu, Tooltip, Combobox)는 inline
+ * `style="transform: translate(Xpx, Ypx)"`로 위치를 통제한다. data-enter
+ * 어트리뷰트가 첫 렌더부터 붙고 floating-ui ref attach 직후에 inline transform
+ * 값이 (0,0) → (Xpx, Ypx)로 바뀌는데, CSS가 transform에 transition을 걸어두면
+ * 그 변화가 애니메이션돼 popover가 viewport 좌상단에서 트리거 위치로 미끄러져
+ * 들어오는 시각 버그가 발생한다.
+ *
+ * 해결: slide 효과는 `translate` CSS 속성으로 옮겨 inline `transform`과 독립적으로
+ * 합성(CSS Transforms 2: translate × rotate × scale × transform)되도록 한다.
+ *
+ * dialog 엘리먼트는 `-translate-x-1/2`로 가로 중앙 정렬을 위해 같은 `translate`
+ * 속성을 쓰므로 제외한다 (포함 시 가로 정렬이 깨져 오른쪽으로 밀린다). */
+[data-enter]:not(dialog) {
+  opacity: 1;
+  translate: 0 0;
+  transition:
+    opacity 150ms ease-out,
+    translate 150ms ease-out;
+}
+
+[data-leave]:not(dialog) {
+  opacity: 0;
+  translate: 0 -4px;
+  transition:
+    opacity 100ms ease-in,
+    translate 100ms ease-in;
+}
+
+[data-backdrop] {
+  transition: opacity 200ms ease-out;
+}
+
+[data-backdrop][data-leave] {
+  transition: opacity 150ms ease-in;
+}
+
+/* Native <dialog> backdrop styling (opt-ui-primitives) */
+dialog::backdrop {
+  background: rgb(0 0 0 / 0.5);
+}
+
+dialog[data-enter]::backdrop {
+  animation: opt-backdrop-in 200ms ease-out;
+}
+
+dialog[data-leave]::backdrop {
+  animation: opt-backdrop-out 150ms ease-in forwards;
+}
+
+@keyframes opt-backdrop-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes opt-backdrop-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes opt-shimmer {
+  from {
+    background-position: 100% center;
+  }
+  to {
+    background-position: 0% center;
+  }
+}
+
+/* ── opt-chat: Message entry animation ─────────────────── */
+
+[data-opt-chat-message] {
+  opacity: 1;
+  transform: translateY(0);
+  transition:
+    opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
+    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@starting-style {
+  [data-opt-chat-message] {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+}
+
+/* ── opt-chat: Part stagger entry ─────────────────────── */
+
+[data-opt-chat-stagger] > * {
+  opacity: 1;
+  transform: translateY(0);
+  transition:
+    opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1),
+    transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+  transition-delay: calc(var(--stagger-i, 0) * 40ms);
+}
+
+@starting-style {
+  [data-opt-chat-stagger] > * {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+}
+
+/* ── opt-chat: Streaming accent bar ────────────────────── */
+
+[data-opt-chat-message][data-streaming="true"] {
+  border-left: 2px solid var(--opt-accent);
+  padding-left: 12px;
+  transition:
+    opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
+    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
+    border-color 0.4s ease-out;
+}
+
+[data-opt-chat-message]:not([data-streaming="true"]) {
+  border-left: 2px solid transparent;
+  padding-left: 12px;
+  transition: border-color 0.6s ease-out;
+}
+
+/* ── opt-chat: Collapsible content ─────────────────────── */
+
+[data-opt-chat-collapse] {
+  display: grid;
+  grid-template-rows: 1fr;
+  opacity: 1;
+  transition:
+    grid-template-rows 0.25s cubic-bezier(0.16, 1, 0.3, 1),
+    opacity 0.2s ease-out;
+}
+
+[data-opt-chat-collapse] > * {
+  overflow: hidden;
+}
+
+[data-opt-chat-collapse][data-state="closed"] {
+  grid-template-rows: 0fr;
+  opacity: 0;
+}
+
+/* ── Reduced motion ────────────────────────────────────── */
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}