@kybernesis/cards-react 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/NOTICE

@@ -0,0 +1,2 @@
+@kybernesis/cards-react
+Copyright 2026 Kybernesis (kybernesis.ai)

package/README.md

@@ -1,3 +1,24 @@
-# Temporary Holding Version
+# @kybernesis/cards-react
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+React components that draw [`@kybernesis/cards`](../cards) cards. One frame for every card, one body per type, the same in every app that shows them.
+
+```tsx
+import { CardStack, cardStyles, type CardContext } from "@kybernesis/cards-react";
+
+const ctx: CardContext = {
+  agentUrl,
+  openUrl: (url) => window.open(url, "_blank", "noopener"),
+  onSay: (text) => send(text),
+};
+
+<>
+  <style>{cardStyles}</style>
+  <CardStack cards={cards} ctx={ctx} />
+</>;
+```
+
+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.
+
+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/CardView.d.ts

@@ -0,0 +1,93 @@
+import { type ApprovalData, type ArtifactData, type Card } from "@kybernesis/cards";
+import { type ReactNode } from "react";
+/**
+ * Cards in a reply: what a tool handed back, drawn instead of described.
+ *
+ * Every card shares one frame (a title, where the data came from, the body,
+ * at most a few buttons), so a new type is only a new body. A card is data,
+ * never markup; the only thing here that runs anything is an artifact, which
+ * runs in a sandboxed frame that cannot reach the agent or the network.
+ *
+ * Ink and greys only. Green and red appear where they mean good and bad: a
+ * change, a check, a diff line. Nothing else is coloured.
+ *
+ * Nothing here knows which app it is in. Opening a link, fetching a picture
+ * or an artifact, and sending a sentence are the host's, through `CardContext`;
+ * a host that cannot do one leaves it out and the card draws without it.
+ */
+export type Loaded<T> = ({
+    ok: true;
+} & T) | {
+    ok: false;
+    error: string;
+};
+export interface CardContext {
+    /** The agent's base URL, for pictures and artifacts on its own origin. */
+    agentUrl?: string;
+    /** Open an address in the browser. Paths on the agent arrive already resolved against `agentUrl`. */
+    openUrl(url: string): void;
+    /** A `say` action: sent as the person's next message, only when pressed. Absent hides `say` buttons. */
+    onSay?(text: string): void;
+    /** Open an artifact in full. Absent hides Open. */
+    onOpenArtifact?(artifactId: string, title?: string, version?: number): void;
+    /** Fetch a picture the agent serves, as a data URL. Absent: only `data:` and http(s) pictures draw. */
+    loadImage?(src: string): Promise<Loaded<{
+        dataUrl: string;
+    }>>;
+    /** Fetch an artifact's content. Absent: the artifact card shows its details and Open, no preview. */
+    loadArtifact?(artifactId: string, version?: number): Promise<Loaded<{
+        content: string;
+        format?: string;
+    }>>;
+    /**
+     * Draw an artifact's page in the card the host's own way, such as from its
+     * share link. Return nothing to fall back to `loadArtifact`.
+     */
+    renderArtifact?(artifact: ArtifactData, title?: string): ReactNode;
+    /** Draw an artifact's HTML in place of the sandboxed frame, for hosts that cannot run one. */
+    renderArtifactHtml?(html: string, mode: "inline" | "preview" | "full"): ReactNode;
+    /** Save or open a file the agent links to. Absent: the file opens as a link. */
+    openFile?(url: string, name: string): void;
+    /** The host's markdown, for markdown artifacts. Absent: shown as plain text. */
+    renderMarkdown?(text: string): ReactNode;
+}
+export declare function formatSize(bytes: number): string;
+/**
+ * The frame's own content policy, first in the document: inline code and data
+ * only, no network. The sandbox already gives it no origin; this also stops it
+ * loading a script or an image from anywhere.
+ */
+export declare function withPolicy(html: string): string;
+/**
+ * An artifact drawn in the conversation: its content in a sandboxed frame
+ * (`allow-scripts` without `allow-same-origin`, so it has no origin of its own
+ * and cannot reach the agent, the app, or the network), or markdown through
+ * the host's renderer.
+ */
+export declare function ArtifactFrame({ artifactId, version, className, mode, ctx, }: {
+    artifactId: string;
+    version?: number;
+    className?: string;
+    mode?: "inline" | "preview" | "full";
+    ctx: CardContext;
+}): ReactNode;
+export declare function dateLabel(iso?: string): string | undefined;
+/** An event's time as a person reads it: "Thu 29 Oct, 2:00 PM – 3:00 PM". A date alone stays a date. */
+export declare function whenLabel(when?: string, until?: string): string | undefined;
+/**
+ * What an approval would do, as the thing itself: the email with its
+ * recipients and body, the event with its time and people. Read-only; the
+ * buttons belong to the question that holds it.
+ */
+export declare function ApprovalBody({ data }: {
+    data: ApprovalData;
+}): ReactNode;
+export declare function CardView({ card, ctx }: {
+    card: Card;
+    ctx: CardContext;
+}): ReactNode;
+/** Several cards, in the order they arrived. */
+export declare function CardStack({ cards, ctx }: {
+    cards: Card[];
+    ctx: CardContext;
+}): ReactNode;

package/dist/CardView.js

@@ -0,0 +1,340 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cardTitle, isKnownCard, money, routineSchedule, withUnit, } from "@kybernesis/cards";
+import { useEffect, useRef, useState } from "react";
+const isHttp = (url) => /^https?:\/\//i.test(url);
+function resolve(url, ctx) {
+    // A path is on the agent's own address.
+    return isHttp(url) ? url : ctx.agentUrl ? new URL(url, ctx.agentUrl).toString() : null;
+}
+function openUrl(url, ctx) {
+    const target = resolve(url, ctx);
+    if (target)
+        ctx.openUrl(target);
+}
+function openFile(url, name, ctx) {
+    if (ctx.openFile)
+        ctx.openFile(url, name);
+    else
+        openUrl(url, ctx);
+}
+export function formatSize(bytes) {
+    if (bytes < 1024)
+        return `${bytes} B`;
+    if (bytes < 1024 * 1024)
+        return `${Math.round(bytes / 1024)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+function Wait({ className }) {
+    return (_jsx("div", { className: className, role: "status", "aria-label": "Loading", children: _jsx("span", { className: "kspin" }) }));
+}
+function usable(a, ctx) {
+    if (a.artifact)
+        return !!ctx.onOpenArtifact;
+    if (a.say)
+        return !!ctx.onSay;
+    return !!a.url;
+}
+function Actions({ actions, ctx }) {
+    const shown = actions?.filter((a) => usable(a, ctx)) ?? [];
+    if (!shown.length)
+        return null;
+    return (_jsx("div", { className: "kcard__actions", children: shown.map((a, i) => (_jsx("button", { type: "button", className: `kbtn${a.primary ? " kbtn--primary" : ""}`, onClick: () => {
+                if (a.artifact)
+                    ctx.onOpenArtifact?.(a.artifact);
+                else if (a.url)
+                    openUrl(a.url, ctx);
+                else if (a.say)
+                    ctx.onSay?.(a.say);
+            }, children: a.label }, i))) }));
+}
+function toneClass(tone) {
+    return tone === "good" ? " is-good" : tone === "bad" ? " is-bad" : "";
+}
+function Tiles({ tiles }) {
+    return (_jsx("div", { className: "kstats", children: tiles.map((t, i) => (_jsxs("div", { className: "kstats__tile", children: [_jsx("div", { className: "klabel", children: t.label }), _jsx("div", { className: "kstats__value", children: t.value }), t.change ? _jsx("div", { className: `kstats__change${toneClass(t.tone)}`, children: t.change }) : null] }, i))) }));
+}
+/** A line, area or bar chart as SVG, with the values under the pointer. */
+function Chart({ data }) {
+    const W = 600;
+    const H = 160;
+    const [hover, setHover] = useState(null);
+    const ref = useRef(null);
+    const n = data.x.length;
+    const all = data.series.flatMap((s) => s.values);
+    const lo = Math.min(0, ...all);
+    const hi = Math.max(...all, lo + 1);
+    const y = (v) => H - 6 - ((v - lo) / (hi - lo)) * (H - 12);
+    const x = (i) => (n <= 1 ? W / 2 : (i / (n - 1)) * W);
+    const fmt = (v) => withUnit(v.toLocaleString(), data.unit);
+    const bars = data.kind === "bar";
+    // Where point i sits across the plot, as a share of its width: bars sit in the middle of their slot.
+    const across = (i) => (bars ? (i + 0.5) / Math.max(1, n) : x(i) / W);
+    const marks = data.series.map((s, si) => {
+        if (data.kind === "bar") {
+            const group = W / Math.max(1, n);
+            const width = (group * 0.7) / data.series.length;
+            return s.values.map((v, i) => (_jsx("rect", { className: `kchart__bar kchart__s${si}`, x: i * group + group * 0.15 + si * width, y: Math.min(y(v), y(0)), width: Math.max(1, width - 1), height: Math.abs(y(0) - y(v)) }, `${si}-${i}`)));
+        }
+        const points = s.values.map((v, i) => `${x(i)},${y(v)}`).join(" ");
+        return (_jsxs("g", { children: [data.kind === "area" && si === 0 ? (_jsx("polygon", { className: `kchart__area kchart__s${si}`, points: `${x(0)},${y(lo)} ${points} ${x(s.values.length - 1)},${y(lo)}` })) : null, _jsx("polyline", { className: `kchart__line kchart__s${si}`, points: points, vectorEffect: "non-scaling-stroke" })] }, si));
+    });
+    const label = (i) => data.x[i] ?? "";
+    // Every label while they fit (a week of days); otherwise the ends and the middle.
+    const ticks = n <= (bars ? 12 : 8) ? [...Array(n).keys()] : [0, Math.floor((n - 1) / 2), n - 1];
+    return (_jsxs("div", { className: "kchart", children: [data.series.length > 1 ? (_jsx("div", { className: "kchart__legend", children: data.series.map((s, si) => (_jsxs("span", { className: "kchart__key", children: [_jsx("span", { className: `kchart__swatch kchart__s${si}` }), s.name] }, si))) })) : null, _jsxs("div", { className: "kchart__plot", children: [_jsxs("div", { className: "kchart__y", children: [_jsx("span", { children: fmt(hi) }), _jsx("span", { children: fmt(lo) })] }), _jsxs("div", { className: "kchart__frame", children: [_jsxs("svg", { ref: ref, viewBox: `0 0 ${W} ${H}`, preserveAspectRatio: "none", className: "kchart__svg", onMouseMove: (e) => {
+                                    const box = ref.current?.getBoundingClientRect();
+                                    if (!box || n === 0)
+                                        return;
+                                    const share = (e.clientX - box.left) / box.width;
+                                    const at = bars ? Math.floor(share * n) : Math.round(share * (n - 1));
+                                    setHover(Math.max(0, Math.min(n - 1, at)));
+                                }, onMouseLeave: () => setHover(null), children: [_jsx("line", { className: "kchart__base", x1: 0, x2: W, y1: y(0), y2: y(0), vectorEffect: "non-scaling-stroke" }), marks, hover !== null ? (_jsx("line", { className: "kchart__rule", x1: across(hover) * W, x2: across(hover) * W, y1: 0, y2: H, vectorEffect: "non-scaling-stroke" })) : null] }), hover !== null ? (_jsxs("div", { className: "kchart__tip", style: { left: `${across(hover) * 100}%` }, children: [_jsx("div", { className: "klabel", children: label(hover) }), data.series.map((s, si) => (_jsxs("div", { children: [data.series.length > 1 ? `${s.name} ` : "", _jsx("strong", { children: fmt(s.values[hover] ?? 0) })] }, si)))] })) : null, _jsx("div", { className: bars ? "kchart__x kchart__x--slots" : "kchart__x", style: bars ? { gridTemplateColumns: `repeat(${n}, 1fr)` } : undefined, children: bars
+                                    ? data.x.map((_, i) => _jsx("span", { children: ticks.includes(i) ? label(i) : "" }, i))
+                                    : ticks.map((i) => _jsx("span", { children: label(i) }, i)) })] })] })] }));
+}
+/** A picture: inline data, a public address, or one the host fetches from the agent. */
+function AgentImage({ src, alt, ctx }) {
+    const [state, setState] = useState(null);
+    const [big, setBig] = useState(false);
+    useEffect(() => {
+        let live = true;
+        if (src.startsWith("data:image/")) {
+            setState({ url: src });
+            return;
+        }
+        if (!ctx.loadImage) {
+            setState(isHttp(src) ? { url: src } : { error: "This picture is on the agent and can't be shown here." });
+            return;
+        }
+        if (!ctx.agentUrl && !isHttp(src)) {
+            setState({ error: "No agent address to fetch this from." });
+            return;
+        }
+        setState(null);
+        void ctx.loadImage(src).then((r) => {
+            if (live)
+                setState(r.ok ? { url: r.dataUrl } : { error: r.error });
+        });
+        return () => {
+            live = false;
+        };
+    }, [src, ctx.agentUrl, ctx.loadImage]);
+    if (!state)
+        return _jsx(Wait, { className: "kshot__wait" });
+    if (!state.url) {
+        return (_jsxs("div", { className: "kshot__missing", children: [state.error, isHttp(src) ? (_jsx("button", { type: "button", className: "kbtn", onClick: () => ctx.openUrl(src), children: "Open in browser" })) : null] }));
+    }
+    return (_jsx("img", { className: `kshot__img${big ? " kshot__img--big" : ""}`, src: state.url, alt: alt, onClick: () => setBig((b) => !b), title: big ? "Smaller" : "Larger" }));
+}
+/**
+ * The frame's own content policy, first in the document: inline code and data
+ * only, no network. The sandbox already gives it no origin; this also stops it
+ * loading a script or an image from anywhere.
+ */
+export function withPolicy(html) {
+    const csp = "default-src 'none'; script-src 'unsafe-inline'; style-src 'unsafe-inline'; img-src data: blob:; font-src data:; media-src data: blob:";
+    return `<meta http-equiv="Content-Security-Policy" content="${csp}">${html}`;
+}
+const MODE_CLASS = { inline: "kartifact--inline", preview: "kartifact--preview", full: "" };
+/**
+ * An artifact drawn in the conversation: its content in a sandboxed frame
+ * (`allow-scripts` without `allow-same-origin`, so it has no origin of its own
+ * and cannot reach the agent, the app, or the network), or markdown through
+ * the host's renderer.
+ */
+export function ArtifactFrame({ artifactId, version, className, mode = "full", ctx, }) {
+    const [state, setState] = useState(null);
+    useEffect(() => {
+        let live = true;
+        setState(null);
+        if (!ctx.loadArtifact) {
+            setState({ error: "This artifact can't be shown here." });
+            return;
+        }
+        void ctx.loadArtifact(artifactId, version).then((r) => {
+            if (live)
+                setState(r.ok ? { content: r.content, format: r.format } : { error: r.error });
+        });
+        return () => {
+            live = false;
+        };
+    }, [artifactId, version, ctx.loadArtifact]);
+    const classes = [MODE_CLASS[mode], className].filter(Boolean).join(" ");
+    if (!state)
+        return _jsx(Wait, { className: `kartifact__wait ${classes}` });
+    if (state.error)
+        return _jsx("div", { className: `kartifact__missing ${classes}`, children: state.error });
+    if (state.format === "markdown") {
+        return (_jsx("div", { className: `kartifact__doc ${classes}`, children: ctx.renderMarkdown ? ctx.renderMarkdown(state.content ?? "") : _jsx("div", { className: "kartifact__plain", children: state.content }) }));
+    }
+    if (ctx.renderArtifactHtml) {
+        return _jsx("div", { className: `kartifact__host ${classes}`, children: ctx.renderArtifactHtml(state.content ?? "", mode) });
+    }
+    return (_jsx("iframe", { className: `kartifact__frame ${classes}`, sandbox: "allow-scripts", srcDoc: withPolicy(state.content ?? ""), title: "Artifact", referrerPolicy: "no-referrer" }));
+}
+export function dateLabel(iso) {
+    if (!iso)
+        return undefined;
+    const at = Date.parse(iso);
+    if (Number.isNaN(at))
+        return undefined;
+    return new Date(at).toLocaleString([], { month: "short", day: "numeric", hour: "numeric", minute: "2-digit" });
+}
+function ArtifactBody({ data, title, ctx }) {
+    const meta = [
+        data.format === "markdown" ? "Document" : "Page",
+        data.version ? `v${data.version}` : undefined,
+        dateLabel(data.updatedAt) ? `updated ${dateLabel(data.updatedAt)}` : undefined,
+    ].filter(Boolean);
+    // A host without its own viewer opens the share link, when there is one.
+    const link = data.url;
+    const open = ctx.onOpenArtifact ?? (link ? () => openUrl(link, ctx) : undefined);
+    const drawn = ctx.renderArtifact?.(data, title);
+    return (_jsxs(_Fragment, { children: [drawn != null ? (_jsx("div", { className: "kartifact__host", children: drawn })) : !ctx.loadArtifact ? null : data.display === "inline" ? (_jsx(ArtifactFrame, { artifactId: data.artifactId, version: data.version, mode: "inline", ctx: ctx })) : open ? (
+            // A document shows its top as a preview; the whole thing opens on a click.
+            _jsx("button", { type: "button", className: "kartifact__preview", "aria-label": `Open ${title ?? "artifact"}`, onClick: () => open(data.artifactId, title, data.version), children: _jsx(ArtifactFrame, { artifactId: data.artifactId, version: data.version, mode: "preview", ctx: ctx }) })) : (_jsx("div", { className: "kartifact__preview", children: _jsx(ArtifactFrame, { artifactId: data.artifactId, version: data.version, mode: "preview", ctx: ctx }) })), _jsx("div", { className: "kartifact__row", children: _jsx("span", { className: "kartifact__meta", children: meta.join(" · ") }) }), open ? (_jsx("div", { className: "kcard__actions", children: _jsx("button", { type: "button", className: "kbtn kbtn--primary", onClick: () => open(data.artifactId, title, data.version), children: "Open" }) })) : null] }));
+}
+/** An event's time as a person reads it: "Thu 29 Oct, 2:00 PM – 3:00 PM". A date alone stays a date. */
+export function whenLabel(when, until) {
+    if (!when)
+        return undefined;
+    const dateOnly = /^\d{4}-\d{2}-\d{2}$/;
+    const at = Date.parse(when);
+    if (Number.isNaN(at))
+        return until ? `${when} – ${until}` : when;
+    if (dateOnly.test(when)) {
+        return new Date(`${when}T00:00:00`).toLocaleDateString([], { weekday: "short", day: "numeric", month: "short" });
+    }
+    const start = new Date(at);
+    const head = start.toLocaleString([], { weekday: "short", day: "numeric", month: "short", hour: "numeric", minute: "2-digit" });
+    const end = until ? Date.parse(until) : NaN;
+    if (Number.isNaN(end))
+        return head;
+    const sameDay = new Date(end).toDateString() === start.toDateString();
+    const tail = new Date(end).toLocaleString([], sameDay ? { hour: "numeric", minute: "2-digit" } : { weekday: "short", day: "numeric", month: "short", hour: "numeric", minute: "2-digit" });
+    return `${head} – ${tail}`;
+}
+/**
+ * What an approval would do, as the thing itself: the email with its
+ * recipients and body, the event with its time and people. Read-only; the
+ * buttons belong to the question that holds it.
+ */
+export function ApprovalBody({ data }) {
+    const rows = [];
+    if (data.kind === "email") {
+        if (data.to?.length)
+            rows.push(["To", data.to.join(", ")]);
+        if (data.cc?.length)
+            rows.push(["Cc", data.cc.join(", ")]);
+        if (data.subject)
+            rows.push(["Subject", data.subject]);
+    }
+    else if (data.kind === "event") {
+        if (data.subject)
+            rows.push(["Event", data.subject]);
+        const when = whenLabel(data.when, data.until);
+        if (when)
+            rows.push(["When", when]);
+        if (data.where)
+            rows.push(["Where", data.where]);
+        if (data.people?.length)
+            rows.push(["With", data.people.join(", ")]);
+    }
+    else if (data.kind === "message") {
+        if (data.channel)
+            rows.push(["In", data.channel]);
+        if (data.to?.length)
+            rows.push(["To", data.to.join(", ")]);
+    }
+    for (const f of data.fields ?? [])
+        rows.push([f.label, f.value]);
+    return (_jsxs("div", { className: "kapproval", children: [rows.length ? (_jsx("dl", { className: "kapproval__rows", children: rows.map(([label, value], i) => (_jsxs("div", { className: "kapproval__row", children: [_jsx("dt", { className: "klabel", children: label }), _jsx("dd", { children: value })] }, i))) })) : null, data.body ? _jsx("div", { className: "kapproval__body", children: data.body }) : null] }));
+}
+function CheckGlyph({ state }) {
+    if (state === "passed" || state === "done")
+        return _jsx("span", { className: "kglyph is-good", children: "\u2713" });
+    if (state === "failed")
+        return _jsx("span", { className: "kglyph is-bad", children: "\u2717" });
+    if (state === "running")
+        return _jsx("span", { className: "kglyph", children: "\u2026" });
+    if (state === "skipped")
+        return _jsx("span", { className: "kglyph", children: "\u2013" });
+    return _jsx("span", { className: "kglyph", children: "\u25CB" });
+}
+function FileGlyph() {
+    return (_jsxs("svg", { className: "kfile__icon", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("path", { d: "M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z" }), _jsx("path", { d: "M14 3v5h5" })] }));
+}
+function Body({ card, ctx }) {
+    switch (card.card) {
+        case "stats":
+            return _jsx(Tiles, { tiles: card.data.tiles });
+        case "chart":
+            return _jsx(Chart, { data: card.data });
+        case "table": {
+            const d = card.data;
+            const cell = (v) => (v === null || v === undefined ? "" : typeof v === "number" ? v.toLocaleString() : String(v));
+            return (_jsxs("div", { className: "ktable", children: [_jsxs("table", { children: [_jsx("thead", { children: _jsx("tr", { children: d.columns.map((c) => (_jsx("th", { style: c.align === "right" ? { textAlign: "right" } : undefined, children: c.label }, c.key))) }) }), _jsx("tbody", { children: d.rows.map((r, i) => (_jsx("tr", { children: d.columns.map((c) => (_jsx("td", { style: c.align === "right" || typeof r[c.key] === "number" ? { textAlign: "right" } : undefined, children: cell(r[c.key]) }, c.key))) }, i))) })] }), d.total && d.total > d.rows.length ? (_jsxs("div", { className: "ktable__more", children: ["Showing ", d.rows.length.toLocaleString(), " of ", d.total.toLocaleString(), " rows"] })) : null] }));
+        }
+        case "checklist":
+            return (_jsx("ul", { className: "kcheck", children: card.data.items.map((item, i) => (_jsxs("li", { className: `kcheck__item kcheck__item--${item.state}`, children: [_jsx(CheckGlyph, { state: item.state }), _jsxs("span", { children: [item.text, item.detail ? _jsxs("span", { className: "kcheck__detail", children: [" ", item.detail] }) : null] })] }, i))) }));
+        case "brief": {
+            const d = card.data;
+            return (_jsxs("div", { className: "kbrief", children: [_jsxs("div", { className: "kbrief__head", children: [_jsx("span", { className: "kbrief__initial", children: (d.initial ?? d.name.slice(0, 1)).toUpperCase() }), _jsxs("div", { children: [_jsx("div", { className: "kbrief__name", children: d.name }), d.subtitle ? _jsx("div", { className: "kbrief__sub", children: d.subtitle }) : null] })] }), d.points?.length ? (_jsx("ul", { className: "kbrief__points", children: d.points.map((p, i) => (_jsx("li", { children: p }, i))) })) : null, d.facts?.length ? (_jsx("dl", { className: "kbrief__facts", children: d.facts.map((f, i) => (_jsxs("div", { children: [_jsx("dt", { className: "klabel", children: f.label }), _jsx("dd", { children: f.value })] }, i))) })) : null, d.tiles?.length ? _jsx(Tiles, { tiles: d.tiles }) : null] }));
+        }
+        case "link": {
+            const d = card.data;
+            return (_jsxs("button", { type: "button", className: "klink", onClick: () => openUrl(d.url, ctx), children: [d.description ? _jsx("div", { className: "klink__desc", children: d.description }) : null, _jsx("div", { className: "klink__url", children: d.site ?? d.url })] }));
+        }
+        case "screenshot": {
+            const d = card.data;
+            return (_jsxs("div", { className: "kshot", children: [_jsx(AgentImage, { src: d.image, alt: d.caption ?? "Screenshot", ctx: ctx }), d.caption || d.site ? (_jsxs("div", { className: "kshot__caption", children: [d.caption, d.site ? _jsx("span", { className: "kshot__site", children: d.site }) : null] })) : null] }));
+        }
+        case "file": {
+            const d = card.data;
+            return (_jsxs("div", { className: "kfile", children: [_jsx(FileGlyph, {}), _jsxs("div", { className: "kfile__name", children: [d.name, d.size ? _jsx("span", { className: "kfile__size", children: formatSize(d.size) }) : null] }), isHttp(d.url) ? (_jsx("button", { type: "button", className: "kbtn", onClick: () => openFile(d.url, d.name, ctx), children: "Open" })) : null] }));
+        }
+        case "artifact":
+            return _jsx(ArtifactBody, { data: card.data, title: card.title, ctx: ctx });
+        case "pull-request": {
+            const d = card.data;
+            return (_jsxs("div", { className: "kpr", children: [d.summary ? _jsx("div", { className: "kpr__summary", children: d.summary }) : null, d.additions !== undefined || d.deletions !== undefined ? (_jsxs("div", { className: "kpr__delta", children: [_jsxs("span", { className: "is-good", children: ["+", d.additions ?? 0] }), " ", _jsxs("span", { className: "is-bad", children: ["\u2212", d.deletions ?? 0] })] })) : null, d.checks?.length ? (_jsx("ul", { className: "kcheck", children: d.checks.map((c, i) => (_jsxs("li", { className: "kcheck__item", children: [_jsx(CheckGlyph, { state: c.state }), _jsxs("span", { children: [c.name, c.detail ? _jsxs("span", { className: "kcheck__detail", children: [" ", c.detail] }) : null] })] }, i))) })) : null, d.diff ? (_jsxs("div", { className: "kdiff", children: [_jsx("div", { className: "kdiff__file", children: d.diff.file }), d.diff.lines.map((line, i) => (_jsx("div", { className: `kdiff__line${line.startsWith("+") ? " is-good" : line.startsWith("-") ? " is-bad" : ""}`, children: line }, i)))] })) : null, d.reviewer ? _jsxs("div", { className: "kpr__meta", children: ["Review: ", d.reviewer] }) : null, _jsxs("div", { className: "kcard__actions", children: [_jsx("button", { type: "button", className: "kbtn", onClick: () => openUrl(d.url, ctx), children: "View pull request" }), d.preview ? (_jsx("button", { type: "button", className: "kbtn", onClick: () => openUrl(d.preview, ctx), children: "Preview" })) : null] })] }));
+        }
+        case "receipt": {
+            const d = card.data;
+            return (_jsxs("div", { className: "kreceipt", children: [_jsx("div", { className: "kreceipt__amount", children: money(d.amount, d.currency) }), d.orderId ? _jsxs("div", { className: "kreceipt__meta", children: ["Order ", d.orderId] }) : null, d.note ? _jsx("div", { className: "kreceipt__note", children: d.note }) : null, d.file && isHttp(d.file.url) ? (_jsx("button", { type: "button", className: "kbtn", onClick: () => openFile(d.file.url, d.file.name, ctx), children: d.file.name })) : null] }));
+        }
+        case "remembered":
+            return _jsx("div", { className: "kremember", children: card.data.fact });
+        case "approval":
+            return _jsx(ApprovalBody, { data: card.data });
+        case "form":
+            // A form is answered where it was asked; shown anywhere else, it lists what it asks.
+            return (_jsx("ol", { className: "kform__list", children: card.data.fields.map((f) => (_jsx("li", { children: f.label }, f.id))) }));
+        case "routine": {
+            const d = card.data;
+            return (_jsxs("div", { className: "kroutine", children: [_jsx("div", { children: routineSchedule(d) }), d.nextRun ? _jsxs("div", { className: "kroutine__meta", children: ["Next run ", dateLabel(d.nextRun)] }) : null, d.posts?.length ? _jsxs("div", { className: "kroutine__meta", children: ["Posts to ", d.posts.join(", ")] }) : null] }));
+        }
+    }
+}
+const SOURCE_DEFAULTS = {
+    remembered: "Memory",
+    artifact: "Artifact",
+    screenshot: "Computer",
+    receipt: "Payments",
+    "pull-request": "GitHub",
+    routine: "Routine",
+    form: "Question",
+};
+export function CardView({ card, ctx }) {
+    const title = cardTitle(card);
+    const source = card.source ?? SOURCE_DEFAULTS[card.card];
+    const known = isKnownCard(card);
+    const compact = card.card === "remembered";
+    return (_jsxs("div", { className: `kcard kcard--${known ? card.card : "unknown"}${compact ? " kcard--compact" : ""}`, children: [title || source ? (_jsxs("div", { className: "kcard__head", children: [title ? _jsx("span", { className: "kcard__title", children: title }) : _jsx("span", { className: "kcard__title" }), source ? _jsx("span", { className: "klabel kcard__source", children: source }) : null] })) : null, known ? _jsx(Body, { card: card, ctx: ctx }) : _jsx("div", { className: "kcard__text", children: card.text }), _jsx(Actions, { actions: card.card === "artifact" ? card.actions?.filter((a) => !a.artifact) : card.actions, ctx: ctx })] }));
+}
+/** Several cards, in the order they arrived. */
+export function CardStack({ cards, ctx }) {
+    if (cards.length === 0)
+        return null;
+    return (_jsx("div", { className: "kcards", children: cards.map((card, i) => (_jsx(CardView, { card: card, ctx: ctx }, card.id ?? i))) }));
+}

package/dist/index.d.ts

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

package/dist/index.js

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

package/dist/styles.d.ts

@@ -0,0 +1,11 @@
+/**
+ * The cards' stylesheet, as text, so a host with no CSS pipeline (a plugin
+ * that ships one script) can put it in a <style> element, and a host with one
+ * can import the same rules.
+ *
+ * Every colour, font and size reads a `--kyb-*` variable with a light default.
+ * A host maps its own theme onto them on any ancestor, e.g.
+ * `--kyb-ink: var(--text-primary)`, which is how one set of rules follows
+ * each app's light and dark modes.
+ */
+export declare const cardStyles: string;

package/dist/styles.js

@@ -0,0 +1,182 @@
+/**
+ * The cards' stylesheet, as text, so a host with no CSS pipeline (a plugin
+ * that ships one script) can put it in a <style> element, and a host with one
+ * can import the same rules.
+ *
+ * Every colour, font and size reads a `--kyb-*` variable with a light default.
+ * A host maps its own theme onto them on any ancestor, e.g.
+ * `--kyb-ink: var(--text-primary)`, which is how one set of rules follows
+ * each app's light and dark modes.
+ */
+export const cardStyles = `
+.kcard .is-good { color: var(--kyb-good, #15803d); }
+.kcard .is-bad { color: var(--kyb-bad, #dc2626); }
+
+/* Cards: one frame for every type. */
+.kcards { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
+.kcard {
+  border: 1px solid var(--kyb-stroke-strong, rgba(22, 24, 29, 0.16)); border-radius: 12px; background: var(--kyb-surface, #ffffff);
+  padding: 13px 15px; font-size: var(--kyb-fs-base, 14px); line-height: var(--kyb-lh-base, 19px);
+}
+.kcard--compact { padding: 9px 13px; }
+.kcard__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
+.kcard--compact .kcard__head { margin-bottom: 4px; }
+.kcard__title { flex: 1; min-width: 0; font-weight: 600; }
+.klabel {
+  font-family: var(--kyb-font-label, ui-monospace, monospace); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
+  color: var(--kyb-ink-tertiary, #8b91a0);
+}
+.kcard__source { flex: none; }
+.kcard__text { white-space: pre-wrap; color: var(--kyb-ink-secondary, #5c6270); }
+.kcard__actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
+
+.kstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1px; background: var(--kyb-stroke, rgba(22, 24, 29, 0.09)); border: 1px solid var(--kyb-stroke, rgba(22, 24, 29, 0.09)); border-radius: 8px; overflow: hidden; }
+.kstats__tile { background: var(--kyb-surface, #ffffff); padding: 10px 12px; }
+.kstats__value { font-size: 22px; line-height: 28px; font-weight: 500; font-variant-numeric: tabular-nums; margin-top: 3px; }
+.kstats__change { font-size: var(--kyb-fs-sm, 13px); color: var(--kyb-ink-secondary, #5c6270); font-variant-numeric: tabular-nums; }
+.kstats__change.is-good { color: var(--kyb-good, #15803d); }
+.kstats__change.is-bad { color: var(--kyb-bad, #dc2626); }
+
+.kchart__legend { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 8px; font-size: var(--kyb-fs-sm, 13px); color: var(--kyb-ink-secondary, #5c6270); }
+.kchart__key { display: inline-flex; align-items: center; gap: 6px; }
+.kchart__swatch { width: 10px; height: 2px; background: currentColor; }
+.kchart__plot { display: flex; gap: 8px; }
+.kchart__y { display: flex; flex-direction: column; justify-content: space-between; font-family: var(--kyb-font-label, ui-monospace, monospace); font-size: 10px; color: var(--kyb-ink-tertiary, #8b91a0); text-align: right; padding-bottom: 20px; min-width: 32px; }
+.kchart__frame { position: relative; flex: 1; min-width: 0; }
+.kchart__svg { display: block; width: 100%; height: 160px; overflow: visible; }
+.kchart__line { fill: none; stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
+.kchart__area { stroke: none; opacity: 0.06; }
+.kchart__base { stroke: var(--kyb-stroke-strong, rgba(22, 24, 29, 0.16)); stroke-width: 1; }
+.kchart__rule { stroke: var(--kyb-stroke-strong, rgba(22, 24, 29, 0.16)); stroke-width: 1; }
+.kchart__s0 { stroke: var(--kyb-ink, #16181d); fill: var(--kyb-ink, #16181d); color: var(--kyb-ink, #16181d); }
+.kchart__s1 { stroke: var(--kyb-ink-secondary, #5c6270); fill: var(--kyb-ink-secondary, #5c6270); color: var(--kyb-ink-secondary, #5c6270); }
+.kchart__s2 { stroke: var(--kyb-ink-tertiary, #8b91a0); fill: var(--kyb-ink-tertiary, #8b91a0); color: var(--kyb-ink-tertiary, #8b91a0); }
+.kchart__s3 { stroke: var(--kyb-stroke-strong, rgba(22, 24, 29, 0.16)); fill: var(--kyb-stroke-strong, rgba(22, 24, 29, 0.16)); color: var(--kyb-stroke-strong, rgba(22, 24, 29, 0.16)); }
+.kchart__line.kchart__s0, .kchart__line.kchart__s1, .kchart__line.kchart__s2, .kchart__line.kchart__s3 { fill: none; }
+.kchart__x { display: flex; justify-content: space-between; margin-top: 6px; font-family: var(--kyb-font-label, ui-monospace, monospace); font-size: 10px; color: var(--kyb-ink-tertiary, #8b91a0); }
+.kchart__x--slots { display: grid; text-align: center; }
+.kchart__x--slots span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; }
+.kchart__tip {
+  position: absolute; top: 0; transform: translateX(-50%); pointer-events: none; white-space: nowrap;
+  background: var(--kyb-surface-raised, #ffffff); border: 1px solid var(--kyb-stroke-strong, rgba(22, 24, 29, 0.16)); border-radius: 6px;
+  padding: 5px 8px; font-size: var(--kyb-fs-xs, 12px); box-shadow: var(--kyb-shadow-menu, 0 10px 34px rgba(16, 18, 24, 0.18));
+}
+
+.ktable { overflow-x: auto; }
+.ktable__more { margin-top: 8px; font-size: var(--kyb-fs-sm, 13px); color: var(--kyb-ink-tertiary, #8b91a0); }
+
+.kcheck { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
+.kcheck__item { display: flex; gap: 9px; align-items: baseline; }
+.kcheck__item--skipped, .kcheck__item--waiting { color: var(--kyb-ink-secondary, #5c6270); }
+.kcheck__detail { color: var(--kyb-ink-tertiary, #8b91a0); }
+.kglyph { flex: none; width: 14px; text-align: center; color: var(--kyb-ink-tertiary, #8b91a0); }
+.kglyph.is-good { color: var(--kyb-good, #15803d); }
+.kglyph.is-bad { color: var(--kyb-bad, #dc2626); }
+
+.kbrief__head { display: flex; gap: 11px; align-items: center; }
+.kbrief__initial {
+  width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; flex: none;
+  background: var(--kyb-ink, #16181d); color: var(--kyb-ink-inverse, #ffffff); font-family: var(--kyb-font-label, ui-monospace, monospace); font-size: 15px;
+}
+.kbrief__name { font-weight: 600; }
+.kbrief__sub { font-size: var(--kyb-fs-sm, 13px); color: var(--kyb-ink-secondary, #5c6270); }
+.kbrief__points { margin: 10px 0 0; padding-left: 18px; }
+.kbrief__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 12px 0 0; }
+.kbrief__facts dd { margin: 2px 0 0; }
+.kbrief .kstats { margin-top: 12px; }
+
+.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)); }
+
+.kshot__img { display: block; max-width: 100%; max-height: 320px; border-radius: 8px; border: 1px solid var(--kyb-stroke, rgba(22, 24, 29, 0.09)); cursor: zoom-in; }
+.kshot__img--big { max-height: none; cursor: zoom-out; }
+.kshot__wait, .kartifact__wait { display: grid; place-items: center; height: 120px; color: var(--kyb-ink-tertiary, #8b91a0); }
+.kshot__missing, .kartifact__missing { display: flex; gap: 10px; align-items: center; color: var(--kyb-ink-secondary, #5c6270); font-size: var(--kyb-fs-sm, 13px); }
+.kshot__caption { margin-top: 8px; font-size: var(--kyb-fs-sm, 13px); color: var(--kyb-ink-secondary, #5c6270); display: flex; gap: 10px; }
+.kshot__site { margin-left: auto; font-family: var(--kyb-font-label, ui-monospace, monospace); font-size: 10px; color: var(--kyb-ink-tertiary, #8b91a0); }
+
+.kfile { display: flex; align-items: center; gap: 10px; }
+.kfile__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+.kfile__size { margin-left: 8px; color: var(--kyb-ink-tertiary, #8b91a0); font-size: var(--kyb-fs-sm, 13px); }
+
+.kartifact__frame { display: block; width: 100%; border: 1px solid var(--kyb-stroke, rgba(22, 24, 29, 0.09)); border-radius: 8px; background: #fff; }
+.kartifact--inline { height: 360px; margin-bottom: 10px; }
+.kartifact__doc.kartifact--inline { overflow: auto; padding: 4px 2px; }
+.kartifact__meta { font-size: var(--kyb-fs-sm, 13px); color: var(--kyb-ink-tertiary, #8b91a0); }
+.kartifact__preview {
+  display: block; width: 100%; padding: 0; margin-bottom: 10px; border: 0; background: none; cursor: pointer; text-align: left;
+  position: relative; overflow: hidden; border-radius: 8px;
+}
+/* The top of the page, faded out, and not interactive: a click opens it. */
+.kartifact--preview { height: 200px; pointer-events: none; overflow: hidden; }
+.kartifact__preview::after {
+  content: ""; position: absolute; inset: auto 0 0 0; height: 64px; pointer-events: none;
+  background: linear-gradient(to bottom, transparent, var(--kyb-surface, #ffffff));
+}
+/* A page is white in both themes, so it fades into its own white, inside its border. */
+.kartifact__preview:has(.kartifact__frame)::after {
+  inset: auto 1px 1px 1px; border-radius: 0 0 7px 7px;
+  background: linear-gradient(to bottom, rgb(255 255 255 / 0), #fff);
+}
+.kartifact__preview:hover .kartifact__frame, .kartifact__preview:hover .kartifact__doc { border-color: var(--kyb-stroke-strong, rgba(22, 24, 29, 0.16)); }
+.kartifact__doc.kartifact--preview { border: 1px solid var(--kyb-stroke, rgba(22, 24, 29, 0.09)); border-radius: 8px; padding: 10px 14px; }
+.kartifact__row + .kcard__actions { margin-top: 10px; }
+
+.kpr__summary { color: var(--kyb-ink-secondary, #5c6270); }
+.kpr__delta { margin: 8px 0; font-family: var(--kyb-font-label, ui-monospace, monospace); font-size: 11px; }
+.kpr__meta { margin-top: 8px; font-size: var(--kyb-fs-sm, 13px); color: var(--kyb-ink-tertiary, #8b91a0); }
+.kpr .kcheck { margin-top: 8px; }
+.kdiff { margin-top: 10px; border: 1px solid var(--kyb-stroke, rgba(22, 24, 29, 0.09)); border-radius: 8px; overflow: hidden; font-family: var(--kyb-font-mono, ui-monospace, Menlo, Consolas, monospace); font-size: 12px; }
+.kdiff__file { padding: 5px 10px; background: var(--kyb-hover, rgba(22, 24, 29, 0.045)); color: var(--kyb-ink-secondary, #5c6270); border-bottom: 1px solid var(--kyb-stroke, rgba(22, 24, 29, 0.09)); }
+.kdiff__line { padding: 0 10px; white-space: pre; overflow: hidden; text-overflow: ellipsis; }
+.kdiff__line.is-good { background: color-mix(in srgb, var(--kyb-good, #15803d) 9%, transparent); color: inherit; }
+.kdiff__line.is-bad { background: color-mix(in srgb, var(--kyb-bad, #dc2626) 9%, transparent); color: inherit; }
+
+.kreceipt__amount { font-size: 22px; line-height: 28px; font-weight: 500; font-variant-numeric: tabular-nums; }
+.kreceipt__meta { font-family: var(--kyb-font-label, ui-monospace, monospace); font-size: 11px; color: var(--kyb-ink-tertiary, #8b91a0); margin-top: 2px; }
+.kreceipt__note { margin: 8px 0; color: var(--kyb-ink-secondary, #5c6270); }
+.kremember { color: var(--kyb-ink-secondary, #5c6270); }
+.kroutine__meta { font-size: var(--kyb-fs-sm, 13px); color: var(--kyb-ink-tertiary, #8b91a0); margin-top: 3px; }
+
+/* Asks drawn on the card frame: approvals, forms, sign-in, a purchase. */
+.kcard.is-done { padding: 9px 13px; }
+.kcard.is-done .kcard__head { margin-bottom: 2px; align-items: center; }
+.kpill {
+  flex: none; font-family: var(--kyb-font-label, ui-monospace, monospace); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
+  padding: 2px 7px; border-radius: 999px; border: 1px solid var(--kyb-stroke-strong, rgba(22, 24, 29, 0.16)); color: var(--kyb-ink-secondary, #5c6270);
+}
+.kpill.is-good { color: var(--kyb-good, #15803d); border-color: currentColor; }
+.kapproval__rows { margin: 0; display: grid; gap: 4px; }
+.kapproval__row { display: grid; grid-template-columns: 68px 1fr; gap: 10px; align-items: baseline; }
+.kapproval__row dt { padding-top: 1px; }
+.kapproval__row dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
+.kapproval__body {
+  margin-top: 10px; padding: 10px 12px; border: 1px solid var(--kyb-stroke, rgba(22, 24, 29, 0.09)); border-radius: 8px;
+  white-space: pre-wrap; overflow-wrap: anywhere; color: var(--kyb-ink-secondary, #5c6270); max-height: 260px; overflow: auto;
+}
+.kform { display: flex; flex-direction: column; gap: 10px; }
+.kform__choices { display: flex; flex-wrap: wrap; gap: 6px; }
+.kform__list { margin: 0; padding-left: 18px; color: var(--kyb-ink-secondary, #5c6270); }
+.kbtn {
+  height: 30px; padding: 0 13px; border: 0; border-radius: 8px; cursor: pointer;
+  font: inherit; font-size: var(--kyb-fs-base, 14px); font-weight: 500;
+  color: var(--kyb-ink, #16181d); background: var(--kyb-hover, rgba(22, 24, 29, 0.045));
+}
+.kbtn:hover { background: var(--kyb-selected, rgba(22, 24, 29, 0.075)); }
+.kbtn--primary { background: var(--kyb-ink, #16181d); color: var(--kyb-ink-inverse, #ffffff); }
+.kbtn--primary:hover { opacity: 0.87; background: var(--kyb-ink, #16181d); }
+.klink { border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
+.ktable table { border-collapse: collapse; width: 100%; font-size: var(--kyb-fs-sm, 13px); }
+.ktable th { text-align: left; font-weight: 600; padding: 4px 8px; border-bottom: 1px solid var(--kyb-stroke-strong, rgba(22, 24, 29, 0.16)); }
+.ktable td { padding: 4px 8px; border-bottom: 1px solid var(--kyb-stroke, rgba(22, 24, 29, 0.09)); font-variant-numeric: tabular-nums; }
+.kartifact__plain { white-space: pre-wrap; }
+.kartifact__host { margin-bottom: 10px; }
+.kspin {
+  width: 16px; height: 16px; border-radius: 50%; display: inline-block;
+  border: 2px solid var(--kyb-stroke-strong, rgba(22, 24, 29, 0.16)); border-top-color: var(--kyb-ink-secondary, #5c6270);
+  animation: kspin 0.8s linear infinite;
+}
+@keyframes kspin { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) { .kspin { animation: none; } }
+`;

package/package.json

@@ -1,6 +1,48 @@
 {
   "name": "@kybernesis/cards-react",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.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",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/KybernesisAI/platform.git",
+    "directory": "packages/cards-react"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "NOTICE",
+    "README.md"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "prepack": "tsc -p tsconfig.build.json",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "node ../../scripts/prepublish.mjs",
+    "test": "node --test \"test/**/*.test.mjs\""
+  },
+  "peerDependencies": {
+    "@kybernesis/cards": "^0.4.0",
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "@kybernesis/cards": "^0.4.0",
+    "@types/node": "^24.0.0",
+    "@types/react": "^19.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "typescript": "^5.9.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}