prism-design 2.13.0

package/scripts/shared/types.ts

@@ -0,0 +1,220 @@
+/**
+ * shared/types.ts — Prism Phase 5 Sprint 80/20
+ * Contrat unique pour tous les types partagés (élimine divergences)
+ */
+
+// ─── SiteTokens (unifié — bank-register + retheme convergent) ────────────────
+
+export interface SiteTokens {
+  colors: {
+    background: string;
+    text: string;
+    accent: string;
+    border: string;
+  };
+  typography: {
+    primary: string;
+    secondary?: string;
+    mono?: string;
+  };
+  borderRadius: {
+    sm: string;
+    md: string;
+    full: string;
+  };
+  spacing: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl?: string;
+  };
+  isDark: boolean;
+}
+
+// ─── Bank types (source : bank-register.ts) ───────────────────────────────────
+
+export interface ComponentSnapshot {
+  id: string;
+  domain: string;
+  extractionPath: string;
+  url: string;
+  extractedAt: string;
+  registeredAt: string;
+  componentType: string;
+  componentLabel: string;
+  variantIndex: number;
+  siteTokens: SiteTokens;
+  styles: Record<string, any>;
+  tags: string[];
+  screenshotPath?: string;
+  designMdPath?: string;
+}
+
+export interface BankIndexEntry {
+  id: string;
+  domain: string;
+  type: string;
+  label: string;
+  tags: string[];
+  accent: string;
+  background: string;
+  isDark: boolean;
+  extractedAt: string;
+  registeredAt: string;
+}
+
+export interface BankIndex {
+  version: string;
+  updatedAt: string;
+  components: BankIndexEntry[];
+}
+
+export interface BankCatalog {
+  version: string;
+  updatedAt: string;
+  byType: Record<string, string[]>;
+  byDomain: Record<string, string[]>;
+  byTags: Record<string, string[]>;
+}
+
+// ─── Block types (source : extract-block.ts) ──────────────────────────────────
+
+export interface BlockNode {
+  tag: string;
+  classes: string[];
+  id?: string;
+  text: string;
+  attributes: Record<string, string>;
+  rect: { x: number; y: number; width: number; height: number };
+  styles: Record<string, string>;
+  children: BlockNode[];
+}
+
+export interface BlockExtraction {
+  url: string;
+  domain: string;
+  selector: string;
+  extractedAt: string;
+  viewport: { width: number; height: number };
+  rootNode: BlockNode;
+  nodeCount: number;
+  maxDepthReached: number;
+  truncated: boolean;
+  screenshotPath?: string;
+}
+
+// ─── Extraction types (Phase 1.3) — shared boundary types for raw-css.json data ─
+
+/** Computed CSS styles extracted via getComputedStyle() — Playwright snapshot per element */
+export interface ComputedStylesShared {
+  backgroundColor?: string;
+  backgroundImage?: string;
+  color?: string;
+  fontFamily?: string;
+  fontSize?: string;
+  fontWeight?: string;
+  lineHeight?: string;
+  letterSpacing?: string;
+  textAlign?: string;
+  padding?: string;
+  margin?: string;
+  borderRadius?: string;
+  border?: string;
+  boxShadow?: string;
+  width?: string;
+  height?: string;
+  display?: string;
+  gap?: string;
+  gridTemplateColumns?: string;
+  flexDirection?: string;
+  alignItems?: string;
+  justifyContent?: string;
+  position?: string;
+  transition?: string;
+  opacity?: string;
+  textTransform?: string;
+  [key: string]: string | undefined; // allow future props
+}
+
+export interface ElementExtractionShared {
+  selector: string;
+  tag: string;
+  classes: string[];
+  text: string;
+  styles: ComputedStylesShared;
+  children?: number;
+  rect?: { x: number; y: number; width: number; height: number };
+}
+
+export interface SectionExtractionShared {
+  index: number;
+  tag: string;
+  classes: string[];
+  role?: string;
+  estimatedPurpose?: string;
+  rect?: { x: number; y: number; width: number; height: number };
+  styles?: Partial<ComputedStylesShared> | Record<string, string>;
+  childCount?: number;
+}
+
+export interface ComponentVariantShared {
+  tag: string;
+  classes: string[];
+  text?: string;
+  styles: ComputedStylesShared;
+  rect?: { x: number; y: number; width: number; height: number };
+}
+
+/** Imagery profile extracted in Phase 0.2 */
+export interface ImageryProfileShared {
+  ogImage: string | null;
+  ogImageWidth: number | null;
+  ogImageHeight: number | null;
+  twitterImage: string | null;
+  heroImage: { src: string; alt: string; width: number; height: number; aspectRatio: number } | null;
+  formats: { png: number; jpg: number; webp: number; svg: number; gif: number; other: number };
+  totalImages: number;
+  totalAboveFold: number;
+  aspectRatioBuckets: { landscape: number; portrait: number; square: number; ultrawide: number };
+  illustrationHeavy: boolean;
+  photoHeavy: boolean;
+  avgImageSize: { width: number; height: number };
+}
+
+/** Full viewport extraction = one snapshot at a specific viewport (desktop/mobile) */
+export interface ViewportExtraction {
+  url: string;
+  domain: string;
+  timestamp: string;
+  viewport: { width: number; height: number };
+  pageTitle: string;
+  cssCustomProperties: Record<string, string>;
+  elements: Record<string, ElementExtractionShared | null>;
+  sections: SectionExtractionShared[];
+  allColors: string[];
+  allFontFamilies: string[];
+  allFontSizes: string[];
+  allBorderRadii: string[];
+  allShadows: string[];
+  allTransitions: string[];
+  images: { src: string; alt: string; width: number; height: number }[];
+  imageryProfile?: ImageryProfileShared;
+  links: { href: string; text: string; isNav: boolean }[];
+  componentVariants: Record<string, ComponentVariantShared[]>;
+  componentStates: Record<string, Record<string, ComputedStylesShared>>;
+  fontFaces: Array<{ family: string; src: string; weight: string; style: string; display: string }>;
+  mediaBreakpoints: string[];
+  openTypeFeatures: string[];
+  variableAxes: string[];
+  keyframes?: Record<string, Record<string, Record<string, string>>>;
+  zIndexMap?: Array<{ selector: string; z: number; stackingRoot: string }>;
+}
+
+/** Top-level raw-css.json structure (desktop + optional mobile viewports) */
+export interface RawCssData {
+  desktop: ViewportExtraction;
+  mobile?: ViewportExtraction;
+  /** Optional schema version (Phase 1.2 added — undefined for pre-v2.4 archives) */
+  version?: string;
+}

package/scripts/sync-catalog.ts

@@ -0,0 +1,105 @@
+/**
+ * Sync catalog/index.json with filesystem state:
+ * - Add brands that exist on disk but missing from catalog
+ * - Remove brands in catalog but missing on disk (wipe cleanup)
+ * - Then enrich-catalog runs over the synced list
+ */
+
+import { readFileSync, writeFileSync, existsSync, readdirSync, statSync } from 'fs';
+import { join } from 'path';
+
+const ROOT = process.cwd();
+const CATALOG_PATH = join(ROOT, 'catalog', 'index.json');
+const EXTRACT_DIR = join(ROOT, 'extractions');
+
+interface Brand {
+  domain: string;
+  hasDesignMd: boolean;
+  hasTokens: boolean;
+  hasScreenshots: boolean;
+  hasFrontmatter: boolean;
+  accent: string;
+  description: string;
+  sizeKb: number;
+  category: string;
+  dark: boolean;
+  font: string;
+  completeness: number;
+  extractedAt: string;
+}
+
+function makeEntry(domain: string): Brand {
+  return {
+    domain,
+    hasDesignMd: existsSync(join(EXTRACT_DIR, domain, 'DESIGN.md')),
+    hasTokens: existsSync(join(EXTRACT_DIR, domain, 'tokens.json')),
+    hasScreenshots: existsSync(join(EXTRACT_DIR, domain, 'screenshots')),
+    hasFrontmatter: false,
+    accent: '#5e6ad2',
+    description: `Design system extracted from ${domain}`,
+    sizeKb: 0,
+    category: 'SaaS / Product',
+    dark: false,
+    font: 'Inter',
+    completeness: 0,
+    extractedAt: new Date().toISOString(),
+  };
+}
+
+async function main() {
+  console.log('🔄 Sync catalog/index.json with filesystem state\n');
+
+  const catalog = JSON.parse(readFileSync(CATALOG_PATH, 'utf-8'));
+  const existing = new Map<string, Brand>(catalog.brands.map((b: Brand) => [b.domain, b]));
+
+  // List on-disk extractions with at least raw-css.json (real extraction, not orphan)
+  const onDisk = readdirSync(EXTRACT_DIR)
+    .filter(d => !d.startsWith('_'))
+    .filter(d => statSync(join(EXTRACT_DIR, d)).isDirectory())
+    .filter(d => existsSync(join(EXTRACT_DIR, d, 'raw-css.json')));
+
+  console.log(`  📁 ${onDisk.length} extractions on disk (with raw-css.json)`);
+  console.log(`  📚 ${existing.size} brands in catalog before sync`);
+
+  // Add missing
+  let added = 0;
+  for (const domain of onDisk) {
+    if (!existing.has(domain)) {
+      existing.set(domain, makeEntry(domain));
+      added++;
+      console.log(`  + ${domain}`);
+    }
+  }
+
+  // Remove ghost entries (catalog declares but no raw-css.json on disk)
+  let removed = 0;
+  const validDomains = new Set(onDisk);
+  for (const domain of [...existing.keys()]) {
+    if (!validDomains.has(domain)) {
+      // Skip removal only if the brand is in tests/goldens (preserve for tests)
+      const goldenPath = join(ROOT, 'tests', 'goldens', `${domain}.DESIGN.md`);
+      if (existsSync(goldenPath)) {
+        console.log(`  ⏭  ${domain} (ghost, but golden test present — keep)`);
+        continue;
+      }
+      existing.delete(domain);
+      removed++;
+      console.log(`  - ${domain}`);
+    }
+  }
+
+  const newBrands = [...existing.values()];
+  catalog.brands = newBrands;
+  catalog.count = newBrands.length;
+  catalog.version = '1.5.0';
+  catalog.lastSyncedAt = new Date().toISOString();
+
+  writeFileSync(CATALOG_PATH, JSON.stringify(catalog, null, 2));
+
+  console.log(`\n✅ Catalog synced`);
+  console.log(`   + ${added} added`);
+  console.log(`   - ${removed} removed`);
+  console.log(`   = ${newBrands.length} total brands`);
+}
+
+main().catch(err => { console.error(err); process.exit(1); });