design-brain-memory 0.8.2 → 0.9.0

package/dist/theatrical.js

@@ -0,0 +1,258 @@
+import path from 'node:path';
+import os from 'node:os';
+import fs from 'fs-extra';
+import { runAgentBrowserJson } from './agentBrowser.js';
+const SESSION_NAME = 'design-brain-demo';
+/* ─── Highlight injection script ─── */
+const HIGHLIGHT_SCRIPT = String.raw `(() => {
+  const style = document.createElement('style');
+  style.id = 'design-brain-highlights';
+  style.textContent = [
+    '@keyframes db-pulse { 0%,100% { opacity: 0.7; } 50% { opacity: 1; } }',
+    '.db-highlight-color { outline: 3px solid #00ff88 !important; animation: db-pulse 1s infinite; }',
+    '.db-highlight-typo { text-decoration: underline wavy #ff6b00 !important; text-underline-offset: 4px; }',
+    '.db-highlight-component { outline: 3px solid #6366f1 !important; outline-offset: 2px; box-shadow: 0 0 12px rgba(99,102,241,0.4) !important; }',
+  ].join('\n');
+  document.head.appendChild(style);
+
+  const nodes = Array.from(document.querySelectorAll('body *')).slice(0, 500);
+  let colorCount = 0, typoCount = 0, compCount = 0;
+
+  nodes.forEach(el => {
+    const s = getComputedStyle(el);
+    const bg = s.backgroundColor;
+    if (bg && bg !== 'rgba(0, 0, 0, 0)' && bg !== 'transparent' && colorCount < 15) {
+      el.classList.add('db-highlight-color');
+      colorCount++;
+    }
+    if (el.textContent?.trim().length > 3 && s.fontSize && parseInt(s.fontSize) >= 20 && typoCount < 10) {
+      el.classList.add('db-highlight-typo');
+      typoCount++;
+    }
+    const tag = el.tagName.toLowerCase();
+    if ((tag === 'button' || tag === 'a' || el.getAttribute('role') === 'button') && compCount < 10) {
+      el.classList.add('db-highlight-component');
+      compCount++;
+    }
+  });
+
+  return { colorCount, typoCount, compCount };
+})()`;
+/* ─── Cleanup script ─── */
+const CLEANUP_SCRIPT = String.raw `(() => {
+  document.getElementById('design-brain-highlights')?.remove();
+  document.querySelectorAll('.db-highlight-color,.db-highlight-typo,.db-highlight-component')
+    .forEach(el => el.classList.remove('db-highlight-color','db-highlight-typo','db-highlight-component'));
+})()`;
+/* ─── Scroll script ─── */
+const SCROLL_SCRIPT = String.raw `(() => {
+  window.scrollBy({ top: 400, behavior: 'smooth' });
+  return { scrollY: window.scrollY };
+})()`;
+/* ─── Extraction script (same as extractFromUrl.ts) ─── */
+const EXTRACTION_SCRIPT = String.raw `(() => {
+  const maxNodes = 2000;
+  const nodes = Array.from(document.querySelectorAll('body *')).slice(0, maxNodes);
+
+  const colorMap = new Map();
+  const typographyMap = new Map();
+  const componentList = [];
+  const motionList = [];
+  const layoutList = [];
+  const variableMap = {};
+
+  const componentTags = new Set(['button', 'a', 'input', 'select', 'textarea', 'nav', 'header', 'footer', 'form']);
+  const maxComponents = 220;
+  const maxMotion = 220;
+
+  function normalizeWhitespace(text) {
+    return (text || '').replace(/\s+/g, ' ').trim();
+  }
+
+  function pushColor(value, sample) {
+    if (!value || value === 'transparent' || value === 'rgba(0, 0, 0, 0)') return;
+    const parsed = parseCssColor(value);
+    if (!parsed) return;
+    const key = parsed.toUpperCase();
+    const entry = colorMap.get(key) || { hex: key, count: 0, samples: [] };
+    entry.count += 1;
+    if (sample && entry.samples.length < 5 && !entry.samples.includes(sample)) {
+      entry.samples.push(sample);
+    }
+    colorMap.set(key, entry);
+  }
+
+  function parseCssColor(input) {
+    if (!input) return null;
+    const value = input.toString().trim().toLowerCase();
+    if (value.startsWith('#')) {
+      if (value.length === 4) return '#' + value[1] + value[1] + value[2] + value[2] + value[3] + value[3];
+      if (value.length === 7) return value;
+      return null;
+    }
+    const rgbMatch = value.match(/rgba?\(([^)]+)\)/);
+    if (rgbMatch) {
+      const parts = rgbMatch[1].split(',').map(p => p.trim());
+      const r = Number(parts[0]), g = Number(parts[1]), b = Number(parts[2]);
+      if ([r, g, b].some(n => Number.isNaN(n))) return null;
+      const toHex = n => Math.max(0, Math.min(255, n)).toString(16).padStart(2, '0');
+      return '#' + toHex(r) + toHex(g) + toHex(b);
+    }
+    return null;
+  }
+
+  function buildSelector(el) {
+    const tag = el.tagName.toLowerCase();
+    if (el.id) return tag + '#' + el.id;
+    if (typeof el.className === 'string' && el.className.trim()) {
+      const firstClass = el.className.trim().split(/\s+/).slice(0, 2).join('.');
+      if (firstClass) return tag + '.' + firstClass;
+    }
+    return tag;
+  }
+
+  function addTypography(style) {
+    const key = [style.fontFamily, style.fontSize, style.fontWeight, style.lineHeight].join('|');
+    const existing = typographyMap.get(key) || {
+      fontFamily: style.fontFamily, fontSize: style.fontSize,
+      fontWeight: style.fontWeight, lineHeight: style.lineHeight, count: 0,
+    };
+    existing.count += 1;
+    typographyMap.set(key, existing);
+  }
+
+  function shouldCaptureAsComponent(el, selector) {
+    const tag = el.tagName.toLowerCase();
+    if (componentTags.has(tag)) return true;
+    const className = typeof el.className === 'string' ? el.className.toLowerCase() : '';
+    if (className.includes('btn') || className.includes('button') || className.includes('card') || className.includes('hero')) return true;
+    if (el.getAttribute('role') === 'button' || el.getAttribute('role') === 'navigation') return true;
+    return selector.startsWith('section.') || selector.startsWith('div.card');
+  }
+
+  function inferComponentKind(el) {
+    const tag = el.tagName.toLowerCase();
+    const className = typeof el.className === 'string' ? el.className.toLowerCase() : '';
+    if (tag === 'button' || className.includes('btn')) return 'button';
+    if (tag === 'a') return 'link';
+    if (tag === 'input' || tag === 'textarea' || tag === 'select') return 'form-control';
+    if (tag === 'nav' || className.includes('nav')) return 'navigation';
+    if (className.includes('card')) return 'card';
+    if (tag === 'header') return 'header';
+    if (tag === 'footer') return 'footer';
+    if (className.includes('hero')) return 'hero';
+    return tag;
+  }
+
+  nodes.forEach(el => {
+    const style = window.getComputedStyle(el);
+    if (style.display === 'none' || style.visibility === 'hidden' || Number(style.opacity) === 0) return;
+    const selector = buildSelector(el);
+    pushColor(style.color, selector + ':color');
+    pushColor(style.backgroundColor, selector + ':background');
+    if (style.borderColor && style.borderColor !== 'rgba(0, 0, 0, 0)') {
+      pushColor(style.borderColor, selector + ':border');
+    }
+    const hasText = normalizeWhitespace(el.textContent || '').length > 0;
+    if (hasText) addTypography(style);
+    if (shouldCaptureAsComponent(el, selector) && componentList.length < maxComponents) {
+      componentList.push({
+        kind: inferComponentKind(el), tag: el.tagName.toLowerCase(), selector,
+        text: normalizeWhitespace(el.textContent || '').slice(0, 90),
+        className: typeof el.className === 'string' ? normalizeWhitespace(el.className) : '',
+        styles: {
+          color: style.color, backgroundColor: style.backgroundColor,
+          borderRadius: style.borderRadius, border: style.border,
+          padding: style.padding, margin: style.margin,
+          fontSize: style.fontSize, fontWeight: style.fontWeight, boxShadow: style.boxShadow,
+        },
+      });
+    }
+    const hasTransition = style.transitionDuration && style.transitionDuration !== '0s';
+    const hasAnimation = style.animationName && style.animationName !== 'none';
+    const hasTransform = style.transform && style.transform !== 'none';
+    if ((hasTransition || hasAnimation || hasTransform) && motionList.length < maxMotion) {
+      motionList.push({ selector, transition: style.transition, animation: style.animation, transform: style.transform });
+    }
+  });
+
+  const layoutSelectors = Array.from(document.querySelectorAll('header, nav, main, section, article, aside, footer')).slice(0, 160);
+  layoutSelectors.forEach(el => {
+    layoutList.push({ tag: el.tagName.toLowerCase(), selector: buildSelector(el), role: el.getAttribute('role') || '', children: el.children.length });
+  });
+
+  [document.documentElement, document.body].forEach(root => {
+    if (!root) return;
+    const style = window.getComputedStyle(root);
+    for (const propertyName of style) {
+      if (!propertyName.startsWith('--')) continue;
+      const value = style.getPropertyValue(propertyName).trim();
+      if (value) variableMap[propertyName] = value;
+    }
+  });
+
+  const colors = Array.from(colorMap.values()).sort((a, b) => b.count - a.count).slice(0, 70);
+  const typography = Array.from(typographyMap.values()).sort((a, b) => b.count - a.count).slice(0, 90);
+
+  return {
+    pageTitle: document.title, pageUrl: window.location.href,
+    viewport: { width: window.innerWidth, height: window.innerHeight },
+    colors, typography, components: componentList, motion: motionList,
+    layout: layoutList, cssVariables: variableMap,
+  };
+})()`;
+/* ─── Normalize extraction result ─── */
+function normalizeResult(result) {
+    return {
+        pageTitle: result.pageTitle ?? undefined,
+        pageUrl: result.pageUrl ?? undefined,
+        viewport: result.viewport ?? undefined,
+        colors: result.colors ?? [],
+        typography: result.typography ?? [],
+        components: result.components ?? [],
+        motion: result.motion ?? [],
+        layout: result.layout ?? [],
+        cssVariables: result.cssVariables ?? {},
+    };
+}
+/* ─── Theatrical scan sequence ─── */
+export async function theatricalScan(url) {
+    const screenshotDir = path.join(os.tmpdir(), 'design-brain-theatrical');
+    await fs.ensureDir(screenshotDir);
+    const screenshotPath = path.join(screenshotDir, `scan-${Date.now()}.png`);
+    const browserOpts = { session: SESSION_NAME, headed: true };
+    // 1. Open the URL in a visible browser
+    await runAgentBrowserJson(['open', url], browserOpts);
+    try {
+        // 2. Wait for page to settle
+        await runAgentBrowserJson(['wait', '1500'], browserOpts);
+        // 3. Slow scroll — 4 steps, ~600ms between each
+        for (let i = 0; i < 4; i++) {
+            await runAgentBrowserJson(['eval', SCROLL_SCRIPT], browserOpts);
+            await runAgentBrowserJson(['wait', '600'], browserOpts);
+        }
+        // Scroll back to top for highlight injection
+        await runAgentBrowserJson(['eval', 'window.scrollTo({ top: 0, behavior: "smooth" })'], browserOpts);
+        await runAgentBrowserJson(['wait', '800'], browserOpts);
+        // 4. Inject highlight overlays
+        await runAgentBrowserJson(['eval', HIGHLIGHT_SCRIPT], browserOpts);
+        // 5. Pause for visual impact
+        await runAgentBrowserJson(['wait', '2000'], browserOpts);
+        // 6. Take screenshot with overlays visible
+        await runAgentBrowserJson(['screenshot', screenshotPath, '--full'], browserOpts);
+        // 7. Clean overlays
+        await runAgentBrowserJson(['eval', CLEANUP_SCRIPT], browserOpts);
+        await runAgentBrowserJson(['wait', '300'], browserOpts);
+        // 8. Extract design tokens (real extraction on clean page)
+        const extraction = await runAgentBrowserJson(['eval', EXTRACTION_SCRIPT], browserOpts);
+        if (!extraction.success) {
+            throw new Error(`Extraction failed: ${extraction.error ?? 'Unknown error'}`);
+        }
+        const analysis = normalizeResult(extraction.data.result ?? {});
+        return { analysis, screenshotPath };
+    }
+    finally {
+        await runAgentBrowserJson(['close'], browserOpts).catch(() => undefined);
+    }
+}
+//# sourceMappingURL=theatrical.js.map

package/dist/theatrical.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theatrical.js","sourceRoot":"","sources":["../src/theatrical.ts"],"names":[],"mappings":"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"}

package/dist/types.d.ts

@@ -18,37 +18,68 @@ export interface ComponentToken {
     text: string;
     className: string;
     styles: Record<string, string>;
-    html?: string;
 }
-export interface TransitionDetail {
-    property: string;
-    duration: string;
-    timingFunction: string;
-    delay: string;
+export type AnimationLibrary = 'css' | 'gsap' | 'lottie' | 'framer-motion' | 'react-spring' | 'motion-one' | 'unknown';
+export type MotionIntent = 'fade' | 'slide' | 'scale' | 'rotate' | 'color-shift' | 'spring' | 'bounce' | 'morph' | 'reveal' | 'parallax' | 'complex';
+export type TriggerEvent = 'load' | 'hover' | 'focus' | 'click' | 'scroll' | 'viewport-enter' | 'media-query' | 'unknown';
+export interface KeyframeStop {
+    offset: number;
+    properties: Record<string, string>;
+    easing?: string;
 }
-export interface AnimationDetail {
-    name: string;
-    duration: string;
-    timingFunction: string;
-    delay: string;
-    iterationCount: string;
-    direction: string;
-    fillMode: string;
-}
-export interface KeyframeRule {
-    name: string;
-    steps: Array<{
-        offset: string;
-        declarations: Record<string, string>;
-    }>;
+export interface AnimationTiming {
+    duration: number;
+    delay: number;
+    easing: string;
+    iterations: number;
+    direction: 'normal' | 'reverse' | 'alternate' | 'alternate-reverse';
+    fillMode: 'none' | 'forwards' | 'backwards' | 'both';
+}
+export interface ScrollBinding {
+    triggerSelector?: string;
+    hasScrollTrigger: boolean;
+    hasIntersectionObserver: boolean;
+    scrollTimelineAxis?: 'block' | 'inline';
+}
+export interface PhysicsParams {
+    type: 'spring' | 'bounce' | 'inertia';
+    mass?: number;
+    stiffness?: number;
+    damping?: number;
+    oscillationCount?: number;
+    overshootPercent?: number;
+}
+export interface AnimationGroup {
+    groupId: string;
+    role: 'lead' | 'follower';
+    staggerDelay?: number;
 }
+export interface AnimationToken {
+    selector: string;
+    library: AnimationLibrary;
+    motionIntent: MotionIntent;
+    timing?: AnimationTiming;
+    keyframes?: KeyframeStop[];
+    trigger: TriggerEvent;
+    scrollBinding?: ScrollBinding;
+    physics?: PhysicsParams;
+    group?: AnimationGroup;
+    gsapVars?: Record<string, unknown>;
+    lottieMetadata?: {
+        frameRate: number;
+        totalFrames: number;
+        duration: number;
+    };
+    rawTransition?: string;
+    rawAnimation?: string;
+    rawTransform?: string;
+}
+/** @deprecated Use AnimationToken instead */
 export interface MotionToken {
     selector: string;
     transition: string;
     animation: string;
     transform: string;
-    transitions?: TransitionDetail[];
-    animations?: AnimationDetail[];
 }
 export interface LayoutToken {
     tag: string;
@@ -91,8 +122,7 @@ export interface DesignAnalysis {
     colors: ColorToken[];
     typography: TypographyToken[];
     components: ComponentToken[];
-    motion: MotionToken[];
-    keyframes?: KeyframeRule[];
+    motion: (MotionToken | AnimationToken)[];
     layout: LayoutToken[];
     cssVariables: Record<string, string>;
     accessibilitySnapshot?: string;
@@ -188,8 +218,6 @@ export interface IngestOptions {
         width: number;
         height: number;
     }>;
-    skipVisuals?: boolean;
-    live?: boolean;
 }
 export interface OutcomeOptions {
     rootDir: string;
@@ -200,3 +228,144 @@ export interface OutcomeOptions {
     artifactUrl?: string;
     tags: string[];
 }
+export interface ScanTokens {
+    colors: string[];
+    fontFamilies: string[];
+    fontSizes: string[];
+    transitions: string[];
+    spacingValues: string[];
+    cssVariableCount: number;
+    framework: string | null;
+}
+export interface ScanScore {
+    colorDiscipline: number;
+    typographySystem: number;
+    spacingLayout: number;
+    motionPolish: number;
+    total: number;
+}
+export interface PersonaMatch {
+    name: string;
+    tagline: string;
+    score: number;
+    reasoning: string;
+}
+export interface ScanResult {
+    path: string;
+    filesScanned: number;
+    tokens: ScanTokens;
+    score: ScanScore;
+    persona: PersonaMatch;
+    framework: string | null;
+}
+export interface AgentInfo {
+    name: string;
+    configDir: string;
+    skillDir: string;
+}
+export interface InstallResult {
+    agent: AgentInfo;
+    success: boolean;
+    error?: string;
+}
+export interface TasteColorPreference {
+    palette: Array<{
+        hex: string;
+        role: string;
+        source: string;
+    }>;
+    harmony: string;
+    hueRange: {
+        min: number;
+        max: number;
+    };
+    saturationBias: 'muted' | 'vibrant' | 'neutral';
+    lightnessBias: 'light' | 'dark' | 'balanced';
+}
+export interface TasteTypographyPreference {
+    primaryFont: string;
+    secondaryFont: string | null;
+    scaleType: string;
+    sizes: string[];
+    weightRange: {
+        min: string;
+        max: string;
+    };
+}
+export interface TasteSpacingPreference {
+    baseUnit: number;
+    scale: number[];
+    gridAlignmentRatio: number;
+}
+export interface TasteMotionPreference {
+    easing: string;
+    durations: string[];
+    intensity: 'none' | 'subtle' | 'moderate' | 'expressive';
+}
+export interface TasteComponentPreference {
+    cherryPicks: ComponentCherryPick[];
+    borderRadius: string;
+    shadowStyle: 'none' | 'subtle' | 'elevated' | 'dramatic';
+}
+export interface ComponentCherryPick {
+    componentKind: string;
+    sourceInspirationId: string;
+    sourceUrl: string;
+    tokens: ComponentToken[];
+    styles: Record<string, string>;
+    note?: string;
+}
+export interface TasteDecision {
+    id: string;
+    question: string;
+    answer: string;
+    dimension: 'color' | 'typography' | 'spacing' | 'motion' | 'component' | 'layout' | 'general';
+    decidedAt: string;
+}
+export interface TasteConflict {
+    dimension: string;
+    description: string;
+    options: string[];
+    resolved: boolean;
+    resolvedByDecisionId?: string;
+}
+export interface TasteProfile {
+    id: string;
+    name: string;
+    version: number;
+    sourceInspirationIds: string[];
+    sourceUrls: string[];
+    persona: PersonaMatch;
+    aggregateScore: ScanScore;
+    color: TasteColorPreference;
+    typography: TasteTypographyPreference;
+    spacing: TasteSpacingPreference;
+    motion: TasteMotionPreference;
+    components: TasteComponentPreference;
+    decisions: TasteDecision[];
+    conflicts: TasteConflict[];
+    narrative?: string;
+    principles?: string[];
+    createdAt: string;
+    updatedAt: string;
+}
+export interface TasteDiffResult {
+    alignment: number;
+    dimensions: {
+        color: TasteDimensionDiff;
+        typography: TasteDimensionDiff;
+        spacing: TasteDimensionDiff;
+        motion: TasteDimensionDiff;
+    };
+    deltas: TasteDelta[];
+}
+export interface TasteDimensionDiff {
+    alignment: number;
+    summary: string;
+}
+export interface TasteDelta {
+    dimension: string;
+    issue: string;
+    suggestion: string;
+    severity: 'info' | 'warning' | 'mismatch';
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "design-brain-memory",
-  "version": "0.8.2",
+  "version": "0.9.0",
   "description": "Relational markdown design memory powered by Agent Browser CLI",
   "repository": {
     "type": "git",
@@ -13,10 +13,11 @@
   "type": "module",
   "main": "./dist/index.js",
   "bin": {
-    "design-brain-memory": "dist/cli.js"
+    "design-brain-memory": "./dist/cli.js"
   },
   "files": [
-    "dist"
+    "dist",
+    "skills"
   ],
   "scripts": {
     "build": "tsc -p tsconfig.json",

package/skills/SKILL.md

@@ -0,0 +1,36 @@
+---
+name: design-brain
+description: Design system awareness for AI coding agents. Provides design token guidance, component patterns, and design principles extracted from your codebase.
+---
+
+# Design Brain Skill
+
+You have access to design system knowledge extracted by design-brain-memory.
+
+## When to Use This Skill
+
+- When writing UI components, reference the color palette and typography system
+- When adding spacing/layout, follow the established spacing scale
+- When creating new components, follow existing component patterns
+- When adding transitions/animations, match existing motion patterns
+
+## Design Principles
+
+1. **Consistency** — Use existing design tokens rather than ad-hoc values
+2. **Systematic spacing** — Prefer multiples of 4px (4, 8, 12, 16, 24, 32, 48, 64)
+3. **Color discipline** — Use palette colors from CSS variables or design tokens
+4. **Typography scale** — Stick to the established font size scale
+5. **Motion restraint** — Use consistent transition timing across the UI
+
+## Quick Reference
+
+- Run `npx design-brain-memory scan` to see your design health score
+- Run `npx design-brain-memory scan .` to scan the current directory
+- Design tokens are extracted from CSS, SCSS, and component files
+
+## Tips for Code Generation
+
+- Prefer CSS custom properties (--var-name) over hardcoded values
+- Use the project's existing color palette — don't introduce new colors without reason
+- Match existing component patterns before creating new abstractions
+- Keep transition durations consistent (prefer 150ms, 200ms, or 300ms)

package/skills/design-brain/SKILL.md

@@ -0,0 +1,77 @@
+---
+name: design-brain
+description: Build and query a relational markdown design memory using design-brain-memory and Agent Browser CLI.
+version: 1.0.0
+---
+
+# Design Brain
+
+Capture inspiration from websites/screenshots and turn it into a searchable design memory.
+
+## Install
+
+```bash
+design-brain-memory install-skill
+```
+
+or
+
+```bash
+npx -y skills add design-brain/design-brain
+```
+
+## Workflow
+
+1. Initialize:
+
+```bash
+design-brain-memory init --root <workspace>
+```
+
+2. Ingest inspiration:
+
+```bash
+design-brain-memory ingest --project <id> --url <url> --name "<name>" --tags <tags>
+```
+
+or
+
+```bash
+design-brain-memory ingest --project <id> --screenshot <path> --name "<name>" --tags <tags>
+```
+
+3. Record outcome:
+
+```bash
+design-brain-memory outcome --project <id> --title "<title>" --description "<what was built>" --inspired-by <inspiration-id>
+```
+
+4. Query:
+
+```bash
+design-brain-memory search --query "<keywords>"
+```
+
+```bash
+design-brain-memory ask --query "<question>" --llm-base-url <url> --llm-api-key <key> --llm-model <model>
+```
+
+## Taste Profile Context
+
+Before generating UI code, check for a taste profile:
+
+```bash
+cat .design-brain/taste/*.json 2>/dev/null
+```
+
+If a taste profile exists, all generated UI code should use:
+- Colors from the palette (exact hex values)
+- The specified font families
+- Spacing values from the scale
+- Motion parameters (durations, easing)
+- Cherry-picked component styles where applicable
+
+Commands:
+- `design-brain-memory taste show --project <id> --json` to read taste JSON
+- `design-brain-memory taste score . --project <id>` to check alignment
+- `design-brain-memory taste generate --target tokens --project <id>` to emit CSS variables