@colletdev/react 0.1.3

package/dist/generated/toast.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+export const Toast = forwardRef((props, forwardedRef) => {
+    const ref = useRef(null);
+    useImperativeHandle(forwardedRef, () => ref.current);
+    const onDismissRef = useRef(props.onDismiss);
+    onDismissRef.current = props.onDismiss;
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const handler = (e) => onDismissRef.current?.(e);
+        el.addEventListener('cx-dismiss', handler);
+        return () => el.removeEventListener('cx-dismiss', handler);
+    }, []);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (props.title != null) {
+            el.setAttribute('title', String(props.title));
+        }
+        else {
+            el.removeAttribute('title');
+        }
+    }, [props.title]);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (props.duration != null) {
+            el.setAttribute('duration', String(props.duration));
+        }
+        else {
+            el.removeAttribute('duration');
+        }
+    }, [props.duration]);
+    // Build attribute object
+    const attrs = {};
+    if (props.id != null)
+        attrs['id'] = typeof props.id === 'object' ? JSON.stringify(props.id) : String(props.id);
+    if (props.description != null)
+        attrs['description'] = typeof props.description === 'object' ? JSON.stringify(props.description) : String(props.description);
+    if (props.variant != null)
+        attrs['variant'] = typeof props.variant === 'object' ? JSON.stringify(props.variant) : String(props.variant);
+    if (props.intent != null)
+        attrs['intent'] = typeof props.intent === 'object' ? JSON.stringify(props.intent) : String(props.intent);
+    if (props.size != null)
+        attrs['size'] = typeof props.size === 'object' ? JSON.stringify(props.size) : String(props.size);
+    if (props.showIcon)
+        attrs['show-icon'] = '';
+    if (props.icon != null)
+        attrs['icon'] = typeof props.icon === 'object' ? JSON.stringify(props.icon) : String(props.icon);
+    if (props.dismissible)
+        attrs['dismissible'] = '';
+    if (props.dismissLabel != null)
+        attrs['dismiss-label'] = typeof props.dismissLabel === 'object' ? JSON.stringify(props.dismissLabel) : String(props.dismissLabel);
+    return (_jsx("cx-toast", { ref: ref, ...attrs, className: props.className, style: props.style, children: props.action && _jsx("div", { slot: "action", style: { display: 'contents' }, children: props.action }) }));
+});
+Toast.displayName = 'Toast';

package/dist/generated/toggle-group.d.ts

@@ -0,0 +1,21 @@
+import type React from 'react';
+import type { ToggleDetail, ToggleItem } from './types.js';
+export interface ToggleGroupProps {
+    id?: string;
+    label?: string;
+    items?: ToggleItem[] | string;
+    variant?: 'outline' | 'ghost' | 'filled';
+    shape?: 'sharp' | 'rounded' | 'pill';
+    mode?: 'single' | 'multiple';
+    orientation?: 'horizontal' | 'vertical';
+    intent?: 'neutral' | 'primary' | 'info' | 'success' | 'warning' | 'danger';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    disabled?: boolean;
+    /** Controlled pressed item IDs. Pass a single ID or an array; arrays are serialized to the comma-separated format expected by the Custom Element. */
+    value?: string | string[];
+    onInput?: (event: CustomEvent) => void;
+    onChange?: (event: CustomEvent<ToggleDetail>) => void;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const ToggleGroup: React.ForwardRefExoticComponent<ToggleGroupProps & React.RefAttributes<HTMLElement>>;

package/dist/generated/toggle-group.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+export const ToggleGroup = forwardRef((props, forwardedRef) => {
+    const ref = useRef(null);
+    useImperativeHandle(forwardedRef, () => ref.current);
+    const onInputRef = useRef(props.onInput);
+    onInputRef.current = props.onInput;
+    const onChangeRef = useRef(props.onChange);
+    onChangeRef.current = props.onChange;
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const handler = (e) => onInputRef.current?.(e);
+        el.addEventListener('cx-input', handler);
+        return () => el.removeEventListener('cx-input', handler);
+    }, []);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const handler = (e) => onChangeRef.current?.(e);
+        el.addEventListener('cx-change', handler);
+        return () => el.removeEventListener('cx-change', handler);
+    }, []);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (props.value != null) {
+            el.setAttribute('value', String(props.value));
+        }
+        else {
+            el.removeAttribute('value');
+        }
+    }, [props.value]);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (props.items != null) {
+            el.setAttribute('items', typeof props.items === 'object' ? JSON.stringify(props.items) : String(props.items));
+        }
+        else {
+            el.removeAttribute('items');
+        }
+    }, [props.items]);
+    // Build attribute object
+    const attrs = {};
+    if (props.id != null)
+        attrs['id'] = typeof props.id === 'object' ? JSON.stringify(props.id) : String(props.id);
+    if (props.label != null)
+        attrs['label'] = typeof props.label === 'object' ? JSON.stringify(props.label) : String(props.label);
+    if (props.variant != null)
+        attrs['variant'] = typeof props.variant === 'object' ? JSON.stringify(props.variant) : String(props.variant);
+    if (props.shape != null)
+        attrs['shape'] = typeof props.shape === 'object' ? JSON.stringify(props.shape) : String(props.shape);
+    if (props.mode != null)
+        attrs['mode'] = typeof props.mode === 'object' ? JSON.stringify(props.mode) : String(props.mode);
+    if (props.orientation != null)
+        attrs['orientation'] = typeof props.orientation === 'object' ? JSON.stringify(props.orientation) : String(props.orientation);
+    if (props.intent != null)
+        attrs['intent'] = typeof props.intent === 'object' ? JSON.stringify(props.intent) : String(props.intent);
+    if (props.size != null)
+        attrs['size'] = typeof props.size === 'object' ? JSON.stringify(props.size) : String(props.size);
+    if (props.disabled)
+        attrs['disabled'] = '';
+    return (_jsx("cx-toggle-group", { ref: ref, ...attrs, className: props.className, style: props.style }));
+});
+ToggleGroup.displayName = 'ToggleGroup';

package/dist/generated/tooltip.d.ts

@@ -0,0 +1,18 @@
+import type React from 'react';
+export interface TooltipProps {
+    id?: string;
+    /** Tooltip text shown on hover/focus. Also serves as the accessible name. */
+    content?: string;
+    triggerHtml?: string;
+    position?: 'top' | 'bottom' | 'left' | 'right';
+    arrow?: boolean;
+    openDelay?: number;
+    closeDelay?: number;
+    /** The element that triggers the tooltip on hover/focus. Accepts ReactNode. You can also pass this as `children`. */
+    trigger?: React.ReactNode;
+    /** Alias for `trigger` prop. Wraps children in the trigger slot. */
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<HTMLElement>>;

package/dist/generated/tooltip.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+export const Tooltip = forwardRef((props, forwardedRef) => {
+    const ref = useRef(null);
+    useImperativeHandle(forwardedRef, () => ref.current);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (props.openDelay != null) {
+            el.setAttribute('open-delay', String(props.openDelay));
+        }
+        else {
+            el.removeAttribute('open-delay');
+        }
+    }, [props.openDelay]);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (props.closeDelay != null) {
+            el.setAttribute('close-delay', String(props.closeDelay));
+        }
+        else {
+            el.removeAttribute('close-delay');
+        }
+    }, [props.closeDelay]);
+    // Build attribute object
+    const attrs = {};
+    if (props.id != null)
+        attrs['id'] = typeof props.id === 'object' ? JSON.stringify(props.id) : String(props.id);
+    if (props.content != null)
+        attrs['content'] = typeof props.content === 'object' ? JSON.stringify(props.content) : String(props.content);
+    if (props.triggerHtml != null)
+        attrs['trigger-html'] = typeof props.triggerHtml === 'object' ? JSON.stringify(props.triggerHtml) : String(props.triggerHtml);
+    if (props.position != null)
+        attrs['position'] = typeof props.position === 'object' ? JSON.stringify(props.position) : String(props.position);
+    if (props.arrow)
+        attrs['arrow'] = '';
+    return (_jsx("cx-tooltip", { ref: ref, ...attrs, className: props.className, style: props.style, children: (props.trigger || props.children) && _jsx("div", { slot: "trigger", style: { display: 'contents' }, children: props.trigger || props.children }) }));
+});
+Tooltip.displayName = 'Tooltip';

package/dist/generated/types.d.ts

@@ -0,0 +1,300 @@
+import type { ReactNode } from 'react';
+export interface SelectOption {
+    value: string;
+    label: string;
+    icon?: string;
+    description?: string;
+    disabled?: boolean;
+}
+export interface OptionGroup {
+    label: string;
+    options: SelectOption[];
+}
+export interface TabItem {
+    value: string;
+    label: string;
+    content?: string | ReactNode;
+    icon?: string;
+    disabled?: boolean;
+}
+export interface TableColumn {
+    id: string;
+    header: string;
+    sortable?: boolean;
+    width?: string;
+    align?: 'left' | 'center' | 'right';
+    visible?: boolean;
+    pinned?: 'left' | 'right';
+    resizable?: boolean;
+    sr_only?: boolean;
+    min_width?: string;
+    max_width?: string;
+}
+export interface TableCell {
+    text?: string;
+    html?: string | ReactNode;
+    number?: number;
+}
+export interface TableRow {
+    id: string;
+    cells: TableCell[] | Record<string, string | TableCell>;
+    disabled?: boolean;
+    detail?: string | ReactNode;
+    expanded?: boolean;
+}
+export interface SortState {
+    column_id: string;
+    direction: 'asc' | 'desc' | 'ascending' | 'descending';
+}
+export interface PaginationConfig {
+    current_page: number;
+    page_size: number;
+    total_items: number;
+    page_size_options?: number[];
+}
+export interface FooterRow {
+    cells: Record<string, string | TableCell>;
+}
+export interface EmptyStateConfig {
+    title?: string;
+    icon?: string;
+    description?: string;
+}
+export interface AccordionItem {
+    id: string;
+    trigger_label: string;
+    panel_content: string | ReactNode;
+    icon?: string;
+    description?: string;
+    disabled?: boolean;
+}
+export interface MenuRadioItem {
+    value: string;
+    label: string;
+    icon?: string;
+    disabled?: boolean;
+}
+export interface MenuEntry {
+    type: 'item' | 'checkbox' | 'radio-group' | 'separator' | 'label';
+    id?: string;
+    label?: string;
+    icon?: string;
+    shortcut?: string;
+    disabled?: boolean;
+    danger?: boolean;
+    intent?: string;
+    checked?: boolean;
+    value?: string;
+    items?: MenuRadioItem[];
+}
+export interface SidebarNavItem {
+    id: string;
+    label: string;
+    href?: string;
+    icon?: string;
+    badge?: string;
+    active?: boolean;
+    disabled?: boolean;
+}
+export interface SidebarGroup {
+    label?: string;
+    icon?: string;
+    items: SidebarNavItem[];
+    collapsible?: boolean;
+    expanded?: boolean;
+}
+export interface BreadcrumbItem {
+    label: string;
+    href?: string;
+    icon?: string;
+    current?: boolean;
+    ellipsis?: boolean;
+}
+export interface RadioOption {
+    value: string;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+    icon?: string;
+}
+export interface ToggleItem {
+    id: string;
+    label: string;
+    icon?: string;
+    icon_only?: boolean;
+    pressed?: boolean;
+    disabled?: boolean;
+}
+export interface SplitMenuEntry {
+    type: 'item' | 'separator';
+    id?: string;
+    label?: string;
+    icon?: string;
+    shortcut?: string;
+    intent?: string;
+    disabled?: boolean;
+}
+export interface CarouselSlide {
+    image_url?: string;
+    title: string;
+    badge?: string;
+    badge_color?: string;
+    subtitle?: string;
+    href?: string;
+}
+export interface CarouselDetail {
+    index: number;
+    total: number;
+}
+export interface SpeedDialAction {
+    id: string;
+    icon: string;
+    label: string;
+    intent?: string;
+    disabled?: boolean;
+    handler?: string;
+}
+/** A part config for MessageGroup — connections are auto-computed from array position. */
+export interface MessageGroupPart {
+    /** Unique part ID. Auto-generated as `{groupId}-part-{index}` if omitted. */
+    id?: string;
+    /** Part kind. */
+    kind: 'text' | 'tool-call' | 'tool-result' | 'thinking' | 'code-block' | 'error';
+    /** Override auto-computed connection (standalone/first/middle/last). Usually omit this. */
+    connection?: 'standalone' | 'first' | 'middle' | 'last';
+    /** Text/code/error content. */
+    content?: string;
+    /** Pre-rendered HTML content. */
+    html_content?: string;
+    /** Tool/function name (for tool-call and tool-result kinds). */
+    tool_name?: string;
+    /** Tool arguments JSON string (for tool-call kind). */
+    tool_arguments?: string;
+    /** Tool execution status. */
+    tool_status?: 'pending' | 'success' | 'error';
+    /** Whether tool result is collapsible. */
+    collapsible?: boolean;
+    /** Label for thinking indicator. */
+    thinking_label?: string;
+    /** Code language hint (for code-block kind). */
+    language?: string;
+    /** Size override for this part (inherits group size if omitted). */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+}
+/** Step configuration for Stepper component. */
+export interface StepperStep {
+    /** Unique step ID. */
+    id: string;
+    /** Step label text. */
+    label: string;
+    /** Optional description text below the label. */
+    description?: string;
+    /** Override auto-computed status (pending/active/completed/error/loading). */
+    status?: 'pending' | 'active' | 'completed' | 'error' | 'loading';
+    /** Whether this step is disabled (non-interactive). */
+    disabled?: boolean;
+    /** Whether this step is optional. */
+    optional?: boolean;
+}
+/** Detail for `cx-input` on TextInput, ChatInput, Autocomplete. */
+export interface InputDetail {
+    value: string;
+}
+/** Detail for `cx-change` on Select, Autocomplete, Listbox, RadioGroup, Tabs. */
+export interface SelectDetail {
+    value: string;
+}
+/** Detail for `cx-input`/`cx-change` on Checkbox, Switch. */
+export interface CheckedDetail {
+    checked: boolean;
+}
+/** Detail for `cx-input` on Slider. */
+export interface SliderDetail {
+    value: number;
+}
+/** Detail for `cx-change` on ToggleGroup. */
+export interface ToggleDetail {
+    pressed: string[];
+}
+/** Detail for `cx-change` on Accordion. */
+export interface AccordionDetail {
+    expanded: string[];
+}
+/** Detail for `cx-change` on Collapsible. */
+export interface CollapsibleDetail {
+    open: boolean;
+}
+/** Detail for `cx-action` on Menu. */
+export interface MenuActionDetail {
+    id: string;
+    label?: string;
+}
+/** Detail for `cx-change` on Menu (checkbox/radio state changes). */
+export interface MenuChangeDetail {
+    id: string;
+    checked?: boolean;
+    value?: string;
+}
+/** Detail for `cx-sort` on Table. */
+export interface SortDetail {
+    column_id: string;
+    direction: 'asc' | 'desc' | 'none';
+}
+/** Detail for `cx-select` on Table. */
+export interface TableSelectDetail {
+    selected: string[];
+    /** The row that triggered the selection change (undefined for select-all). */
+    row_id?: string;
+}
+/** Detail for `cx-expand` on Table. */
+export interface TableExpandDetail {
+    row_id: string;
+    expanded: boolean;
+}
+/** Detail for `cx-page` on Table, Pagination. */
+export interface PageDetail {
+    page: number;
+    page_size?: number;
+}
+/** Detail for `cx-navigate` on Breadcrumb, Sidebar. */
+export interface NavigateDetail {
+    href: string;
+    label: string;
+}
+/** Detail for `cx-click` on Button, Card. */
+export interface ClickDetail {
+    /** Original mouse event coordinates, if applicable. */
+    x?: number;
+    y?: number;
+}
+/** Detail for `cx-change` on FileUpload. */
+export interface FileChangeDetail {
+    files: FileInfo[];
+}
+/** Metadata for a selected file. */
+export interface FileInfo {
+    name: string;
+    size: number;
+    type: string;
+}
+/** Detail for `cx-close` on Dialog, Drawer. */
+export interface CloseDetail {
+    reason?: 'escape' | 'backdrop' | 'close-button';
+}
+/** Detail for `cx-dismiss` on Alert, Toast. */
+export interface DismissDetail {
+    reason?: 'user' | 'timeout';
+}
+/** Detail for `cx-focus` / `cx-blur` on form/interactive components. */
+export interface FocusDetail {
+    relatedTarget: EventTarget | null;
+}
+/** Detail for `cx-keydown` / `cx-keyup` on form/interactive components. */
+export interface KeyboardDetail {
+    key: string;
+    code: string;
+    shiftKey: boolean;
+    ctrlKey: boolean;
+    altKey: boolean;
+    metaKey: boolean;
+}

package/dist/generated/types.js

@@ -0,0 +1,6 @@
+// Shared TypeScript interfaces for structured component props.
+// These mirror the Rust config structs in crates/wasm-api/src/*.rs.
+// Consumers import these from '@collet/react' for typed component APIs.
+// Content fields that accept HTML can also accept React.ReactNode —
+// wrappers serialize JSX via renderToStaticMarkup before passing to WASM.
+export {};

package/dist/generated/use-markdown-stream.d.ts

@@ -0,0 +1,45 @@
+/** Ref type for the streaming message part element. */
+export interface MarkdownStreamRef {
+    /** React ref to attach to the MessagePart component. */
+    ref: React.RefObject<HTMLElement | null>;
+    /**
+     * Initialize the streaming parser.
+     * Clears content and shows a blinking cursor.
+     */
+    startStream: () => Promise<void>;
+    /**
+     * Feed markdown tokens into the streaming parser.
+     * Tokens are rAF-batched for performance.
+     */
+    appendTokens: (text: string) => void;
+    /**
+     * End the stream. Flushes remaining tokens, removes cursor,
+     * then runs a final WASM sanitization pass.
+     */
+    endStream: () => Promise<void>;
+}
+/**
+ * Hook for streaming markdown into a MessagePart element.
+ *
+ * @example
+ * ```tsx
+ * import { MessagePart, useMarkdownStream } from '@collet/react';
+ *
+ * function StreamingMessage() {
+ *   const { ref, startStream, appendTokens, endStream } = useMarkdownStream();
+ *
+ *   async function handleSSE() {
+ *     await startStream();
+ *     const source = new EventSource('/api/chat');
+ *     source.onmessage = (e) => appendTokens(e.data);
+ *     source.addEventListener('done', async () => {
+ *       source.close();
+ *       await endStream();
+ *     });
+ *   }
+ *
+ *   return <MessagePart ref={ref} stream />;
+ * }
+ * ```
+ */
+export declare function useMarkdownStream(): MarkdownStreamRef;

package/dist/generated/use-markdown-stream.js

@@ -0,0 +1,48 @@
+// useMarkdownStream — React hook for streaming markdown rendering.
+//
+// Provides ref + imperative methods for feeding tokens from SSE/WebSocket
+// into a cx-message-part element's streaming parser.
+import { useRef, useCallback } from 'react';
+/**
+ * Hook for streaming markdown into a MessagePart element.
+ *
+ * @example
+ * ```tsx
+ * import { MessagePart, useMarkdownStream } from '@collet/react';
+ *
+ * function StreamingMessage() {
+ *   const { ref, startStream, appendTokens, endStream } = useMarkdownStream();
+ *
+ *   async function handleSSE() {
+ *     await startStream();
+ *     const source = new EventSource('/api/chat');
+ *     source.onmessage = (e) => appendTokens(e.data);
+ *     source.addEventListener('done', async () => {
+ *       source.close();
+ *       await endStream();
+ *     });
+ *   }
+ *
+ *   return <MessagePart ref={ref} stream />;
+ * }
+ * ```
+ */
+export function useMarkdownStream() {
+    const ref = useRef(null);
+    const startStream = useCallback(async () => {
+        const el = ref.current;
+        if (el?.startStream)
+            await el.startStream();
+    }, []);
+    const appendTokens = useCallback((text) => {
+        const el = ref.current;
+        if (el?.appendTokens)
+            el.appendTokens(text);
+    }, []);
+    const endStream = useCallback(async () => {
+        const el = ref.current;
+        if (el?.endStream)
+            await el.endStream();
+    }, []);
+    return { ref, startStream, appendTokens, endStream };
+}

package/dist/generated/use-markdown.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Render GFM markdown to sanitized HTML.
+ *
+ * Returns empty string while WASM is loading, then the rendered HTML.
+ * Re-renders automatically when the input changes.
+ *
+ * @param content - GFM markdown string
+ * @returns Sanitized HTML string (or empty string while loading)
+ *
+ * @example
+ * ```tsx
+ * import { useMarkdown } from '@colletdev/react';
+ *
+ * function Message({ markdown }: { markdown: string }) {
+ *   const html = useMarkdown(markdown);
+ *   return <div dangerouslySetInnerHTML={{ __html: html }} />;
+ * }
+ * ```
+ */
+export declare function useMarkdown(content: string): string;

package/dist/generated/use-markdown.js

@@ -0,0 +1,49 @@
+// useMarkdown — React hook for static markdown rendering via WASM.
+//
+// Converts GFM markdown to XSS-safe HTML using the WASM renderer.
+// Re-renders when the input string changes.
+import { useState, useEffect } from 'react';
+/**
+ * Render GFM markdown to sanitized HTML.
+ *
+ * Returns empty string while WASM is loading, then the rendered HTML.
+ * Re-renders automatically when the input changes.
+ *
+ * @param content - GFM markdown string
+ * @returns Sanitized HTML string (or empty string while loading)
+ *
+ * @example
+ * ```tsx
+ * import { useMarkdown } from '@colletdev/react';
+ *
+ * function Message({ markdown }: { markdown: string }) {
+ *   const html = useMarkdown(markdown);
+ *   return <div dangerouslySetInnerHTML={{ __html: html }} />;
+ * }
+ * ```
+ */
+export function useMarkdown(content) {
+    const [html, setHtml] = useState('');
+    useEffect(() => {
+        let cancelled = false;
+        async function render() {
+            try {
+                const { renderMarkdown } = await import('@colletdev/core/markdown');
+                const result = await renderMarkdown(content);
+                if (!cancelled)
+                    setHtml(result);
+            }
+            catch {
+                // WASM not loaded — return empty
+            }
+        }
+        if (content) {
+            render();
+        }
+        else {
+            setHtml('');
+        }
+        return () => { cancelled = true; };
+    }, [content]);
+    return html;
+}