@cosmoops/connect-sdk 0.7.0 → 0.15.0

package/dist/esm/client/components/ask-ai.js

@@ -0,0 +1,350 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Button, Input, Label, TextField } from "@heroui/react";
+import { Brain, ChevronDown, Send, Sparkles, Square, X } from "lucide-react";
+import { Streamdown } from "streamdown";
+import { useConnect } from "../provider.js";
+import { AiChart, AiDetails, AiMetrics, AiSources, AiSteps, AiTable, AiTimeline } from "./ai-widgets.js";
+/**
+ * The panel's open width. The *inner* pane always carries it, so the content
+ * keeps its layout while the outer shell's width animates to zero around it.
+ */
+const PANEL_WIDTH = "w-full lg:w-[400px]";
+/**
+ * The outer shell's width, which is the thing that animates.
+ *
+ * Two mutually exclusive branches rather than `PANEL_WIDTH` plus an
+ * `lg:w-0` override, because that override never applied: `lg:w-[400px]` and
+ * `lg:w-0` are the same utility at the same breakpoint, so the winner is
+ * whichever Tailwind emits later - and it emits arbitrary values after scale
+ * values. The closed panel therefore measured a full 400px at `lg` and up and
+ * sat there permanently, eating that much of the content pane on every page
+ * with `askAi` on. Only the `translate-x` hid it below `lg`, which is why this
+ * looked correct on a phone and wrong on a laptop.
+ */
+function panelShellWidth(isOpen) {
+    return isOpen ? PANEL_WIDTH : "w-full lg:w-0 lg:overflow-hidden lg:border-s-0";
+}
+/**
+ * `blurIn` over the default `fadeIn`: Gemini arrives in bursts rather than an
+ * even token drip, and a blur masks a batch landing at once where a plain
+ * opacity fade just flickers. Hoisted to module scope because Streamdown
+ * compares `animated` by reference.
+ */
+const ANIMATED = {
+    animation: "blurIn",
+    duration: 220,
+    easing: "ease-out",
+    sep: "word",
+};
+/**
+ * The "working on it" state - a highlight sweeping through the word rather
+ * than a spinner beside it. `connect-ai-shimmer` is defined in the SDK's
+ * `theme.css`, which every application platform already imports.
+ */
+function ThinkingShimmer({ label = "Thinking" }) {
+    return (_jsx("span", { className: "connect-ai-shimmer text-xs font-medium", role: "status", children: label }));
+}
+/** Open while it streams, collapsed once the answer lands. */
+function ThinkingDisclosure({ text, isStreaming }) {
+    if (!text)
+        return null;
+    return (_jsxs("details", { className: "group mb-2", open: isStreaming, children: [_jsxs("summary", { className: "flex cursor-pointer list-none items-center gap-1 text-[11px] font-medium text-muted select-none hover:text-foreground", children: [_jsx(Brain, { className: "size-3" }), isStreaming ? _jsx(ThinkingShimmer, {}) : "Thinking", _jsx(ChevronDown, { className: "size-3 transition-transform group-open:rotate-180" })] }), _jsx("div", { className: "mt-1.5 border-s-2 border-border ps-2 text-xs whitespace-pre-wrap text-muted italic", children: text })] }));
+}
+/**
+ * Structural guards, one per widget.
+ *
+ * The published package carries no schema validator, and should not gain one
+ * for this - so each tool input is checked for the fields its renderer would
+ * otherwise crash on. Anything that fails renders nothing: the model's prose
+ * sits around it either way, so a missing widget reads as terse rather than
+ * broken, which is the better failure.
+ */
+const isArray = (value) => Array.isArray(value) && value.length > 0;
+const field = (input, key) => typeof input === "object" && input !== null ? input[key] : undefined;
+function renderTool(name, input, renderMarkdown) {
+    switch (name) {
+        case "showTable":
+            return isArray(field(input, "columns")) && Array.isArray(field(input, "rows")) ? (_jsx(AiTable, { ...input })) : null;
+        case "showChart":
+            return isArray(field(input, "series")) ? _jsx(AiChart, { ...input }) : null;
+        case "showMetrics":
+            return isArray(field(input, "metrics")) ? _jsx(AiMetrics, { ...input }) : null;
+        case "showTimeline":
+            return isArray(field(input, "events")) ? _jsx(AiTimeline, { ...input }) : null;
+        case "showDetails":
+            return isArray(field(input, "fields")) ? _jsx(AiDetails, { ...input }) : null;
+        case "showSteps":
+            return isArray(field(input, "steps")) ? (_jsx(AiSteps, { ...input, renderDetail: renderMarkdown })) : null;
+        case "showSources":
+            return isArray(field(input, "sources")) ? _jsx(AiSources, { ...input }) : null;
+        default:
+            return null;
+    }
+}
+/** Placeholder while a tool's arguments are still arriving, sized like the real thing. */
+function ToolSkeleton() {
+    return (_jsx("div", { className: "my-3 flex h-24 animate-pulse items-center justify-center rounded-lg border border-border bg-surface-secondary", role: "status", "aria-label": "Preparing result", children: _jsx(Sparkles, { className: "size-4 text-accent/60", "aria-hidden": true }) }));
+}
+/**
+ * One server-sent event stream, folded into the turn being built.
+ *
+ * Hand-rolled rather than pulled from `@ai-sdk/react`, and that is a deliberate
+ * trade: this package ships to partners, and `ai` + `@ai-sdk/react` is a large
+ * dependency to add to every application platform for one panel. The wire format
+ * is small, both ends of it are ours, and the chunk kinds below are all this
+ * panel can render.
+ *
+ * Tool arguments are read from `tool-input-available` - the complete object -
+ * rather than reassembled from `tool-input-delta` fragments. `tool-input-start`
+ * is enough to put a skeleton on screen in the meantime, and partial-JSON
+ * parsing buys nothing a placeholder does not.
+ *
+ * Chunks are newline-delimited `data:` frames; a frame can split across network
+ * reads, so the tail of each read is carried forward rather than parsed.
+ */
+async function readStream(response, onChunk) {
+    const body = response.body;
+    if (!body)
+        throw new Error("Ask AI returned no stream");
+    const reader = body.pipeThrough(new TextDecoderStream()).getReader();
+    let buffer = "";
+    for (;;) {
+        const { done, value } = await reader.read();
+        if (done)
+            break;
+        buffer += value;
+        // Everything up to the last newline is whole; whatever follows it is a
+        // partial frame and waits for the next read.
+        const lines = buffer.split("\n");
+        buffer = lines.pop() ?? "";
+        for (const line of lines) {
+            if (!line.startsWith("data:"))
+                continue;
+            const payload = line.slice(5).trim();
+            if (!payload || payload === "[DONE]")
+                continue;
+            let chunk;
+            try {
+                chunk = JSON.parse(payload);
+            }
+            catch {
+                // A frame we cannot parse is a frame we cannot render. Dropping it
+                // keeps the rest of the answer flowing, which is strictly better than
+                // failing the whole turn over one malformed chunk.
+                continue;
+            }
+            switch (chunk.type) {
+                case "text-delta":
+                    if (chunk.delta)
+                        onChunk({ text: chunk.delta });
+                    break;
+                case "reasoning-delta":
+                    if (chunk.delta)
+                        onChunk({ reasoning: chunk.delta });
+                    break;
+                case "tool-input-start":
+                    if (chunk.toolCallId && chunk.toolName) {
+                        onChunk({ toolStart: { id: chunk.toolCallId, name: chunk.toolName } });
+                    }
+                    break;
+                case "tool-input-available":
+                    if (chunk.toolCallId)
+                        onChunk({ toolInput: { id: chunk.toolCallId, input: chunk.input } });
+                    break;
+                case "error":
+                    throw new Error(chunk.errorText || "Ask AI failed");
+            }
+        }
+    }
+}
+/**
+ * Index of the final text block, or `-1`. A reverse loop rather than
+ * `findLastIndex`, which is ES2023 - this package targets ES2022 so its
+ * published output stays usable on the runtimes its `engines` field claims.
+ */
+function lastTextBlockIndex(blocks) {
+    for (let index = blocks.length - 1; index >= 0; index--) {
+        if (blocks[index]?.kind === "text")
+            return index;
+    }
+    return -1;
+}
+/** Appends a text delta to the open text block, or opens one after a widget. */
+function appendText(blocks, text) {
+    const last = blocks.at(-1);
+    if (last?.kind === "text") {
+        return [...blocks.slice(0, -1), { kind: "text", text: last.text + text }];
+    }
+    return [...blocks, { kind: "text", text }];
+}
+/**
+ * Ask AI - a chat panel grounded in the signed-in workspace's Context Index,
+ * streamed through your own bridge.
+ *
+ * Answers are not only prose. Connect's model can call a small set of
+ * presentation tools - `showTable`, `showChart`, `showMetrics`, `showTimeline`,
+ * `showDetails`, `showSteps`, `showSources` - and this panel renders each one
+ * natively: a sortable table with a CSV download, a chart, a row of metric
+ * tiles. Values arrive raw with a format tag, so they are formatted here rather
+ * than by the model, which is what lets a column sort numerically.
+ *
+ * Nothing here holds a credential: it POSTs to `${basePath}/ai/chat` on your
+ * own origin, and `createConnectHandler` is what reaches Connect. The workspace
+ * is resolved from the caller's session there, never sent from the browser - so
+ * a user can only ever ask about the workspace they are signed into.
+ *
+ * ```tsx
+ * <AppShell name="Dispatch" nav={nav}>
+ *   {children}
+ * </AppShell>
+ * ```
+ *
+ * `AppShell` mounts it by default. Mount it directly only when you are not
+ * using the shell: it renders a fixed corner trigger plus a panel that is an
+ * *in-flow flex sibling* at `lg` and up, so opening it pushes your content
+ * aside rather than covering it. That requires it to be the last child of a
+ * `flex` row owning the viewport height - which is exactly what `AppShell` is.
+ * Below `lg` it is a full-screen sheet with a backdrop instead; there is no
+ * room to push anything on a phone.
+ *
+ * **Host setup:** markdown rendering needs `streamdown` installed, one Tailwind
+ * `@source "…/node_modules/streamdown/dist/*.js"` line so its utility classes
+ * are generated, and `import "streamdown/styles.css"` for the streaming
+ * animation. The colour tokens Streamdown expects are already mapped in this
+ * SDK's `theme.css`.
+ *
+ * Answers require the workspace's Context Index to be turned on (a workspace
+ * admin toggle in Connect) and your API key to carry the `ai:chat` scope.
+ * Neither is something the browser can discover, so both surface as a message
+ * in the panel rather than as a hidden button.
+ */
+export function ConnectAskAi({ title = "Ask AI", assistantName = "Assistant", placeholder = "Ask a question...", hint = "Ask a question about your workspace - answers are grounded in what your team has indexed.", defaultOpen = false, markdownPlugins, }) {
+    const { session, isLoading, streamResource } = useConnect();
+    const [isOpen, setIsOpen] = useState(defaultOpen);
+    const [turns, setTurns] = useState([]);
+    const [input, setInput] = useState("");
+    const [isBusy, setIsBusy] = useState(false);
+    const [error, setError] = useState(null);
+    const abortRef = useRef(null);
+    const bottomRef = useRef(null);
+    // Ids only have to be unique within one mounted conversation, so a counter is
+    // enough - and unlike `crypto.randomUUID()` it cannot differ between the
+    // server's render and the browser's.
+    const nextId = useRef(0);
+    useEffect(() => {
+        bottomRef.current?.scrollIntoView({ behavior: "smooth", block: "end" });
+    }, [turns]);
+    // A conversation left mid-stream should stop costing tokens the moment the
+    // panel goes away.
+    useEffect(() => () => abortRef.current?.abort(), []);
+    const renderMarkdown = useCallback((text, isStreaming = false) => (_jsx(Streamdown, { className: "connect-ai-body", mode: isStreaming ? "streaming" : "static", isAnimating: isStreaming, animated: ANIMATED, caret: isStreaming ? "block" : undefined, plugins: markdownPlugins, 
+        // Retrieved documents cite real URLs; an interstitial on every one of
+        // them turns a citation into a chore. The renderer still sanitises the
+        // markup itself, which is the part that matters.
+        linkSafety: LINK_SAFETY, children: text })), [markdownPlugins]);
+    const stop = useCallback(() => {
+        abortRef.current?.abort();
+        abortRef.current = null;
+        setIsBusy(false);
+    }, []);
+    const send = useCallback(async (text) => {
+        const controller = new AbortController();
+        abortRef.current = controller;
+        setError(null);
+        setIsBusy(true);
+        const userTurn = {
+            id: `u${nextId.current++}`,
+            role: "user",
+            blocks: [{ kind: "text", text }],
+            reasoning: "",
+        };
+        const answerId = `a${nextId.current++}`;
+        // The wire format Connect reads - part-based `UIMessage`s, not flat
+        // strings. Built from the turns *plus* this one rather than from state,
+        // which has not been committed yet at this point. Only text is sent back:
+        // a widget is a rendering of something the model already said.
+        const history = [...turns, userTurn].map((turn) => ({
+            id: turn.id,
+            role: turn.role,
+            parts: [
+                {
+                    type: "text",
+                    text: turn.blocks
+                        .filter((block) => block.kind === "text")
+                        .map((block) => block.text)
+                        .join(""),
+                },
+            ],
+        }));
+        setTurns((current) => [...current, userTurn]);
+        const patchAnswer = (patch) => setTurns((current) => current.map((turn) => (turn.id === answerId ? patch(turn) : turn)));
+        try {
+            // Relative to the provider's own `basePath` - `streamResource` prefixes
+            // it, the same way every other bridge call is addressed.
+            const response = await streamResource("/ai/chat", { messages: history }, { signal: controller.signal });
+            // The assistant's turn is appended only once the stream is live, so a
+            // failed request leaves an error under the question rather than an
+            // empty bubble that never fills.
+            setTurns((current) => [...current, { id: answerId, role: "assistant", blocks: [], reasoning: "" }]);
+            await readStream(response, (chunk) => {
+                if (chunk.text) {
+                    patchAnswer((turn) => ({ ...turn, blocks: appendText(turn.blocks, chunk.text) }));
+                }
+                if (chunk.reasoning) {
+                    patchAnswer((turn) => ({ ...turn, reasoning: turn.reasoning + chunk.reasoning }));
+                }
+                if (chunk.toolStart) {
+                    const { id, name } = chunk.toolStart;
+                    patchAnswer((turn) => ({ ...turn, blocks: [...turn.blocks, { kind: "tool", id, name, input: null }] }));
+                }
+                if (chunk.toolInput) {
+                    const { id, input: toolInput } = chunk.toolInput;
+                    patchAnswer((turn) => ({
+                        ...turn,
+                        blocks: turn.blocks.map((block) => block.kind === "tool" && block.id === id ? { ...block, input: toolInput } : block),
+                    }));
+                }
+            });
+        }
+        catch (cause) {
+            // Pressing Stop aborts the fetch, which lands here - a decision, not a
+            // failure, and nothing to report.
+            if (!controller.signal.aborted) {
+                setError(cause instanceof Error ? cause.message : "Ask AI failed");
+            }
+        }
+        finally {
+            if (abortRef.current === controller)
+                abortRef.current = null;
+            setIsBusy(false);
+        }
+    }, [streamResource, turns]);
+    const lastTurn = turns.at(-1);
+    const isAnswering = isBusy && lastTurn?.role === "assistant";
+    const rendered = useMemo(() => turns.map((turn) => {
+        const isLive = isAnswering && turn.id === lastTurn?.id;
+        const lastTextIndex = lastTextBlockIndex(turn.blocks);
+        return (_jsxs("div", { className: `connect-ai-host rounded-md border border-border p-2.5 text-sm ${turn.role === "user" ? "bg-surface-secondary" : "bg-accent/5"}`, children: [_jsx("p", { className: "mb-1 text-[11px] font-semibold tracking-wide text-muted uppercase", children: turn.role === "user" ? "You" : assistantName }), turn.role === "assistant" && (_jsx(ThinkingDisclosure, { text: turn.reasoning, isStreaming: isLive && lastTextIndex === -1 })), turn.blocks.map((block, index) => block.kind === "text" ? (
+                // The user's own turn is shown as they typed it - running a
+                // question that happens to start with `#` through the markdown
+                // renderer would turn it into a heading.
+                _jsx("div", { children: turn.role === "user" ? (_jsx("p", { className: "whitespace-pre-wrap", children: block.text })) : (renderMarkdown(block.text, isLive && index === lastTextIndex)) }, index)) : block.input === null ? (_jsx(ToolSkeleton, {}, block.id)) : (_jsx("div", { children: renderTool(block.name, block.input, renderMarkdown) }, block.id))), isLive && lastTextIndex === -1 && turn.blocks.length === 0 && _jsx(ThinkingShimmer, {})] }, turn.id));
+    }), [turns, isAnswering, lastTurn?.id, assistantName, renderMarkdown]);
+    // Signed out there is no workspace to ground an answer in, and the bridge
+    // would answer 401 - so there is nothing to offer, not even a button.
+    if (isLoading || !session?.user)
+        return null;
+    const handleSubmit = (event) => {
+        event.preventDefault();
+        const text = input.trim();
+        if (!text || isBusy)
+            return;
+        setInput("");
+        void send(text);
+    };
+    return (_jsxs(_Fragment, { children: [!isOpen && (_jsx(Button, { isIconOnly: true, variant: "primary", "aria-label": title, onPress: () => setIsOpen(true), className: "fixed bottom-4 end-4 z-30 size-12 rounded-full shadow-lg sm:bottom-6 sm:end-6", children: _jsx(Sparkles, { className: "size-5" }) })), _jsx("div", { className: `fixed inset-0 z-40 bg-backdrop transition-opacity lg:hidden ${isOpen ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0"}`, onClick: () => setIsOpen(false), "aria-hidden": "true" }), _jsx("aside", { "aria-hidden": !isOpen, className: `fixed inset-y-0 end-0 z-50 flex flex-col border-s border-border bg-surface shadow-xl transition-transform duration-300 ease-in-out ${panelShellWidth(isOpen)} ${isOpen ? "translate-x-0" : "translate-x-full rtl:-translate-x-full"} lg:static lg:z-auto lg:translate-x-0 lg:shadow-none lg:transition-[width]`, children: _jsxs("div", { className: `flex h-full shrink-0 flex-col ${PANEL_WIDTH}`, children: [_jsxs("div", { className: "flex items-center gap-2 border-b border-border px-4 py-3", children: [_jsx(Sparkles, { className: "size-4 shrink-0 text-accent" }), _jsx("span", { className: "flex-1 text-sm font-semibold", children: title }), _jsx(Button, { isIconOnly: true, size: "sm", variant: "tertiary", "aria-label": "Close", onPress: () => setIsOpen(false), children: _jsx(X, { className: "size-4" }) })] }), _jsxs("div", { className: "flex-1 space-y-3 overflow-y-auto p-4", children: [turns.length === 0 && _jsx("p", { className: "text-sm text-muted", children: hint }), rendered, isBusy && lastTurn?.role === "user" && (_jsxs("div", { className: "rounded-md border border-border bg-accent/5 p-2.5 text-sm", children: [_jsx("p", { className: "mb-1 text-[11px] font-semibold tracking-wide text-muted uppercase", children: assistantName }), _jsx(ThinkingShimmer, {})] })), error && _jsx("p", { className: "text-xs text-danger", children: error }), _jsx("div", { ref: bottomRef })] }), _jsxs("form", { onSubmit: handleSubmit, className: "flex gap-2 border-t border-border p-3", children: [_jsxs(TextField, { variant: "secondary", className: "flex-1", children: [_jsx(Label, { className: "sr-only", children: placeholder }), _jsx(Input, { placeholder: placeholder, value: input, onChange: (event) => setInput(event.currentTarget.value), disabled: isBusy })] }), isBusy ? (_jsx(Button, { type: "button", isIconOnly: true, variant: "secondary", "aria-label": "Stop generating", onPress: stop, children: _jsx(Square, { className: "size-3.5" }) })) : (_jsx(Button, { type: "submit", isIconOnly: true, variant: "primary", "aria-label": "Send", isDisabled: !input.trim(), children: _jsx(Send, { className: "size-3.5" }) }))] })] }) })] }));
+}
+/** Hoisted for the same reference-equality reason as `ANIMATED` - Streamdown compares it by identity. */
+const LINK_SAFETY = { enabled: false };

package/dist/esm/client/components/confirm-dialog.js

@@ -0,0 +1,37 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { Button, Modal } from "@heroui/react";
+/**
+ * The confirmation in front of a destructive action.
+ *
+ * **It closes on confirm, not on response.** Holding the modal open until the
+ * server answers makes every delete feel like a form submission, and the error
+ * path already has somewhere to go - a toast, or the row reappearing. A dialog
+ * that stays open to report failure is right only where the failure is
+ * *expected* and correctable in place (a seat cap, a last-admin invariant),
+ * and that is a blocking form, not this.
+ *
+ * `onConfirm` may return a promise. It is not awaited before closing, but a
+ * rejection is caught here rather than escaping - an error thrown out of an
+ * async transition reaches the nearest error boundary and takes the page down.
+ *
+ * The anatomy is HeroUI's: `Modal.Backdrop` owns the open state,
+ * `Modal.Container` the sizing, `Modal.Dialog` the focus trap. The trigger
+ * goes inside `Modal.Trigger`, which *is* a React Aria button - so pass a
+ * plain element, never a `<Button>`, or the nested button swallows the press
+ * and the dialog silently never opens.
+ */
+export function ConnectConfirmDialog({ trigger, title, description, confirmLabel = "Confirm", cancelLabel = "Cancel", tone = "danger", onConfirm, }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const confirm = () => {
+        setIsOpen(false);
+        void Promise.resolve()
+            .then(() => onConfirm())
+            .catch(() => {
+            // Swallowed on purpose - see the note above. Reporting belongs to the
+            // caller, which owns the toast and the rollback.
+        });
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(Modal.Trigger, { onClick: () => setIsOpen(true), children: trigger }), _jsx(Modal.Backdrop, { isOpen: isOpen, onOpenChange: setIsOpen, children: _jsx(Modal.Container, { size: "sm", children: _jsxs(Modal.Dialog, { children: [_jsx(Modal.CloseTrigger, { onPress: () => setIsOpen(false) }), _jsx(Modal.Header, { children: _jsx(Modal.Heading, { children: title }) }), description && (_jsx(Modal.Body, { children: _jsx("p", { className: "text-sm text-muted", children: description }) })), _jsxs(Modal.Footer, { children: [_jsx(Button, { variant: "secondary", onPress: () => setIsOpen(false), children: cancelLabel }), _jsx(Button, { variant: tone === "danger" ? "danger" : "primary", onPress: confirm, children: confirmLabel })] })] }) }) })] }));
+}

package/dist/esm/client/components/cursor-pagination.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Button } from "@heroui/react";
+/**
+ * Next / previous for a cursor-paginated list.
+ *
+ * Cursor rather than page numbers, and the component shape follows from that:
+ * there is no "page 7 of 42" because a keyset-paginated list does not know how
+ * many pages there are without a second count query over the same filter -
+ * which is a billed index scan for a number nobody acts on. What a user does
+ * act on is "more" and "back", and those are exact.
+ *
+ * The count is announced in a live region so a screen-reader user learns that
+ * filtering or paging changed the result set. Without it the table silently
+ * swaps its contents.
+ */
+export function ConnectCursorPagination({ shown, nextCursor, hasPrevious, onNext, onPrevious, isPending = false, noun = ["row", "rows"], }) {
+    return (_jsxs("div", { className: "flex items-center justify-between gap-3 pt-3", children: [_jsxs("p", { "aria-live": "polite", className: "text-xs text-muted", children: [shown, " ", shown === 1 ? noun[0] : noun[1]] }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { size: "sm", variant: "secondary", isDisabled: !hasPrevious || isPending, onPress: onPrevious, children: "Previous" }), _jsx(Button, { size: "sm", variant: "secondary", isDisabled: nextCursor === null || isPending, onPress: () => nextCursor && onNext(nextCursor), children: "Next" })] })] }));
+}

package/dist/esm/client/components/filter-tabs.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Chip } from "@heroui/react";
+/**
+ * A single-select filter strip - the "All / Open / Won / Lost" row above a
+ * list.
+ *
+ * Real radio semantics rather than a row of buttons: it is a single choice
+ * from a closed set, so arrow keys should move between options and the
+ * selected one should be announced as selected. A group of `<button>`s gets
+ * neither, and that is the usual hand-rolled shape.
+ *
+ * Scrolls horizontally rather than wrapping on a narrow viewport - a filter
+ * strip that wraps to three lines pushes the list itself off the screen.
+ */
+export function ConnectFilterTabs({ options, value, onChange, label, }) {
+    return (_jsx("div", { role: "radiogroup", "aria-label": label, className: "-mx-1 flex gap-2 overflow-x-auto px-1 pb-1", children: options.map((option) => {
+            const isSelected = option.value === value;
+            return (_jsx("button", { type: "button", role: "radio", "aria-checked": isSelected, onClick: () => onChange(option.value), className: "shrink-0 rounded-full focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent", children: _jsxs(Chip, { size: "sm", variant: isSelected ? "primary" : "soft", color: isSelected ? "accent" : "default", children: [option.label, option.count !== undefined && _jsx("span", { className: "ml-1 opacity-70", children: option.count })] }) }, option.value ?? "__all"));
+        }) }));
+}

package/dist/esm/client/components/grievance-notice.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useConnectCompanyProfile } from "../provider.js";
+/**
+ * The DPDP s.13 grievance channel, rendered.
+ *
+ * Every application on the platform is a Data Processor under one notice, so
+ * the wording lives here rather than being retyped per application - a user
+ * comparing two applications' privacy pages should not find two different
+ * accounts of who their Data Fiduciary is.
+ *
+ * Renders nothing at all while loading and nothing on failure, rather than a
+ * skeleton or an error. That is unusual here and deliberate: this component
+ * is almost always inside a larger privacy page that has its own content, and
+ * a red error box in the middle of a legal notice reads as the notice itself
+ * being broken. The address is also on the public web either way. Pass
+ * `useConnectCompanyProfile()` directly to your own layout if you want to
+ * handle those states yourself.
+ */
+export function ConnectGrievanceNotice({ title = "Grievance redressal", applicationName, className, }) {
+    const { data } = useConnectCompanyProfile();
+    const profile = data?.companyProfile;
+    if (!profile)
+        return null;
+    const { grievance } = profile;
+    return (_jsxs("section", { className: className ?? "space-y-3", children: [title !== null && _jsx("h3", { className: "text-base font-semibold", children: title }), _jsxs("p", { className: "text-sm text-muted", children: [applicationName ? `${applicationName} is operated on ` : "This service runs on ", "the CosmoOps Connect platform. ", _jsx("strong", { className: "font-medium text-foreground", children: profile.legalName }), " ", "is the Data Fiduciary for personal data processed here, under the Digital Personal Data Protection Act, 2023."] }), _jsxs("dl", { className: "grid grid-cols-1 gap-x-6 gap-y-3 text-sm sm:grid-cols-[auto_1fr]", children: [_jsx("dt", { className: "text-muted", children: "Grievance Officer" }), _jsx("dd", { className: "text-foreground", children: grievance.officerName }), _jsx("dt", { className: "text-muted", children: "Email" }), _jsx("dd", { children: _jsx("a", { className: "text-accent underline underline-offset-2", href: `mailto:${grievance.officerEmail}`, children: grievance.officerEmail }) }), _jsx("dt", { className: "text-muted", children: "Contactable" }), _jsx("dd", { className: "text-foreground", children: grievance.hours }), _jsx("dt", { className: "text-muted", children: "Registered address" }), _jsx("dd", { className: "text-foreground", children: profile.registeredAddress })] }), _jsxs("p", { className: "text-sm text-muted", children: ["Complaints are acknowledged and resolved within ", grievance.responseDays, " days of receipt."] })] }));
+}

package/dist/esm/client/components/link-button.js

@@ -2,20 +2,27 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Button } from "@heroui/react";
 /**
- * A HeroUI `Button` that renders a real `<a>`.
+ * A HeroUI `Button` that renders a link.
  *
- * A plain anchor, deliberately not a router link: this package imports nothing
- * from `next` (see the `./next` entry's doc comment for why that is a hard
- * rule), so it cannot know which router - if any - the host app uses. An
- * `<a href>` navigates under all of them, and a host that wants client-side
- * routing can pass its own element via `render` on the underlying `Button`.
+ * HeroUI v3's `Button` has no `as` prop, so `<Button as={Link}>` does not type
+ * check and does not work - this is the supported route, via `render`.
  *
  * The cast is the same one HeroUI's own "Render Function" example needs:
  * `render` types its argument as the props of the element `Button` would have
- * emitted, which is a `<button>` - including a `ref` typed to
+ * emitted, which is a `<button>`, including a `ref` typed to
  * `HTMLButtonElement`. Spreading that onto an anchor is sound at runtime and
- * unrepresentable in the type, which is exactly what a cast is for.
+ * unrepresentable in the type, which is what the cast is for.
  */
-export function ConnectLinkButton({ href, ...props }) {
-    return (_jsx(Button, { ...props, render: (renderProps) => _jsx("a", { ...renderProps, href: href }) }));
+export function ConnectLinkButton({ href, renderLink, ...props }) {
+    return (_jsx(Button, { ...props, render: (renderProps) => {
+            const anchorProps = renderProps;
+            if (renderLink) {
+                return renderLink({
+                    href,
+                    ...(anchorProps.className ? { className: anchorProps.className } : {}),
+                    children: anchorProps.children,
+                });
+            }
+            return _jsx("a", { ...anchorProps, href: href });
+        } }));
 }

package/dist/esm/client/components/logo.js

@@ -15,10 +15,11 @@ import { ConnectMark } from "../mark.js";
  * as `text-sm`, with the badge, gap and tracking all in proportion. That is
  * why there is no `size` prop.
  */
-export function ConnectLogo({ name, icon, collapsed = false, className }) {
+export function ConnectLogo({ name, icon, variant, collapsed = false, className }) {
+    const resolved = variant ?? (collapsed ? "mark" : "full");
     const badge = (_jsxs("span", { className: "relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-[0.28em] bg-accent text-accent-foreground", style: { width: "2em", height: "2em" }, "aria-hidden": "true", children: [icon ? _jsx("span", { className: "inline-flex items-center justify-center [&>*]:size-[1.25em]", children: icon }) : null, !icon && _jsx(ConnectMark, { className: "absolute inset-0 size-full" })] }));
-    if (collapsed) {
+    if (resolved === "mark") {
         return (_jsx("span", { className: `inline-flex text-sm leading-none ${className ?? ""}`, role: "img", "aria-label": name, children: badge }));
     }
-    return (_jsxs("span", { className: `inline-flex min-w-0 items-center gap-[0.6em] text-sm leading-none ${className ?? ""}`, role: "img", "aria-label": `cosmoops ${name}`, children: [badge, _jsxs("span", { className: "flex min-w-0 flex-col leading-none", children: [_jsxs("span", { className: "inline-flex items-center font-extrabold tracking-tight text-foreground", "aria-hidden": "true", children: [_jsx("span", { children: "cosmo" }), _jsx("span", { className: "mx-[0.12em] inline-block size-[0.19em] shrink-0 rounded-[0.04em] bg-accent" }), _jsx("span", { children: "ops" })] }), _jsx("span", { className: "mt-[0.42em] truncate text-[0.6em] font-semibold uppercase tracking-[0.26em] text-accent", "aria-hidden": "true", children: name })] })] }));
+    return (_jsxs("span", { className: `inline-flex min-w-0 items-center gap-[0.6em] text-sm leading-none ${className ?? ""}`, role: "img", "aria-label": `cosmoops ${name}`, children: [resolved === "full" && badge, _jsxs("span", { className: "flex min-w-0 flex-col leading-none", children: [_jsxs("span", { className: "inline-flex items-center font-extrabold tracking-tight text-foreground", "aria-hidden": "true", children: [_jsx("span", { children: "cosmo" }), _jsx("span", { className: "mx-[0.12em] inline-block size-[0.19em] shrink-0 rounded-[0.04em] bg-accent" }), _jsx("span", { children: "ops" })] }), _jsx("span", { className: "mt-[0.42em] truncate text-[0.6em] font-semibold uppercase tracking-[0.26em] text-accent", "aria-hidden": "true", children: name })] })] }));
 }

package/dist/esm/client/components/nav.js

@@ -81,7 +81,47 @@ export function isNavItemActive(item, activeHref) {
         return false;
     return normalizePath(item.href) === activeHref;
 }
-/** Hrefs declared `gateExempt` - the routes `ConnectAppShell` renders outside its `ConnectAccessGate`. */
+/**
+ * `nav` with every item the current session should not see removed - see
+ * `ConnectNavItem.audience`.
+ *
+ * Applied to nested `items` too, and a parent whose children all disappear is
+ * dropped along with them: a section header pointing at nothing reads as a
+ * broken link rather than as a hidden one.
+ */
+export function filterNavForAudience(nav, isStaff) {
+    const keep = (item) => item.audience === undefined || (item.audience === "staff") === isStaff;
+    const filterItem = (item) => {
+        if (!keep(item))
+            return null;
+        if (!item.items)
+            return item;
+        const items = item.items.filter(keep);
+        // A parent that had children and now has none, but is a real destination
+        // in its own right, still renders - only one that exists purely to hold
+        // them is dropped.
+        if (items.length === 0 && item.items.length > 0 && !item.href)
+            return null;
+        return { ...item, items };
+    };
+    // A plain loop rather than `flatMap`: the array's element type is a union,
+    // so a callback returning either shape widens past what `flatMap` accepts.
+    const out = [];
+    for (const entry of nav) {
+        if ("items" in entry && !("href" in entry)) {
+            const section = entry;
+            const items = section.items.map(filterItem).filter((i) => i !== null);
+            if (items.length > 0)
+                out.push({ ...section, items });
+            continue;
+        }
+        const item = filterItem(entry);
+        if (item)
+            out.push(item);
+    }
+    return out;
+}
+/** Hrefs declared `gateExempt` - the routes `AppShell` renders outside its `ConnectAccessGate`. */
 export function gateExemptPaths(nav) {
     return flattenNav(nav)
         .filter((item) => item.gateExempt)

package/dist/esm/client/components/plan-pricing.js

@@ -31,6 +31,31 @@ export function formatPrice(paise) {
 export function monthlyOf(price, billingInterval) {
     return billingInterval === "annual" ? price / 12 : price;
 }
+/**
+ * How to name a plan's cadence, in the three forms the plan screens need.
+ *
+ * One table rather than a `=== "annual" ? "year" : "month"` at each call site.
+ * That ternary was correct while there were two intervals and quietly became
+ * wrong when `"one-time"` arrived: a plan paid for once was labelled
+ * "per month", which is not a rendering imperfection but a false price.
+ */
+const INTERVAL_LABELS = {
+    monthly: { per: "month", short: "mo", adverb: "monthly" },
+    annual: { per: "year", short: "yr", adverb: "annually" },
+    // "once" reads correctly in all three positions a cadence appears in -
+    // "₹4,999 once", "Total once", "Only sold once".
+    "one-time": { per: "once", short: "once", adverb: "once" },
+};
+export function intervalLabel(billingInterval) {
+    return INTERVAL_LABELS[billingInterval];
+}
+/**
+ * `/month`, `/year` - and nothing at all for a one-time plan, where a price
+ * with no slash is the honest rendering.
+ */
+export function pricePerLabel(billingInterval) {
+    return billingInterval === "one-time" ? "" : `/${INTERVAL_LABELS[billingInterval].per}`;
+}
 export function discountLabel(discount) {
     const amount = discount.discountType === "percentage" ? `${discount.value}% off` : `${formatPrice(discount.value)} off`;
     if (discount.duration === "forever")

package/dist/esm/client/components/plans.js

@@ -7,7 +7,7 @@ import { useConnect, useConnectEntitlements, useConnectPlans } from "../provider
 import { buildCancelUrl, buildCheckoutUrl, useConnectCheckout, } from "../use-checkout.js";
 import { AnimatePresence, ENTER, m, MotionProvider } from "./motion.js";
 import { ConnectSubscribeDialog } from "./subscribe-dialog.js";
-import { ACTION_LABEL, discountLabel, formatPrice, groupPlansByTier, resolveAction, } from "./plan-pricing.js";
+import { ACTION_LABEL, discountLabel, formatPrice, groupPlansByTier, intervalLabel, pricePerLabel, resolveAction, } from "./plan-pricing.js";
 /**
  * The plan table: monthly/annual toggle, features, add-ons, the discount
  * actually in effect, and the subscribe / upgrade / downgrade flows.
@@ -123,7 +123,7 @@ export function ConnectPlans({ planIds, hideCoupon = false, className }) {
                             (tier.monthly?.id === subscription.plan.id || tier.annual?.id === subscription.plan.id);
                         const isCurrent = action === "current";
                         const cadenceUnavailable = showAnnual ? tier.annual === null : tier.monthly === null;
-                        return (_jsx(m.div, { variants: { hidden: { opacity: 0, y: 12 }, show: { opacity: 1, y: 0, transition: ENTER } }, children: _jsxs(Card, { className: isCurrentTier ? "h-full border-accent" : "h-full", children: [_jsxs(Card.Header, { children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsx(Card.Title, { children: tier.name }), _jsxs("div", { className: "flex shrink-0 items-center gap-1.5", children: [tier.annualSavingPercent !== null && showAnnual && (_jsxs(Chip, { className: "bg-accent-soft text-accent", children: ["Save ", tier.annualSavingPercent, "%"] })), isCurrentTier && _jsx(Chip, { className: "bg-accent-soft text-accent", children: "Current" })] })] }), tier.description && _jsx(Card.Description, { children: tier.description })] }), _jsxs(Card.Content, { className: "flex flex-col gap-4", children: [_jsxs("div", { children: [_jsx(AnimatePresence, { mode: "popLayout", initial: false, children: _jsxs(m.div, { initial: { opacity: 0, y: 6 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -6 }, transition: { duration: 0.15 }, children: [_jsx("span", { className: "text-2xl font-semibold text-foreground", children: formatPrice(plan.price) }), _jsxs("span", { className: "text-sm text-muted", children: ["/", plan.billingInterval === "annual" ? "year" : "month"] })] }, plan.billingInterval) }), _jsxs("p", { className: "mt-1 text-xs text-muted", children: ["+", plan.gstRate, "% GST"] }), cadenceUnavailable && (_jsxs("p", { className: "mt-1 text-xs text-muted", children: ["Only sold ", plan.billingInterval === "annual" ? "annually" : "monthly", "."] }))] }), plan.trialDays ? (_jsxs("p", { className: "text-xs font-medium text-accent", children: [plan.trialDays, "-day free trial"] })) : null, plan.features.length > 0 && (_jsx("ul", { className: "flex flex-col gap-1.5", children: plan.features.map((feature) => (
+                        return (_jsx(m.div, { variants: { hidden: { opacity: 0, y: 12 }, show: { opacity: 1, y: 0, transition: ENTER } }, children: _jsxs(Card, { className: isCurrentTier ? "h-full border-accent" : "h-full", children: [_jsxs(Card.Header, { children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsx(Card.Title, { children: tier.name }), _jsxs("div", { className: "flex shrink-0 items-center gap-1.5", children: [tier.annualSavingPercent !== null && showAnnual && (_jsxs(Chip, { className: "bg-accent-soft text-accent", children: ["Save ", tier.annualSavingPercent, "%"] })), isCurrentTier && _jsx(Chip, { className: "bg-accent-soft text-accent", children: "Current" })] })] }), tier.description && _jsx(Card.Description, { children: tier.description })] }), _jsxs(Card.Content, { className: "flex flex-col gap-4", children: [_jsxs("div", { children: [_jsx(AnimatePresence, { mode: "popLayout", initial: false, children: _jsxs(m.div, { initial: { opacity: 0, y: 6 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -6 }, transition: { duration: 0.15 }, children: [_jsx("span", { className: "text-2xl font-semibold text-foreground", children: formatPrice(plan.price) }), _jsx("span", { className: "text-sm text-muted", children: pricePerLabel(plan.billingInterval) })] }, plan.billingInterval) }), _jsxs("p", { className: "mt-1 text-xs text-muted", children: ["+", plan.gstRate, "% GST"] }), cadenceUnavailable && (_jsxs("p", { className: "mt-1 text-xs text-muted", children: ["Only sold ", intervalLabel(plan.billingInterval).adverb, "."] }))] }), plan.trialDays ? (_jsxs("p", { className: "text-xs font-medium text-accent", children: [plan.trialDays, "-day free trial"] })) : null, plan.features.length > 0 && (_jsx("ul", { className: "flex flex-col gap-1.5", children: plan.features.map((feature) => (
                                                 // `name`, not `key` - the key is an identifier
                                                 // ("campaign-module"), and printing it here is what this
                                                 // card used to do. The description rides along as a