rift-ds 1.0.0

package/components/ThreadPanel/ThreadPanel.d.ts

@@ -0,0 +1,175 @@
+import { default as React } from 'react';
+export interface ThreadPanelThreadAction {
+    /** Stable identifier reported through `onThreadAction`. */
+    id: string;
+    /** Menu row text. */
+    label: string;
+    /** Leading icon on the menu row — Material Symbol name (string) or custom element (ReactNode). */
+    icon?: string | React.ReactNode;
+    /** Destructive styling (the error text colour) for delete-like actions. */
+    destructive?: boolean;
+}
+export interface ThreadPanelThread {
+    /** Stable identifier: `activeThreadId` matches against it and `onThreadSelect` reports it. */
+    id: string;
+    /** The thread's one-line title. Overflow fades out under a trailing mask rather than clipping; the full text stays readable in the row's native tooltip. */
+    title: string;
+    /** Optional href — the row renders as an `<a>` for real navigation instead of a `<button>`. */
+    href?: string;
+    /** Small trailing annotation in the caption face, e.g. a relative timestamp. */
+    meta?: string;
+    /** The title is still being generated: the row shows a shimmer bar in the title's place and hides its menu, keeping `title` (e.g. "New chat") as the accessible name. */
+    pending?: boolean;
+    /** This thread's own menu actions, overriding the panel-wide `threadActions`. */
+    actions?: ThreadPanelThreadAction[];
+    /** Quiet second line under the title in the caption face — a repo, an environment, a one-line summary. Overflows under the same trailing mask as the title. */
+    description?: string;
+    /** The thread holds unseen activity: a small status dot leads the row. The dot is decorative — put the state in `meta` or `description` when it must be read aloud. */
+    unread?: boolean;
+    /** Trailing icon before the meta — Material Symbol name (string) or custom element (ReactNode), e.g. `cloud` for a session that lives remotely. */
+    icon?: string | React.ReactNode;
+    /** Marks the thread pinned with a trailing pin glyph. A marker only: the host groups pinned threads (typically a leading group) and offers pin/unpin through the row menu. */
+    pinned?: boolean;
+}
+export interface ThreadPanelGroup {
+    /** Group heading in the overline face, e.g. a project or repo name. Omit for an unlabelled run of threads. */
+    label?: string;
+    /** The group's threads, in display order. */
+    threads: ThreadPanelThread[];
+}
+export interface ThreadPanelControl {
+    /** Stable identifier reported through `onControlSelect`. */
+    id: string;
+    /** Leading icon on the row — Material Symbol name (string) or custom element (ReactNode). */
+    icon: string | React.ReactNode;
+    /** Row text. */
+    label: string;
+    /** Optional href — the row renders as an `<a>` instead of a `<button>`. */
+    href?: string;
+}
+export interface ThreadPanelProject {
+    /** Stable identifier: `activeProjectId` matches against it and `onProjectSelect` reports it. */
+    id: string;
+    /** The project's name. */
+    label: string;
+    /** Leading icon on the row — Material Symbol name (string) or custom element (ReactNode). Defaults to `folder`. */
+    icon?: string | React.ReactNode;
+    /** Small trailing annotation in the caption face, e.g. how recently the project was touched. */
+    meta?: string;
+    /** Optional href — the row renders as an `<a>` instead of a `<button>`. */
+    href?: string;
+}
+export interface ThreadPanelProfile {
+    /** The signed-in person's display name; also seeds the Avatar's initials. */
+    name: string;
+    /** Quiet caption beside the name, e.g. the plan or workspace. */
+    meta?: string;
+    /** Replace the initials Avatar with a custom element, e.g. an `<Avatar src>`. */
+    avatar?: React.ReactNode;
+}
+/** Props owned by ThreadPanel itself — everything else falls through to the root `<div>`. */
+type ThreadPanelOwnProps = {
+    /** The history, in display order. A flat list is one group with no label. */
+    groups: ThreadPanelGroup[];
+    /** Id of the thread on stage. Its row renders filled and carries `aria-current`. */
+    activeThreadId?: string;
+    /** Fires with the clicked thread's id. Rows with an `href` navigate as well. */
+    onThreadSelect?: (id: string) => void;
+    /** Shared menu actions for every thread row, behind a hover-revealed trailing trigger; a thread's own `actions` overrides the set. The menu renders only when `onThreadAction` is also given, and never on a `pending` row. */
+    threadActions?: ThreadPanelThreadAction[];
+    /** Fires with the thread's id and the chosen action's id. */
+    onThreadAction?: (threadId: string, actionId: string) => void;
+    /** Accessible name for a row's menu trigger; the thread's title is appended after it. */
+    threadMenuLabel?: string;
+    /** Id of the thread being renamed: its row swaps to an inline text field, prefilled with the title and selected. The host owns the state, like everything else. */
+    renamingThreadId?: string;
+    /** Fires with the thread's id and the trimmed new title when a rename commits (Enter, or focus leaving the field). An empty or unchanged value fires `onRenameCancel` instead. */
+    onThreadRename?: (threadId: string, title: string) => void;
+    /** Fires when a rename ends without a change: Escape, an empty value, or an unchanged title. */
+    onRenameCancel?: () => void;
+    /** Accessible name for the inline rename field. */
+    renameLabel?: string;
+    /** Brand mark slot at the top, e.g. a logo `<img>`. While collapsed it doubles as the expand button, AppSidebar's contract. */
+    logo?: React.ReactNode;
+    /** Brand name beside the logo. The header row renders only when `logo`, `logoText`, or `onExpandedChange` is given. */
+    logoText?: string;
+    /** Text for the new-thread row. The row renders when this, `onNewThread`, or `newThreadHref` is given. */
+    newThreadLabel?: string;
+    /** Icon for the new-thread row — Material Symbol name (string) or custom element (ReactNode). Defaults to the pen-in-a-box `edit_square`, the same glyph chat headers use for New chat. */
+    newThreadIcon?: string | React.ReactNode;
+    /** Keyboard hint rendered as compact Kbds at the row's trailing edge, e.g. `["Ctrl", "N"]`. Decorative — the host owns the actual binding. */
+    newThreadShortcut?: string[];
+    /** Fires when the new-thread row is clicked. */
+    onNewThread?: () => void;
+    /** Optional href — the new-thread row renders as an `<a>`. */
+    newThreadHref?: string;
+    /** Standing rows between the new-thread action and the history, e.g. Automations or Settings. */
+    controls?: ThreadPanelControl[];
+    /** Fires with the clicked control's id. Rows with an `href` navigate as well. */
+    onControlSelect?: (id: string) => void;
+    /** Project rows between the standing controls and the history, under their own overline header. The section renders only when non-empty; collapsed, the rows fold to icon circles like the controls. */
+    projects?: ThreadPanelProject[];
+    /** The projects section's overline header text. */
+    projectsLabel?: string;
+    /** Id of the open project. Its row renders filled and carries `aria-current`. */
+    activeProjectId?: string;
+    /** Fires with the clicked project's id. Rows with an `href` navigate as well. */
+    onProjectSelect?: (id: string) => void;
+    /** Fires when the header's trailing new-project button is pressed. The button renders only when this is given. */
+    onProjectCreate?: () => void;
+    /** Accessible name for the new-project button. */
+    newProjectLabel?: string;
+    /** Text for the quiet trailing row that reveals older threads, e.g. "Show 20 more". Renders only when given. */
+    moreLabel?: string;
+    /** Fires when the more row is clicked. */
+    onShowMore?: () => void;
+    /** Accessible name for the scrollable history region. */
+    historyLabel?: string;
+    /** Whether the panel is expanded (280px, labels and history showing). Collapsed it is AppSidebar's 64px icon rail: circular icon rows, the history faded out, the avatar alone in the footer. */
+    expanded?: boolean;
+    /** Fires with the next state when the toggle (or, collapsed, the logo) is pressed. The toggle renders only when this is given; the panel is controlled, so the host owns the state. */
+    onExpandedChange?: (expanded: boolean) => void;
+    /** Accessible name for the header toggle while expanded. */
+    collapseLabel?: string;
+    /** Accessible name for the expand affordance while collapsed. */
+    expandLabel?: string;
+    /** The signed-in person, rendered as the footer's Avatar row. */
+    profile?: ThreadPanelProfile;
+    /** Rendered in the footer above the profile row — a theme toggle, a storage meter. Fades out while collapsed, AppSidebar's contract. */
+    footerSlot?: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface ThreadPanelProps extends ThreadPanelOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof ThreadPanelOwnProps> {
+}
+/**
+ * ThreadPanel is the session-history rail of a chat or agent product: brand
+ * header, a new-thread action with an optional shortcut hint, standing
+ * control rows, an optional projects section with its own new-project
+ * button, the grouped thread history (the one region that scrolls), and a
+ * footer for the profile row and host furniture like a theme toggle.
+ * Thread rows scale from a bare title to the full detail anatomy: an
+ * unread dot, a quiet description line, a trailing glyph, a pin marker,
+ * and the meta caption.
+ *
+ * Fully controlled and stateless: the host owns the active thread, the
+ * navigation, the expanded state, and what selecting a row means. Every
+ * section is optional, so the panel scales from a bare thread list to the
+ * full anatomy. Thread rows carry the lifecycle affordances of a real chat
+ * history: a `pending` thread shows a shimmer in its title's place while
+ * the host generates a name, `threadActions` puts a hover-revealed overflow
+ * menu (DropdownMenu, compact) on every row for rename and delete, and
+ * `renamingThreadId` swaps a row to an inline rename field — all still
+ * controlled from outside. Expand and collapse follow AppSidebar's
+ * choreography: the panel owns its width (280px expanded, a 64px icon rail
+ * collapsed), the sweeping clip and the labels' opacity fades carry the
+ * transition, rows collapse to circular icon buttons, and while collapsed
+ * the logo doubles as the expand button. Carries no `'use client'`
+ * directive — rendered without callbacks (href navigation only) it works
+ * from a React Server Component; the menu and rename affordances need
+ * callbacks, so they belong to client hosts by nature.
+ *
+ * Forwards a ref to the root `<div>` and spreads unrecognised props onto it.
+ */
+export declare const ThreadPanel: React.ForwardRefExoticComponent<ThreadPanelProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/ThreadPanel/ThreadPanel.js

@@ -0,0 +1,466 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import React from "react";
+import { Avatar } from "../Avatar/Avatar.js";
+import { DropdownMenu } from "../DropdownMenu/DropdownMenu.js";
+import { Kbd } from "../Kbd/Kbd.js";
+import "./ThreadPanel.css";
+import "../../fonts/material-symbols.css";
+const baseClass = "ds-thread-panel";
+function ActionRow({
+  className,
+  href,
+  onClick,
+  ariaCurrent,
+  title,
+  children
+}) {
+  if (href) {
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        className,
+        href,
+        onClick,
+        "aria-current": ariaCurrent === "true" ? "page" : ariaCurrent,
+        title,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className,
+      onClick,
+      "aria-current": ariaCurrent,
+      title,
+      children
+    }
+  );
+}
+function RenameField({
+  baseClass: baseClass2,
+  defaultValue,
+  label,
+  onSubmit,
+  onCancel
+}) {
+  const commit = (el) => {
+    const value = el.value.trim();
+    if (value && value !== defaultValue) onSubmit(value);
+    else onCancel?.();
+  };
+  const refocusRow = (el) => {
+    const row = el.closest("li");
+    const tryFocus = (attempt) => {
+      const target = row?.querySelector("button, a");
+      if (target) target.focus();
+      else if (attempt < 3) requestAnimationFrame(() => tryFocus(attempt + 1));
+    };
+    requestAnimationFrame(() => tryFocus(0));
+  };
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      className: `${baseClass2}__rename`,
+      type: "text",
+      defaultValue,
+      "aria-label": label,
+      ref: (el) => {
+        if (el && document.activeElement !== el) {
+          el.focus();
+          el.select();
+        }
+      },
+      onKeyDown: (e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          e.stopPropagation();
+          refocusRow(e.currentTarget);
+          commit(e.currentTarget);
+        } else if (e.key === "Escape") {
+          e.stopPropagation();
+          refocusRow(e.currentTarget);
+          onCancel?.();
+        }
+      },
+      onBlur: (e) => commit(e.currentTarget)
+    }
+  );
+}
+const ThreadPanel = React.forwardRef(
+  ({
+    groups,
+    activeThreadId,
+    onThreadSelect,
+    threadActions,
+    onThreadAction,
+    threadMenuLabel = "Thread options",
+    renamingThreadId,
+    onThreadRename,
+    onRenameCancel,
+    renameLabel = "Rename thread",
+    logo,
+    logoText,
+    newThreadLabel,
+    newThreadIcon = "edit_square",
+    newThreadShortcut,
+    onNewThread,
+    newThreadHref,
+    controls,
+    onControlSelect,
+    projects,
+    projectsLabel = "Projects",
+    activeProjectId,
+    onProjectSelect,
+    onProjectCreate,
+    newProjectLabel = "New project",
+    moreLabel,
+    onShowMore,
+    historyLabel = "Thread history",
+    expanded = true,
+    onExpandedChange,
+    collapseLabel = "Collapse the panel",
+    expandLabel = "Expand the panel",
+    profile,
+    footerSlot,
+    className = "",
+    ...rest
+  }, ref) => {
+    const classes = [
+      baseClass,
+      expanded && `${baseClass}--expanded`,
+      className
+    ].filter(Boolean).join(" ");
+    const iconClass = "material-symbols-rounded";
+    const showHeader = Boolean(logo || logoText || onExpandedChange);
+    const showNew = Boolean(newThreadLabel || onNewThread || newThreadHref);
+    const showFooter = Boolean(footerSlot || profile);
+    const logoExpands = Boolean(logo && !expanded && onExpandedChange);
+    const toggle = onExpandedChange && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: [
+          `${baseClass}__toggle`,
+          !logo && `${baseClass}__toggle--standalone`
+        ].filter(Boolean).join(" "),
+        "aria-label": expanded ? collapseLabel : expandLabel,
+        "aria-expanded": expanded,
+        onClick: () => onExpandedChange(!expanded),
+        children: /* @__PURE__ */ jsx("span", { className: iconClass, "aria-hidden": "true", children: expanded ? "left_panel_close" : "left_panel_open" })
+      }
+    );
+    const expandOnClick = !expanded && onExpandedChange ? (e) => {
+      rest.onClick?.(e);
+      const target = e.target;
+      if (target.closest("button, a, [role='button']")) return;
+      onExpandedChange(true);
+    } : void 0;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...rest,
+        ref,
+        className: classes,
+        onClick: expandOnClick ?? rest.onClick,
+        children: [
+          showHeader && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: [
+                `${baseClass}__header`,
+                !logo && `${baseClass}__header--bare`
+              ].filter(Boolean).join(" "),
+              children: [
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: `${baseClass}__header-inner`,
+                    onClick: logoExpands ? () => onExpandedChange?.(true) : void 0,
+                    role: logoExpands ? "button" : void 0,
+                    tabIndex: logoExpands ? 0 : void 0,
+                    "aria-label": logoExpands ? expandLabel : void 0,
+                    onKeyDown: logoExpands ? (e) => {
+                      if (e.key === "Enter" || e.key === " ") {
+                        e.preventDefault();
+                        onExpandedChange?.(true);
+                      }
+                    } : void 0,
+                    children: [
+                      logo && /* @__PURE__ */ jsx("span", { className: `${baseClass}__logo`, "aria-hidden": "true", children: logo }),
+                      logoText && /* @__PURE__ */ jsx("span", { className: `${baseClass}__brand`, children: logoText })
+                    ]
+                  }
+                ),
+                toggle
+              ]
+            }
+          ),
+          showNew && /* @__PURE__ */ jsxs(
+            ActionRow,
+            {
+              className: `${baseClass}__new`,
+              href: newThreadHref,
+              onClick: onNewThread,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: `${baseClass}__new-icon${typeof newThreadIcon === "string" ? ` ${iconClass}` : ""}`,
+                    "aria-hidden": "true",
+                    children: newThreadIcon
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: `${baseClass}__new-label`, children: newThreadLabel ?? "New thread" }),
+                newThreadShortcut && newThreadShortcut.length > 0 && /* @__PURE__ */ jsx("span", { className: `${baseClass}__new-kbd`, "aria-hidden": "true", children: newThreadShortcut.map((key) => /* @__PURE__ */ jsx(Kbd, { size: "compact", children: key }, key)) })
+              ]
+            }
+          ),
+          controls && controls.length > 0 && /* @__PURE__ */ jsx("div", { className: `${baseClass}__controls`, children: controls.map((control) => /* @__PURE__ */ jsxs(
+            ActionRow,
+            {
+              className: `${baseClass}__control`,
+              href: control.href,
+              onClick: onControlSelect ? () => onControlSelect(control.id) : void 0,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: `${baseClass}__control-icon${typeof control.icon === "string" ? ` ${iconClass}` : ""}`,
+                    "aria-hidden": "true",
+                    children: control.icon
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: `${baseClass}__control-label`, children: control.label })
+              ]
+            },
+            control.id
+          )) }),
+          projects && projects.length > 0 && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__projects`, children: [
+            /* @__PURE__ */ jsxs("div", { className: `${baseClass}__projects-header`, children: [
+              /* @__PURE__ */ jsx("span", { className: `${baseClass}__projects-label`, children: projectsLabel }),
+              onProjectCreate && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: `${baseClass}__projects-add`,
+                  "aria-label": newProjectLabel,
+                  onClick: onProjectCreate,
+                  children: /* @__PURE__ */ jsx("span", { className: iconClass, "aria-hidden": "true", children: "add" })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("ul", { className: `${baseClass}__list`, "aria-label": projectsLabel, children: projects.map((project) => {
+              const active = project.id === activeProjectId;
+              return /* @__PURE__ */ jsx("li", { className: `${baseClass}__row`, children: /* @__PURE__ */ jsxs(
+                ActionRow,
+                {
+                  className: [
+                    `${baseClass}__project`,
+                    active && `${baseClass}__project--active`
+                  ].filter(Boolean).join(" "),
+                  href: project.href,
+                  onClick: onProjectSelect ? () => onProjectSelect(project.id) : void 0,
+                  ariaCurrent: active ? project.href ? "page" : "true" : void 0,
+                  title: project.label,
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: `${baseClass}__project-icon${typeof project.icon === "string" || project.icon == null ? ` ${iconClass}` : ""}`,
+                        "aria-hidden": "true",
+                        children: project.icon ?? "folder"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("span", { className: `${baseClass}__project-label`, children: project.label }),
+                    project.meta && /* @__PURE__ */ jsx("span", { className: `${baseClass}__meta`, children: project.meta })
+                  ]
+                }
+              ) }, project.id);
+            }) })
+          ] }),
+          /* @__PURE__ */ jsxs("nav", { className: `${baseClass}__history`, "aria-label": historyLabel, children: [
+            groups.map(
+              (group, index) => group.threads.length > 0 && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: `${baseClass}__group`,
+                  children: [
+                    group.label && /* @__PURE__ */ jsx("span", { className: `${baseClass}__group-label`, children: group.label }),
+                    /* @__PURE__ */ jsx(
+                      "ul",
+                      {
+                        className: `${baseClass}__list`,
+                        "aria-label": group.label,
+                        children: group.threads.map((thread) => {
+                          const active = thread.id === activeThreadId;
+                          const actions = thread.actions ?? threadActions;
+                          const showMenu = Boolean(
+                            actions && actions.length > 0 && onThreadAction && !thread.pending
+                          );
+                          const renaming = Boolean(
+                            thread.id === renamingThreadId && onThreadRename
+                          );
+                          return /* @__PURE__ */ jsx(
+                            "li",
+                            {
+                              className: [
+                                `${baseClass}__row`,
+                                showMenu && `${baseClass}__row--with-menu`
+                              ].filter(Boolean).join(" "),
+                              children: renaming ? /* @__PURE__ */ jsx(
+                                RenameField,
+                                {
+                                  baseClass,
+                                  defaultValue: thread.title,
+                                  label: renameLabel,
+                                  onSubmit: (value) => onThreadRename?.(thread.id, value),
+                                  onCancel: onRenameCancel
+                                }
+                              ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                                /* @__PURE__ */ jsxs(
+                                  ActionRow,
+                                  {
+                                    className: [
+                                      `${baseClass}__thread`,
+                                      active && `${baseClass}__thread--active`,
+                                      thread.description && !thread.pending && `${baseClass}__thread--detailed`,
+                                      thread.unread && `${baseClass}__thread--unread`
+                                    ].filter(Boolean).join(" "),
+                                    href: thread.href,
+                                    onClick: onThreadSelect ? () => onThreadSelect(thread.id) : void 0,
+                                    ariaCurrent: active ? thread.href ? "page" : "true" : void 0,
+                                    title: thread.title,
+                                    children: [
+                                      thread.unread && !thread.pending && /* @__PURE__ */ jsx(
+                                        "span",
+                                        {
+                                          className: `${baseClass}__unread`,
+                                          "aria-hidden": "true"
+                                        }
+                                      ),
+                                      thread.pending ? (
+                                        /* The naming state: the shimmer holds the
+                                           title's place; the row's accessible name
+                                           comes from its tooltip. */
+                                        /* @__PURE__ */ jsx(
+                                          "span",
+                                          {
+                                            className: `${baseClass}__title ${baseClass}__title--pending`,
+                                            children: /* @__PURE__ */ jsx(
+                                              "span",
+                                              {
+                                                className: `${baseClass}__title-shimmer`,
+                                                "aria-hidden": "true"
+                                              }
+                                            )
+                                          }
+                                        )
+                                      ) : /* @__PURE__ */ jsx("span", { className: `${baseClass}__title`, children: thread.title }),
+                                      !thread.pending && (thread.icon || thread.pinned || thread.meta) && /* @__PURE__ */ jsxs("span", { className: `${baseClass}__trail`, children: [
+                                        thread.icon && /* @__PURE__ */ jsx(
+                                          "span",
+                                          {
+                                            className: `${baseClass}__thread-icon${typeof thread.icon === "string" ? ` ${iconClass}` : ""}`,
+                                            "aria-hidden": "true",
+                                            children: thread.icon
+                                          }
+                                        ),
+                                        thread.pinned && /* @__PURE__ */ jsx(
+                                          "span",
+                                          {
+                                            className: `${baseClass}__pin ${iconClass}`,
+                                            "aria-hidden": "true",
+                                            children: "keep"
+                                          }
+                                        ),
+                                        thread.meta && /* @__PURE__ */ jsx("span", { className: `${baseClass}__meta`, children: thread.meta })
+                                      ] }),
+                                      thread.description && !thread.pending && /* @__PURE__ */ jsx(
+                                        "span",
+                                        {
+                                          className: `${baseClass}__description`,
+                                          children: thread.description
+                                        }
+                                      )
+                                    ]
+                                  }
+                                ),
+                                showMenu && actions && /* @__PURE__ */ jsx(
+                                  DropdownMenu,
+                                  {
+                                    className: `${baseClass}__menu`,
+                                    align: "end",
+                                    size: "compact",
+                                    items: actions.map((action) => ({
+                                      label: action.label,
+                                      icon: action.icon,
+                                      destructive: action.destructive,
+                                      onClick: () => onThreadAction?.(thread.id, action.id)
+                                    })),
+                                    trigger: /* @__PURE__ */ jsx(
+                                      "button",
+                                      {
+                                        type: "button",
+                                        className: `${baseClass}__menu-trigger`,
+                                        "aria-label": `${threadMenuLabel}: ${thread.title}`,
+                                        children: /* @__PURE__ */ jsx(
+                                          "span",
+                                          {
+                                            className: iconClass,
+                                            "aria-hidden": "true",
+                                            children: "more_horiz"
+                                          }
+                                        )
+                                      }
+                                    )
+                                  }
+                                )
+                              ] })
+                            },
+                            thread.id
+                          );
+                        })
+                      }
+                    )
+                  ]
+                },
+                group.label ?? index
+              )
+            ),
+            moreLabel && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: `${baseClass}__more`,
+                onClick: onShowMore,
+                children: moreLabel
+              }
+            )
+          ] }),
+          showFooter && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__footer`, children: [
+            footerSlot && /* @__PURE__ */ jsx("div", { className: `${baseClass}__footer-slot`, children: footerSlot }),
+            profile && /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: `${baseClass}__profile`,
+                title: expanded ? void 0 : profile.name,
+                children: [
+                  profile.avatar ?? /* @__PURE__ */ jsx(Avatar, { name: profile.name, size: "sm" }),
+                  /* @__PURE__ */ jsx("span", { className: `${baseClass}__profile-name`, children: profile.name }),
+                  profile.meta && /* @__PURE__ */ jsx("span", { className: `${baseClass}__profile-meta`, children: profile.meta })
+                ]
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+ThreadPanel.displayName = "ThreadPanel";
+export {
+  ThreadPanel
+};