@calliopelabs/ui 0.6.1 → 0.11.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/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;