@kybernesis/cards-react 0.2.0 → 0.3.0

package/dist/AskView.d.ts

@@ -10,6 +10,10 @@ import { type CardContext } from "./CardView.js";
  * 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;
@@ -26,6 +30,8 @@ export interface AskViewProps {
     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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { cardTitle, formAnswer, isKnownCard, money } from "@kybernesis/cards";
+import { cardTitle, formAnswer, isKnownCard, money, settledLabel, settledLine } from "@kybernesis/cards";
 import { useState } from "react";
 import { ApprovalBody, CardView } from "./CardView.js";
 function host(url) {
@@ -78,9 +78,45 @@ function outcome(reply) {
         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) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kybernesis/cards-react",
-  "version": "0.2.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.5.0",
+    "@kybernesis/cards": "^0.6.0",
     "react": ">=18"
   },
   "devDependencies": {
-    "@kybernesis/cards": "^0.5.0",
+    "@kybernesis/cards": "^0.6.0",
     "@types/node": "^24.0.0",
     "@types/react": "^19.0.0",
     "react": "^19.0.0",