@agimon-ai/doompi-web-components 0.0.1-alpha.0

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2026 Vuong Ngo
+Copyright (c) 2026 pulseaiclub
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,106 @@
+# @agimon-ai/doompi-web-components
+
+Shared web components and theme tokens for the DoomPi cockpit and its web plugins. It is the
+browser counterpart of [doompi-ui](https://www.npmjs.com/package/@agimon-ai/doompi-ui): where that
+package holds the terminal's shared chrome, this one holds the React primitives every cockpit
+surface is built from, on the same Doom One palette.
+
+The primitives are [shadcn/ui](https://ui.shadcn.com) components on [Radix](https://www.radix-ui.com)
+(the unified `radix-ui` package), restyled with Tailwind utilities that name theme tokens only.
+Because every colour is a token, a theme config recolours the whole cockpit at runtime.
+
+## What it ships
+
+| Export            | Components                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `.`               | Actions and chips: `Button`, `Badge`, `StatusBadge`, `Dot`, `Kbd`, `NavTab*`, `Tabs*`. Fields: `Input`, `Textarea`, `Label`, `Checkbox`, `Switch`, `RadioGroup*`, `Select*`. Overlays: `Dialog*`, `Popover*`, `DropdownMenu*`, `Tooltip*`, `Toast*`, `Command*`. Layout and content: `Panel*`, `SectionLabel`, `Separator`, `EmptyState`, `ScrollArea`, `Collapsible*`, `Accordion*`, `OptionList`, `OptionRow`, `MessageItem*`, `MessageLines`. Feedback: `Spinner`, `Progress`, `Skeleton`, `Avatar*`, `StreamCursor`. Plus the curated icon set, `cn`, `collapseLines`, the option-list key helpers, and the tone vocabularies with the maps between them |
+| `./theme`         | `ThemeConfig`, the token lists, `BUILTIN_THEMES`, `applyTheme`, `parseThemeConfig`, `themeFromPiTheme`, the stored-preference helpers                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| `./styles.css`    | The token stylesheet: `:root` defaults, the Tailwind `@theme inline` mapping, shadcn semantic aliases, base styles, and the `@source` for this package's classes                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| `./themes/*.json` | The shipped theme configs: `doom-one-dark` (default), `doom-one-light`, `doom-nord-dark`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+
+## Using it from the cockpit host
+
+```css
+/* src/web/styles/app.css */
+@import 'tailwindcss';
+@import '@agimon-ai/doompi-web-components/styles.css';
+```
+
+```tsx
+import { Button, Dialog, DialogContent, StatusBadge } from '@agimon-ai/doompi-web-components';
+import { applyTheme, builtinTheme, readThemePreference } from '@agimon-ai/doompi-web-components/theme';
+
+applyTheme(builtinTheme(readThemePreference(localStorage) ?? 'doom-one-dark')!, document.documentElement);
+```
+
+## Tones
+
+Three vocabularies, because they answer different questions. A **chip tone** names a colour
+(`blue`, `violet`, `teal`), a **status tone** names an outcome (`running`, `ok`, `error`, `info`,
+`accent`, `neutral`), and a **line tone** names a role inside a body of text (`success`, `warning`,
+`muted`). They live in `src/types/tone.ts`, and `STATUS_TO_CHIP`, `STATUS_TO_DOT`, `CHIP_TO_STATUS`,
+and `LINE_TONE_TO_STATUS` translate between them.
+
+Reach for a map rather than writing another `Record<Tone, string>`: a surface that spells its own
+state-to-colour table is how the same status ends up yellow in one panel and orange in the next.
+Every tone table in this package is checked against these unions at compile time, so a tone added to
+one and not the others fails the build.
+
+## Tool messages
+
+A tool call's timeline item is a `message` renderer in the plugin that registers the tool, composed
+from `MessageItem` (the frame, its outcome tone, and the expand state), `MessageItemHeader` (the
+tool name, the summary, the status badge, and the toggle when the item is expandable),
+`MessageItemBody`, `MessageItemStatus` (the `◐ running` / `✗ failed` / `✓ done` line, or the "N
+more line(s)" hint that expands), and `MessageLines` (toned lines a pure view helper computed) with
+`collapseLines` for the clip. The cockpit's own fallback item is built from the same parts, which
+is what keeps host and plugin items alike, and the shell carries the `tool-status` and
+`tool-expand` test ids every card inherits.
+
+## Using it from a plugin's `web/` client
+
+A web plugin's client code may import `react`, the `@tanstack` store packages,
+`@agimon-ai/doompi-web-contracts`, and this package. Declare it as a `workspace:*` dependency and
+import the same way the host does; the cockpit bundler dedupes it so one copy renders everywhere.
+Do not import `radix-ui` or `class-variance-authority` directly from plugin code: the doom-web
+vibe-lint rules route every primitive through this package so a theme change reaches all of them.
+
+## Theme tokens
+
+The palette a theme must supply: `bg`, `rail`, `panel`, `deep`, `border`, `border-soft`, `hi`,
+`text`, `dim`, `faint`, `blue`, `green`, `yellow`, `red`, `magenta`, `violet`, `cyan`, `orange`,
+`teal`, `selected`. The derived tokens (`tint-<accent>`, `edge-<accent>`, `font-mono`) are computed
+from the palette with `color-mix()` unless the theme pins them; the shipped dark theme pins the exact
+mockup values.
+
+Each token is published as `--doom-<token>` on the root element and mapped to Tailwind as
+`doom-<token>` (`bg-doom-panel`, `text-doom-hi`, `border-doom-edge-red`), and to shadcn's semantic
+names (`bg-background`, `text-muted-foreground`, `border-input`).
+
+## Writing a theme
+
+```json
+{
+  "name": "my-theme",
+  "label": "My theme",
+  "scheme": "dark",
+  "tokens": { "bg": "#1e1e2e", "rail": "#181825", "panel": "#1e1e2e", "deep": "#11111b", "...": "..." }
+}
+```
+
+`parseThemeConfig(json)` validates it (null on any problem, so a bad file never takes the page
+down) and `applyTheme(theme, document.documentElement)` writes it. `themeFromPiTheme(piThemeJson)`
+builds a web theme from a Pi TUI theme, so the palette DoomPi ships for the terminal drives the
+browser too.
+
+## Development
+
+```bash
+pnpm build      # tsdown: one entry per src/exports module, ESM and CJS, browser platform
+pnpm test       # theme, bridge, and render smoke tests (react-dom/server, no DOM needed)
+pnpm typecheck
+```
+
+The `doom-web` vibe-lint preset governs the layout: `src/types` (the theme contract), `src/lib`
+(`cn`), `src/theme`, `src/icons`, `src/components` (one PascalCase component per file, props-driven,
+no application state), and `src/exports` (pure re-exports, one file per subpath).

package/dist/_virtual/_rolldown/runtime.cjs

@@ -0,0 +1 @@
+var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,s)=>(s=n==null?{}:e(i(n)),o(r||!n||!n.__esModule||!a.call(n,`default`)?t(s,`default`,{value:n,enumerable:!0}):s,n));exports.__toESM=s;

package/dist/components/Accordion.d.cts

@@ -0,0 +1,11 @@
+import { Accordion } from "radix-ui";
+import { ComponentProps } from "react";
+//#region src/components/Accordion.d.ts
+/** Several collapsibles that know about each other; pass type="single" for one open at a time. */
+declare function Accordion$1(props: ComponentProps<typeof Accordion.Root>): import("react/jsx-runtime").JSX.Element;
+declare function AccordionItem({ className, ...props }: ComponentProps<typeof Accordion.Item>): import("react/jsx-runtime").JSX.Element;
+declare function AccordionTrigger({ className, children, ...props }: ComponentProps<typeof Accordion.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function AccordionContent({ className, ...props }: ComponentProps<typeof Accordion.Content>): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Accordion$1 as Accordion, AccordionContent, AccordionItem, AccordionTrigger };
+//# sourceMappingURL=Accordion.d.cts.map

package/dist/components/Accordion.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.d.cts","names":[],"sources":["../../src/components/Accordion.tsx"],"mappings":";;;;iBAMgB,YAAU,OAAO,sBAAsB,UAAmB,oCAAK,IAAA;iBAI/D,gBAAgB,cAAc,SAAS,sBAAsB,UAAmB,oCAAK,IAAA;iBAUrF,mBAAmB,WAAW,aAAa,SAAS,sBAAsB,UAAmB,uCAAQ,IAAA;iBAkBrG,mBAAmB,cAAc,SAAS,sBAAsB,UAAmB,uCAAQ,IAAA"}

package/dist/components/Avatar.d.cts

@@ -0,0 +1,10 @@
+import { Avatar } from "radix-ui";
+import { ComponentProps } from "react";
+//#region src/components/Avatar.d.ts
+/** A face or an initial; Radix only shows the fallback once the image has actually failed. */
+declare function Avatar$1({ className, ...props }: ComponentProps<typeof Avatar.Root>): import("react/jsx-runtime").JSX.Element;
+declare function AvatarImage({ className, ...props }: ComponentProps<typeof Avatar.Image>): import("react/jsx-runtime").JSX.Element;
+declare function AvatarFallback({ className, ...props }: ComponentProps<typeof Avatar.Fallback>): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Avatar$1 as Avatar, AvatarFallback, AvatarImage };
+//# sourceMappingURL=Avatar.d.cts.map

package/dist/components/Avatar.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.d.cts","names":[],"sources":["../../src/components/Avatar.tsx"],"mappings":";;;;iBAKgB,WAAS,cAAc,SAAS,sBAAsB,OAAgB,oCAAK,IAAA;iBAU3E,cAAc,cAAc,SAAS,sBAAsB,OAAgB,qCAAM,IAAA;iBAUjF,iBAAiB,cAAc,SAAS,sBAAsB,OAAgB,wCAAS,IAAA"}

package/dist/components/Badge.d.cts

@@ -0,0 +1,18 @@
+import { ChipTone } from "../types/tone.cjs";
+import { ComponentProps } from "react";
+import { VariantProps } from "class-variance-authority";
+//#region src/components/Badge.d.ts
+declare const badgeVariants: (props?: ({
+  tone?: "blue" | "cyan" | "green" | "magenta" | "neutral" | "orange" | "red" | "teal" | "violet" | "yellow" | null | undefined;
+  size?: "lg" | "md" | "sm" | "xs" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type BadgeTone = ChipTone;
+interface BadgeProps extends ComponentProps<'span'>, VariantProps<typeof badgeVariants> {
+  /** Render the child element instead of a <span>, so a link can look like a chip. */
+  asChild?: boolean;
+}
+/** An outlined chip in one of the accent tones; the Chip the cockpit mockup draws. */
+declare function Badge({ className, tone, size, asChild, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Badge, BadgeProps, BadgeTone, badgeVariants };
+//# sourceMappingURL=Badge.d.cts.map

package/dist/components/Badge.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.d.cts","names":[],"sources":["../../src/components/Badge.tsx"],"mappings":";;;;cAMa,gBAAa;;;6CAuBxB;KAEU,YAAY;UAEP,mBAAmB,wBAAwB,oBAAoB;;EAE9E;;;iBAIc,QAAQ,WAAW,MAAM,MAAM,YAAoB,SAAS,yCAAU,IAAA"}

package/dist/components/Button.d.cts

@@ -0,0 +1,25 @@
+import { ComponentProps } from "react";
+import { VariantProps } from "class-variance-authority";
+//#region src/components/Button.d.ts
+declare const buttonVariants: (props?: ({
+  variant?: "danger" | "danger-outline" | "ghost" | "link" | "outline" | "primary" | "subtle" | "success" | null | undefined;
+  size?: "card" | "icon" | "icon-md" | "lg" | "md" | "sm" | "xs" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type ButtonVariant = NonNullable<VariantProps<typeof buttonVariants>['variant']>;
+type ButtonSize = NonNullable<VariantProps<typeof buttonVariants>['size']>;
+interface ButtonProps extends ComponentProps<'button'>, VariantProps<typeof buttonVariants> {
+  /** Render the child element instead of a <button>, passing the classes down (shadcn's asChild). */
+  asChild?: boolean;
+  /**
+   * Work is in flight: the button shows a spinner and stops accepting clicks.
+   * Ignored under asChild, where the child owns its own content.
+   */
+  loading?: boolean;
+  /** What the spinner announces while loading; omit it and the wait is silent. */
+  loadingLabel?: string;
+}
+/** The one button: every variant is a theme token, so it recolours with the theme. */
+declare function Button({ className, variant, size, asChild, loading, loadingLabel, disabled, type, children, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Button, ButtonProps, ButtonSize, ButtonVariant, buttonVariants };
+//# sourceMappingURL=Button.d.cts.map

package/dist/components/Button.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.cts","names":[],"sources":["../../src/components/Button.tsx"],"mappings":";;;cAMa,iBAAc;;;6CAgC1B;KAEW,gBAAgB,YAAY,oBAAoB;KAChD,aAAa,YAAY,oBAAoB;UAExC,oBAAoB,0BAA0B,oBAAoB;;EAEjF;;;;;EAKA;;EAEA;;;iBAIc,SACd,WACA,SACA,MACA,SACA,SACA,cACA,UACA,MACA,aACG,SACF,0CAAW,IAAA"}

package/dist/components/Checkbox.d.cts

@@ -0,0 +1,8 @@
+import { Checkbox } from "radix-ui";
+import { ComponentProps } from "react";
+//#region src/components/Checkbox.d.ts
+/** A box that is on, off, or indeterminate; the tick is the accent on the deep well. */
+declare function Checkbox$1({ className, ...props }: ComponentProps<typeof Checkbox.Root>): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Checkbox$1 as Checkbox };
+//# sourceMappingURL=Checkbox.d.cts.map

package/dist/components/Checkbox.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.d.cts","names":[],"sources":["../../src/components/Checkbox.tsx"],"mappings":";;;;iBAMgB,aAAW,cAAc,SAAS,sBAAsB,SAAkB,oCAAK,IAAA"}

package/dist/components/Collapsible.d.cts

@@ -0,0 +1,10 @@
+import { Collapsible } from "radix-ui";
+import { ComponentProps } from "react";
+//#region src/components/Collapsible.d.ts
+/** A section that folds; Radix keeps the trigger's aria-expanded in step with the content. */
+declare function Collapsible$1(props: ComponentProps<typeof Collapsible.Root>): import("react/jsx-runtime").JSX.Element;
+declare function CollapsibleTrigger(props: ComponentProps<typeof Collapsible.CollapsibleTrigger>): import("react/jsx-runtime").JSX.Element;
+declare function CollapsibleContent({ className, ...props }: ComponentProps<typeof Collapsible.CollapsibleContent>): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Collapsible$1 as Collapsible, CollapsibleContent, CollapsibleTrigger };
+//# sourceMappingURL=Collapsible.d.cts.map

package/dist/components/Collapsible.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Collapsible.d.cts","names":[],"sources":["../../src/components/Collapsible.tsx"],"mappings":";;;;iBAKgB,cAAY,OAAO,sBAAsB,YAAqB,oCAAK,IAAA;iBAInE,mBAAmB,OAAO,sBAAsB,YAAqB,kDAAmB,IAAA;iBAIxF,qBACd,cACG,SACF,sBAAsB,YAAqB,kDAAmB,IAAA"}

package/dist/components/Command.d.cts

@@ -0,0 +1,42 @@
+import { DialogContentProps } from "./Dialog.cjs";
+import { InputProps } from "./Input.cjs";
+import { OptionRowProps } from "./OptionList.cjs";
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/Command.d.ts
+/**
+ * The command palette's frame, its search strip, its rows, and its hint.
+ *
+ * It has no Radix counterpart and it deliberately does no filtering: the
+ * surface that opens a palette already knows how to rank its own commands,
+ * and a matcher baked in here would be a second, worse one. Built on Dialog,
+ * Input, and the option row so a palette and a select popover cannot drift
+ * apart, rather than on a new dependency.
+ */
+interface CommandDialogProps extends Omit<DialogContentProps, 'title'> {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** Names the dialog for assistive tech; visually hidden unless the palette draws its own heading. */
+  title: ReactNode;
+  titleVisible?: boolean;
+}
+declare function CommandDialog({ open, onOpenChange, title, titleVisible, className, children, width, ...props }: CommandDialogProps): import("react/jsx-runtime").JSX.Element;
+/** The strip the search field sits in. */
+declare function CommandHeader({ className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+/** The search field: bare, because the header already draws the surface. */
+declare function CommandInput({ className, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
+/** The scrolling body. It is the listbox, so its rows are the options. */
+declare function CommandList({ className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+/** A labelled run of rows. */
+declare function CommandGroup({ className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function CommandGroupLabel({ className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+/** One command. Compact by default, since a palette shows many at once. */
+declare function CommandItem({ density, ...props }: OptionRowProps): import("react/jsx-runtime").JSX.Element;
+/** A command's name, taking the width the row has left. */
+declare function CommandItemLabel(props: ComponentProps<'span'>): import("react/jsx-runtime").JSX.Element;
+/** What the palette says when nothing matches. */
+declare function CommandEmpty({ className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+/** The hint strip along the bottom: what the keys do. */
+declare function CommandFooter({ className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { CommandDialog, CommandDialogProps, CommandEmpty, CommandFooter, CommandGroup, CommandGroupLabel, CommandHeader, CommandInput, CommandItem, CommandItemLabel, CommandList };
+//# sourceMappingURL=Command.d.cts.map

package/dist/components/Command.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Command.d.cts","names":[],"sources":["../../src/components/Command.tsx"],"mappings":";;;;;;;;;;;;;;UAgBiB,2BAA2B,KAAK;EAC/C;EACA,eAAe;;EAEf,OAAO;EACP;;iBAGc,gBACd,MACA,cACA,OACA,cACA,WACA,UACA,UACG,SACF,iDAAkB,IAAA;;iBAYL,gBAAgB,cAAc,SAAS,oDAAqB,IAAA;;iBAW5D,eAAe,cAAc,SAAS,yCAAU,IAAA;;iBAchD,cAAc,cAAc,SAAS,oDAAqB,IAAA;;iBAY1D,eAAe,cAAc,SAAS,oDAAqB,IAAA;iBAI3D,oBAAoB,cAAc,SAAS,oDAAqB,IAAA;;iBAWhE,cAAc,YAAwB,SAAS,6CAAc,IAAA;;iBAK7D,iBAAiB,OAAO,qDAAsB,IAAA;;iBAK9C,eAAe,cAAc,SAAS,oDAAqB,IAAA;;iBAW3D,gBAAgB,cAAc,SAAS,oDAAqB,IAAA"}

package/dist/components/Dialog.d.cts

@@ -0,0 +1,39 @@
+import { Dialog } from "radix-ui";
+import { ComponentProps } from "react";
+import { VariantProps } from "class-variance-authority";
+//#region src/components/Dialog.d.ts
+/**
+ * shadcn's Dialog on Radix: focus trap, Escape, outside click, scroll lock,
+ * and focus restored to the trigger on close. The frame is the Doom panel.
+ */
+declare function Dialog$1(props: ComponentProps<typeof Dialog.Root>): import("react/jsx-runtime").JSX.Element;
+declare function DialogTrigger(props: ComponentProps<typeof Dialog.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function DialogClose(props: ComponentProps<typeof Dialog.Close>): import("react/jsx-runtime").JSX.Element;
+interface DialogContentProps extends ComponentProps<typeof Dialog.Content> {
+  /** Width preset; `className` may still override. */
+  width?: 'sm' | 'md' | 'lg';
+}
+declare function DialogContent({ className, children, width, ...props }: DialogContentProps): import("react/jsx-runtime").JSX.Element;
+interface DialogHeaderProps extends ComponentProps<'div'> {
+  /**
+   * Show the close control at the right of the strip. Off by default: most
+   * headers already put something there (a spinner, a method label) and every
+   * dialog closes on Escape, so an X that fights the existing content is worse
+   * than none. Turn it on for a dialog whose only way out is the mouse.
+   */
+  dismissible?: boolean;
+  /** What the close control announces. */
+  closeLabel?: string;
+}
+declare function DialogHeader({ className, dismissible, closeLabel, children, ...props }: DialogHeaderProps): import("react/jsx-runtime").JSX.Element;
+declare function DialogTitle({ className, ...props }: ComponentProps<typeof Dialog.Title>): import("react/jsx-runtime").JSX.Element;
+declare function DialogDescription({ className, ...props }: ComponentProps<typeof Dialog.Description>): import("react/jsx-runtime").JSX.Element;
+declare function DialogBody({ className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare const dialogFooterVariants: (props?: ({
+  variant?: "bar" | "plain" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface DialogFooterProps extends ComponentProps<'div'>, VariantProps<typeof dialogFooterVariants> {}
+declare function DialogFooter({ className, variant, ...props }: DialogFooterProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Dialog$1 as Dialog, DialogBody, DialogClose, DialogContent, DialogContentProps, DialogDescription, DialogFooter, DialogFooterProps, DialogHeader, DialogHeaderProps, DialogTitle, DialogTrigger, dialogFooterVariants };
+//# sourceMappingURL=Dialog.d.cts.map

package/dist/components/Dialog.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.d.cts","names":[],"sources":["../../src/components/Dialog.tsx"],"mappings":";;;;;;;;iBAWgB,SAAO,OAAO,sBAAsB,OAAgB,oCAAK,IAAA;iBAIzD,cAAc,OAAO,sBAAsB,OAAgB,uCAAQ,IAAA;iBAQnE,YAAY,OAAO,sBAAsB,OAAgB,qCAAM,IAAA;UAc9D,2BAA2B,sBAAsB,OAAgB;;EAEhF;;iBAKc,gBAAgB,WAAW,UAAU,UAAiB,SAAS,iDAAkB,IAAA;UAmBhF,0BAA0B;;;;;;;EAOzC;;EAEA;;iBAGc,eACd,WACA,aACA,YACA,aACG,SACF,gDAAiB,IAAA;iBAmBJ,cAAc,cAAc,SAAS,sBAAsB,OAAgB,qCAAM,IAAA;iBAUjF,oBAAoB,cAAc,SAAS,sBAAsB,OAAgB,2CAAY,IAAA;iBAU7F,aAAa,cAAc,SAAS,oDAAqB,IAAA;cAU5D,uBAAoB;;6CAc/B;UAEe,0BAA0B,uBAAuB,oBAAoB;iBAEtE,eAAe,WAAW,YAAY,SAAS,gDAAiB,IAAA"}

package/dist/components/Dot.d.cts

@@ -0,0 +1,16 @@
+import { DotTone as DotTone$1 } from "../types/tone.cjs";
+import { ComponentProps } from "react";
+import { VariantProps } from "class-variance-authority";
+//#region src/components/Dot.d.ts
+declare const dotVariants: (props?: ({
+  tone?: "blue" | "cyan" | "green" | "magenta" | "muted" | "neutral" | "orange" | "red" | "teal" | "violet" | "yellow" | null | undefined;
+  size?: "lg" | "md" | "sm" | "xs" | null | undefined;
+  pulse?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type DotTone = DotTone$1;
+interface DotProps extends ComponentProps<'span'>, VariantProps<typeof dotVariants> {}
+/** The status dot: a colour and, while something is live, a pulse. */
+declare function Dot({ className, tone, size, pulse, ...props }: DotProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Dot, DotProps, DotTone, dotVariants };
+//# sourceMappingURL=Dot.d.cts.map

package/dist/components/Dot.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dot.d.cts","names":[],"sources":["../../src/components/Dot.tsx"],"mappings":";;;;cAKa,cAAW;;;;6CA2BtB;KAEU,UAAU;UAEL,iBAAiB,wBAAwB,oBAAoB;;iBAG9D,MAAM,WAAW,MAAM,MAAM,UAAU,SAAS,uCAAQ,IAAA"}

package/dist/components/DropdownMenu.d.cts

@@ -0,0 +1,34 @@
+import { DropdownMenu } from "radix-ui";
+import { ComponentProps } from "react";
+import { VariantProps } from "class-variance-authority";
+//#region src/components/DropdownMenu.d.ts
+/** shadcn's DropdownMenu on Radix: roving focus, typeahead, outside click, Escape. */
+declare function DropdownMenu$1(props: ComponentProps<typeof DropdownMenu.Root>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuTrigger(props: ComponentProps<typeof DropdownMenu.Trigger>): import("react/jsx-runtime").JSX.Element;
+/** A run of items under one label, so the separator between groups is structural. */
+declare function DropdownMenuGroup(props: ComponentProps<typeof DropdownMenu.Group>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuContent({ className, align, sideOffset, ...props }: ComponentProps<typeof DropdownMenu.Content>): import("react/jsx-runtime").JSX.Element;
+declare const dropdownMenuItemVariants: (props?: ({
+  variant?: "default" | "destructive" | null | undefined;
+  indented?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface DropdownMenuItemProps extends ComponentProps<typeof DropdownMenu.Item>, VariantProps<typeof dropdownMenuItemVariants> {}
+declare function DropdownMenuItem({ className, variant, indented, ...props }: DropdownMenuItemProps): import("react/jsx-runtime").JSX.Element;
+interface DropdownMenuCheckboxItemProps extends ComponentProps<typeof DropdownMenu.CheckboxItem>, VariantProps<typeof dropdownMenuItemVariants> {}
+/** A row that toggles: the check lives in the gutter so the label never shifts. */
+declare function DropdownMenuCheckboxItem({ className, variant, children, ...props }: DropdownMenuCheckboxItemProps): import("react/jsx-runtime").JSX.Element;
+/** The exclusive-choice group; pair it with DropdownMenuRadioItem. */
+declare function DropdownMenuRadioGroup(props: ComponentProps<typeof DropdownMenu.RadioGroup>): import("react/jsx-runtime").JSX.Element;
+interface DropdownMenuRadioItemProps extends ComponentProps<typeof DropdownMenu.RadioItem>, VariantProps<typeof dropdownMenuItemVariants> {}
+declare function DropdownMenuRadioItem({ className, variant, children, ...props }: DropdownMenuRadioItemProps): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSub(props: ComponentProps<typeof DropdownMenu.Sub>): import("react/jsx-runtime").JSX.Element;
+/** The row that opens a submenu; the chevron is part of the row, not the caller's job. */
+declare function DropdownMenuSubTrigger({ className, children, ...props }: ComponentProps<typeof DropdownMenu.SubTrigger>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSubContent({ className, sideOffset, ...props }: ComponentProps<typeof DropdownMenu.SubContent>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuLabel({ className, ...props }: ComponentProps<typeof DropdownMenu.Label>): import("react/jsx-runtime").JSX.Element;
+/** The keystroke printed at the right of a row; the row supplies the gap. */
+declare function DropdownMenuShortcut({ className, ...props }: ComponentProps<'span'>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSeparator({ className, ...props }: ComponentProps<typeof DropdownMenu.Separator>): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { DropdownMenu$1 as DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuCheckboxItemProps, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuItemProps, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuRadioItemProps, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, dropdownMenuItemVariants };
+//# sourceMappingURL=DropdownMenu.d.cts.map

package/dist/components/DropdownMenu.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownMenu.d.cts","names":[],"sources":["../../src/components/DropdownMenu.tsx"],"mappings":";;;;;iBAOgB,eAAa,OAAO,sBAAsB,aAAsB,oCAAK,IAAA;iBAIrE,oBAAoB,OAAO,sBAAsB,aAAsB,uCAAQ,IAAA;;iBAK/E,kBAAkB,OAAO,sBAAsB,aAAsB,qCAAM,IAAA;iBAQ3E,sBACd,WACA,OACA,eACG,SACF,sBAAsB,aAAsB,uCAAQ,IAAA;cAc1C,2BAAwB;;;6CAapC;UAEgB,8BACP,sBAAsB,aAAsB,OAAO,oBAAoB;iBAEjE,mBAAmB,WAAW,SAAS,aAAa,SAAS,oDAAqB,IAAA;UAoBjF,sCACP,sBAAsB,aAAsB,eAAe,oBAAoB;;iBAGzE,2BAA2B,WAAW,SAAS,aAAa,SAAS,4DAA6B,IAAA;;iBAgBlG,uBAAuB,OAAO,sBAAsB,aAAsB,0CAAW,IAAA;UAIpF,mCACP,sBAAsB,aAAsB,YAAY,oBAAoB;iBAEtE,wBAAwB,WAAW,SAAS,aAAa,SAAS,yDAA0B,IAAA;iBAe5F,gBAAgB,OAAO,sBAAsB,aAAsB,mCAAI,IAAA;;iBAKvE,yBACd,WACA,aACG,SACF,sBAAsB,aAAsB,0CAAW,IAAA;iBAa1C,yBACd,WACA,eACG,SACF,sBAAsB,aAAsB,0CAAW,IAAA;iBAa1C,oBAAoB,cAAc,SAAS,sBAAsB,aAAsB,qCAAM,IAAA;;iBAW7F,uBAAuB,cAAc,SAAS,qDAAsB,IAAA;iBAUpE,wBAAwB,cAAc,SAAS,sBAAsB,aAAsB,yCAAU,IAAA"}

package/dist/components/EmptyState.d.cts

@@ -0,0 +1,18 @@
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/EmptyState.d.ts
+interface EmptyStateProps extends Omit<ComponentProps<'div'>, 'title'> {
+  title: ReactNode;
+  description?: ReactNode;
+  /** Optional calls to action under the copy. */
+  children?: ReactNode;
+  /**
+   * Render the child element instead of a <div>, so an empty row inside a
+   * list stays an <li> and the list keeps its semantics.
+   */
+  asChild?: boolean;
+}
+/** The centred "nothing here yet" card every empty panel shares. */
+declare function EmptyState({ title, description, children, className, asChild, ...props }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { EmptyState, EmptyStateProps };
+//# sourceMappingURL=EmptyState.d.cts.map

package/dist/components/EmptyState.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.d.cts","names":[],"sources":["../../src/components/EmptyState.tsx"],"mappings":";;UAIiB,wBAAwB,KAAK;EAC5C,OAAO;EACP,cAAc;;EAEd,WAAW;;;;;EAKX;;;iBAIc,aAAa,OAAO,aAAa,UAAU,WAAW,YAAoB,SAAS,8CAAe,IAAA"}

package/dist/components/Input.d.cts

@@ -0,0 +1,20 @@
+import { ComponentProps } from "react";
+import { VariantProps } from "class-variance-authority";
+//#region src/components/Input.d.ts
+/**
+ * The shape both fields wear, so a single-line and a multi-line field in the
+ * same form agree on their well, their type ramp, and their invalid state.
+ * Textarea builds on it rather than restating it.
+ */
+declare const fieldVariants: (props?: ({
+  variant?: "bare" | "default" | null | undefined;
+  size?: "lg" | "md" | "sm" | "xs" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type FieldVariant = NonNullable<VariantProps<typeof fieldVariants>['variant']>;
+type FieldSize = NonNullable<VariantProps<typeof fieldVariants>['size']>;
+interface InputProps extends Omit<ComponentProps<'input'>, 'size'>, VariantProps<typeof fieldVariants> {}
+/** The one text field: deep well, quiet border, accent border on focus, red edge when invalid. */
+declare function Input({ className, type, variant, size, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { FieldSize, FieldVariant, Input, InputProps, fieldVariants };
+//# sourceMappingURL=Input.d.cts.map

package/dist/components/Input.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.d.cts","names":[],"sources":["../../src/components/Input.tsx"],"mappings":";;;;;;;;cASa,gBAAa;;;6CAwBzB;KAEW,eAAe,YAAY,oBAAoB;KAC/C,YAAY,YAAY,oBAAoB;UAEvC,mBAAmB,KAAK,kCAAkC,oBAAoB;;iBAG/E,QAAQ,WAAW,MAAM,SAAS,SAAS,SAAS,yCAAU,IAAA"}

package/dist/components/Kbd.d.cts

@@ -0,0 +1,7 @@
+import { ComponentProps } from "react";
+//#region src/components/Kbd.d.ts
+/** A key or key path, drawn as the leader hints draw them. */
+declare function Kbd({ className, ...props }: ComponentProps<'kbd'>): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Kbd };
+//# sourceMappingURL=Kbd.d.cts.map

package/dist/components/Kbd.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Kbd.d.cts","names":[],"sources":["../../src/components/Kbd.tsx"],"mappings":";;;iBAIgB,MAAM,cAAc,SAAS,oDAAqB,IAAA"}

package/dist/components/Label.d.cts

@@ -0,0 +1,8 @@
+import { Label } from "radix-ui";
+import { ComponentProps } from "react";
+//#region src/components/Label.d.ts
+/** A field's name: clicking it focuses the control, which a bare span never does. */
+declare function Label$1({ className, ...props }: ComponentProps<typeof Label.Root>): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Label$1 as Label };
+//# sourceMappingURL=Label.d.cts.map

package/dist/components/Label.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.d.cts","names":[],"sources":["../../src/components/Label.tsx"],"mappings":";;;;iBAKgB,UAAQ,cAAc,SAAS,sBAAsB,MAAe,oCAAK,IAAA"}

package/dist/components/Markdown.d.cts

@@ -0,0 +1,8 @@
+//#region src/components/Markdown.d.ts
+/** GitHub-flavored Markdown using the cockpit's safe, shared presentation. */
+declare function Markdown({ text }: {
+  text: string;
+}): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Markdown };
+//# sourceMappingURL=Markdown.d.cts.map

package/dist/components/Markdown.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Markdown.d.cts","names":[],"sources":["../../src/components/Markdown.tsx"],"mappings":";;iBA2DgB,WAAW;EAAU;gCAAc,IAAA"}

package/dist/components/MessageItem.d.cts

@@ -0,0 +1,71 @@
+import { StatusTone } from "./StatusBadge.cjs";
+import { ComponentProps, ReactNode } from "react";
+import { VariantProps } from "class-variance-authority";
+//#region src/components/MessageItem.d.ts
+/**
+ * The message item: the timeline card a tool call, a run, or a notice sits
+ * in. The item owns its outcome tone and its expand state; the header, body,
+ * and status parts read both from it, so a card composes the parts and never
+ * threads `expanded` by hand. A tool message in a web plugin is built from
+ * this, and so is the cockpit's own fallback item, which is what keeps them
+ * looking alike.
+ */
+interface MessageItemState {
+  tone: StatusTone;
+  /** Whether the header offers the toggle; an item that hides nothing offers none. */
+  expandable: boolean;
+  expanded: boolean;
+  toggle: () => void;
+}
+/** The enclosing item's state, for a part that lives deeper than the item's render prop. */
+declare function useMessageItem(): MessageItemState;
+/** The frame, wearing the edge STATUS_EDGE names for the tone, so the two never drift apart. */
+declare const messageItemVariants: (props?: ({
+  tone?: "accent" | "error" | "info" | "neutral" | "ok" | "running" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface MessageItemProps extends Omit<ComponentProps<'div'>, 'children'>, VariantProps<typeof messageItemVariants> {
+  /** Whether the header offers the expand toggle. A toggle that reveals nothing reads as broken, so the card decides. */
+  expandable?: boolean;
+  defaultExpanded?: boolean;
+  /** Controlled mode; pair with onExpandedChange. Omit it and the item keeps its own state. */
+  expanded?: boolean;
+  onExpandedChange?: (expanded: boolean) => void;
+  /** Plain content, or a function of the item's state for a card that picks its lines by `expanded`. */
+  children?: ReactNode | ((state: MessageItemState) => ReactNode);
+}
+declare function MessageItem({ className, tone, expandable, defaultExpanded, expanded, onExpandedChange, children, ...props }: MessageItemProps): import("react/jsx-runtime").JSX.Element;
+/** The tone a tool call's item wears: running while the tool runs, then its outcome. */
+declare function toolTone(state: {
+  running: boolean;
+  isError: boolean;
+}): StatusTone;
+/** The badge text a tone reads as when the header is not told otherwise; empty hides the badge. */
+declare const STATUS_LABEL: Readonly<Record<StatusTone, string>>;
+interface MessageItemHeaderProps extends Omit<ComponentProps<'div'>, 'title'> {
+  /** The bold label at the left: the tool name. */
+  title: ReactNode;
+  /** The badge text; defaults to the tone's label, null hides the badge. */
+  badge?: ReactNode | null;
+  /** The summary beside the title; it gets the remaining width. */
+  children?: ReactNode;
+}
+/** The title row: label, summary, the tone's badge, and the expand toggle when the item is expandable. */
+declare function MessageItemHeader({ className, title, badge, children, ...props }: MessageItemHeaderProps): import("react/jsx-runtime").JSX.Element;
+/** The recessed body under the header. */
+declare function MessageItemBody({ className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+/** The glyph a tone reads as in a status line. */
+declare const STATUS_GLYPH: Readonly<Record<StatusTone, string>>;
+declare const messageItemStatusVariants: (props?: ({
+  tone?: "accent" | "error" | "info" | "neutral" | "ok" | "running" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface MessageItemStatusProps extends ComponentProps<'span'>, VariantProps<typeof messageItemStatusVariants> {
+  /** Replaces the tone's glyph. */
+  glyph?: string;
+  /** Renders as a button that expands the item: the "N more line(s)" hint. Only className carries over. */
+  expands?: boolean;
+}
+/** The one-line status under a body: `◐ running`, `✗ failed`, `✓ done`, or the hint that more is hidden. */
+declare function MessageItemStatus({ className, tone, glyph, expands, children, ...props }: MessageItemStatusProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { MessageItem, MessageItemBody, MessageItemHeader, MessageItemHeaderProps, MessageItemProps, MessageItemState, MessageItemStatus, MessageItemStatusProps, STATUS_GLYPH, STATUS_LABEL, messageItemStatusVariants, messageItemVariants, toolTone, useMessageItem };
+//# sourceMappingURL=MessageItem.d.cts.map

package/dist/components/MessageItem.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageItem.d.cts","names":[],"sources":["../../src/components/MessageItem.tsx"],"mappings":";;;;;;;;;;;;UAgBiB;EACf,MAAM;;EAEN;EACA;EACA;;;iBAWc,kBAAkB;;cAKrB,sBAAmB;;6CAG9B;UAEe,yBACP,KAAK,oCAAoC,oBAAoB;;EAErE;EACA;;EAEA;EACA,oBAAoB;;EAEpB,WAAW,cAAc,OAAO,qBAAqB;;iBAGvC,cACd,WACA,MACA,YACA,iBACA,UACA,kBACA,aACG,SACF,+CAAgB,IAAA;;iBA4BH,SAAS;EAAS;EAAkB;IAAqB;;cAK5D,cAAc,SAAS,OAAO;UAS1B,+BAA+B,KAAK;;EAEnD,OAAO;;EAEP,QAAQ;;EAER,WAAW;;;iBAIG,oBAAoB,WAAW,OAAO,OAAO,aAAa,SAAS,qDAAsB,IAAA;;iBAoCzF,kBAAkB,cAAc,SAAS,oDAAqB,IAAA;;cAWjE,cAAc,SAAS,OAAO;cAS9B,4BAAyB;;6CAYpC;UAEe,+BAA+B,wBAAwB,oBAAoB;;EAE1F;;EAEA;;;iBAIc,oBACd,WACA,MACA,OACA,SACA,aACG,SACF,qDAAsB,IAAA"}

package/dist/components/MessageLines.d.cts

@@ -0,0 +1,24 @@
+import { MessageLineTone as MessageLineTone$1 } from "../types/tone.cjs";
+import { ComponentProps } from "react";
+//#region src/components/MessageLines.d.ts
+/** One line of a message body, with the tone the card's pure view logic chose for it. */
+type MessageLineTone = MessageLineTone$1;
+interface MessageLine {
+  text: string;
+  tone: MessageLineTone;
+  bold?: boolean;
+  indent?: boolean;
+}
+declare const messageLineVariants: (props?: ({
+  tone?: "accent" | "dim" | "error" | "hi" | "muted" | "success" | "text" | "warning" | null | undefined;
+  bold?: boolean | null | undefined;
+  indent?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface MessageLinesProps extends ComponentProps<'div'> {
+  lines: readonly MessageLine[];
+}
+/** A body of toned lines: what a card's view helper computed, drawn one line per row. */
+declare function MessageLines({ className, lines, ...props }: MessageLinesProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { MessageLine, MessageLineTone, MessageLines, MessageLinesProps, messageLineVariants };
+//# sourceMappingURL=MessageLines.d.cts.map

package/dist/components/MessageLines.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageLines.d.cts","names":[],"sources":["../../src/components/MessageLines.tsx"],"mappings":";;;;KAMY,kBAAkB;UAEb;EACf;EACA,MAAM;EACN;EACA;;cAGW,sBAAmB;;;;6CAgB9B;UAEe,0BAA0B;EACzC,gBAAgB;;;iBAIF,eAAe,WAAW,UAAU,SAAS,gDAAiB,IAAA"}