@peasant-labs/fairtrade 0.0.0

package/dist/lib/types/Tabs.d.ts

@@ -0,0 +1,48 @@
+/**
+ * @typedef {Object} TabItem
+ * @property {string} id        stable id for the tab/panel pair (used for ids + aria wiring)
+ * @property {React.ReactNode} label  the tab's visible label; force-lowercased as ui chrome, so pass a section name, never user content / proper nouns
+ * @property {number} [count]   optional count shown in a .cnt badge after the label
+ * @property {React.ReactNode} content  the panel's content
+ */
+/**
+ * Self-contained ARIA tablist matching the trails-section specimen. Renders a
+ * `role="tablist".tabs` of `role="tab".tab` buttons (roving tabindex, `.active`
+ * on the selected tab, optional `.cnt` count) controlling `role="tabpanel".tabpanel`
+ * regions whose `hidden` attribute is toggled. Keyboard: Arrow/Home/End move
+ * selection (also focusing the tab), click selects + focuses. Ports the delegated
+ * logic from App.jsx's tablist useEffect.
+ *
+ * Supports controlled (`value` + `onChange`) and uncontrolled (`defaultTab`) use.
+ *
+ * @param {Object} props
+ * @param {TabItem[]} props.tabs           the tabs to render
+ * @param {string} [props.defaultTab]      initial selected tab id (uncontrolled; defaults to tabs[0].id)
+ * @param {string} [props.value]           selected tab id (controlled)
+ * @param {(id: string) => void} [props.onChange]  called with the newly selected tab id
+ * @param {string} [props['aria-label']]   accessible name for the tablist (default "tabs")
+ */
+export default function Tabs({ tabs, defaultTab, value, onChange, "aria-label": ariaLabel }: {
+    tabs: TabItem[];
+    defaultTab?: string;
+    value?: string;
+    onChange?: (id: string) => void;
+}): any;
+export type TabItem = {
+    /**
+     * stable id for the tab/panel pair (used for ids + aria wiring)
+     */
+    id: string;
+    /**
+     * the tab's visible label; force-lowercased as ui chrome, so pass a section name, never user content / proper nouns
+     */
+    label: React.ReactNode;
+    /**
+     * optional count shown in a .cnt badge after the label
+     */
+    count?: number;
+    /**
+     * the panel's content
+     */
+    content: React.ReactNode;
+};

package/dist/lib/types/Tabs.stories.d.ts

@@ -0,0 +1,75 @@
+export default meta;
+export const Playground: {};
+export namespace SecondSelected {
+    namespace args {
+        let defaultTab: string;
+    }
+}
+export namespace NoCounts {
+    export namespace args_1 {
+        let tabs: {
+            id: string;
+            label: string;
+            content: any;
+        }[];
+    }
+    export { args_1 as args };
+}
+export namespace TwoTabs {
+    let args_2: {
+        tabs: {
+            id: string;
+            label: string;
+            count: number;
+            content: any;
+        }[];
+        'aria-label': string;
+    };
+    export { args_2 as args };
+}
+export namespace Controlled {
+    function render(args: any): any;
+    function play({ canvasElement }: {
+        canvasElement: any;
+    }): Promise<void>;
+}
+export namespace Interaction {
+    export namespace args_3 {
+        let defaultTab_1: string;
+        export { defaultTab_1 as defaultTab };
+    }
+    export { args_3 as args };
+    export function play_1({ canvasElement }: {
+        canvasElement: any;
+    }): Promise<void>;
+    export { play_1 as play };
+}
+declare namespace meta {
+    export let title: string;
+    export { Tabs as component };
+    export let tags: string[];
+    export let decorators: Function[];
+    export let argTypes: {
+        defaultTab: {
+            control: string;
+            options: string[];
+        };
+        'aria-label': {
+            control: string;
+        };
+        tabs: {
+            control: boolean;
+        };
+    };
+    let args_4: {
+        tabs: {
+            id: string;
+            label: string;
+            count: number;
+            content: any;
+        }[];
+        'aria-label': string;
+    };
+    export { args_4 as args };
+}
+import Tabs from './Tabs.jsx';

package/dist/lib/types/TimeStrip.d.ts

@@ -0,0 +1,12 @@
+export function TimeStrip({ buckets, value, defaultValue, onScrub, branches, label, maxBranchChips, className, ...rest }: {
+    [x: string]: any;
+    buckets?: any[];
+    value: any;
+    defaultValue?: number;
+    onScrub: any;
+    branches?: any[];
+    label?: string;
+    maxBranchChips?: number;
+    className?: string;
+}): any;
+export default TimeStrip;

package/dist/lib/types/TimeStrip.stories.d.ts

@@ -0,0 +1,30 @@
+export default meta;
+export namespace Default {
+    function render(): any;
+    function play({ canvasElement }: {
+        canvasElement: any;
+    }): Promise<void>;
+}
+export namespace Sparse {
+    export function render_1(): any;
+    export { render_1 as render };
+    export function play_1({ canvasElement }: {
+        canvasElement: any;
+    }): Promise<void>;
+    export { play_1 as play };
+}
+export namespace Uncontrolled {
+    export let name: string;
+    export function render_2(): any;
+    export { render_2 as render };
+}
+declare namespace meta {
+    export let title: string;
+    export { TimeStrip as component };
+    export let tags: string[];
+    export let decorators: Function[];
+    export namespace parameters {
+        let layout: string;
+    }
+}
+import TimeStrip from './TimeStrip.jsx';

package/dist/lib/types/Timeline.d.ts

@@ -0,0 +1,192 @@
+/**
+ * ThinkingBlock — a collapsible reasoning panel. Controlled when `open`/`onToggle`
+ * are passed, otherwise it self-manages. Header is a real <button aria-expanded>;
+ * the body lazy-mounts on open so collapsed reasoning is absent from the a11y tree.
+ *
+ * @param {Object} props
+ * @param {Thinking} props.block            the reasoning block (words + text)
+ * @param {boolean} [props.open]            controlled open state
+ * @param {() => void} [props.onToggle]     controlled toggle handler
+ */
+export function ThinkingBlock({ block, open: openProp, onToggle }: {
+    block: Thinking;
+    open?: boolean;
+    onToggle?: () => void;
+}): any;
+/**
+ * ToolCall — one collapsible tool call. Controlled when `open`/`onToggle` are passed
+ * (lets a host own expand-all), otherwise self-managed. Header is a real
+ * <button aria-expanded>; the body lazy-mounts on open. `renderTool` overrides the
+ * built-in body dispatch.
+ *
+ * @param {Object} props
+ * @param {Tool} props.tool
+ * @param {number} [props.index]                     position, passed to renderTool
+ * @param {boolean} [props.open]                     controlled open state
+ * @param {() => void} [props.onToggle]              controlled toggle handler
+ * @param {(tool: Tool, i: number) => React.ReactNode} [props.renderTool]  custom body renderer
+ */
+export function ToolCall({ tool, index, open: openProp, onToggle, renderTool }: {
+    tool: Tool;
+    index?: number;
+    open?: boolean;
+    onToggle?: () => void;
+    renderTool?: (tool: Tool, i: number) => React.ReactNode;
+}): any;
+/**
+ * TimelineItem — renders one node on the spine, switching on `kind`. Owns the
+ * decorative dot, the role glyph + head meta and the body slot. Exported so a host
+ * can map its own array and compose custom containers.
+ *
+ * @param {Object} props
+ * @param {TimelineItem} props.item
+ * @param {(tool: Tool, i: number) => React.ReactNode} [props.renderTool]
+ * @param {(item: TimelineItem) => React.ReactNode} [props.renderBody]
+ */
+export function TimelineItem({ item, renderTool, renderBody }: {
+    item: TimelineItem;
+    renderTool?: (tool: Tool, i: number) => React.ReactNode;
+    renderBody?: (item: TimelineItem) => React.ReactNode;
+}): any;
+export type TimelineItem = {
+    id: string;
+    /**
+     * node type on the spine
+     */
+    kind: "turn" | "phase" | "checkpoint";
+    /**
+     * (kind: turn)
+     */
+    role?: "user" | "assistant" | "subagent" | "tool" | "system";
+    /**
+     * turn label e.g. '2a' (tabular)
+     */
+    label?: string;
+    /**
+     * 0 = main thread; > 0 = subagent inset
+     */
+    depth?: number;
+    /**
+     * subagent name when depth > 0
+     */
+    subagent?: string;
+    /**
+     * relative, e.g. '8m ago'
+     */
+    time?: string;
+    /**
+     * absolute, used for title=
+     */
+    longTime?: string;
+    /**
+     * the turn text (passed to renderBody)
+     */
+    body?: string;
+    /**
+     * collapsible reasoning block
+     */
+    thinking?: Thinking;
+    /**
+     * collapsible tool calls
+     */
+    tools?: Tool[];
+    tokens?: {
+        in: number;
+        out: number;
+    };
+    /**
+     * turn surfaced a tool error
+     */
+    error?: boolean;
+    /**
+     * marks the last assistant turn; caps the spine below it
+     */
+    final?: boolean;
+    /**
+     * (kind: phase) e.g. 'debugging'
+     */
+    phaseLabel?: string;
+    /**
+     * lucide phase icon
+     */
+    icon?: React.ComponentType<any>;
+    /**
+     * 'turns 3–4 · 1 error'
+     */
+    range?: string;
+    /**
+     * (kind: checkpoint) commit hash
+     */
+    hash?: string;
+    /**
+     * commit message
+     */
+    msg?: string;
+    stat?: {
+        files: number;
+        adds: number;
+        dels: number;
+    };
+};
+/**
+ * Timeline — a vertical spine for a whole session: phase dividers, role-tinted
+ * turn nodes, collapsible thinking + tool calls, subagent insets and commit
+ * checkpoints, read top to bottom. The vertical sibling of the horizontal Steps
+ * wizard; they share no geometry. Role is carried by glyph + label, never tint
+ * alone; the spine stays continuous even through subagent insets.
+ *
+ * Emits `<ol class="tl" aria-label>` — turns are an ordered list so DOM order
+ * equals visual order equals conversation order. Renders an EmptyState-style
+ * `.empty` block when `items` is empty.
+ *
+ * @param {Object} props
+ * @param {TimelineItem[]} [props.items=[]]                           ordered top->bottom event stream
+ * @param {(tool: Tool, i: number) => React.ReactNode} [props.renderTool]  per-tool body override
+ * @param {(item: TimelineItem) => React.ReactNode} [props.renderBody]     per-role body override
+ * @param {boolean} [props.dense=false]                              compact rhythm for sidebars
+ * @param {string} [props.ariaLabel='conversation timeline']         label for the <ol> landmark
+ */
+export default function Timeline({ items, renderTool, renderBody, dense, ariaLabel }: {
+    items?: TimelineItem[];
+    renderTool?: (tool: Tool, i: number) => React.ReactNode;
+    renderBody?: (item: TimelineItem) => React.ReactNode;
+    dense?: boolean;
+    ariaLabel?: string;
+}): any;
+export type Thinking = {
+    /**
+     * word count shown next to the toggle (tabular)
+     */
+    words: number;
+    /**
+     * the reasoning text (kept in original case)
+     */
+    text: string;
+};
+export type Tool = {
+    id: string;
+    /**
+     * switch for the built-in renderer
+     */
+    kind: "read" | "grep" | "edit" | "write" | "bash" | "task" | "webfetch" | string;
+    /**
+     * content-case label e.g. 'Read' (NEVER lowercased)
+     */
+    name: string;
+    /**
+     * one-line summary shown while collapsed
+     */
+    preview: string;
+    /**
+     * e.g. '4.1s' (tabular)
+     */
+    duration?: string;
+    /**
+     * bash exit code; !== 0 surfaces an error pill + tints the dot
+     * kind-specific payload: read{path,lines,excerpt} · grep{pattern,scope,glob,matches,results}
+     * · edit{path,adds,dels,hunk[]} · bash{command,description,stdout,exit,duration}
+     * · webfetch{url,prompt,result} · task{agent,status,task,owner,promptBody,result}
+     * · default{args,result}
+     */
+    exit?: number;
+};