rift-ds 1.2.0 → 1.4.0

package/components/Inspector/Inspector.css

@@ -4,7 +4,8 @@
    rails: each control is one bar with its name
    inside on the left and its state on the right.
    The form controls (Slider, Input, ToggleSwitch,
-   SegmentedControl, Dropdown) keep their label
+   SegmentedControl, Dropdown, ColorPicker) keep
+   their label
    above; these are their counterparts for a
    dense panel.
 
@@ -33,7 +34,8 @@
    default  8px + 24px line + 8px  = 40px, 20px sides, paragraph-emphasis
    compact  6px + 20px line + 6px  = 32px, 12px sides, paragraph-sm-emphasis */
 .ds-inspector-bar,
-.ds-inspector-dropdown {
+.ds-inspector-dropdown,
+.ds-inspector-color-picker {
   --ds-inspector-height: calc(2 * var(--padding-200) + var(--font-paragraph-emphasis-line-height));
   --ds-inspector-inset: var(--padding-500);
   --ds-inspector-font-family: var(--font-paragraph-emphasis-family);
@@ -45,7 +47,8 @@
 }
 
 .ds-inspector-bar--compact,
-.ds-inspector-dropdown--compact {
+.ds-inspector-dropdown--compact,
+.ds-inspector-color-picker--compact {
   --ds-inspector-height: calc(2 * var(--padding-150) + var(--font-paragraph-sm-emphasis-line-height));
   --ds-inspector-inset: var(--padding-300);
   --ds-inspector-font-family: var(--font-paragraph-sm-emphasis-family);
@@ -424,6 +427,108 @@
   color: var(--color-icon-secondary);
 }
 
+/* ============================================
+   COLOR PICKER — the library ColorPicker, dressed as a bar
+   ============================================ */
+
+.ds-inspector-color-picker {
+  position: relative;
+  min-width: 0;
+}
+
+/* The name rides over the trigger and lets clicks through, so the whole
+   bar opens the panel. The reading sits at the far end, so no room needs
+   reserving for the name the way the dropdown's left-aligned value does. */
+.ds-inspector-color-picker__label {
+  position: absolute;
+  top: calc(var(--ds-inspector-height) / 2);
+  left: var(--ds-inspector-inset);
+  z-index: 1;
+  transform: translateY(-50%);
+  white-space: nowrap;
+  font-family: var(--ds-inspector-font-family);
+  font-size: var(--ds-inspector-font-size);
+  font-weight: var(--ds-inspector-label-weight);
+  line-height: var(--ds-inspector-line-height);
+  letter-spacing: var(--ds-inspector-letter-spacing);
+  color: var(--color-text-primary);
+  pointer-events: none;
+}
+
+.ds-inspector-color-picker .ds-colorpicker {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+}
+
+/* The swatch is a circle one line tall, so its end inset is whatever
+   centres it in the bar: concentric with the pill's end cap. */
+.ds-inspector-color-picker .ds-colorpicker__trigger {
+  justify-content: flex-end;
+  gap: var(--gap-300);
+  width: 100%;
+  box-sizing: border-box;
+  height: var(--ds-inspector-height);
+  padding: 0 calc((var(--ds-inspector-height) - var(--ds-inspector-line-height)) / 2) 0
+    var(--ds-inspector-inset);
+  border-color: transparent;
+  border-radius: var(--radius-pill);
+  background: var(--color-action-passive-bg-hover);
+  transition: background-color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-inspector-color-picker .ds-colorpicker__trigger:hover:not(:disabled),
+.ds-inspector-color-picker .ds-colorpicker--open .ds-colorpicker__trigger {
+  border-color: transparent;
+  background: var(--color-action-neutral-bg-hover);
+}
+
+.ds-inspector-color-picker .ds-colorpicker__trigger:active:not(:disabled) {
+  background: var(--color-action-neutral-bg-active);
+}
+
+/* The trigger's selected-border focus becomes the family's ring. */
+.ds-inspector-color-picker .ds-colorpicker__trigger:focus-visible {
+  border-color: transparent;
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+}
+
+/* The reading comes before the swatch, so the colour sits at the bar's end
+   where the switch's track and the dropdown's chevron sit. */
+.ds-inspector-color-picker .ds-colorpicker__trigger-text {
+  order: -1;
+  padding-right: 0;
+  font-family: var(--ds-inspector-font-family);
+  font-size: var(--ds-inspector-font-size);
+  font-weight: var(--ds-inspector-value-weight);
+  line-height: var(--ds-inspector-line-height);
+  letter-spacing: var(--ds-inspector-letter-spacing);
+  color: var(--color-text-secondary);
+}
+
+.ds-inspector-color-picker .ds-colorpicker__trigger-swatch {
+  width: var(--ds-inspector-line-height);
+  height: var(--ds-inspector-line-height);
+  border-radius: var(--radius-pill);
+}
+
+/* The panel opens under the bar and spans it. */
+.ds-inspector-color-picker .ds-colorpicker__panel {
+  right: 0;
+  width: auto;
+}
+
+/* Disabled dims the whole bar, name included, rather than the trigger alone. */
+.ds-inspector-color-picker--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.ds-inspector-color-picker--disabled .ds-colorpicker__trigger {
+  opacity: 1;
+}
+
 /* ============================================
    SECTION — a collapsible, titled run of controls
    ============================================ */

package/components/Inspector/InspectorColorPicker.d.ts

@@ -0,0 +1,43 @@
+import { default as React } from 'react';
+/** Props owned by InspectorColorPicker itself — everything else falls through to the wrapper. */
+type InspectorColorPickerOwnProps = {
+    /** The setting's name, drawn inside the bar on the left. Also the start of the trigger's accessible name. */
+    label: string;
+    /** Current colour as a hex string — 3, 6 or 8 digit, with or without `#`. */
+    value?: string;
+    /** Initial colour for uncontrolled use. */
+    defaultValue?: string;
+    /**
+     * Called with the colour as an uppercase hex string (`#RRGGBB`, or
+     * `#RRGGBBAA` when `showAlpha` and alpha is below 100%). Fires live while
+     * dragging, as in ColorPicker.
+     */
+    onValueChange?: (value: string) => void;
+    /** Add an alpha (opacity) slider to the panel and emit 8-digit hex when alpha is below 100%. */
+    showAlpha?: boolean;
+    /** When set, a hidden input carries the current hex under this name, so the picker joins native form submission. */
+    name?: string;
+    /** Whether the picker is disabled. */
+    disabled?: boolean;
+    /** Component size, matching Button: `default` is 40px tall, `compact` 32px. */
+    size?: 'default' | 'compact';
+    /** Additional CSS classes, applied to the wrapper. */
+    className?: string;
+};
+export interface InspectorColorPickerProps extends InspectorColorPickerOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof InspectorColorPickerOwnProps | 'onChange' | 'defaultValue'> {
+}
+/**
+ * A one-row colour setting for inspector panels: the name on the left, the
+ * hex reading and a round swatch at the bar's end. It is the library
+ * ColorPicker with its trigger dressed as an inspector bar, so the panel,
+ * its saturation area, hue and alpha sliders and hex field are
+ * ColorPicker's own. The form counterpart, with a label above and helper
+ * text below, is ColorPicker itself.
+ *
+ * The whole bar is the trigger: the name is an overlay that lets clicks
+ * through, and the trigger is named by the name followed by the hex reading
+ * ("Tint colour #163300"). Forwards a ref to the wrapper and spreads
+ * unrecognised props onto it.
+ */
+export declare const InspectorColorPicker: React.ForwardRefExoticComponent<InspectorColorPickerProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/Inspector/InspectorColorPicker.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import React from "react";
+import { ColorPicker } from "../ColorPicker/ColorPicker.js";
+import "./Inspector.css";
+const InspectorColorPicker = React.forwardRef(
+  ({
+    label,
+    value,
+    defaultValue,
+    onValueChange,
+    showAlpha = false,
+    name,
+    disabled = false,
+    size = "default",
+    className = "",
+    ...rest
+  }, ref) => {
+    const baseId = React.useId();
+    const labelId = `${baseId}-label`;
+    const triggerId = `${baseId}-trigger`;
+    const classes = [
+      "ds-inspector-color-picker",
+      size === "compact" ? "ds-inspector-color-picker--compact" : "",
+      disabled ? "ds-inspector-color-picker--disabled" : "",
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs("div", { ...rest, ref, className: classes, children: [
+      /* @__PURE__ */ jsx("span", { id: labelId, className: "ds-inspector-color-picker__label", "aria-hidden": "true", children: label }),
+      /* @__PURE__ */ jsx(
+        ColorPicker,
+        {
+          id: triggerId,
+          "aria-labelledby": `${labelId} ${triggerId}-value`,
+          size,
+          value,
+          defaultValue,
+          onValueChange,
+          showAlpha,
+          showText: true,
+          name,
+          disabled
+        }
+      )
+    ] });
+  }
+);
+InspectorColorPicker.displayName = "InspectorColorPicker";
+export {
+  InspectorColorPicker
+};

package/components/Instructions/Instructions.css

@@ -64,14 +64,14 @@
   width: 32px;
   height: 32px;
   border-radius: var(--radius-pill);
-  border: var(--border-025) solid var(--color-action-primary-border);
+  border: var(--border-025) solid var(--color-bg-container-border);
   background-color: transparent;
   flex-shrink: 0;
 }
 
 .ds-instructions__badge .material-symbols-rounded {
   --icon-size: var(--icon-size-600);
-  color: var(--color-action-primary-bg);
+  color: var(--color-icon-primary);
 }
 
 .ds-instructions__number {
@@ -79,14 +79,14 @@
   font-size: var(--font-paragraph-sm-size);
   font-weight: var(--font-title-body-weight);
   line-height: 1;
-  color: var(--color-action-primary-bg);
+  color: var(--color-text-secondary);
 }
 
 .ds-instructions__dot {
   width: 8px;
   height: 8px;
   border-radius: var(--radius-pill);
-  background-color: var(--color-action-primary-bg);
+  background-color: var(--color-icon-primary);
 }
 
 .ds-instructions__connector {

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/Prose/Prose.css

@@ -173,6 +173,33 @@
   font-size: inherit;
 }
 
+/* A renderer that maps fenced code to CodeBlock (for its copy button)
+   gets the same block rhythm, and the plain-pre panel and inline-code
+   chip step aside so CodeBlock's own chrome is the only chrome */
+.ds-prose .ds-code-block {
+  margin: 0;
+  margin-block-end: var(--gap-400);
+}
+
+.ds-prose > .ds-code-block:last-child {
+  margin-block-end: 0;
+}
+
+.ds-prose .ds-code-block pre {
+  margin: 0;
+  padding: var(--padding-400);
+  overflow: auto;
+  background-color: transparent;
+  border: none;
+  border-radius: 0;
+}
+
+.ds-prose .ds-code-block code {
+  background-color: transparent;
+  border-radius: 0;
+  padding-inline: 0;
+}
+
 /* ============================================
    BLOCKQUOTES
    Mirrors Reasoning's trace rail

package/components/Sparkline/Sparkline.css

@@ -12,7 +12,7 @@
   display: inline-block;
   vertical-align: middle;
   flex-shrink: 0;
-  color: var(--color-action-primary-bg);
+  color: var(--color-chart-series-1);
 }
 
 /* Parts */
@@ -60,7 +60,7 @@
 /* Tones */
 
 .ds-sparkline--accent {
-  color: var(--color-action-primary-bg);
+  color: var(--color-chart-series-1);
 }
 
 .ds-sparkline--positive {

package/components/Spinner/Spinner.css

@@ -52,7 +52,7 @@
    ============================================ */
 
 .ds-spinner--primary .ds-spinner__arc {
-  stroke: var(--color-action-primary-bg);
+  stroke: var(--color-text-primary);
 }
 
 .ds-spinner--neutral .ds-spinner__arc {

package/components/Timeline/Timeline.css

@@ -331,7 +331,7 @@
 }
 
 .ds-timeline__role-bullets a {
-  color: var(--color-action-primary-bg);
+  color: var(--color-action-primary-text-tertiary);
   font-weight: var(--font-paragraph-emphasis-weight);
   text-decoration: underline;
   text-decoration-color: transparent;