@theruntime/components 0.0.0 → 0.0.1

package/src/select.tsx

@@ -0,0 +1,173 @@
+import * as React from "react";
+import { CheckIcon, CaretDownIcon, CaretUpIcon } from "@phosphor-icons/react";
+import { Select as SelectPrimitive } from "radix-ui";
+
+import { cn } from "./cn";
+
+function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />;
+}
+
+function SelectGroup({ ...props }: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />;
+}
+
+function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />;
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "default";
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "flex w-fit items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <CaretDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  );
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "item-aligned",
+  align = "center",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          "relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className,
+        )}
+        position={position}
+        align={align}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            "p-1",
+            position === "popper" &&
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1",
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  );
+}
+
+function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("px-2 py-1.5 text-xs text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className,
+      )}
+      {...props}
+    >
+      <span
+        data-slot="select-item-indicator"
+        className="absolute right-2 flex size-3.5 items-center justify-center"
+      >
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  );
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("pointer-events-none -mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  );
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn("flex cursor-default items-center justify-center py-1", className)}
+      {...props}
+    >
+      <CaretUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  );
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn("flex cursor-default items-center justify-center py-1", className)}
+      {...props}
+    >
+      <CaretDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  );
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+};

package/src/separator.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { Separator as SeparatorPrimitive } from "radix-ui";
+
+import { cn } from "./cn";
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Separator };

package/src/sheet.tsx

@@ -0,0 +1,132 @@
+import * as React from "react";
+import { XIcon } from "@phosphor-icons/react";
+import { Dialog as SheetPrimitive } from "radix-ui";
+
+import { cn } from "./cn";
+
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />;
+}
+
+function SheetTrigger({ ...props }: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
+}
+
+function SheetClose({ ...props }: React.ComponentProps<typeof SheetPrimitive.Close>) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
+}
+
+function SheetPortal({ ...props }: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
+}
+
+function SheetOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+  return (
+    <SheetPrimitive.Overlay
+      data-slot="sheet-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+  side?: "top" | "right" | "bottom" | "left";
+  showCloseButton?: boolean;
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        className={cn(
+          "fixed z-50 flex flex-col gap-4 bg-background shadow-lg transition ease-in-out data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:animate-in data-[state=open]:duration-500",
+          side === "right" &&
+            "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+          side === "left" &&
+            "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+          side === "top" &&
+            "inset-x-0 top-0 h-auto border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+          side === "bottom" &&
+            "inset-x-0 bottom-0 h-auto border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <SheetPrimitive.Close className="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-secondary">
+            <XIcon className="size-4" />
+            <span className="sr-only">Close</span>
+          </SheetPrimitive.Close>
+        )}
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  );
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn("flex flex-col gap-1.5 p-4", className)}
+      {...props}
+    />
+  );
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  );
+}
+
+function SheetTitle({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Title>) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn("font-semibold text-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+};

package/src/shell/app-tab.tsx

@@ -0,0 +1,67 @@
+import * as React from "react";
+
+/* THE APP TAB. The kernel index's dense object: 32px identity mark on a flat
+   --muted panel (the colour the textures measured as: dL −0.027, C 1.25x vs
+   ground), name over optional caption, meta right. Hover is 5% ink over muted
+   (Δ13 levels, --accent's Δ5 vanishes). Promoted from the shell 2026-08-18. */
+
+export function AppTab({
+  mark,
+  icon,
+  name,
+  caption,
+  meta,
+  tag,
+  onClick,
+  onContextMenu,
+}: {
+  /** 32px identity square, e.g. the register's slice art on a style prop. */
+  mark?: React.CSSProperties;
+  /** The app's chosen emoji, drawn INSIDE the mark. The mark is derived
+      provenance, a colour that says which project this came from, so the icon
+      layers over it rather than replacing it: an app keeps its family resemblance
+      and gains an identity of its own. */
+  icon?: string;
+  name: string;
+  /** Dropped when it would restate its context (section, filter, or the name). */
+  caption?: string;
+  meta?: string;
+  tag?: string;
+  onClick?: () => void;
+  onContextMenu?: (e: React.MouseEvent) => void;
+}) {
+  return (
+    <button
+      data-part={tag}
+      type="button"
+      onClick={onClick}
+      onContextMenu={onContextMenu}
+      className="group scale-chrome flex w-full items-center gap-2.5 rounded-[9px] bg-muted px-2.5 py-2.5 text-left transition-colors hover:bg-[color-mix(in_oklab,var(--foreground)_5%,var(--muted))]"
+    >
+      <span
+        className="relative grid size-8 shrink-0 place-items-center overflow-hidden rounded-[6px]"
+        style={{
+          border: "1px solid color-mix(in oklab, var(--foreground) 8%, transparent)",
+          ...mark,
+        }}
+      >
+        {icon && <span className="text-[15px] leading-none">{icon}</span>}
+      </span>
+      <span className="min-w-0 flex-1">
+        <span className="block truncate text-body font-medium leading-tight text-foreground">
+          {name}
+        </span>
+        {caption && (
+          <span className="block truncate text-caption leading-tight text-muted-foreground">
+            {caption}
+          </span>
+        )}
+      </span>
+      {meta && (
+        <span className="shrink-0 text-caption tabular-nums leading-none text-muted-foreground">
+          {meta}
+        </span>
+      )}
+    </button>
+  );
+}

package/src/shell/entry-row.tsx

@@ -0,0 +1,137 @@
+import * as React from "react";
+import { Button } from "../button";
+
+/* THE WORKING-SET ENTRY. The desktop kernel's list row: identity mark (art via
+   prop), name, and the three state channels (dim dot = attached, brand dot =
+   waiting on you, pulsing mark-ring = agent working). Promoted from the shell
+   2026-08-18; data-part attributes are plain strings (no canvas coupling). */
+
+export type Entry = {
+  /** The mark's ground, e.g. the register's slice art. Supplied by the app. */
+  art?: React.CSSProperties;
+  slug: string;
+  name: string;
+  /** The repo/dir this app lives under, revealed on hover of the mark. */
+  root: string;
+  /** Content colour. Absent = an INFERRED root: neutral, no colour. */
+  mark?: string;
+  /** A session is attached to this route. */
+  live?: boolean;
+  /** An agent is working in it right now. */
+  agent?: boolean;
+  /** Unread events waiting on you. */
+  notes?: number;
+  on?: boolean;
+  pinned?: boolean;
+};
+
+/* A real root wears the user's colour; an inferred one wears a neutral outline.
+   The difference is legible without a legend because one has colour and one
+   doesn't, in a single 18px square. */
+function RootMark({ entry }: { entry: Entry }) {
+  return (
+    <span className="relative flex">
+      {/* The apps index's hash-sliced art, same source, same treatment. */}
+      <span
+        className="size-[18px] shrink-0 overflow-hidden rounded-[5px] border border-border"
+        style={entry.art ?? undefined}
+      />
+      {entry.agent && (
+        <span
+          aria-label="agent working"
+          className="pointer-events-none absolute -inset-[3px] animate-pulse rounded-[8px] border border-[var(--brand)]"
+        />
+      )}
+    </span>
+  );
+}
+
+export function EntryRow({
+  entry,
+  forceHover,
+  showPinSlot,
+}: {
+  entry: Entry;
+  forceHover?: boolean;
+  showPinSlot?: boolean;
+}) {
+  return (
+    <Button
+      data-part={`app-${entry.slug}`}
+      variant="ghost"
+      size="sm"
+      className={
+        /* The row's 13px is EXACTLY --type-title under .scale-chrome, but it
+           cannot be spelled `text-title` here: this className goes through
+           shadcn's `cn()`, and tailwind-merge parses an unknown `text-<name>`
+           as a text-COLOR utility, so `text-title` is dropped outright by the
+           `text-muted-foreground` / `text-accent-foreground` that follows it,
+           leaving Button's own `text-sm` (14px) to win. Measured. The scale
+           utilities are only safe on elements that do NOT go through `cn()`
+           until tailwind-merge is taught the register's font-size keys. */
+        "scale-chrome relative w-full justify-start gap-2.5 text-[13px] font-normal " +
+        (entry.on ? "bg-accent text-accent-foreground" : "text-muted-foreground")
+      }
+    >
+      {/* `group/mark` scopes the hover to the MARK: a row-wide hover would fire
+          the root name every time you were merely on your way to clicking the
+          app. */}
+      <span className="group/mark relative shrink-0 flex items-center">
+        <RootMark entry={entry} />
+        <span
+          data-part={`root-${entry.slug}`}
+          className={
+            /* BELOW the mark, not beside it. Beside MEASURED wrong: at 240px the
+               only space to a left-edge mark's right is the app name, so the chip
+               covered the first characters of the row you were pointing at and
+               read as a rendering fault rather than a tooltip. Below-left is also
+               simply what Tooltip does by default, which is the tell that the
+               beside-placement was fighting the pattern rather than adapting it. */
+            "pointer-events-none absolute left-0 top-[calc(100%+6px)] z-10 " +
+            "whitespace-nowrap rounded-[6px] border px-2 py-1 text-caption leading-none " +
+            "bg-popover text-popover-foreground shadow-lg transition-opacity " +
+            (forceHover ? "opacity-100" : "opacity-0 group-hover/mark:opacity-100")
+          }
+        >
+          {entry.root}
+        </span>
+      </span>
+      {/* Pinned is NEUTRAL: a glyph, not a colour and not a fill. It marks
+          how the row GOT here, you put it there, which is a different axis
+          from what-you-owe-vs-what-owes-you, and both can be true. */}
+      {/* A RESERVED SLOT, present on every row, occupied only when pinned.
+          MEASURED without it: a pinned row's name started at x 78 and an
+          unpinned one at x 52, 26px of ragged left edge down the list, which is
+          the same defect an earlier kind token was built to avoid and this
+          reintroduced one component over. The cost is honest and worth naming:
+          ~14px of name width spent on EVERY row to keep the column straight, on
+          a rail whose longest real name already needs 232 of 240.
+          The alternative, a pin badge on the project mark, costs nothing
+          horizontally and is rejected on different grounds: at 18px that square
+          already carries a gradient and (collapsed) a liveness dot, and a later
+          round measured that small marks stop reading once they carry three
+          signals. */}
+      {showPinSlot && (
+        <span className="shrink-0 w-[11px] flex items-center justify-center">
+          {entry.pinned && (
+            <span aria-label="pinned" className="size-[5px] rounded-full bg-current opacity-70" />
+          )}
+        </span>
+      )}
+      <span className="truncate">{entry.name}</span>
+      {/* One slot, one geometry, two weights: brand = something waits on you,
+          dim = merely attached. */}
+      {entry.notes ? (
+        <span
+          aria-label="waiting"
+          className="ml-auto shrink-0 size-[5px] rounded-full bg-[var(--brand)]"
+        />
+      ) : entry.live ? (
+        <span
+          aria-label="connected"
+          className="ml-auto shrink-0 size-[5px] rounded-full bg-current opacity-35"
+        />
+      ) : null}
+    </Button>
+  );
+}

package/src/shell/field.tsx

@@ -0,0 +1,83 @@
+import * as React from "react";
+import { Badge } from "../badge";
+
+/* THE FIELD FAMILY. The kernel bar's centre slot: one field shell so its two
+   tenancies (address / search) can never drift on geometry, the queue plate
+   (count + ⌘⏎ chord, sans on purpose, mono ⌘ floats off-baseline), and the
+   ⌘K hint it evicts. Promoted from the shell 2026-08-18. */
+
+const FIELD = {
+  background: "color-mix(in oklab, var(--paper) 10%, transparent)",
+};
+
+export function Field({
+  children,
+  width = 420,
+}: {
+  children: React.ReactNode;
+  width?: number | string;
+}) {
+  return (
+    <div
+      data-part="address-field"
+      className="scale-chrome h-[30px] rounded-[8px] flex items-center px-2.5 gap-2.5"
+      style={{ ...FIELD, width }}
+    >
+      {children}
+    </div>
+  );
+}
+
+/* v13's StateSlot at the new height. Same rule, unchanged: a queue evicts the
+   hint, and the two-digit column is reserved so the plate never changes width
+   between 1 and 12. */
+export function StateSlot({ count, onSend }: { count: number; onSend?: () => void }) {
+  if (count > 0) {
+    return (
+      <Badge
+        data-part="queue-slot"
+        asChild
+        variant="default"
+        className="scale-chrome ml-auto shrink-0 h-[17px] px-1.5 py-0"
+      >
+        <button
+          type="button"
+          onClick={onSend}
+          aria-label={`Send ${count} to session, Command Return`}
+          title="Send to session, ⌘⏎"
+          className="flex items-center gap-1"
+        >
+          <span
+            data-part="queue-count"
+            className="text-meta font-semibold leading-none tabular-nums text-center"
+            style={{ minWidth: 13 }}
+          >
+            {count}
+          </span>
+          {/* NOT font-mono, that is the "better key shortcut stuff": the
+              ⌘K hint already measured that every mono face on this box ships a
+              small, baseline-floating ⌘ (JetBrains 6.25px, descent −1.05) while
+              the sans stack renders it at cap height sitting on the baseline.
+              An earlier pass set this chord in mono and would have reintroduced
+              the exact defect a later fix addressed. SEMIBOLD is that fix's
+              finding and it holds: weight, not size, is what keeps the ⏎ from
+              collapsing to a tick. */}
+          <span data-part="queue-chord" className="text-meta font-semibold leading-none opacity-65">
+            ⌘⏎
+          </span>
+        </button>
+      </Badge>
+    );
+  }
+  return <KbdHint />;
+}
+export function KbdHint() {
+  return (
+    <span
+      data-part="kbd-hint"
+      className="scale-chrome ml-auto shrink-0 text-caption leading-none text-muted-foreground tracking-[0.06em]"
+    >
+      ⌘K
+    </span>
+  );
+}

package/src/shell/group-head.tsx

@@ -0,0 +1,19 @@
+/* THE SECTION HEAD. A header is a word, so it has to earn its place. It does,
+   because a grouped list creates exactly two questions the layout
+   cannot answer on its own: which group am I in, and how much is in here. So the
+   label and the count, and nothing else. No rule, no chevron, no "N apps": the
+   grid below already draws the section's own left edge and the tabs already say
+   what they are.
+
+   Set in the tab's own name type (12.5px medium) rather than a smaller uppercase
+   micro-label, because a section head and an app name are peers in the hierarchy
+   here. One names a place, one names a thing in it, and neither outranks the
+   other. The count drops to the caption size to stay subordinate to its label. */
+export function GroupHead({ label, count }: { label: string; count: number }) {
+  return (
+    <div className="scale-chrome flex items-baseline gap-2 pb-1.5 pt-2">
+      <span className="text-body font-medium leading-none text-foreground">{label}</span>
+      <span className="text-caption leading-none tabular-nums text-muted-foreground">{count}</span>
+    </div>
+  );
+}

package/src/shell/scope-chip.tsx

@@ -0,0 +1,32 @@
+/* THE SCOPE CHIP. The kernel's filter chip: lit = ink inversion (a two-state
+   control read in peripheral vision; a tint would sit inside the resting band).
+   Tap the lit chip again to clear, a reset needs to exist, not a word.
+   Promoted from the shell 2026-08-18. */
+
+export function ScopeChip({
+  label,
+  on,
+  onClick,
+  tag,
+}: {
+  label: string;
+  on: boolean;
+  onClick: () => void;
+  tag?: string;
+}) {
+  return (
+    <button
+      data-part={tag}
+      type="button"
+      onClick={onClick}
+      className={
+        "flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[11.5px] leading-none transition-colors " +
+        (on
+          ? "bg-foreground text-background"
+          : "bg-muted text-foreground hover:bg-[color-mix(in_oklab,var(--foreground)_5%,var(--muted))]")
+      }
+    >
+      <span className="font-medium">{label}</span>
+    </button>
+  );
+}