@vibes.diy/prompts 2.0.8 → 2.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vibes.diy/prompts",
3
- "version": "2.0.8",
3
+ "version": "2.0.9",
4
4
  "type": "module",
5
5
  "main": "./index.js",
6
6
  "description": "",
@@ -30,8 +30,8 @@
30
30
  "@fireproof/core-types-base": "~0.24.19",
31
31
  "@fireproof/core-types-protocols-cloud": "~0.24.19",
32
32
  "@fireproof/use-fireproof": "~0.24.19",
33
- "@vibes.diy/call-ai-v2": "^2.0.8",
34
- "@vibes.diy/use-vibes-types": "^2.0.8",
33
+ "@vibes.diy/call-ai-v2": "^2.0.9",
34
+ "@vibes.diy/use-vibes-types": "^2.0.9",
35
35
  "arktype": "~2.2.0",
36
36
  "json-schema-faker": "~0.6.1"
37
37
  },
package/style-prompts.js CHANGED
@@ -1,7 +1,20 @@
1
1
  export const stylePrompts = [
2
2
  {
3
3
  name: "brutalist web",
4
- prompt: 'THEME: Neobrutalist — Neobrutalist Design System. A bold, retro-arcade-inspired neobrutalist theme. Hard edges, chunky black borders, thick offset drop shadows, vivid primary color blocks, and uppercase display typography. The mood is playful and unapologetically loud without leaning on direct IP references — it is "level dashboard" energy: raw, graphic, readable, kinetic.\n\nCOLOR PALETTE (oklch): --bg: oklch(0.96 0.01 90) warm off-white canvas; --card-bg: oklch(1.00 0 0) pure white surfaces; --text: oklch(0.15 0.02 280) near-black ink, cool undertone; --border: oklch(0.15 0.02 280) same as text — every stroke is bold; --muted: oklch(0.50 0.02 280) secondary labels; --accent/--red: oklch(0.55 0.24 28) primary action/danger; --yellow: oklch(0.85 0.18 85) highlight/hover; --yellow-dark: oklch(0.75 0.16 85); --green: oklch(0.62 0.19 145) success/active; --blue: oklch(0.52 0.18 255) info/informational accents; --accent-light: oklch(0.55 0.24 28 / 0.1).\n\nTOKENS: --radius: 4px (tiny, never pill-shaped); --shadow: 4px 4px 0px var(--border); --shadow-sm: 3px 3px 0px var(--border).\n\nTYPOGRAPHY: Primary: "Space Grotesk", sans-serif (400, 500, 600, 700). Mono: "JetBrains Mono", monospace (400, 500, 700) — for stats, numbers, tabular data. Loaded from Google Fonts only, no other external deps. Headings are UPPERCASE with tight tracking (-0.02em) and heavy weight (700). Section labels: 0.65rem, uppercase, letter-spacing 0.15em, muted color. Nav/button labels: 0.7–0.8rem, uppercase, letter-spacing 0.05–0.08em.\n\nSURFACE & BORDER LANGUAGE: Every primary surface (nav, cards, hero, modal, inputs, buttons) has a solid 3px var(--border) outline and border-radius of 4px. No gradients on strokes, no thin hairlines. Every elevated surface carries a hard offset shadow — 4px 4px 0px var(--border) by default, 3px 3px for smaller chips, 6px 6px on hover for lift, 8px 8px on modals. Shadows are NEVER blurred. Hover pattern: transform: translate(-2px, -2px) combined with a larger hard shadow — gives a "card pops forward" feel. Active/pressed state flips to translate(2px, 2px) with box-shadow: none — the object visibly slams back down. Transitions: 0.15s for micro-interactions, 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) for toggle knobs (slight overshoot).\n\nLAYOUT: A single centered column, max-width: 920px, padding 3rem 2rem, position: relative; z-index: 10; so it sits above ambient background decorations.\n\nAMBIENT BACKGROUND: Fixed inset grid: two linear-gradients at 60px × 60px with oklch(0.15 0.02 280 / 0.04) — subtle graph-paper feel. 8 floating geometric blocks (.float-block-1..8) placed across the viewport edges, sizes 25–80px, in --red/--yellow/--green/--blue, some square some circular (border-radius: 50%), opacity 0.15–0.3 so they don\'t overpower content. 2 floating plus/cross shapes built from ::before/::after pseudo-elements (40×40, arms 10px thick) — var(--border) color, low opacity. 2 floating diamonds — 30×30 --yellow squares with 3px borders, rotated 45deg. Keyframes (all on loops 5–12s, ease-in-out or linear): drift-spin-1, drift-spin-2, drift-bounce, drift-diagonal, drift-zigzag, drift-pulse, drift-diamond. The shapes should drift, not race.\n\nSECTION COMPOSITION: 1. NAV: Card-style bar with 3px border, shadow, 4px radius. Left: logo = three 12×12 squares (red/yellow/green) + uppercase brand text. Right: .nav-link pill-looking-but-square chips + .status-badge in --green with pulsing 7px dot. 2. HERO: Big bordered card with .hero-accent-bar along the top: a 6px horizontal rainbow split into four equal segments — red 0–25%, yellow 25–50%, green 50–75%, blue 75–100%. Big clamped uppercase title with .hero-text-shadow duplicate offset 5px/5px in --red, opacity 0.5. 3. STAT ROW: 4-column grid of .stat-cards (collapses to 2 then 1 on small screens). Each card has colored header bar: child 1 = --red (white text), 2 = --yellow (dark text), 3 = --blue (white text), 4 = --green (dark text). Body shows big mono number + small uppercase unit label. 4. TABLE: Full-bleed inside bordered card. th: 0.6rem uppercase, 2px bottom border. td: 0.82rem, thin separators. Columns 3 & 4 use JetBrains Mono. Row hover fills with --yellow instantly. Badge styles: badge-active (--green), badge-pending (--yellow), badge-locked (neutral gray). 5. FORM + CONTROLS GRID: 2-column grid of cards. Left: text input + select + progress bar + primary/secondary buttons. Inputs lift on focus with translate(-2px,-2px) + shadow. Progress bar has repeating striped gradient at -45° in --green. Right: checkboxes (22×22, 3px border, --green when checked) + toggles (48×26, 3px border, 4px radius, --yellow when on, knob translates with overshoot) + tag row in four colors. 6. ACTIONS CARD: Flex row with .btn-primary (--red bg, white text, 4×4 shadow), .btn-secondary (--yellow bg, 3×3 shadow), .btn-ghost (card-bg, no shadow, gains 3×3 on hover). 7. MODAL: Overlay oklch(0.15 0.02 280 / 0.6). Modal card: 3px border, 8×8 hard shadow, entry animation modal-pop. .modal-bar: --blue title strip with white text.\n\nINTERACTION: Nothing eases slowly. All hovers/presses resolve in ≤0.2s. Hover lifts up-and-left; press slams down-and-right. Nothing uses soft blur. Every shadow is a discrete offset block. Rounded corners are tiny (4px) everywhere. Color use: --red is primary/danger; --yellow is highlight/warning; --green is success/status; --blue is informational. Don\'t tint surfaces — keep all cards --card-bg white.\n\nACCESSIBILITY: Body text ≥0.82rem, section labels ≥0.6rem. Strong contrast (text on red → white; text on yellow → ink; text on green → ink; text on blue → white). aria-hidden the decorative .hero-text-shadow.\n\nRESPONSIVENESS: ≤700px: stat row collapses to 2 columns, form grid to 1 column. ≤500px: nav stacks vertically, stat row to single column.\n\nFONTS: Use Google Fonts for Space Grotesk (400,500,600,700) and JetBrains Mono (400,500,700). Apply this theme to the generated React component.',
4
+ prompt: [
5
+ `THEME: Neobrutalist — Neobrutalist Design System. A bold, retro-arcade-inspired neobrutalist theme. Hard edges, chunky black borders, thick offset drop shadows, vivid primary color blocks, and uppercase display typography. The mood is playful and unapologetically loud without leaning on direct IP references — it is "level dashboard" energy: raw, graphic, readable, kinetic.`,
6
+ `COLOR PALETTE (oklch): --bg: oklch(0.96 0.01 90) warm off-white canvas; --card-bg: oklch(1.00 0 0) pure white surfaces; --text: oklch(0.15 0.02 280) near-black ink, cool undertone; --border: oklch(0.15 0.02 280) same as text — every stroke is bold; --muted: oklch(0.50 0.02 280) secondary labels; --accent/--red: oklch(0.55 0.24 28) primary action/danger; --yellow: oklch(0.85 0.18 85) highlight/hover; --yellow-dark: oklch(0.75 0.16 85); --green: oklch(0.62 0.19 145) success/active; --blue: oklch(0.52 0.18 255) info/informational accents; --accent-light: oklch(0.55 0.24 28 / 0.1).`,
7
+ `TOKENS: --radius: 4px (tiny, never pill-shaped); --shadow: 4px 4px 0px var(--border); --shadow-sm: 3px 3px 0px var(--border).`,
8
+ `TYPOGRAPHY: Primary: "Space Grotesk", sans-serif (400, 500, 600, 700). Mono: "JetBrains Mono", monospace (400, 500, 700) — for stats, numbers, tabular data. Loaded from Google Fonts only, no other external deps. Headings are UPPERCASE with tight tracking (-0.02em) and heavy weight (700). Section labels: 0.65rem, uppercase, letter-spacing 0.15em, muted color. Nav/button labels: 0.7–0.8rem, uppercase, letter-spacing 0.05–0.08em.`,
9
+ `SURFACE & BORDER LANGUAGE: Every primary surface (nav, cards, hero, modal, inputs, buttons) has a solid 3px var(--border) outline and border-radius of 4px. No gradients on strokes, no thin hairlines. Every elevated surface carries a hard offset shadow — 4px 4px 0px var(--border) by default, 3px 3px for smaller chips, 6px 6px on hover for lift, 8px 8px on modals. Shadows are NEVER blurred. Hover pattern: transform: translate(-2px, -2px) combined with a larger hard shadow — gives a "card pops forward" feel. Active/pressed state flips to translate(2px, 2px) with box-shadow: none — the object visibly slams back down. Transitions: 0.15s for micro-interactions, 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) for toggle knobs (slight overshoot).`,
10
+ `LAYOUT: A single centered column, max-width: 920px, padding 3rem 2rem, position: relative; z-index: 10; so it sits above ambient background decorations.`,
11
+ `AMBIENT BACKGROUND: Fixed inset grid: two linear-gradients at 60px × 60px with oklch(0.15 0.02 280 / 0.04) — subtle graph-paper feel. 8 floating geometric blocks (.float-block-1..8) placed across the viewport edges, sizes 25–80px, in --red/--yellow/--green/--blue, some square some circular (border-radius: 50%), opacity 0.15–0.3 so they don't overpower content. 2 floating plus/cross shapes built from ::before/::after pseudo-elements (40×40, arms 10px thick) — var(--border) color, low opacity. 2 floating diamonds — 30×30 --yellow squares with 3px borders, rotated 45deg. Keyframes (all on loops 5–12s, ease-in-out or linear): drift-spin-1, drift-spin-2, drift-bounce, drift-diagonal, drift-zigzag, drift-pulse, drift-diamond. The shapes should drift, not race.`,
12
+ `SECTION COMPOSITION: 1. NAV: Card-style bar with 3px border, shadow, 4px radius. Left: logo = three 12×12 squares (red/yellow/green) + uppercase brand text. Right: .nav-link pill-looking-but-square chips. 2. HERO: Big bordered card with .hero-accent-bar along the top: a 6px horizontal rainbow split into four equal segments — red 0–25%, yellow 25–50%, green 50–75%, blue 75–100%. Big clamped uppercase title with .hero-text-shadow duplicate offset 5px/5px in --red, opacity 0.5. 3. STAT ROW: 4-column grid of .stat-cards (collapses to 2 then 1 on small screens). Each card has colored header bar: child 1 = --red (white text), 2 = --yellow (dark text), 3 = --blue (white text), 4 = --green (dark text). Body shows big mono number + small uppercase unit label. 4. TABLE: Full-bleed inside bordered card. th: 0.6rem uppercase, 2px bottom border. td: 0.82rem, thin separators. Columns 3 & 4 use JetBrains Mono. Row hover fills with --yellow instantly. Badge styles: badge-active (--green), badge-pending (--yellow), badge-locked (neutral gray). 5. FORM + CONTROLS GRID: 2-column grid of cards. Left: text input + select + progress bar + primary/secondary buttons. Inputs lift on focus with translate(-2px,-2px) + shadow. Progress bar has repeating striped gradient at -45° in --green. Right: checkboxes (22×22, 3px border, --green when checked) + toggles (48×26, 3px border, 4px radius, --yellow when on, knob translates with overshoot) + tag row in four colors. 6. ACTIONS CARD: Flex row with .btn-primary (--red bg, white text, 4×4 shadow), .btn-secondary (--yellow bg, 3×3 shadow), .btn-ghost (card-bg, no shadow, gains 3×3 on hover). 7. MODAL: Overlay oklch(0.15 0.02 280 / 0.6). Modal card: 3px border, 8×8 hard shadow, entry animation modal-pop. .modal-bar: --blue title strip with white text.`,
13
+ `INTERACTION: Nothing eases slowly. All hovers/presses resolve in ≤0.2s. Hover lifts up-and-left; press slams down-and-right. Nothing uses soft blur. Every shadow is a discrete offset block. Rounded corners are tiny (4px) everywhere. Color use: --red is primary/danger; --yellow is highlight/warning; --green is success/status; --blue is informational. Don't tint surfaces — keep all cards --card-bg white.`,
14
+ `ACCESSIBILITY: Body text ≥0.82rem, section labels ≥0.6rem. Strong contrast (text on red → white; text on yellow → ink; text on green → ink; text on blue → white). aria-hidden the decorative .hero-text-shadow.`,
15
+ `RESPONSIVENESS: ≤700px: stat row collapses to 2 columns, form grid to 1 column. ≤500px: nav stacks vertically, stat row to single column.`,
16
+ `FONTS: Use Google Fonts for Space Grotesk (400,500,600,700) and JetBrains Mono (400,500,700). Apply this theme to the generated React component.`,
17
+ ].join("\n\n"),
5
18
  },
6
19
  {
7
20
  name: "memphis",
@@ -1 +1 @@
1
- {"version":3,"file":"style-prompts.js","sourceRoot":"","sources":["../jsr/style-prompts.ts"],"names":[],"mappings":"AAKA,MAAM,CAAC,MAAM,YAAY,GAAkB;IAIzC;QACE,IAAI,EAAE,eAAe;QACrB,MAAM,EACJ,o0LAAo0L;KACv0L;IACD;QACE,IAAI,EAAE,SAAS;QACf,MAAM,EACJ,+8BAA+8B;KACl9B;IACD;QACE,IAAI,EAAE,WAAW;QACjB,MAAM,EAAE,uBAAuB;KAChC;IACD;QACE,IAAI,EAAE,YAAY;QAClB,MAAM,EAAE,sBAAsB;KAC/B;IACD;QACE,IAAI,EAAE,YAAY;QAClB,MAAM,EAAE,mBAAmB;KAC5B;IACD;QACE,IAAI,EAAE,cAAc;QACpB,MAAM,EAAE,mBAAmB;KAC5B;IACD;QACE,IAAI,EAAE,aAAa;QACnB,MAAM,EAAE,kBAAkB;KAC3B;IACD;QACE,IAAI,EAAE,SAAS;QACf,MAAM,EAAE,qBAAqB;KAC9B;IACD;QACE,IAAI,EAAE,YAAY;QAClB,MAAM,EAAE,0BAA0B;KACnC;IACD;QACE,IAAI,EAAE,cAAc;QACpB,MAAM,EAAE,kBAAkB;KAC3B;IACD;QACE,IAAI,EAAE,UAAU;QAChB,MAAM,EACJ,orCAAorC;KACvrC;CACF,CAAC;AAGF,MAAM,CAAC,MAAM,kBAAkB,GAAG,eAAwB,CAAC;AAG3D,MAAM,WAAW,GAAG,IAAI,GAAG,EAAuB,CAAC;AACnD,KAAK,MAAM,CAAC,IAAI,YAAY,EAAE,CAAC;IAC7B,IAAI,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;QAC5B,MAAM,IAAI,KAAK,CAAC,mCAAmC,CAAC,CAAC,IAAI,gCAAgC,CAAC,CAAC;IAC7F,CAAC;IACD,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;AAC7B,CAAC;AAGD,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,GAAG,EAAE;IACtC,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;IAClD,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC5D,MAAM,IAAI,KAAK,CACb,uBAAuB,kBAAkB,iDAAiD,SAAS,gDAAgD,CACpJ,CAAC;IACJ,CAAC;IACD,OAAO,KAAK,CAAC,MAAM,CAAC;AACtB,CAAC,CAAC,EAAE,CAAC"}
1
+ {"version":3,"file":"style-prompts.js","sourceRoot":"","sources":["../jsr/style-prompts.ts"],"names":[],"mappings":"AAKA,MAAM,CAAC,MAAM,YAAY,GAAkB;IAIzC;QACE,IAAI,EAAE,eAAe;QACrB,MAAM,EAAE;YACN,yXAAyX;YACzX,0kBAA0kB;YAC1kB,+HAA+H;YAC/H,gbAAgb;YAChb,quBAAquB;YACruB,0JAA0J;YAC1J,8vBAA8vB;YAC9vB,uwDAAuwD;YACvwD,uZAAuZ;YACvZ,kNAAkN;YAClN,2IAA2I;YAC3I,kJAAkJ;SACnJ,CAAC,IAAI,CAAC,MAAM,CAAC;KACf;IACD;QACE,IAAI,EAAE,SAAS;QACf,MAAM,EACJ,+8BAA+8B;KACl9B;IACD;QACE,IAAI,EAAE,WAAW;QACjB,MAAM,EAAE,uBAAuB;KAChC;IACD;QACE,IAAI,EAAE,YAAY;QAClB,MAAM,EAAE,sBAAsB;KAC/B;IACD;QACE,IAAI,EAAE,YAAY;QAClB,MAAM,EAAE,mBAAmB;KAC5B;IACD;QACE,IAAI,EAAE,cAAc;QACpB,MAAM,EAAE,mBAAmB;KAC5B;IACD;QACE,IAAI,EAAE,aAAa;QACnB,MAAM,EAAE,kBAAkB;KAC3B;IACD;QACE,IAAI,EAAE,SAAS;QACf,MAAM,EAAE,qBAAqB;KAC9B;IACD;QACE,IAAI,EAAE,YAAY;QAClB,MAAM,EAAE,0BAA0B;KACnC;IACD;QACE,IAAI,EAAE,cAAc;QACpB,MAAM,EAAE,kBAAkB;KAC3B;IACD;QACE,IAAI,EAAE,UAAU;QAChB,MAAM,EACJ,orCAAorC;KACvrC;CACF,CAAC;AAGF,MAAM,CAAC,MAAM,kBAAkB,GAAG,eAAwB,CAAC;AAG3D,MAAM,WAAW,GAAG,IAAI,GAAG,EAAuB,CAAC;AACnD,KAAK,MAAM,CAAC,IAAI,YAAY,EAAE,CAAC;IAC7B,IAAI,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;QAC5B,MAAM,IAAI,KAAK,CAAC,mCAAmC,CAAC,CAAC,IAAI,gCAAgC,CAAC,CAAC;IAC7F,CAAC;IACD,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;AAC7B,CAAC;AAGD,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,GAAG,EAAE;IACtC,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;IAClD,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC5D,MAAM,IAAI,KAAK,CACb,uBAAuB,kBAAkB,iDAAiD,SAAS,gDAAgD,CACpJ,CAAC;IACJ,CAAC;IACD,OAAO,KAAK,CAAC,MAAM,CAAC;AACtB,CAAC,CAAC,EAAE,CAAC"}