rift-ds 1.3.0 → 1.5.0

package/components/Composer/Composer.js

@@ -1,9 +1,21 @@
 "use client";
-import { jsxs, jsx } from "react/jsx-runtime";
-import React, { useRef, useState, useLayoutEffect } from "react";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import React, { useRef, useState, useLayoutEffect, useEffect } from "react";
+import { AttachmentTile } from "../Attachment/AttachmentTile.js";
+import { formatBytes } from "../Attachment/fileTypes.js";
 import { CircularButton } from "../CircularButton/CircularButton.js";
 import "../../fonts/material-symbols.css";
 import "./Composer.css";
+const defaultFileAnnouncement = ({
+  type,
+  names
+}) => {
+  const list = names.join(", ");
+  if (type === "added") return `Attached ${list}`;
+  if (type === "removed") return `Removed ${list}`;
+  return `Could not attach ${list}`;
+};
+const dragCarriesFiles = (event) => Array.from(event.dataTransfer?.types ?? []).includes("Files");
 const Composer = React.forwardRef(
   ({
     value,
@@ -17,6 +29,19 @@ const Composer = React.forwardRef(
     context,
     contextIcon,
     contextPlacement = "inside",
+    files,
+    onFilesSelected,
+    onFileRemove,
+    onFileClick,
+    accept,
+    multiple = true,
+    attachButton = true,
+    pasteThreshold,
+    onPasteAsAttachment,
+    attachLabel = "Attach files",
+    dropLabel = "Drop files to attach",
+    filesLabel = "Attachments",
+    formatFileAnnouncement = defaultFileAnnouncement,
     attachments,
     actions,
     trailingActions,
@@ -25,6 +50,7 @@ const Composer = React.forwardRef(
     className = "",
     onChange,
     onKeyDown,
+    onPaste,
     ...rest
   }, ref) => {
     const baseClass = "ds-composer";
@@ -34,7 +60,17 @@ const Composer = React.forwardRef(
     const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue ?? "");
     const currentValue = isControlled ? value : uncontrolledValue;
     const disabled = Boolean(rest.disabled);
-    const canSend = !disabled && currentValue.trim() !== "";
+    const queued = files ?? [];
+    const hasFiles = queued.length > 0;
+    const armed = Boolean(onFilesSelected);
+    const anyUploading = queued.some((file) => file.status === "uploading");
+    const anyReady = queued.some((file) => file.status === "ready");
+    const canSend = !disabled && !anyUploading && (currentValue.trim() !== "" || anyReady);
+    const fileInputRef = useRef(null);
+    const trayRef = useRef(null);
+    const [dragging, setDragging] = useState(false);
+    const dragDepth = useRef(0);
+    const [announcement, setAnnouncement] = useState("");
     const setTextareaRef = (node) => {
       textareaRef.current = node;
       if (typeof ref === "function") ref(node);
@@ -57,6 +93,92 @@ const Composer = React.forwardRef(
       observer.observe(node);
       return () => observer.disconnect();
     }, []);
+    const previousFiles = useRef(queued);
+    const announceRef = useRef(formatFileAnnouncement);
+    announceRef.current = formatFileAnnouncement;
+    useEffect(() => {
+      const before = previousFiles.current;
+      const now = files ?? [];
+      previousFiles.current = now;
+      if (before === now) return;
+      const beforeById = new Map(before.map((file) => [file.id, file]));
+      const nowIds = new Set(now.map((file) => file.id));
+      const added = now.filter((file) => !beforeById.has(file.id)).map((file) => file.name);
+      const removed = before.filter((file) => !nowIds.has(file.id)).map((file) => file.name);
+      const failed = now.filter((file) => file.status === "error" && beforeById.get(file.id)?.status !== "error").map((file) => file.name);
+      const parts = [
+        failed.length > 0 ? announceRef.current({ type: "failed", names: failed }) : "",
+        added.length > 0 ? announceRef.current({ type: "added", names: added }) : "",
+        removed.length > 0 ? announceRef.current({ type: "removed", names: removed }) : ""
+      ].filter(Boolean);
+      if (parts.length > 0) setAnnouncement(parts.join(". "));
+    }, [files]);
+    const focusAfterRemove = useRef(null);
+    useEffect(() => {
+      const index = focusAfterRemove.current;
+      if (index === null) return;
+      focusAfterRemove.current = null;
+      const buttons = trayRef.current?.querySelectorAll(
+        ".ds-attachment-tile__remove"
+      );
+      const next = buttons?.[Math.min(index, (buttons?.length ?? 0) - 1)];
+      if (next) next.focus();
+      else textareaRef.current?.focus();
+    }, [files]);
+    const handleFileRemove = (id, index) => {
+      focusAfterRemove.current = index;
+      onFileRemove?.(id);
+    };
+    const handlePick = (event) => {
+      const picked = Array.from(event.target.files ?? []);
+      event.target.value = "";
+      if (picked.length > 0) onFilesSelected?.(picked);
+    };
+    const handlePaste = (event) => {
+      onPaste?.(event);
+      if (event.defaultPrevented) return;
+      const pasted = Array.from(event.clipboardData?.files ?? []);
+      if (armed && pasted.length > 0) {
+        event.preventDefault();
+        onFilesSelected?.(pasted);
+        return;
+      }
+      if (pasteThreshold === void 0 || !onPasteAsAttachment) return;
+      const text = event.clipboardData?.getData("text/plain") ?? "";
+      if (text.length >= pasteThreshold) {
+        event.preventDefault();
+        onPasteAsAttachment(text);
+      }
+    };
+    const takesDrag = (event) => armed && !disabled && dragCarriesFiles(event);
+    const handleDragEnter = (event) => {
+      if (!takesDrag(event)) return;
+      event.preventDefault();
+      event.stopPropagation();
+      dragDepth.current += 1;
+      setDragging(true);
+    };
+    const handleDragOver = (event) => {
+      if (!takesDrag(event)) return;
+      event.preventDefault();
+      event.stopPropagation();
+      event.dataTransfer.dropEffect = "copy";
+    };
+    const handleDragLeave = (event) => {
+      if (!takesDrag(event)) return;
+      event.stopPropagation();
+      dragDepth.current = Math.max(0, dragDepth.current - 1);
+      if (dragDepth.current === 0) setDragging(false);
+    };
+    const handleDrop = (event) => {
+      if (!takesDrag(event)) return;
+      event.preventDefault();
+      event.stopPropagation();
+      dragDepth.current = 0;
+      setDragging(false);
+      const dropped = Array.from(event.dataTransfer.files ?? []);
+      if (dropped.length > 0) onFilesSelected?.(dropped);
+    };
     const submit = () => {
       if (streaming || !canSend) return;
       onSubmit?.(currentValue);
@@ -83,6 +205,7 @@ const Composer = React.forwardRef(
       aiGlow ? `${baseClass}--ai-glow` : "",
       streaming ? `${baseClass}--streaming` : "",
       disabled ? `${baseClass}--disabled` : "",
+      dragging ? `${baseClass}--dragging` : "",
       // The above placement moves the text onto the chip's rail; the shell
       // needs to know, since the chip is no longer inside it.
       context && contextPlacement === "above" ? `${baseClass}--context-above` : "",
@@ -107,8 +230,28 @@ const Composer = React.forwardRef(
         className: classes,
         style: { "--ds-composer-max-rows": maxRows },
         onClick: handleShellClick,
+        onDragEnter: armed ? handleDragEnter : void 0,
+        onDragOver: armed ? handleDragOver : void 0,
+        onDragLeave: armed ? handleDragLeave : void 0,
+        onDrop: armed ? handleDrop : void 0,
         children: [
           !contextAbove && contextChip,
+          hasFiles && /* @__PURE__ */ jsx("ul", { className: `${baseClass}__tray`, ref: trayRef, "aria-label": filesLabel, children: queued.map((file, index) => /* @__PURE__ */ jsx("li", { className: `${baseClass}__tray-item`, children: /* @__PURE__ */ jsx(
+            AttachmentTile,
+            {
+              name: file.name,
+              kind: file.kind,
+              status: file.status,
+              progress: file.progress,
+              error: file.error,
+              previewSrc: file.previewSrc,
+              previewAlt: file.previewAlt,
+              excerpt: file.excerpt,
+              meta: file.size === void 0 ? void 0 : formatBytes(file.size),
+              onClick: onFileClick ? () => onFileClick(file) : void 0,
+              onRemove: onFileRemove && !disabled ? () => handleFileRemove(file.id, index) : void 0
+            }
+          ) }, file.id)) }),
           attachments && /* @__PURE__ */ jsx("div", { className: `${baseClass}__attachments`, children: attachments }),
           /* @__PURE__ */ jsx("div", { className: `${baseClass}__content`, ref: contentRef, children: /* @__PURE__ */ jsx(
             "textarea",
@@ -120,11 +263,24 @@ const Composer = React.forwardRef(
               value: currentValue,
               "aria-label": ariaLabel,
               onChange: handleChange,
-              onKeyDown: handleKeyDown
+              onKeyDown: handleKeyDown,
+              onPaste: handlePaste
             }
           ) }),
           /* @__PURE__ */ jsxs("div", { className: `${baseClass}__footer`, children: [
-            actions && /* @__PURE__ */ jsx("div", { className: `${baseClass}__actions`, children: actions }),
+            (actions || armed && attachButton) && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__actions`, children: [
+              armed && attachButton && /* @__PURE__ */ jsx(
+                CircularButton,
+                {
+                  icon: "add",
+                  variant: "tertiary",
+                  ariaLabel: attachLabel,
+                  disabled,
+                  onClick: () => fileInputRef.current?.click()
+                }
+              ),
+              actions
+            ] }),
             /* @__PURE__ */ jsxs("div", { className: `${baseClass}__trailing`, children: [
               trailingActions,
               streaming ? /* @__PURE__ */ jsx(
@@ -147,7 +303,24 @@ const Composer = React.forwardRef(
                 }
               )
             ] })
-          ] })
+          ] }),
+          armed && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: fileInputRef,
+                className: `${baseClass}__file-input`,
+                type: "file",
+                accept,
+                multiple,
+                tabIndex: -1,
+                "aria-hidden": "true",
+                onChange: handlePick
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: `${baseClass}__drop-hint`, "aria-hidden": "true", children: dropLabel })
+          ] }),
+          (armed || hasFiles) && /* @__PURE__ */ jsx("span", { className: `${baseClass}__sr-only`, role: "status", children: announcement })
         ]
       }
     );

package/components/ContextMenu/ContextMenu.css

@@ -114,6 +114,31 @@
   background-color: var(--color-action-passive-bg-hover);
 }
 
+/* States — selected: the current choice of a set. DropdownMenu.css owns
+   the recipe (passive wash held, full-strength text and icon, trailing
+   check); the two menus share the entry model, so they share the look. */
+.ds-context-menu__item--selected {
+  background-color: var(--color-action-passive-bg-hover);
+  color: var(--color-text-primary);
+}
+
+.ds-context-menu__item--selected:hover,
+.ds-context-menu__item--selected.ds-context-menu__item--focused {
+  background-color: var(--color-action-passive-bg-active);
+}
+
+.ds-context-menu__item--selected .ds-context-menu__item-icon {
+  color: var(--color-icon-primary);
+}
+
+.ds-context-menu__check {
+  --icon-size: var(--icon-size-500);
+  color: var(--color-icon-primary);
+  margin-left: auto;
+  flex-shrink: 0;
+  line-height: 1;
+}
+
 /* States — disabled */
 .ds-context-menu__item--disabled {
   opacity: 0.4;

package/components/ContextMenu/ContextMenu.js

@@ -121,14 +121,17 @@ const SubEntry = ({
   const itemClasses = [
     `${baseClass}__item`,
     entry.disabled ? `${baseClass}__item--disabled` : "",
-    entry.destructive ? `${baseClass}__item--destructive` : ""
+    entry.destructive ? `${baseClass}__item--destructive` : "",
+    entry.selected ? `${baseClass}__item--selected` : ""
   ].filter(Boolean).join(" ");
+  const isChoice = entry.selected !== void 0;
   return /* @__PURE__ */ jsxs(
     "li",
     {
       id: itemId,
       className: itemClasses,
-      role: "menuitem",
+      role: isChoice ? "menuitemradio" : "menuitem",
+      "aria-checked": isChoice ? entry.selected : void 0,
       "aria-disabled": entry.disabled || void 0,
       onClick: (e) => {
         e.stopPropagation();
@@ -142,7 +145,8 @@ const SubEntry = ({
           entry.icon && /* @__PURE__ */ jsx("span", { className: `${baseClass}__item-icon material-symbols-rounded`, "aria-hidden": "true", children: entry.icon }),
           entry.label
         ] }),
-        entry.shortcut && /* @__PURE__ */ jsx("span", { className: `${baseClass}__shortcut`, children: entry.shortcut })
+        entry.shortcut && /* @__PURE__ */ jsx("span", { className: `${baseClass}__shortcut`, children: entry.shortcut }),
+        entry.selected && /* @__PURE__ */ jsx("span", { className: `${baseClass}__check material-symbols-rounded`, "aria-hidden": "true", children: "check" })
       ]
     }
   );
@@ -321,14 +325,17 @@ const ContextMenu = React.forwardRef(
         `${baseClass}__item`,
         isFocused ? `${baseClass}__item--focused` : "",
         entry.disabled ? `${baseClass}__item--disabled` : "",
-        entry.destructive ? `${baseClass}__item--destructive` : ""
+        entry.destructive ? `${baseClass}__item--destructive` : "",
+        entry.selected ? `${baseClass}__item--selected` : ""
       ].filter(Boolean).join(" ");
+      const isChoice = entry.selected !== void 0;
       return /* @__PURE__ */ jsxs(
         "li",
         {
           id: `${generatedId}-item-${myIndex}`,
           className: itemClasses,
-          role: "menuitem",
+          role: isChoice ? "menuitemradio" : "menuitem",
+          "aria-checked": isChoice ? entry.selected : void 0,
           "aria-disabled": entry.disabled || void 0,
           onClick: (e) => {
             e.stopPropagation();
@@ -349,7 +356,8 @@ const ContextMenu = React.forwardRef(
               ),
               entry.label
             ] }),
-            entry.shortcut && /* @__PURE__ */ jsx("span", { className: `${baseClass}__shortcut`, children: entry.shortcut })
+            entry.shortcut && /* @__PURE__ */ jsx("span", { className: `${baseClass}__shortcut`, children: entry.shortcut }),
+            entry.selected && /* @__PURE__ */ jsx("span", { className: `${baseClass}__check material-symbols-rounded`, "aria-hidden": "true", children: "check" })
           ]
         },
         `item-${index}`

package/components/DocumentChip/DocumentChip.d.ts

@@ -28,14 +28,16 @@ type DocumentChipOwnProps = {
 export interface DocumentChipProps extends DocumentChipOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof DocumentChipOwnProps> {
 }
 /**
- * DocumentChip is a compact file reference: a two-line tile with a type
- * icon, name, metadata line, upload progress, and an optional remove
- * button. It references documents attached to chat messages or queued
- * above a composer — Chip stays the one-line pill for attributes, and
- * FileInput stays the form control that owns selection.
+ * DocumentChip is the earlier, one-row file reference: a type icon, name,
+ * metadata line, upload progress, and an optional remove button. It keeps
+ * working for existing consumers, and new work uses the attachment family:
+ * AttachmentTile for a file, Composer's `files` for a queue, and
+ * AttachmentGroup for the files on a sent message.
  *
  * The root is always a `<div>`; passing `onClick` turns the body into a
  * `<button>` so click and remove coexist without nesting controls.
+ *
+ * @deprecated Use `AttachmentTile` instead.
  */
 export declare const DocumentChip: React.ForwardRefExoticComponent<DocumentChipProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/components/DropdownMenu/DropdownMenu.css

@@ -145,6 +145,35 @@
   background-color: var(--color-action-passive-bg-hover);
 }
 
+/* ============================================
+   SELECTED ITEM
+   The current choice of a set: the passive wash held down, text and icon
+   at full strength, and a trailing check — three cues, none of them the
+   action colour, which a menu row has no claim on.
+   ============================================ */
+
+.ds-dropdown-menu__item--selected {
+  background-color: var(--color-action-passive-bg-hover);
+  color: var(--color-text-primary);
+}
+
+.ds-dropdown-menu__item--selected:hover,
+.ds-dropdown-menu__item--selected.ds-dropdown-menu__item--focused {
+  background-color: var(--color-action-passive-bg-active);
+}
+
+.ds-dropdown-menu__item--selected .ds-dropdown-menu__item-icon {
+  color: var(--color-icon-primary);
+}
+
+.ds-dropdown-menu__check {
+  --icon-size: var(--icon-size-500);
+  color: var(--color-icon-primary);
+  margin-left: auto;
+  flex-shrink: 0;
+  line-height: 1;
+}
+
 /* ============================================
    DISABLED ITEM
    ============================================ */

package/components/DropdownMenu/DropdownMenu.d.ts

@@ -11,6 +11,8 @@ export interface DropdownMenuItem {
     disabled?: boolean;
     /** Destructive / danger styling (red text) for delete, remove, etc. */
     destructive?: boolean;
+    /** Marks the item as the current choice of a set: it holds the passive wash and a trailing check, and is announced as a checked radio item. Leave undefined on plain action items; pass `false` on the unchosen members of a set so they are announced as radio items too. Ignored on an item that opens a sub-menu. */
+    selected?: boolean;
     /** Click handler */
     onClick?: () => void;
     /** Nested sub-menu items */

package/components/DropdownMenu/DropdownMenu.js

@@ -120,14 +120,17 @@ const MenuPanel = ({
     const itemClasses = [
       `${baseClass}__item`,
       entry.disabled ? `${baseClass}__item--disabled` : "",
-      entry.destructive ? `${baseClass}__item--destructive` : ""
+      entry.destructive ? `${baseClass}__item--destructive` : "",
+      entry.selected ? `${baseClass}__item--selected` : ""
     ].filter(Boolean).join(" ");
+    const isChoice = entry.selected !== void 0;
     return /* @__PURE__ */ jsxs(
       "li",
       {
         id: entryId,
         className: itemClasses,
-        role: "menuitem",
+        role: isChoice ? "menuitemradio" : "menuitem",
+        "aria-checked": isChoice ? entry.selected : void 0,
         "aria-disabled": entry.disabled || void 0,
         onClick: (e) => {
           e.stopPropagation();
@@ -141,7 +144,8 @@ const MenuPanel = ({
             entry.icon && (typeof entry.icon === "string" ? /* @__PURE__ */ jsx("span", { className: `${baseClass}__item-icon material-symbols-rounded`, "aria-hidden": "true", children: entry.icon }) : /* @__PURE__ */ jsx("span", { className: `${baseClass}__item-icon`, "aria-hidden": "true", children: entry.icon })),
             entry.label
           ] }),
-          entry.shortcut && /* @__PURE__ */ jsx("span", { className: `${baseClass}__shortcut`, children: entry.shortcut })
+          entry.shortcut && /* @__PURE__ */ jsx("span", { className: `${baseClass}__shortcut`, children: entry.shortcut }),
+          entry.selected && /* @__PURE__ */ jsx("span", { className: `${baseClass}__check material-symbols-rounded`, "aria-hidden": "true", children: "check" })
         ]
       },
       `item-${index}`
@@ -253,7 +257,7 @@ const DropdownMenu = ({
   };
   useEffect(() => {
     if (isOpen && focusedIndex >= 0 && panelRef.current) {
-      const allItems = panelRef.current.querySelectorAll(`[role="menuitem"]`);
+      const allItems = panelRef.current.querySelectorAll(`[role="menuitem"], [role="menuitemradio"]`);
       const el = allItems[focusedIndex];
       el?.scrollIntoView({ block: "nearest" });
     }
@@ -291,14 +295,17 @@ const DropdownMenu = ({
       `${baseClass}__item`,
       isFocused ? `${baseClass}__item--focused` : "",
       entry.disabled ? `${baseClass}__item--disabled` : "",
-      entry.destructive ? `${baseClass}__item--destructive` : ""
+      entry.destructive ? `${baseClass}__item--destructive` : "",
+      entry.selected ? `${baseClass}__item--selected` : ""
     ].filter(Boolean).join(" ");
+    const isChoice = entry.selected !== void 0;
     return /* @__PURE__ */ jsxs(
       "li",
       {
         id: `${generatedId}-item-${myIndex}`,
         className: itemClasses,
-        role: "menuitem",
+        role: isChoice ? "menuitemradio" : "menuitem",
+        "aria-checked": isChoice ? entry.selected : void 0,
         "aria-disabled": entry.disabled || void 0,
         onClick: (e) => {
           e.stopPropagation();
@@ -312,7 +319,8 @@ const DropdownMenu = ({
             entry.icon && (typeof entry.icon === "string" ? /* @__PURE__ */ jsx("span", { className: `${baseClass}__item-icon material-symbols-rounded`, "aria-hidden": "true", children: entry.icon }) : /* @__PURE__ */ jsx("span", { className: `${baseClass}__item-icon`, "aria-hidden": "true", children: entry.icon })),
             entry.label
           ] }),
-          entry.shortcut && /* @__PURE__ */ jsx("span", { className: `${baseClass}__shortcut`, children: entry.shortcut })
+          entry.shortcut && /* @__PURE__ */ jsx("span", { className: `${baseClass}__shortcut`, children: entry.shortcut }),
+          entry.selected && /* @__PURE__ */ jsx("span", { className: `${baseClass}__check material-symbols-rounded`, "aria-hidden": "true", children: "check" })
         ]
       },
       `item-${index}`

package/components/FileInput/FileInput.js

@@ -3,14 +3,8 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import React, { useState, useRef, useId } from "react";
 import { Field } from "../Field/Field.js";
 import "./FileInput.css";
+import { formatBytes } from "../Attachment/fileTypes.js";
 import "../../fonts/material-symbols.css";
-const formatBytes = (bytes) => {
-  if (bytes === 0) return "0 B";
-  const units = ["B", "KB", "MB", "GB", "TB"];
-  const exponent = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);
-  const value = bytes / Math.pow(1024, exponent);
-  return `${exponent === 0 ? value : value.toFixed(1)} ${units[exponent]}`;
-};
 const FileInput = React.forwardRef(
   ({
     label,

package/components/MessageCard/MessageCard.d.ts

@@ -18,7 +18,7 @@ type MessageCardOwnProps = {
     actions?: React.ReactNode;
     /** Additional CSS classes */
     className?: string;
-    /** Body content between the description and the footer — rich content, a Prose block, a DocumentChip row. */
+    /** Body content between the description and the footer — rich content, a Prose block, an AttachmentGroup. */
     children?: React.ReactNode;
 };
 export interface MessageCardProps extends MessageCardOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof MessageCardOwnProps> {

package/components/Quote/Quote.css

@@ -36,8 +36,8 @@
 
 /* ============================================
    VARIANT — PULL (large display quote)
-   Display type per the weight-contrast rule —
-   no border, the scale is the emphasis.
+   Display-tier type: no border, the scale is
+   the emphasis.
    ============================================ */
 
 .ds-quote--pull .ds-quote__text {

package/components/ShaderField/useShaderField.d.ts

@@ -22,7 +22,7 @@ export interface ShaderParams {
     /**
      * How much the composition resists shrinking with the container, 0–1.
      *
-     * At 0 — the default, and the behaviour a CSS blob layer has — the whole
+     * At 0 — the behaviour a CSS blob layer has — the whole
      * field is fitted to whatever width it is given, so a phone shows the
      * entire composition at phone scale: every source small, and more of them
      * crowded into view than the look was built for. At 1 the field holds the
@@ -31,9 +31,9 @@ export interface ShaderParams {
      * keeping some of the shrink so colours still bleed together on a small
      * screen. Above the reference width it does nothing.
      *
-     * Raise it for a full-viewport background, which is read on a phone as a
-     * scene rather than a diagram; leave it at 0 wherever the point is to see
-     * the whole composition, such as a small demo tile.
+     * The default sits between the two, which suits a full-viewport background,
+     * read on a phone as a scene rather than a diagram; set it to 0 wherever
+     * the point is to see the whole composition, such as a small demo tile.
      */
     crop: number;
 }

package/components/Stat/Stat.css

@@ -13,8 +13,8 @@
 }
 
 /* ============================================
-   VALUE — display weight (300), per the
-   weight-contrast rule for display numerals
+   VALUE — the display tier's weight (300 in the
+   base theme), so numerals follow the theme
    ============================================ */
 
 .ds-stat__value {

package/components/registry.json

@@ -161,6 +161,42 @@
       "folder": "Chart",
       "recharts": true
     },
+    {
+      "name": "AttachmentDropZone",
+      "label": "Attachment drop zone",
+      "slug": "attachment-drop-zone",
+      "description": "A wrapper that makes a whole surface a file drop target, with an outlined overlay while files hover over it.",
+      "category": "ai",
+      "client": true,
+      "folder": "Attachment"
+    },
+    {
+      "name": "AttachmentGroup",
+      "label": "Attachment group",
+      "slug": "attachment-group",
+      "description": "The files on a sent message: one picture at its own shape, or a grid of tiles that collapses behind a count.",
+      "category": "ai",
+      "client": true,
+      "folder": "Attachment"
+    },
+    {
+      "name": "AttachmentTile",
+      "label": "Attachment tile",
+      "slug": "attachment-tile",
+      "description": "One file as a square: a picture, a coloured mark for well-known formats, or a neutral badge, with upload states.",
+      "category": "ai",
+      "client": false,
+      "folder": "Attachment"
+    },
+    {
+      "name": "AttachmentViewer",
+      "label": "Attachment viewer",
+      "slug": "attachment-viewer",
+      "description": "A preview dialog for a message's files, with download, stepping, and plain states for files it cannot show.",
+      "category": "ai",
+      "client": true,
+      "folder": "Attachment"
+    },
     {
       "name": "Avatar",
       "label": "Avatar",
@@ -369,7 +405,7 @@
       "name": "Composer",
       "label": "Composer",
       "slug": "composer",
-      "description": "An auto-growing message input with send and stop states, a page-context note, an attachment slot, and Enter-to-send.",
+      "description": "An auto-growing message input with send and stop states, a page-context note, a file tray fed by picker, paste and drop, and Enter-to-send.",
       "category": "ai",
       "client": true
     },
@@ -441,7 +477,7 @@
       "name": "DocumentChip",
       "label": "Document chip",
       "slug": "document-chip",
-      "description": "A compact file reference with a type icon, name, metadata, and optional remove.",
+      "description": "A legacy one-row file reference, superseded by the attachment tile and kept for existing consumers.",
       "category": "ai",
       "client": false
     },