@kybernesis/cards-react 0.1.0 → 0.3.0

package/README.md

@@ -19,6 +19,12 @@ const ctx: CardContext = {
 
 The host does everything that touches the outside: opening links, fetching pictures and artifacts from the agent, sending a `say` sentence. Leave a callback out and the card draws without it (no Open button, no preview), never broken.
 
+A question the agent is waiting on is an `AskView` (from `askFrom` or `readHiddenAsks` in `@kybernesis/cards`): an approval drawn as the email or event with Send it, Edit and Don't send, a purchase with its amount and Approve in Link, a form with its fields, anything else with its options and a box for words. `onAnswer({ optionId?, text?, label })` is the host's to send; pass `answered` once it is, and it shows the outcome instead of the buttons.
+
+```tsx
+<AskView ask={ask} ctx={ctx} answered={answered} onAnswer={(reply) => send(reply)} />
+```
+
 Theme it with `--kyb-*` variables on any ancestor: `--kyb-ink`, `--kyb-ink-secondary`, `--kyb-ink-tertiary`, `--kyb-ink-inverse`, `--kyb-surface`, `--kyb-surface-raised`, `--kyb-stroke`, `--kyb-stroke-strong`, `--kyb-hover`, `--kyb-selected`, `--kyb-good`, `--kyb-bad`, `--kyb-font-label`, `--kyb-font-mono`, `--kyb-fs-xs`, `--kyb-fs-sm`, `--kyb-fs-base`, `--kyb-lh-base`, `--kyb-shadow-menu`. Each has a light default.
 
 Artifacts run in a sandboxed frame with no origin and no network. A host whose own content policy blocks scripts in frames passes `renderArtifactHtml` to draw them its own way.

package/dist/AskView.d.ts

@@ -0,0 +1,37 @@
+import { type Ask } from "@kybernesis/cards";
+import { type ReactNode } from "react";
+import { type CardContext } from "./CardView.js";
+/**
+ * A question the agent is waiting on, drawn as what it asks.
+ *
+ * An approval shows the email, event or message it would send, with Send it,
+ * Edit and Don't send. A purchase shows the amount and merchant and opens Link.
+ * A form shows its fields. Anything else shows its sentence, its options as
+ * buttons and, when it takes words, a box to type them. The host sends the
+ * answer the way it answers anything (`onAnswer`); a pressed question then
+ * shows what was said, so it is still on record.
+ *
+ * In a shared conversation a question can be someone else's. `waitingOn`
+ * draws it without buttons, saying whose answer it waits for, and a question
+ * that carries `settled` shows how it ended for everyone who sees it.
+ */
+export interface AskReply {
+    optionId?: string;
+    text?: string;
+    /** What the answer said, in words, for the conversation. */
+    label: string;
+}
+export interface AskViewProps {
+    ask: Ask;
+    ctx: CardContext;
+    /** How it was answered, once it was. */
+    answered?: AskReply;
+    /** Why the last answer did not go, shown under the buttons. */
+    error?: string;
+    /** True while an answer is on its way. */
+    sending?: boolean;
+    /** Someone else's question: drawn without buttons, waiting on this name. */
+    waitingOn?: string;
+    onAnswer(reply: AskReply): void;
+}
+export declare function AskView(props: AskViewProps): ReactNode;

package/dist/AskView.js

@@ -0,0 +1,155 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cardTitle, formAnswer, isKnownCard, money, settledLabel, settledLine } from "@kybernesis/cards";
+import { useState } from "react";
+import { ApprovalBody, CardView } from "./CardView.js";
+function host(url) {
+    try {
+        return new URL(url).hostname.replace(/^www\./, "");
+    }
+    catch {
+        return url;
+    }
+}
+function Done({ title, label, good, detail }) {
+    return (_jsxs("div", { className: "kcard kask is-done", children: [_jsxs("div", { className: "kcard__head", children: [_jsx("span", { className: "kcard__title", children: title }), _jsx("span", { className: `kpill${good ? " is-good" : ""}`, children: label })] }), detail ? _jsx("div", { className: "kcard__text", children: detail }) : null] }));
+}
+function Status({ error, sending }) {
+    if (error)
+        return _jsx("div", { className: "kask__error", children: error });
+    if (sending)
+        return _jsx("div", { className: "kask__note", children: "Sending\u2026" });
+    return null;
+}
+function ApprovalAsk({ ask, data, title, props }) {
+    const editable = data.kind !== "action" && (data.subject !== undefined || data.body !== undefined);
+    const [editing, setEditing] = useState(false);
+    const [subject, setSubject] = useState(data.subject ?? "");
+    const [body, setBody] = useState(data.body ?? "");
+    const sends = data.kind === "email" || data.kind === "message";
+    const approve = ask.options?.find((o) => o.id === "approve") ? "approve" : ask.options?.[0]?.id ?? "approve";
+    const busy = props.sending === true;
+    const sendBack = () => {
+        const lines = ["Not as written. Make it again with these changes, then ask me again."];
+        if (subject.trim() !== (data.subject ?? ""))
+            lines.push(`${data.kind === "event" ? "Title" : "Subject"}: ${subject.trim()}`);
+        if (body !== (data.body ?? ""))
+            lines.push(`${data.kind === "event" ? "Description" : "Body"}:\n${body.trim()}`);
+        props.onAnswer({ optionId: "cancel", text: lines.join("\n"), label: "Sent back with changes" });
+    };
+    return (_jsxs("div", { className: "kcard kcard--approval kask", children: [_jsxs("div", { className: "kcard__head", children: [_jsx("span", { className: "kcard__title", children: title }), data.service ? _jsx("span", { className: "klabel kcard__source", children: data.service }) : null] }), editing ? (_jsxs("div", { className: "kform", children: [data.subject !== undefined ? (_jsxs("label", { className: "kform__field", children: [_jsx("span", { className: "klabel", children: data.kind === "event" ? "Event" : "Subject" }), _jsx("input", { className: "kinput", value: subject, onChange: (e) => setSubject(e.target.value) })] })) : null, _jsxs("label", { className: "kform__field", children: [_jsx("span", { className: "klabel", children: data.kind === "event" ? "Description" : "Message" }), _jsx("textarea", { className: "kinput kinput--long", rows: 8, value: body, onChange: (e) => setBody(e.target.value) })] })] })) : (_jsx(ApprovalBody, { data: data })), _jsx("div", { className: "kcard__actions", children: editing ? (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "kbtn kbtn--primary", disabled: busy, onClick: sendBack, children: "Send back with changes" }), _jsx("button", { type: "button", className: "kbtn", disabled: busy, onClick: () => setEditing(false), children: "Never mind" })] })) : (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "kbtn kbtn--primary", disabled: busy, onClick: () => props.onAnswer({ optionId: approve, label: "Approved" }), children: sends ? (data.action === "Save draft" ? "Save it" : "Send it") : "Approve" }), editable ? (_jsx("button", { type: "button", className: "kbtn", disabled: busy, onClick: () => setEditing(true), children: "Edit" })) : null, _jsx("button", { type: "button", className: "kbtn", disabled: busy, onClick: () => props.onAnswer({ optionId: "cancel", label: "Declined" }), children: sends ? "Don't send" : "Decline" })] })) }), _jsx(Status, { error: props.error, sending: props.sending })] }));
+}
+function FieldInput({ field, value, onChange }) {
+    if (field.kind === "long") {
+        return _jsx("textarea", { className: "kinput kinput--long", rows: 4, value: value, placeholder: field.placeholder, onChange: (e) => onChange(e.target.value) });
+    }
+    if (field.kind === "choice" && field.options?.length) {
+        return (_jsx("div", { className: "kform__choices", children: field.options.map((o) => (_jsx("button", { type: "button", className: `kbtn${value === o ? " kbtn--primary" : ""}`, onClick: () => onChange(o), children: o }, o))) }));
+    }
+    const type = field.kind === "number" ? "number" : field.kind === "date" ? "date" : field.kind === "email" ? "email" : "text";
+    return _jsx("input", { className: "kinput", type: type, value: value, placeholder: field.placeholder, onChange: (e) => onChange(e.target.value) });
+}
+function FormAsk({ ask, data, title, props }) {
+    const [values, setValues] = useState(() => Object.fromEntries(data.fields.map((f) => [f.id, f.value ?? ""])));
+    const missing = data.fields.some((f) => f.required && !values[f.id]?.trim());
+    const cancel = ask.options?.find((o) => o.id === "cancel");
+    const busy = props.sending === true;
+    const submit = () => {
+        const filled = Object.fromEntries(Object.entries(values).map(([k, v]) => [k, v.trim()]).filter(([, v]) => v));
+        const summary = data.fields.filter((f) => filled[f.id]).map((f) => `${f.label}: ${filled[f.id]}`).join("\n");
+        props.onAnswer({ text: formAnswer(filled), label: summary || "Sent" });
+    };
+    return (_jsxs("div", { className: "kcard kcard--form kask", children: [_jsxs("div", { className: "kcard__head", children: [_jsx("span", { className: "kcard__title", children: title ?? "A few details" }), _jsx("span", { className: "klabel kcard__source", children: "Question" })] }), ask.text ? _jsx("div", { className: "kask__text", children: ask.text }) : null, _jsx("div", { className: "kform", children: data.fields.map((f) => (_jsxs("label", { className: "kform__field", children: [_jsxs("span", { className: "klabel", children: [f.label, f.required ? " *" : ""] }), _jsx(FieldInput, { field: f, value: values[f.id] ?? "", onChange: (v) => setValues((cur) => ({ ...cur, [f.id]: v })) })] }, f.id))) }), _jsxs("div", { className: "kcard__actions", children: [_jsx("button", { type: "button", className: "kbtn kbtn--primary", disabled: missing || busy, onClick: submit, children: data.submit ?? "Send" }), cancel ? (_jsx("button", { type: "button", className: "kbtn", disabled: busy, onClick: () => props.onAnswer({ optionId: cancel.id, label: cancel.label }), children: cancel.label })) : null] }), _jsx(Status, { error: props.error, sending: props.sending })] }));
+}
+/** The options as buttons and, when the question takes words, a box for them. */
+function Choices({ ask, props, skip = [] }) {
+    const [words, setWords] = useState("");
+    const options = ask.options?.filter((o) => !skip.includes(o.id)) ?? [];
+    const typed = ask.allowFreeform === true || !ask.options?.length;
+    const busy = props.sending === true;
+    return (_jsxs(_Fragment, { children: [options.length ? (_jsx("div", { className: "kcard__actions", children: options.map((o, i) => (_jsx("button", { type: "button", title: o.description, className: `kbtn${o.style === "primary" || (i === 0 && ask.kind === "tool-approval") ? " kbtn--primary" : ""}`, disabled: busy, onClick: () => props.onAnswer({ optionId: o.id, label: o.label }), children: o.label }, o.id))) })) : null, typed ? (_jsxs("form", { className: "kask__typed", onSubmit: (e) => {
+                    e.preventDefault();
+                    const t = words.trim();
+                    if (t)
+                        props.onAnswer({ text: t, label: t });
+                }, children: [_jsx("input", { className: "kinput", value: words, placeholder: "Your answer", onChange: (e) => setWords(e.target.value) }), _jsx("button", { type: "submit", className: "kbtn", disabled: busy || !words.trim(), children: "Send" })] })) : null, _jsx(Status, { error: props.error, sending: props.sending })] }));
+}
+function outcome(reply) {
+    if (reply.optionId === "cancel")
+        return { label: /changes/i.test(reply.label) ? "Sent back" : "Declined", good: false };
+    return { label: reply.optionId === "approve" || reply.optionId === "approved" ? "Approved" : "Answered", good: true };
+}
+function askTitle(ask) {
+    const card = ask.card && isKnownCard(ask.card) ? ask.card : undefined;
+    if (card?.card === "approval")
+        return cardTitle(card) ?? card.data.action;
+    if (card?.card === "form")
+        return card.title ?? "A few details";
+    if (ask.spend)
+        return "Purchase approval";
+    return ask.text.split("\n")[0].slice(0, 120) || "Question";
+}
+/** What the question asks, without anything to press: the email, the amount, or the sentence. */
+function AskBody({ ask }) {
+    const card = ask.card && isKnownCard(ask.card) ? ask.card : undefined;
+    if (card?.card === "approval")
+        return _jsx(ApprovalBody, { data: card.data });
+    if (ask.spend) {
+        const s = ask.spend;
+        return (_jsxs("div", { className: "kask__amount", children: [_jsx("span", { className: "kask__total", children: money(s.amount, s.currency) }), _jsxs("span", { className: "kask__note", children: ["at ", s.merchant ?? (s.merchant_url ? host(s.merchant_url) : "a merchant")] })] }));
+    }
+    return ask.text ? _jsx("div", { className: "kask__text", children: ask.text }) : null;
+}
+/** A question answered or let go, as everyone in the conversation sees it. */
+function Settled({ ask }) {
+    const outcome = ask.settled.outcome;
+    const good = outcome === "approved" || outcome === "answered";
+    const card = ask.card && isKnownCard(ask.card) ? ask.card : undefined;
+    return (_jsxs("div", { className: "kcard kask is-done", children: [_jsxs("div", { className: "kcard__head", children: [_jsx("span", { className: "kcard__title", children: askTitle(ask) }), _jsx("span", { className: `kpill${good ? " is-good" : ""}`, children: settledLabel(ask) })] }), card?.card === "approval" && card.data.subject ? _jsx("div", { className: "kcard__text", children: card.data.subject }) : null, _jsx("div", { className: "kask__note", children: settledLine(ask) })] }));
+}
+/** Someone else's question, open: what it asks, and whose answer it waits for. */
+function Waiting({ ask, name }) {
+    return (_jsxs("div", { className: "kcard kask", children: [_jsxs("div", { className: "kcard__head", children: [_jsx("span", { className: "kcard__title", children: askTitle(ask) }), _jsxs("span", { className: "kpill", children: ["Waiting on ", name] })] }), _jsx(AskBody, { ask: ask })] }));
+}
+export function AskView(props) {
+    const { ask, ctx, answered } = props;
+    const card = ask.card && isKnownCard(ask.card) ? ask.card : undefined;
+    if (ask.settled)
+        return _jsx(Settled, { ask: ask });
+    if (props.waitingOn && !answered)
+        return _jsx(Waiting, { ask: ask, name: props.waitingOn });
+    if (card?.card === "approval") {
+        const title = cardTitle(card) ?? card.data.action;
+        if (answered) {
+            const o = outcome(answered);
+            return _jsx(Done, { title: title, label: o.label, good: o.good, detail: card.data.subject });
+        }
+        return _jsx(ApprovalAsk, { ask: ask, data: card.data, title: title, props: props });
+    }
+    if (card?.card === "form") {
+        if (answered) {
+            const skipped = answered.optionId === "cancel";
+            return _jsx(Done, { title: card.title ?? "Your answers", label: skipped ? "Skipped" : "Sent", good: !skipped, detail: skipped ? undefined : answered.label });
+        }
+        return _jsx(FormAsk, { ask: ask, data: card.data, title: card.title, props: props });
+    }
+    if (ask.spend) {
+        const s = ask.spend;
+        const merchant = s.merchant ?? (s.merchant_url ? host(s.merchant_url) : "a merchant");
+        if (answered) {
+            const cancelled = answered.optionId === "cancel";
+            return _jsx(Done, { title: "Purchase approval", label: cancelled ? "Cancelled" : "Approved", good: !cancelled, detail: `${money(s.amount, s.currency)} at ${merchant}` });
+        }
+        return (_jsxs("div", { className: "kcard kcard--spend kask", children: [_jsxs("div", { className: "kcard__head", children: [_jsx("span", { className: "kcard__title", children: "Purchase approval" }), _jsx("span", { className: "klabel kcard__source", children: "Link" })] }), _jsxs("div", { className: "kask__amount", children: [_jsx("span", { className: "kask__total", children: money(s.amount, s.currency) }), _jsxs("span", { className: "kask__note", children: ["at ", merchant, s.merchant_url && s.merchant ? _jsxs(_Fragment, { children: [" \u00B7 ", host(s.merchant_url)] }) : null] })] }), s.approval_url ? (_jsx("div", { className: "kcard__actions", children: _jsx("button", { type: "button", className: "kbtn kbtn--primary", onClick: () => ctx.openUrl(s.approval_url), children: "Approve in Link" }) })) : null, _jsx(Choices, { ask: ask, props: props }), _jsx("div", { className: "kask__note", children: "Approving in Link issues a one-time card for exactly this amount. The agent checks with Link before paying." })] }));
+    }
+    if (ask.vault) {
+        const v = ask.vault;
+        const what = v.kind === "login" ? "a login" : v.kind === "card" ? "a card" : v.kind === "address" ? "an address" : "contact details";
+        if (answered)
+            return _jsx(Done, { title: `Needs ${what}`, label: answered.optionId === "cancel" ? "Cancelled" : "Answered", good: answered.optionId !== "cancel" });
+        return (_jsxs("div", { className: "kcard kcard--vault kask", children: [_jsxs("div", { className: "kcard__head", children: [_jsxs("span", { className: "kcard__title", children: ["Needs ", what, v.site ? _jsxs(_Fragment, { children: [" for ", host(v.site)] }) : null] }), _jsx("span", { className: "klabel kcard__source", children: "Vault" })] }), v.reason ? _jsx("div", { className: "kask__text", children: v.reason }) : ask.text ? _jsx("div", { className: "kask__text", children: ask.text }) : null, _jsx("div", { className: "kask__note", children: "Add it to your vault in KYBER Studio. Never type a password or card number in a conversation." }), _jsx(Choices, { ask: { ...ask, allowFreeform: false }, props: props })] }));
+    }
+    // Any other question: its card, if it carries one, then its sentence and options.
+    if (answered)
+        return _jsx(Done, { title: ask.text.split("\n")[0].slice(0, 120) || "Question", label: "Answered", good: true, detail: answered.label });
+    return (_jsxs("div", { className: "kask-stack", children: [ask.card ? _jsx(CardView, { card: ask.card, ctx: ctx }) : null, _jsxs("div", { className: "kcard kask", children: [_jsx("div", { className: "kask__text", children: ask.text }), _jsx(Choices, { ask: ask, props: props })] })] }));
+}

package/dist/index.d.ts

@@ -1,2 +1,3 @@
 export { ApprovalBody, ArtifactFrame, CardStack, CardView, dateLabel, formatSize, whenLabel, withPolicy, type CardContext, type Loaded, } from "./CardView.js";
+export { AskView, type AskReply, type AskViewProps } from "./AskView.js";
 export { cardStyles } from "./styles.js";

package/dist/index.js

@@ -1,2 +1,3 @@
 export { ApprovalBody, ArtifactFrame, CardStack, CardView, dateLabel, formatSize, whenLabel, withPolicy, } from "./CardView.js";
+export { AskView } from "./AskView.js";
 export { cardStyles } from "./styles.js";

package/dist/styles.js

@@ -85,6 +85,22 @@ export const cardStyles = `
 .kbrief__facts dd { margin: 2px 0 0; }
 .kbrief .kstats { margin-top: 12px; }
 
+.kform__field { display: flex; flex-direction: column; gap: 4px; }
+.kinput {
+  width: 100%; box-sizing: border-box; min-height: 30px; padding: 5px 9px; border-radius: 8px;
+  border: 1px solid var(--kyb-stroke-strong, rgba(22, 24, 29, 0.16)); background: var(--kyb-surface, #ffffff);
+  color: var(--kyb-ink, #16181d); font: inherit; font-size: var(--kyb-fs-base, 14px);
+}
+.kinput--long { resize: vertical; min-height: 90px; }
+.kbtn:disabled { opacity: 0.5; cursor: default; }
+.kask-stack { display: flex; flex-direction: column; gap: 8px; }
+.kask__text { white-space: pre-wrap; margin-bottom: 4px; }
+.kask__note { font-size: var(--kyb-fs-sm, 13px); color: var(--kyb-ink-tertiary, #8b91a0); margin-top: 8px; }
+.kask__error { font-size: var(--kyb-fs-sm, 13px); color: var(--kyb-bad, #dc2626); margin-top: 8px; }
+.kask__amount { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
+.kask__amount .kask__note { margin-top: 0; }
+.kask__total { font-size: 22px; line-height: 28px; font-weight: 600; font-variant-numeric: tabular-nums; }
+.kask__typed { display: flex; gap: 7px; margin-top: 10px; }
 .klink { display: block; width: 100%; text-align: left; padding: 0; }
 .klink__desc { color: var(--kyb-ink-secondary, #5c6270); margin-bottom: 4px; }
 .klink__url { font-size: var(--kyb-fs-sm, 13px); color: var(--kyb-ink-tertiary, #8b91a0); text-decoration: underline; text-decoration-color: var(--kyb-stroke-strong, rgba(22, 24, 29, 0.16)); }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kybernesis/cards-react",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "React components that draw Kybernesis cards: one frame and one body per card type, themed by CSS variables, with the host's own way to open links, artifacts and files.",
   "license": "Apache-2.0",
   "type": "module",
@@ -31,11 +31,11 @@
     "test": "node --test \"test/**/*.test.mjs\""
   },
   "peerDependencies": {
-    "@kybernesis/cards": "^0.4.0",
+    "@kybernesis/cards": "^0.6.0",
     "react": ">=18"
   },
   "devDependencies": {
-    "@kybernesis/cards": "^0.4.0",
+    "@kybernesis/cards": "^0.6.0",
     "@types/node": "^24.0.0",
     "@types/react": "^19.0.0",
     "react": "^19.0.0",