@toolr/ui-design 0.1.6 → 0.1.8

package/index.ts

@@ -1,5 +1,5 @@
 // Shared types
-export { type FormColor } from './components/lib/form-colors.ts'
+export { type FormColor, type AccentColor, ACCENT_TEXT, ACCENT_ICON, ACCENT_NAV } from './components/lib/form-colors.ts'
 export {
   SCALE_KEYS, type ScaleKey, type ThemeId,
   SURFACE_KEYS, type SurfaceKey,
@@ -14,11 +14,11 @@ export { AI_TOOL_LOGOS, AiToolIcon, AI_TOOL_NAMES, type AiToolKey } from './comp
 
 // 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 { Label, smartCapitalize, 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 { Toggle, type ToggleProps, type ToggleColor, type ToggleSize } 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'
@@ -31,16 +31,16 @@ export { SortDropdown, type SortDropdownProps, type SortField } from './componen
 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 { ExecutionDetailsPanel, type ExecutionDetailsPanelProps } from './components/ui/execution-details-panel.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 { RegistryCard, type RegistryCardProps, type RegistryItemType, type ExtensionSource, type SeedrItemStatus } 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 { FileStructureSection, getLanguageFromPath, type FileStructureSectionProps, type PreviewMode } 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'
@@ -97,7 +97,6 @@ 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'
@@ -119,7 +118,9 @@ export { CookieConsent, type CookieConsentProps, type ConsentChoice } from './co
 // Hooks
 export { useClickOutside } from './components/hooks/use-click-outside.ts'
 export { useDropdownMaxHeight } from './components/hooks/use-dropdown-max-height.ts'
+export { useModalBehavior } from './components/hooks/use-modal-behavior.ts'
 export { useNavigationHistory, type UseNavigationHistoryReturn } from './components/hooks/use-navigation-history.ts'
+export { useResizableSidebar, type UseResizableSidebarOptions } from './components/hooks/use-resizable-sidebar.ts'
 
 // Settings
 export { SettingRow, type SettingRowProps } from './components/ui/setting-row.tsx'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toolr/ui-design",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "private": false,
   "type": "module",
   "main": "./dist/index.js",
@@ -67,5 +67,13 @@
     "@types/react-dom": "^19.2.3",
     "tsup": "^8.5.1",
     "typescript": "^5.9.3"
+  },
+  "pnpm": {
+    "overrides": {
+      "dompurify": ">=3.3.2"
+    }
+  },
+  "overrides": {
+    "dompurify": ">=3.3.2"
   }
 }

package/components/sections/prompt-editor/use-prompt-editor.ts

@@ -1,131 +0,0 @@
-/**
- * usePromptEditor — Hook managing prompt editor state
- *
- * Part of: Sections > Prompt Editor
- *
- * Handles:
- * - Local content state (separate from saved content for dirty detection)
- * - Dirty state detection
- * - Save with Ctrl/Cmd+S keyboard shortcut
- * - Variable search/filter
- * - Active tab state
- */
-
-import { useState, useCallback, useEffect, useMemo } from 'react'
-import type { ToolTab, PromptPlaceholder } from './types.ts'
-
-export interface UsePromptEditorOptions {
-  /** Prompt content keyed by tool id */
-  prompts: Record<string, string>
-  /** Called when saving (all modified prompts at once) */
-  onPromptChange: (tool: string, value: string) => void
-  /** Available tool tabs */
-  tools: ToolTab[]
-  /** Available template variables */
-  variables?: PromptPlaceholder[]
-}
-
-export interface UsePromptEditorReturn {
-  /** Currently active tool tab id */
-  activeTab: string
-  setActiveTab: (tab: string) => void
-  /** Local editor content (may differ from saved prompts) */
-  localContent: Record<string, string>
-  /** Current prompt for the active tab */
-  currentPrompt: string
-  /** Whether any tab has unsaved changes */
-  isDirty: boolean
-  /** Handle editor content change */
-  handleEditorChange: (value: string | undefined) => void
-  /** Save all modified prompts */
-  handleSave: () => void
-  /** Variable search state */
-  variableSearch: string
-  setVariableSearch: (search: string) => void
-  /** Filtered variables based on search */
-  filteredVariables: PromptPlaceholder[]
-}
-
-export function usePromptEditor({
-  prompts,
-  onPromptChange,
-  tools,
-  variables,
-}: UsePromptEditorOptions): UsePromptEditorReturn {
-  const [activeTab, setActiveTab] = useState(tools[0]?.id ?? '')
-  const [localContent, setLocalContent] = useState<Record<string, string>>(prompts)
-  const [isDirty, setIsDirty] = useState(false)
-  const [variableSearch, setVariableSearch] = useState('')
-
-  // Sync local content when prompts change externally
-  useEffect(() => {
-    setLocalContent(prompts)
-    setIsDirty(false)
-  }, [prompts])
-
-  const handleEditorChange = useCallback(
-    (value: string | undefined) => {
-      const newValue = value ?? ''
-      setLocalContent((prev) => {
-        const updated = { ...prev, [activeTab]: newValue }
-        const hasDiff = Object.keys(prompts).some(
-          (tool) => updated[tool] !== prompts[tool],
-        )
-        setIsDirty(hasDiff)
-        return updated
-      })
-    },
-    [activeTab, prompts],
-  )
-
-  const handleSave = useCallback(() => {
-    for (const tool of Object.keys(prompts)) {
-      if (localContent[tool] !== prompts[tool]) {
-        onPromptChange(tool, localContent[tool])
-      }
-    }
-    setIsDirty(false)
-  }, [localContent, prompts, onPromptChange])
-
-  // Keyboard shortcut: Cmd/Ctrl + S
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if ((e.metaKey || e.ctrlKey) && e.key === 's') {
-        e.preventDefault()
-        if (isDirty) {
-          handleSave()
-        }
-      }
-    }
-    window.addEventListener('keydown', handleKeyDown)
-    return () => window.removeEventListener('keydown', handleKeyDown)
-  }, [isDirty, handleSave])
-
-  const currentPrompt = localContent[activeTab] ?? ''
-
-  // Filter variables based on search
-  const filteredVariables = useMemo(() => {
-    if (!variables) return []
-    if (!variableSearch.trim()) return variables
-    const search = variableSearch.toLowerCase()
-    return variables.filter(
-      (v) =>
-        v.name.toLowerCase().includes(search) ||
-        v.description.toLowerCase().includes(search) ||
-        (v.example && v.example.toLowerCase().includes(search)),
-    )
-  }, [variables, variableSearch])
-
-  return {
-    activeTab,
-    setActiveTab,
-    localContent,
-    currentPrompt,
-    isDirty,
-    handleEditorChange,
-    handleSave,
-    variableSearch,
-    setVariableSearch,
-    filteredVariables,
-  }
-}