@engenty/wizards 0.8.0 → 0.9.1

package/dist/openui/server.js.map

@@ -1 +1 @@
-{"version":3,"file":"server.js","names":["WIZARD_COMPONENT","wizardProps","z","WIZARD_DESCRIPTION","WizardSpec","defineComponent","addWizard","library","loadWizards","base","runtimeUrl","tokens","res","token","w","fieldLine","choices","f","o","wizardRules","wizards"],"sources":["../../src/openui/server.ts"],"sourcesContent":["import type { PublicField, PublicWizard } from \"@engenty-wizards/shared/run\";\nimport { defineComponent, type Library } from \"@openuidev/react-lang\";\nimport { z } from \"zod\";\n\n/**\n * The model's half of the Wizard component: its props, its description and the rules a system\n * prompt gets. Nothing here draws, so a chat server builds its prompt from this file alone.\n */\n\nexport const WIZARD_COMPONENT = \"Wizard\";\n\nexport const wizardProps = z.object({\n  wizard: z.string().describe(\"The token of a wizard from the list of available wizards\"),\n  note: z\n    .string()\n    .optional()\n    .describe(\"One short sentence shown above the wizard: why it starts now\"),\n  prefill: z\n    .record(z.string(), z.unknown())\n    .optional()\n    .describe(\n      \"Answers already known from the conversation, by field id; the person still checks them\",\n    ),\n});\n\nexport type WizardProps = z.infer<typeof wizardProps>;\n\nexport const WIZARD_DESCRIPTION =\n  \"Runs a predefined wizard inline: its pages, AI steps, review and result, exactly as its author defined them. Use it whenever a listed wizard fits the request; never rebuild a wizard's pages with Form components.\";\n\n/** The component as a prompt sees it: the same name and props, nothing to draw. */\nexport const WizardSpec = defineComponent({\n  name: WIZARD_COMPONENT,\n  description: WIZARD_DESCRIPTION,\n  props: wizardProps,\n  component: () => null,\n});\n\n/**\n * The library with the Wizard component among a Card's children. A server passes `WizardSpec`\n * for its prompt, the browser the drawing `Wizard`; both make the same prompt.\n */\nexport function addWizard<L extends Library>(\n  library: L,\n  component: typeof WizardSpec = WizardSpec,\n): Library {\n  if (!library.extend) {\n    throw new Error(\"This OpenUI library cannot be extended.\");\n  }\n  return library.extend({ components: { add: [{ component, slots: [\"Card\"] }] } });\n}\n\n/** A wizard as the chat server lists it to the model. */\nexport interface WizardInfo {\n  token: string;\n  title: string;\n  description: string;\n  fields: PublicField[];\n}\n\n/** Reads the published wizards behind these tokens from a runtime; ones it cannot read are left out. */\nexport async function loadWizards(runtimeUrl: string, tokens: string[]): Promise<WizardInfo[]> {\n  const base = runtimeUrl.replace(/\\/+$/, \"\");\n  const found = await Promise.all(\n    tokens.map(async (token) => {\n      try {\n        const res = await fetch(`${base}/api/public/wizards/${encodeURIComponent(token)}`);\n        if (!res.ok) {\n          return null;\n        }\n        const w = (await res.json()) as PublicWizard;\n        return w.available\n          ? { token: w.token, title: w.title, description: w.description, fields: w.fields ?? [] }\n          : null;\n      } catch {\n        return null;\n      }\n    }),\n  );\n  return found.filter((w): w is WizardInfo => w !== null);\n}\n\nfunction fieldLine(f: PublicField): string {\n  const choices = f.options?.length\n    ? ` one of ${f.options.map((o) => JSON.stringify(o)).join(\" | \")}`\n    : \"\";\n  return `${f.id} (${f.kind}${choices}${f.required ? \", required\" : \"\"}): ${f.label}`;\n}\n\n/** The rules a system prompt adds for the Wizard component: when to use it and which wizards exist. */\nexport function wizardRules(wizards: WizardInfo[]): string[] {\n  if (!wizards.length) {\n    return [];\n  }\n  const list = wizards\n    .map(\n      (w) =>\n        `- \"${w.title}\" token: ${w.token} — ${w.description}\\n  fields: ${w.fields.map(fieldLine).join(\"; \") || \"none\"}`,\n    )\n    .join(\"\\n\");\n  return [\n    `Wizards are fixed workflows with their own pages, AI steps and results. When the person asks for something a wizard below does, answer with a Card that holds one short TextContent and Wizard(\"<token>\", \"<note>\", {prefill}). Do not ask the wizard's questions yourself and do not build them as a Form: the wizard asks them.`,\n    `Prefill only answers the person has actually given in this conversation, by field id; leave out anything you would have to guess. Dates are YYYY-MM-DD.`,\n    `When a message says a wizard finished, its context holds the result: answer in plain words about it, and start a wizard again only when asked.`,\n    `Available wizards:\\n${list}`,\n  ];\n}\n"],"mappings":";;;AASA,IAAaA,IAAmB,UAEnBC,IAAcC,EAAE,OAAO;CAClC,QAAQA,EAAE,OAAO,CAAC,CAAC,SAAS,0DAA0D;CACtF,MAAMA,EACH,OAAO,CAAC,CACR,SAAS,CAAC,CACV,SAAS,8DAA8D;CAC1E,SAASA,EACN,OAAOA,EAAE,OAAO,GAAGA,EAAE,QAAQ,CAAC,CAAC,CAC/B,SAAS,CAAC,CACV,SACC,wFACF;AACJ,CAAC,GAIYC,IACX,uNAGWC,IAAaC,EAAgB;CACxC,MAAML;CACN,aAAaG;CACb,OAAOF;CACP,iBAAiB;AACnB,CAAC;AAMD,SAAgBK,EACd,GACA,IAA+BF,GACtB;CACT,IAAI,CAACG,EAAQ,QACX,MAAU,MAAM,yCAAyC;CAE3D,OAAOA,EAAQ,OAAO,EAAE,YAAY,EAAE,KAAK,CAAC;EAAE;EAAW,OAAO,CAAC,MAAM;CAAE,CAAC,EAAE,EAAE,CAAC;AACjF;AAWA,eAAsBC,EAAY,GAAoB,GAAyC;CAC7F,IAAMC,IAAOC,EAAW,QAAQ,QAAQ,EAAE;CAiB1C,QAAO,MAhBa,QAAQ,IAC1BC,EAAO,IAAI,OAAO,MAAU;EAC1B,IAAI;GACF,IAAMC,IAAM,MAAM,MAAM,GAAGH,EAAK,sBAAsB,mBAAmBI,CAAK,GAAG;GACjF,IAAI,CAACD,EAAI,IACP,OAAO;GAET,IAAME,IAAK,MAAMF,EAAI,KAAK;GAC1B,OAAOE,EAAE,YACL;IAAE,OAAOA,EAAE;IAAO,OAAOA,EAAE;IAAO,aAAaA,EAAE;IAAa,QAAQA,EAAE,UAAU,CAAC;GAAE,IACrF;EACN,QAAQ;GACN,OAAO;EACT;CACF,CAAC,CACH,EAAA,CACa,QAAQ,MAAuBA,MAAM,IAAI;AACxD;AAEA,SAASC,EAAU,GAAwB;CACzC,IAAMC,IAAUC,EAAE,SAAS,SACvB,WAAWA,EAAE,QAAQ,KAAK,MAAM,KAAK,UAAUC,CAAC,CAAC,CAAC,CAAC,KAAK,KAAK,MAC7D;CACJ,OAAO,GAAGD,EAAE,GAAG,IAAIA,EAAE,OAAOD,IAAUC,EAAE,WAAW,eAAe,GAAG,KAAKA,EAAE;AAC9E;AAGA,SAAgBE,EAAY,GAAiC;CAU3D,OATKC,EAAQ,SASN;EACL;EACA;EACA;EACA,uBAVWA,EACV,KACE,MACC,MAAMN,EAAE,MAAM,WAAWA,EAAE,MAAM,KAAKA,EAAE,YAAY,cAAcA,EAAE,OAAO,IAAIC,CAAS,CAAC,CAAC,KAAK,IAAI,KAAK,QAC5G,CAAC,CACA,KAAK,IAKiB;CACzB,IAbS,CAAC;AAcZ"}
+{"version":3,"file":"server.js","names":["WIZARD_COMPONENT","wizardProps","z","WIZARD_DESCRIPTION","WizardSpec","defineComponent","addWizard","library","loadWizards","base","runtimeUrl","tokens","res","token","w","fieldLine","choices","f","o","wizardRules","wizards"],"sources":["../../src/openui/server.ts"],"sourcesContent":["import type { PublicField, PublicWizard } from \"@engenty/wizards-shared/run\";\nimport { defineComponent, type Library } from \"@openuidev/react-lang\";\nimport { z } from \"zod\";\n\n/**\n * The model's half of the Wizard component: its props, its description and the rules a system\n * prompt gets. Nothing here draws, so a chat server builds its prompt from this file alone.\n */\n\nexport const WIZARD_COMPONENT = \"Wizard\";\n\nexport const wizardProps = z.object({\n  wizard: z.string().describe(\"The token of a wizard from the list of available wizards\"),\n  note: z\n    .string()\n    .optional()\n    .describe(\"One short sentence shown above the wizard: why it starts now\"),\n  prefill: z\n    .record(z.string(), z.unknown())\n    .optional()\n    .describe(\n      \"Answers already known from the conversation, by field id; the person still checks them\",\n    ),\n});\n\nexport type WizardProps = z.infer<typeof wizardProps>;\n\nexport const WIZARD_DESCRIPTION =\n  \"Runs a predefined wizard inline: its pages, AI steps, review and result, exactly as its author defined them. Use it whenever a listed wizard fits the request; never rebuild a wizard's pages with Form components.\";\n\n/** The component as a prompt sees it: the same name and props, nothing to draw. */\nexport const WizardSpec = defineComponent({\n  name: WIZARD_COMPONENT,\n  description: WIZARD_DESCRIPTION,\n  props: wizardProps,\n  component: () => null,\n});\n\n/**\n * The library with the Wizard component among a Card's children. A server passes `WizardSpec`\n * for its prompt, the browser the drawing `Wizard`; both make the same prompt.\n */\nexport function addWizard<L extends Library>(\n  library: L,\n  component: typeof WizardSpec = WizardSpec,\n): Library {\n  if (!library.extend) {\n    throw new Error(\"This OpenUI library cannot be extended.\");\n  }\n  return library.extend({ components: { add: [{ component, slots: [\"Card\"] }] } });\n}\n\n/** A wizard as the chat server lists it to the model. */\nexport interface WizardInfo {\n  token: string;\n  title: string;\n  description: string;\n  fields: PublicField[];\n}\n\n/** Reads the published wizards behind these tokens from a runtime; ones it cannot read are left out. */\nexport async function loadWizards(runtimeUrl: string, tokens: string[]): Promise<WizardInfo[]> {\n  const base = runtimeUrl.replace(/\\/+$/, \"\");\n  const found = await Promise.all(\n    tokens.map(async (token) => {\n      try {\n        const res = await fetch(`${base}/api/public/wizards/${encodeURIComponent(token)}`);\n        if (!res.ok) {\n          return null;\n        }\n        const w = (await res.json()) as PublicWizard;\n        return w.available\n          ? { token: w.token, title: w.title, description: w.description, fields: w.fields ?? [] }\n          : null;\n      } catch {\n        return null;\n      }\n    }),\n  );\n  return found.filter((w): w is WizardInfo => w !== null);\n}\n\nfunction fieldLine(f: PublicField): string {\n  const choices = f.options?.length\n    ? ` one of ${f.options.map((o) => JSON.stringify(o)).join(\" | \")}`\n    : \"\";\n  return `${f.id} (${f.kind}${choices}${f.required ? \", required\" : \"\"}): ${f.label}`;\n}\n\n/** The rules a system prompt adds for the Wizard component: when to use it and which wizards exist. */\nexport function wizardRules(wizards: WizardInfo[]): string[] {\n  if (!wizards.length) {\n    return [];\n  }\n  const list = wizards\n    .map(\n      (w) =>\n        `- \"${w.title}\" token: ${w.token} — ${w.description}\\n  fields: ${w.fields.map(fieldLine).join(\"; \") || \"none\"}`,\n    )\n    .join(\"\\n\");\n  return [\n    `Wizards are fixed workflows with their own pages, AI steps and results. When the person asks for something a wizard below does, answer with a Card that holds one short TextContent and Wizard(\"<token>\", \"<note>\", {prefill}). Do not ask the wizard's questions yourself and do not build them as a Form: the wizard asks them.`,\n    `Prefill only answers the person has actually given in this conversation, by field id; leave out anything you would have to guess. Dates are YYYY-MM-DD.`,\n    `When a message says a wizard finished, its context holds the result: answer in plain words about it, and start a wizard again only when asked.`,\n    `Available wizards:\\n${list}`,\n  ];\n}\n"],"mappings":";;;AASA,IAAaA,IAAmB,UAEnBC,IAAcC,EAAE,OAAO;CAClC,QAAQA,EAAE,OAAO,CAAC,CAAC,SAAS,0DAA0D;CACtF,MAAMA,EACH,OAAO,CAAC,CACR,SAAS,CAAC,CACV,SAAS,8DAA8D;CAC1E,SAASA,EACN,OAAOA,EAAE,OAAO,GAAGA,EAAE,QAAQ,CAAC,CAAC,CAC/B,SAAS,CAAC,CACV,SACC,wFACF;AACJ,CAAC,GAIYC,IACX,uNAGWC,IAAaC,EAAgB;CACxC,MAAML;CACN,aAAaG;CACb,OAAOF;CACP,iBAAiB;AACnB,CAAC;AAMD,SAAgBK,EACd,GACA,IAA+BF,GACtB;CACT,IAAI,CAACG,EAAQ,QACX,MAAU,MAAM,yCAAyC;CAE3D,OAAOA,EAAQ,OAAO,EAAE,YAAY,EAAE,KAAK,CAAC;EAAE;EAAW,OAAO,CAAC,MAAM;CAAE,CAAC,EAAE,EAAE,CAAC;AACjF;AAWA,eAAsBC,EAAY,GAAoB,GAAyC;CAC7F,IAAMC,IAAOC,EAAW,QAAQ,QAAQ,EAAE;CAiB1C,QAAO,MAhBa,QAAQ,IAC1BC,EAAO,IAAI,OAAO,MAAU;EAC1B,IAAI;GACF,IAAMC,IAAM,MAAM,MAAM,GAAGH,EAAK,sBAAsB,mBAAmBI,CAAK,GAAG;GACjF,IAAI,CAACD,EAAI,IACP,OAAO;GAET,IAAME,IAAK,MAAMF,EAAI,KAAK;GAC1B,OAAOE,EAAE,YACL;IAAE,OAAOA,EAAE;IAAO,OAAOA,EAAE;IAAO,aAAaA,EAAE;IAAa,QAAQA,EAAE,UAAU,CAAC;GAAE,IACrF;EACN,QAAQ;GACN,OAAO;EACT;CACF,CAAC,CACH,EAAA,CACa,QAAQ,MAAuBA,MAAM,IAAI;AACxD;AAEA,SAASC,EAAU,GAAwB;CACzC,IAAMC,IAAUC,EAAE,SAAS,SACvB,WAAWA,EAAE,QAAQ,KAAK,MAAM,KAAK,UAAUC,CAAC,CAAC,CAAC,CAAC,KAAK,KAAK,MAC7D;CACJ,OAAO,GAAGD,EAAE,GAAG,IAAIA,EAAE,OAAOD,IAAUC,EAAE,WAAW,eAAe,GAAG,KAAKA,EAAE;AAC9E;AAGA,SAAgBE,EAAY,GAAiC;CAU3D,OATKC,EAAQ,SASN;EACL;EACA;EACA;EACA,uBAVWA,EACV,KACE,MACC,MAAMN,EAAE,MAAM,WAAWA,EAAE,MAAM,KAAKA,EAAE,YAAY,cAAcA,EAAE,OAAO,IAAIC,CAAS,CAAC,CAAC,KAAK,IAAI,KAAK,QAC5G,CAAC,CACA,KAAK,IAKiB;CACzB,IAbS,CAAC;AAcZ"}

package/dist/openui/styles.css

@@ -1865,20 +1865,45 @@
   }
 }
 .engenty-runner {
-  --raw-primary: #e0531b;
-  --paper: #f7f5f2;
-  --paper-2: #eae7e4;
-  --paper-3: #e0ddd9;
-  --card: #ffffff;
+  --raw-primary: var(--wizard-accent, #e0531b);
+  --raw-background: var(--wizard-background, #faf8f5);
+  --paper: oklch(
+    from var(--raw-background) calc(0.97 - (0.97 - l) * clamp(0, (0.5 - l) * 1000, 1)) c h
+  );
+  --paper-2: oklch(
+    from var(--raw-background) calc(0.93 - (0.88 - l) * clamp(0, (0.5 - l) * 1000, 1)) calc(c * 1.2)
+      h
+  );
+  --paper-3: oklch(
+    from var(--raw-background) calc(0.9 - (0.81 - l) * clamp(0, (0.5 - l) * 1000, 1)) calc(c * 1.5)
+      h
+  );
+  --card: oklch(
+    from var(--raw-background) calc(1 - (0.96 - l) * clamp(0, (0.5 - l) * 1000, 1))
+      calc(c * clamp(0, (0.5 - l) * 1000, 1)) h
+  );
   --background: var(--paper);
   --foreground: var(--ink);
-  --ink: #282623;
-  --ink-2: #575552;
-  --ink-3: #81807e;
-  --ink-4: #afaeac;
+  --ink: var(
+    --wizard-text,
+    oklch(
+      from var(--raw-background) calc(0.27 + 0.67 * clamp(0, (0.5 - l) * 1000, 1))
+        calc(c * (1.2 - 0.9 * clamp(0, (0.5 - l) * 1000, 1))) h
+    )
+  );
+  --ink-2: oklch(from var(--raw-background) calc(0.45 + 0.35 * clamp(0, (0.5 - l) * 1000, 1)) c h);
+  --ink-3: oklch(
+    from var(--raw-background) calc(0.6 + 0.06 * clamp(0, (0.5 - l) * 1000, 1)) calc(c * 0.8) h
+  );
+  --ink-4: oklch(
+    from var(--raw-background) calc(0.75 - 0.25 * clamp(0, (0.5 - l) * 1000, 1)) calc(c * 0.6) h
+  );
   --ember: var(--raw-primary);
-  --ember-strong: #c43700;
-  --ember-tint: #ffeae0;
+  --ember-strong: oklch(from var(--raw-primary) calc(l - 0.08) c h);
+  --ember-tint: var(--ember);
+  @supports (color: color-mix(in lab, red, red)) {
+    --ember-tint: color-mix(in oklch, var(--ember) 14%, var(--card));
+  }
   --ember-veil: var(--ember);
   @supports (color: color-mix(in lab, red, red)) {
     --ember-veil: color-mix(in oklch, var(--ember) 10%, transparent);
@@ -1894,17 +1919,29 @@
   );
   --secondary: var(--paper-2);
   --secondary-foreground: var(--ink);
-  --accent: #efece9;
+  --accent: var(--ink);
+  @supports (color: color-mix(in lab, red, red)) {
+    --accent: color-mix(in oklch, var(--ink) 7.5%, var(--paper));
+  }
   --accent-foreground: var(--ink);
-  --muted: #f0edea;
+  --muted: var(--paper-3);
+  @supports (color: color-mix(in lab, red, red)) {
+    --muted: color-mix(in oklch, var(--paper-3) 32%, var(--card));
+  }
   --muted-foreground: var(--ink-3);
   --destructive: var(--rose);
-  --border: #dbd9d6;
+  --border: var(--ink);
+  @supports (color: color-mix(in lab, red, red)) {
+    --border: color-mix(in oklch, var(--ink) 12%, var(--paper));
+  }
   --border-soft: var(--border);
   @supports (color: color-mix(in lab, red, red)) {
     --border-soft: color-mix(in oklch, var(--border) 50%, transparent);
   }
-  --input: #e0dedb;
+  --input: var(--ink);
+  @supports (color: color-mix(in lab, red, red)) {
+    --input: color-mix(in oklch, var(--ink) 10%, var(--paper));
+  }
   --ring: var(--ember);
   @supports (color: color-mix(in lab, red, red)) {
     --ring: color-mix(in oklch, var(--ember) 45%, transparent);
@@ -1917,19 +1954,31 @@
   --card-foreground: var(--ink);
   --popover: var(--card);
   --moss: #006527;
-  --moss-tint: #eafaec;
+  --moss-tint: var(--moss);
+  @supports (color: color-mix(in lab, red, red)) {
+    --moss-tint: color-mix(in oklch, var(--moss) 10%, var(--card));
+  }
   --second: var(--moss);
   --second-tint: var(--moss-tint);
   --cobalt: #2b5fd9;
-  --cobalt-tint: #ebf0fd;
+  --cobalt-tint: var(--cobalt);
+  @supports (color: color-mix(in lab, red, red)) {
+    --cobalt-tint: color-mix(in oklch, var(--cobalt) 10%, var(--card));
+  }
   --amber: #e2a324;
-  --amber-tint: #fff1d9;
+  --amber-tint: var(--amber);
+  @supports (color: color-mix(in lab, red, red)) {
+    --amber-tint: color-mix(in oklch, var(--amber) 14%, var(--card));
+  }
   --rose: #db373a;
-  --rose-tint: #ffeeeb;
-  --f-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
-  --f-ui: "Geist", ui-sans-serif, system-ui, sans-serif;
+  --rose-tint: var(--rose);
+  @supports (color: color-mix(in lab, red, red)) {
+    --rose-tint: color-mix(in oklch, var(--rose) 10%, var(--card));
+  }
+  --f-display: var(--wizard-font-heading, "Space Grotesk", ui-sans-serif, system-ui, sans-serif);
+  --f-ui: var(--wizard-font-text, "Geist", ui-sans-serif, system-ui, sans-serif);
   --f-mono: "Geist Mono", ui-monospace, monospace;
-  --radius: 0.5rem;
+  --radius: var(--wizard-radius, 0.5rem);
   --shadow-ember-soft: 0 1px 2px rgba(40, 38, 35, 0.03), 0 3px 10px rgba(40, 38, 35, 0.05);
   --shadow-ember-elevated: 0 1px 2px rgba(40, 38, 35, 0.04), 0 6px 18px rgba(40, 38, 35, 0.06);
   --shadow-ember-overlay: 0 2px 4px rgba(40, 38, 35, 0.08), 0 10px 28px rgba(40, 38, 35, 0.16);
@@ -2203,6 +2252,64 @@
     overflow: hidden;
   }
 }
+.engenty-runner[data-cards="outline"] .wizard-card {
+  background: transparent;
+  box-shadow: none;
+  border: 1px solid var(--ink);
+  @supports (color: color-mix(in lab, red, red)) {
+    border: 1px solid color-mix(in oklch, var(--ink) 25%, transparent);
+  }
+}
+.engenty-runner[data-cards="glass"] .wizard-card {
+  background: var(--card);
+  @supports (color: color-mix(in lab, red, red)) {
+    background: color-mix(in oklch, var(--card) 55%, transparent);
+  }
+  backdrop-filter: blur(14px);
+  -webkit-backdrop-filter: blur(14px);
+}
+.engenty-runner[data-headings="uppercase"] :is(.wizard-title, .wizard-heading) {
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.engenty-runner[data-effects~="glow"] :is(h1, h2, .font-display) {
+  text-shadow: 0 0 0.55em var(--primary),
+    0 0 0.12em var(--primary);
+  @supports (color: color-mix(in lab, red, red)) {
+    text-shadow: 0 0 0.55em color-mix(in oklch, var(--primary) 70%, transparent),
+    0 0 0.12em color-mix(in oklch, var(--primary) 45%, transparent);
+  }
+}
+.engenty-runner[data-effects~="glow"] button[data-variant="primary"] {
+  box-shadow: 0 0 1.4rem var(--primary),
+    0 0 0.35rem var(--primary);
+  @supports (color: color-mix(in lab, red, red)) {
+    box-shadow: 0 0 1.4rem color-mix(in oklch, var(--primary) 60%, transparent),
+    0 0 0.35rem color-mix(in oklch, var(--primary) 80%, transparent);
+  }
+}
+.engenty-runner[data-effects~="pattern-dots"] {
+  background-image: radial-gradient(
+    var(--ink) 1px,
+    transparent 1.5px
+  );
+  @supports (color: color-mix(in lab, red, red)) {
+    background-image: radial-gradient(
+    color-mix(in oklch, var(--ink) 12%, transparent) 1px,
+    transparent 1.5px
+  );
+  }
+  background-size: 22px 22px;
+}
+.engenty-runner[data-effects~="pattern-grid"] {
+  background-image: linear-gradient(var(--ink) 1px, transparent 1px),
+    linear-gradient(90deg, var(--ink) 1px, transparent 1px);
+  @supports (color: color-mix(in lab, red, red)) {
+    background-image: linear-gradient(color-mix(in oklch, var(--ink) 7%, transparent) 1px, transparent 1px),
+    linear-gradient(90deg, color-mix(in oklch, var(--ink) 7%, transparent) 1px, transparent 1px);
+  }
+  background-size: 28px 28px;
+}
 @media (prefers-reduced-motion: reduce) {
   .engenty-runner .animate-rise,
   .engenty-runner .animate-breathe,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@engenty/wizards",
-  "version": "0.8.0",
+  "version": "0.9.1",
   "description": "What your code imports from engenty wizards: plugins at /plugin, wizards in OpenUI chats at /openui.",
   "license": "FSL-1.1-MIT",
   "homepage": "https://engenty.ai",