rift-ds 1.14.0 → 1.16.0

package/behaviors/shortcuts.js

@@ -0,0 +1,160 @@
+"use client";
+import { useSyncExternalStore, useRef, useEffect } from "react";
+import { MOTION_SHORTCUT_SEQUENCE_MS } from "../tokens/motion.js";
+import { warnOnce } from "./devWarning.js";
+import { activeModalPanel } from "./useFocusScope.js";
+import { hasOpenLayer, openLayerContains } from "./useLayer.js";
+import { detectPlatform, parseShortcut, KEY_ALIASES } from "./shortcut-keys.js";
+import { formatShortcut, shortcutAria, shortcutKeys } from "./shortcut-keys.js";
+const noSubscription = () => () => {
+};
+function usePlatform() {
+  return useSyncExternalStore(noSubscription, detectPlatform, () => "other");
+}
+const eventKey = (event) => {
+  const key = event.key.toLowerCase();
+  return KEY_ALIASES[key] ?? key;
+};
+const codeKey = (event) => {
+  const match = /^(?:Key([A-Z])|Digit(\d))$/.exec(event.code ?? "");
+  return match ? (match[1] ?? match[2]).toLowerCase() : null;
+};
+const matchesStep = (step, event, platform) => {
+  const ctrl = step.ctrl || step.mod && platform === "other";
+  const meta = step.meta || step.mod && platform === "apple";
+  if (event.ctrlKey !== ctrl || event.metaKey !== meta || event.altKey !== step.alt) return false;
+  const symbol = step.key.length === 1 && !/[a-z0-9]/.test(step.key);
+  if (!symbol && event.shiftKey !== step.shift) return false;
+  return eventKey(event) === step.key || codeKey(event) === step.key;
+};
+const isTextField = (target) => {
+  if (!(target instanceof HTMLElement)) return false;
+  if (target.isContentEditable) return true;
+  if (target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement) return true;
+  if (target instanceof HTMLInputElement) {
+    return !["checkbox", "radio", "button", "submit", "reset", "range", "color", "file", "image"].includes(target.type);
+  }
+  return false;
+};
+const registrations = [];
+let version = 0;
+const listeners = /* @__PURE__ */ new Set();
+const notify = () => {
+  version += 1;
+  for (const listener of listeners) listener();
+};
+let recent = [];
+const eligible = (registration, target) => {
+  const options = registration.optionsRef.current;
+  if (options.enabled === false) return false;
+  if (isTextField(target) && !options.allowInInput) return false;
+  if (options.global) return true;
+  const modal = activeModalPanel();
+  const node = target instanceof Node ? target : null;
+  const unfocused = !node || node === document.body || node === document.documentElement;
+  const scope = options.scope?.current;
+  if (scope) {
+    if (!unfocused) return scope.contains(node);
+    return modal ? modal.contains(scope) : !openLayerContains(scope);
+  }
+  if (modal) return false;
+  return unfocused || !openLayerContains(node);
+};
+const handleKeyDown = (event) => {
+  if (event.isComposing || event.defaultPrevented) return;
+  if (event.key === "Escape" && hasOpenLayer()) return;
+  if (["Shift", "Control", "Alt", "Meta"].includes(event.key)) return;
+  const now = event.timeStamp || performance.now();
+  const last = recent[recent.length - 1];
+  if (last && now - last.at > MOTION_SHORTCUT_SEQUENCE_MS) recent = [];
+  recent = [...recent.slice(-3), { event, at: now }];
+  const platform = detectPlatform();
+  let best = null;
+  registrations.forEach((registration2, index) => {
+    if (!eligible(registration2, event.target)) return;
+    for (const steps of registration2.steps) {
+      if (steps.length > recent.length) continue;
+      const tail = recent.slice(recent.length - steps.length);
+      if (!steps.every((step, i) => matchesStep(step, tail[i].event, platform))) continue;
+      if (!best || steps.length > best.length || steps.length === best.length && index > best.index) {
+        best = { registration: registration2, length: steps.length, index };
+      }
+    }
+  });
+  if (!best) return;
+  const { registration } = best;
+  event.preventDefault();
+  recent = [];
+  registration.handlerRef.current(event);
+};
+const register = (registration) => {
+  for (const shortcut of registration.shortcuts) {
+    const scope = registration.optionsRef.current.scope;
+    const clash = registrations.find(
+      (other) => other.optionsRef.current.enabled !== false && other.optionsRef.current.scope === scope && other.shortcuts.includes(shortcut)
+    );
+    if (clash && registration.optionsRef.current.enabled !== false) {
+      warnOnce(`The shortcut "${shortcut}" is registered twice in one scope; the one registered last wins.`);
+    }
+  }
+  registrations.push(registration);
+  if (registrations.length === 1) document.addEventListener("keydown", handleKeyDown);
+  notify();
+  return () => {
+    const index = registrations.indexOf(registration);
+    if (index !== -1) registrations.splice(index, 1);
+    if (registrations.length === 0) {
+      document.removeEventListener("keydown", handleKeyDown);
+      recent = [];
+    }
+    notify();
+  };
+};
+function useShortcut(shortcut, handler, options = {}) {
+  const handlerRef = useRef(handler);
+  const optionsRef = useRef(options);
+  useEffect(() => {
+    handlerRef.current = handler;
+    optionsRef.current = options;
+  });
+  const shortcuts = Array.isArray(shortcut) ? shortcut : [shortcut];
+  const key = shortcuts.join("\0");
+  const enabled = options.enabled !== false;
+  useEffect(() => {
+    if (!enabled) return;
+    const list = key.split("\0");
+    return register({ shortcuts: list, steps: list.map(parseShortcut), handlerRef, optionsRef });
+  }, [key, enabled]);
+}
+const subscribe = (listener) => {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+};
+let snapshot = { version: -1, list: [] };
+const readRegistered = () => {
+  if (snapshot.version !== version) {
+    snapshot = {
+      version,
+      list: registrations.filter((r) => r.optionsRef.current.enabled !== false && r.optionsRef.current.description).map((r) => ({
+        shortcuts: r.shortcuts,
+        description: r.optionsRef.current.description ?? "",
+        group: r.optionsRef.current.group
+      }))
+    };
+  }
+  return snapshot.list;
+};
+const EMPTY = [];
+function useRegisteredShortcuts() {
+  return useSyncExternalStore(subscribe, readRegistered, () => EMPTY);
+}
+export {
+  detectPlatform,
+  formatShortcut,
+  parseShortcut,
+  shortcutAria,
+  shortcutKeys,
+  usePlatform,
+  useRegisteredShortcuts,
+  useShortcut
+};

package/behaviors/useAnchoredPosition.d.ts

@@ -46,6 +46,8 @@
  * overflow does the room narrow to its box.
  */
 export type AnchoredSide = 'top' | 'bottom' | 'left' | 'right';
+/** A side a caller can ask for: a screen side, or `start` / `end` of the reading direction. */
+export type AnchoredSideRequest = AnchoredSide | 'start' | 'end';
 export type AnchoredAlign = 'start' | 'center' | 'end';
 export type AnchoredPlacement = {
     /** The side the panel took after flipping. */
@@ -71,9 +73,20 @@ export type AnchoredPositionOptions = {
     anchorRef: React.RefObject<HTMLElement | null>;
     /** The panel being placed. */
     panelRef: React.RefObject<HTMLElement | null>;
-    /** The preferred side. Default `bottom`. */
-    side?: AnchoredSide;
-    /** Where along that side the panel lines up with the anchor. Default `start`. */
+    /**
+     * The preferred side. Default `bottom`. `start` and `end` resolve against
+     * the anchor's reading direction at placement time (`start` is the left
+     * in English, the right in Arabic); the placement reports the screen side
+     * it took.
+     */
+    side?: AnchoredSideRequest;
+    /**
+     * Where along that side the panel lines up with the anchor. Default
+     * `start`. On the top and bottom sides `start` and `end` follow the
+     * anchor's reading direction, so a menu lines up with its trigger's
+     * leading edge in either. The panel's `data-align` reports the screen
+     * alignment it took (`start` is the left edge), like `data-side`.
+     */
     align?: AnchoredAlign;
     /**
      * The custom property that holds the gap between anchor and panel, read
@@ -108,4 +121,4 @@ export type AnchoredPositionOptions = {
  */
 export declare function fixedContainingBlock(element: HTMLElement): HTMLElement | null;
 /** Places `panelRef` against `anchorRef` while `open`. See the module comment. */
-export declare function useAnchoredPosition({ open, anchorRef, panelRef, side, align, gapProperty, edgeProperty, flip, fitHeight, matchWidth, onPlace, target, }: AnchoredPositionOptions): void;
+export declare function useAnchoredPosition({ open, anchorRef, panelRef, side: sideRequest, align: alignRequest, gapProperty, edgeProperty, flip, fitHeight, matchWidth, onPlace, target, }: AnchoredPositionOptions): void;

package/behaviors/useAnchoredPosition.js

@@ -1,5 +1,6 @@
 "use client";
 import { useRef, useLayoutEffect } from "react";
+import { isRtl } from "./direction.js";
 function fixedContainingBlock(element) {
   for (let node = element.parentElement; node; node = node.parentElement) {
     const style = getComputedStyle(node);
@@ -21,8 +22,8 @@ function useAnchoredPosition({
   open,
   anchorRef,
   panelRef,
-  side = "bottom",
-  align = "start",
+  side: sideRequest = "bottom",
+  align: alignRequest = "start",
   gapProperty = "--gap-200",
   edgeProperty = "--gap-200",
   flip = true,
@@ -64,6 +65,10 @@ function useAnchoredPosition({
           bounds.bottom = Math.min(bounds.bottom, origin.top + block.clientHeight);
         }
       }
+      const rtl = isRtl(anchor);
+      const side = sideRequest === "start" ? rtl ? "right" : "left" : sideRequest === "end" ? rtl ? "left" : "right" : sideRequest;
+      const flipsAlign = rtl && (side === "top" || side === "bottom") && alignRequest !== "center";
+      const align = flipsAlign ? alignRequest === "start" ? "end" : "start" : alignRequest;
       const a = anchor.getBoundingClientRect();
       const panelStyle = getComputedStyle(panel);
       const gap = parseFloat(panelStyle.getPropertyValue(gapProperty)) || 0;
@@ -145,7 +150,7 @@ function useAnchoredPosition({
         panel.style.removeProperty("visibility");
       }
     };
-  }, [open, target, anchorRef, panelRef, side, align, gapProperty, edgeProperty, flip, fitHeight, matchWidth]);
+  }, [open, target, anchorRef, panelRef, sideRequest, alignRequest, gapProperty, edgeProperty, flip, fitHeight, matchWidth]);
 }
 export {
   fixedContainingBlock,

package/behaviors/useFocusScope.d.ts

@@ -47,5 +47,11 @@ type FocusScopeOptions = {
     /** Make everything outside the scope inert while active. Default true. */
     inertOutside?: boolean;
 };
+/**
+ * The panel of the topmost modal scope that isolates the page, or null when
+ * none is open. Keyboard shortcuts read it: while a modal is open, only the
+ * shortcuts that live inside it (or are global) may fire.
+ */
+export declare const activeModalPanel: () => HTMLElement | null;
 export declare function useFocusScope(ref: React.RefObject<HTMLElement | null>, options: FocusScopeOptions): void;
 export {};

package/behaviors/useFocusScope.js

@@ -23,6 +23,7 @@ const applyInert = () => {
     inerted.clear();
   }
 };
+const activeModalPanel = () => inertScopes[inertScopes.length - 1]?.panel ?? null;
 const isVisible = (el) => el.getClientRects().length > 0;
 const restoreTarget = (previous) => {
   if (!document.contains(previous)) return null;
@@ -92,5 +93,6 @@ function useFocusScope(ref, options) {
   }, [active, ref]);
 }
 export {
+  activeModalPanel,
   useFocusScope
 };

package/behaviors/useLayer.d.ts

@@ -58,6 +58,15 @@ export type LayerHandle = {
      */
     ownsPress: () => boolean;
 };
+/**
+ * Whether `node` sits inside an open layer that names its elements: a
+ * popover, menu or listbox holding focus, or a modal panel. Keyboard
+ * shortcuts read it, so a page shortcut never fires while focus is in an
+ * overlay that has its own keys.
+ */
+export declare const openLayerContains: (node: Node) => boolean;
+/** Whether any layer is open. Escape belongs to the stack while one is, so keyboard shortcuts leave it alone. */
+export declare const hasOpenLayer: () => boolean;
 /**
  * Register an overlay on the dismissal stack while `open` is true. Options
  * are read at event time, so a `dismissOnEscape` toggle takes effect without

package/behaviors/useLayer.js

@@ -4,6 +4,8 @@ const layers = [];
 let listenersInstalled = false;
 let pressOwner = null;
 const contains = (layer, target) => (layer.optionsRef.current.getElements?.() ?? []).some((el) => el?.contains(target));
+const openLayerContains = (node) => layers.some((layer) => contains(layer, node));
+const hasOpenLayer = () => layers.length > 0;
 const handleKeyDown = (event) => {
   if (event.key !== "Escape" || event.defaultPrevented) return;
   const top = layers[layers.length - 1];
@@ -63,5 +65,7 @@ function useLayer(options) {
   return { ownsPress };
 }
 export {
+  hasOpenLayer,
+  openLayerContains,
   useLayer
 };

package/behaviors/useScrollLock.d.ts

@@ -31,6 +31,10 @@
  * swapping the modals onto it would change their scrollbar rendering.
  * Instances are independent — overlapping cancel-events locks stack
  * harmlessly.
+ *
+ * Published as the `./behaviors/useScrollLock` subpath so host chrome can
+ * join the counter; with LinkProvider it is one of only two behaviors that
+ * are. The rest of src/behaviors stays internal.
  */
 type ScrollLockOptions = {
     /** Which locking strategy to use. Default `'pin'`. */

package/bin/rift-ds.mjs

@@ -42,6 +42,9 @@
  * the disk: a skill name is one kebab-case folder, a file is a plain
  * relative path, and nothing may climb out of the target folder.
  *
+ * A bin and never an exports subpath: nothing imports it, and build-package.mjs
+ * ships it as dist/bin/<BIN_NAME>.mjs.
+ *
  * Zero dependencies by design: global fetch plus node:fs, so npx never
  * installs anything beyond the package itself. SITE_ORIGIN, SKILL_NAME,
  * MCP_SERVER_NAME and PACKAGE_NAME are stamped by build-package.mjs from

package/chat/ChatWidget.css

@@ -189,7 +189,7 @@
   font-weight: var(--font-sub-display-weight);
   line-height: var(--font-sub-display-line-height);
   letter-spacing: var(--font-sub-display-letter-spacing);
-  color: var(--color-text-primary);
+  color: var(--color-text-display);
 }
 
 /* The panel is a viewport of its own. tokens-typography.css collapses
@@ -562,7 +562,7 @@
   flex: none;
   display: flex;
   min-height: 0;
-  border-right: var(--border-025) solid var(--color-bg-container-border);
+  border-inline-end: var(--border-025) solid var(--color-bg-container-border);
 }
 
 /* The sheet layer: hidden entirely (visibility) while closed, so nothing in
@@ -604,13 +604,13 @@
   position: absolute;
   top: 0;
   bottom: 0;
-  left: 0;
+  inset-inline-start: 0;
   display: flex;
   background-color: var(--color-bg-glass);
   backdrop-filter: blur(24px);
-  border-right: var(--border-025) solid var(--color-bg-container-border);
+  border-inline-end: var(--border-025) solid var(--color-bg-container-border);
   box-shadow: var(--shadow-floating);
-  transform: translateX(-100%);
+  transform: translateX(calc(-100% * var(--ds-inline-sign, 1)));
   transition: transform var(--motion-duration-slow) var(--motion-ease-emphasized);
 }
 
@@ -655,7 +655,7 @@
   /* Before the first measurement there is no number to glide to, so the
      rail simply takes its content's width. */
   width: var(--ds-chat-aside-width, max-content);
-  margin-right: var(--padding-500);
+  margin-inline-end: var(--padding-500);
   opacity: 1;
   visibility: visible;
   transition:
@@ -728,7 +728,7 @@
 
 .ds-chat-widget__artifact-rail--open {
   flex-grow: 1.2;
-  margin-right: var(--padding-500);
+  margin-inline-end: var(--padding-500);
   opacity: 1;
   visibility: visible;
   transition:
@@ -798,7 +798,7 @@
   position: absolute;
   top: 0;
   bottom: 0;
-  left: -10px;
+  inset-inline-start: -10px;
   width: 20px;
 }
 
@@ -806,7 +806,7 @@
   content: "";
   position: absolute;
   top: calc(50% - 24px);
-  left: -2px;
+  inset-inline-start: -2px;
   width: 4px;
   height: 48px;
   border-radius: var(--radius-pill);
@@ -833,7 +833,7 @@
 
 .ds-chat-widget__rails[data-artifact-expanded] > .ds-chat-widget__artifact-rail--open {
   flex: 1 1 0;
-  margin-left: var(--padding-500);
+  margin-inline-start: var(--padding-500);
 }
 
 /* The sheet runs nearly the widget's height: a preview has no natural
@@ -859,7 +859,7 @@
 .ds-chat-widget__rail-actions {
   position: absolute;
   top: calc(var(--padding-200) + var(--padding-150));
-  right: var(--padding-500);
+  inset-inline-end: var(--padding-500);
   z-index: 6;
   display: flex;
   align-items: center;
@@ -925,7 +925,7 @@
   top: var(--ds-chat-inset);
   /* Placed from the left on both docks, so one property carries every move
      the card makes and they all glide. */
-  left: calc(100% - var(--ds-chat-width) - var(--ds-chat-inset));
+  left: calc(100% - var(--ds-chat-width) - var(--ds-chat-inset)); /* ds-allow(physical): the panel is placed on a dock the visitor picks by screen edge (src/chat/placement.ts), not by reading direction */
   height: calc(100dvh - var(--ds-chat-inset) * 2);
   width: var(--ds-chat-width);
   max-width: calc(100vw - var(--ds-chat-inset) * 2);
@@ -992,7 +992,7 @@ html[data-chat-resizing] .ds-chat-launcher__panel {
 
 /* The left dock: the same card on the other edge. */
 .ds-chat-launcher__panel--left {
-  left: var(--ds-chat-inset);
+  left: var(--ds-chat-inset); /* ds-allow(physical): the left dock is the screen's left edge */
 }
 
 /* Fullscreen view: a true viewport takeover. The stronger blur keeps the
@@ -1000,7 +1000,7 @@ html[data-chat-resizing] .ds-chat-launcher__panel {
    border fades rather than vanishing, so the geometry never snaps mid-glide. */
 .ds-chat-launcher__panel--full {
   top: 0;
-  left: 0;
+  left: 0; /* ds-allow(physical): fullscreen covers the viewport from its corner */
   height: 100dvh;
   width: 100vw;
   max-width: 100vw;
@@ -1032,7 +1032,7 @@ html[data-chat-resizing] .ds-chat-launcher__panel {
   position: fixed;
   top: var(--ds-chat-inset);
   height: calc(100dvh - var(--ds-chat-inset) * 2);
-  right: calc(var(--ds-chat-inset) + var(--ds-chat-width) - 10px);
+  right: calc(var(--ds-chat-inset) + var(--ds-chat-width) - 10px); /* ds-allow(physical): the dock grip tracks the docked card's screen edge */
   width: 20px;
   display: flex;
   align-items: center;
@@ -1044,7 +1044,7 @@ html[data-chat-resizing] .ds-chat-launcher__panel {
 
 .ds-chat-launcher__dock-handle--left {
   right: auto;
-  left: calc(var(--ds-chat-inset) + var(--ds-chat-width) - 10px);
+  left: calc(var(--ds-chat-inset) + var(--ds-chat-width) - 10px); /* ds-allow(physical): the dock grip tracks the docked card's screen edge */
 }
 
 .ds-chat-launcher__dock-handle::after {
@@ -1089,7 +1089,7 @@ html[data-chat-resizing] .ds-chat-launcher__panel {
     calc(100dvh - var(--ds-chat-inset) * 2)
   );
   top: var(--ds-chat-float-y, calc(100dvh - var(--ds-chat-float-h) - var(--ds-chat-inset)));
-  left: var(--ds-chat-float-x, calc(100% - var(--ds-chat-width) - var(--ds-chat-inset)));
+  left: var(--ds-chat-float-x, calc(100% - var(--ds-chat-width) - var(--ds-chat-inset))); /* ds-allow(physical): the floating card sits where the visitor dragged it, in screen pixels */
   width: var(--ds-chat-float-w, var(--ds-chat-width));
   height: var(--ds-chat-float-h);
   max-height: 100dvh;
@@ -1125,8 +1125,8 @@ html[data-chat-resizing] .ds-chat-launcher__panel {
 
 .ds-chat-launcher__float-grip[data-dir="n"] { top: 0; }
 .ds-chat-launcher__float-grip[data-dir="s"] { bottom: 0; }
-.ds-chat-launcher__float-grip[data-dir="e"] { right: 0; }
-.ds-chat-launcher__float-grip[data-dir="w"] { left: 0; }
+.ds-chat-launcher__float-grip[data-dir="e"] { right: 0; } /* ds-allow(physical): a compass grip resizes the floating card toward that screen edge */
+.ds-chat-launcher__float-grip[data-dir="w"] { left: 0; } /* ds-allow(physical): a compass grip resizes the floating card toward that screen edge */
 
 .ds-chat-launcher__float-grip[data-dir="ne"],
 .ds-chat-launcher__float-grip[data-dir="nw"],
@@ -1136,10 +1136,10 @@ html[data-chat-resizing] .ds-chat-launcher__panel {
   height: 16px;
 }
 
-.ds-chat-launcher__float-grip[data-dir="ne"] { top: 0; right: 0; cursor: nesw-resize; }
-.ds-chat-launcher__float-grip[data-dir="sw"] { bottom: 0; left: 0; cursor: nesw-resize; }
-.ds-chat-launcher__float-grip[data-dir="nw"] { top: 0; left: 0; cursor: nwse-resize; }
-.ds-chat-launcher__float-grip[data-dir="se"] { bottom: 0; right: 0; cursor: nwse-resize; }
+.ds-chat-launcher__float-grip[data-dir="ne"] { top: 0; right: 0; cursor: nesw-resize; } /* ds-allow(physical): a compass grip resizes the floating card toward that screen corner */
+.ds-chat-launcher__float-grip[data-dir="sw"] { bottom: 0; left: 0; cursor: nesw-resize; } /* ds-allow(physical): a compass grip resizes the floating card toward that screen corner */
+.ds-chat-launcher__float-grip[data-dir="nw"] { top: 0; left: 0; cursor: nwse-resize; } /* ds-allow(physical): a compass grip resizes the floating card toward that screen corner */
+.ds-chat-launcher__float-grip[data-dir="se"] { bottom: 0; right: 0; cursor: nwse-resize; } /* ds-allow(physical): a compass grip resizes the floating card toward that screen corner */
 
 .ds-chat-launcher__float-grip[data-dir="n"]::after,
 .ds-chat-launcher__float-grip[data-dir="s"]::after,
@@ -1209,7 +1209,7 @@ html[data-chat-resizing] .ds-chat-launcher__panel--floating .ds-chat-header {
 
 .ds-chat-launcher__fab {
   position: fixed;
-  right: var(--ds-chat-inset);
+  right: var(--ds-chat-inset); /* ds-allow(physical): the launcher sits in the corner the default dock opens from, a screen corner like the docks */
   bottom: var(--ds-chat-inset);
   z-index: var(--layer-chat-launcher);
 }

package/chat/ChatWidget.js

@@ -32,6 +32,8 @@ import { ReplyBody } from "./TurnQuestion.js";
 import { ResponseActionsLabelsContext } from "./ResponseActions.js";
 import { FollowupSuggestionsLabelContext } from "./FollowupSuggestions.js";
 import "./ChatWidget.css";
+import "../behaviors/direction.css";
+import { inlineSign } from "../behaviors/direction.js";
 const DEFAULT_MAX_ATTACHMENTS = 10;
 const DEFAULT_MAX_ATTACHMENT_BYTES = 50 * 1024 * 1024;
 const LONG_PASTE_CHARS = 1200;
@@ -287,14 +289,14 @@ function ChatWidget({
     if (!rail || !column) return;
     const width = rail.getBoundingClientRect().width;
     const spare = column.getBoundingClientRect().width - ARTIFACT_MIN_COLUMN_WIDTH;
-    artifactDragRef.current = { startX: e.clientX, width, max: width + Math.max(0, spare), next: width };
+    artifactDragRef.current = { startX: e.clientX, width, max: width + Math.max(0, spare), next: width, sign: inlineSign(rail) };
     e.currentTarget.setPointerCapture(e.pointerId);
     setArtifactResizing(true);
   };
   const moveArtifactResize = (e) => {
     const drag = artifactDragRef.current;
     if (!drag) return;
-    const grown = drag.width - (e.clientX - drag.startX);
+    const grown = drag.width - (e.clientX - drag.startX) * drag.sign;
     drag.next = Math.round(Math.min(drag.max, Math.max(ARTIFACT_MIN_COLUMN_WIDTH, grown)));
     railsHostRef.current?.style.setProperty("--ds-chat-artifact-width", `${drag.next}px`);
   };

package/chat/suggestions.d.ts

@@ -16,6 +16,18 @@
  *
  * Every producer of a suggestion checks against it. A suggestion that will
  * not fit is dropped, never truncated: half a question is not a question.
+ *
+ * The FAB summary panel's chips render through the same row, so they share
+ * the budget too. It lives in the package rather than the site so every
+ * consumer's chat holds the same line. The enforcement points: the
+ * follow-ups model is told the number in its prompt (server.ts), the
+ * follow-ups route drops a long one rather than clipping it, and the
+ * options of a question the agent asks are held to it as well (the
+ * `ask_user` input schema tells the model the number, and
+ * `sanitizeQuestionSet` in questions.ts drops a question whose option
+ * outruns it). Written copy is a build check: validate-chat-starters.mjs
+ * holds the starters, follow-ups and the demo script's question options,
+ * and validate-page-summaries.mjs the summary panel's chips.
  */
 export declare const SUGGESTION_MAX_CHARS = 40;
 /** Whether a suggestion label is one the chip row can actually show. */

package/components/Accordion/Accordion.css

@@ -43,7 +43,7 @@
   background: none;
   border: none;
   cursor: pointer;
-  text-align: left;
+  text-align: start;
   transition: background-color var(--motion-duration-fast) var(--motion-ease-standard);
 }
 

package/components/AgentPlan/AgentPlan.css

@@ -34,7 +34,7 @@
   padding: var(--padding-200) var(--padding-500);
   background: none;
   border: none;
-  text-align: left;
+  text-align: start;
   cursor: pointer;
   transition: background-color var(--motion-duration-fast) var(--motion-ease-standard);
 }
@@ -141,7 +141,7 @@
   position: absolute;
   top: calc(var(--padding-100) + var(--icon-size-500));
   bottom: calc(-1 * var(--padding-100));
-  left: calc(var(--icon-size-500) / 2);
+  inset-inline-start: calc(var(--icon-size-500) / 2);
   width: var(--border-025);
   background-color: var(--color-divider);
 }

package/components/AgentRail/AgentRail.css

@@ -53,7 +53,7 @@
      `--ds-agent-rail-collapse-top` is the seat, which a host overrides to
      line the chevron up with its own header row. */
   top: var(--ds-agent-rail-collapse-top, var(--padding-300));
-  left: var(--padding-300);
+  inset-inline-start: var(--padding-300);
   z-index: 1;
   display: inline-flex;
   align-items: center;
@@ -77,8 +77,8 @@
    way out usually sits. The host that asks for it has decided its controls
    and this one do not collide. */
 .ds-agent-rail__collapse--close {
-  left: auto;
-  right: var(--padding-300);
+  inset-inline-start: auto;
+  inset-inline-end: var(--padding-300);
 }
 
 .ds-agent-rail__collapse .material-symbols-rounded {
@@ -146,7 +146,7 @@
      annotate. The offset puts the circle's centre roughly on the portrait's
      45-degree point, so it straddles the edge the way a badge should and the
      glyph underneath stays whole. */
-  right: -6px;
+  inset-inline-end: -6px;
   bottom: -6px;
   display: inline-flex;
   align-items: center;

package/components/AgentRail/AgentRail.js

@@ -37,7 +37,7 @@ const AgentRail = React.forwardRef(
           className: `${baseClass}__collapse${collapseVariant === "close" ? ` ${baseClass}__collapse--close` : ""}`,
           "aria-label": collapseLabel,
           onClick: onCollapse,
-          children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", "aria-hidden": "true", children: collapseVariant === "close" ? "close" : "chevron_right" })
+          children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded ds-mirror-rtl", "aria-hidden": "true", children: collapseVariant === "close" ? "close" : "chevron_right" })
         }
       ),
       profile && /* @__PURE__ */ jsxs("header", { className: `${baseClass}__header`, children: [

package/components/AgentStatus/AgentStatus.css

@@ -97,7 +97,7 @@
 
 .ds-agent-status__label-text--out {
   position: absolute;
-  left: 0;
+  inset-inline-start: 0;
   top: 0;
   white-space: nowrap;
   animation: ds-agent-label-out var(--motion-duration-slow) var(--motion-ease-standard) both;

package/components/AiButton/AiButton.css

@@ -398,7 +398,7 @@
 .ds-ai-button__request {
   position: fixed;
   top: 0;
-  left: 0;
+  left: 0; /* ds-allow(physical): closed, the panel rests at the viewport corner the anchored behaviour then places it from, in screen pixels */
   z-index: 1;
   /* Component-local lengths, chosen by eye like the button's glow: a
      readable measure, capped so a phone viewport keeps its margins. */
@@ -620,7 +620,7 @@
 .ds-ai-button__summary-dismiss {
   position: absolute;
   top: var(--gap-200);
-  right: var(--gap-200);
+  inset-inline-end: var(--gap-200);
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -649,7 +649,7 @@
   align-items: baseline;
   gap: var(--gap-200);
   /* Keeps the row clear of the dismiss button in the corner. */
-  padding-right: var(--gap-1000);
+  padding-inline-end: var(--gap-1000);
 }
 
 .ds-ai-button__summary-overline {
@@ -672,7 +672,7 @@
 
 .ds-ai-button__summary-title {
   /* Long titles wrap short of the dismiss corner. */
-  padding-right: var(--gap-500);
+  padding-inline-end: var(--gap-500);
   font-family: var(--font-family-primary);
   font-size: var(--font-title-body-size);
   font-weight: var(--font-title-body-weight);