@toolr/ui-design 0.1.3 → 0.1.5

package/components/ui/registry-card.tsx

@@ -412,7 +412,7 @@ export function RegistryCard(props: RegistryCardProps) {
           <Tooltip key={`pkg-${key}`} content={{ description: `${count} ${count === 1 ? label : labelPlural}` }} position="top">
             <span className="flex items-center gap-0.5">
               <Icon className={`w-3 h-3 ${color}`} />
-              <span className="text-[10px] text-neutral-500">{count}</span>
+              <span className="text-xss text-neutral-500">{count}</span>
             </span>
           </Tooltip>
         )]
@@ -469,7 +469,7 @@ export function RegistryCard(props: RegistryCardProps) {
       ...(props.stars != null && props.stars > 0 ? [(
         <CardClickable key="stars" onClick={() => props.onSortBy?.('stars')}>
           <Tooltip content={{ description: `${props.stars.toLocaleString()} stars \u00b7 Click to sort` }} position="top">
-            <span className="flex items-center gap-1 text-[10px] text-amber-400/80">
+            <span className="flex items-center gap-1 text-xss text-amber-400/80">
               <Star className="w-3 h-3" />
               {formatCount(props.stars)}
             </span>
@@ -479,7 +479,7 @@ export function RegistryCard(props: RegistryCardProps) {
       ...(props.downloads != null && props.downloads > 0 ? [(
         <CardClickable key="downloads" onClick={() => props.onSortBy?.('downloads')}>
           <Tooltip content={{ description: `${props.downloads.toLocaleString()} downloads \u00b7 Click to sort` }} position="top">
-            <span className="flex items-center gap-1 text-[10px] text-emerald-400/80">
+            <span className="flex items-center gap-1 text-xss text-emerald-400/80">
               <Download className="w-3 h-3" />
               {formatCount(props.downloads)}
             </span>
@@ -581,7 +581,7 @@ export function RegistryCard(props: RegistryCardProps) {
     if (props.installs != null && props.installs > 0) {
       bottomStats = [(
         <Tooltip key="installs" content={{ description: `${props.installs.toLocaleString()} installs` }} position="top">
-          <span className="flex items-center gap-1 text-[10px] text-neutral-500">
+          <span className="flex items-center gap-1 text-xss text-neutral-500">
             <Download className="w-3 h-3" />
             {props.installs.toLocaleString()}
           </span>
@@ -642,7 +642,7 @@ export function RegistryCard(props: RegistryCardProps) {
 
       {/* Error/warning message */}
       {errorMessage && (
-        <p className={`text-[11px] mb-2 break-all ${flash === 'warning' ? 'text-amber-400' : 'text-red-400'}`}>{errorMessage}</p>
+        <p className={`text-xss mb-2 break-all ${flash === 'warning' ? 'text-amber-400' : 'text-red-400'}`}>{errorMessage}</p>
       )}
 
       {/* Bottom row */}
@@ -650,7 +650,7 @@ export function RegistryCard(props: RegistryCardProps) {
         const dateNode = updatedAt ? (
           <Tooltip content={{ description: onDateClick ? `Last updated ${formatFullDate(updatedAt)} \u00b7 Click to sort by date` : `Last updated ${formatFullDate(updatedAt)}` }} position="top">
             <span
-              className={`flex items-center gap-1 text-[10px] text-neutral-500 whitespace-nowrap${onDateClick ? ' cursor-pointer hover:brightness-125 transition-all' : ''}`}
+              className={`flex items-center gap-1 text-xss text-neutral-500 whitespace-nowrap${onDateClick ? ' cursor-pointer hover:brightness-125 transition-all' : ''}`}
               onClick={onDateClick ? (e: MouseEvent) => { e.stopPropagation(); onDateClick() } : undefined}
             >
               <Clock className="w-3 h-3" />
@@ -690,7 +690,7 @@ export function RegistryCard(props: RegistryCardProps) {
         // Basic fallback: just install on confirm
         return (
           <div onClick={(e) => e.stopPropagation()}>
-            <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center" onClick={() => setShowScopeConfirm(false)}>
+            <div className="fixed inset-0 bg-[var(--background)]/50 z-50 flex items-center justify-center" onClick={() => setShowScopeConfirm(false)}>
               <div className="bg-neutral-800 border border-neutral-700 rounded-lg p-4 max-w-sm" onClick={(e) => e.stopPropagation()}>
                 <h3 className="text-sm font-medium text-neutral-200 mb-2">{ALREADY_AT_USER}</h3>
                 <p className="text-xs text-neutral-400 mb-4">

package/components/ui/registry-detail.tsx

@@ -122,7 +122,7 @@ function CompatibleWithSection({ tools }: { tools: string[] }) {
         {tools.map((tool) => (
           <div key={tool} className="flex flex-col items-center gap-1">
             <AiToolIcon tool={tool} size={18} />
-            <span className="text-[10px] text-neutral-400">{AI_TOOL_NAMES[tool as AiToolKey] ?? tool}</span>
+            <span className="text-xss text-neutral-400">{AI_TOOL_NAMES[tool as AiToolKey] ?? tool}</span>
           </div>
         ))}
       </div>
@@ -162,7 +162,7 @@ export function RegistryDetail({
           <div className="min-w-0">
             <div className="flex items-center gap-3 flex-wrap">
               <Icon className={`w-6 h-6 shrink-0 ${iconColor}`} />
-              <h2 className="text-xl font-semibold text-neutral-200">{title}</h2>
+              <h2 className="text-lg font-semibold text-neutral-200">{title}</h2>
               {labels && labels.length > 0 && labels.map((labelProps, i) => (
                 <Label key={i} size="lg" {...labelProps} />
               ))}

package/components/ui/segmented-toggle.tsx

@@ -34,8 +34,8 @@ const ICON_SIZE_CLASSES = {
 
 /** Text label button sizes — horizontal padding instead of fixed width */
 const TEXT_SIZE_CLASSES = {
-  xss: 'h-[18px] px-1.5 text-[9px]',
-  xs: 'h-6 px-2 text-[10px]',
+  xss: 'h-[18px] px-1.5 text-xss',
+  xs: 'h-6 px-2 text-xss',
   sm: 'h-7 px-2.5 text-xs',
   md: 'h-8 px-3 text-xs',
   lg: 'h-9 px-3.5 text-sm',

package/components/ui/select.tsx

@@ -29,7 +29,7 @@ const VARIANT_CLASSES = {
 }
 
 const SIZE_CLASSES = {
-  xss: 'h-[18px] px-1.5 text-[10px]',
+  xss: 'h-[18px] px-1.5 text-xss',
   xs: 'h-6 px-2 text-xs',
   sm: 'h-7 px-2 text-xs',
   md: 'h-8 px-3 text-sm',
@@ -154,7 +154,7 @@ export function Select<T extends string | number = string>({
                 onPointerEnter={() => setHighlightIdx(idx)}
                 className={`w-full flex items-center gap-2 px-3 py-1.5 text-xs text-left transition-colors cursor-pointer ${
                   isHighlighted
-                    ? 'bg-neutral-600 text-neutral-200'
+                    ? `${FORM_COLORS[color].selectedBg} text-neutral-200`
                     : isSelected ? `${FORM_COLORS[color].selectedBg} text-neutral-200` : `text-neutral-400 ${v.hoverBg}`
                 }`}
               >

package/components/ui/selection-grid.tsx

@@ -6,7 +6,7 @@ import {
 } from 'lucide-react'
 import type { LucideIcon } from 'lucide-react'
 import type { IconName } from './icon-button.tsx'
-import { ConfirmBadge, type ConfirmBadgeColor } from './confirm-badge.tsx'
+import type { ConfirmBadgeColor } from './confirm-badge.tsx'
 import { cn } from '../lib/cn.ts'
 import { AiToolIcon, AI_TOOL_NAMES, type AiToolKey } from '../lib/ai-tools.tsx'
 
@@ -233,23 +233,17 @@ function GridCard({ item, selected, onClick }: CardProps) {
       className={cn(
         'relative p-3 rounded-lg text-center transition-all border-2 flex flex-col items-center',
         item.disabled
-          ? 'opacity-30 cursor-not-allowed border-neutral-800 bg-black'
+          ? 'opacity-30 cursor-not-allowed border-neutral-800 bg-[var(--background)]'
           : selected
             ? 'cursor-pointer'
-            : 'bg-neutral-800/50 border-neutral-700 hover:bg-neutral-800 hover:border-neutral-600 cursor-pointer',
+            : 'bg-neutral-800/50 border-neutral-700 hover:bg-[var(--surface-hover)] hover:border-neutral-600 cursor-pointer',
       )}
       style={
         selected && !item.disabled
-          ? { borderColor: color, backgroundColor: `${color}15` }
+          ? { borderColor: color }
           : undefined
       }
     >
-      {selected && !item.disabled && (
-        <span className="absolute top-1 right-1">
-          <ConfirmBadge color={item.badgeColor || 'blue'} size="xs" />
-        </span>
-      )}
-
       {Icon && (
         <Icon
           className="w-7 h-7 mb-1"
@@ -278,23 +272,17 @@ function ListCard({ item, selected, onClick }: CardProps) {
       className={cn(
         'relative p-3 rounded-lg transition-all border-2 flex items-center gap-3 text-left',
         item.disabled
-          ? 'opacity-30 cursor-not-allowed border-neutral-800 bg-black'
+          ? 'opacity-30 cursor-not-allowed border-neutral-800 bg-[var(--background)]'
           : selected
             ? 'cursor-pointer'
-            : 'bg-neutral-800/50 border-neutral-700 hover:bg-neutral-800 hover:border-neutral-600 cursor-pointer',
+            : 'bg-neutral-800/50 border-neutral-700 hover:bg-[var(--surface-hover)] hover:border-neutral-600 cursor-pointer',
       )}
       style={
         selected && !item.disabled
-          ? { borderColor: color, backgroundColor: `${color}15` }
+          ? { borderColor: color }
           : undefined
       }
     >
-      {selected && !item.disabled && (
-        <span className="absolute top-1 right-1">
-          <ConfirmBadge color={item.badgeColor || 'blue'} size="xs" />
-        </span>
-      )}
-
       {Icon && (
         <Icon
           className="w-5 h-5 flex-shrink-0"

package/components/ui/snapshot-card.tsx

@@ -59,7 +59,7 @@ export function SnapshotCard({
         </div>
 
         {timestamp && (
-          <p className="mt-1 text-[10px] text-neutral-500">{timestamp}</p>
+          <p className="mt-1 text-xss text-neutral-500">{timestamp}</p>
         )}
 
         {description && (
@@ -70,7 +70,7 @@ export function SnapshotCard({
           <div className="mt-3 grid grid-cols-2 gap-x-4 gap-y-2">
             {stats.map((stat) => (
               <div key={stat.label}>
-                <p className="text-[10px] text-neutral-500">{stat.label}</p>
+                <p className="text-xss text-neutral-500">{stat.label}</p>
                 <p className="text-xs font-medium text-neutral-200">{stat.value}</p>
               </div>
             ))}

package/components/ui/snippets-panel.tsx

@@ -63,12 +63,12 @@ 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-[11px] font-semibold uppercase tracking-wider text-neutral-500">Snippets</span>
-        <span className="text-[10px] text-neutral-500">{snippets.length} snippets</span>
+        <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>
       </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-black 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-xs">
             <Search className="w-3 h-3 text-neutral-500 shrink-0" />
             <input
               type="text"
@@ -90,7 +90,7 @@ export function SnippetsPanel({
           />
         ))}
         {filteredSnippets.length === 0 && (
-          <p className="text-[11px] text-neutral-500 text-center py-4">No snippets found</p>
+          <p className="text-xss text-neutral-500 text-center py-4">No snippets found</p>
         )}
       </div>
     </div>
@@ -113,7 +113,7 @@ function SnippetCard({ snippet, onInsert, onCopy }: SnippetCardProps) {
           <span className="text-xs font-medium text-neutral-200 truncate">{snippet.label}</span>
           {snippet.language && (
             <span
-              className="px-1.5 py-0.5 text-[9px] font-medium rounded shrink-0"
+              className="px-1.5 py-0.5 text-xss 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-[11px] text-neutral-400 leading-relaxed">{snippet.description}</p>
+        <p className="px-2.5 pb-1.5 text-xss text-neutral-400 leading-relaxed">{snippet.description}</p>
       )}
-      <div className="mx-2.5 mb-2 rounded bg-black border border-neutral-700 overflow-hidden">
-        <pre className="p-2 text-[11px] text-neutral-400 leading-relaxed overflow-x-auto max-h-24">
+      <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">
           <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-[9px] rounded bg-neutral-700 text-neutral-500">
+            <span key={tag} className="px-1.5 py-0.5 text-xss rounded bg-neutral-700 text-neutral-500">
               {tag}
             </span>
           ))}

package/components/ui/tab-bar.tsx

@@ -54,7 +54,7 @@ export interface TabBarProps {
 }
 
 const sizeConfig = {
-  xss: { text: 'text-[10px]', 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' },
+  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' },
   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' },

package/dist/content.js

@@ -65,7 +65,7 @@ function Callout({ color, 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-[13px] ${c.codeText}`, children });
+  return /* @__PURE__ */ jsx("code", { className: `block bg-neutral-800/80 px-2 py-1 rounded mt-1.5 text-sm ${c.codeText}`, children });
 }
 function CalloutDim({ children }) {
   return /* @__PURE__ */ jsx("p", { className: "text-neutral-500 mt-1.5", children });
@@ -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-[13px]", 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-sm", 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-[11px] 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-xss font-bold shrink-0`, children: value }),
         /* @__PURE__ */ jsx("span", { className: `text-${badgeColor}-400 font-semibold`, children: label })
       ] }),
       even,

package/dist/index.d.ts

@@ -31,6 +31,16 @@ declare const DEFAULT_DIMS: Record<SurfaceKey, number>;
 declare const DEFAULT_OUTLINE = 30;
 declare function generateScale(theme: ThemeId, hue: number | null, maxSat: number, dims?: Record<SurfaceKey, number>, outline?: number): Record<ScaleKey, string>;
 declare function isLightTheme(themeId: ThemeId): boolean;
+/**
+ * Apply a theme to the document by setting CSS custom properties on the root element.
+ *
+ * IMPORTANT — body background: Portal-based components (Select, Tooltip) render at
+ * document.body via createPortal. Their backgrounds use --popover which is semi-transparent
+ * (rgba(0,0,0,0.8)). If <body> has no background-color, the browser default (white) bleeds
+ * through, making dropdowns/tooltips appear gray instead of dark.
+ *
+ * Consuming apps MUST set: body { background-color: var(--background); }
+ */
 declare function applyTheme(themeId: ThemeId, accentHue: number | null, dims?: Record<SurfaceKey, number>, outline?: number, root?: HTMLElement): void;
 
 type ToolrAppId = 'toolr' | 'configr' | 'reviewr' | 'vibr' | 'learnr' | 'planr' | 'seedr';
@@ -2577,14 +2587,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 */