@toolr/ui-design 0.1.0

package/README.md

@@ -0,0 +1,63 @@
+# @toolr/ui-design
+
+Shared UI design system for toolr applications. Provides components, design tokens, and a Tailwind preset.
+
+## Setup
+
+```jsonc
+// package.json — path is relative to your app
+{ "@toolr/ui-design": "file:../../shared/ui-design" }
+```
+
+```css
+/* app CSS entry point */
+@import "@toolr/ui-design/tokens";
+```
+
+```ts
+// tailwind.config.ts
+import { toolrPreset } from '@toolr/ui-design/preset'
+export default { presets: [toolrPreset] }
+```
+
+## Exports
+
+| Path | Content |
+|------|---------|
+| `@toolr/ui-design` | All components, hooks, types, utilities |
+| `@toolr/ui-design/tokens` | CSS design tokens (semantic + primitives + keyframes) |
+| `@toolr/ui-design/preset` | Tailwind preset (Inter font, extended breakpoints) |
+| `@toolr/ui-design/content` | Info panel primitives |
+| `@toolr/ui-design/diagrams` | Diagram utilities |
+
+Always import components from the barrel export (`@toolr/ui-design`), not from deep paths.
+
+## Claude Code Skills
+
+Two skills ship with this package for Claude Code agents:
+
+### `ui-playground` — Building the design system
+
+For working on components and playground pages inside this repo. Triggers when editing files in `components/ui/`, `playground/src/pages/`, or `index.ts`.
+
+### `ui-consumer` — Using the design system in apps
+
+For consuming apps that import `@toolr/ui-design`. Covers setup, import patterns, FormColor, cn(), icons, tooltips, modals, sections, tokens, and common mistakes.
+
+To make `ui-consumer` available in a consuming app, symlink it into the app's `.shared/.claude/skills/` directory:
+
+```bash
+# From the monorepo root (adjust relative path as needed)
+ln -s ../../../../shared/ui-design/.claude/skills/ui-consumer <app>/.shared/.claude/skills/ui-consumer
+```
+
+Currently symlinked in: **configr** (`configr/.shared/.claude/skills/ui-consumer`).
+
+## Playground
+
+Interactive component playground with live preview, prop controls, and code generation.
+
+```bash
+# Start (requires tmux session toolr-shared-uidesign)
+cd playground && npm run dev -- --port 6100
+```

package/components/content/info-panel-primitives.tsx

@@ -0,0 +1,297 @@
+/**
+ * InfoPanelPrimitives — Shared building blocks for info panel content.
+ *
+ * Grid variant: 14px body text, CSS Grid definition lists, border-left callouts,
+ * no gray boxes, generous spacing. Designed for scannability.
+ */
+
+import type { ReactNode } from 'react'
+
+// ─── Paragraph ──────────────────────────────────────────────────────
+
+export function P({ children }: { children: ReactNode }) {
+  return <p className="text-sm text-neutral-400 leading-relaxed mb-5">{children}</p>
+}
+
+// ─── Section Header ─────────────────────────────────────────────────
+
+export function SectionHeader({ color, children }: { color?: string; children: ReactNode }) {
+  const textColor = color ? `text-${color}-500/70` : 'text-neutral-500'
+  return (
+    <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}
+    </p>
+  )
+}
+
+// ─── Definition List (CSS Grid two-column) ──────────────────────────
+
+export function DL({ children }: { children: ReactNode }) {
+  return (
+    <div className="mb-5">
+      <div className="grid grid-cols-[auto_1fr] gap-x-4">{children}</div>
+    </div>
+  )
+}
+
+export function DLRow({ term, children, even }: { term: ReactNode; children: ReactNode; even?: boolean }) {
+  const bg = even ? 'bg-white/[0.015]' : ''
+  return (
+    <>
+      <div className={`py-2 border-b border-neutral-800/60 ${bg} font-semibold text-sm whitespace-nowrap`}>
+        {term}
+      </div>
+      <div className={`py-2 border-b border-neutral-800/60 ${bg} text-sm text-neutral-400`}>{children}</div>
+    </>
+  )
+}
+
+// ─── Unordered List ─────────────────────────────────────────────────
+
+export function UL({ children }: { children: ReactNode }) {
+  return <ul className="text-sm text-neutral-400 space-y-2 mb-5">{children}</ul>
+}
+
+export function LI({ color, children }: { color: string; children: ReactNode }) {
+  return (
+    <li className="flex items-start gap-2">
+      <span className={`text-${color}-400 shrink-0`} style={{ marginTop: '3px', fontSize: '18px', lineHeight: '14px' }}>&#x2022;</span>
+      <span>{children}</span>
+    </li>
+  )
+}
+
+// ─── Ordered List ───────────────────────────────────────────────────
+
+export function OL({ children }: { children: ReactNode }) {
+  return <div className="space-y-2 mb-5">{children}</div>
+}
+
+export function OLI({ n, color, children }: { n: number; color: string; children: ReactNode }) {
+  return (
+    <div className="flex items-start gap-2.5 text-sm">
+      <span className={`text-${color}-400 shrink-0 w-4 text-right font-bold`}>{n}.</span>
+      <span className="text-neutral-400">{children}</span>
+    </div>
+  )
+}
+
+// ─── Callout ────────────────────────────────────────────────────────
+
+/** Literal class strings so Tailwind's scanner can detect them. */
+const CALLOUT_COLORS: Record<string, { borderL: string; borderY: string; bg: string; text: string; codeText: string; dimText: string }> = {
+  amber:   { borderL: 'border-amber-500/40',   borderY: 'border-y-amber-500/15',   bg: 'bg-amber-500/5',   text: 'text-amber-400',   codeText: 'text-amber-300/80',   dimText: 'text-amber-400/60' },
+  blue:    { borderL: 'border-blue-500/40',    borderY: 'border-y-blue-500/15',    bg: 'bg-blue-500/5',    text: 'text-blue-400',    codeText: 'text-blue-300/80',    dimText: 'text-blue-400/60' },
+  cyan:    { borderL: 'border-cyan-500/40',    borderY: 'border-y-cyan-500/15',    bg: 'bg-cyan-500/5',    text: 'text-cyan-400',    codeText: 'text-cyan-300/80',    dimText: 'text-cyan-400/60' },
+  emerald: { borderL: 'border-emerald-500/40', borderY: 'border-y-emerald-500/15', bg: 'bg-emerald-500/5', text: 'text-emerald-400', codeText: 'text-emerald-300/80', dimText: 'text-emerald-400/60' },
+  fuchsia: { borderL: 'border-fuchsia-500/40', borderY: 'border-y-fuchsia-500/15', bg: 'bg-fuchsia-500/5', text: 'text-fuchsia-400', codeText: 'text-fuchsia-300/80', dimText: 'text-fuchsia-400/60' },
+  green:   { borderL: 'border-green-500/40',   borderY: 'border-y-green-500/15',   bg: 'bg-green-500/5',   text: 'text-green-400',   codeText: 'text-green-300/80',   dimText: 'text-green-400/60' },
+  indigo:  { borderL: 'border-indigo-500/40',  borderY: 'border-y-indigo-500/15',  bg: 'bg-indigo-500/5',  text: 'text-indigo-400',  codeText: 'text-indigo-300/80',  dimText: 'text-indigo-400/60' },
+  lime:    { borderL: 'border-lime-500/40',    borderY: 'border-y-lime-500/15',    bg: 'bg-lime-500/5',    text: 'text-lime-400',    codeText: 'text-lime-300/80',    dimText: 'text-lime-400/60' },
+  orange:  { borderL: 'border-orange-500/40',  borderY: 'border-y-orange-500/15',  bg: 'bg-orange-500/5',  text: 'text-orange-400',  codeText: 'text-orange-300/80',  dimText: 'text-orange-400/60' },
+  pink:    { borderL: 'border-pink-500/40',    borderY: 'border-y-pink-500/15',    bg: 'bg-pink-500/5',    text: 'text-pink-400',    codeText: 'text-pink-300/80',    dimText: 'text-pink-400/60' },
+  purple:  { borderL: 'border-purple-500/40',  borderY: 'border-y-purple-500/15',  bg: 'bg-purple-500/5',  text: 'text-purple-400',  codeText: 'text-purple-300/80',  dimText: 'text-purple-400/60' },
+  red:     { borderL: 'border-red-500/40',     borderY: 'border-y-red-500/15',     bg: 'bg-red-500/5',     text: 'text-red-400',     codeText: 'text-red-300/80',     dimText: 'text-red-400/60' },
+  rose:    { borderL: 'border-rose-500/40',    borderY: 'border-y-rose-500/15',    bg: 'bg-rose-500/5',    text: 'text-rose-400',    codeText: 'text-rose-300/80',    dimText: 'text-rose-400/60' },
+  sky:     { borderL: 'border-sky-500/40',     borderY: 'border-y-sky-500/15',     bg: 'bg-sky-500/5',     text: 'text-sky-400',     codeText: 'text-sky-300/80',     dimText: 'text-sky-400/60' },
+  teal:    { borderL: 'border-teal-500/40',    borderY: 'border-y-teal-500/15',    bg: 'bg-teal-500/5',    text: 'text-teal-400',    codeText: 'text-teal-300/80',    dimText: 'text-teal-400/60' },
+  violet:  { borderL: 'border-violet-500/40',  borderY: 'border-y-violet-500/15',  bg: 'bg-violet-500/5',  text: 'text-violet-400',  codeText: 'text-violet-300/80',  dimText: 'text-violet-400/60' },
+}
+
+export function getCalloutColors(color: string) {
+  return CALLOUT_COLORS[color] ?? CALLOUT_COLORS.blue
+}
+
+export function Callout({ color, children }: { color: string; children: ReactNode }) {
+  const c = CALLOUT_COLORS[color] ?? CALLOUT_COLORS.blue
+  return (
+    <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}
+    </div>
+  )
+}
+
+export function CalloutCode({ color, children }: { color: string; children: ReactNode }) {
+  const c = CALLOUT_COLORS[color] ?? CALLOUT_COLORS.blue
+  return (
+    <code className={`block bg-neutral-800/80 px-2 py-1 rounded mt-1.5 text-[13px] ${c.codeText}`}>
+      {children}
+    </code>
+  )
+}
+
+export function CalloutDim({ children }: { children: ReactNode }) {
+  return <p className="text-neutral-500 mt-1.5">{children}</p>
+}
+
+// ─── Code Block ─────────────────────────────────────────────────────
+
+export function CodeBlock({ children }: { children: ReactNode }) {
+  return (
+    <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}</div>
+  )
+}
+
+// ─── Inline Code ────────────────────────────────────────────────────
+
+export function CK({ color, children }: { color?: string; children: ReactNode }) {
+  const textColor = color ? `text-${color}-400` : ''
+  return (
+    <code className={`bg-neutral-800/80 px-1.5 py-px rounded text-[0.9em] ${textColor}`}>{children}</code>
+  )
+}
+
+// ─── External Link ──────────────────────────────────────────────────
+
+export function ExternalLink({ href, children }: { href: string; children: ReactNode }) {
+  return (
+    <a href={href} target="_blank" rel="noopener noreferrer" className="underline cursor-pointer">
+      {children}
+    </a>
+  )
+}
+
+// ─── Location List (colored-dot items in CSS Grid) ──────────────────
+
+export function LocationList({ children }: { children: ReactNode }) {
+  return (
+    <div className="mb-5">
+      <div className="grid grid-cols-[auto_1fr] gap-x-4">{children}</div>
+    </div>
+  )
+}
+
+export function LocationItem({
+  color,
+  label,
+  children,
+  even,
+}: {
+  color: string
+  label: string
+  children: ReactNode
+  even?: boolean
+}) {
+  const bg = even ? 'bg-white/[0.015]' : ''
+  return (
+    <>
+      <div className={`py-2 border-b border-neutral-800/60 ${bg} flex items-center gap-1.5`}>
+        <span
+          className={`w-2 h-2 rounded-full bg-${color}-500/50 border border-${color}-500 shrink-0`}
+        />
+        <span className={`text-${color}-400 text-sm font-semibold`}>{label}</span>
+      </div>
+      <div className={`py-2 border-b border-neutral-800/60 ${bg} text-sm text-neutral-400`}>{children}</div>
+    </>
+  )
+}
+
+// ─── TitledLI — Bullet item with colored title + description ────────
+
+export function TitledLI({ color, title, children }: { color: string; title: string; children: ReactNode }) {
+  return (
+    <li className="flex items-start gap-2 text-sm text-neutral-400">
+      <span className={`text-${color}-400 shrink-0`} style={{ marginTop: '3px', fontSize: '18px', lineHeight: '14px' }}>&#x2022;</span>
+      <span>
+        <span className={`text-${color}-300 font-semibold`}>{title}</span>
+        {' '}&mdash; {children}
+      </span>
+    </li>
+  )
+}
+
+// ─── CalloutDialog — Conversation exchange inside a Callout ─────────
+
+export function CalloutDialog({ color, lines }: { color: string; lines: { speaker: string; text: string }[] }) {
+  return (
+    <div className="bg-neutral-800/80 rounded px-2 py-1 mt-1.5 flex flex-col gap-0.5 text-[13px]">
+      {lines.map((line, idx) => (
+        <div key={idx}>
+          <span className={`text-${color}-300 font-semibold mr-1`}>{line.speaker}:</span>
+          <span className="text-neutral-400">{line.text}</span>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+// ─── TagGrid — Flex-wrapped CK pills ────────────────────────────────
+
+export function TagGrid({ color, tags }: { color: string; tags: string[] }) {
+  return (
+    <div className="flex flex-wrap gap-1.5 mb-5">
+      {tags.map((tag) => <CK key={tag} color={color}>{tag}</CK>)}
+    </div>
+  )
+}
+
+// ─── StatusBadge — Colored circle indicator row (use inside DL) ─────
+
+export function StatusBadge({ value, badgeColor, label, children, even }: {
+  value: string
+  badgeColor: string
+  label: string
+  children: ReactNode
+  even?: boolean
+}) {
+  return (
+    <DLRow
+      term={
+        <span className="flex items-center gap-1.5">
+          <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`}>{value}</span>
+          <span className={`text-${badgeColor}-400 font-semibold`}>{label}</span>
+        </span>
+      }
+      even={even}
+    >
+      {children}
+    </DLRow>
+  )
+}
+
+// ─── BulletGridRow — Bullet item in grid layout (use inside DL) ─────
+
+export function BulletGridRow({ color, term, children, even }: {
+  color: string
+  term: string
+  children: ReactNode
+  even?: boolean
+}) {
+  return (
+    <DLRow
+      term={
+        <span className="flex items-center gap-1.5">
+          <span className={`text-${color}-400`} style={{ fontSize: '18px', lineHeight: '14px' }}>&#x2022;</span>
+          <span className={`text-${color}-400 font-semibold`}>{term}</span>
+        </span>
+      }
+      even={even}
+    >
+      {children}
+    </DLRow>
+  )
+}
+
+// ─── NumberGridRow — Numbered item in grid layout (use inside DL) ───
+
+export function NumberGridRow({ color, n, term, children, even }: {
+  color: string
+  n: number
+  term: string
+  children: ReactNode
+  even?: boolean
+}) {
+  return (
+    <DLRow
+      term={
+        <span className="flex items-center gap-1.5">
+          <span className={`text-${color}-400 font-bold w-4 text-right shrink-0`}>{n}.</span>
+          <span className={`text-${color}-400 font-semibold`}>{term}</span>
+        </span>
+      }
+      even={even}
+    >
+      {children}
+    </DLRow>
+  )
+}