rift-ds 1.0.0

package/components/Meter/Meter.d.ts

@@ -0,0 +1,36 @@
+import { default as React } from 'react';
+/** Props owned by Meter itself — everything else falls through to the root node. */
+type MeterOwnProps = {
+    /** Current level */
+    value?: number;
+    /** Lower bound of the range */
+    min?: number;
+    /** Upper bound of the range */
+    max?: number;
+    /** Visible label naming what is measured, doubling as the accessible name */
+    label?: string;
+    /** Shows the value readout on the trailing edge of the label row */
+    showValue?: boolean;
+    /** Readout override — replaces the default percentage, spoken via aria-valuetext */
+    valueText?: string;
+    /** Status role colouring the fill */
+    variant?: 'info' | 'positive' | 'warning' | 'error' | 'neutral';
+    /** Component size (bar height) */
+    size?: 'default' | 'compact';
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface MeterProps extends MeterOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof MeterOwnProps> {
+}
+/**
+ * Level indicator for a known quantity — storage used, tokens spent,
+ * password strength, battery left. The counterpart to ProgressBar, which
+ * shows a task moving toward completion; a Meter shows how full something
+ * is right now, and its status colour says whether that is good news.
+ *
+ * Purely presentational (no 'use client'), so it renders from a Server
+ * Component. Forwards a ref to the root element and spreads unrecognised
+ * props onto it.
+ */
+export declare const Meter: React.ForwardRefExoticComponent<MeterProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/Meter/Meter.js

@@ -0,0 +1,48 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React from "react";
+import "./Meter.css";
+const Meter = React.forwardRef(
+  ({
+    value = 0,
+    min = 0,
+    max = 100,
+    label,
+    showValue = false,
+    valueText,
+    variant = "info",
+    size = "default",
+    className = "",
+    "aria-label": ariaLabel,
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-meter";
+    const range = max - min;
+    const fraction = range > 0 ? Math.max(0, Math.min(1, (value - min) / range)) : 0;
+    const percent = Math.round(fraction * 100);
+    const readout = valueText ?? `${percent}%`;
+    const classes = [baseClass, `${baseClass}--${variant}`, `${baseClass}--${size}`, className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs("div", { ...rest, ref, className: classes, children: [
+      (label || showValue) && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header`, children: [
+        label && /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: label }),
+        showValue && /* @__PURE__ */ jsx("span", { className: `${baseClass}__value`, children: readout })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `${baseClass}__track`,
+          role: "meter",
+          "aria-valuenow": value,
+          "aria-valuemin": min,
+          "aria-valuemax": max,
+          "aria-valuetext": valueText,
+          "aria-label": ariaLabel ?? label ?? "Level",
+          children: /* @__PURE__ */ jsx("div", { className: `${baseClass}__fill`, style: { width: `${fraction * 100}%` } })
+        }
+      )
+    ] });
+  }
+);
+Meter.displayName = "Meter";
+export {
+  Meter
+};

package/components/ModelPicker/ModelPicker.css

@@ -0,0 +1,243 @@
+/* ============================================
+   MODEL PICKER COMPONENT
+   A quiet pill trigger showing the current
+   model, and a floating panel of models with
+   descriptions — plus an optional effort row.
+
+   Sized for Composer's action bar: the trigger
+   reads as chrome, not as a call to action, so
+   the send button keeps the only teal.
+   ============================================ */
+
+.ds-model-picker {
+  position: relative;
+  display: inline-flex;
+}
+
+/* ============================================
+   TRIGGER
+   ============================================ */
+
+.ds-model-picker__trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-050);
+  /* CircularButton's 40px, so the pill and the composer's round icon
+     buttons read as one row of equals — same height, same resting shape. */
+  height: 40px;
+  padding: 0 var(--padding-400);
+  background-color: var(--color-action-passive-bg);
+  border: none;
+  border-radius: var(--radius-pill);
+  cursor: pointer;
+  color: var(--color-text-secondary);
+  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);
+  transition: background-color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-model-picker__trigger:hover {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-model-picker__trigger:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+}
+
+.ds-model-picker__trigger:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.ds-model-picker__trigger-label {
+  white-space: nowrap;
+}
+
+.ds-model-picker__chevron {
+  --icon-size: var(--icon-size-500);
+
+  color: var(--color-icon-secondary);
+  transition: transform var(--motion-duration-slow) var(--motion-ease-standard);
+}
+
+.ds-model-picker--open .ds-model-picker__chevron {
+  transform: rotate(180deg);
+}
+
+/* ============================================
+   PANEL
+   ============================================ */
+
+.ds-model-picker__panel {
+  position: absolute;
+  left: 0;
+  z-index: 10;
+  min-width: 260px;
+  display: flex;
+  flex-direction: column;
+  /* Page background, not container: the container fill is semi-transparent
+     in dark mode, and a floating panel must not show text through itself */
+  background-color: var(--color-bg-page-primary);
+  border: var(--border-025) solid var(--color-bg-container-border);
+  border-radius: var(--radius-300);
+  box-shadow: var(--shadow-floating);
+  overflow: hidden;
+}
+
+.ds-model-picker--bottom .ds-model-picker__panel {
+  top: calc(100% + var(--gap-050));
+}
+
+.ds-model-picker--top .ds-model-picker__panel {
+  bottom: calc(100% + var(--gap-050));
+}
+
+/* ============================================
+   MODEL LIST
+   ============================================ */
+
+.ds-model-picker__list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-050);
+  margin: 0;
+  padding: var(--padding-100);
+  list-style: none;
+}
+
+.ds-model-picker__option {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-200);
+  padding: var(--padding-100) var(--padding-200);
+  border-radius: var(--radius-200);
+  cursor: pointer;
+  transition: background-color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-model-picker__option:hover,
+.ds-model-picker__option--focused {
+  background-color: var(--color-bg-container-secondary);
+}
+
+.ds-model-picker__option--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.ds-model-picker__option--disabled:hover {
+  background-color: transparent;
+}
+
+.ds-model-picker__option-main {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.ds-model-picker__option-label {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-100);
+  color: var(--color-text-primary);
+  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);
+}
+
+.ds-model-picker__option-badge {
+  padding: 0 var(--padding-150);
+  background-color: var(--color-status-info-bg);
+  border-radius: var(--radius-pill);
+  color: var(--color-status-info-text);
+  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);
+}
+
+.ds-model-picker__option-description {
+  color: var(--color-text-tertiary);
+  font-family: var(--font-paragraph-sm-family);
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-paragraph-sm-weight);
+  line-height: var(--font-paragraph-sm-line-height);
+  letter-spacing: var(--font-paragraph-sm-letter-spacing);
+}
+
+.ds-model-picker__check {
+  --icon-size: var(--icon-size-500);
+
+  flex: none;
+  color: var(--color-action-primary-text-tertiary);
+}
+
+/* ============================================
+   EFFORT ROW
+   ============================================ */
+
+.ds-model-picker__effort {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-200);
+  padding: var(--padding-150) var(--padding-200);
+  border-top: var(--border-025) solid var(--color-divider);
+}
+
+.ds-model-picker__effort-label {
+  flex: 1 1 auto;
+  color: var(--color-text-secondary);
+  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);
+}
+
+.ds-model-picker__effort-options {
+  display: inline-flex;
+  gap: var(--gap-050);
+  padding: var(--padding-050);
+  background-color: var(--color-bg-container-secondary);
+  border-radius: var(--radius-pill);
+}
+
+.ds-model-picker__effort-option {
+  padding: var(--padding-050) var(--padding-200);
+  background: none;
+  border: none;
+  border-radius: var(--radius-pill);
+  cursor: pointer;
+  color: var(--color-text-secondary);
+  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);
+  transition:
+    background-color var(--motion-duration-fast) var(--motion-ease-standard),
+    color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-model-picker__effort-option:hover {
+  color: var(--color-text-primary);
+}
+
+.ds-model-picker__effort-option:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: -2px;
+}
+
+.ds-model-picker__effort-option--selected {
+  background-color: var(--color-bg-container-primary);
+  color: var(--color-text-primary);
+  box-shadow: var(--shadow-floating);
+}

package/components/ModelPicker/ModelPicker.d.ts

@@ -0,0 +1,60 @@
+import { default as React } from 'react';
+export interface ModelPickerModel {
+    /** Display name, e.g. "Fable 5". */
+    label: string;
+    /** Stable identifier reported through `onValueChange`. */
+    value: string;
+    /** One line on what the model is good at or how fast it is. */
+    description?: string;
+    /** Small trailing tag, e.g. "New". */
+    badge?: string;
+    /** Whether this model can be chosen. */
+    disabled?: boolean;
+}
+export interface ModelPickerEffortOption {
+    /** Display label, e.g. "Medium". */
+    label: string;
+    /** Stable identifier reported through `onEffortChange`. */
+    value: string;
+}
+/** Props owned by ModelPicker itself — everything else falls through to the root element. */
+type ModelPickerOwnProps = {
+    /** The models on offer, in display order. */
+    models: ModelPickerModel[];
+    /** Selected model value for controlled use. Pair with `onValueChange`. */
+    value?: string;
+    /** Initially selected model value for uncontrolled use. Defaults to the first model. */
+    defaultValue?: string;
+    /** Fires with the newly selected model's value. */
+    onValueChange?: (value: string) => void;
+    /**
+     * Selected effort level for controlled use. Setting this (or `defaultEffort`)
+     * is what makes the effort row appear at all.
+     */
+    effort?: string;
+    /** Initially selected effort level for uncontrolled use. */
+    defaultEffort?: string;
+    /** Fires with the newly selected effort value. */
+    onEffortChange?: (effort: string) => void;
+    /** The effort levels on offer. Defaults to low, medium and high. */
+    effortOptions?: ModelPickerEffortOption[];
+    /** Which side of the trigger the panel opens on. In a composer pinned to the bottom of the screen, use `top`. */
+    placement?: 'bottom' | 'top';
+    /** Whether the whole control is disabled. */
+    disabled?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface ModelPickerProps extends ModelPickerOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof ModelPickerOwnProps> {
+}
+/**
+ * ModelPicker is the model selector for a chat surface: a quiet pill trigger
+ * showing the current model, and a floating panel listing every model with a
+ * one-line description — plus, when an effort value is provided, a row of
+ * effort levels below a divider.
+ *
+ * Built for Composer's `actions` slot, but freestanding anywhere. Forwards a
+ * ref to the root element and spreads unrecognised props onto it.
+ */
+export declare const ModelPicker: React.ForwardRefExoticComponent<ModelPickerProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/ModelPicker/ModelPicker.js

@@ -0,0 +1,261 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useId, useRef, useState, useCallback, useEffect } from "react";
+import "./ModelPicker.css";
+import "../../fonts/material-symbols.css";
+const DEFAULT_EFFORT_OPTIONS = [
+  { label: "Low", value: "low" },
+  { label: "Medium", value: "medium" },
+  { label: "High", value: "high" }
+];
+const ModelPicker = React.forwardRef(
+  ({
+    models,
+    value,
+    defaultValue,
+    onValueChange,
+    effort,
+    defaultEffort,
+    onEffortChange,
+    effortOptions = DEFAULT_EFFORT_OPTIONS,
+    placement = "bottom",
+    disabled = false,
+    className = "",
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-model-picker";
+    const id = useId();
+    const listboxId = `${id}-listbox`;
+    const rootRef = useRef(null);
+    const listRef = useRef(null);
+    const [isOpen, setIsOpen] = useState(false);
+    const [focusedIndex, setFocusedIndex] = useState(-1);
+    const isValueControlled = value !== void 0;
+    const [uncontrolledValue, setUncontrolledValue] = useState(
+      defaultValue ?? models[0]?.value
+    );
+    const currentValue = isValueControlled ? value : uncontrolledValue;
+    const isEffortControlled = effort !== void 0;
+    const [uncontrolledEffort, setUncontrolledEffort] = useState(defaultEffort);
+    const currentEffort = isEffortControlled ? effort : uncontrolledEffort;
+    const hasEffort = currentEffort !== void 0;
+    const setRootRef = (node) => {
+      rootRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    };
+    const selectedModel = models.find((m) => m.value === currentValue);
+    const selectModel = (modelValue) => {
+      if (!isValueControlled) setUncontrolledValue(modelValue);
+      onValueChange?.(modelValue);
+      setIsOpen(false);
+    };
+    const selectEffort = (effortValue) => {
+      if (!isEffortControlled) setUncontrolledEffort(effortValue);
+      onEffortChange?.(effortValue);
+    };
+    const handleClickOutside = useCallback((e) => {
+      if (rootRef.current && !rootRef.current.contains(e.target)) {
+        setIsOpen(false);
+      }
+    }, []);
+    useEffect(() => {
+      if (!isOpen) return;
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, [isOpen, handleClickOutside]);
+    const handleTriggerKeyDown = (e) => {
+      if (disabled) return;
+      switch (e.key) {
+        case "Enter":
+        case " ":
+          e.preventDefault();
+          if (isOpen && focusedIndex >= 0 && !models[focusedIndex]?.disabled) {
+            selectModel(models[focusedIndex].value);
+          } else {
+            setIsOpen((prev) => !prev);
+            setFocusedIndex(-1);
+          }
+          break;
+        case "ArrowDown":
+          e.preventDefault();
+          if (!isOpen) {
+            setIsOpen(true);
+          } else {
+            setFocusedIndex((prev) => {
+              let next = prev + 1;
+              while (next < models.length && models[next].disabled) next++;
+              return next < models.length ? next : prev;
+            });
+          }
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          if (isOpen) {
+            setFocusedIndex((prev) => {
+              let next = prev - 1;
+              while (next >= 0 && models[next].disabled) next--;
+              return next >= 0 ? next : prev;
+            });
+          }
+          break;
+        case "Home":
+          if (isOpen) {
+            e.preventDefault();
+            const first = models.findIndex((m) => !m.disabled);
+            if (first >= 0) setFocusedIndex(first);
+          }
+          break;
+        case "End":
+          if (isOpen) {
+            e.preventDefault();
+            let last = models.length - 1;
+            while (last >= 0 && models[last].disabled) last--;
+            if (last >= 0) setFocusedIndex(last);
+          }
+          break;
+        case "Escape":
+          setIsOpen(false);
+          break;
+      }
+    };
+    const handleEffortKeyDown = (e, index) => {
+      let targetIndex = -1;
+      switch (e.key) {
+        case "ArrowRight":
+        case "ArrowDown":
+          e.preventDefault();
+          targetIndex = (index + 1) % effortOptions.length;
+          break;
+        case "ArrowLeft":
+        case "ArrowUp":
+          e.preventDefault();
+          targetIndex = (index - 1 + effortOptions.length) % effortOptions.length;
+          break;
+      }
+      if (targetIndex >= 0) {
+        selectEffort(effortOptions[targetIndex].value);
+        document.getElementById(`${id}-effort-option-${targetIndex}`)?.focus();
+      }
+    };
+    useEffect(() => {
+      if (isOpen && focusedIndex >= 0 && listRef.current) {
+        const focusedEl = listRef.current.children[focusedIndex];
+        focusedEl?.scrollIntoView({ block: "nearest" });
+      }
+    }, [focusedIndex, isOpen]);
+    const activeOptionId = isOpen && focusedIndex >= 0 && models[focusedIndex] ? `${id}-option-${focusedIndex}` : void 0;
+    const checkedEffortIndex = effortOptions.findIndex((o) => o.value === currentEffort);
+    const effortTabStop = checkedEffortIndex >= 0 ? checkedEffortIndex : 0;
+    const classes = [
+      baseClass,
+      `${baseClass}--${placement}`,
+      isOpen ? `${baseClass}--open` : "",
+      disabled ? `${baseClass}--disabled` : "",
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs("div", { ...rest, ref: setRootRef, className: classes, children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: `${baseClass}__trigger`,
+          disabled,
+          "aria-expanded": isOpen,
+          "aria-haspopup": "listbox",
+          "aria-controls": isOpen ? listboxId : void 0,
+          "aria-activedescendant": activeOptionId,
+          "aria-label": rest["aria-label"] ?? "Choose a model",
+          onClick: () => {
+            setIsOpen((prev) => !prev);
+            setFocusedIndex(-1);
+          },
+          onKeyDown: handleTriggerKeyDown,
+          children: [
+            /* @__PURE__ */ jsx("span", { className: `${baseClass}__trigger-label`, children: selectedModel ? selectedModel.label : "Choose a model" }),
+            /* @__PURE__ */ jsx("span", { className: `${baseClass}__chevron material-symbols-rounded`, "aria-hidden": "true", children: "expand_more" })
+          ]
+        }
+      ),
+      isOpen && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__panel`, children: [
+        /* @__PURE__ */ jsx(
+          "ul",
+          {
+            className: `${baseClass}__list`,
+            role: "listbox",
+            id: listboxId,
+            ref: listRef,
+            "aria-label": "Model",
+            children: models.map((model, index) => /* @__PURE__ */ jsxs(
+              "li",
+              {
+                id: `${id}-option-${index}`,
+                className: [
+                  `${baseClass}__option`,
+                  model.value === currentValue ? `${baseClass}__option--selected` : "",
+                  model.disabled ? `${baseClass}__option--disabled` : "",
+                  index === focusedIndex ? `${baseClass}__option--focused` : ""
+                ].filter(Boolean).join(" "),
+                role: "option",
+                "aria-selected": model.value === currentValue,
+                "aria-disabled": model.disabled,
+                onClick: () => !model.disabled && selectModel(model.value),
+                children: [
+                  /* @__PURE__ */ jsxs("span", { className: `${baseClass}__option-main`, children: [
+                    /* @__PURE__ */ jsxs("span", { className: `${baseClass}__option-label`, children: [
+                      model.label,
+                      model.badge && /* @__PURE__ */ jsx("span", { className: `${baseClass}__option-badge`, children: model.badge })
+                    ] }),
+                    model.description && /* @__PURE__ */ jsx("span", { className: `${baseClass}__option-description`, children: model.description })
+                  ] }),
+                  model.value === currentValue && /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: `${baseClass}__check material-symbols-rounded`,
+                      "aria-hidden": "true",
+                      children: "check"
+                    }
+                  )
+                ]
+              },
+              model.value
+            ))
+          }
+        ),
+        hasEffort && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__effort`, children: [
+          /* @__PURE__ */ jsx("span", { className: `${baseClass}__effort-label`, id: `${id}-effort-label`, children: "Effort" }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `${baseClass}__effort-options`,
+              role: "radiogroup",
+              "aria-labelledby": `${id}-effort-label`,
+              children: effortOptions.map((option, index) => /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  id: `${id}-effort-option-${index}`,
+                  className: [
+                    `${baseClass}__effort-option`,
+                    option.value === currentEffort ? `${baseClass}__effort-option--selected` : ""
+                  ].filter(Boolean).join(" "),
+                  role: "radio",
+                  "aria-checked": option.value === currentEffort,
+                  tabIndex: index === effortTabStop ? 0 : -1,
+                  onClick: () => selectEffort(option.value),
+                  onKeyDown: (e) => handleEffortKeyDown(e, index),
+                  children: option.label
+                },
+                option.value
+              ))
+            }
+          )
+        ] })
+      ] })
+    ] });
+  }
+);
+ModelPicker.displayName = "ModelPicker";
+export {
+  ModelPicker
+};