rift-ds 1.0.0

package/components/ThreadTabs/ThreadTabs.css

@@ -0,0 +1,252 @@
+/* ============================================
+   THREAD TABS COMPONENT
+   The strip of open chat sessions across a conversation's top edge: pill
+   tabs with a leading glyph, an unread dot, a hover-revealed close button,
+   and a trailing new-tab action. Deliberately surface-less — the host
+   paints the band it sits on.
+
+   Enter/exit is the grid-track idiom (Accordion's height trick turned
+   sideways): each item is a one-column grid whose track animates between
+   0fr and 1fr, so a new tab glides open in place and a closed one folds
+   away while its neighbours slide over — no measurement, no FLIP. The
+   entrance rides the entrance ease at the slow beat; the exit is quicker
+   (the base beat), since a dismissal should feel lighter than an arrival.
+   ============================================ */
+
+.ds-thread-tabs {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-100);
+  min-width: 0;
+}
+
+/* ============================================
+   LIST — the scrolling run of tabs
+   ============================================ */
+
+.ds-thread-tabs__list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  /* A crowded strip scrolls sideways; the strip is its own scroll
+     affordance, so no bar. */
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+/* ============================================
+   ITEMS — the animated columns
+   The inter-tab gap lives on the items (not the list) so an entering or
+   leaving tab can fold its own gap in and out with its column.
+   ============================================ */
+
+.ds-thread-tabs__item {
+  display: grid;
+  grid-template-columns: 1fr;
+  flex: none;
+  min-width: 0;
+}
+
+.ds-thread-tabs__item + .ds-thread-tabs__item {
+  margin-inline-start: var(--gap-100);
+}
+
+.ds-thread-tabs__item--entering {
+  animation: ds-thread-tabs-in var(--motion-duration-slow)
+    var(--motion-ease-entrance);
+}
+
+.ds-thread-tabs__item--leaving {
+  pointer-events: none;
+  animation: ds-thread-tabs-out var(--motion-duration-base)
+    var(--motion-ease-emphasized) forwards;
+}
+
+@keyframes ds-thread-tabs-in {
+  from {
+    grid-template-columns: 0fr;
+    margin-inline-start: 0;
+    opacity: 0;
+  }
+}
+
+@keyframes ds-thread-tabs-out {
+  to {
+    grid-template-columns: 0fr;
+    margin-inline-start: 0;
+    opacity: 0;
+  }
+}
+
+/* The track's window: the pill inside keeps its natural width and is
+   revealed or wiped by the collapsing column. */
+.ds-thread-tabs__cell {
+  min-width: 0;
+  overflow: hidden;
+}
+
+/* ============================================
+   TAB — the pill
+   32px pills on the buttons' radius; the active tab wears ThreadPanel's
+   active-row fill, so the strip and the rail mark "on stage" the same way.
+   ============================================ */
+
+.ds-thread-tabs__tab {
+  display: flex;
+  align-items: center;
+  height: 32px;
+  min-width: 0;
+  /* Keep a long session title from eating the strip; the label masks out
+     and stays readable in the tab's tooltip (ThreadPanel's manner). */
+  max-width: 220px;
+  border-radius: var(--radius-pill);
+  transition: background-color var(--motion-duration-fast)
+    var(--motion-ease-standard);
+}
+
+.ds-thread-tabs__tab:hover {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-thread-tabs__tab--active {
+  background-color: var(--color-bg-container-tertiary);
+}
+
+.ds-thread-tabs__trigger {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-100);
+  min-width: 0;
+  height: 100%;
+  padding: 0 var(--padding-300);
+  border: none;
+  border-radius: var(--radius-pill);
+  background: transparent;
+  cursor: pointer;
+  text-align: left;
+  color: var(--color-text-secondary);
+  transition: color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+/* With a close button beside it, the trigger cedes its trailing inset to
+   the button's own margin so the pill's right edge stays balanced. */
+.ds-thread-tabs__tab--closable .ds-thread-tabs__trigger {
+  padding-inline-end: var(--padding-100);
+}
+
+.ds-thread-tabs__tab--active .ds-thread-tabs__trigger {
+  color: var(--color-text-primary);
+}
+
+.ds-thread-tabs__trigger:focus-visible,
+.ds-thread-tabs__close:focus-visible,
+.ds-thread-tabs__add:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: -2px;
+}
+
+/* The unread dot: a small status disc leading the label. Sized on the gap
+   scale — there is no icon token this small (ThreadPanel's dot restated). */
+.ds-thread-tabs__unread {
+  flex: none;
+  width: var(--gap-200);
+  height: var(--gap-200);
+  border-radius: var(--radius-pill);
+  background-color: var(--color-status-info-icon);
+}
+
+.ds-thread-tabs__icon {
+  --icon-size: var(--icon-size-500);
+  flex: none;
+  color: var(--color-icon-secondary);
+}
+
+.ds-thread-tabs__label {
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  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);
+  /* A long label dissolves at the trailing edge instead of clipping to an
+     ellipsis; the full text stays in the tab's tooltip.
+     ds-allow(color): mask alpha keywords (black/transparent), not palette colours */
+  -webkit-mask-image: linear-gradient(
+    to right,
+    black calc(100% - var(--gap-400)),
+    transparent
+  );
+  mask-image: linear-gradient(
+    to right,
+    black calc(100% - var(--gap-400)),
+    transparent
+  );
+}
+
+/* ============================================
+   CLOSE — hover-revealed, geometry-stable
+   The button always holds its seat (states never move the label); it fades
+   in on hover or keyboard focus, and stands revealed on the active tab.
+   ============================================ */
+
+.ds-thread-tabs__close {
+  --icon-size: var(--icon-size-500);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  flex: none;
+  margin-inline-end: var(--padding-100);
+  padding: 0;
+  border: none;
+  border-radius: var(--radius-pill);
+  background: transparent;
+  color: var(--color-icon-primary);
+  cursor: pointer;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--motion-duration-fast) var(--motion-ease-standard),
+    background-color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-thread-tabs__tab:hover .ds-thread-tabs__close,
+.ds-thread-tabs__tab:focus-within .ds-thread-tabs__close,
+.ds-thread-tabs__tab--active .ds-thread-tabs__close {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.ds-thread-tabs__close:hover {
+  background-color: var(--color-bg-container-secondary);
+}
+
+/* ============================================
+   ADD — the trailing new-tab action
+   ============================================ */
+
+.ds-thread-tabs__add {
+  --icon-size: var(--icon-size-500);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  flex: none;
+  padding: 0;
+  border: none;
+  border-radius: var(--radius-pill);
+  background: transparent;
+  color: var(--color-icon-primary);
+  cursor: pointer;
+  transition: background-color var(--motion-duration-fast)
+    var(--motion-ease-standard);
+}
+
+.ds-thread-tabs__add:hover {
+  background-color: var(--color-action-passive-bg-hover);
+}

package/components/ThreadTabs/ThreadTabs.d.ts

@@ -0,0 +1,54 @@
+import { default as React } from 'react';
+export interface ThreadTab {
+    /** Stable identifier: `activeId` matches against it and the callbacks report it. */
+    id: string;
+    /** The tab's one-line label. Overflow fades out under a trailing mask rather than clipping; the full text stays readable in the tab's native tooltip. */
+    label: string;
+    /** The tab's leading icon — Material Symbol name (string) or custom element (ReactNode). */
+    icon?: string | React.ReactNode;
+    /** The thread holds unseen activity: a small status dot leads the label. The dot is decorative — keep the state readable elsewhere when it must be announced. */
+    unread?: boolean;
+}
+/** Props owned by ThreadTabs itself — everything else falls through to the root `<div>`. */
+type ThreadTabsOwnProps = {
+    /** The open tabs, in display order. A tab added between renders glides open in place; a removed one folds away while its neighbours slide over. */
+    tabs: ThreadTab[];
+    /** Id of the tab on stage. Its pill renders filled and carries `aria-current`. */
+    activeId?: string;
+    /** Fires with the clicked tab's id. */
+    onTabSelect?: (id: string) => void;
+    /** Fires with the tab's id when its close button is pressed, or Delete lands on the focused tab. The close affordance renders only when this is given. */
+    onTabClose?: (id: string) => void;
+    /** Accessible name for a tab's close button; the tab's label is appended after it. */
+    closeLabel?: string;
+    /** Fires when the trailing new-tab button is pressed. The button renders only when this is given. */
+    onAdd?: () => void;
+    /** Accessible name for the new-tab button. */
+    addLabel?: string;
+    /** Accessible name for the tab strip. */
+    ariaLabel?: string;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface ThreadTabsProps extends ThreadTabsOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof ThreadTabsOwnProps> {
+}
+/**
+ * ThreadTabs is the strip of open chat sessions across a conversation's top
+ * edge: pill tabs with a leading glyph, an unread dot, a hover-revealed
+ * close button, and a trailing new-tab action. Fully controlled — the host
+ * owns which tabs exist and which is active; the strip owns the
+ * choreography of a tab arriving and leaving. A removed tab is kept on
+ * stage just long enough to fold away (its neighbours slide over as its
+ * column collapses), and a new one glides open in place — no measurement,
+ * just the grid-track idiom turned sideways.
+ *
+ * Tabs are a labelled list of buttons, not an ARIA tablist: like
+ * ThreadPanel's rows they select sessions rather than switch local panels,
+ * and the active tab announces itself with `aria-current`. Arrow keys,
+ * Home and End move focus along the strip; Delete closes the focused tab
+ * when the host wires `onTabClose`.
+ *
+ * Forwards a ref to the root `<div>` and spreads unrecognised props onto it.
+ */
+export declare const ThreadTabs: React.ForwardRefExoticComponent<ThreadTabsProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/ThreadTabs/ThreadTabs.js

@@ -0,0 +1,201 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import React from "react";
+import "./ThreadTabs.css";
+import "../../fonts/material-symbols.css";
+const baseClass = "ds-thread-tabs";
+const ThreadTabs = React.forwardRef(
+  ({
+    tabs,
+    activeId,
+    onTabSelect,
+    onTabClose,
+    closeLabel = "Close thread",
+    onAdd,
+    addLabel = "New thread",
+    ariaLabel = "Open threads",
+    className = "",
+    ...rest
+  }, ref) => {
+    const iconClass = "material-symbols-rounded";
+    const listRef = React.useRef(null);
+    const enteredRef = React.useRef(
+      new Set(tabs.map((tab) => tab.id))
+    );
+    const [prevTabs, setPrevTabs] = React.useState(tabs);
+    const [leaving, setLeaving] = React.useState([]);
+    if (prevTabs !== tabs) {
+      setPrevTabs(tabs);
+      const nextIds = new Set(tabs.map((tab) => tab.id));
+      const removed = prevTabs.filter((tab) => !nextIds.has(tab.id));
+      setLeaving((current) => {
+        const kept = current.filter((l) => !nextIds.has(l.tab.id));
+        const added = removed.map((tab) => {
+          const index = prevTabs.findIndex((p) => p.id === tab.id);
+          return {
+            tab,
+            afterId: index > 0 ? prevTabs[index - 1].id : null
+          };
+        });
+        return added.length > 0 || kept.length !== current.length ? [...kept, ...added] : current;
+      });
+    }
+    const entries = React.useMemo(() => {
+      const list = tabs.map((tab) => ({ tab, leaving: false }));
+      for (const l of leaving) {
+        const index = l.afterId == null ? 0 : list.findIndex((entry) => entry.tab.id === l.afterId) + 1;
+        list.splice(index < 0 ? list.length : index, 0, {
+          tab: l.tab,
+          leaving: true
+        });
+      }
+      return list;
+    }, [tabs, leaving]);
+    const liveTriggers = () => Array.from(
+      listRef.current?.querySelectorAll(
+        `.${baseClass}__item:not(.${baseClass}__item--leaving) .${baseClass}__trigger`
+      ) ?? []
+    );
+    const moveFocus = (from, key) => {
+      const triggers = liveTriggers();
+      const index = triggers.indexOf(from);
+      if (index < 0 || triggers.length === 0) return;
+      let target;
+      if (key === "ArrowRight") {
+        target = triggers[(index + 1) % triggers.length];
+      } else if (key === "ArrowLeft") {
+        target = triggers[(index - 1 + triggers.length) % triggers.length];
+      } else if (key === "Home") {
+        target = triggers[0];
+      } else if (key === "End") {
+        target = triggers[triggers.length - 1];
+      }
+      target?.focus();
+    };
+    const closeTab = (id, from) => {
+      const item = from.closest(`.${baseClass}__item`);
+      if (item && item.contains(document.activeElement)) {
+        const items = Array.from(
+          listRef.current?.querySelectorAll(
+            `.${baseClass}__item:not(.${baseClass}__item--leaving)`
+          ) ?? []
+        );
+        const index = items.indexOf(item);
+        const neighbour = items[index + 1] ?? items[index - 1];
+        neighbour?.querySelector(`.${baseClass}__trigger`)?.focus();
+      }
+      onTabClose?.(id);
+    };
+    const classes = [baseClass, className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs("div", { ...rest, ref, className: classes, children: [
+      /* @__PURE__ */ jsx("ul", { className: `${baseClass}__list`, "aria-label": ariaLabel, ref: listRef, children: entries.map(({ tab, leaving: isLeaving }) => {
+        const active = !isLeaving && tab.id === activeId;
+        const entering = !isLeaving && !enteredRef.current.has(tab.id);
+        return /* @__PURE__ */ jsx(
+          "li",
+          {
+            className: [
+              `${baseClass}__item`,
+              entering && `${baseClass}__item--entering`,
+              isLeaving && `${baseClass}__item--leaving`
+            ].filter(Boolean).join(" "),
+            onAnimationEnd: (e) => {
+              if (e.target !== e.currentTarget) return;
+              if (e.animationName === "ds-thread-tabs-in") {
+                enteredRef.current.add(tab.id);
+              } else if (e.animationName === "ds-thread-tabs-out") {
+                enteredRef.current.delete(tab.id);
+                setLeaving(
+                  (current) => current.filter((l) => l.tab.id !== tab.id)
+                );
+              }
+            },
+            children: /* @__PURE__ */ jsx("div", { className: `${baseClass}__cell`, children: /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: [
+                  `${baseClass}__tab`,
+                  active && `${baseClass}__tab--active`,
+                  onTabClose && `${baseClass}__tab--closable`
+                ].filter(Boolean).join(" "),
+                children: [
+                  /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      className: `${baseClass}__trigger`,
+                      title: tab.label,
+                      "aria-current": active ? "true" : void 0,
+                      tabIndex: isLeaving ? -1 : 0,
+                      onClick: onTabSelect && !isLeaving ? () => onTabSelect(tab.id) : void 0,
+                      onKeyDown: (e) => {
+                        if (e.key === "ArrowRight" || e.key === "ArrowLeft" || e.key === "Home" || e.key === "End") {
+                          e.preventDefault();
+                          moveFocus(e.currentTarget, e.key);
+                        } else if (e.key === "Delete" && onTabClose) {
+                          e.preventDefault();
+                          closeTab(tab.id, e.currentTarget);
+                        }
+                      },
+                      children: [
+                        tab.unread && /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            className: `${baseClass}__unread`,
+                            "aria-hidden": "true"
+                          }
+                        ),
+                        tab.icon && (typeof tab.icon === "string" ? /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            className: `${baseClass}__icon ${iconClass}`,
+                            "aria-hidden": "true",
+                            children: tab.icon
+                          }
+                        ) : /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            className: `${baseClass}__icon`,
+                            "aria-hidden": "true",
+                            children: tab.icon
+                          }
+                        )),
+                        /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: tab.label })
+                      ]
+                    }
+                  ),
+                  onTabClose && /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: `${baseClass}__close`,
+                      "aria-label": `${closeLabel}: ${tab.label}`,
+                      tabIndex: isLeaving ? -1 : 0,
+                      onClick: (e) => closeTab(tab.id, e.currentTarget),
+                      children: /* @__PURE__ */ jsx("span", { className: iconClass, "aria-hidden": "true", children: "close" })
+                    }
+                  )
+                ]
+              }
+            ) })
+          },
+          tab.id
+        );
+      }) }),
+      onAdd && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: `${baseClass}__add`,
+          "aria-label": addLabel,
+          onClick: onAdd,
+          children: /* @__PURE__ */ jsx("span", { className: iconClass, "aria-hidden": "true", children: "add" })
+        }
+      )
+    ] });
+  }
+);
+ThreadTabs.displayName = "ThreadTabs";
+export {
+  ThreadTabs
+};