rift-ds 1.11.0 → 1.12.0

package/components/SidebarPanel/SidebarPanel.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import React, { useId, useState, useCallback } from "react";
+import { useLinkComponent } from "../../behaviors/LinkProvider.js";
 import "./SidebarPanel.css";
 import "../../fonts/material-symbols.css";
 function groupRuns(items) {
@@ -23,9 +24,11 @@ const SidebarPanel = React.forwardRef(
     onBack,
     backLabel = "Back",
     className = "",
+    linkComponent,
     ...rest
   }, ref) => {
     const baseClass = "ds-sidebar-panel";
+    const Link = useLinkComponent(linkComponent);
     const uid = useId();
     const [openKeys, setOpenKeys] = useState(() => {
       const initial = new Set(defaultOpenKeys ?? []);
@@ -56,7 +59,7 @@ const SidebarPanel = React.forwardRef(
         item.badge !== void 0 && /* @__PURE__ */ jsx("span", { className: `${baseClass}__badge`, children: item.badge })
       ] });
       return item.href ? /* @__PURE__ */ jsx(
-        "a",
+        Link,
         {
           className: classes,
           href: item.href,

package/components/SourceChip/SourceChip.d.ts

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
+import { LinkComponent } from '../../behaviors/LinkProvider';
 /** Props owned by SourceChip itself — everything else falls through to the root element. */
 type SourceChipOwnProps = {
     /**
@@ -36,6 +37,12 @@ type SourceChipOwnProps = {
     meta?: string;
     /** Additional CSS classes */
     className?: string;
+    /**
+     * The component the link renders with, such as Next.js's `Link`, so it
+     * navigates through the app's router. Wins over a LinkProvider's; a plain
+     * `<a>` when neither is set.
+     */
+    linkComponent?: LinkComponent;
 };
 export interface SourceChipProps extends SourceChipOwnProps, Omit<React.ComponentPropsWithoutRef<'a'>, keyof SourceChipOwnProps> {
 }

package/components/SourceChip/SourceChip.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import React, { useState, useRef, useId, useEffect, useLayoutEffect } from "react";
+import { useLinkComponent } from "../../behaviors/LinkProvider.js";
 import { useLayer } from "../../behaviors/useLayer.js";
 import "./SourceChip.css";
 import "../../fonts/material-symbols.css";
@@ -23,8 +24,9 @@ function clipBounds(el) {
   }
   return bounds;
 }
-const SourceChip = React.forwardRef(({ title, index, icon = "language", href, excerpt, source, logo, meta, className = "", ...rest }, ref) => {
+const SourceChip = React.forwardRef(({ title, index, icon = "language", href, excerpt, source, logo, meta, className = "", linkComponent, ...rest }, ref) => {
   const baseClass = "ds-source-chip";
+  const Link = useLinkComponent(linkComponent);
   const hasPreview = Boolean(excerpt);
   const [visible, setVisible] = useState(false);
   const showTimeoutRef = useRef(void 0);
@@ -103,8 +105,8 @@ const SourceChip = React.forwardRef(({ title, index, icon = "language", href, ex
     /* @__PURE__ */ jsx("span", { className: `${baseClass}__title`, children: title })
   ] });
   const describedBy = hasPreview ? panelId : void 0;
-  const chip = element === "a" ? /* @__PURE__ */ jsx(
-    "a",
+  const chip = element === "a" && href ? /* @__PURE__ */ jsx(
+    Link,
     {
       "aria-describedby": describedBy,
       ...rest,

package/components/SourceTrail/SourceTrail.d.ts

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
+import { LinkComponent } from '../../behaviors/LinkProvider';
 export type SourceTrailStatus = 'pending' | 'active' | 'done';
 /** One source the agent opened while answering. */
 export interface SourceTrailItem {
@@ -46,6 +47,12 @@ type SourceTrailOwnProps = {
     defaultOpen?: boolean;
     /** Fires whenever the panel opens or closes. */
     onOpenChange?: (open: boolean) => void;
+    /**
+     * The component its links render with, such as Next.js's `Link`, so they
+     * navigate through the app's router; passed on to each source's SourceChip. Wins over a
+     * LinkProvider's; a plain `<a>` when neither is set.
+     */
+    linkComponent?: LinkComponent;
     /** Additional CSS classes */
     className?: string;
 };

package/components/SourceTrail/SourceTrail.js

@@ -27,6 +27,7 @@ const SourceTrail = React.forwardRef(
     open,
     defaultOpen = true,
     onOpenChange,
+    linkComponent,
     className = "",
     ...rest
   }, ref) => {
@@ -91,6 +92,7 @@ const SourceTrail = React.forwardRef(
                     {
                       title: item.title,
                       href: item.href,
+                      linkComponent,
                       icon: item.icon,
                       target: item.href ? "_blank" : void 0,
                       rel: item.href ? "noopener noreferrer" : void 0

package/components/ThreadPanel/ThreadPanel.d.ts

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
+import { LinkComponent } from '../../behaviors/LinkProvider';
 export interface ThreadPanelThreadAction {
     /** Stable identifier reported through `onThreadAction`. */
     id: string;
@@ -160,6 +161,13 @@ type ThreadPanelOwnProps = {
     footerSlot?: React.ReactNode;
     /** Additional CSS classes */
     className?: string;
+    /**
+     * The component its links render with, such as Next.js's `Link`, so they
+     * navigate through the app's router; a plain `<a>` when unset. This
+     * component can render on the server, so it never reads a LinkProvider:
+     * pass the prop even under one.
+     */
+    linkComponent?: LinkComponent;
 };
 export interface ThreadPanelProps extends ThreadPanelOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof ThreadPanelOwnProps> {
 }

package/components/ThreadPanel/ThreadPanel.js

@@ -29,11 +29,12 @@ function ActionRow({
   onClick,
   ariaCurrent,
   title,
-  children
+  children,
+  link: Link
 }) {
   if (href) {
     return /* @__PURE__ */ jsx(
-      "a",
+      Link,
       {
         className,
         href,
@@ -145,12 +146,14 @@ const ThreadPanel = React.forwardRef(
     profile,
     footerSlot,
     className = "",
+    linkComponent,
     ...rest
   }, ref) => {
     const dotted = groups.some(
       (group) => group.threads.some((thread) => thread.status || thread.unread)
     );
     const labels = { ...DEFAULT_STATUS_LABELS, ...statusLabels };
+    const Link = linkComponent ?? "a";
     const classes = [
       baseClass,
       expanded && `${baseClass}--expanded`,
@@ -238,6 +241,7 @@ const ThreadPanel = React.forwardRef(
           showNew && /* @__PURE__ */ jsxs(
             ActionRow,
             {
+              link: Link,
               className: `${baseClass}__new`,
               href: newThreadHref,
               onClick: onNewThread,
@@ -258,6 +262,7 @@ const ThreadPanel = React.forwardRef(
           controls && controls.length > 0 && /* @__PURE__ */ jsx("div", { className: `${baseClass}__controls`, children: controls.map((control) => /* @__PURE__ */ jsxs(
             ActionRow,
             {
+              link: Link,
               className: `${baseClass}__control`,
               href: control.href,
               onClick: onControlSelect ? () => onControlSelect(control.id) : void 0,
@@ -294,6 +299,7 @@ const ThreadPanel = React.forwardRef(
               return /* @__PURE__ */ jsx("li", { className: `${baseClass}__row`, children: /* @__PURE__ */ jsxs(
                 ActionRow,
                 {
+                  link: Link,
                   className: [
                     `${baseClass}__project`,
                     active && `${baseClass}__project--active`
@@ -375,6 +381,7 @@ const ThreadPanel = React.forwardRef(
                                 /* @__PURE__ */ jsxs(
                                   ActionRow,
                                   {
+                                    link: Link,
                                     className: [
                                       `${baseClass}__thread`,
                                       active && `${baseClass}__thread--active`,

package/components/TopAppBar/TopAppBar.d.ts

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
+import { LinkComponent } from '../../behaviors/LinkProvider';
 export interface TopAppBarAction {
     /** Unique key for this action */
     key: string;
@@ -76,6 +77,12 @@ type TopAppBarOwnProps = {
     sticky?: boolean;
     /** Additional CSS classes */
     className?: string;
+    /**
+     * The component its links render with, such as Next.js's `Link`, so they
+     * navigate through the app's router. Wins over a LinkProvider's; a plain
+     * `<a>` when neither is set.
+     */
+    linkComponent?: LinkComponent;
 };
 export interface TopAppBarProps extends TopAppBarOwnProps, Omit<React.ComponentPropsWithoutRef<'header'>, keyof TopAppBarOwnProps> {
 }

package/components/TopAppBar/TopAppBar.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import React, { useState, useEffect } from "react";
+import { useLinkComponent } from "../../behaviors/LinkProvider.js";
 import { DropdownMenu } from "../DropdownMenu/DropdownMenu.js";
 import "./TopAppBar.css";
 import "../../fonts/material-symbols.css";
@@ -30,9 +31,11 @@ const TopAppBar = React.forwardRef(
     headingLevel = 1,
     sticky = true,
     className = "",
+    linkComponent,
     ...rest
   }, ref) => {
     const baseClass = "ds-top-app-bar";
+    const Link = useLinkComponent(linkComponent);
     const isIos = platform === "ios";
     const resolvedAlign = align ?? (isIos ? "center" : "start");
     const expandable = size !== "small";
@@ -68,7 +71,7 @@ const TopAppBar = React.forwardRef(
       ] });
       const label = action.badge ? badgeLabel(action.label) : action.label;
       return action.href ? /* @__PURE__ */ jsx(
-        "a",
+        Link,
         {
           className: `${baseClass}__button`,
           href: action.href,

package/components/Widget/Widget.d.ts

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
+import { LinkComponent } from '../../behaviors/LinkProvider';
 /** Props owned by Widget itself — everything else falls through to the root `<section>`. */
 type WidgetOwnProps = {
     /** The tile's heading. Also the section's accessible name, unless an `aria-label` is passed. Note: this shadows the native `title` tooltip attribute, which Widget does not expose. */
@@ -53,6 +54,13 @@ type WidgetRowOwnProps = {
     href?: string;
     /** Additional CSS classes */
     className?: string;
+    /**
+     * The component its links render with, such as Next.js's `Link`, so they
+     * navigate through the app's router; a plain `<a>` when unset. This
+     * component can render on the server, so it never reads a LinkProvider:
+     * pass the prop even under one.
+     */
+    linkComponent?: LinkComponent;
 };
 export interface WidgetRowProps extends WidgetRowOwnProps, Omit<React.HTMLAttributes<HTMLElement>, keyof WidgetRowOwnProps> {
 }

package/components/Widget/Widget.js

@@ -47,8 +47,9 @@ const WidgetGroup = React.forwardRef(
 );
 WidgetGroup.displayName = "WidgetGroup";
 const WidgetRow = React.forwardRef(
-  ({ title, description, leading, meta, href, className = "", onClick, ...rest }, ref) => {
+  ({ title, description, leading, meta, href, className = "", onClick, linkComponent, ...rest }, ref) => {
     const baseClass = "ds-widget-row";
+    const Link = linkComponent ?? "a";
     const interactive = Boolean(href || onClick);
     const classes = [baseClass, interactive ? `${baseClass}--interactive` : "", className].filter(Boolean).join(" ");
     const content = /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -61,7 +62,7 @@ const WidgetRow = React.forwardRef(
     ] });
     if (href) {
       return /* @__PURE__ */ jsx(
-        "a",
+        Link,
         {
           ...rest,
           ref,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rift-ds",
-  "version": "1.11.0",
+  "version": "1.12.0",
   "description": "An AI-ready React design system: accessible components on composable tokens, light/dark theming, and CSS-variable overrides.",
   "author": {
     "name": "Robert Ritacca",
@@ -73,6 +73,10 @@
       "types": "./behaviors/useScrollLock.d.ts",
       "import": "./behaviors/useScrollLock.js"
     },
+    "./behaviors/LinkProvider": {
+      "types": "./behaviors/LinkProvider.d.ts",
+      "import": "./behaviors/LinkProvider.js"
+    },
     "./chat": {
       "types": "./chat/index.d.ts",
       "import": "./chat/index.js"