@calliopelabs/ui 0.7.0 → 0.12.0

package/dist/workflow/WorkflowGallery.js

@@ -0,0 +1,69 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LayoutGridIcon, ListIcon, PlusIcon, SearchIcon, UploadIcon } from "lucide-react";
+import * as React from "react";
+import { cn } from "../lib/cn.js";
+import { PageHeader } from "../page/PageHeader.js";
+import { Button } from "../primitives/Button.js";
+import { Input } from "../primitives/Input.js";
+import { Segmented } from "../primitives/Segmented.js";
+import { Select } from "../primitives/Select.js";
+import { useUI } from "../provider/UIProvider.js";
+import { EmptyState } from "../states/EmptyState.js";
+import { ErrorState } from "../states/ErrorState.js";
+import { ANY_FILTER, DEFAULT_WORKFLOW_FILTERS, isFiltered, } from "./gallery.js";
+import { WorkflowCard, WorkflowCardSkeleton } from "./WorkflowCard.js";
+const SCOPES = ["private", "project", "organization", "shared"];
+const STATUSES = ["draft", "published"];
+/**
+ * The workflow gallery: a full page of saved definitions over WorkflowCard,
+ * with search, a module filter, scope and status filters, grid and list
+ * views, and create and import when the host permits them. Host-driven: the
+ * filters are controlled and the host returns the matching workflows (a host
+ * holding the whole set uses `filterWorkflows`). Empty and no-matches are
+ * different states.
+ */
+export function WorkflowGallery({ title, description, workflows, modules, filters, onFiltersChange, view: viewProp, defaultView = "grid", onViewChange, loading = false, error, onRetry, onCreate, onImport, actionsFor, renderPreview, className, }) {
+    const { messages } = useUI();
+    const t = messages.workflow;
+    const [ownView, setOwnView] = React.useState(defaultView);
+    const view = viewProp ?? ownView;
+    const searchId = React.useId();
+    const heading = title ?? t.galleryTitle;
+    const label = typeof heading === "string" ? heading : t.galleryTitle;
+    const filtered = isFiltered(filters);
+    const set = (patch) => onFiltersChange({ ...filters, ...patch });
+    const create = onCreate && (_jsxs(Button, { onClick: onCreate, children: [_jsx(PlusIcon, { "aria-hidden": true }), t.create] }));
+    const importButton = onImport && (_jsxs(Button, { variant: "outline", onClick: onImport, children: [_jsx(UploadIcon, { "aria-hidden": true }), t.import] }));
+    let body;
+    if (error) {
+        body = _jsx(ErrorState, { title: t.loadFailed, error: error, onRetry: onRetry });
+    }
+    else if (loading) {
+        body = (_jsxs("div", { "aria-busy": true, className: view === "grid" ? GRID : LIST, children: [_jsx("p", { role: "status", className: "sr-only", children: messages.states.loading }), Array.from({ length: 6 }, (_, i) => (_jsx(WorkflowCardSkeleton, { layout: view === "grid" ? "card" : "row" }, i)))] }));
+    }
+    else if (workflows.length === 0) {
+        body = filtered ? (_jsx(EmptyState, { icon: _jsx(SearchIcon, {}), title: t.noMatches, description: t.noMatchesDescription, secondary: _jsx(Button, { variant: "outline", onClick: () => onFiltersChange(DEFAULT_WORKFLOW_FILTERS), children: t.clearFilters }) })) : (_jsx(EmptyState, { title: t.empty, description: t.emptyDescription, secondary: (create || importButton) && (_jsxs("div", { className: "flex flex-wrap justify-center gap-2", children: [create, importButton] })) }));
+    }
+    else {
+        body = (_jsx("ul", { "aria-label": label, className: view === "grid" ? GRID : LIST, children: workflows.map((workflow) => (_jsx("li", { className: "flex min-w-0", children: _jsx(WorkflowCard, { workflow: workflow, layout: view === "grid" ? "card" : "row", headingLevel: "h2", preview: renderPreview?.(workflow), className: "flex-1", ...actionsFor?.(workflow) }) }, workflow.id))) }));
+    }
+    return (_jsxs("div", { "data-slot": "workflow-gallery", className: cn("flex min-w-0 flex-col gap-4", className), children: [_jsx(PageHeader, { title: heading, description: description, primaryAction: (create || importButton) && (_jsxs("div", { className: "flex flex-wrap gap-2", children: [importButton, create] })) }), _jsxs("div", { role: "search", "aria-label": t.filters, className: "flex min-w-0 flex-col gap-3 md:flex-row md:flex-wrap md:items-center", children: [_jsxs("div", { className: "relative min-w-0 md:w-64", children: [_jsx(SearchIcon, { "aria-hidden": true, className: "pointer-events-none absolute top-1/2 left-2.5 size-4 -translate-y-1/2 text-muted-foreground" }), _jsx("label", { htmlFor: searchId, className: "sr-only", children: t.search }), _jsx(Input, { id: searchId, type: "search", value: filters.query, placeholder: t.search, onChange: (event) => set({ query: event.target.value }), className: "pl-8" })] }), _jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [_jsx(Select, { "aria-label": t.scopeFilter, size: "sm", value: filters.scope, onValueChange: (scope) => set({ scope: scope }), options: [
+                                    { value: ANY_FILTER, label: t.anyScope },
+                                    ...SCOPES.map((scope) => ({ value: scope, label: t.scope(scope) })),
+                                ] }), _jsx(Select, { "aria-label": t.statusFilter, size: "sm", value: filters.status, onValueChange: (status) => set({ status: status }), options: [
+                                    { value: ANY_FILTER, label: t.anyStatus },
+                                    ...STATUSES.map((status) => ({ value: status, label: t.status(status) })),
+                                ] }), _jsx(Segmented, { label: t.view, iconOnly: true, size: "sm", value: view, onValueChange: (next) => {
+                                    setOwnView(next);
+                                    onViewChange?.(next);
+                                }, options: [
+                                    { value: "grid", label: t.grid, icon: LayoutGridIcon },
+                                    { value: "list", label: t.list, icon: ListIcon },
+                                ] })] }), modules.length > 0 && (_jsx(Segmented, { label: t.moduleFilter, size: "sm", value: filters.module, onValueChange: (module) => set({ module }), options: [
+                            { value: ANY_FILTER, label: t.anyModule },
+                            ...modules.map((module) => ({ value: module.id, label: module.label })),
+                        ], className: "flex-wrap md:basis-full" }))] }), !loading && !error && (_jsx("p", { role: "status", className: "font-mono text-xs text-muted-foreground", children: t.count(workflows.length) })), body] }));
+}
+const GRID = "grid min-w-0 grid-cols-[repeat(auto-fill,minmax(min(100%,17rem),1fr))] gap-3";
+const LIST = "flex min-w-0 flex-col gap-2";

package/dist/workflow/WorkflowQuestionCard.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+import type { WorkflowQuestion, WorkflowQuestionAnswers, WorkflowQuestionState, WorkflowQuestionSubmission } from "./question.js";
+export interface WorkflowQuestionCardProps {
+    question: WorkflowQuestion | null;
+    state: WorkflowQuestionState;
+    answers?: WorkflowQuestionAnswers;
+    onAnswersChange?: (answers: WorkflowQuestionAnswers) => void;
+    /** Synchronous intent notification. Set the controlled state before starting delivery. */
+    onSubmit?: (submission: WorkflowQuestionSubmission) => void;
+    /** Read current delivery state. This action never submits an answer. */
+    onRefresh?: () => void;
+    canAnswer?: boolean;
+    reason?: string;
+    loading?: boolean;
+    className?: string;
+}
+/** Controlled projection: a submit callback is never evidence of runtime acknowledgment. */
+export declare function WorkflowQuestionCard(props: WorkflowQuestionCardProps): React.JSX.Element;

package/dist/workflow/WorkflowQuestionCard.js

@@ -0,0 +1,78 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn.js";
+import { Button } from "../primitives/Button.js";
+import { Checkbox } from "../primitives/Checkbox.js";
+import { Field } from "../primitives/Field.js";
+import { Textarea } from "../primitives/Textarea.js";
+import { Skeleton } from "../primitives/Skeleton.js";
+import { useUI } from "../provider/UIProvider.js";
+import { StatusBadge } from "../status/StatusBadge.js";
+const TONE = {
+    waiting: "warn",
+    submitting: "info",
+    accepted: "info",
+    acknowledged: "ok",
+    expired: "muted",
+    "delivery-unknown": "warn",
+    unavailable: "error",
+};
+function textValid(value) {
+    return value.trim().length > 0 && Array.from(value).length <= 4000 && !value.includes("\0");
+}
+function answerValid(field, value) {
+    if (field.multiple)
+        return (value !== undefined &&
+            typeof value !== "string" &&
+            value.length > 0 &&
+            value.length <= 8 &&
+            new Set(value).size === value.length &&
+            value.every(textValid));
+    return typeof value === "string" && textValid(value);
+}
+/** Controlled projection: a submit callback is never evidence of runtime acknowledgment. */
+export function WorkflowQuestionCard(props) {
+    return (_jsx(QuestionBody, { ...props }, JSON.stringify([props.question?.id, props.question?.revision])));
+}
+function QuestionBody({ question, state, answers = {}, onAnswersChange, onSubmit, onRefresh, canAnswer = true, reason, loading = false, className, }) {
+    const t = useUI().messages.workflowQuestion;
+    const id = React.useId();
+    const [attempted, setAttempted] = React.useState(false);
+    const editable = !loading && state === "waiting" && canAnswer && !!onSubmit && !!onAnswersChange;
+    const set = (field, value) => {
+        if (editable)
+            onAnswersChange?.({ ...answers, [field]: value });
+    };
+    const submit = (event) => {
+        event.preventDefault();
+        if (!editable || !question?.fields.length)
+            return;
+        setAttempted(true);
+        if (question.fields.some((field) => !answerValid(field, answers[field.id])))
+            return;
+        const selected = Object.fromEntries(question.fields.map((field) => {
+            const value = answers[field.id];
+            return [field.id, typeof value === "string" ? value : [...value]];
+        }));
+        onSubmit?.({ questionId: question.id, revision: question.revision, answers: selected });
+    };
+    return (_jsxs("section", { "data-slot": "workflow-question-card", "aria-labelledby": `${id}-title`, "aria-busy": loading || state === "submitting", className: cn("space-y-4 rounded-lg border bg-card p-4 text-card-foreground", className), children: [_jsxs("div", { className: "flex flex-wrap items-start justify-between gap-3", children: [_jsxs("div", { className: "min-w-0 space-y-1", children: [_jsx("h3", { id: `${id}-title`, className: "font-medium break-words", children: question?.title ?? t.title }), question?.worker && (_jsx("p", { className: "text-sm text-muted-foreground", children: t.worker(question.worker) }))] }), !loading && (_jsx(StatusBadge, { tone: TONE[state], pulse: state === "submitting" || state === "accepted", children: t.state(state) }))] }), _jsx("p", { role: "status", className: "text-sm text-muted-foreground", children: loading ? t.loading : t.description(state) }), reason && _jsx("p", { className: "text-sm text-muted-foreground", children: reason }), loading ? (_jsxs("div", { className: "space-y-3", children: [_jsx(Skeleton, { className: "h-5 w-1/2" }), _jsx(Skeleton, { className: "h-20 w-full" })] })) : !question?.fields.length ? (state === "waiting" ? (_jsx("p", { className: "text-sm text-muted-foreground", children: t.empty })) : null) : (_jsxs("form", { onSubmit: submit, noValidate: true, className: "space-y-5", children: [question.fields.map((field, index) => {
+                        const value = answers[field.id];
+                        const selected = value !== undefined && typeof value !== "string" ? value : [];
+                        const labels = new Set(field.options?.map((option) => option.label));
+                        const custom = selected.filter((answer) => !labels.has(answer));
+                        const error = attempted && !answerValid(field, value) ? t.invalidAnswer : undefined;
+                        return (_jsxs("fieldset", { disabled: !editable, className: "min-w-0 space-y-3", children: [_jsx("legend", { className: "mb-3 text-sm font-medium break-words whitespace-pre-wrap", children: field.text }), !!field.options?.length && (_jsx("div", { className: "flex flex-wrap gap-2", children: field.options.map((option, optionIndex) => field.multiple ? (_jsxs("label", { htmlFor: `${id}-${index}-${optionIndex}`, className: "flex max-w-full min-w-0 items-start gap-2 rounded-lg border p-2 text-sm", children: [_jsx(Checkbox, { id: `${id}-${index}-${optionIndex}`, disabled: !editable, checked: selected.includes(option.label), onCheckedChange: (checked) => set(field.id, checked === true
+                                                    ? [
+                                                        ...selected.filter((answer) => answer !== option.label),
+                                                        option.label,
+                                                    ]
+                                                    : selected.filter((answer) => answer !== option.label)) }), _jsxs("span", { className: "min-w-0 break-words", children: [option.label, option.description && (_jsxs("span", { className: "mt-1 block text-xs text-muted-foreground", children: [" ", option.description] }))] })] }, option.label)) : (_jsx(Button, { type: "button", variant: "outline", disabled: !editable, className: "h-auto max-w-full min-w-0 py-2 text-left", "aria-pressed": value === option.label, onClick: () => set(field.id, option.label), children: _jsxs("span", { className: "min-w-0 break-words whitespace-normal", children: [option.label, option.description && (_jsxs("span", { className: "mt-1 block text-xs text-muted-foreground", children: [" ", option.description] }))] }) }, option.label))) })), _jsx(Field, { label: field.multiple ? (field.options?.length ? t.otherAnswers : t.answers) : t.answer, hint: field.multiple ? t.multipleHint : undefined, error: error, children: _jsx(Textarea, { readOnly: !editable, disabled: !editable, rows: 3, value: field.multiple ? custom.join("\n") : typeof value === "string" ? value : "", onChange: (event) => set(field.id, field.multiple
+                                            ? [
+                                                ...selected.filter((answer) => labels.has(answer)),
+                                                ...(event.target.value === "" ? [] : event.target.value.split("\n")),
+                                            ]
+                                            : event.target.value) }) })] }, field.id));
+                    }), !canAnswer && state === "waiting" && !reason && (_jsx("p", { className: "text-sm text-muted-foreground", children: t.readOnly })), onSubmit && (state === "waiting" || state === "submitting") && (_jsx(Button, { type: "submit", disabled: !editable, children: state === "submitting" ? t.sending : t.send }))] })), onRefresh && (state === "delivery-unknown" || state === "unavailable") && (_jsx(Button, { type: "button", variant: "outline", onClick: onRefresh, children: t.refresh }))] }));
+}

package/dist/workflow/canvas/WorkflowCanvas.d.ts

@@ -0,0 +1,39 @@
+import * as React from "react";
+import { type WorkflowDefinition, type WorkflowRegistry, type WorkflowSelection } from "../definition.js";
+import type { WorkflowProblem } from "../problems.js";
+/** The canvas never zooms out past this: below it a node's words stop being readable. */
+export declare const READABLE_ZOOM = 0.7;
+export interface WorkflowCanvasProps {
+    definition: WorkflowDefinition;
+    /** The flow to draw; the main flow when omitted. */
+    flow?: string;
+    registry: WorkflowRegistry;
+    /** Every edit, as the whole next definition. Omit it, or set `readOnly`, for a viewer. */
+    onChange?: (definition: WorkflowDefinition) => void;
+    readOnly?: boolean;
+    selection?: WorkflowSelection | null;
+    onSelectionChange?: (selection: WorkflowSelection | null) => void;
+    /** From `checkDefinition`: nodes and edges with problems are marked. */
+    problems?: readonly WorkflowProblem[];
+    /** Folded regions by id (`regionsOf`). Uncontrolled from `defaultFolded` when omitted. */
+    folded?: readonly string[];
+    defaultFolded?: readonly string[];
+    onFoldedChange?: (folded: string[]) => void;
+    /** Sub-flow nodes shown in place, by id. */
+    defaultInPlace?: readonly string[];
+    /** Names the canvas; the editor's copy by default. */
+    label?: string;
+    className?: string;
+}
+/**
+ * One flow of a workflow definition, drawn and edited on a pannable,
+ * zoomable canvas. The run goes left to right: work comes into a node's
+ * input on the left and leaves by its exits on the right; typed inputs and
+ * outputs sit in rows below the header; a loop leaves from the bottom right
+ * and goes back into an earlier node's bottom left. `canConnect` decides
+ * what snaps, so an invalid edge never lands. Loop bodies and fan-out
+ * branches fold; a sub-flow shows in place. Every drag has a keyboard
+ * equivalent: Tab to a node, Enter to select, arrows to move, Delete to
+ * remove; Add and Connect in the toolbar.
+ */
+export declare function WorkflowCanvas(props: WorkflowCanvasProps): React.JSX.Element;