@stll/ui 0.37.1 → 0.39.0

package/README.md

@@ -11,7 +11,7 @@ cannot reach into product code by accident. Lint enforces that boundary; the
 export map below is what "part of the design system" means.
 
 Peer dependencies: `react`, `react-dom`, `@base-ui/react`, `tailwindcss` (v4),
-`@dnd-kit/core`, `@dnd-kit/sortable`, and `@tanstack/react-virtual`.
+and `@tanstack/react-virtual`.
 
 ## Import
 
@@ -101,56 +101,11 @@ unavailable state.
 minor. They will be removed after that; the export guard checks that both
 spellings land on the same module for as long as they both exist.
 
-## Sortable boards
+## Kanban boards
 
 `@stll/ui/kanban` provides board matrices, subgroup swimlanes, bounded virtual
-cells, and input/accessibility primitives. The caller keeps domain identifiers,
-card rendering, permissions, and persisted mutations. Wrap sortable boards in
-`KanbanSortableBoard`, render items through `useKanbanSortable`, and attach the
-returned bindings to `KanbanDragHandle`.
-
-```tsx
-import {
-  KanbanDragHandle,
-  KanbanSortableBoard,
-  KanbanSortableList,
-  useKanbanSortable,
-} from "@stll/ui/kanban";
-
-const Card = ({ id }: { id: string }) => {
-  const { activator, setNodeRef } = useKanbanSortable({
-    activation: { type: "handle" },
-    id,
-  });
-  if (activator.type !== "handle") {
-    return null;
-  }
-  return (
-    <article ref={setNodeRef}>
-      <KanbanDragHandle bindings={activator.bindings} label="Move card" />
-    </article>
-  );
-};
-
-<KanbanSortableBoard onDragEnd={handleDragEnd}>
-  <KanbanSortableList items={cardIds}>
-    {cardIds.map((id) => (
-      <Card id={id} key={id} />
-    ))}
-  </KanbanSortableList>
-</KanbanSortableBoard>;
-```
-
-The default sensors are mouse (8px movement), touch (150ms delay with 8px
-tolerance), and keyboard. Scroll containers retain `touch-action: auto`; only
-`KanbanDragHandle` disables touch panning. `KanbanSortableBoard` also accepts
-custom `sensors`, `accessibility`, collision detection, keyboard coordinates,
-auto-scroll options, and an `overlay` render function.
-
-`getKanbanHorizontalEdge` takes `input: "pointer"` with a current client-x and
-`direction: "ltr" | "rtl"` for mouse and touch input. Keyboard calls use
-`input: "keyboard"` and require source and target indices, so every move has a
-logical edge without relying on ambiguous geometry.
+cells, and column bands. The caller owns card rendering, permissions, and
+persisted mutations.
 
 For Group/Sub-group boards, build one canonical matrix and render it with the
 installable layout and virtual cell:
@@ -187,32 +142,6 @@ const matrix = buildKanbanBoardMatrix({
 />;
 ```
 
-When rows inside a virtual cell are sortable, give the cell a unique drop target
-and its ordered matrix position. The cell registers its actual scroll element,
-including when `rows` is empty, and owns the matching `SortableContext`.
-
-```tsx
-<KanbanVirtualCell
-  getRowKey={(row) => row.id}
-  pagination={{ type: "none" }}
-  renderRow={(row) => <Card row={row} />}
-  rows={cell.rows}
-  sortable={{
-    dropTarget: {
-      id: cellId,
-      position: { column: columnIndex, lane: laneIndex },
-    },
-    getRowId: (row) => row.id,
-  }}
-/>
-```
-
-The default keyboard coordinates move through items in their cell before
-crossing into adjacent columns or subgroup lanes; empty cells remain reachable.
-Pointer and touch drops outside registered board targets cancel. Choose an
-explicit `{ type: "handle" }` activation for the 44px handle, or `{ type:
-"item" }` when the whole item is the intended activation surface.
-
 ### Column bands
 
 Columns whose options carry a `band` (`KanbanColumnBand`, usually a status
@@ -273,6 +202,42 @@ renderCollapsedBandCell={({ band, cells, count }) => (
 )}
 ```
 
+## Grouped lists and search
+
+`@stll/ui/list` renders inventories of named things (connections, sessions,
+keys) as titled groups of hairline-divided rows. Rows truncate their content
+column and keep their trailing column, so they never scroll sideways.
+
+```tsx
+<ListGroup aria-labelledby="apps">
+  <ListGroupHeader>
+    <ListGroupHeading>
+      <ListGroupTitle id="apps">
+        Apps with access<ListGroupCount>3</ListGroupCount>
+      </ListGroupTitle>
+      <ListGroupDescription>Apps you authorized.</ListGroupDescription>
+    </ListGroupHeading>
+  </ListGroupHeader>
+  <List>
+    <ListItem>
+      <ListItemMedia>C</ListItemMedia>
+      <ListItemContent>
+        <ListItemTitle>Claude</ListItemTitle>
+        <ListItemDescription>Connected 3 days ago</ListItemDescription>
+      </ListItemContent>
+      <ListItemActions>
+        <ListItemStatus tone="success">Connected</ListItemStatus>
+      </ListItemActions>
+    </ListItem>
+  </List>
+</ListGroup>
+```
+
+Pass `render={<a href="…" />}` to `ListItem` to make the whole row a link.
+`@stll/ui/search-field` is the matching filter box: leading magnifier, clear
+button, and Escape clears the query. The caller owns the query and the
+matching.
+
 ## Styles
 
 No compiled CSS ships. The components carry Tailwind class names, so the

package/dist/components/button.d.ts

@@ -13,7 +13,7 @@ import { VariantProps } from "class-variance-authority";
  */
 declare const buttonAccessibleDisabledClass = "cursor-not-allowed opacity-64";
 declare const buttonVariants: (props?: ({
-  size?: "default" | "row" | "chip" | "icon" | "icon-lg" | "icon-sm" | "icon-xl" | "icon-xs" | "lg" | "sm" | "xl" | "xs" | null | undefined;
+  size?: "sm" | "default" | "lg" | "row" | "chip" | "icon" | "icon-lg" | "icon-sm" | "icon-xl" | "icon-xs" | "xl" | "xs" | null | undefined;
   variant?: "link" | "default" | "destructive" | "destructive-outline" | "destructive-ghost" | "ghost" | "muted" | "outline" | "secondary" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type ButtonProps = {

package/dist/components/composer.d.ts

@@ -75,6 +75,14 @@ type ComposerStatusRowProps = {
   start?: ReactNode | undefined;
   /** End slot, pinned to the far edge (e.g. the context meter). */
   end?: ReactNode | undefined;
+  /**
+   * Middle slot, centered on the row (e.g. scroll to the latest message).
+   * With it the row becomes three columns whose sides share the remaining
+   * width equally, so the middle stays centered and never covers a control.
+   * The row is a size container, so the middle can drop its label when the
+   * row is narrow (`@md:` variants).
+   */
+  center?: ReactNode | undefined;
   className?: string | undefined;
 };
 /**
@@ -83,7 +91,7 @@ type ComposerStatusRowProps = {
  * surface so the shell can never drift. Renders nothing when both slots are
  * empty, so a surface with no per-send controls shows no row.
  */
-export declare const ComposerStatusRow: ({ start, end, className }: ComposerStatusRowProps) => import("react").JSX.Element | null;
+export declare const ComposerStatusRow: ({ start, end, center, className }: ComposerStatusRowProps) => import("react").JSX.Element | null;
 export type ComposerPickerOption<Value extends string> = {
   label: string;
   value: Value;

package/dist/components/composer.js

@@ -80,8 +80,25 @@ const COMPOSER_PICKER_TRIGGER_CLASS = "text-muted-foreground hover:text-foregrou
 * surface so the shell can never drift. Renders nothing when both slots are
 * empty, so a surface with no per-send controls shows no row.
 */
-const ComposerStatusRow = ({ start, end, className }) => {
-	if (start === void 0 && end === void 0) return null;
+const ComposerStatusRow = ({ start, end, center, className }) => {
+	if (start === void 0 && end === void 0 && center === void 0) return null;
+	if (center !== void 0) return /* @__PURE__ */ jsxs("div", {
+		className: cn("text-muted-foreground @container mt-1.5 grid grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center gap-2 px-1 text-xs", className),
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "flex min-w-0 items-center",
+				children: start
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex items-center justify-center",
+				children: center
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex min-w-0 items-center justify-end",
+				children: end
+			})
+		]
+	});
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn("text-muted-foreground mt-1.5 flex items-center justify-between gap-2 px-1 text-xs", className),
 		children: [start, end !== void 0 && /* @__PURE__ */ jsx("div", {

package/dist/components/copy-button.d.ts

@@ -0,0 +1,19 @@
+import { Button } from "./button.js";
+import { ComponentProps } from "react";
+//#region src/components/copy-button.d.ts
+type CopyButtonProps = Omit<ComponentProps<typeof Button>, "children" | "onClick"> & {
+  /** Copies and reports whether it worked; failures stay with the caller. */
+  onCopy: () => Promise<boolean>;
+  label: string;
+  copiedLabel: string;
+  /** Renders the glyph alone, with the labels as its accessible name. */
+  iconOnly?: boolean;
+  iconClassName?: string;
+};
+/**
+ * A copy action that confirms in place: the glyph turns into a check and the
+ * label into `copiedLabel`, then both return. The confirmation lands where
+ * the user is looking, so callers raise no success toast.
+ */
+export declare const CopyButton: ({ onCopy, label, copiedLabel, iconOnly, iconClassName, className, ...buttonProps }: CopyButtonProps) => import("react").JSX.Element;
+//#endregion

package/dist/components/copy-button.js

@@ -0,0 +1,64 @@
+"use client";
+import { CheckIcon, CopyIcon } from "../icons.js";
+import { cn } from "../lib/utils.js";
+import { Button } from "./button.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+//#region src/components/copy-button.tsx
+const COPIED_RESET_MS = 1500;
+const SWAP_CLASS = "col-start-1 row-start-1 transition-[opacity,scale] duration-200 ease-out motion-reduce:transition-none";
+/**
+* A copy action that confirms in place: the glyph turns into a check and the
+* label into `copiedLabel`, then both return. The confirmation lands where
+* the user is looking, so callers raise no success toast.
+*/
+const CopyButton = ({ onCopy, label, copiedLabel, iconOnly = false, iconClassName = "size-3.5", className, ...buttonProps }) => {
+	const [copied, setCopied] = useState(false);
+	const resetTimerRef = useRef(null);
+	const handleClick = async () => {
+		if (!await onCopy()) return;
+		if (resetTimerRef.current !== null) clearTimeout(resetTimerRef.current);
+		setCopied(true);
+		resetTimerRef.current = setTimeout(() => {
+			resetTimerRef.current = null;
+			setCopied(false);
+		}, COPIED_RESET_MS);
+	};
+	const currentLabel = copied ? copiedLabel : label;
+	const shown = (isCopiedSlot) => copied === isCopiedSlot ? "opacity-100 scale-100" : "opacity-0 scale-50";
+	return /* @__PURE__ */ jsxs(Button, {
+		...buttonProps,
+		"aria-label": currentLabel,
+		className,
+		"data-copied": copied ? "" : void 0,
+		onClick: () => {
+			handleClick().catch(reportError);
+		},
+		children: [
+			/* @__PURE__ */ jsxs("span", {
+				"aria-hidden": "true",
+				className: "grid place-items-center",
+				children: [/* @__PURE__ */ jsx(CopyIcon, { className: cn(SWAP_CLASS, shown(false), iconClassName) }), /* @__PURE__ */ jsx(CheckIcon, { className: cn(SWAP_CLASS, shown(true), iconClassName) })]
+			}),
+			!iconOnly && /* @__PURE__ */ jsxs("span", {
+				className: "grid",
+				children: [/* @__PURE__ */ jsx("span", {
+					"aria-hidden": copied,
+					className: cn(SWAP_CLASS, copied ? "opacity-0" : "opacity-100"),
+					children: label
+				}), /* @__PURE__ */ jsx("span", {
+					"aria-hidden": !copied,
+					className: cn(SWAP_CLASS, copied ? "opacity-100" : "opacity-0"),
+					children: copiedLabel
+				})]
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"aria-live": "polite",
+				className: "sr-only",
+				children: copied ? copiedLabel : ""
+			})
+		]
+	});
+};
+//#endregion
+export { CopyButton };

package/dist/components/list.d.ts

@@ -0,0 +1,58 @@
+import * as React$1 from "react";
+import { useRender } from "@base-ui/react/use-render";
+import { VariantProps } from "class-variance-authority";
+//#region src/components/list.d.ts
+/**
+ * Grouped list: a titled section holding one surface of hairline-divided
+ * rows. Use it for settings and inventories of named things (connections,
+ * sessions, members, keys) where each row is icon + name + one quiet line +
+ * trailing status or action. Rows never scroll sideways: the content column
+ * truncates and the trailing column keeps its width, so actions stay on
+ * screen at any viewport.
+ */
+declare const ListGroup: ({ className, ...props }: React$1.ComponentProps<"section">) => React$1.JSX.Element;
+declare const ListGroupHeader: ({ className, ...props }: React$1.ComponentProps<"header">) => React$1.JSX.Element;
+/** Title and description stack; takes the space the header action leaves. */
+declare const ListGroupHeading: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
+declare const ListGroupTitle: ({ className, children, ...props }: React$1.ComponentProps<"h2">) => React$1.JSX.Element;
+/** Quiet item count after the title; shows matches while a search filters. */
+declare const ListGroupCount: ({ className, ...props }: React$1.ComponentProps<"span">) => React$1.JSX.Element;
+declare const ListGroupDescription: ({ className, ...props }: React$1.ComponentProps<"p">) => React$1.JSX.Element;
+/** Quiet trailing affordance on the header row (a link or ghost button). */
+declare const ListGroupAction: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
+/** The surface. Depth comes from a ring plus a soft shadow, not a frame. */
+declare const List: ({ className, ...props }: React$1.ComponentProps<"ul">) => React$1.JSX.Element;
+/**
+ * One row. Pass `render` (a link or button element) to make the whole row the
+ * target; then keep other interactive elements out of it. Rows with their own
+ * trailing buttons stay a plain `li` and put the actions in `ListItemActions`.
+ */
+declare const ListItem: ({ className, render, children, ...props }: useRender.ComponentProps<"div">) => React$1.JSX.Element;
+declare const listItemMediaVariants: (props?: ({
+  variant?: "icon" | "initial" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** Fixed 32px tile for an icon, logo or initial. */
+declare const ListItemMedia: ({ className, variant, ...props }: React$1.ComponentProps<"div"> & VariantProps<typeof listItemMediaVariants>) => React$1.JSX.Element;
+declare const ListItemContent: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
+declare const ListItemTitle: ({ className, ...props }: React$1.ComponentProps<"span">) => React$1.JSX.Element;
+declare const listItemDescriptionVariants: (props?: ({
+  variant?: "code" | "text" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Secondary line. Pass `line-clamp-2` when two lines are genuinely needed;
+ * never `whitespace-nowrap`.
+ */
+declare const ListItemDescription: ({ className, variant, ...props }: React$1.ComponentProps<"span"> & VariantProps<typeof listItemDescriptionVariants>) => React$1.JSX.Element;
+declare const ListItemActions: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
+/** Single-line empty row inside a `List`. Phrase it as the next action. */
+declare const ListEmpty: ({ className, ...props }: React$1.ComponentProps<"li">) => React$1.JSX.Element;
+type StatusTone = "neutral" | "success" | "warning" | "destructive";
+/**
+ * Dot + label status. The label always carries the meaning; the dot only
+ * reinforces it, so colour is never the sole signal.
+ */
+declare const ListItemStatus: ({ tone, className, children, ...props }: React$1.ComponentProps<"span"> & {
+  tone?: StatusTone;
+}) => React$1.JSX.Element;
+//#endregion
+export { List, ListEmpty, ListGroup, ListGroupAction, ListGroupCount, ListGroupDescription, ListGroupHeader, ListGroupHeading, ListGroupTitle, ListItem, ListItemActions, ListItemContent, ListItemDescription, ListItemMedia, ListItemStatus, ListItemTitle, type StatusTone };

package/dist/components/list.js

@@ -0,0 +1,160 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva } from "class-variance-authority";
+//#region src/components/list.tsx
+/**
+* Grouped list: a titled section holding one surface of hairline-divided
+* rows. Use it for settings and inventories of named things (connections,
+* sessions, members, keys) where each row is icon + name + one quiet line +
+* trailing status or action. Rows never scroll sideways: the content column
+* truncates and the trailing column keeps its width, so actions stay on
+* screen at any viewport.
+*/
+const ListGroup = ({ className, ...props }) => /* @__PURE__ */ jsx("section", {
+	className: cn("flex flex-col gap-2.5", className),
+	"data-slot": "list-group",
+	...props
+});
+const ListGroupHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("header", {
+	className: cn("flex items-end gap-4 px-1", className),
+	"data-slot": "list-group-header",
+	...props
+});
+/** Title and description stack; takes the space the header action leaves. */
+const ListGroupHeading = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("flex min-w-0 flex-1 flex-col gap-0.5", className),
+	"data-slot": "list-group-heading",
+	...props
+});
+const ListGroupTitle = ({ className, children, ...props }) => /* @__PURE__ */ jsx("h2", {
+	className: cn("text-foreground text-sm font-medium text-balance", className),
+	"data-slot": "list-group-title",
+	...props,
+	children
+});
+/** Quiet item count after the title; shows matches while a search filters. */
+const ListGroupCount = ({ className, ...props }) => /* @__PURE__ */ jsx("span", {
+	className: cn("text-muted-foreground ms-1.5 font-normal tabular-nums", className),
+	"data-slot": "list-group-count",
+	...props
+});
+const ListGroupDescription = ({ className, ...props }) => /* @__PURE__ */ jsx("p", {
+	className: cn("text-muted-foreground text-xs text-pretty", className),
+	"data-slot": "list-group-description",
+	...props
+});
+/** Quiet trailing affordance on the header row (a link or ghost button). */
+const ListGroupAction = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("flex shrink-0 items-center gap-1", className),
+	"data-slot": "list-group-action",
+	...props
+});
+/** The surface. Depth comes from a ring plus a soft shadow, not a frame. */
+const List = ({ className, ...props }) => /* @__PURE__ */ jsx("ul", {
+	className: cn("bg-background ring-border divide-border flex flex-col divide-y overflow-hidden rounded-xl shadow-xs/5 ring-1", className),
+	"data-slot": "list",
+	...props
+});
+/**
+* One row. Pass `render` (a link or button element) to make the whole row the
+* target; then keep other interactive elements out of it. Rows with their own
+* trailing buttons stay a plain `li` and put the actions in `ListItemActions`.
+*/
+const ListItem = ({ className, render, children, ...props }) => {
+	const defaultProps = {
+		className: cn("flex min-h-14 w-full items-center gap-3 px-4 py-2.5 text-start", render !== void 0 && "hover:bg-muted/50 focus-visible:bg-muted/50 focus-visible:ring-ring cursor-pointer outline-none focus-visible:ring-2 focus-visible:ring-inset", className),
+		"data-slot": "list-item",
+		children
+	};
+	const row = useRender({
+		defaultTagName: "div",
+		props: mergeProps(defaultProps, props),
+		render
+	});
+	return /* @__PURE__ */ jsx("li", {
+		className: "flex",
+		children: row
+	});
+};
+const listItemMediaVariants = cva("bg-muted grid size-8 shrink-0 place-items-center overflow-hidden rounded-lg outline-1 -outline-offset-1 outline-black/5 dark:outline-white/10", {
+	defaultVariants: { variant: "icon" },
+	variants: { variant: {
+		/** A glyph or logo, drawn quietly. */
+		icon: "text-muted-foreground [&_svg:not([class*='size-'])]:size-4",
+		/** A letter standing in for a name that has no logo. */
+		initial: "text-foreground text-xs font-medium"
+	} }
+});
+/** Fixed 32px tile for an icon, logo or initial. */
+const ListItemMedia = ({ className, variant, ...props }) => /* @__PURE__ */ jsx("div", {
+	"aria-hidden": "true",
+	className: cn(listItemMediaVariants({ variant }), className),
+	"data-slot": "list-item-media",
+	...props
+});
+const ListItemContent = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("flex min-w-0 flex-1 flex-col gap-0.5", className),
+	"data-slot": "list-item-content",
+	...props
+});
+const ListItemTitle = ({ className, ...props }) => /* @__PURE__ */ jsx("span", {
+	className: cn("text-foreground truncate text-sm font-medium", className),
+	"data-slot": "list-item-title",
+	dir: "auto",
+	...props
+});
+const listItemDescriptionVariants = cva("text-muted-foreground text-xs", {
+	defaultVariants: { variant: "text" },
+	variants: { variant: {
+		/** Prose, clamped to one line so long provider copy cannot widen the row. */
+		text: "line-clamp-1 wrap-break-word",
+		/** A URL or command: monospace, left-to-right, truncated at the end. */
+		code: "truncate font-mono"
+	} }
+});
+/**
+* Secondary line. Pass `line-clamp-2` when two lines are genuinely needed;
+* never `whitespace-nowrap`.
+*/
+const ListItemDescription = ({ className, variant, ...props }) => /* @__PURE__ */ jsx("span", {
+	className: cn(listItemDescriptionVariants({ variant }), className),
+	"data-slot": "list-item-description",
+	dir: variant === "code" ? "ltr" : "auto",
+	...props
+});
+const ListItemActions = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("flex shrink-0 items-center gap-2", className),
+	"data-slot": "list-item-actions",
+	...props
+});
+/** Single-line empty row inside a `List`. Phrase it as the next action. */
+const ListEmpty = ({ className, ...props }) => /* @__PURE__ */ jsx("li", {
+	className: cn("text-muted-foreground flex min-h-14 items-center gap-2 px-4 py-2.5 text-sm", className),
+	"data-slot": "list-empty",
+	...props
+});
+const STATUS_DOT_CLASS = {
+	neutral: "bg-foreground-disabled",
+	success: "bg-success",
+	warning: "bg-warning",
+	destructive: "bg-destructive"
+};
+/**
+* Dot + label status. The label always carries the meaning; the dot only
+* reinforces it, so colour is never the sole signal.
+*/
+const ListItemStatus = ({ tone = "neutral", className, children, ...props }) => /* @__PURE__ */ jsxs("span", {
+	className: cn("text-muted-foreground inline-flex items-center gap-1.5 text-xs whitespace-nowrap", className),
+	"data-slot": "list-item-status",
+	"data-tone": tone,
+	...props,
+	children: [/* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: cn("size-1.5 shrink-0 rounded-full", STATUS_DOT_CLASS[tone])
+	}), children]
+});
+//#endregion
+export { List, ListEmpty, ListGroup, ListGroupAction, ListGroupCount, ListGroupDescription, ListGroupHeader, ListGroupHeading, ListGroupTitle, ListItem, ListItemActions, ListItemContent, ListItemDescription, ListItemMedia, ListItemStatus, ListItemTitle };

package/dist/components/menu.js

@@ -20,13 +20,13 @@ function MenuTrigger({ tooltip, ...props }) {
 		})
 	});
 }
-const MenuPopup = ({ children, className, sideOffset = 4, align = "center", alignOffset, side = "bottom", anchor, ...props }) => /* @__PURE__ */ jsx(Menu$1.Portal, { children: /* @__PURE__ */ jsx(Menu$1.Positioner, {
-	align: anchor ? "start" : align,
+const MenuPopup = ({ children, className, sideOffset = 4, align, alignOffset, side = "bottom", anchor, ...props }) => /* @__PURE__ */ jsx(Menu$1.Portal, { children: /* @__PURE__ */ jsx(Menu$1.Positioner, {
+	align: align ?? (anchor ? "start" : "center"),
 	alignOffset,
 	anchor,
 	className: OVERLAY_LAYER_CLASS_NAMES.popup,
 	"data-slot": "menu-positioner",
-	side: anchor ? "bottom" : side,
+	side,
 	sideOffset,
 	children: /* @__PURE__ */ jsx(Menu$1.Popup, {
 		className: cn("bg-popover relative flex origin-(--transform-origin) rounded-lg border shadow-lg/5 outline-none not-dark:bg-clip-padding not-[class*='w-']:min-w-32 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] focus:outline-none dark:before:shadow-[0_-1px_--theme(--color-white/6%)]", className),

package/dist/components/search-field.d.ts

@@ -0,0 +1,20 @@
+import { InputGroupInput } from "./input-group.js";
+import * as React$1 from "react";
+//#region src/components/search-field.d.ts
+type SearchFieldProps = Omit<React$1.ComponentProps<typeof InputGroupInput>, "onChange" | "type" | "value"> & {
+  value: string;
+  onValueChange: (value: string) => void;
+  /** Accessible name of the clear button; the package ships no copy. */
+  clearLabel: string;
+  /** Class for the outer group (width, margins). */
+  groupClassName?: string;
+};
+/**
+ * Filter-as-you-type search box: leading magnifier, clear button once there is
+ * a query, and Escape clears before it blurs. The caller owns the query state
+ * and the matching; keep matching local and instant for lists under a few
+ * hundred rows.
+ */
+declare const SearchField: ({ value, onValueChange, clearLabel, groupClassName, className, onKeyDown, ...props }: SearchFieldProps) => React$1.JSX.Element;
+//#endregion
+export { SearchField, type SearchFieldProps };

package/dist/components/search-field.js

@@ -0,0 +1,53 @@
+"use client";
+import { SearchIcon, XIcon } from "../icons.js";
+import { cn } from "../lib/utils.js";
+import { Button } from "./button.js";
+import { InputGroup, InputGroupAddon, InputGroupInput } from "./input-group.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/search-field.tsx
+/**
+* Filter-as-you-type search box: leading magnifier, clear button once there is
+* a query, and Escape clears before it blurs. The caller owns the query state
+* and the matching; keep matching local and instant for lists under a few
+* hundred rows.
+*/
+const SearchField = ({ value, onValueChange, clearLabel, groupClassName, className, onKeyDown, ...props }) => /* @__PURE__ */ jsxs(InputGroup, {
+	className: cn("min-h-11 sm:min-h-0", groupClassName),
+	children: [
+		/* @__PURE__ */ jsx(InputGroupAddon, { children: /* @__PURE__ */ jsx(SearchIcon, {}) }),
+		/* @__PURE__ */ jsx(InputGroupInput, {
+			autoComplete: "off",
+			spellCheck: false,
+			...props,
+			className: cn("max-sm:h-11 max-sm:leading-11", className),
+			onChange: (event) => {
+				onValueChange(event.target.value);
+			},
+			onKeyDown: (event) => {
+				if (event.key === "Escape" && value.length > 0) {
+					event.preventDefault();
+					event.stopPropagation();
+					onValueChange("");
+				}
+				onKeyDown?.(event);
+			},
+			type: "search",
+			value
+		}),
+		value.length > 0 && /* @__PURE__ */ jsx(InputGroupAddon, {
+			align: "inline-end",
+			children: /* @__PURE__ */ jsx(Button, {
+				"aria-label": clearLabel,
+				onClick: () => {
+					onValueChange("");
+				},
+				size: "icon-xs",
+				type: "button",
+				variant: "ghost",
+				children: /* @__PURE__ */ jsx(XIcon, {})
+			})
+		})
+	]
+});
+//#endregion
+export { SearchField };

package/dist/components/sidebar.d.ts

@@ -33,7 +33,7 @@ declare function useSidebarLayout(): SidebarLayout;
  * left for the content column. Mobile reports 0: there the sidebar is an
  * overlay sheet and occupies no layout width.
  */
-declare function useSidebarInlineSize(): 0 | 256 | 48;
+declare function useSidebarInlineSize(): 0 | 48 | 256;
 declare const SidebarProvider: ({ defaultOpen, forceCollapsed, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }: React.ComponentProps<"div"> & {
   defaultOpen?: boolean;
   forceCollapsed?: boolean;
@@ -86,7 +86,7 @@ declare const SidebarMenu: ({ className, ...props }: React.ComponentProps<"ul">)
 declare const SidebarMenuItem: ({ className, ...props }: React.ComponentProps<"li">) => import("react").JSX.Element;
 declare const sidebarMenuButtonVariants: (props?: ({
   variant?: "default" | "outline" | null | undefined;
-  size?: "default" | "lg" | "sm" | "rail" | null | undefined;
+  size?: "sm" | "default" | "lg" | "rail" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
  * The footer's avatar trigger, signed in (user menu) or not (sign-in): a

package/dist/components/workspace-shell.js

@@ -1,5 +1,5 @@
 "use client";
-import { MessageSquarePlusIcon } from "../icons.js";
+import { NewChatIcon } from "../icons.js";
 import { cn } from "../lib/utils.js";
 import { SHELL_CHROME_LAYER_CLASS_NAME } from "../lib/overlay-layer.js";
 import { useIsMobile } from "../hooks/use-mobile.js";
@@ -48,7 +48,7 @@ const WorkspaceShell = ({ children, endDock, navigation, topBar }) => {
 					"data-slot": "workspace-shell-top-bar",
 					children: topBar({ compactNavigationTrigger })
 				}), /* @__PURE__ */ jsx("div", {
-					className: "flex min-h-0 flex-1 flex-col overflow-auto overscroll-contain",
+					className: "flex min-h-0 flex-1 flex-col overflow-auto overscroll-contain [&>*:first-child]:border-t-0",
 					"data-slot": "workspace-shell-content",
 					children
 				})]
@@ -91,7 +91,7 @@ const WorkspaceEndRail = ({ chatAction, children, className, label, overlay, top
 			"aria-label": chatAction.label,
 			onClick: chatAction.onActivate,
 			title: chatAction.label,
-			children: /* @__PURE__ */ jsx(MessageSquarePlusIcon, {
+			children: /* @__PURE__ */ jsx(NewChatIcon, {
 				"aria-hidden": "true",
 				className: "size-4"
 			})
@@ -99,7 +99,7 @@ const WorkspaceEndRail = ({ chatAction, children, className, label, overlay, top
 			"aria-label": `${chatAction.label}: ${chatAction.reason}`,
 			disabled: true,
 			title: chatAction.reason,
-			children: /* @__PURE__ */ jsx(MessageSquarePlusIcon, {
+			children: /* @__PURE__ */ jsx(NewChatIcon, {
 				"aria-hidden": "true",
 				className: "size-4"
 			})