@dfosco/storyboard-core 4.2.0-beta.2 → 4.2.0-beta.21

package/src/comments/ui/composer.js

@@ -1,12 +1,13 @@
 /**
- * Comment composer — Svelte inline text input that appears at click position.
+ * Comment composer — React inline text input that appears at click position.
  *
  * Positioned absolutely within the comment overlay. Submits to the comments API.
  * Styled with Tachyons + sb-* custom classes for light/dark mode support.
  */
 
-import { mount, unmount } from 'svelte'
-import ComposerComponent from './Composer.svelte'
+import { createElement } from 'react'
+import { createRoot } from 'react-dom/client'
+import ComposerComponent from './Composer.jsx'
 import { getCachedUser } from '../auth.js'
 import { saveDraft, clearDraft, composerDraftKey } from '../commentDrafts.js'
 import './comment-layout.css'
@@ -36,7 +37,7 @@ export function showComposer(container, xPct, yPct, route, callbacks = {}) {
   // Stop click from propagating (prevents placing another composer)
   composer.addEventListener('click', (e) => e.stopPropagation())
 
-  let instance = null
+  let root = null
   let skipDraftSave = false
   const draftKey = composerDraftKey(route)
 
@@ -84,7 +85,7 @@ export function showComposer(container, xPct, yPct, route, callbacks = {}) {
   }
 
   function destroy() {
-    // Save draft from DOM before Svelte unmounts (reactive state is unreliable after unmount)
+    // Save draft from DOM before React unmounts
     if (!skipDraftSave) {
       const textarea = composer.querySelector('textarea')
       const val = textarea?.value?.trim()
@@ -94,7 +95,7 @@ export function showComposer(container, xPct, yPct, route, callbacks = {}) {
     }
 
     window.removeEventListener('keydown', onEscape, true)
-    if (instance) { unmount(instance); instance = null }
+    if (root) { root.unmount(); root = null }
     composer.remove()
   }
 
@@ -109,25 +110,23 @@ export function showComposer(container, xPct, yPct, route, callbacks = {}) {
   }
   window.addEventListener('keydown', onEscape, true)
 
-  instance = mount(ComposerComponent, {
-    target: composer,
-    props: {
-      user,
-      route,
-      onCancel: () => {
-        clearDraft(draftKey)
-        skipDraftSave = true
-        destroy()
-        callbacks.onCancel?.()
-      },
-      onSubmit: (text) => {
-        clearDraft(draftKey)
-        skipDraftSave = true
-        destroy()
-        callbacks.onSubmitOptimistic?.(text, pos.x, pos.y)
-      },
+  root = createRoot(composer)
+  root.render(createElement(ComposerComponent, {
+    user,
+    route,
+    onCancel: () => {
+      clearDraft(draftKey)
+      skipDraftSave = true
+      destroy()
+      callbacks.onCancel?.()
+    },
+    onSubmit: (text) => {
+      clearDraft(draftKey)
+      skipDraftSave = true
+      destroy()
+      callbacks.onSubmitOptimistic?.(text, pos.x, pos.y)
     },
-  })
+  }))
 
   applyPosition()
   // Auto-focus textarea after DOM is ready

package/src/comments/ui/index.js

@@ -1,8 +1,7 @@
 /**
- * Svelte UI exports for the comments system.
+ * React UI exports for the comments system.
  *
- * These require a Svelte peer dependency (^5.0.0).
- * Import from '@dfosco/storyboard-core/comments/svelte'.
+ * Import from '@dfosco/storyboard-core/comments/ui'.
  */
 
 // Mount

package/src/configSchema.js

@@ -15,10 +15,57 @@
  * @property {Record<string, string>} [propsMap] — static props merged into widget props
  */
 
+/**
+ * @typedef {object} CanvasTerminalConfig
+ * @property {boolean} [resizable]   — whether terminal widgets can be resized (default false)
+ * @property {number}  [defaultWidth]  — default width for new terminal widgets
+ * @property {number}  [defaultHeight] — default height for new terminal widgets
+ * @property {number}  [fontSize]    — terminal font size
+ * @property {string}  [fontFamily]  — terminal font family
+ * @property {string}  [prompt]      — shell prompt string
+ * @property {string|null} [startupCommand] — skip welcome screen: "copilot", "shell", or a custom command. null shows welcome.
+ * @property {object|null} [defaultStartupSequence] — sequence of steps to run after terminal opens
+ */
+
+/**
+ * @typedef {object} CanvasZoomConfig
+ * @property {number} min  — minimum zoom percentage (default 10)
+ * @property {number} max  — maximum zoom percentage (default 250)
+ * @property {number} step — zoom increment/decrement step (default 10)
+ */
+
 /**
  * @typedef {object} CanvasConfig
  * @property {PasteRule[]} pasteRules       — URL→widget conversion rules (evaluated in order, first match wins)
  * @property {{ embedBehavior: string, ghGuard: string }} github — GitHub-specific embed settings
+ * @property {CanvasTerminalConfig} [terminal] — terminal widget settings
+ * @property {Record<string, CanvasAgentConfig>} [agents] — per-agent overrides
+ * @property {CanvasZoomConfig} [zoom] — zoom min/max/step settings
+ */
+
+/**
+ * @typedef {object} CanvasAgentConfig
+ * @property {string}  [label]         — display label
+ * @property {string}  [icon]          — icon name
+ * @property {string}  [startupCommand] — command to run on startup
+ * @property {string}  [resumeCommand]  — command to browse/resume existing sessions (e.g. "copilot --resume")
+ * @property {string}  [postStartup]   — command sent after agent readiness (e.g. "/allow-all on")
+ * @property {string}  [readinessSignal] — tmux pane text that signals the agent is ready (fragile, prefer readinessFile)
+ * @property {boolean} [readinessFile]  — use a file-based SessionStart hook for readiness (writes --settings with hook, polls for signal file)
+ * @property {boolean} [resizable]     — override terminal resizability for this agent
+ * @property {number}  [defaultWidth]  — override default width
+ * @property {number}  [defaultHeight] — override default height
+ */
+
+/**
+ * @typedef {object} HotPoolConfig
+ * @property {boolean} [enabled]       — enable/disable all pools (default: true)
+ * @property {boolean} [verbose]       — log to Vite terminal (default: false)
+ * @property {number}  [default_pool_size]     — default baseline per pool (default: 1)
+ * @property {number}  [default_max_pool_size] — default surge cap per pool (default: 3)
+ * @property {boolean} [load_balancer] — enable auto-scaling (default: true)
+ * @property {number}  [load_balancer_cooldown_mins] — minutes idle before scale-down (default: 10)
+ * @property {Record<string, { pool_size?: number, max_pool_size?: number }>} [pools] — per-pool overrides (terminal, prompt, copilot, claude, codex)
  */
 
 /**
@@ -63,7 +110,7 @@
  * @property {boolean} enabled       — master toggle for customer mode
  * @property {boolean} hideChrome    — hides all toolbars (except canvas tools), branchbar, cmd+k, cmd+.
  * @property {boolean} hideHomepage  — removes the storyboard homepage (leaves empty page)
- * @property {string}  protoHomepage — internal /path that replaces homepage; redirects from / and /viewfinder
+ * @property {string}  protoHomepage — internal /path that replaces homepage; redirects from / and /workspace
  */
 
 /**
@@ -79,6 +126,7 @@
  * @property {{ hide?: string[] }} [ui]
  * @property {object}   [toolbar]
  * @property {CanvasConfig} [canvas]
+ * @property {HotPoolConfig} [hotPool]
  * @property {CommandPaletteConfig} [commandPalette]
  * @property {CustomerModeConfig} [customerMode]
  */
@@ -114,6 +162,16 @@ export const configDefaults = {
       embedBehavior: 'link-preview', // "link-preview" | "rich-embed"
       ghGuard: 'copy',               // "copy" | "link" | "off"
     },
+    zoom: {
+      min: 10,
+      max: 250,
+      step: 10,
+    },
+    terminal: {
+      resizable: false,
+      defaultWidth: 800,
+      defaultHeight: 450,
+    },
   },
   commandPalette: {
     providers: ['prototypes', 'flows', 'canvases', 'pages'],

package/src/configStore.js

@@ -0,0 +1,161 @@
+/**
+ * Unified Config Store — single source of truth for all storyboard configuration.
+ *
+ * Replaces the scattered init/store pattern with one reactive config object.
+ * Domain-specific stores (toolbarConfigStore, canvasConfig, etc.) become thin
+ * wrappers that delegate here — zero consumer changes needed.
+ *
+ * Override priority (lowest → highest):
+ *   core defaults → widgets → paste → toolbar → commandPalette → storyboard.config.json → prototype
+ *
+ * Framework-agnostic (zero npm dependencies).
+ */
+
+import { deepMerge } from './loader.js'
+
+// ---------------------------------------------------------------------------
+// Internal state
+// ---------------------------------------------------------------------------
+
+/** @type {object} Full merged config (set once at startup) */
+let _baseConfig = {}
+
+/** @type {Record<string, object>} Domain → prototype-level overrides */
+let _prototypeOverrides = {}
+
+/** @type {object} Final merged config (base + prototype overrides) */
+let _mergedConfig = {}
+
+/** @type {Set<Function>} */
+const _listeners = new Set()
+
+let _snapshotVersion = 0
+
+// ---------------------------------------------------------------------------
+// Initialization
+// ---------------------------------------------------------------------------
+
+/**
+ * Seed the unified config with the pre-merged config object.
+ * Called once at app startup (from the virtual module or mountStoryboardCore).
+ *
+ * @param {object} config - The unified config with all domains
+ */
+export function initConfig(config) {
+  _baseConfig = config || {}
+  _prototypeOverrides = {}
+  _recompute()
+}
+
+// ---------------------------------------------------------------------------
+// Domain access
+// ---------------------------------------------------------------------------
+
+/**
+ * Get the full merged config or a specific domain slice.
+ *
+ * @param {string} [domain] - Optional domain key (e.g. 'toolbar', 'canvas')
+ * @returns {object}
+ */
+export function getConfig(domain) {
+  if (!domain) return _mergedConfig
+  return _mergedConfig[domain] || {}
+}
+
+// ---------------------------------------------------------------------------
+// Prototype overrides
+// ---------------------------------------------------------------------------
+
+/**
+ * Set overrides for a specific domain from a prototype-local config file.
+ * Called on route change when entering a prototype with local config.
+ *
+ * @param {string} domain - Config domain (e.g. 'toolbar', 'widgets')
+ * @param {object} overrides - Prototype-level overrides to deep-merge
+ */
+export function setOverrides(domain, overrides) {
+  if (!overrides) return
+  _prototypeOverrides[domain] = overrides
+  _recompute()
+}
+
+/**
+ * Clear overrides for a specific domain.
+ *
+ * @param {string} domain
+ */
+export function clearOverrides(domain) {
+  if (!_prototypeOverrides[domain]) return
+  delete _prototypeOverrides[domain]
+  _recompute()
+}
+
+/**
+ * Clear all prototype overrides (e.g. when leaving a prototype).
+ */
+export function clearAllOverrides() {
+  if (Object.keys(_prototypeOverrides).length === 0) return
+  _prototypeOverrides = {}
+  _recompute()
+}
+
+// ---------------------------------------------------------------------------
+// Reactivity
+// ---------------------------------------------------------------------------
+
+/**
+ * Subscribe to config changes. Compatible with Svelte stores.
+ *
+ * @param {Function} callback - Called with the full merged config
+ * @returns {Function} Unsubscribe
+ */
+export function subscribeToConfig(callback) {
+  _listeners.add(callback)
+  callback(_mergedConfig)
+  return () => _listeners.delete(callback)
+}
+
+/**
+ * Snapshot version for useSyncExternalStore.
+ *
+ * @returns {string}
+ */
+export function getConfigSnapshot() {
+  return String(_snapshotVersion)
+}
+
+// ---------------------------------------------------------------------------
+// Internal
+// ---------------------------------------------------------------------------
+
+function _recompute() {
+  if (Object.keys(_prototypeOverrides).length === 0) {
+    _mergedConfig = _baseConfig
+  } else {
+    const result = { ..._baseConfig }
+    for (const [domain, overrides] of Object.entries(_prototypeOverrides)) {
+      result[domain] = result[domain]
+        ? deepMerge(result[domain], overrides)
+        : overrides
+    }
+    _mergedConfig = result
+  }
+  _snapshotVersion++
+  for (const cb of _listeners) {
+    try { cb(_mergedConfig) } catch (err) {
+      console.error('[storyboard] Error in config subscriber:', err)
+    }
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Test helpers
+// ---------------------------------------------------------------------------
+
+export function _resetConfig() {
+  _baseConfig = {}
+  _prototypeOverrides = {}
+  _mergedConfig = {}
+  _listeners.clear()
+  _snapshotVersion = 0
+}

package/src/core-ui-colors.css

@@ -64,6 +64,12 @@
   --fgColor-muted: #656d76;
   --borderColor-default: #d1d9e0;
   --bgColor-neutral-muted: rgba(175, 184, 193, 0.2);
+
+  /* Slate palette tokens — used by trigger buttons and canvas toolbar */
+  --color-slate-100: oklch(96.8% .007 247.896);
+  --color-slate-300: oklch(86.9% .022 252.894);
+  --color-slate-400: oklch(70.4% .04 256.788);
+  --color-slate-600: oklch(44.6% .043 257.281);
 }
 
 /* Dark tokens — applied when toolbar syncs with a dark theme.
@@ -114,4 +120,10 @@
   --fgColor-muted: #8b949e;
   --borderColor-default: #30363d;
   --bgColor-neutral-muted: rgba(110, 118, 129, 0.2);
+
+  /* Slate palette tokens — dark equivalents */
+  --color-slate-100: oklch(20.8% .042 265.755);
+  --color-slate-300: oklch(29.3% .042 264.531);
+  --color-slate-400: oklch(44.6% .043 257.281);
+  --color-slate-600: oklch(70.4% .04 256.788);
 }

package/src/devtools.js

@@ -1,17 +1,17 @@
 /**
- * Storyboard Core UI Bar — Svelte-based floating toolbar.
+ * Storyboard Core UI Bar — React-based floating toolbar.
  *
- * Mounts the CoreUIBar Svelte component into the DOM.
+ * Mounts the CoreUIBar React component into the DOM.
  * Contains the command menu and mode-specific buttons (workshop, etc.).
- * Uses dynamic import() for the Svelte component to avoid
- * breaking non-Svelte test environments.
+ * Uses dynamic import() for the React component to avoid
+ * breaking non-React test environments.
  *
  * Usage:
  *   import { mountDevTools } from '@dfosco/storyboard-core'
  *   mountDevTools() // call once at app startup
  */
 
-let instance = null
+let root = null
 let wrapper = null
 let skipLink = null
 
@@ -35,8 +35,9 @@ export async function mountDevTools(options = {}) {
   // Skip mounting entirely when loaded inside a prototype embed iframe
   if (typeof window !== 'undefined' && new URLSearchParams(window.location.search).has('_sb_embed')) return
 
-  const { mount } = await import('svelte')
-  const { default: CoreUIBar } = await import('./CoreUIBar.svelte')
+  const { createElement } = await import('react')
+  const { createRoot } = await import('react-dom/client')
+  const { default: CoreUIBar } = await import('./CoreUIBar.jsx')
 
   // Inject skip link as the first child of <body> so it is the
   // first element in the tab order, regardless of where CoreUIBar
@@ -108,24 +109,21 @@ export async function mountDevTools(options = {}) {
   wrapper.id = 'sb-core-ui'
   container.appendChild(wrapper)
 
-  instance = mount(CoreUIBar, {
-    target: wrapper,
-    props: {
-      basePath,
-      toolbarConfig: options.toolbarConfig,
-      customHandlers: options.customHandlers,
-    },
-  })
+  root = createRoot(wrapper)
+  root.render(createElement(CoreUIBar, {
+    basePath,
+    toolbarConfig: options.toolbarConfig,
+    customHandlers: options.customHandlers,
+  }))
 }
 
 /**
  * Remove the Core UI Bar from the DOM.
  */
 export async function unmountDevTools() {
-  if (instance) {
-    const { unmount } = await import('svelte')
-    unmount(instance)
-    instance = null
+  if (root) {
+    root.unmount()
+    root = null
   }
   if (wrapper) { wrapper.remove(); wrapper = null }
   if (skipLink) { skipLink.remove(); skipLink = null }

package/src/devtools.test.js

@@ -1,16 +1,23 @@
 /**
  * Tests for devtools.js — command menu mount lifecycle.
- * Mocks the Svelte component to avoid jsdom lifecycle issues.
+ * Mocks the React component to avoid jsdom lifecycle issues.
  */
 
 import { vi } from 'vitest'
 
-vi.mock('svelte', () => ({
-  mount: vi.fn(() => ({})),
-  unmount: vi.fn(),
+const mockRender = vi.fn()
+const mockUnmount = vi.fn()
+const mockCreateRoot = vi.fn(() => ({ render: mockRender, unmount: mockUnmount }))
+
+vi.mock('react', () => ({
+  createElement: vi.fn((comp, props) => ({ comp, props })),
+}))
+
+vi.mock('react-dom/client', () => ({
+  createRoot: mockCreateRoot,
 }))
 
-vi.mock('./CommandMenu.svelte', () => ({ default: {} }))
+vi.mock('./CommandMenu.jsx', () => ({ default: () => null }))
 
 describe('mountDevTools', () => {
   let mountDevTools, unmountDevTools
@@ -19,11 +26,13 @@ describe('mountDevTools', () => {
     document.body.innerHTML = ''
     vi.resetModules()
 
-    vi.doMock('svelte', () => ({
-      mount: vi.fn(() => ({})),
-      unmount: vi.fn(),
+    vi.doMock('react', () => ({
+      createElement: vi.fn((comp, props) => ({ comp, props })),
+    }))
+    vi.doMock('react-dom/client', () => ({
+      createRoot: vi.fn(() => ({ render: vi.fn(), unmount: vi.fn() })),
     }))
-    vi.doMock('./CommandMenu.svelte', () => ({ default: {} }))
+    vi.doMock('./CommandMenu.jsx', () => ({ default: () => null }))
 
     const mod = await import('./devtools.js')
     mountDevTools = mod.mountDevTools

package/src/featureFlags.js

@@ -16,6 +16,12 @@ import { getLocal, setLocal, removeLocal, getAllLocal } from './localStorage.js'
 const FLAG_PREFIX = 'flag.'
 const BODY_CLASS_PREFIX = 'sb-ff-'
 
+/** Built-in feature flag defaults — always available even if initFeatureFlags is never called. */
+const BUILTIN_DEFAULTS = {
+  'canvas-auto-reload': false,
+  'prototype-auto-reload': true,
+}
+
 /** Module-level storage for config defaults */
 let _defaults = {}
 
@@ -43,7 +49,7 @@ export function syncFlagBodyClasses() {
  * @param {Record<string, boolean>} defaults - Flag key → default value
  */
 export function initFeatureFlags(defaults = {}) {
-  _defaults = { ...defaults }
+  _defaults = { ...BUILTIN_DEFAULTS, ...defaults }
   for (const [key, value] of Object.entries(_defaults)) {
     if (getLocal(FLAG_PREFIX + key) === null) {
       setLocal(FLAG_PREFIX + key, String(value))
@@ -61,7 +67,7 @@ export function getFlag(key) {
   const localVal = getLocal(FLAG_PREFIX + key)
   if (localVal !== null) return localVal === 'true'
 
-  return _defaults[key] ?? false
+  return _defaults[key] ?? BUILTIN_DEFAULTS[key] ?? false
 }
 
 /**
@@ -87,10 +93,11 @@ export function toggleFlag(key) {
  * @returns {Record<string, { default: boolean, current: boolean }>}
  */
 export function getAllFlags() {
+  const allKeys = new Set([...Object.keys(BUILTIN_DEFAULTS), ...Object.keys(_defaults)])
   const result = {}
-  for (const key of Object.keys(_defaults)) {
+  for (const key of allKeys) {
     result[key] = {
-      default: _defaults[key] ?? false,
+      default: _defaults[key] ?? BUILTIN_DEFAULTS[key] ?? false,
       current: getFlag(key),
     }
   }
@@ -116,5 +123,5 @@ export function resetFlags() {
  * @returns {string[]}
  */
 export function getFlagKeys() {
-  return Object.keys(_defaults)
+  return [...new Set([...Object.keys(BUILTIN_DEFAULTS), ...Object.keys(_defaults)])]
 }

package/src/fuzzySearch.test.js

@@ -106,4 +106,14 @@ describe('fuzzySearch', () => {
     const results = fuzzySearch(data, 'val')
     expect(results).toHaveLength(1)
   })
+
+  it('ranks agent keyword matches above fuzzy component matches for "cop"', () => {
+    const data = [
+      { label: 'Component add widget create component component' },
+      { label: 'Agent add widget create agent copilot Copilot CLI' },
+    ]
+    const results = fuzzySearch(data, 'cop')
+    expect(results[0].item.label).toContain('Agent')
+    expect(results[0].score).toBeGreaterThan(results[1].score)
+  })
 })

package/src/index.js

@@ -82,7 +82,7 @@ export { initUIConfig, isMenuHidden, getHiddenItems } from './uiConfig.js'
 export { initToolRegistry, registerToolModule, setToolComponent, setToolGuardResult, getToolComponent, getToolModule, getToolsForToolbar, getToolConfig, getAllToolConfigs, subscribeToToolRegistry, getToolRegistrySnapshot } from './toolRegistry.js'
 
 // Toolbar config store (reactive layered overrides: core → custom → prototype → user)
-export { initToolbarConfig, setPrototypeToolbarConfig, clearPrototypeToolbarConfig, getToolbarConfig, subscribeToToolbarConfig, getToolbarConfigSnapshot } from './toolbarConfigStore.js'
+export { initToolbarConfig, setPrototypeToolbarConfig, clearPrototypeToolbarConfig, getToolbarConfig, subscribeToToolbarConfig, getToolbarConfigSnapshot, setClientToolbarOverrides } from './toolbarConfigStore.js'
 
 // Toolbar tool state management (runtime state for toolbar tools)
 export { TOOL_STATES, initToolbarToolStates, setToolbarToolState, getToolbarToolState, isToolbarToolLocalOnly, subscribeToToolbarToolStates, getToolbarToolStatesSnapshot } from './toolStateStore.js'
@@ -91,9 +91,12 @@ export { TOOL_STATES, initToolbarToolStates, setToolbarToolState, getToolbarTool
 export { initCommentsConfig, getCommentsConfig, isCommentsEnabled } from './comments/config.js'
 
 // Canvas config (paste rules, canvas-level overrides)
-export { initCanvasConfig, getPasteRules, getTerminalConfig } from './canvasConfig.js'
+export { initCanvasConfig, getPasteRules, getTerminalConfig, getAgentsConfig, isTerminalResizable, getTerminalDimensions, getCanvasZoom } from './canvasConfig.js'
 export { getCommandPaletteConfig } from './commandPaletteConfig.js'
 
+// Unified config store
+export { initConfig, getConfig, setOverrides, clearOverrides, clearAllOverrides, subscribeToConfig, getConfigSnapshot } from './configStore.js'
+
 // Customer mode config
 export { initCustomerModeConfig, getCustomerModeConfig, isCustomerMode } from './customerModeConfig.js'
 
@@ -110,3 +113,12 @@ export {
 
 // Recent artifacts (command palette recents)
 export { trackRecent, getRecent, clearRecent } from './recentArtifacts.js'
+
+// Fuzzy search (scoring used by command palette custom filter)
+export { scoreMatch } from './fuzzySearch.js'
+
+// Icon component for UI rendering
+export { Icon, default as IconDefault } from './svelte-plugin-ui/components/Icon.jsx'
+
+// Shared UI components
+export { default as BranchSelect } from './BranchSelect.jsx'

package/src/lib/components/ui/alert/alert-action.jsx

@@ -0,0 +1,11 @@
+import { forwardRef } from "react";
+import { cn } from "../../../utils/index.js";
+
+const AlertAction = forwardRef(function AlertAction({ className, children, ...props }, ref) {
+return (
+<div ref={ref} data-slot="alert-action" className={cn("absolute top-2 right-2", className)} {...props}>
+{children}
+</div>
+);
+});
+export default AlertAction;

package/src/lib/components/ui/alert/alert-description.jsx

@@ -0,0 +1,11 @@
+import { forwardRef } from "react";
+import { cn } from "../../../utils/index.js";
+
+const AlertDescription = forwardRef(function AlertDescription({ className, children, ...props }, ref) {
+return (
+<div ref={ref} data-slot="alert-description" className={cn("text-muted-foreground text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3", className)} {...props}>
+{children}
+</div>
+);
+});
+export default AlertDescription;

package/src/lib/components/ui/alert/alert-title.jsx

@@ -0,0 +1,11 @@
+import { forwardRef } from "react";
+import { cn } from "../../../utils/index.js";
+
+const AlertTitle = forwardRef(function AlertTitle({ className, children, ...props }, ref) {
+return (
+<div ref={ref} data-slot="alert-title" className={cn("font-medium group-has-[>svg]/alert:col-start-2 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3", className)} {...props}>
+{children}
+</div>
+);
+});
+export default AlertTitle;

package/src/lib/components/ui/alert/alert.jsx

@@ -0,0 +1,25 @@
+import { forwardRef } from "react";
+import { cn } from "../../../utils/index.js";
+import { tv } from "tailwind-variants";
+
+export const alertVariants = tv({
+base: "grid gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 group/alert relative w-full",
+variants: {
+variant: {
+default: "bg-card text-card-foreground",
+destructive: "text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
+},
+},
+defaultVariants: {
+variant: "default",
+},
+});
+
+const Alert = forwardRef(function Alert({ className, variant = "default", children, ...props }, ref) {
+return (
+<div ref={ref} data-slot="alert" role="alert" className={cn(alertVariants({ variant }), className)} {...props}>
+{children}
+</div>
+);
+});
+export default Alert;