@vibes.diy/prompts 2.2.13-dev.5 → 2.2.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vibes.diy/prompts",
-  "version": "2.2.13-dev.5",
+  "version": "2.2.13",
   "type": "module",
   "main": "./index.js",
   "description": "",
@@ -30,8 +30,8 @@
     "@fireproof/core-types-base": "~0.24.19",
     "@fireproof/core-types-protocols-cloud": "~0.24.19",
     "@fireproof/use-fireproof": "~0.24.19",
-    "@vibes.diy/call-ai-v2": "^2.2.13-dev.5",
-    "@vibes.diy/use-vibes-types": "^2.2.13-dev.5",
+    "@vibes.diy/call-ai-v2": "^2.2.13",
+    "@vibes.diy/use-vibes-types": "^2.2.13",
     "arktype": "~2.2.0",
     "json-schema-faker": "~0.6.1"
   },

package/style-prompts.js

@@ -5,7 +5,7 @@ export const stylePrompts = [
             `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.`,
             `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).`,
             `TOKENS: --radius: 4px (tiny, never pill-shaped); --shadow: 4px 4px 0px var(--border); --shadow-sm: 3px 3px 0px var(--border).`,
-            `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 with display=optional 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.`,
+            `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 with display=block (preceded by <link rel="preconnect"> to fonts.googleapis.com and fonts.gstatic.com so the briefly-blank period stays short), 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.`,
             `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).`,
             `LAYOUT: A single centered column, max-width: 920px, padding 3rem 2rem, position: relative; z-index: 10; so it sits above ambient background decorations.`,
             `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.`,
@@ -13,7 +13,7 @@ export const stylePrompts = [
             `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.`,
             `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.`,
             `RESPONSIVENESS: ≤700px: stat row collapses to 2 columns, form grid to 1 column. ≤500px: nav stacks vertically, stat row to single column.`,
-            `FONTS: Use Google Fonts for Space Grotesk (400,500,600,700) and JetBrains Mono (400,500,700). Always use display=optional so fonts don't block rendering.`,
+            `FONTS: Use Google Fonts for Space Grotesk (400,500,600,700) and JetBrains Mono (400,500,700). Use display=block (so the page briefly waits for the real font instead of showing a fallback and then swapping) and add <link rel="preconnect" href="https://fonts.googleapis.com"> + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> right before the stylesheet so the connection is warm.`,
             `LOADING STATES: Every button that triggers an async operation (callAI, fetch, database save) MUST show a loading state. Use a useState boolean \`isLoading\`. While loading: disable the button with \`disabled={isLoading}\`, replace its label with a spinning SVG (a 16x16 circle with 3px stroke, top quarter transparent, CSS animation rotate 0.8s linear infinite), and optionally add a short text like "Loading..." nearby. Pattern: \`setIsLoading(true); try { await callAI(...); } finally { setIsLoading(false); }\`. The spinner should match the theme: 3px stroke in var(--border) color, no blur, sharp edges. Never leave a button clickable with no feedback during an async call.`,
             `Apply this theme to the generated React component.`,
         ].join("\n\n"),

package/style-prompts.js.map

@@ -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,EAAE;YACN,yXAAyX;YACzX,0kBAA0kB;YAC1kB,+HAA+H;YAC/H,scAAsc;YACtc,quBAAquB;YACruB,0JAA0J;YAC1J,8vBAA8vB;YAC9vB,uwDAAuwD;YACvwD,uZAAuZ;YACvZ,kNAAkN;YAClN,2IAA2I;YAC3I,2JAA2J;YAC3J,uqBAAuqB;YACvqB,oDAAoD;SACrD,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"}
+{"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,0jBAA0jB;YAC1jB,quBAAquB;YACruB,0JAA0J;YAC1J,8vBAA8vB;YAC9vB,uwDAAuwD;YACvwD,uZAAuZ;YACvZ,kNAAkN;YAClN,2IAA2I;YAC3I,iZAAiZ;YACjZ,uqBAAuqB;YACvqB,oDAAoD;SACrD,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"}

package/system-prompt.md

@@ -65,7 +65,8 @@ If a single SEARCH/REPLACE grows beyond ~25 lines, split it.
 
 - A line ending in `...` is a single-line **prefix match** — the source line must begin with what's before the `...`; the rest is ignored. Use this to skip long Tailwind class strings or other noisy line tails.
 - A line starting with `...` is a **multi-line skip** — it matches zero or more source lines of any content. Any text after the leading `...` is just a comment for clarity (e.g. `...rest of body`). The skipped lines are part of the replaced range.
-- A `...` in the middle of a line is literal text and participates in exact match. The REPLACE side never has special meaning for `...` — write the new content verbatim.
+- A `...` in the middle of a line is literal text and participates in exact match.
+- **On the REPLACE side, `...` mirrors the SEARCH-side `...` it pairs with — the captured source content is reused verbatim, so you don't need to retype it.** Trailing-`...` on REPLACE pairs by ordinal with trailing-`...` on SEARCH (1st with 1st, etc.) and reuses the captured source-line tail. A line that is just `...` on REPLACE pairs by ordinal with the multi-line skips on SEARCH (leading, inter-segment, trailing — in that order) and substitutes the source lines the SEARCH-side skip ate, so you can preserve a block of content between two anchors without retyping it. If a REPLACE `...` has no SEARCH-side counterpart to pair, it stays literal. Mid-line `...` always stays literal.
 
 Example — replacing a function with a fat Tailwind line without retyping the classes:
 
@@ -119,6 +120,34 @@ Inline JSX attribute on a long element — change just one prop:
 >>>>>>> REPLACE
 ```
 
+Mirror form — change one token mid-line and let `...` carry the tail through. Use this when only a value in the middle changes and re-typing the rest is noise:
+
+```css
+<<<<<<< SEARCH
+  .accent-btn { background: var(--accent); color: white; font-size: 0.78rem;...
+=======
+  .accent-btn { background: var(--accent); color: white; font-size: 0.92rem;...
+>>>>>>> REPLACE
+```
+
+The trailing `...` on REPLACE reuses whatever the SEARCH-side `...` ate — so the rest of the rule lands intact without you having to retype it.
+
+Same idea with leading-`...` — change a few non-adjacent keys in a styles object while preserving everything in between:
+
+```jsx
+<<<<<<< SEARCH
+    title:    "old-title",
+...
+    feedTitle: "old-feed-title",
+=======
+    title:    "new-title",
+...
+    feedTitle: "new-feed-title",
+>>>>>>> REPLACE
+```
+
+The `...` on REPLACE substitutes the source lines the SEARCH-side `...` skipped — every key between `title:` and `feedTitle:` lands back unchanged.
+
 If a short prefix would match in two places, then add just enough surrounding context to disambiguate — but don't pre-emptively copy the whole long line.
 
 ❌ Do NOT replace the entire `c = { ... }` styles object, the entire `:root { ... }` block, or a long JSX line in one giant SEARCH/REPLACE. Reproducing those bytes from memory drifts (variable names invented, rgba values guessed, key order shuffled, trailing commas changed) and the matcher rejects with `no-match` over and over. **One key, one variable, one attribute per edit, with `...` doing the heavy lifting.**