rift-ds 1.7.0 → 1.8.0

package/chat/useChat.js

@@ -0,0 +1,241 @@
+"use client";
+import { useState, useRef, useEffect, useCallback } from "react";
+import { revokeAttachmentUrls } from "../components/Attachment/useAttachments.js";
+import { createStreamReveal } from "../components/StreamingText/useStreamReveal.js";
+let nextId = 0;
+const makeId = () => `turn-${++nextId}`;
+const DEFAULT_PLACEHOLDER_COPY = {
+  empty: "The reply came back empty. Try sending that again.",
+  stopped: "Stopped before a reply arrived.",
+  failed: "Something went wrong while replying. Try sending that again."
+};
+function useChat(transport, placeholders = DEFAULT_PLACEHOLDER_COPY) {
+  const [turns, setTurns] = useState([]);
+  const [live, setLive] = useState(null);
+  const [modelLabel, setModelLabel] = useState(null);
+  const [modelPolicy, setModelPolicy] = useState(null);
+  const abortRef = useRef(null);
+  const busyRef = useRef(false);
+  const historyRef = useRef([]);
+  const generationRef = useRef(0);
+  useEffect(() => () => abortRef.current?.abort(), []);
+  const turnsRef = useRef(turns);
+  useEffect(() => {
+    turnsRef.current = turns;
+  }, [turns]);
+  const releaseAttachments = useCallback(() => {
+    for (const turn of turnsRef.current) {
+      if (turn.attachments) revokeAttachmentUrls(turn.attachments);
+    }
+  }, []);
+  useEffect(() => releaseAttachments, [releaseAttachments]);
+  const streaming = live !== null;
+  const commit = useCallback(
+    (finished, startedAt, historyText) => {
+      if (historyText !== null && historyText !== "") {
+        historyRef.current = [
+          ...historyRef.current,
+          { role: "assistant", content: historyText }
+        ];
+      }
+      setLive(null);
+      setTurns((prev) => [
+        ...prev,
+        {
+          id: finished.id,
+          role: "assistant",
+          text: finished.text,
+          tracePoints: finished.tracePoints,
+          exchangeId: finished.exchangeId,
+          followups: finished.followups,
+          content: finished.content,
+          card: finished.card,
+          durationSeconds: finished.durationSeconds ?? Math.max(1, Math.round((Date.now() - startedAt) / 1e3))
+        }
+      ]);
+    },
+    []
+  );
+  const send = useCallback(
+    (text, options) => {
+      const trimmed = text.trim();
+      const attachments = options?.attachments?.length ? options.attachments : void 0;
+      if (trimmed === "" && !attachments || busyRef.current) return false;
+      busyRef.current = true;
+      const controller = new AbortController();
+      abortRef.current = controller;
+      const generation = generationRef.current;
+      const startedAt = Date.now();
+      const history = [
+        ...historyRef.current,
+        {
+          role: "user",
+          content: trimmed,
+          attachments: attachments?.map(({ name, kind, size }) => ({ name, kind, size }))
+        }
+      ];
+      historyRef.current = history;
+      const userTurnId = makeId();
+      setTurns((prev) => [
+        ...prev,
+        {
+          id: userTurnId,
+          role: "user",
+          text: trimmed,
+          content: options?.content,
+          attachments
+        }
+      ]);
+      let current = {
+        id: makeId(),
+        phase: "thinking",
+        statusLabel: "Thinking",
+        tracePoints: [],
+        text: ""
+      };
+      setLive(current);
+      const update = (next) => {
+        current = next;
+        setLive(next);
+      };
+      const reveal = createStreamReveal({
+        onUpdate: (visible) => update({ ...current, text: visible }),
+        /* Someone who has asked for less motion is asking for less of this. */
+        paced: !window.matchMedia("(prefers-reduced-motion: reduce)").matches
+      });
+      const run = async () => {
+        try {
+          for await (const event of transport(history, controller.signal)) {
+            if (generation !== generationRef.current || controller.signal.aborted) break;
+            switch (event.type) {
+              case "model":
+                setModelLabel(event.label);
+                break;
+              case "models":
+                setModelPolicy({ default: event.default, locked: event.locked });
+                break;
+              case "exchange":
+                current = { ...current, exchangeId: event.id };
+                break;
+              case "followups":
+                current = { ...current, followups: event.items };
+                break;
+              case "content":
+                current = { ...current, content: event.node };
+                break;
+              case "card":
+                current = { ...current, card: event.card };
+                break;
+              case "status":
+                update({
+                  ...current,
+                  statusLabel: event.label,
+                  tracePoints: event.point ? [...current.tracePoints, event.point] : current.tracePoints
+                });
+                break;
+              case "delta":
+                current = {
+                  ...current,
+                  phase: "streaming",
+                  // Thinking ends at the first delta; freeze the duration then.
+                  durationSeconds: current.durationSeconds ?? Math.max(1, Math.round((Date.now() - startedAt) / 1e3))
+                };
+                reveal.append(event.text);
+                break;
+              /* A guardrail line and a failure are not the model speaking, so
+                 they are not paced like it: they appear whole. */
+              case "notice":
+              case "error":
+                current = {
+                  ...current,
+                  phase: "streaming",
+                  durationSeconds: current.durationSeconds ?? 1
+                };
+                reveal.showWhole(event.type === "notice" ? event.text : event.message);
+                break;
+              case "done":
+                break;
+            }
+            if (event.type === "done") break;
+          }
+          if (controller.signal.aborted || generation !== generationRef.current) {
+            reveal.flush();
+          } else {
+            await reveal.drained();
+          }
+          reveal.cancel();
+          if (generation !== generationRef.current) return;
+          if (current.text === "") {
+            commit({ ...current, text: placeholders.empty }, startedAt, null);
+          } else {
+            commit(current, startedAt, current.text);
+          }
+        } catch (err) {
+          reveal.flush();
+          if (generation !== generationRef.current) ;
+          else if (controller.signal.aborted) {
+            if (current.text === "") {
+              commit({ ...current, text: placeholders.stopped }, startedAt, null);
+            } else {
+              commit(current, startedAt, current.text);
+            }
+          } else {
+            if (current.text === "") {
+              commit({ ...current, text: placeholders.failed }, startedAt, null);
+            } else {
+              commit(current, startedAt, current.text);
+            }
+            console.error(err);
+          }
+        } finally {
+          if (generation === generationRef.current) busyRef.current = false;
+        }
+      };
+      void run();
+      return true;
+    },
+    [transport, commit, placeholders]
+  );
+  const setTurnFeedback = useCallback((turnId, feedback) => {
+    setTurns(
+      (prev) => prev.map((turn) => turn.id === turnId ? { ...turn, feedback } : turn)
+    );
+  }, []);
+  const setTurnFollowups = useCallback((turnId, followups) => {
+    setTurns(
+      (prev) => prev.map((turn) => turn.id === turnId ? { ...turn, followups } : turn)
+    );
+  }, []);
+  const injectTurn = useCallback((turn) => {
+    setTurns((prev) => [...prev, { ...turn, id: makeId() }]);
+  }, []);
+  const stop = useCallback(() => {
+    abortRef.current?.abort();
+  }, []);
+  const reset = useCallback(() => {
+    generationRef.current += 1;
+    abortRef.current?.abort();
+    busyRef.current = false;
+    historyRef.current = [];
+    releaseAttachments();
+    setTurns([]);
+    setLive(null);
+  }, [releaseAttachments]);
+  return {
+    turns,
+    live,
+    streaming,
+    modelLabel,
+    modelPolicy,
+    send,
+    stop,
+    reset,
+    injectTurn,
+    setTurnFeedback,
+    setTurnFollowups
+  };
+}
+export {
+  DEFAULT_PLACEHOLDER_COPY,
+  useChat
+};

package/cli/templates/chat/app/api/chat/feedback/route.d.ts

@@ -0,0 +1,3 @@
+export declare const runtime = "nodejs";
+export declare const dynamic = "force-dynamic";
+export declare function POST(request: Request): Promise<Response>;

package/cli/templates/chat/app/api/chat/followups/route.d.ts

@@ -0,0 +1,3 @@
+export declare const runtime = "nodejs";
+export declare const dynamic = "force-dynamic";
+export declare function POST(request: Request): Promise<Response>;

package/cli/templates/chat/app/api/chat/guardrails.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Rate limits, a daily budget with model tiers, the exchange log and the
+ * feedback store, over Upstash Redis. Shared by the three chat routes.
+ *
+ * Fails open: with KV_REST_API_URL and KV_REST_API_TOKEN unset, every
+ * request is allowed and nothing is logged, so the chat works on day one
+ * and the limits arrive when you add the two variables. Set CHAT_VISITOR_SALT
+ * too: it salts the hashed visitor address the limits key on.
+ */
+export declare const guardrails: import('../../../../../../chat/server').ChatGuardrails;

package/cli/templates/chat/app/api/chat/route.d.ts

@@ -0,0 +1,4 @@
+export declare const runtime = "nodejs";
+export declare const maxDuration = 60;
+export declare const dynamic = "force-dynamic";
+export declare function POST(request: Request): Promise<Response>;

package/cli/templates/chat/components/chat/ChatMount.d.ts

@@ -0,0 +1 @@
+export declare function ChatMount(): import("react").JSX.Element;

package/cli/templates/chat/components/chat/models.d.ts

@@ -0,0 +1,11 @@
+import { ChatModelOption } from 'rift-ds/chat';
+/**
+ * The models your chat offers. The widget's picker shows `label` and
+ * `description`; the client sends `value`; the server calls `id`. Shared by
+ * the route and the mount so the two can never disagree. Edit freely.
+ */
+export declare const CHAT_MODELS: ChatModelOption[];
+/** What serves when the visitor has not chosen. */
+export declare const DEFAULT_CHAT_MODEL: string;
+/** The model that writes the three follow-up questions under an answer. */
+export declare const FOLLOWUP_MODEL = "claude-haiku-5-5";

package/components/ShaderField/ShaderField.d.ts

@@ -17,8 +17,9 @@ type ShaderFieldOwnProps = {
      */
     params?: Partial<ShaderParams>;
     /**
-     * The light sources. Defaults to an eight-source composition on the core
-     * accent tokens. Fewer than `BLOB_COUNT` entries is fine — unused slots park
+     * The light sources. Defaults to an eight-source composition: six on the
+     * ambient tokens (`--color-ambient-*`, which follow the core accents unless a
+     * theme re-points them) and two on surface tokens. Fewer than `BLOB_COUNT` entries is fine — unused slots park
      * off-field; more are ignored, because the shader's uniform arrays are
      * fixed-size.
      */

package/components/ShaderField/useShaderField.d.ts

@@ -74,7 +74,8 @@ export interface ShaderBlob {
  */
 export declare const DEFAULT_SHADER_PARAMS: ShaderParams;
 /**
- * The default composition: eight sources on core accent tokens, filling
+ * The default composition: eight sources, six on the ambient tokens and two
+ * on surface tokens, filling
  * BLOB_COUNT exactly.
  *
  * `--color-action-primary-bg` is deliberately absent. The action colour is

package/components/ShaderField/useShaderField.js

@@ -12,13 +12,13 @@ const DEFAULT_SHADER_PARAMS = {
   crop: 0.5
 };
 const DEFAULT_SHADER_BLOBS = [
-  { token: "--color-core-accent-gold", size: 0.45, cx: 0.175, cy: 0.125, period: 18, phase: 0, weight: 1 },
-  { token: "--color-core-accent-mint", size: 0.55, cx: 0.125, cy: 0.125, period: 16, phase: 1, weight: 1 },
-  { token: "--color-core-accent-violet", size: 0.9, cx: 0.35, cy: 0.25, period: 22, phase: 0.5, weight: 1 },
+  { token: "--color-ambient-1", size: 0.45, cx: 0.175, cy: 0.125, period: 18, phase: 0, weight: 1 },
+  { token: "--color-ambient-2", size: 0.55, cx: 0.125, cy: 0.125, period: 16, phase: 1, weight: 1 },
+  { token: "--color-ambient-3", size: 0.9, cx: 0.35, cy: 0.25, period: 22, phase: 0.5, weight: 1 },
   { token: "--color-bg-container-secondary", size: 0.55, cx: 0.025, cy: 0.075, period: 14, phase: 1.5, weight: 1 },
-  { token: "--color-core-accent-cobalt", size: 0.55, cx: -0.125, cy: 0.475, period: 17, phase: 0.8, weight: 1 },
-  { token: "--color-core-accent-coral", size: 0.48, cx: 0.39, cy: -0.26, period: 19, phase: 0.3, weight: 1 },
-  { token: "--color-core-accent-amber", size: 0.3, cx: 0.35, cy: 0.3, period: 15, phase: 1.2, weight: 1 },
+  { token: "--color-ambient-4", size: 0.55, cx: -0.125, cy: 0.475, period: 17, phase: 0.8, weight: 1 },
+  { token: "--color-ambient-5", size: 0.48, cx: 0.39, cy: -0.26, period: 19, phase: 0.3, weight: 1 },
+  { token: "--color-ambient-6", size: 0.3, cx: 0.35, cy: 0.3, period: 15, phase: 1.2, weight: 1 },
   { token: "--color-core-ui-secondary", size: 0.75, cx: -0.125, cy: -0.025, period: 20, phase: 0.7, weight: 1 }
 ];
 const RENDER_SCALE = 0.5;

package/fonts/material-symbols.css

@@ -26,7 +26,8 @@
    specificity with every single-class component rule and — being imported
    later — won, rendering 24px glyphs inside 20px boxes.
 
-   Use one of the semantic steps: --icon-size-500 | -md | -lg | -xl.
+   Use one of the semantic steps on the --icon-size-* scale
+   (tokens-light.css defines them).
 */
 .material-symbols-rounded {
   font-family: 'Material Symbols Rounded';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rift-ds",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "description": "An AI-ready React design system: accessible components on composable tokens, light/dark theming, and CSS-variable overrides.",
   "author": {
     "name": "Robert Ritacca",
@@ -73,6 +73,23 @@
       "types": "./behaviors/useScrollLock.d.ts",
       "import": "./behaviors/useScrollLock.js"
     },
+    "./chat": {
+      "types": "./chat/index.d.ts",
+      "import": "./chat/index.js"
+    },
+    "./chat/server": {
+      "types": "./chat/server.d.ts",
+      "import": "./chat/server.js"
+    },
+    "./chat/upstash": {
+      "types": "./chat/upstash.d.ts",
+      "import": "./chat/upstash.js"
+    },
+    "./chat/demo": {
+      "types": "./chat/demo.d.ts",
+      "import": "./chat/demo.js"
+    },
+    "./chat/chat.css": "./chat/ChatWidget.css",
     "./tokens/registry": {
       "types": "./tokens/registry.d.ts",
       "import": "./tokens/registry.js"
@@ -91,13 +108,33 @@
     "./package.json": "./package.json"
   },
   "peerDependencies": {
+    "@anthropic-ai/sdk": "^0.116.0",
+    "@upstash/ratelimit": "^2.0.8",
+    "@upstash/redis": "^1.38.2",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "recharts": "^3.0.0"
+    "react-markdown": "^10.1.0",
+    "recharts": "^3.0.0",
+    "remark-gfm": "^4.0.1"
   },
   "peerDependenciesMeta": {
+    "@anthropic-ai/sdk": {
+      "optional": true
+    },
+    "@upstash/ratelimit": {
+      "optional": true
+    },
+    "@upstash/redis": {
+      "optional": true
+    },
+    "react-markdown": {
+      "optional": true
+    },
     "recharts": {
       "optional": true
+    },
+    "remark-gfm": {
+      "optional": true
     }
   }
 }

package/tokens/presets/coral.css

@@ -124,7 +124,15 @@ html[data-brand="coral"] {
   --color-action-primary-text: var(--primitive-neutral-00);
   --color-action-primary-text-secondary: var(--primitive-red-10);
   --color-action-primary-text-tertiary: var(--primitive-red-08);
-  --color-ai-gradient-end: var(--primitive-red-07);
+  --color-ai-gradient-end: var(--primitive-red-09);
+  --color-ai-gradient-mid: var(--primitive-red-07);
+  --color-ai-gradient-start: var(--primitive-red-03);
+  --color-ambient-1: #FFC24B;
+  --color-ambient-2: #2EBFA5;
+  --color-ambient-3: #C86B98;
+  --color-ambient-4: #5E7BD0;
+  --color-ambient-5: #E6708C;
+  --color-ambient-6: #F0A7B8;
   --color-core-accent-amber: #FF8E3C;
   --color-core-accent-cobalt: #5E7BD0;
   --color-core-accent-coral: #FF5A5F;
@@ -244,7 +252,15 @@ html[data-brand="coral"][data-theme="dark"] {
   --color-action-primary-text-active: var(--primitive-red-01);
   --color-action-primary-text-secondary: var(--primitive-red-10);
   --color-action-primary-text-tertiary: var(--primitive-red-07);
-  --color-ai-gradient-end: var(--primitive-red-08);
+  --color-ai-gradient-end: var(--primitive-red-09);
+  --color-ai-gradient-mid: var(--primitive-red-07);
+  --color-ai-gradient-start: var(--primitive-red-03);
+  --color-ambient-1: #FFC24B;
+  --color-ambient-2: #2EBFA5;
+  --color-ambient-3: #C86B98;
+  --color-ambient-4: #5E7BD0;
+  --color-ambient-5: #E6708C;
+  --color-ambient-6: #F0A7B8;
   --color-core-accent-amber: #FF8E3C;
   --color-core-accent-cobalt: #5E7BD0;
   --color-core-accent-coral: #FF5A5F;

package/tokens/presets/forest.css

@@ -52,7 +52,15 @@ html[data-brand="forest"] {
   --color-action-primary-text: var(--primitive-green-02);
   --color-action-primary-text-secondary: var(--primitive-green-10);
   --color-action-primary-text-tertiary: var(--primitive-green-08);
-  --color-ai-gradient-end: var(--primitive-green-07);
+  --color-ai-gradient-end: var(--primitive-green-09);
+  --color-ai-gradient-mid: var(--primitive-green-07);
+  --color-ai-gradient-start: var(--primitive-green-03);
+  --color-ambient-1: #C2A147;
+  --color-ambient-2: #4E9A6C;
+  --color-ambient-3: #7E6899;
+  --color-ambient-4: #446E93;
+  --color-ambient-5: #709282;
+  --color-ambient-6: #A7BCB2;
   --color-core-accent-amber: #C97F3F;
   --color-core-accent-cobalt: #446E93;
   --color-core-accent-coral: #B45E4A;
@@ -197,7 +205,15 @@ html[data-brand="forest"][data-theme="dark"] {
   --color-action-primary-text-active: var(--primitive-green-02);
   --color-action-primary-text-secondary: var(--primitive-green-10);
   --color-action-primary-text-tertiary: var(--primitive-green-07);
-  --color-ai-gradient-end: var(--primitive-green-08);
+  --color-ai-gradient-end: var(--primitive-green-09);
+  --color-ai-gradient-mid: var(--primitive-green-07);
+  --color-ai-gradient-start: var(--primitive-green-03);
+  --color-ambient-1: #C2A147;
+  --color-ambient-2: #4E9A6C;
+  --color-ambient-3: #7E6899;
+  --color-ambient-4: #446E93;
+  --color-ambient-5: #709282;
+  --color-ambient-6: #A7BCB2;
   --color-core-accent-amber: #C97F3F;
   --color-core-accent-cobalt: #446E93;
   --color-core-accent-coral: #B45E4A;

package/tokens/presets/gold.css

@@ -53,7 +53,15 @@ html[data-brand="gold"] {
   --color-action-primary-text-active: var(--primitive-yellow-07);
   --color-action-primary-text-secondary: var(--primitive-yellow-10);
   --color-action-primary-text-tertiary: var(--primitive-yellow-08);
-  --color-ai-gradient-end: var(--primitive-yellow-07);
+  --color-ai-gradient-end: var(--primitive-yellow-09);
+  --color-ai-gradient-mid: var(--primitive-yellow-07);
+  --color-ai-gradient-start: var(--primitive-yellow-03);
+  --color-ambient-1: #FFD166;
+  --color-ambient-2: #7FC9A0;
+  --color-ambient-3: #B78AD9;
+  --color-ambient-4: #6E7FD9;
+  --color-ambient-5: #FFE19C;
+  --color-ambient-6: #FFEDC2;
   --color-core-accent-amber: #FFAE4F;
   --color-core-accent-cobalt: #6E7FD9;
   --color-core-accent-coral: #F58B5B;
@@ -237,7 +245,15 @@ html[data-brand="gold"][data-theme="dark"] {
   --color-action-primary-text-active: var(--primitive-yellow-11);
   --color-action-primary-text-secondary: var(--primitive-yellow-10);
   --color-action-primary-text-tertiary: var(--primitive-yellow-07);
-  --color-ai-gradient-end: var(--primitive-yellow-08);
+  --color-ai-gradient-end: var(--primitive-yellow-09);
+  --color-ai-gradient-mid: var(--primitive-yellow-07);
+  --color-ai-gradient-start: var(--primitive-yellow-03);
+  --color-ambient-1: #FFD166;
+  --color-ambient-2: #7FC9A0;
+  --color-ambient-3: #B78AD9;
+  --color-ambient-4: #6E7FD9;
+  --color-ambient-5: #FFE19C;
+  --color-ambient-6: #FFEDC2;
   --color-core-accent-amber: #FFAE4F;
   --color-core-accent-cobalt: #6E7FD9;
   --color-core-accent-coral: #F58B5B;

package/tokens/presets/mono.css

@@ -52,7 +52,15 @@ html[data-brand="mono"] {
   --color-action-primary-text: var(--primitive-neutral-02);
   --color-action-primary-text-secondary: var(--primitive-neutral-09);
   --color-action-primary-text-tertiary: var(--primitive-neutral-08);
-  --color-ai-gradient-end: var(--primitive-neutral-08);
+  --color-ai-gradient-end: var(--primitive-neutral-10);
+  --color-ai-gradient-mid: var(--primitive-neutral-08);
+  --color-ai-gradient-start: var(--primitive-neutral-04);
+  --color-ambient-1: #C9C9C9;
+  --color-ambient-2: #ADADAD;
+  --color-ambient-3: #8F8F8F;
+  --color-ambient-4: #5C5C5C;
+  --color-ambient-5: #707070;
+  --color-ambient-6: #A7A7A7;
   --color-core-accent-amber: #B8B8B8;
   --color-core-accent-cobalt: #5C5C5C;
   --color-core-accent-coral: #A3A3A3;
@@ -173,7 +181,15 @@ html[data-brand="mono"][data-theme="dark"] {
   --color-action-primary-text-active: var(--primitive-neutral-07);
   --color-action-primary-text-secondary: var(--primitive-neutral-06);
   --color-action-primary-text-tertiary: var(--primitive-neutral-01);
-  --color-ai-gradient-end: var(--primitive-neutral-03);
+  --color-ai-gradient-end: var(--primitive-neutral-06);
+  --color-ai-gradient-mid: var(--primitive-neutral-01);
+  --color-ai-gradient-start: var(--primitive-neutral-00);
+  --color-ambient-1: #C9C9C9;
+  --color-ambient-2: #ADADAD;
+  --color-ambient-3: #8F8F8F;
+  --color-ambient-4: #5C5C5C;
+  --color-ambient-5: #F6F6F6;
+  --color-ambient-6: #F9F9F9;
   --color-core-accent-amber: #B8B8B8;
   --color-core-accent-cobalt: #5C5C5C;
   --color-core-accent-coral: #A3A3A3;

package/tokens/presets/pink.css

@@ -53,7 +53,15 @@ html[data-brand="pink"] {
   --color-action-primary-text-active: var(--primitive-neutral-00);
   --color-action-primary-text-secondary: var(--primitive-red-10);
   --color-action-primary-text-tertiary: var(--primitive-red-08);
-  --color-ai-gradient-end: var(--primitive-red-07);
+  --color-ai-gradient-end: var(--primitive-red-09);
+  --color-ai-gradient-mid: var(--primitive-red-07);
+  --color-ai-gradient-start: var(--primitive-red-03);
+  --color-ambient-1: #FFD34D;
+  --color-ambient-2: #3DDCB8;
+  --color-ambient-3: #C45CFF;
+  --color-ambient-4: #5C7CFF;
+  --color-ambient-5: #E064AB;
+  --color-ambient-6: #ECA0CB;
   --color-core-accent-amber: #FF9A4D;
   --color-core-accent-cobalt: #5C7CFF;
   --color-core-accent-coral: #FF5A8A;
@@ -246,7 +254,15 @@ html[data-brand="pink"][data-theme="dark"] {
   --color-action-primary-text-active: var(--primitive-neutral-00);
   --color-action-primary-text-secondary: var(--primitive-red-10);
   --color-action-primary-text-tertiary: var(--primitive-red-07);
-  --color-ai-gradient-end: var(--primitive-red-08);
+  --color-ai-gradient-end: var(--primitive-red-09);
+  --color-ai-gradient-mid: var(--primitive-red-07);
+  --color-ai-gradient-start: var(--primitive-red-03);
+  --color-ambient-1: #FFD34D;
+  --color-ambient-2: #3DDCB8;
+  --color-ambient-3: #C45CFF;
+  --color-ambient-4: #5C7CFF;
+  --color-ambient-5: #E064AB;
+  --color-ambient-6: #ECA0CB;
   --color-core-accent-amber: #FF9A4D;
   --color-core-accent-cobalt: #5C7CFF;
   --color-core-accent-coral: #FF5A8A;

package/tokens/presets/terminal.css

@@ -107,7 +107,15 @@ html[data-brand="terminal"] {
   --color-action-primary-text-active: var(--primitive-green-11);
   --color-action-primary-text-secondary: var(--primitive-green-10);
   --color-action-primary-text-tertiary: var(--primitive-green-08);
-  --color-ai-gradient-end: var(--primitive-green-07);
+  --color-ai-gradient-end: var(--primitive-green-09);
+  --color-ai-gradient-mid: var(--primitive-green-07);
+  --color-ai-gradient-start: var(--primitive-green-03);
+  --color-ambient-1: #7CE8C2;
+  --color-ambient-2: #06D6A0;
+  --color-ambient-3: #3DBFA8;
+  --color-ambient-4: #2FA98F;
+  --color-ambient-5: #5DE4C1;
+  --color-ambient-6: #9BEFD9;
   --color-core-accent-amber: #57E0B0;
   --color-core-accent-cobalt: #2FA98F;
   --color-core-accent-coral: #35D6A0;
@@ -248,7 +256,15 @@ html[data-brand="terminal"][data-theme="dark"] {
   --color-action-primary-text-active: var(--primitive-green-11);
   --color-action-primary-text-secondary: var(--primitive-green-10);
   --color-action-primary-text-tertiary: var(--primitive-green-07);
-  --color-ai-gradient-end: var(--primitive-green-08);
+  --color-ai-gradient-end: var(--primitive-green-09);
+  --color-ai-gradient-mid: var(--primitive-green-07);
+  --color-ai-gradient-start: var(--primitive-green-03);
+  --color-ambient-1: #7CE8C2;
+  --color-ambient-2: #06D6A0;
+  --color-ambient-3: #3DBFA8;
+  --color-ambient-4: #2FA98F;
+  --color-ambient-5: #5DE4C1;
+  --color-ambient-6: #9BEFD9;
   --color-core-accent-amber: #57E0B0;
   --color-core-accent-cobalt: #2FA98F;
   --color-core-accent-coral: #35D6A0;

package/tokens/presets/violet.css

@@ -52,7 +52,15 @@ html[data-brand="violet"] {
   --color-action-primary-text: var(--primitive-purple-02);
   --color-action-primary-text-secondary: var(--primitive-purple-11);
   --color-action-primary-text-tertiary: var(--primitive-purple-09);
-  --color-ai-gradient-end: var(--primitive-purple-08);
+  --color-ai-gradient-end: var(--primitive-purple-10);
+  --color-ai-gradient-mid: var(--primitive-purple-08);
+  --color-ai-gradient-start: var(--primitive-purple-04);
+  --color-ambient-1: #D9BE7A;
+  --color-ambient-2: #6BAE9E;
+  --color-ambient-3: #9E47EF;
+  --color-ambient-4: #6A5BE0;
+  --color-ambient-5: #A57BCE;
+  --color-ambient-6: #C7AEE1;
   --color-core-accent-amber: #D9915E;
   --color-core-accent-cobalt: #6A5BE0;
   --color-core-accent-coral: #D96BA8;
@@ -231,7 +239,15 @@ html[data-brand="violet"][data-theme="dark"] {
   --color-action-primary-text-active: var(--primitive-purple-02);
   --color-action-primary-text-secondary: var(--primitive-purple-11);
   --color-action-primary-text-tertiary: var(--primitive-purple-08);
-  --color-ai-gradient-end: var(--primitive-purple-09);
+  --color-ai-gradient-end: var(--primitive-purple-10);
+  --color-ai-gradient-mid: var(--primitive-purple-08);
+  --color-ai-gradient-start: var(--primitive-purple-04);
+  --color-ambient-1: #D9BE7A;
+  --color-ambient-2: #6BAE9E;
+  --color-ambient-3: #9E47EF;
+  --color-ambient-4: #6A5BE0;
+  --color-ambient-5: #A57BCE;
+  --color-ambient-6: #C7AEE1;
   --color-core-accent-amber: #D9915E;
   --color-core-accent-cobalt: #6A5BE0;
   --color-core-accent-coral: #D96BA8;