@pithyjs/pidl-catalog 0.1.0-beta.3 → 0.1.0-beta.7

package/dist/specs/sections/contact-section.pidl.json

@@ -6,6 +6,7 @@
     "version": "0.1.0",
     "level": "section",
     "domain": "sections",
+    "icon": "mail",
     "bidi": true,
     "description": "Contact information section with semantic address element, contact details, and form placeholder. Children projected into form area for V0.2 forms or external embeds.",
     "props": [
@@ -165,7 +166,7 @@
         "patterns": [
             "Basic contact: <ContactSection contacts=\"contactItems\"/>",
             "With form placeholder: <ContactSection contacts=\"contactItems\"><p>Form coming in V0.2</p></ContactSection>",
-            "Custom heading: <ContactSection heading=\"'Get in Touch'\" description=\"'We'd love to hear from you'\" contacts=\"contactItems\"/>"
+            "Custom heading: <ContactSection heading=\"'Get in Touch'\" description=\"'We would love to hear from you'\" contacts=\"contactItems\"/>"
         ]
     },
     "examples": [

package/dist/specs/sections/cta-section.pidl.json

@@ -6,6 +6,7 @@
     "version": "0.1.0",
     "level": "section",
     "domain": "sections",
+    "icon": "megaphone",
     "bidi": true,
     "description": "Call-to-action banner section with heading, description, and action buttons. Supports centered and inline layouts with semantic color theming.",
     "props": [

package/dist/specs/sections/faq-section.pidl.json

@@ -6,6 +6,7 @@
     "version": "0.1.0",
     "level": "section",
     "domain": "sections",
+    "icon": "chevron-down",
     "bidi": true,
     "description": "Frequently-asked-questions section composed from the Accordion organism. Renders a centered header (optional eyebrow + heading + subheading) above a measure-constrained stack of native <details> disclosures, one per question.",
     "props": [

package/dist/specs/sections/features-section.pidl.json

@@ -6,6 +6,7 @@
     "version": "0.1.0",
     "level": "section",
     "domain": "sections",
+    "icon": "layout-grid",
     "bidi": true,
     "description": "Feature grid section with icon, heading, and description per item. Renders a responsive grid of feature cards with optional section heading.",
     "props": [

package/dist/specs/sections/footer-section.pidl.json

@@ -6,6 +6,7 @@
     "version": "0.1.0",
     "level": "section",
     "domain": "sections",
+    "icon": "panel-bottom",
     "bidi": true,
     "description": "Page footer with navigation link groups, branding, and copyright. Uses semantic <footer> element with <nav> for link groups.",
     "props": [

package/dist/specs/sections/hero-section.pidl.json

@@ -6,6 +6,7 @@
     "version": "0.1.0",
     "level": "section",
     "domain": "sections",
+    "icon": "sparkle",
     "bidi": true,
     "description": "Hero section template with heading, subtext, and CTA area. Two layout variants: centered (stacked, text-centered) and split (image + text side by side). Children projected as CTA buttons.",
     "props": [
@@ -191,7 +192,7 @@
         {
             "id": "split-hero",
             "title": "Split hero with image",
-            "pithy": "<HeroSection variant=\"'split'\" heading=\"'Ship Faster'\" imageSrc=\"'/hero.jpg'\" imageAlt=\"'Dashboard'\"><Button>Start Free</Button></HeroSection>",
+            "pithy": "<HeroSection variant=\"'split'\" heading=\"'Ship Faster'\" imageSrc=\"'/hero.jpg'\" imageAlt=\"'Dashboard'\" imageWidth=\"1200\" imageHeight=\"800\"><Button>Start Free</Button></HeroSection>",
             "assertions": [
                 "renders split layout",
                 "image present",

package/dist/src/borders-psychology.js.map

@@ -1 +1 @@
-{"version":3,"file":"borders-psychology.js","sourceRoot":"","sources":["../../src/borders-psychology.ts"],"names":[],"mappings":"AAAA,8HAA8H;AAE9H;;;;;;;;;;;;;GAaG;AAEH,MAAM,CAAC,MAAM,2BAA2B,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;CAyB1C,CAAC,IAAI,EAAE,CAAC"}
+{"version":3,"file":"borders-psychology.js","sourceRoot":"","sources":["../../src/borders-psychology.ts"],"names":[],"mappings":"AAAA,8HAA8H;AAE9H;;;;;;;;;;;;;GAaG;AAEH,MAAM,CAAC,MAAM,2BAA2B,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;CAyB1C,CAAC,IAAI,EAAE,CAAC","sourcesContent":["/** @codex { \"id\": \"pithy.pidl-catalog.borders-psychology\", \"title\": \"Borders Psychology Guidance\", \"category\": \"feature\" } */\n\n/**\n * Borders Psychology guidance — proprietary research-backed border-weight rules,\n * injected into the AI system prompt so generated sites use a border style that\n * fits the user's industry / use-case / mood.\n *\n * Border weight signals structure and definition: minimal/none reads airy,\n * modern, content-first; subtle reads gently defined; standard reads clear and\n * structured; strong reads bold, utilitarian, data-dense. Maps onto the design\n * system's border presets (minimal / subtle / standard / strong). Intentionally\n * compact for the 0.1 release.\n *\n * This file lives in the private @pithyjs/pidl-catalog package and is NEVER\n * published to npm — it is IP and must stay server-side.\n */\n\nexport const BORDERS_PSYCHOLOGY_GUIDANCE = `\n## Border Psychology (structure & definition)\n\nBorder weight signals how structured vs. airy a UI feels. Minimal/none reads\nmodern, open, content-first; subtle reads gently defined and calm; standard reads\nclear, organized, professional; strong reads bold, utilitarian, information-dense.\nPick the weight that matches the brand and how much structure the content needs.\n\n### Border preset → use-case\n- minimal → editorial, luxury, photography, minimalist & high-design brands —\n  rely on whitespace, not lines\n- subtle → most consumer & marketing sites, wellness, calm brands — light\n  definition\n- standard (default) → SaaS, business, forms-heavy or app-like products — clear,\n  organized structure\n- strong → dashboards, data tables, enterprise & admin tools — maximum\n  delineation for dense information\n\n### Applying it\nFor a NEW page or site built from scratch, emit ONE \\`theme.setPreset\\` mutation\nto set the border weight — exact shape:\n\\`{ \"op\": \"theme.setPreset\", \"module\": \"borders\", \"value\": \"subtle\" }\\`\n\\`value\\` MUST be one of: minimal, subtle, standard, strong. Do this only for new\nbuilds, not for small content edits, and never when the user asks to keep the\ncurrent style.\n`.trim();\n"]}

package/dist/src/color-psychology.js.map

@@ -1 +1 @@
-{"version":3,"file":"color-psychology.js","sourceRoot":"","sources":["../../src/color-psychology.ts"],"names":[],"mappings":"AAAA,0HAA0H;AAE1H;;;;;;;;;;;;;;;;GAgBG;AAEH,MAAM,CAAC,MAAM,yBAAyB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqCxC,CAAC,IAAI,EAAE,CAAC"}
+{"version":3,"file":"color-psychology.js","sourceRoot":"","sources":["../../src/color-psychology.ts"],"names":[],"mappings":"AAAA,0HAA0H;AAE1H;;;;;;;;;;;;;;;;GAgBG;AAEH,MAAM,CAAC,MAAM,yBAAyB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqCxC,CAAC,IAAI,EAAE,CAAC","sourcesContent":["/** @codex { \"id\": \"pithy.pidl-catalog.color-psychology\", \"title\": \"Color Psychology Guidance\", \"category\": \"feature\" } */\n\n/**\n * Color Psychology guidance — proprietary research-backed color selection rules.\n *\n * Injected into the AI system prompt so the model chooses a brand `--color-primary`\n * (OKLCH) suited to the user's industry / use-case / mood, instead of defaulting\n * to blue. The design system re-derives the ENTIRE palette (surfaces, text,\n * borders, statuses, tints) from that single seed, so a well-chosen primary is\n * the highest-leverage decision the AI makes about a site's look.\n *\n * Hue values are OKLCH degrees; lightness/chroma ranges are tuned so the derived\n * palette stays accessible in BOTH light and dark mode. This is intentionally\n * compact for the 0.1 release — a heuristic the model applies, not an exhaustive\n * taxonomy.\n *\n * This file lives in the private @pithyjs/pidl-catalog package and is NEVER\n * published to npm — it is part of our IP and must stay server-side.\n */\n\nexport const COLOR_PSYCHOLOGY_GUIDANCE = `\n## Color Psychology (choosing the brand primary)\n\nWhen building a site from scratch, choose \\`--color-primary\\` deliberately from the\npsychology of the user's industry and mood — never leave it on the default blue.\nColors carry consistent emotional associations: blue = trust/calm, green =\ngrowth/health, red = energy/appetite, purple = creativity/luxury, orange/yellow =\nwarmth/optimism, pink = warmth/approachability, near-neutral = premium/minimal.\n\n### Industry → hue (OKLCH degrees)\n- Healthcare / wellness / medical → calm blue (250), healing teal (195), or balanced green (150)\n- Finance / banking / legal / insurance → deep trust blue (255–265), or low-chroma slate\n- Tech / SaaS / startup → confident blue (255) or electric indigo/violet (280)\n- Food / restaurant / coffee → appetite red (28), warm orange (55), or earthy brown (low-chroma 60)\n- Eco / sustainability / outdoors / agriculture → natural green (145) or earthy olive (110)\n- Beauty / fashion / lifestyle → magenta-pink (350) or soft violet (300)\n- Education / nonprofit / community → friendly blue (250), optimistic teal (190), or warm orange (60)\n- Luxury / premium → very low-chroma near-neutral, deep violet (300), with optional gold accent (85)\n- Creative / entertainment / media → vivid violet (290) or energetic magenta (330)\n- Real estate / construction / industrial → dependable blue (250) or strong slate, optional amber (70)\n- Playful / kids → cheerful yellow (95) or friendly coral (30)\n\n### Tuning lightness & chroma to personality\n- Bold / energetic / youthful → higher chroma (0.16–0.22), lightness 60–70%\n- Professional / trustworthy / calm → moderate chroma (0.08–0.14), lightness 50–60%\n- Luxury / premium / minimal → low chroma (0.02–0.06), lightness 38–52%\n- Friendly / approachable → warm hue, lightness 64–72%\n\n### Selection strategy\n1. Infer the industry AND the mood from the user's prompt (e.g. \"modern coffee shop\" → food + warm/inviting).\n2. Pick a hue from the matching industry band above.\n3. Set lightness & chroma from the brand personality.\n4. Keep lightness roughly 45–70% so the design system can derive accessible contrast in BOTH light and dark mode.\n5. Pick blue ONLY when it genuinely fits (trust-critical finance/health/tech) — otherwise differentiate.\n\nApply your choice as the single \\`theme.setColor\\` \\`--color-primary\\` mutation\ndescribed in the Output Envelope; the whole palette is derived from it.\n`.trim();\n"]}

package/dist/src/design-intelligence.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-intelligence.js","sourceRoot":"","sources":["../../src/design-intelligence.ts"],"names":[],"mappings":"AAAA,6HAA6H;AAE7H;;;;;;;;;GASG;AAEH,MAAM,CAAC,MAAM,yBAAyB,GAAG;;;;;;;;;;;;;;;;;;;;;;;CAuBxC,CAAC,IAAI,EAAE,CAAC"}
+{"version":3,"file":"design-intelligence.js","sourceRoot":"","sources":["../../src/design-intelligence.ts"],"names":[],"mappings":"AAAA,6HAA6H;AAE7H;;;;;;;;;GASG;AAEH,MAAM,CAAC,MAAM,yBAAyB,GAAG;;;;;;;;;;;;;;;;;;;;;;;CAuBxC,CAAC,IAAI,EAAE,CAAC","sourcesContent":["/** @codex { \"id\": \"pithy.pidl-catalog.design-intelligence\", \"title\": \"Design Intelligence Rules\", \"category\": \"feature\" } */\n\n/**\n * Design Intelligence rules — proprietary psychology-backed composition rules.\n *\n * These rules are injected into the AI system prompt to guide page generation.\n * They encode design psychology research (Halo Effect, Cognitive Fluency,\n * Peak-End Rule) and section composition constraints.\n *\n * This file lives in the private @pithyjs/pidl-catalog package and is NEVER\n * published to npm.\n */\n\nexport const DESIGN_INTELLIGENCE_RULES = `\n## Design Intelligence Rules\n\n### Halo Effect\n- Use high-quality hero imagery and typography to create positive first impressions\n- The first section sets the perceived quality for the entire page\n- Pair professional imagery with clean, spacious layouts\n\n### Cognitive Fluency\n- Prefer familiar layouts (centered hero, grid features, closing CTA)\n- Use clear visual hierarchy with consistent heading levels\n- Limit choices: 3-5 feature cards, 2-3 pricing tiers, 1-2 CTAs per section\n\n### Peak-End Rule\n- End every page with a strong CTA section or compelling closing message\n- The last section the user sees disproportionately affects their memory of the page\n- Footer should reinforce trust (links, contact info, social proof)\n\n### Section Composition Guidelines\n- Hero: max 1 primary CTA + 1 secondary CTA. No more.\n- Features grid: 3 or 6 items for visual balance. Avoid 4 (awkward 2x2).\n- CTA sections: single focused action. Multiple CTAs dilute effectiveness.\n- Contact: label + value pairs. Validate all URLs with isSafeHref().\n`.trim();\n"]}