@toolr/ui-design 0.1.5 → 0.1.6

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 {
@@ -2820,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;