laif-ds 0.2.44 → 0.2.45

package/dist/agent-docs/components/ChatMessage.md

@@ -0,0 +1,61 @@
+ # ChatMessage
+ 
+ ## Overview
+ 
+ Render a single chat message bubble with markdown, optional attachments preview, tool invocation blocks, reasoning collapsible, time stamps, actions and inline edit for assistant messages.
+ 
+ ---
+ 
+ ## Props
+ 
+ | Prop            | Type                     | Default     | Description |
+ | --------------- | ------------------------ | ----------- | ----------- |
+ | `id`            | `string`                 | **required**| Message id. |
+ | `role`          | `"user" | "assistant" | (string)` | **required**| Role determines bubble style and alignment. |
+ | `content`       | `string`                 | **required**| Message text (markdown supported). |
+ | `createdAt`     | `Date`                   | `undefined` | Optional timestamp. |
+ | `experimental_attachments` | `{ url: string; name?: string; contentType?: string }[]` | `undefined` | Files to preview (user messages). |
+ | `toolInvocations` | `ToolInvocation[]`     | `undefined` | Tool call states (`call`, `result`). |
+ | `parts`         | `MessagePart[]`          | `undefined` | Mixed message content (text/reasoning/tool-invocation). |
+ | `showTimeStamp` | `boolean`                | `false`     | Show `createdAt` under bubble. |
+ | `animation`     | `"none" | "slide" | "scale" | "fade"` | `"scale"` | Entry animation.
+ | `actions`       | `React.ReactNode`        | `undefined` | Action buttons area (shown on hover). |
+ | `editable`      | `boolean`                | `false`     | Force edit UI even without `onEdit`. |
+ | `onEdit`        | `(newContent: string) => void` | `undefined` | Show edit UI on assistant messages. |
+ | `onMessageSave` | `(messageId: string, content: string) => void` | `undefined` | Save callback (rendered in action area). |
+ 
+ ---
+ 
+ ## Behavior
+ 
+ - **User vs Assistant**: Different bubble alignment and token styles.
+ - **Markdown**: Rendered via `MarkdownRenderer` with async suspense fallback.
+ - **Attachments**: User attachments rendered as `FilePreview` chips.
+ - **Tool calls**: `ToolInvocation` blocks show calling/result state with icons.
+ - **Edit**: Assistant messages can be edited inline (Enter save, Esc cancel).
+ 
+ ---
+ 
+ ## Examples
+ 
+ ```tsx
+ import { ChatMessage } from "laif-ds";
+ 
+ export function Examples() {
+   return (
+     <div className="space-y-4">
+       <ChatMessage id="u1" role="user" content="Hello" createdAt={new Date()} showTimeStamp />
+       <ChatMessage id="a1" role="assistant" content="Hi there!" createdAt={new Date()} showTimeStamp />
+       <ChatMessage id="a2" role="assistant" content={"**Bold** and `code`"} />
+     </div>
+   );
+ }
+ ```
+ 
+ ---
+ 
+ ## Notes
+ 
+ - **Reasoning**: Use `parts` with `{ type: "reasoning", reasoning: string }` to show collapsible reasoning.
+ - **Actions**: Pass small `Button`s or icons (from `laif-ds`) via `actions`.
+ 

package/dist/agent-docs/components/Checkbox.md

@@ -0,0 +1,135 @@
+ # Checkbox
+ 
+ ## Overview
+ 
+ Accessible checkbox with support for checked, unchecked, and indeterminate states. Keyboard focus styles and disabled state included.
+ 
+ ---
+ 
+ ## Props
+ 
+ ### Checkbox (Root)
+ 
+ | Prop               | Type                                   | Default      | Description                                        |
+ | ------------------ | -------------------------------------- | ------------ | -------------------------------------------------- |
+ | `checked`          | `boolean \| "indeterminate"`          | `false`      | Current state of the checkbox.                     |
+ | `disabled`         | `boolean`                               | `false`      | Disables interactions.                             |
+ | `onCheckedChange`  | `(checked: boolean) => void`            | `undefined`  | Called when the state changes.                     |
+ | `id`               | `string`                                | `undefined`  | Useful when paired with a label's `htmlFor`.       |
+ | `className`        | `string`                                | `""`         | Additional classes for size/layout.                 |
+ 
+ ---
+ 
+ ## Behavior
+ 
+ - **Indeterminate**: Use `checked="indeterminate"` to display a dash indicator.
+ - **Focus & invalid**: Visual feedback for focus and invalid states is included.
+ - **Labeling**: Pair with `Label` and `htmlFor` for accessible labeling.
+ 
+ ---
+ 
+ ## Examples
+ 
+ ### Default
+ 
+ ```tsx
+ import { Checkbox } from "laif-ds";
+ import { Label } from "laif-ds";
+ 
+ export function DefaultCheckbox() {
+   return (
+     <div className="flex items-center gap-2">
+       <Checkbox id="terms" />
+       <Label htmlFor="terms">Accept terms and conditions</Label>
+     </div>
+   );
+ }
+ ```
+ 
+ ### Indeterminate
+ 
+ ```tsx
+ import { Checkbox } from "laif-ds";
+ import { Label } from "laif-ds";
+ 
+ export function IndeterminateCheckbox() {
+   return (
+     <div className="flex items-center gap-2">
+       <Checkbox id="partial" checked="indeterminate" />
+       <Label htmlFor="partial">Partially selected options</Label>
+     </div>
+   );
+ }
+ ```
+ 
+ ### Disabled
+ 
+ ```tsx
+ import { Checkbox } from "laif-ds";
+ import { Label } from "laif-ds";
+ 
+ export function DisabledCheckbox() {
+   return (
+     <div className="flex items-center gap-2">
+       <Checkbox id="disabled" disabled />
+       <Label htmlFor="disabled">Accept terms and conditions</Label>
+     </div>
+   );
+ }
+ ```
+ 
+ ### Select All Pattern
+ 
+ ```tsx
+ import * as React from "react";
+ import { Checkbox } from "laif-ds";
+ import { Label } from "laif-ds";
+ 
+ export function SelectAllExample() {
+   const [items, setItems] = React.useState([
+     { id: "item1", label: "Item 1", checked: false },
+     { id: "item2", label: "Item 2", checked: true },
+     { id: "item3", label: "Item 3", checked: false },
+   ]);
+ 
+   const checkedCount = items.filter((i) => i.checked).length;
+   const selectAllState =
+     checkedCount === 0 ? false : checkedCount === items.length ? true : ("indeterminate" as const);
+ 
+   const handleSelectAll = () => {
+     const newChecked = selectAllState !== true;
+     setItems(items.map((i) => ({ ...i, checked: newChecked })));
+   };
+ 
+   return (
+     <div className="space-y-4">
+       <div className="flex items-center gap-2 border-b pb-2">
+         <Checkbox id="select-all" checked={selectAllState} onCheckedChange={handleSelectAll} />
+         <Label htmlFor="select-all">Select All ({checkedCount}/{items.length})</Label>
+       </div>
+       <div className="space-y-2 pl-6">
+         {items.map((item) => (
+           <div key={item.id} className="flex items-center gap-2">
+             <Checkbox
+               id={item.id}
+               checked={item.checked}
+               onCheckedChange={(checked) =>
+                 setItems(items.map((i) => (i.id === item.id ? { ...i, checked: checked as boolean } : i)))
+               }
+             />
+             <Label htmlFor={item.id}>{item.label}</Label>
+           </div>
+         ))}
+       </div>
+     </div>
+   );
+ }
+ ```
+ 
+ ---
+ 
+ ## Notes
+ 
+ - **Indicator**: A check icon is shown when `checked=true`, a dash for indeterminate.
+ - **Disabled**: Applies reduced opacity and disables pointer events.
+ 

package/dist/agent-docs/components/CircularProgress.md

@@ -0,0 +1,49 @@
+ # CircularProgress
+ 
+ ## Overview
+ 
+ SVG-based circular progress with customizable size, stroke widths, end-cap shape, and optional centered label.
+ 
+ ---
+ 
+ ## Props
+ 
+ | Prop                | Type                                 | Default     | Description |
+ | ------------------- | ------------------------------------ | ----------- | ----------- |
+ | `value`             | `number`                              | **required**| Percentage [0-100]. |
+ | `renderLabel`       | `(progress: number) => number|string`| `undefined` | Custom label renderer. |
+ | `size`              | `number`                              | `100`       | Diameter in px. |
+ | `strokeWidth`       | `number`                              | `undefined` | Overrides both circle and progress stroke widths. |
+ | `circleStrokeWidth` | `number`                              | `10`        | Base circle stroke width. |
+ | `progressStrokeWidth`| `number`                             | `10`        | Progress stroke width. |
+ | `shape`             | `"square" | "round"`                 | `"round"`  | Stroke line cap. |
+ | `className`         | `string`                              | `undefined` | Base circle classes. |
+ | `progressClassName` | `string`                              | `undefined` | Progress circle classes. |
+ | `labelClassName`    | `string`                              | `undefined` | Center label classes. |
+ | `showLabel`         | `boolean`                             | `false`     | Show `{value}` (or `renderLabel(value)`) inside.
+ 
+ ---
+ 
+ ## Examples
+ 
+ ```tsx
+ import { CircularProgress } from "laif-ds";
+ 
+ export function Basic() {
+   return <CircularProgress value={65} size={100} showLabel />;
+ }
+ 
+ export function CustomLabel() {
+   return (
+     <CircularProgress value={42} size={120} showLabel renderLabel={(v) => `${v}%`} />
+   );
+ }
+ ```
+ 
+ ---
+ 
+ ## Notes
+ 
+ - **Theming**: Base circle uses `stroke-d-primary/25`; progress uses `stroke-d-primary`.
+ - **Performance**: Pure SVG; safe to animate via CSS if needed.
+ 

package/dist/agent-docs/components/CodeHighlighter.md

@@ -0,0 +1,31 @@
+# CodeHighlighter
+
+## Overview
+
+Client-side code highlighter using Shiki with internal loading state and graceful fallback.
+
+---
+
+## Props
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `children` | `string` | Code string |
+| `language` | `string` | Shiki language key |
+| `className` | `string` | Optional classes for `<pre>` |
+
+---
+
+## Example
+
+```tsx
+import CodeHighlighter from "laif-ds/CodeHighlighter";
+
+export function CodeExample() {
+  return (
+    <CodeHighlighter language="tsx" className="rounded-md border p-3 text-sm">
+      {`export const x = (n: number) => n * 2`}
+    </CodeHighlighter>
+  );
+}
+```

package/dist/agent-docs/components/Collapsible.md

@@ -0,0 +1,95 @@
+ # Collapsible
+ 
+ ## Overview
+ 
+ A simple container that can show/hide content. Provides a trigger element and animated content area. Useful for progressive disclosure of details.
+ 
+ ---
+ 
+ ## Props
+ 
+ ### Collapsible (Root)
+ 
+ | Prop           | Type                 | Default     | Description                                   |
+ | -------------- | -------------------- | ----------- | --------------------------------------------- |
+ | `open`         | `boolean`            | `undefined` | Controlled open state.                        |
+ | `defaultOpen`  | `boolean`            | `false`     | Uncontrolled initial open state.              |
+ | `onOpenChange` | `(open: boolean) => void` | `undefined` | Called when open state changes.            |
+ | `className`    | `string`             | `""`        | Additional classes for the root.              |
+ 
+ ### Subcomponents
+ 
+ - `CollapsibleTrigger`: The element that toggles visibility (can be used with `asChild`).
+ - `CollapsibleContent`: The collapsible content region.
+ 
+ ---
+ 
+ ## Behavior
+ 
+ - **Controlled**: Use `open` + `onOpenChange` to control state.
+ - **Uncontrolled**: Use `defaultOpen` for initial state.
+ - **Accessibility**: Works with button triggers and keyboard navigation.
+ 
+ ---
+ 
+ ## Examples
+ 
+ ### Basic
+ 
+ ```tsx
+ import { useState } from "react";
+ import { Button } from "laif-ds";
+ import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "laif-ds";
+ 
+ export function BasicCollapsible() {
+   const [isOpen, setIsOpen] = useState(false);
+   return (
+     <Collapsible open={isOpen} onOpenChange={setIsOpen} className="w-[350px] space-y-2">
+       <div className="flex items-center justify-between gap-4 px-4">
+         <h4 className="text-sm font-semibold">Details</h4>
+         <CollapsibleTrigger asChild>
+           <Button variant="ghost" size="sm">Toggle</Button>
+         </CollapsibleTrigger>
+       </div>
+       <CollapsibleContent className="space-y-2">
+         <div className="border-d-border rounded-md border px-4 py-3 text-sm">Item A</div>
+         <div className="border-d-border rounded-md border px-4 py-3 text-sm">Item B</div>
+         <div className="border-d-border rounded-md border px-4 py-3 text-sm">Item C</div>
+       </CollapsibleContent>
+     </Collapsible>
+   );
+ }
+ ```
+ 
+ ### Open by Default
+ 
+ ```tsx
+ import { useState } from "react";
+ import { Button } from "laif-ds";
+ import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "laif-ds";
+ 
+ export function OpenByDefault() {
+   const [isOpen, setIsOpen] = useState(true);
+   return (
+     <Collapsible open={isOpen} onOpenChange={setIsOpen} className="w-[350px] space-y-2">
+       <div className="flex items-center justify-between gap-4 px-4">
+         <h4 className="text-sm font-semibold">Details</h4>
+         <CollapsibleTrigger asChild>
+           <Button variant="ghost" size="sm">Toggle</Button>
+         </CollapsibleTrigger>
+       </div>
+       <CollapsibleContent className="space-y-2">
+         <div className="rounded-md border px-4 py-3 text-sm">This is additional information.</div>
+       </CollapsibleContent>
+     </Collapsible>
+   );
+ }
+ ```
+ 
+ ---
+ 
+ ## Notes
+ 
+ - **asChild**: Wrap your own button/link as trigger while preserving styles.
+ - **Styling**: Use `className` on root/content to adjust spacing and borders.
+ 

package/dist/agent-docs/components/Command.md

@@ -0,0 +1,142 @@
+ # Command
+ 
+ ## Overview
+ 
+ Command palette and command list built on `cmdk`. Provides an input for filtering, groups, items, separators, and a dialog wrapper for modal usage.
+ 
+ ---
+ 
+ ## Props
+ 
+ ### Command (Root)
+ 
+ | Prop        | Type              | Default     | Description                                        |
+ | ----------- | ----------------- | ----------- | -------------------------------------------------- |
+ | `className` | `string`          | `""`        | Additional classes for layout/size.                 |
+ | `children`  | `React.ReactNode` | **required**| Compose with input, list, groups, items, etc.      |
+ 
+ ### CommandDialog
+ 
+ Wraps a `Dialog` and renders a `Command` inside.
+ 
+ | Prop           | Type                     | Default                                | Description                      |
+ | -------------- | ------------------------ | -------------------------------------- | -------------------------------- |
+ | `open`         | `boolean`                | `undefined`                            | Controlled open state.           |
+ | `onOpenChange` | `(open: boolean) => any` | `undefined`                            | Called when dialog state changes.|
+ | `title`        | `string`                 | `"Command Palette"`                   | Accessible dialog title.         |
+ | `description`  | `string`                 | `"Search for a command to run..."`    | Accessible dialog description.   |
+ 
+ ### Subcomponents
+ 
+ - `CommandInput`: Search input with a leading search icon.
+ - `CommandList`: Scrollable list container.
+ - `CommandEmpty`: Empty state when no results match.
+ - `CommandGroup`: Group with optional `heading` prop.
+ - `CommandItem`: Selectable item (supports disabled state).
+ - `CommandSeparator`: Visual separator between groups.
+ - `CommandShortcut`: Right-aligned shortcut hint (e.g., `⌘K`).
+ 
+ ---
+ 
+ ## Behavior
+ 
+ - **Filtering**: Typing in `CommandInput` filters visible items.
+ - **Keyboard**: Arrow keys navigate, Enter selects, Esc can close the dialog.
+ - **Accessibility**: Proper roles/aria set by `cmdk` and dialog wrapper.
+ 
+ ---
+ 
+ ## Examples
+ 
+ ### Basic List
+ 
+ ```tsx
+ import {
+   Command,
+   CommandEmpty,
+   CommandGroup,
+   CommandInput,
+   CommandItem,
+   CommandList,
+   CommandSeparator,
+   CommandShortcut,
+ } from "laif-ds";
+ 
+ export function BasicCommand() {
+   return (
+     <Command className="border-d-border w-[400px] rounded-lg border shadow-md">
+       <CommandInput placeholder="Type a command or search..." />
+       <CommandList>
+         <CommandEmpty>No results found.</CommandEmpty>
+         <CommandGroup heading="Suggestions">
+           <CommandItem>Calendar</CommandItem>
+           <CommandItem>Search</CommandItem>
+           <CommandItem>Settings</CommandItem>
+         </CommandGroup>
+         <CommandSeparator />
+         <CommandGroup heading="User">
+           <CommandItem>
+             Profile
+             <CommandShortcut>⌘P</CommandShortcut>
+           </CommandItem>
+           <CommandItem>Billing</CommandItem>
+           <CommandItem>Logout</CommandItem>
+         </CommandGroup>
+       </CommandList>
+     </Command>
+   );
+ }
+ ```
+ 
+ ### Command Dialog
+ 
+ ```tsx
+ import { useState } from "react";
+ import { Button } from "laif-ds";
+ import {
+   CommandDialog,
+   CommandInput,
+   CommandList,
+   CommandEmpty,
+   CommandGroup,
+   CommandItem,
+   CommandSeparator,
+ } from "laif-ds";
+ 
+ export function CommandDialogExample() {
+   const [open, setOpen] = useState(false);
+   return (
+     <>
+       <Button onClick={() => setOpen(true)} variant="outline">
+         Open Command Dialog
+       </Button>
+       <CommandDialog open={open} onOpenChange={setOpen}>
+         <CommandInput placeholder="Type a command or search..." />
+         <CommandList>
+           <CommandEmpty>No results found.</CommandEmpty>
+           <CommandGroup heading="Suggestions">
+             <CommandItem>Calendar</CommandItem>
+             <CommandItem>Search</CommandItem>
+             <CommandItem>Settings</CommandItem>
+           </CommandGroup>
+           <CommandSeparator />
+           <CommandGroup heading="User">
+             <CommandItem>Profile</CommandItem>
+             <CommandItem>Billing</CommandItem>
+             <CommandItem>Logout</CommandItem>
+           </CommandGroup>
+         </CommandList>
+       </CommandDialog>
+     </>
+   );
+ }
+ ```
+ 
+ ---
+ 
+ ## Notes
+ 
+ - **Shortcuts**: Use `CommandShortcut` for right-aligned hints within `CommandItem`.
+ - **Layout**: Set explicit width on `Command` (e.g., `w-[400px]`) when used inline.
+ - **Dialog**: `CommandDialog` hides its title/description visually but preserves accessibility.
+ 

package/dist/agent-docs/components/Confirmer.md

@@ -0,0 +1,175 @@
+ # Confirmer
+ 
+ ## Overview
+ 
+ Promise-based confirmation dialog utility built on top of `AlertDialog`. Mount the `Confirmer` component once, then call `confirm()` to open a dialog and await the user decision.
+ 
+ ---
+ 
+ ## API
+ 
+ ### `Confirmer` (Component)
+ 
+ Mount this once at app root (or Story scope) to enable dialogs.
+ 
+ ```tsx
+ import { Confirmer } from "laif-ds";
+ 
+ export function AppRoot() {
+   return (
+     <>
+       {/* ...your app... */}
+       <Confirmer />
+     </>
+   );
+ }
+ ```
+ 
+ ### `confirm(options)`
+ 
+ Returns a Promise that resolves when the user confirms and rejects when the user cancels.
+ 
+ ```ts
+ type ConfirmOptions = {
+   title?: React.ReactNode;
+   description?: React.ReactNode;
+   cancelText?: React.ReactNode;
+   actionText?: React.ReactNode;
+   CancelProps?: React.ComponentProps<typeof AlertDialogCancel>;
+   ActionProps?: React.ComponentProps<typeof Button>;
+   variant?: "default" | "destructive";
+ };
+ 
+ declare function confirm(options: ConfirmOptions): Promise<boolean>;
+ declare function safeConfirm(options: ConfirmOptions): Promise<boolean | undefined>;
+ ```
+ 
+ - `variant`: when set to `"destructive"`, shows a destructive style and warning icon.
+ - `safeConfirm`: resolves `undefined` instead of throwing on cancel.
+ 
+ ---
+ 
+ ## Behavior
+ 
+ - **Resolve/Reject**: `confirm()` resolves on action click, rejects on cancel or close.
+ - **Destructive mode**: Adds an alert icon and uses destructive button variant.
+ - **Custom buttons**: Pass `ActionProps` and `CancelProps` to customize.
+ 
+ ---
+ 
+ ## Examples
+ 
+ ### Destructive
+ 
+ ```tsx
+ import { Button } from "laif-ds";
+ import { Confirmer, confirm } from "laif-ds";
+ 
+ export function DeleteFile() {
+   const onClick = async () => {
+     try {
+       await confirm({
+         variant: "destructive",
+         title: "Permanently delete file?",
+         description: "This action cannot be undone. The file will be removed permanently.",
+         cancelText: "Cancel",
+         actionText: "Delete",
+       });
+       console.log("File deleted");
+     } catch {
+       console.log("Deletion cancelled");
+     }
+   };
+ 
+   return (
+     <>
+       <Button variant="destructive" onClick={onClick}>Delete File</Button>
+       <Confirmer />
+     </>
+   );
+ }
+ ```
+ 
+ ### Custom Text and Buttons
+ 
+ ```tsx
+ import { Button } from "laif-ds";
+ import { Confirmer, confirm } from "laif-ds";
+ 
+ export function PublishArticle() {
+   const onClick = async () => {
+     try {
+       await confirm({
+         title: "Publish article?",
+         description: "This will make your article visible to the public.",
+         cancelText: "Save as draft",
+         actionText: "Publish now",
+         ActionProps: {
+           variant: "default",
+         },
+       });
+       console.log("Article published");
+     } catch {
+       console.log("Article saved as draft");
+     }
+   };
+ 
+   return (
+     <>
+       <Button onClick={onClick}>Publish Article</Button>
+       <Confirmer />
+     </>
+   );
+ }
+ ```
+ 
+ ### Multiple Confirmers (independent flows)
+ 
+ ```tsx
+ import { Button } from "laif-ds";
+ import { Confirmer, confirm } from "laif-ds";
+ 
+ export function MultipleActions() {
+   const accept1 = async () => {
+     try {
+       await confirm({ title: "Confirm action 1", description: "This is the first confirmation dialog." });
+       console.log("Action 1 confirmed");
+     } catch {
+       console.log("Action 1 cancelled");
+     }
+   };
+ 
+   const accept2 = async () => {
+     try {
+       await confirm({
+         title: "Confirm action 2",
+         description: "This is the second confirmation dialog.",
+         cancelText: "Reject",
+         actionText: "Accept",
+       });
+       console.log("Action 2 confirmed");
+     } catch {
+       console.log("Action 2 cancelled");
+     }
+   };
+ 
+   return (
+     <>
+       <div className="flex gap-4">
+         <Button onClick={accept1}>Action 1</Button>
+         <Button onClick={accept2}>Action 2</Button>
+       </div>
+       <Confirmer />
+     </>
+   );
+ }
+ ```
+ 
+ ---
+ 
+ ## Notes
+ 
+ - **Mount once**: Add a single `<Confirmer />` near app root.
+ - **Error handling**: Use `try/catch` with `confirm()`; or `safeConfirm()` to avoid throwing.
+ - **Theming**: `variant="destructive"` changes icon and button styling accordingly.
+