@toolr/ui-design 0.1.4 → 0.1.6

package/components/ui/snippets-panel.tsx

@@ -63,19 +63,19 @@ export function SnippetsPanel({
   return (
     <div className={cn('flex flex-col bg-neutral-800 rounded-lg overflow-hidden', className)}>
       <div className="flex items-center justify-between px-3 py-2 border-b border-neutral-700">
-        <span className="text-xss font-semibold uppercase tracking-wider text-neutral-500">Snippets</span>
-        <span className="text-xss text-neutral-500">{snippets.length} snippets</span>
+        <span className="text-xs font-semibold uppercase tracking-wider text-neutral-500">Snippets</span>
+        <span className="text-xs text-neutral-500">{snippets.length} snippets</span>
       </div>
       {showSearch && (
         <div className="px-2 py-2 border-b border-neutral-700">
-          <div className="flex items-center gap-1.5 px-2 py-1 bg-[var(--background)] border border-neutral-700 rounded text-xs">
+          <div className="flex items-center gap-1.5 px-2 py-1 bg-[var(--background)] border border-neutral-700 rounded text-sm">
             <Search className="w-3 h-3 text-neutral-500 shrink-0" />
             <input
               type="text"
               placeholder="Search snippets..."
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
-              className="flex-1 bg-transparent text-neutral-200 placeholder-neutral-500 outline-none text-xs"
+              className="flex-1 bg-transparent text-neutral-200 placeholder-neutral-500 outline-none text-sm"
             />
           </div>
         </div>
@@ -90,7 +90,7 @@ export function SnippetsPanel({
           />
         ))}
         {filteredSnippets.length === 0 && (
-          <p className="text-xss text-neutral-500 text-center py-4">No snippets found</p>
+          <p className="text-xs text-neutral-500 text-center py-4">No snippets found</p>
         )}
       </div>
     </div>
@@ -110,10 +110,10 @@ function SnippetCard({ snippet, onInsert, onCopy }: SnippetCardProps) {
     <div className="rounded-md border border-neutral-700 bg-neutral-900 hover:border-neutral-600 transition-colors">
       <div className="flex items-center justify-between gap-2 px-2.5 py-1.5">
         <div className="flex items-center gap-2 min-w-0">
-          <span className="text-xs font-medium text-neutral-200 truncate">{snippet.label}</span>
+          <span className="text-sm font-medium text-neutral-200 truncate">{snippet.label}</span>
           {snippet.language && (
             <span
-              className="px-1.5 py-0.5 text-xss font-medium rounded shrink-0"
+              className="px-1.5 py-0.5 text-xs font-medium rounded shrink-0"
               style={{ color: langColor, backgroundColor: `${langColor}20` }}
             >
               {snippet.language}
@@ -140,17 +140,17 @@ function SnippetCard({ snippet, onInsert, onCopy }: SnippetCardProps) {
         </div>
       </div>
       {snippet.description && (
-        <p className="px-2.5 pb-1.5 text-xss text-neutral-400 leading-relaxed">{snippet.description}</p>
+        <p className="px-2.5 pb-1.5 text-xs text-neutral-400 leading-relaxed">{snippet.description}</p>
       )}
       <div className="mx-2.5 mb-2 rounded bg-[var(--background)] border border-neutral-700 overflow-hidden">
-        <pre className="p-2 text-xss text-neutral-400 leading-relaxed overflow-x-auto max-h-24">
+        <pre className="p-2 text-xs text-neutral-400 leading-relaxed overflow-x-auto max-h-24">
           <code>{snippet.code}</code>
         </pre>
       </div>
       {snippet.tags && snippet.tags.length > 0 && (
         <div className="flex flex-wrap gap-1 px-2.5 pb-2">
           {snippet.tags.map((tag) => (
-            <span key={tag} className="px-1.5 py-0.5 text-xss rounded bg-neutral-700 text-neutral-500">
+            <span key={tag} className="px-1.5 py-0.5 text-xs rounded bg-neutral-700 text-neutral-500">
               {tag}
             </span>
           ))}

package/components/ui/sort-dropdown.tsx

@@ -74,7 +74,7 @@ export function SortDropdown({
     <div className="relative flex items-center" ref={ref} onKeyDown={handleKeyDown}>
       <button
         onClick={() => setIsOpen(!isOpen)}
-        className={`flex items-center gap-1.5 h-7 px-2 rounded-md border ${v.bg} text-xs transition-colors cursor-pointer ${FORM_COLORS[color].border} text-neutral-200 ${FORM_COLORS[color].hover}`}
+        className={`flex items-center gap-1.5 h-7 px-2 rounded-md border ${v.bg} text-sm transition-colors cursor-pointer ${FORM_COLORS[color].border} text-neutral-200 ${FORM_COLORS[color].hover}`}
       >
         <span
           className={`${FORM_COLORS[color].accent} hover:brightness-125 transition-colors`}
@@ -94,7 +94,7 @@ export function SortDropdown({
               key={f.value}
               onClick={() => { onFieldChange(f.value); setIsOpen(false) }}
               onPointerEnter={() => setHighlightIdx(idx)}
-              className={`w-full flex items-center gap-2 px-3 py-1.5 text-xs text-left transition-colors cursor-pointer ${
+              className={`w-full flex items-center gap-2 px-3 py-1.5 text-sm text-left transition-colors cursor-pointer ${
                 idx === highlightIdx ? `${FORM_COLORS[color].selectedBg} text-neutral-200` : field === f.value ? `${FORM_COLORS[color].selectedBg} text-neutral-200` : `text-neutral-400 ${v.hoverBg}`
               }`}
             >

package/components/ui/status-card.tsx

@@ -63,15 +63,15 @@ export function StatusCard({
         {Icon && (
           <Icon className="w-4 h-4 shrink-0" style={{ color: iconColor }} />
         )}
-        <h3 className="text-sm font-medium text-neutral-200">{title}</h3>
+        <h3 className="text-md font-medium text-neutral-200">{title}</h3>
       </div>
 
       <div className="divide-y divide-neutral-700/60">
         {items.map((item) => (
           <div key={item.label} className="flex items-center justify-between px-4 py-2.5">
-            <span className="text-xs text-neutral-400">{item.label}</span>
+            <span className="text-sm text-neutral-400">{item.label}</span>
             <div className="flex items-center gap-2">
-              <span className={cn('text-xs font-medium', statusValueColor[item.status])}>
+              <span className={cn('text-sm font-medium', statusValueColor[item.status])}>
                 {item.value}
               </span>
               <span className={cn('w-2 h-2 rounded-full shrink-0', statusDotColor[item.status])} />
@@ -85,7 +85,7 @@ export function StatusCard({
           <button
             type="button"
             onClick={action.onClick}
-            className="text-xs text-blue-400 hover:text-blue-300 transition-colors cursor-pointer"
+            className="text-sm text-blue-400 hover:text-blue-300 transition-colors cursor-pointer"
           >
             {action.label}
           </button>

package/components/ui/tab-bar.tsx

@@ -55,8 +55,8 @@ export interface TabBarProps {
 
 const sizeConfig = {
   xss: { text: 'text-xss', icon: 'w-2.5 h-2.5', px: 'px-1.5', py: 'py-1', close: 'w-2.5 h-2.5', badgeSize: 'xss' as const, gap: 'gap-1' },
-  xs: { text: 'text-xs', icon: 'w-3 h-3', px: 'px-2', py: 'py-1', close: 'w-3 h-3', badgeSize: 'xs' as const, gap: 'gap-1' },
-  sm: { text: 'text-sm', icon: 'w-3.5 h-3.5', px: 'px-3', py: 'py-1.5', close: 'w-3 h-3', badgeSize: 'sm' as const, gap: 'gap-1.5' },
+  xs: { text: 'text-sm', icon: 'w-3 h-3', px: 'px-2', py: 'py-1', close: 'w-3 h-3', badgeSize: 'xs' as const, gap: 'gap-1' },
+  sm: { text: 'text-md', icon: 'w-3.5 h-3.5', px: 'px-3', py: 'py-1.5', close: 'w-3 h-3', badgeSize: 'sm' as const, gap: 'gap-1.5' },
   md: { text: 'text-base', icon: 'w-4 h-4', px: 'px-4', py: 'py-2', close: 'w-3.5 h-3.5', badgeSize: 'md' as const, gap: 'gap-2' },
   lg: { text: 'text-lg', icon: 'w-5 h-5', px: 'px-5', py: 'py-2.5', close: 'w-4 h-4', badgeSize: 'lg' as const, gap: 'gap-2' },
 }

package/components/ui/tooltip.tsx

@@ -271,9 +271,9 @@ export function Tooltip({
       onMouseEnter={interactive && trigger !== 'click' ? show : undefined}
       onMouseLeave={interactive && trigger !== 'click' ? hide : undefined}
     >
-      {content.title && <p className="text-sm text-neutral-200 font-medium">{content.title}</p>}
-      <div className={`text-xs text-neutral-400 ${content.title ? 'mt-0.5' : ''}`}>{content.description}</div>
-      {content.extra && <p className="text-xs text-orange-400/70 mt-0.5">{content.extra}</p>}
+      {content.title && <p className="text-md text-neutral-200 font-medium">{content.title}</p>}
+      <div className={`text-sm text-neutral-400 ${content.title ? 'mt-0.5' : ''}`}>{content.description}</div>
+      {content.extra && <p className="text-sm text-orange-400/70 mt-0.5">{content.extra}</p>}
       <div className={arrowClasses} />
     </div>
   )

package/dist/content.js

@@ -1,11 +1,11 @@
 // components/content/info-panel-primitives.tsx
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function P({ children }) {
-  return /* @__PURE__ */ jsx("p", { className: "text-sm text-neutral-400 leading-relaxed mb-5", children });
+  return /* @__PURE__ */ jsx("p", { className: "text-md text-neutral-400 leading-relaxed mb-5", children });
 }
 function SectionHeader({ color, children }) {
   const textColor = color ? `text-${color}-500/70` : "text-neutral-500";
-  return /* @__PURE__ */ jsx("p", { className: `${textColor} text-xs uppercase font-semibold pb-0.5 border-b border-neutral-700/50 mb-2.5`, style: { letterSpacing: "0.8px" }, children });
+  return /* @__PURE__ */ jsx("p", { className: `${textColor} text-sm uppercase font-semibold pb-0.5 border-b border-neutral-700/50 mb-2.5`, style: { letterSpacing: "0.8px" }, children });
 }
 function DL({ children }) {
   return /* @__PURE__ */ jsx("div", { className: "mb-5", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-[auto_1fr] gap-x-4", children }) });
@@ -13,12 +13,12 @@ function DL({ children }) {
 function DLRow({ term, children, even }) {
   const bg = even ? "bg-white/[0.015]" : "";
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { className: `py-2 border-b border-neutral-800/60 ${bg} font-semibold text-sm whitespace-nowrap`, children: term }),
-    /* @__PURE__ */ jsx("div", { className: `py-2 border-b border-neutral-800/60 ${bg} text-sm text-neutral-400`, children })
+    /* @__PURE__ */ jsx("div", { className: `py-2 border-b border-neutral-800/60 ${bg} font-semibold text-md whitespace-nowrap`, children: term }),
+    /* @__PURE__ */ jsx("div", { className: `py-2 border-b border-neutral-800/60 ${bg} text-md text-neutral-400`, children })
   ] });
 }
 function UL({ children }) {
-  return /* @__PURE__ */ jsx("ul", { className: "text-sm text-neutral-400 space-y-2 mb-5", children });
+  return /* @__PURE__ */ jsx("ul", { className: "text-md text-neutral-400 space-y-2 mb-5", children });
 }
 function LI({ color, children }) {
   return /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2", children: [
@@ -30,7 +30,7 @@ function OL({ children }) {
   return /* @__PURE__ */ jsx("div", { className: "space-y-2 mb-5", children });
 }
 function OLI({ n, color, children }) {
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2.5 text-sm", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2.5 text-md", children: [
     /* @__PURE__ */ jsxs("span", { className: `text-${color}-400 shrink-0 w-4 text-right font-bold`, children: [
       n,
       "."
@@ -61,17 +61,17 @@ function getCalloutColors(color) {
 }
 function Callout({ color, children }) {
   const c = CALLOUT_COLORS[color] ?? CALLOUT_COLORS.blue;
-  return /* @__PURE__ */ jsx("div", { className: `border-l-4 ${c.borderL} border-y ${c.borderY} ${c.bg} px-3 py-2.5 rounded-r mb-5 text-sm text-neutral-400`, children });
+  return /* @__PURE__ */ jsx("div", { className: `border-l-4 ${c.borderL} border-y ${c.borderY} ${c.bg} px-3 py-2.5 rounded-r mb-5 text-md text-neutral-400`, children });
 }
 function CalloutCode({ color, children }) {
   const c = CALLOUT_COLORS[color] ?? CALLOUT_COLORS.blue;
-  return /* @__PURE__ */ jsx("code", { className: `block bg-neutral-800/80 px-2 py-1 rounded mt-1.5 text-sm ${c.codeText}`, children });
+  return /* @__PURE__ */ jsx("code", { className: `block bg-neutral-800/80 px-2 py-1 rounded mt-1.5 text-md ${c.codeText}`, children });
 }
 function CalloutDim({ children }) {
   return /* @__PURE__ */ jsx("p", { className: "text-neutral-500 mt-1.5", children });
 }
 function CodeBlock({ children }) {
-  return /* @__PURE__ */ jsx("div", { className: "bg-neutral-900/60 rounded-md p-3 font-mono text-xs text-neutral-400 mb-5 whitespace-pre overflow-x-auto leading-normal", children });
+  return /* @__PURE__ */ jsx("div", { className: "bg-neutral-900/60 rounded-md p-3 font-mono text-sm text-neutral-400 mb-5 whitespace-pre overflow-x-auto leading-normal", children });
 }
 function CK({ color, children }) {
   const textColor = color ? `text-${color}-400` : "";
@@ -98,13 +98,13 @@ function LocationItem({
           className: `w-2 h-2 rounded-full bg-${color}-500/50 border border-${color}-500 shrink-0`
         }
       ),
-      /* @__PURE__ */ jsx("span", { className: `text-${color}-400 text-sm font-semibold`, children: label })
+      /* @__PURE__ */ jsx("span", { className: `text-${color}-400 text-md font-semibold`, children: label })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: `py-2 border-b border-neutral-800/60 ${bg} text-sm text-neutral-400`, children })
+    /* @__PURE__ */ jsx("div", { className: `py-2 border-b border-neutral-800/60 ${bg} text-md text-neutral-400`, children })
   ] });
 }
 function TitledLI({ color, title, children }) {
-  return /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2 text-sm text-neutral-400", children: [
+  return /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2 text-md text-neutral-400", children: [
     /* @__PURE__ */ jsx("span", { className: `text-${color}-400 shrink-0`, style: { marginTop: "3px", fontSize: "18px", lineHeight: "14px" }, children: "\u2022" }),
     /* @__PURE__ */ jsxs("span", { children: [
       /* @__PURE__ */ jsx("span", { className: `text-${color}-300 font-semibold`, children: title }),
@@ -115,7 +115,7 @@ function TitledLI({ color, title, children }) {
   ] });
 }
 function CalloutDialog({ color, lines }) {
-  return /* @__PURE__ */ jsx("div", { className: "bg-neutral-800/80 rounded px-2 py-1 mt-1.5 flex flex-col gap-0.5 text-sm", children: lines.map((line, idx) => /* @__PURE__ */ jsxs("div", { children: [
+  return /* @__PURE__ */ jsx("div", { className: "bg-neutral-800/80 rounded px-2 py-1 mt-1.5 flex flex-col gap-0.5 text-md", children: lines.map((line, idx) => /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsxs("span", { className: `text-${color}-300 font-semibold mr-1`, children: [
       line.speaker,
       ":"
@@ -131,7 +131,7 @@ function StatusBadge({ value, badgeColor, label, children, even }) {
     DLRow,
     {
       term: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
-        /* @__PURE__ */ jsx("span", { className: `inline-flex items-center justify-center w-5 h-5 rounded-full bg-${badgeColor}-500/20 text-${badgeColor}-400 text-xss font-bold shrink-0`, children: value }),
+        /* @__PURE__ */ jsx("span", { className: `inline-flex items-center justify-center w-5 h-5 rounded-full bg-${badgeColor}-500/20 text-${badgeColor}-400 text-xs font-bold shrink-0`, children: value }),
         /* @__PURE__ */ jsx("span", { className: `text-${badgeColor}-400 font-semibold`, children: label })
       ] }),
       even,

package/dist/index.d.ts

@@ -731,6 +731,10 @@ declare function collectDirPaths(nodes: FileTreeNode[], rootName?: string, prefi
 declare function FileTree({ nodes, rootName, selectedPath, onSelectFile, prefix, expandedPaths, onTogglePath, accentColor }: FileTreeProps): react_jsx_runtime.JSX.Element;
 
 interface EditorToolbarProps {
+    /** Optional title displayed in the toolbar */
+    title?: string;
+    /** Optional description displayed below the title */
+    description?: string;
     /** Whether content has unsaved changes */
     isDirty: boolean;
     /** Whether save operation is in progress */
@@ -755,7 +759,7 @@ interface EditorToolbarProps {
     /** Optional: Additional action buttons on the right side (before save) */
     rightActions?: ActionItem[];
 }
-declare function EditorToolbar({ isDirty, isSaving, onSave, canReset, onReset, resetTooltip, isReadOnly, hasError, leftActions, rightActions, }: EditorToolbarProps): react_jsx_runtime.JSX.Element | null;
+declare function EditorToolbar({ title, description, isDirty, isSaving, onSave, canReset, onReset, resetTooltip, isReadOnly, hasError, leftActions, rightActions, }: EditorToolbarProps): react_jsx_runtime.JSX.Element | null;
 
 /** Status banner configuration for outdated/info messages */
 interface StatusBanner {
@@ -2216,8 +2220,9 @@ interface SnippetsEditorProps {
     /** Section description, e.g. "Define snippets to reuse in skills prompts..." */
     description?: string;
     className?: string;
+    accentColor?: string;
 }
-declare function SnippetsEditor({ api, snippets, title, description, className, }: SnippetsEditorProps): react_jsx_runtime.JSX.Element;
+declare function SnippetsEditor({ api, snippets, title, description, className, accentColor, }: SnippetsEditorProps): react_jsx_runtime.JSX.Element;
 
 /**
  * useSnippetsEditor — Form state and CRUD hook for the snippets editor
@@ -2482,8 +2487,9 @@ interface FilesPanelProps {
     onAction?: (action: string, path: string) => void;
     showSearch?: boolean;
     className?: string;
+    accentColor?: string;
 }
-declare function FilesPanel({ files, selectedPath, onSelect, onAction, showSearch, className, }: FilesPanelProps): react_jsx_runtime.JSX.Element;
+declare function FilesPanel({ files, selectedPath, onSelect, onAction, showSearch, className, accentColor, }: FilesPanelProps): react_jsx_runtime.JSX.Element;
 
 /** Searchable panel for browsing, copying, and inserting code snippets. */
 interface Snippet {
@@ -2587,14 +2593,24 @@ interface NavCardProps {
     title: string;
     description?: string;
     icon?: IconName;
+    /** Custom icon component. Takes precedence over icon name. */
+    IconComponent?: React.ComponentType<{
+        className?: string;
+    }>;
     iconColor?: string;
-    badge?: number | string;
-    badgeColor?: BadgeColor;
+    label?: {
+        text: string;
+        color: LabelColor;
+        tooltip: {
+            description: string;
+        };
+    };
+    stats?: string;
     onClick?: () => void;
     disabled?: boolean;
     className?: string;
 }
-declare function NavCard({ title, description, icon, iconColor, badge, badgeColor, onClick, disabled, className, }: NavCardProps): react_jsx_runtime.JSX.Element;
+declare function NavCard({ title, description, icon, IconComponent, iconColor, label, stats, onClick, disabled, className, }: NavCardProps): react_jsx_runtime.JSX.Element;
 
 interface ExtensionListCardProps {
     /** Lucide icon component */
@@ -2810,8 +2826,9 @@ interface SettingsTreeNavProps {
     tree: SettingsTreeNode[];
     selectedPath: string;
     onSelectPath: (path: string) => void;
+    accentColor?: string;
 }
-declare function SettingsTreeNav({ tree, selectedPath, onSelectPath }: SettingsTreeNavProps): react_jsx_runtime.JSX.Element;
+declare function SettingsTreeNav({ tree, selectedPath, onSelectPath, accentColor }: SettingsTreeNavProps): react_jsx_runtime.JSX.Element;
 
 interface SettingsHeaderProps {
     description: string;