@teamofsilicons/silicon-ui 0.0.0-stage → 0.2.0

package/components/chat-thread/chat-thread.module.css

@@ -0,0 +1,242 @@
+.root {
+  display: flex;
+  height: 100%;
+  min-height: 0;
+  flex-direction: column;
+  color: var(--foreground);
+  font-family: var(--font-body);
+  font-size: var(--text-sm);
+  letter-spacing: var(--tracking-body);
+  line-height: var(--leading-body);
+}
+
+.viewport { position: relative; display: flex; min-height: 0; flex: 1; flex-direction: column; }
+.scroller { min-height: 0; flex: 1; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-gutter: stable; }
+/* The content springs up from where it was when the thread grows; the clip keeps that travel out of the scroll range. */
+.track { overflow: clip; }
+.content { padding: 12px 16px 14px; will-change: transform; }
+
+.list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
+
+.day { display: flex; align-items: center; gap: 12px; padding: 20px 4px 4px; color: var(--text-muted); font-size: var(--text-xs); font-weight: 500; }
+.day::before, .day::after { height: 1px; flex: 1; background: var(--border-subtle); content: ""; }
+.day:first-child { padding-top: 4px; }
+.day > span:empty::before { content: "\00a0"; }
+
+.row { position: relative; display: flex; align-items: flex-end; gap: 8px; margin-top: 2px; }
+.row[data-first] { margin-top: 14px; }
+.day + .row { margin-top: 10px; }
+.row[data-mine] { justify-content: flex-end; }
+
+.gutter { width: 28px; flex: none; align-self: flex-end; }
+.stack { display: flex; min-width: 0; max-width: min(78%, 34rem); flex-direction: column; align-items: flex-start; gap: 4px; }
+.row[data-mine] .stack { align-items: flex-end; }
+
+.meta { display: flex; align-items: baseline; gap: 6px; margin: 0 0 2px; padding: 0 12px; color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
+.author { color: var(--text-secondary); font-weight: 500; }
+
+.line { position: relative; display: flex; max-width: 100%; align-items: center; gap: 6px; }
+/* The author's face sits in the gutter, level with the bottom of their last bubble rather than the reactions under it. */
+.face { position: absolute; bottom: 0; left: -36px; display: flex; }
+.row[data-mine] .line { flex-direction: row-reverse; }
+.parts { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: 4px; }
+.row[data-mine] .parts { align-items: flex-end; }
+
+/* Bubbles in a group share a soft edge on the author's side, so a run of messages reads as one voice. */
+.bubble {
+  --r: 18px;
+  --tight: 6px;
+  max-width: 100%;
+  padding: 8px 13px 9px;
+  border-radius: var(--r);
+  background: var(--surface-muted);
+  color: var(--foreground);
+  font-size: var(--text-sm);
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+}
+.row:not([data-mine]):not([data-first]) .bubble { border-top-left-radius: var(--tight); }
+.row:not([data-mine]):not([data-last]) .bubble { border-bottom-left-radius: var(--tight); }
+.row[data-mine] .bubble { background: var(--accent); color: var(--accent-foreground); }
+:global(:root[data-theme="dark"]) .row:not([data-mine]) .bubble { background: var(--surface-raised); }
+.row[data-mine]:not([data-first]) .bubble { border-top-right-radius: var(--tight); }
+.row[data-mine]:not([data-last]) .bubble { border-bottom-right-radius: var(--tight); }
+.row[data-failed] .bubble { opacity: .6; }
+
+.gallery { display: grid; width: min(240px, 100%); gap: 3px; grid-template-columns: 1fr; }
+.gallery[data-count="2"],
+.gallery[data-count="3"],
+.gallery[data-count="4"] { grid-template-columns: 1fr 1fr; }
+.gallery[data-count="3"] > :first-child { grid-column: span 2; aspect-ratio: 2 / 1; }
+.image { position: relative; display: block; overflow: hidden; aspect-ratio: 1; border-radius: var(--radius-control); corner-shape: var(--corner-shape); background: var(--surface-muted); }
+.gallery[data-count="1"] .image { aspect-ratio: 4 / 3; }
+.gallery:not([data-count="1"]) .image { border-radius: var(--radius-detail); corner-shape: var(--corner-shape); }
+.gallery:not([data-count="1"]) { overflow: hidden; border-radius: var(--radius-control); corner-shape: var(--corner-shape); }
+.image img { display: block; width: 100%; height: 100%; object-fit: cover; }
+.more { position: absolute; inset: 0; display: grid; place-items: center; background: oklch(0% 0 0 / .45); color: #fff; font-size: var(--text-lg); font-weight: 500; }
+
+.file {
+  display: flex; max-width: 100%; align-items: center; gap: 10px; padding: 9px 14px 9px 11px;
+  border: 1px solid var(--border); border-radius: var(--radius-control); corner-shape: var(--corner-shape); background: var(--surface); color: var(--foreground); text-decoration: none;
+  transition: background-color var(--duration-fast) var(--ease-standard);
+}
+.file > svg { flex: none; color: var(--text-secondary); }
+.fileText { display: grid; min-width: 0; }
+.fileName { overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
+.fileSize { color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
+@media (hover: hover) and (pointer: fine) { .file:hover { background: var(--surface-muted); } }
+
+/* The reaction button waits beside the bubble and shows on hover or keyboard focus. */
+/* The picker positions against the whole line, so it opens over the bubble and stays inside the thread. */
+.pickerWrap { position: static; flex: none; }
+.reactButton {
+  display: grid; width: 28px; height: 28px; place-items: center; padding: 0;
+  border: 0; border-radius: var(--radius-full); corner-shape: round; background: transparent; color: var(--text-muted); cursor: pointer; opacity: 0;
+  -webkit-tap-highlight-color: transparent;
+  transition: opacity var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
+}
+.row:hover .reactButton,
+.row:focus-within .reactButton,
+.pickerWrap[data-open] .reactButton { opacity: 1; }
+.pickerWrap[data-open] .reactButton { background: var(--surface-muted); color: var(--foreground); }
+@media (hover: hover) and (pointer: fine) { .reactButton:hover { background: var(--surface-muted); color: var(--foreground); } }
+@media (hover: none) { .reactButton { opacity: .7; } }
+
+.picker {
+  position: absolute; z-index: 5; bottom: calc(100% + 6px); right: -4px;
+  display: flex; gap: 2px; padding: 4px;
+  border: 1px solid var(--border); border-radius: var(--radius-full); corner-shape: round; background: var(--surface-raised); box-shadow: var(--shadow-floating);
+  transform-origin: calc(100% - 18px) 100%;
+}
+.picker[data-mine] { right: auto; left: -4px; transform-origin: 18px 100%; }
+.pickerWrap[data-below] .picker { top: calc(100% + 6px); bottom: auto; transform-origin: calc(100% - 18px) 0; }
+.pickerWrap[data-below] .picker[data-mine] { transform-origin: 18px 0; }
+.emoji {
+  display: grid; width: 34px; height: 34px; place-items: center; padding: 0;
+  border: 0; border-radius: var(--radius-full); corner-shape: round; background: transparent; cursor: pointer; font-size: 19px; line-height: 1;
+  -webkit-tap-highlight-color: transparent;
+  transition: background-color var(--duration-fast) var(--ease-standard), transform var(--duration-instant) var(--ease-standard);
+}
+.emoji:focus-visible { background: var(--surface-muted); }
+.emoji:active { transform: scale(.9); }
+@media (hover: hover) and (pointer: fine) { .emoji:hover { background: var(--surface-muted); transform: scale(1.12); } }
+
+.reactionClip { overflow: hidden; margin: -2px -4px; padding: 2px 4px 2px 8px; }
+.row[data-mine] .reactionClip { padding: 2px 8px 2px 4px; }
+.reactions { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
+.row[data-mine] .reactions { justify-content: flex-end; }
+.reaction {
+  display: inline-flex; height: 26px; align-items: center; gap: 5px; padding: 0 9px 0 7px;
+  border: 1px solid var(--border-subtle); border-radius: var(--radius-full); corner-shape: round; background: var(--surface); color: var(--text-secondary); cursor: pointer;
+  font: inherit; font-size: var(--text-xs); font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums;
+  -webkit-tap-highlight-color: transparent;
+  transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), transform var(--duration-instant) var(--ease-standard);
+}
+.reaction > span:first-child { font-size: 14px; }
+.reaction[aria-pressed="true"] { border-color: color-mix(in oklab, var(--accent) 28%, transparent); background: color-mix(in oklab, var(--accent) 8%, var(--surface)); color: var(--foreground); }
+@media (hover: hover) and (pointer: fine) { .reaction:hover { border-color: var(--border-strong); } }
+.reaction:active { transform: scale(.95); }
+.countRoll { display: inline-grid; overflow: hidden; font-variant-numeric: tabular-nums; }
+.countRoll > span { grid-area: 1 / 1; }
+
+.receipts { display: flex; min-height: 16px; align-items: center; gap: 6px; padding: 1px 6px 0; color: var(--text-muted); font-size: var(--text-xs); }
+.readers { display: inline-flex; }
+.reader { display: inline-flex; border-radius: 50%; corner-shape: round; box-shadow: 0 0 0 2px var(--surface); }
+.reader + .reader { margin-left: -4px; }
+.status[data-status="failed"] { display: inline-flex; align-items: center; gap: 8px; color: var(--danger); }
+.retry {
+  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px;
+  border: 1px solid var(--border); border-radius: var(--radius-full); corner-shape: round; background: var(--surface); color: var(--foreground); cursor: pointer;
+  font: inherit; font-weight: 500; line-height: 16px;
+  -webkit-tap-highlight-color: transparent;
+  transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
+}
+.retry > svg { color: var(--text-secondary); }
+@media (hover: hover) and (pointer: fine) { .retry:hover { background: var(--surface-muted); border-color: var(--border-strong); } }
+
+.avatar { display: inline-grid; flex: none; overflow: hidden; place-items: center; border-radius: 50%; corner-shape: round; background: var(--surface-muted); color: var(--text-secondary); font-weight: 500; }
+.avatar img { width: 100%; height: 100%; object-fit: cover; }
+
+.typing { display: grid; height: 36px; box-sizing: border-box; place-items: center; padding: 0 14px; }
+.dots { display: inline-flex; gap: 4px; }
+.dots i { width: 6px; height: 6px; border-radius: 50%; corner-shape: round; background: var(--text-muted); animation: breathe 1.2s var(--ease-in-out) infinite; }
+.dots i:nth-child(2) { animation-delay: .16s; }
+.dots i:nth-child(3) { animation-delay: .32s; }
+@keyframes breathe {
+  0%, 60%, 100% { opacity: .35; transform: translateY(0); }
+  30% { opacity: 1; transform: translateY(-3px); }
+}
+@media (prefers-reduced-motion: reduce) { .dots i { animation: none; opacity: .6; } }
+
+.pill {
+  position: absolute; z-index: 6; bottom: 12px; left: 50%; translate: -50% 0;
+  display: inline-flex; height: 32px; align-items: center; gap: 6px; padding: 0 14px 0 11px;
+  border: 1px solid var(--border); border-radius: var(--radius-full); corner-shape: round; background: var(--surface-raised); box-shadow: var(--shadow-floating); color: var(--foreground); cursor: pointer;
+  font: inherit; font-size: var(--text-xs); font-weight: 500; white-space: nowrap;
+  -webkit-tap-highlight-color: transparent;
+}
+.pill > span { display: inline-flex; gap: .3em; }
+.pill > .pillIcon { display: inline-grid; place-items: center; }
+.pill:active { scale: .97; }
+
+/* Composer. */
+.composer { display: grid; padding: 10px 12px 12px; border-top: 1px solid var(--border-subtle); transition: background-color var(--duration-fast) var(--ease-standard); }
+.composer[data-dragging] { background: var(--accent-subtle); }
+.trayClip { overflow: hidden; }
+.tray { display: flex; gap: 8px; margin: 0; padding: 8px 8px 10px 4px; overflow-x: auto; list-style: none; scrollbar-width: none; }
+.pending { position: relative; flex: none; }
+.pendingImage { display: block; width: 56px; height: 56px; border-radius: var(--radius-control); corner-shape: var(--corner-shape); object-fit: cover; }
+.pendingFile { display: grid; width: 168px; height: 56px; box-sizing: border-box; align-content: center; column-gap: 8px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius-control); corner-shape: var(--corner-shape); background: var(--surface); grid-template-columns: auto minmax(0, 1fr); }
+.pendingFile > svg { grid-row: span 2; align-self: center; color: var(--text-secondary); }
+.pendingName { overflow: hidden; font-size: var(--text-xs); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
+.pendingSize { color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
+.remove {
+  position: absolute; top: -6px; right: -6px; display: grid; width: 20px; height: 20px; place-items: center; padding: 0;
+  border: 2px solid var(--surface); border-radius: 50%; corner-shape: round; background: var(--foreground); color: var(--background); cursor: pointer;
+}
+
+.inputRow { display: flex; align-items: flex-end; gap: 6px; }
+.attach {
+  display: grid; width: 40px; height: 40px; flex: none; place-items: center; margin-bottom: 1px; padding: 0;
+  border: 0; border-radius: var(--radius-full); corner-shape: round; background: transparent; color: var(--text-secondary); cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), transform var(--duration-instant) var(--ease-standard);
+}
+.attach:active { transform: scale(.94); }
+@media (hover: hover) and (pointer: fine) { .attach:hover { background: var(--surface-muted); color: var(--foreground); } }
+
+/* The field and the send button share one rounded box; the button rides the bottom edge as the text grows. */
+.box {
+  position: relative; display: flex; min-width: 0; flex: 1; align-items: flex-end;
+  border: 1px solid var(--border); border-radius: var(--radius-container); corner-shape: var(--corner-shape); background: var(--surface);
+  transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard);
+}
+.box:focus-within { border-color: var(--border-strong); }
+.composer[data-dragging] .box { border-color: var(--accent); border-style: dashed; }
+.field { position: relative; min-width: 0; flex: 1; overflow: hidden; border-radius: var(--radius-control); corner-shape: var(--corner-shape); }
+.mirror,
+.textarea {
+  box-sizing: border-box; width: 100%; margin: 0; padding: 9px 6px 9px 16px; border: 0;
+  font: inherit; font-size: var(--text-base); letter-spacing: var(--tracking-body); line-height: 22px;
+  overflow-wrap: break-word; white-space: pre-wrap; word-break: break-word;
+}
+.mirror { position: absolute; top: 0; left: 0; visibility: hidden; pointer-events: none; }
+.textarea { position: absolute; inset: 0; height: 100%; display: block; resize: none; overflow-y: auto; background: transparent; color: var(--foreground); outline: none; scrollbar-width: none; }
+.textarea::placeholder { color: var(--text-muted); }
+
+.send {
+  position: relative; display: grid; width: 32px; height: 32px; flex: none; place-items: center; margin: 0 4px 4px 0; overflow: hidden; padding: 0;
+  border: 0; border-radius: 50%; corner-shape: round; background: transparent; color: var(--text-muted); cursor: default;
+  -webkit-tap-highlight-color: transparent;
+  transition: background-color var(--duration-standard) var(--ease-standard), color var(--duration-standard) var(--ease-standard), transform var(--duration-instant) var(--ease-standard);
+}
+.send[data-ready] { background: var(--accent); color: var(--accent-foreground); cursor: pointer; }
+.send[data-ready]:active { transform: scale(.92); }
+.sendIcon { display: grid; grid-area: 1 / 1; place-items: center; }
+
+.srOnly { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+
+@media (max-width: 420px) {
+  .content { padding-inline: 12px; }
+  .stack { max-width: 84%; }
+}

package/components/checkbox/checkbox.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentPropsWithoutRef } from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+export interface CheckboxProps extends ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {
+    label?: string;
+    description?: string;
+}
+export declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HTMLButtonElement>>;

package/components/checkbox/checkbox.js

@@ -0,0 +1,23 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId, useState } from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { motion, useReducedMotion } from "motion/react";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import styles from "./checkbox.module.css";
+/** Both marks share three points, so the check morphs into the dash and back instead of swapping. */
+const checkPath = "M4.25 9.25 L7.25 12.25 L13.75 5.75";
+const dashPath = "M4.75 9 L9 9 L13.25 9";
+export const Checkbox = forwardRef(function Checkbox({ label, description, id, className, checked, defaultChecked, onCheckedChange, ...props }, ref) {
+    const generatedId = useId();
+    const controlId = id ?? generatedId;
+    const reduced = useReducedMotion();
+    const [internal, setInternal] = useState(defaultChecked ?? false);
+    const state = checked ?? internal;
+    const on = state !== false;
+    const change = (next) => { if (checked === undefined)
+        setInternal(next); onCheckedChange?.(next); };
+    const fade = { duration: on ? motionTokens.duration.instant : motionTokens.duration.fast, ease: [...motionTokens.ease.standard] };
+    return _jsxs("div", { className: styles.field, children: [_jsx(CheckboxPrimitive.Root, { ...props, id: controlId, ref: ref, checked: state, onCheckedChange: change, className: [styles.box, className].filter(Boolean).join(" "), "aria-describedby": description ? `${controlId}-description` : undefined, "aria-label": props["aria-label"] ?? (label ? undefined : "Checkbox"), children: _jsxs("span", { className: styles.visual, "aria-hidden": "true", children: [_jsx(motion.span, { className: styles.fill, initial: false, animate: { opacity: on ? 1 : 0, scale: on ? 1 : .6 }, transition: reduced ? { duration: 0 } : { scale: motionTokens.spring.snappy, opacity: fade } }), _jsx("svg", { className: styles.mark, viewBox: "0 0 18 18", fill: "none", focusable: "false", children: _jsx(motion.path, { initial: false, animate: { d: state === "indeterminate" ? dashPath : checkPath, pathLength: on ? 1 : 0, opacity: on ? 1 : 0 }, transition: reduced ? { duration: 0 } : { d: motionTokens.spring.morph, pathLength: motionTokens.spring.snappy, opacity: fade }, stroke: "currentColor", strokeWidth: 1.75, strokeLinecap: "round", strokeLinejoin: "round" }) })] }) }), label || description ? _jsxs("div", { className: styles.copy, children: [label ? _jsx("label", { htmlFor: controlId, children: label }) : null, description ? _jsx("span", { id: `${controlId}-description`, children: description }) : null] }) : null] });
+});
+Checkbox.displayName = "Checkbox";

package/components/checkbox/checkbox.module.css

@@ -0,0 +1,15 @@
+.field { display: inline-flex; align-items: flex-start; gap: 0; min-width: 0; }
+.box { position: relative; flex: 0 0 auto; display: grid; place-items: center; width: var(--control-height-md); height: var(--control-height-md); border: 0; border-radius: var(--radius-control); padding: 0; background: transparent; color: var(--control-glyph); cursor: pointer; -webkit-tap-highlight-color: transparent; }
+/* The square is the only part that reacts to a press, so the hit area and label never move. */
+.visual { position: relative; display: block; width: 18px; height: 18px; border: 1px solid var(--border-strong); border-radius: var(--radius-detail); background: var(--surface); transition: border-color var(--duration-fast) var(--ease-standard), transform var(--duration-spring) var(--ease-spring); }
+.fill { position: absolute; inset: -1px; border-radius: inherit; corner-shape: inherit; background: var(--control-on); }
+.mark { position: absolute; inset: -1px; width: 18px; height: 18px; overflow: visible; }
+.box[data-state="checked"] .visual, .box[data-state="indeterminate"] .visual { border-color: var(--control-on); }
+@media (hover: hover) and (pointer: fine) { .box[data-state="unchecked"]:hover:not(:disabled) .visual { border-color: var(--text-muted); } }
+.box:active:not(:disabled) .visual { transform: scale(.95); transition: border-color var(--duration-fast) var(--ease-standard), transform var(--duration-instant) var(--ease-standard); }
+.box:disabled { opacity: .5; cursor: not-allowed; }
+/* The label's first line centers on the square: (44px box - 19.6px line) / 2. */
+.copy { display: grid; gap: 2px; min-width: 0; margin-left: 1px; padding-top: calc((var(--control-height-md) - var(--text-sm) * 1.4) / 2); }
+.copy label { color: var(--foreground); font-size: var(--text-sm); font-weight: 500; line-height: var(--leading-body); cursor: pointer; }
+.copy span { color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-body); }
+@media (prefers-reduced-motion: reduce) { .visual, .box:active:not(:disabled) .visual { transition: none; transform: none; } }

package/components/chip-group/chip-group.d.ts

@@ -0,0 +1,24 @@
+export interface ChipOption {
+    value: string;
+    label: string;
+}
+/**
+ * Selectable filter chips for narrowing a list by facets people toggle often, such as topics, statuses, or tags.
+ * Selecting morphs the chip: a check grows in, the label slides over, and the chip's edge follows on a spring while its
+ * neighbours glide to their new places, even across lines. Long sets fold behind a “+N more” chip that opens with a height morph.
+ * Arrow keys move between chips, Space or Enter toggles, and each chip is a pressed or unpressed button.
+ */
+export interface ChipGroupProps {
+    options: ChipOption[];
+    value: string[];
+    onValueChange: (value: string[]) => void;
+    /** Accessible name of the group, such as “Topics”. */
+    label: string;
+    /** Allow several chips at once. In single mode the selected chip can still be cleared. */
+    multiple?: boolean;
+    /** Chips shown before the rest fold behind a “+N more” chip. Chips selected when it folds stay in view. */
+    maxVisible?: number;
+    className?: string;
+}
+export declare function ChipGroup({ options, value, onValueChange, label, multiple, maxVisible, className }: ChipGroupProps): import("react").JSX.Element;
+export default ChipGroup;

package/components/chip-group/chip-group.js

@@ -0,0 +1,196 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { AnimatePresence, LayoutGroup, animate, motion, useIsPresent, useMotionValue, useReducedMotion, useTransform } from "motion/react";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import styles from "./chip-group.module.css";
+/** Roving-focus key of the overflow chip; the NUL keeps it from colliding with any option value. */
+const MORE = "\u0000more";
+const standard = [...motionTokens.ease.standard];
+const enterEase = [...motionTokens.ease.enter];
+const fade = { duration: motionTokens.duration.fast, ease: standard };
+const reducedFade = { duration: .15, ease: standard };
+const exitFast = { duration: motionTokens.duration.fast, ease: standard };
+const shown = { opacity: 1, y: "0em", scale: 1, filter: "blur(0px)" };
+const textIn = { opacity: 0, y: "0.3em", filter: `blur(${motionTokens.blur.soft}px)` };
+const textOut = { opacity: 0, y: "-0.3em", filter: `blur(${motionTokens.blur.subtle}px)`, transition: exitFast };
+/**
+ * A chip's layout width changes in one frame (so the row can re-flow once and neighbours can glide), but what you see must not.
+ * `lag` is how far the visible edge trails the layout edge: it jumps by the change, then springs back to zero.
+ * Passive resizes, like a late web font, only re-baseline it.
+ */
+function useWidthLag(node, key, reduce) {
+    const lag = useMotionValue(0);
+    const width = useRef(null);
+    useLayoutEffect(() => {
+        const element = node.current;
+        if (!element)
+            return;
+        const next = element.offsetWidth, previous = width.current;
+        width.current = next;
+        if (previous === null || previous === next)
+            return;
+        if (reduce) {
+            lag.jump(0);
+            return;
+        }
+        // Retarget from wherever the edge is now and keep its speed, so fast toggling never snaps.
+        const velocity = lag.getVelocity();
+        lag.jump(lag.get() + previous - next);
+        animate(lag, 0, { ...motionTokens.spring.morph, velocity });
+    }, [key, lag, node, reduce]);
+    useEffect(() => {
+        const element = node.current;
+        if (!element || typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(() => { width.current = element.offsetWidth; });
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [node]);
+    return lag;
+}
+/** Follows the chips' height. After `morphKey` changes (a selection, opening the overflow) it springs from the old height to the new one, then returns to auto. It clips only while moving, so nothing is cut off at rest. */
+function HeightFrame({ morphKey, reduce, children }) {
+    const frame = useRef(null);
+    const content = useRef(null);
+    const height = useMotionValue("auto");
+    const changedAt = useRef(0);
+    const last = useRef(undefined);
+    const animating = useRef(false);
+    /* Pin the old height in the same commit as the change, before Motion measures the chips' new layout. Otherwise the chips
+       are measured against an unpinned frame, the centred demo shifts by half the growth for that measurement, and the first row
+       sinks and floats back while the height springs. */
+    useLayoutEffect(() => {
+        changedAt.current = performance.now();
+        const node = frame.current;
+        if (reduce || !node || last.current === undefined)
+            return;
+        const current = height.get();
+        const from = typeof current === "number" ? current : last.current;
+        height.jump(from);
+        Object.assign(node.style, { overflow: "clip", height: `${from}px`, minHeight: `${from}px` });
+        // If the change leaves the height alone, no resize follows, so release the pin after a frame.
+        let inner = 0;
+        const outer = requestAnimationFrame(() => { inner = requestAnimationFrame(() => { if (animating.current)
+            return; height.jump("auto"); if (frame.current)
+            Object.assign(frame.current.style, { overflow: "", height: "auto", minHeight: "" }); }); });
+        return () => { cancelAnimationFrame(outer); cancelAnimationFrame(inner); };
+    }, [morphKey, reduce, height]);
+    useEffect(() => {
+        const node = content.current;
+        if (!node || typeof ResizeObserver === "undefined")
+            return;
+        let controls;
+        const settle = () => { animating.current = false; height.jump("auto"); if (frame.current)
+            Object.assign(frame.current.style, { overflow: "", height: "auto", minHeight: "" }); };
+        // The minimum follows the moving height, so a flex parent short on room cannot squeeze the frame mid-morph and snap it when the morph ends.
+        const unfollow = height.on("change", value => { if (frame.current)
+            frame.current.style.minHeight = typeof value === "number" ? `${value}px` : ""; });
+        const observer = new ResizeObserver(([entry]) => {
+            if (!entry)
+                return;
+            const next = entry.borderBoxSize?.[0]?.blockSize ?? node.offsetHeight;
+            const current = height.get();
+            const from = typeof current === "number" ? current : last.current;
+            last.current = next;
+            controls?.stop();
+            if (reduce || from === undefined || Math.abs(from - next) < .5 || performance.now() - changedAt.current > 160)
+                return settle();
+            // Pin the old height before this frame paints, then spring to the new one.
+            if (frame.current)
+                Object.assign(frame.current.style, { overflow: "clip", height: `${from}px`, minHeight: `${from}px` });
+            animating.current = true;
+            controls = animate(height, [from, next], { ...motionTokens.spring.smooth, onComplete: settle });
+        });
+        observer.observe(node);
+        return () => { observer.disconnect(); unfollow(); controls?.stop(); };
+    }, [height, reduce]);
+    return _jsx(motion.div, { ref: frame, className: styles.frame, style: { height }, children: _jsx("div", { ref: content, className: styles.content, children: children }) });
+}
+/** Outgoing copies are hidden from assistive tech while they fade, so the button reads only its current text.
+ *  `follow` is the centring offset of the current line; a leaving line holds the offset it had when it left, so the new line's centring never drags it sideways. */
+function Swap({ follow, style, ...props }) {
+    const present = useIsPresent();
+    const held = useMotionValue(0);
+    // Runs before the chip re-measures its width in the same commit, so this reads the offset from before the change.
+    useLayoutEffect(() => { if (!present && follow)
+        held.jump(follow.get()); }, [present, follow, held]);
+    return _jsx(motion.span, { ...props, style: follow ? { ...style, x: present ? follow : held } : style, "aria-hidden": present ? props["aria-hidden"] : true });
+}
+/** The width the check takes from the label: a 14px glyph and the space after it. */
+const SLOT = 18;
+function Chip({ option, selected, tabbable, reduce, delay, onToggle, onFocusChip, ref }) {
+    const present = useIsPresent();
+    const body = useRef(null);
+    const lag = useWidthLag(body, String(selected), reduce);
+    /* How far the check has grown: the slot it was given, less the width the label still lags behind. It follows both inputs
+       explicitly, so a jump with no animation (reduced motion) still lands the check in its final state. */
+    const slot = useRef(selected ? SLOT : 0);
+    const grown = useMotionValue(selected ? 1 : 0);
+    const edge = useTransform(lag, value => -value);
+    // The check grows from zero width in exactly the gap the label opens as it slides over, so the two never overlap, and deselecting runs it backwards.
+    const checkScale = useTransform(grown, value => Math.min(value, 1.1));
+    const checkOpacity = useTransform(grown, value => Math.min(1, value * 1.4));
+    const checkBlur = useTransform(grown, value => value >= 1 ? "none" : `blur(${((1 - value) * motionTokens.blur.subtle).toFixed(2)}px)`);
+    /* The stroke draws in step with the growth, so the check writes itself as the label makes room. */
+    const checkDraw = useTransform(grown, value => Math.min(1, Math.max(.001, value)));
+    // Declared after the transforms so they are already subscribed when a reduced-motion selection jumps straight to the end.
+    useLayoutEffect(() => {
+        slot.current = selected ? SLOT : 0;
+        const update = () => grown.set(Math.max(0, (slot.current + lag.get()) / SLOT));
+        update();
+        return lag.on("change", update);
+    }, [selected, lag, grown]);
+    // Revealed chips grow in with a short stagger; chips that fold away leave faster than they came.
+    const enter = reduce ? { layout: { duration: 0 }, default: reducedFade } : { layout: motionTokens.spring.morph, default: { ...motionTokens.spring.snappy, delay }, opacity: { ...fade, delay } };
+    return _jsx(motion.button, { ref: ref, type: "button", className: styles.chip, "data-chip": option.value, "aria-pressed": selected, "aria-hidden": present ? undefined : true, tabIndex: present && tabbable ? 0 : -1, onClick: () => onToggle(option.value), onFocus: () => onFocusChip(option.value), layout: "position", initial: reduce ? { opacity: 0 } : { opacity: 0, scale: .9 }, animate: { opacity: 1, scale: 1 }, exit: reduce ? { opacity: 0, transition: reducedFade } : { opacity: 0, scale: .9, transition: { duration: motionTokens.duration.instant, ease: standard } }, transition: enter, children: _jsxs("span", { ref: body, className: styles.body, "data-selected": selected, children: [_jsx(motion.span, { className: styles.surface, style: { right: edge }, "aria-hidden": "true" }), _jsx(motion.span, { className: styles.check, style: { scale: checkScale, opacity: checkOpacity, filter: checkBlur }, "aria-hidden": "true", children: _jsx("svg", { width: 14, height: 14, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", children: _jsx(motion.path, { d: "M4 12.5 9.5 18 20 6.5", style: { pathLength: checkDraw } }) }) }), _jsx("span", { className: styles.slot, "aria-hidden": "true" }), _jsx(motion.span, { className: styles.label, style: { x: lag }, children: option.label })] }) });
+}
+function MoreChip({ hidden, expanded, tabbable, reduce, onToggle, onFocusChip, ref }) {
+    const body = useRef(null);
+    const text = expanded ? "Show less" : `+${hidden} more`;
+    const lag = useWidthLag(body, text, reduce);
+    const edge = useTransform(lag, value => -value);
+    // The text stays centred on the visible surface while its edge catches up.
+    const centre = useTransform(lag, value => value / 2);
+    return _jsx(motion.button, { ref: ref, type: "button", className: `${styles.chip} ${styles.more}`, "data-more": "", "aria-expanded": expanded, tabIndex: tabbable ? 0 : -1, onClick: onToggle, onFocus: () => onFocusChip(MORE), layout: "position", transition: { layout: reduce ? { duration: 0 } : motionTokens.spring.morph }, children: _jsxs("span", { ref: body, className: styles.body, children: [_jsx(motion.span, { className: styles.surface, style: { right: edge }, "aria-hidden": "true" }), _jsx("span", { className: styles.moreText, children: _jsx(AnimatePresence, { mode: "popLayout", initial: false, children: _jsx(Swap, { follow: centre, className: styles.moreLine, initial: reduce ? { opacity: 0 } : textIn, animate: shown, exit: reduce ? { opacity: 0, transition: reducedFade } : textOut, transition: reduce ? reducedFade : { duration: motionTokens.duration.standard, ease: enterEase }, children: text }, text) }) })] }) });
+}
+export function ChipGroup({ options, value, onValueChange, label, multiple = true, maxVisible = Infinity, className }) {
+    const id = useId();
+    const reduce = !!useReducedMotion();
+    const [expanded, setExpanded] = useState(false);
+    // Chips selected when the overflow folds stay in view, so a selection is never hidden and deselecting never makes a chip vanish.
+    const [pinned, setPinned] = useState(value);
+    const [active, setActive] = useState(null);
+    const foldable = options.length > maxVisible;
+    const visible = !foldable || expanded ? options : options.filter((option, index) => index < maxVisible || pinned.includes(option.value) || value.includes(option.value));
+    const hidden = options.length - visible.length;
+    const showMore = foldable && (expanded || hidden > 0);
+    const keys = [...visible.map(option => option.value), ...(showMore ? [MORE] : [])];
+    // One chip holds the tab stop: the last one focused, else the first selected, else the first.
+    const tabStop = active !== null && keys.includes(active) ? active : visible.find(option => value.includes(option.value))?.value ?? keys[0];
+    function toggle(next) {
+        const on = value.includes(next);
+        if (!multiple)
+            return onValueChange(on ? [] : [next]);
+        onValueChange(options.filter(option => option.value === next ? !on : value.includes(option.value)).map(option => option.value));
+    }
+    function toggleMore() {
+        if (expanded)
+            setPinned(value);
+        setExpanded(!expanded);
+    }
+    function onKeyDown(event) {
+        const buttons = Array.from(event.currentTarget.querySelectorAll(":is(button[data-chip], button[data-more]):not([aria-hidden='true'])"));
+        const index = buttons.indexOf(document.activeElement);
+        if (index < 0)
+            return;
+        const last = buttons.length - 1;
+        const moves = { ArrowRight: index === last ? 0 : index + 1, ArrowDown: index === last ? 0 : index + 1, ArrowLeft: index === 0 ? last : index - 1, ArrowUp: index === 0 ? last : index - 1, Home: 0, End: last };
+        if (!(event.key in moves))
+            return;
+        event.preventDefault();
+        buttons[moves[event.key]].focus();
+    }
+    return _jsx(LayoutGroup, { id: id, children: _jsx(HeightFrame, { morphKey: `${expanded}|${value.join(",")}`, reduce: reduce, children: _jsx("div", { className: [styles.group, className].filter(Boolean).join(" "), role: "group", "aria-label": label, onKeyDown: onKeyDown, children: _jsxs(AnimatePresence, { mode: "popLayout", initial: false, children: [visible.map((option, index) => _jsx(Chip, { option: option, selected: value.includes(option.value), tabbable: tabStop === option.value, reduce: reduce, delay: expanded ? Math.min(Math.max(0, index - maxVisible) * motionTokens.stagger.item, .3) : 0, onToggle: toggle, onFocusChip: setActive }, option.value)), showMore ? _jsx(MoreChip, { hidden: hidden, expanded: expanded, tabbable: tabStop === MORE, reduce: reduce, onToggle: toggleMore, onFocusChip: setActive }, MORE) : null] }) }) }) });
+}
+export default ChipGroup;

package/components/chip-group/chip-group.module.css

@@ -0,0 +1,38 @@
+/* The frame follows the chip rows' height on a spring; the rows re-flow once and every chip glides to its new place. */
+.frame { min-width: 0; }
+.content { position: relative; }
+.group { position: relative; isolation: isolate; display: flex; flex-wrap: wrap; gap: var(--space-related); }
+
+/* The button is only the hit area and the layout box. What you see is the surface, which trails the box on a spring while the width morphs. */
+.chip { position: relative; display: inline-flex; max-width: 100%; padding: 0; border: 0; border-radius: var(--radius-full); corner-shape: round; background: none; color: var(--text-secondary); font: inherit; font-size: var(--text-sm); font-weight: 500; letter-spacing: var(--tracking-body); line-height: 20px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color var(--duration-fast) var(--ease-standard); }
+/* Press answers on the body with the individual scale property, so it never fights the layout transform on the button. */
+.body { position: relative; isolation: isolate; display: inline-flex; min-width: 0; height: var(--control-height-sm); align-items: center; padding: 0 14px; transition: scale var(--duration-spring) var(--ease-spring); }
+.chip:active .body { scale: .97; transition-duration: var(--duration-instant); transition-timing-function: var(--ease-standard); }
+.surface { position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; border: 1px solid var(--border); border-radius: var(--radius-full); corner-shape: round; background: var(--surface); transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); }
+/* The check grows from its left edge where the label started; the slot hands its width to the label in one layout step, and the label's offset springs it over. */
+.check { position: absolute; top: calc(50% - 7px); left: 12px; display: grid; width: 14px; height: 14px; place-items: center; color: var(--accent-strong); transform-origin: 0 50%; }
+.check svg { display: block; overflow: visible; }
+.slot { width: 0; flex: none; }
+.body[data-selected="true"] .slot { width: 18px; }
+.label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+/* Selected reads as a quiet tint of the accent (neutral by default) plus the check, never color alone. */
+.body[data-selected="true"] .surface { border-color: color-mix(in oklab, var(--accent) 42%, var(--border)); background: color-mix(in oklab, var(--accent) 11%, var(--surface)); }
+.chip[aria-pressed="true"] { color: var(--foreground); }
+@media (hover: hover) and (pointer: fine) {
+  .chip:hover { color: var(--foreground); }
+  .chip:hover .surface { border-color: var(--border-strong); }
+  .chip[aria-pressed="true"]:hover .surface { border-color: color-mix(in oklab, var(--accent) 60%, var(--border)); background: color-mix(in oklab, var(--accent) 16%, var(--surface)); }
+}
+
+/* The overflow chip travels under the chips it reveals, so they seem to come out of it. */
+.chip:not(.more) { z-index: 1; }
+.more { color: var(--text-muted); }
+.more .surface { border-color: var(--border); background: var(--surface-muted); }
+.moreText { position: relative; display: inline-flex; justify-content: center; font-variant-numeric: tabular-nums; }
+.moreLine { display: block; white-space: nowrap; }
+
+@media (prefers-reduced-motion: reduce) {
+  .chip, .body, .surface { transition: none; }
+  .chip:active .body { scale: none; }
+}

package/components/code-block/code-block.d.ts

@@ -0,0 +1,11 @@
+export interface CodeBlockProps {
+    /** Source shown in the block and copied by the action. */
+    code: string;
+    /** File name displayed in the header. */
+    filename?: string;
+    /** Used for the header label and lightweight syntax highlighting. */
+    language?: string;
+    /** Collapse longer sources to this many lines, with a toggle that expands the rest in place. */
+    maxLines?: number;
+}
+export declare function CodeBlock({ code, filename, language, maxLines }: CodeBlockProps): import("react").JSX.Element;