rift-ds 1.2.0 → 1.4.0

package/components/Attachment/useAttachments.js

@@ -0,0 +1,201 @@
+"use client";
+import { useState, useRef, useEffect, useCallback } from "react";
+import { matchesAccept, getFileKind } from "./fileTypes.js";
+function revokeAttachmentUrls(items) {
+  for (const item of items) {
+    if (item.previewSrc?.startsWith("blob:")) URL.revokeObjectURL(item.previewSrc);
+  }
+}
+const DEFAULT_EXCERPT_LENGTH = 240;
+let nextId = 0;
+const createId = () => `attachment-${Date.now().toString(36)}-${(nextId++).toString(36)}`;
+const fileIdentity = (file) => `${file.name}:${file.size}:${file.lastModified}`;
+function useAttachments(options = {}) {
+  const [items, setItems] = useState([]);
+  const itemsRef = useRef([]);
+  const sourcesRef = useRef(/* @__PURE__ */ new Map());
+  const abortsRef = useRef(/* @__PURE__ */ new Map());
+  const optionsRef = useRef(options);
+  useEffect(() => {
+    optionsRef.current = options;
+  });
+  const commit = useCallback((next) => {
+    itemsRef.current = next;
+    setItems(next);
+  }, []);
+  const patch = useCallback(
+    (id, change) => {
+      if (!itemsRef.current.some((item) => item.id === id)) return;
+      commit(itemsRef.current.map((item) => item.id === id ? { ...item, ...change } : item));
+    },
+    [commit]
+  );
+  const startUpload = useCallback(
+    (id, file) => {
+      const upload = optionsRef.current.upload;
+      if (!upload) return;
+      const controller = new AbortController();
+      abortsRef.current.set(id, controller);
+      upload(file, {
+        signal: controller.signal,
+        onProgress: (percent) => {
+          if (!controller.signal.aborted)
+            patch(id, { progress: Math.max(0, Math.min(100, percent)) });
+        }
+      }).then(
+        () => {
+          if (controller.signal.aborted) return;
+          abortsRef.current.delete(id);
+          patch(id, { status: "ready", progress: void 0, error: void 0 });
+        },
+        (reason) => {
+          if (controller.signal.aborted) return;
+          abortsRef.current.delete(id);
+          patch(id, {
+            status: "error",
+            progress: void 0,
+            error: reason instanceof Error && reason.message !== "" ? reason.message : void 0
+          });
+        }
+      );
+    },
+    [patch]
+  );
+  const add = useCallback(
+    (files) => {
+      const { accept, maxSize, maxCount, allowDuplicates, upload, onReject } = optionsRef.current;
+      const rejections = [];
+      const accepted = [];
+      const known = /* @__PURE__ */ new Set();
+      for (const source of sourcesRef.current.values()) {
+        if (typeof source !== "string") known.add(fileIdentity(source));
+      }
+      for (const file of files) {
+        if (accept && !matchesAccept(file, accept)) {
+          rejections.push({ file, reason: "type" });
+        } else if (maxSize !== void 0 && file.size > maxSize) {
+          rejections.push({ file, reason: "size" });
+        } else if (!allowDuplicates && known.has(fileIdentity(file))) {
+          rejections.push({ file, reason: "duplicate" });
+        } else if (maxCount !== void 0 && itemsRef.current.length + accepted.length >= maxCount) {
+          rejections.push({ file, reason: "count" });
+        } else {
+          known.add(fileIdentity(file));
+          const kind = getFileKind(file);
+          accepted.push({
+            file,
+            item: {
+              id: createId(),
+              name: file.name,
+              kind,
+              size: file.size,
+              mimeType: file.type || void 0,
+              status: upload ? "uploading" : "ready",
+              previewSrc: kind === "image" ? URL.createObjectURL(file) : void 0
+            }
+          });
+        }
+      }
+      if (accepted.length > 0) {
+        for (const { item, file } of accepted) sourcesRef.current.set(item.id, file);
+        commit([...itemsRef.current, ...accepted.map(({ item }) => item)]);
+        for (const { item, file } of accepted) startUpload(item.id, file);
+      }
+      if (rejections.length > 0) onReject?.(rejections);
+      return rejections;
+    },
+    [commit, startUpload]
+  );
+  const addText = useCallback(
+    (text, name = "Pasted text") => {
+      const { maxCount, excerptLength = DEFAULT_EXCERPT_LENGTH } = optionsRef.current;
+      if (maxCount !== void 0 && itemsRef.current.length >= maxCount) return;
+      const id = createId();
+      sourcesRef.current.set(id, text);
+      commit([
+        ...itemsRef.current,
+        {
+          id,
+          name,
+          kind: "pasted",
+          // Bytes, not characters: the size line should match what a file of
+          // this text would weigh.
+          size: new Blob([text]).size,
+          mimeType: "text/plain",
+          status: "ready",
+          excerpt: text.trim().slice(0, excerptLength)
+        }
+      ]);
+    },
+    [commit]
+  );
+  const release = useCallback((dropped) => {
+    for (const item of dropped) {
+      abortsRef.current.get(item.id)?.abort();
+      abortsRef.current.delete(item.id);
+      sourcesRef.current.delete(item.id);
+    }
+    revokeAttachmentUrls(dropped);
+  }, []);
+  const remove = useCallback(
+    (id) => {
+      const dropped = itemsRef.current.filter((item) => item.id === id);
+      if (dropped.length === 0) return;
+      release(dropped);
+      commit(itemsRef.current.filter((item) => item.id !== id));
+    },
+    [commit, release]
+  );
+  const retry = useCallback(
+    (id) => {
+      const source = sourcesRef.current.get(id);
+      if (source === void 0 || typeof source === "string") return;
+      if (!optionsRef.current.upload) return;
+      patch(id, { status: "uploading", progress: void 0, error: void 0 });
+      startUpload(id, source);
+    },
+    [patch, startUpload]
+  );
+  const clear = useCallback(() => {
+    release(itemsRef.current);
+    commit([]);
+  }, [commit, release]);
+  const take = useCallback(() => {
+    const taken = itemsRef.current;
+    const files = [];
+    for (const item of taken) {
+      const source = sourcesRef.current.get(item.id);
+      if (source !== void 0 && typeof source !== "string") files.push(source);
+      abortsRef.current.get(item.id)?.abort();
+    }
+    abortsRef.current.clear();
+    sourcesRef.current.clear();
+    commit([]);
+    return { items: taken, files };
+  }, [commit]);
+  const getSource = useCallback((id) => sourcesRef.current.get(id), []);
+  useEffect(() => {
+    const aborts = abortsRef.current;
+    return () => {
+      for (const controller of aborts.values()) controller.abort();
+      aborts.clear();
+      revokeAttachmentUrls(itemsRef.current);
+      itemsRef.current = [];
+    };
+  }, []);
+  return {
+    items,
+    add,
+    addText,
+    remove,
+    retry,
+    clear,
+    take,
+    getSource,
+    isUploading: items.some((item) => item.status === "uploading")
+  };
+}
+export {
+  revokeAttachmentUrls,
+  useAttachments
+};

package/components/Chart/BarChart.js

@@ -39,7 +39,7 @@ const BarChart = ({
   const subtitleId = useId();
   const baseClass = "ds-chart";
   const classes = [baseClass, bare ? `${baseClass}--bare` : "", className].filter(Boolean).join(" ");
-  const resolvedBarColor = barColor || getCSSVar("--color-action-primary-bg", "#0E6E8F");
+  const resolvedBarColor = barColor || getCSSVar("--color-chart-series-1", "#0E6E8F");
   const textSecondary = getCSSVar("--color-text-secondary", "#303030");
   const gridColor = getCSSVar("--color-divider", "rgba(214, 214, 214, 0.8)");
   const cursorColor = getCSSVar("--color-bg-container-secondary", "#F1F1F1");

package/components/Chart/ComboChart.js

@@ -45,7 +45,7 @@ const ComboChart = ({
   const baseClass = "ds-chart";
   const classes = [baseClass, bare ? `${baseClass}--bare` : "", className].filter(Boolean).join(" ");
   const seriesColors = getChartSeriesColors();
-  const resolvedBarColor = barColor || getCSSVar("--color-action-primary-bg", "#0E6E8F");
+  const resolvedBarColor = barColor || getCSSVar("--color-chart-series-1", "#0E6E8F");
   const resolvedLineColor = lineColor || seriesColors[1];
   const textSecondary = getCSSVar("--color-text-secondary", "#303030");
   const gridColor = getCSSVar("--color-divider", "rgba(214, 214, 214, 0.8)");

package/components/Chart/Treemap.js

@@ -1,22 +1,88 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useId, useCallback } from "react";
+import { useId, useCallback, useState, useEffect, useRef } from "react";
 import { ResponsiveContainer, Treemap as Treemap$1, Tooltip } from "recharts";
 import { getChartSeriesColors } from "./palette.js";
 import "./Chart.css";
 function getCSSVar(name, fallback) {
   return `var(${name}, ${fallback})`;
 }
+let colorProbe;
+function toRgb(value) {
+  const input = value.trim();
+  if (!input || input === "none") return null;
+  if (colorProbe === void 0) {
+    colorProbe = document.createElement("canvas").getContext("2d");
+  }
+  if (!colorProbe) return null;
+  colorProbe.fillStyle = "#000000";
+  colorProbe.fillStyle = input;
+  const out = String(colorProbe.fillStyle);
+  if (out.startsWith("#")) {
+    return [1, 3, 5].map((i) => parseInt(out.slice(i, i + 2), 16));
+  }
+  const m = out.match(/rgba?\(([^)]+)\)/);
+  if (!m) return null;
+  const [r, g, b] = m[1].split(/[\s,/]+/).map(Number);
+  return [r, g, b];
+}
+const luminance = ([r, g, b]) => {
+  const lin = (c) => {
+    const s = c / 255;
+    return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+  };
+  return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
+};
+const contrast = (a, b) => {
+  const [hi, lo] = [luminance(a), luminance(b)].sort((p, q) => q - p);
+  return (hi + 0.05) / (lo + 0.05);
+};
+const AA_TEXT = 4.5;
+function pickLabelStyle(rect) {
+  const style = getComputedStyle(rect);
+  const fill = toRgb(style.fill);
+  const primary = toRgb(style.getPropertyValue("--color-text-primary"));
+  const onInverse = toRgb(style.getPropertyValue("--color-text-on-inverse"));
+  if (!fill || !primary || !onInverse) return { tone: "primary", halo: false };
+  const primaryRatio = contrast(primary, fill);
+  const onInverseRatio = contrast(onInverse, fill);
+  const tone = primaryRatio >= onInverseRatio ? "primary" : "on-inverse";
+  return { tone, halo: Math.max(primaryRatio, onInverseRatio) < AA_TEXT };
+}
+function useThemeVersion() {
+  const [version, setVersion] = useState(0);
+  useEffect(() => {
+    const observer = new MutationObserver(() => setVersion((v) => v + 1));
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["data-theme", "data-brand", "style", "class"]
+    });
+    return () => observer.disconnect();
+  }, []);
+  return version;
+}
 function TreemapContent(props) {
-  const { x, y, width, height, name, index, color } = props;
-  if (width < 4 || height < 4) return null;
+  const { x, y, width, height, name, index, color, themeVersion } = props;
+  const rectRef = useRef(null);
+  const [label, setLabel] = useState({ tone: "primary", halo: false });
   const seriesColors = getChartSeriesColors();
   const fill = color || seriesColors[index % seriesColors.length];
-  const textColor = getCSSVar("--color-text-primary", "#050505");
+  const visible = width >= 4 && height >= 4;
   const showLabel = width > 50 && height > 28;
+  useEffect(() => {
+    if (!showLabel || !rectRef.current) return;
+    setLabel(pickLabelStyle(rectRef.current));
+  }, [fill, showLabel, themeVersion]);
+  if (!visible) return null;
+  const primaryText = getCSSVar("--color-text-primary", "#050505");
+  const onInverseText = getCSSVar("--color-text-on-inverse", "#F1F1F1");
+  const textColor = label.tone === "primary" ? primaryText : onInverseText;
+  const haloColor = label.tone === "primary" ? onInverseText : primaryText;
   return /* @__PURE__ */ jsxs("g", { children: [
     /* @__PURE__ */ jsx(
       "rect",
       {
+        ref: rectRef,
         x,
         y,
         width,
@@ -33,7 +99,17 @@ function TreemapContent(props) {
         y: y + height / 2,
         textAnchor: "middle",
         dominantBaseline: "central",
-        style: { fill: textColor, fontSize: 12, fontWeight: 600 },
+        style: {
+          fill: textColor,
+          fontSize: 12,
+          fontWeight: 600,
+          ...label.halo && {
+            stroke: haloColor,
+            strokeWidth: 3,
+            strokeLinejoin: "round",
+            paintOrder: "stroke"
+          }
+        },
         children: name
       }
     )
@@ -62,6 +138,7 @@ const Treemap = ({
 }) => {
   const titleId = useId();
   const subtitleId = useId();
+  const themeVersion = useThemeVersion();
   const baseClass = "ds-chart";
   const classes = [baseClass, bare ? `${baseClass}--bare` : "", className].filter(Boolean).join(" ");
   const renderTooltip = useCallback(
@@ -93,7 +170,7 @@ const Treemap = ({
             data,
             dataKey,
             aspectRatio: 4 / 3,
-            content: /* @__PURE__ */ jsx(TreemapContent, {}),
+            content: /* @__PURE__ */ jsx(TreemapContent, { themeVersion }),
             children: /* @__PURE__ */ jsx(Tooltip, { content: renderTooltip })
           }
         ) }) })

package/components/ChatMessage/ChatMessage.css

@@ -87,6 +87,30 @@
   color: var(--color-text-tertiary);
 }
 
+/* ============================================
+   ATTACHMENTS
+   Files sent with the turn: outside the bubble, above the text, on the
+   speaker's side (the body's own alignment places them).
+   ============================================ */
+
+.ds-chat-message__attachments {
+  display: flex;
+  /* The full row, not shrink-to-fit: the group inside sizes itself against
+     this width, and a row that took its width from the group would give it
+     nothing to measure */
+  width: 100%;
+  min-width: 0;
+}
+
+.ds-chat-message--user .ds-chat-message__attachments {
+  justify-content: flex-end;
+}
+
+/* A compact thread seats smaller tiles */
+.ds-chat-message--compact .ds-chat-message__attachments {
+  --ds-attachment-tile-size: 96px;
+}
+
 /* ============================================
    CONTENT
    ============================================ */

package/components/ChatMessage/ChatMessage.d.ts

@@ -49,6 +49,12 @@ type ChatMessageOwnProps = {
      * feedback row — rather than a secondary affordance.
      */
     showActions?: boolean;
+    /**
+     * Files sent with this turn, drawn outside the bubble on the speaker's
+     * side, above the text. Pass an AttachmentGroup. A turn that carries
+     * files and no text draws no bubble at all.
+     */
+    attachments?: React.ReactNode;
     /** Footer slot under the content — a sources row, an edited note. */
     footer?: React.ReactNode;
     /** Additional CSS classes */

package/components/ChatMessage/ChatMessage.js

@@ -16,6 +16,7 @@ const ChatMessage = React.forwardRef(
     pendingLabel = "Waiting for a reply",
     actions,
     showActions = false,
+    attachments,
     footer,
     className = "",
     children,
@@ -24,6 +25,10 @@ const ChatMessage = React.forwardRef(
     const baseClass = "ds-chat-message";
     const hasBubble = bubble ?? role === "user";
     const hideAvatar = grouped || !showAvatar;
+    const hasChildren = React.Children.toArray(children).some(
+      (child) => typeof child !== "string" || child.trim() !== ""
+    );
+    const showContent = pending || hasChildren || !attachments;
     const classes = [
       baseClass,
       `${baseClass}--${role}`,
@@ -39,10 +44,7 @@ const ChatMessage = React.forwardRef(
       avatar !== void 0 && /* @__PURE__ */ jsx(
         "span",
         {
-          className: [
-            `${baseClass}__gutter`,
-            hideAvatar ? `${baseClass}__gutter--hidden` : ""
-          ].filter(Boolean).join(" "),
+          className: [`${baseClass}__gutter`, hideAvatar ? `${baseClass}__gutter--hidden` : ""].filter(Boolean).join(" "),
           children: avatar
         }
       ),
@@ -51,7 +53,8 @@ const ChatMessage = React.forwardRef(
           author && /* @__PURE__ */ jsx("span", { className: `${baseClass}__author`, children: author }),
           timestamp && /* @__PURE__ */ jsx("span", { className: `${baseClass}__timestamp`, children: timestamp })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: `${baseClass}__content`, children: pending ? /* @__PURE__ */ jsxs("span", { className: `${baseClass}__pending`, role: "status", children: [
+        attachments && /* @__PURE__ */ jsx("div", { className: `${baseClass}__attachments`, children: attachments }),
+        showContent && /* @__PURE__ */ jsx("div", { className: `${baseClass}__content`, children: pending ? /* @__PURE__ */ jsxs("span", { className: `${baseClass}__pending`, role: "status", children: [
           /* @__PURE__ */ jsx("span", { className: `${baseClass}__sr-only`, children: pendingLabel }),
           /* @__PURE__ */ jsxs("span", { className: `${baseClass}__dots`, "aria-hidden": "true", children: [
             /* @__PURE__ */ jsx("span", { className: `${baseClass}__dot` }),

package/components/ColorPicker/ColorPicker.js

@@ -243,7 +243,7 @@ const ColorPicker = React.forwardRef(
                     "aria-hidden": "true"
                   }
                 ),
-                showText && /* @__PURE__ */ jsx("span", { className: `${baseClass}__trigger-text`, children: displayHex })
+                showText && /* @__PURE__ */ jsx("span", { id: `${inputId}-value`, className: `${baseClass}__trigger-text`, children: displayHex })
               ]
             }
           ),

package/components/Composer/Composer.css

@@ -1,6 +1,6 @@
 /* ============================================
    COMPOSER COMPONENT
-   The chat input shell: attachments, auto-growing textarea, send/stop
+   The chat input shell: file tray, auto-growing textarea, send/stop
    ============================================ */
 
 /* The focus treatment animates a registered custom property, exactly as
@@ -224,9 +224,10 @@
 
 /* ============================================
    CONTEXT CHIP
-   A full-width, non-interactive note at the very top of the shell — what
-   the model is currently looking at. Composer owns the chrome; the caller
-   passes the text.
+   A full-width, non-interactive note — what the model is currently looking
+   at. At the very top of the shell by default, or lifted above it as its
+   own bar (contextPlacement="above", styled at the end of this section).
+   Composer owns the chrome; the caller passes the text.
    ============================================ */
 
 .ds-composer__context {
@@ -267,6 +268,47 @@
   --icon-size: var(--icon-size-500);
 }
 
+/* ---------- contextPlacement="above" ----------
+   The chip leaves the shell for its own bar, full width, a small gap clear
+   of the shell's top edge, and the layout aligns on one optical rail: the
+   bar's --padding-200 ring plus the --padding-400 pill inset (24px). The
+   typed text, the attachments, the chip's icon ink and a ModelPicker
+   trigger's label all start on it. The inside placement keeps its own
+   geometry above, untouched. */
+
+/* The bar and the shell travel as one block, so a host's gap never lands
+   between them */
+.ds-composer-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-200);
+  width: 100%;
+}
+
+.ds-composer__context--above {
+  margin: 0;
+  /* Outside the shell, so the shell's custom properties do not reach it:
+     the send button's raw 40px, restated */
+  height: 40px;
+  /* The rail, plus the shell border this bar does not sit inside */
+  padding: 0 var(--padding-400) 0
+    calc(var(--padding-200) + var(--padding-400) + var(--border-025));
+}
+
+/* Optical alignment: a glyph's ink starts inside its box, so the box is
+   pulled back by that side bearing to land the ink on the rail. The
+   default fits the portrait document glyphs a context note usually
+   carries (ink starts 4/24 into the box); the fallback is a consumer hook
+   for a glyph with a different bearing. */
+.ds-composer__context--above .ds-composer__context-icon {
+  margin-left: calc(-1 * var(--ds-composer-context-icon-bearing, var(--icon-size-500) * 4 / 24));
+}
+
+.ds-composer--context-above .ds-composer__attachments,
+.ds-composer--context-above .ds-composer__content {
+  padding-inline: calc(var(--padding-200) + var(--padding-400));
+}
+
 /* The text owns the truncation: one line, ellipsized only when the note
    actually outgrows the shell — an ellipsis is a truncation mark, not
    punctuation. The icon beside it never shrinks. */
@@ -277,7 +319,100 @@
 }
 
 /* ============================================
-   ATTACHMENTS ROW
+   FILE TRAY
+   The queued files: one row of square tiles that scrolls sideways rather
+   than growing the shell.
+   ============================================ */
+
+.ds-composer__tray {
+  /* How far the tiles sit in from the shell's edge. The tile corner below
+     is derived from it, so the two can only move together. */
+  --ds-composer-tray-inset: var(--padding-300);
+  /* Concentric with the shell: its radius, less the border, less the inset.
+     Floored so a squared theme never computes a negative corner. */
+  --ds-attachment-tile-radius: max(
+    var(--radius-100),
+    calc(var(--ds-composer-radius) - var(--border-025) - var(--ds-composer-tray-inset))
+  );
+
+  display: flex;
+  /* A scroller may be squeezed by the column it sits in; the tray keeps
+     its tiles' full height */
+  flex: none;
+  gap: var(--gap-200);
+  margin: 0;
+  /* The inset on every side but the foot, where the text zone's own top
+     padding takes over and only a sliver is kept so the scrollbar of an
+     overflowing row does not touch the tiles. The top inset also houses the part of a remove
+     button that hangs above its tile: a scroller clips what leaves it. */
+  padding: var(--ds-composer-tray-inset) var(--ds-composer-tray-inset) var(--padding-100);
+  list-style: none;
+  overflow-x: auto;
+  /* Tiles are objects, not text: the shell's text cursor stops at them */
+  cursor: default;
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-bg-container-secondary) transparent;
+}
+
+.ds-composer__tray-item {
+  display: flex;
+  flex: none;
+}
+
+/* ============================================
+   DROP HINT
+   While files hover over the shell it says what letting go will do.
+   ============================================ */
+
+.ds-composer--dragging {
+  border-color: var(--color-input-border-selected);
+}
+
+.ds-composer__drop-hint {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: inherit;
+  background-color: var(--color-bg-container-primary-semi);
+  font-family: var(--font-paragraph-sm-emphasis-family);
+  font-size: var(--font-paragraph-sm-emphasis-size);
+  font-weight: var(--font-paragraph-sm-emphasis-weight);
+  line-height: var(--font-paragraph-sm-emphasis-line-height);
+  letter-spacing: var(--font-paragraph-sm-emphasis-letter-spacing);
+  color: var(--color-text-primary);
+  /* Never a target: the shell hears the drag, and a hint that caught the
+     pointer would fire a leave on everything under it */
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-composer--dragging .ds-composer__drop-hint {
+  opacity: 1;
+}
+
+/* The picker itself is never seen: the attach button opens it */
+.ds-composer__file-input {
+  display: none;
+}
+
+.ds-composer__sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* ============================================
+   ATTACHMENTS ROW (legacy free-form slot)
    ============================================ */
 
 .ds-composer__attachments {