@civitai/blocks-react 0.45.1 → 0.47.0

package/README.md

@@ -922,9 +922,16 @@ export function App() {
 | `NumberInput` | controlled numeric (`value: number \| null`, `onChange`, `min`/`max`/`step`). Rejects non-numeric (never emits `NaN`), clamps to `[min,max]` on blur, empty → `null`. Same label/description/error wiring. |
 | `Select` | controlled dropdown (`value: string`, `onChange`, `options: {value,label,disabled}[]` **or** `<option>` children, `placeholder`). Native `<select>`, `role="combobox"`. Same label/description/error wiring. |
 | `Collapse` | controlled disclosure (`open` + `onOpenChange`, `title`, `disabled`) for the "advanced params reveal". `aria-expanded` + `aria-controls`; content region `role="region"`, `hidden` when closed. |
-
-Each component forwards `className` + `style`, forwards a `ref` to its DOM
-node (where it wraps one), and carries a `data-civitai-ui="<name>"` hook. Need
+| `SegmentedControl` | controlled view/tab switcher (`value` + `onChange`, `data: {value,label,disabled}[]`, `fullWidth`, `size`). `role="tablist"` of `role="tab"` buttons; ArrowLeft/ArrowRight rove selection. |
+| `ReportButton` | two-step control that files a shared-board row for platform moderator review via `useSharedStorage().report()`. `noun` + `onReport` (+ `reported` for server truth). 🔴 Its visible copy is deliberately **not** overridable — see the component's JSDoc. |
+| `ResourceCard` | a picked generation resource (`BlockResourceInfo`) as a grid tile (`variant="card"`) or a compact line (`variant="row"`). `interactive` is an explicit discriminant that requires `onSelect` (+ `selected`/`disabled`); `thumbnailUrl` is optional because **`BlockResourceInfo` carries no image field**, and a missing *or failed* image falls back to a frozen "No preview" frame. `actions` is the trailing flow slot on both variants; `overlay` is the decorative corner badge over the thumbnail and is **`card`-only — a type error on a `row`**. Both render as siblings of the hit area, never inside it. The name fallback, type label, placeholder copy, selected mark and accessible-name order are frozen, not props. |
+
+Every component carries a `data-civitai-ui="<name>"` hook. Most also forward
+`className` + `style` and forward a `ref` to their DOM node. **Two do not:**
+`ReportButton` renders a different element per handshake state and forwards none
+of the three (only its `data-testid`, from which the other four hooks are derived
+by suffix); `Modal` forwards `className` + `style` but takes no `ref` — it holds
+its panel node internally, so `<Modal ref={…}>` is a type error. Need
 to inject the CSS yourself (SSR, or a non-React shell)? Call
 `injectBlocksStyles(doc?)` once, or read the raw `BLOCKS_UI_STYLES` string.
 `useBlocksStyles()` is the hook the components call internally.

package/dist/ui/ReportButton.d.ts

@@ -0,0 +1,92 @@
+/**
+ * The post-write abuse seam for a shared board: a two-step control that files a
+ * row for PLATFORM moderator review via `useSharedStorage().report()`.
+ *
+ * 🔴 REPORTING IS ESCALATION, NOT REMOVAL, and this component exists so that
+ * fact is stated identically in every block. `report()` files the row and its
+ * own contract says filing does NOT hide it — a moderator decides. An app owner
+ * has no server-side hide to offer instead either: `update` and `withdraw` are
+ * author-scoped, so they reject for anyone but the row's author.
+ *
+ * 🔴 THE VISIBLE COPY IS NOT OVERRIDABLE — and that guarantee is exactly one
+ * thing, so do not read it as more. What is fixed is the WORDING THIS COMPONENT
+ * RENDERS: the confirm question, the failure line and the settled line are each
+ * pinned whole by tests, so none of them can come to imply a deletion. It does
+ * NOT constrain what {@link ReportButtonProps.onReport} actually does — a
+ * consumer can wire a real delete behind it and this control will still settle
+ * to "Reported for review" — and it cannot stop a host page restyling the
+ * settled text out of view. The honest claim is that the wording cannot drift by
+ * accident across blocks, which is what three divergent hand-rolled copies had
+ * already produced.
+ *
+ * The caller decides WHO sees it. Render it only for a viewer who is signed in
+ * and does not own the row: `report` rejects for an anonymous viewer, and an
+ * author has a real Remove. Offering it otherwise is offering an error.
+ *
+ * @example
+ * // 🔴 Key it by the ROW, not by index — the settled state belongs to the row,
+ * // and a list that re-orders under an index key shows a settled report
+ * // against a row nobody reported.
+ * {!isOwn && viewerId != null && (
+ *   <ReportButton
+ *     key={item.key}
+ *     noun="generator"
+ *     reported={myReports.has(item.key)}
+ *     onReport={() => shared.report(item.key)}
+ *     data-testid={`gen-${item.key}-report`}
+ *   />
+ * )}
+ */
+export interface ReportButtonProps {
+    /**
+     * What the row is, lower-case and singular — "combination", "prompt",
+     * "generator", "request". Appears in the confirm question and in both
+     * accessible names.
+     *
+     * 🔴 It is spliced into an `aria-label`, so it is NOT a place for arbitrary
+     * text: a sentence here becomes the control's accessible name and can say
+     * whatever it likes to exactly the users the fixed wording exists to protect.
+     * Pass a bare noun.
+     */
+    noun: string;
+    /**
+     * Files the report. Fires ONLY after the viewer confirms. Reject to surface
+     * the failure — a rejected report keeps the control armed rather than
+     * settling, because one that closed quietly would read as filed.
+     */
+    onReport: () => Promise<void>;
+    /**
+     * This viewer has ALREADY reported this row. Renders the settled state
+     * directly and skips the handshake.
+     *
+     * 🔴 THE SHARED STORE CANNOT TELL YOU THIS. `SharedListItem` carries
+     * `viewerVoted` and has no report equivalent, so unlike a vote there is no
+     * server field to read — the only source is your own app's per-viewer
+     * storage, recorded when `onReport` resolves. Supply it if you keep that
+     * record: without it the settled state is local-only, so any remount (a
+     * `list()` refresh, a tab switch, virtualized scroll) resets the control to
+     * "Report" and the same viewer can file the same row again. `report()` is NOT
+     * documented idempotent the way `vote` is, so that is a duplicate report
+     * rather than a no-op.
+     *
+     * Flipping this to `true` settles the control silently — no focus move — which
+     * is correct for the load-time case it is meant for; stealing focus on mount
+     * would be wrong.
+     */
+    reported?: boolean;
+    /**
+     * Test hook for the TRIGGER. The other four hooks are DERIVED from it by
+     * suffix, so two rows in one list stay distinguishable once armed or settled:
+     * `<id>-confirm`, `<id>-cancel`, `<id>-done`, `<id>-prompt`.
+     *
+     * 🔴 Grep for the SUFFIX, never for the composed value: a composed testid
+     * appears nowhere in source as a literal, so a search for `foo-confirm`
+     * returns zero whether the selector works or has just been deleted.
+     *
+     * Omitted, the ids are `report-button`, `report-confirm`, `report-cancel`,
+     * `report-done`, `report-confirm-prompt`.
+     */
+    'data-testid'?: string;
+}
+export declare function ReportButton({ noun, onReport, reported, 'data-testid': testId, }: ReportButtonProps): React.JSX.Element;
+//# sourceMappingURL=ReportButton.d.ts.map

package/dist/ui/ReportButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReportButton.d.ts","sourceRoot":"","sources":["../../src/ui/ReportButton.tsx"],"names":[],"mappings":"AAcA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,MAAM,WAAW,iBAAiB;IAChC;;;;;;;;;OASG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,QAAQ,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9B;;;;;;;;;;;;;;;;;OAiBG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;;;;;;OAWG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,QAAQ,EACR,QAAgB,EAChB,aAAa,EAAE,MAAM,GACtB,EAAE,iBAAiB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA8MvC"}

package/dist/ui/ReportButton.js

@@ -0,0 +1,172 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { Button } from './Button.js';
+import { Group } from './Group.js';
+import { useBlocksStyles } from './styles.js';
+/** Shared by the two text renders so they cannot drift apart. */
+const NOTE_STYLE = {
+    whiteSpace: 'nowrap',
+    fontSize: 12,
+    lineHeight: 1.45,
+    color: 'var(--civitai-color-text-dimmed)',
+};
+export function ReportButton({ noun, onReport, reported = false, 'data-testid': testId, }) {
+    const [confirming, setConfirming] = useState(false);
+    const [busy, setBusy] = useState(false);
+    const [done, setDone] = useState(false);
+    const [failed, setFailed] = useState(false);
+    const confirmRef = useRef(null);
+    const cancelRef = useRef(null);
+    const doneRef = useRef(null);
+    /**
+     * Monotonic id of the CURRENT attempt. Every settle compares against it and
+     * no-ops if it has moved on.
+     *
+     * 🔴 A single "abandoned" BOOLEAN is not enough, and the difference is not
+     * theoretical — it was measured. A boolean reset at the top of each attempt
+     * protects exactly one abandoned request and only until the next confirm, so
+     * cancel → re-arm → confirm let the FIRST request settle the control
+     * ("Reported for review" for a report the viewer withdrew from, while a second
+     * was still in flight) and, on the rejecting path, clear the shared `busy` so
+     * Confirm re-enabled mid-flight — three `onReport` calls for one row, against
+     * a `report()` that is not idempotent. An id per attempt cannot do that:
+     * anything that ends an attempt bumps it, and a superseded settle is inert.
+     */
+    const attemptRef = useRef(0);
+    const settled = done || reported;
+    useBlocksStyles();
+    const ids = testId
+        ? {
+            trigger: testId,
+            confirm: `${testId}-confirm`,
+            cancel: `${testId}-cancel`,
+            done: `${testId}-done`,
+            prompt: `${testId}-prompt`,
+        }
+        : {
+            trigger: 'report-button',
+            confirm: 'report-confirm',
+            cancel: 'report-cancel',
+            done: 'report-done',
+            prompt: 'report-confirm-prompt',
+        };
+    // 🔴 Move focus with the control, at BOTH transitions. Each step replaces the
+    // element the viewer just activated, so without this a keyboard user is
+    // dropped to <body> and must Tab from the top of the document to reach the
+    // second half of a two-step confirm.
+    //
+    // Focusing the settled note also does the announcing that `role="status"`
+    // alone cannot be relied on for here: that region is INSERTED already
+    // carrying its text, and a live region generally has to exist before its
+    // content changes to be announced. Moving focus to it is what makes the
+    // outcome reach a screen-reader user rather than hoping.
+    //
+    // 🔴 Keyed on `confirming` ALONE, deliberately. Keying it on `busy` too meant
+    // the effect re-fired when a request finished, so a viewer who pressed Confirm
+    // and then moved focus elsewhere had it YANKED BACK on rejection. `busy` is a
+    // request-lifecycle flag, not a "the control moved" transition.
+    useEffect(() => {
+        if (confirming)
+            confirmRef.current?.focus();
+    }, [confirming]);
+    useEffect(() => {
+        if (done)
+            doneRef.current?.focus();
+    }, [done]);
+    // 🔴 Confirm carries `loading`, which sets the native `disabled`, so the
+    // browser BLURS it the moment a request starts. Move focus to Cancel — which
+    // stays enabled precisely so the in-flight state has a live control — or the
+    // viewer is dropped to <body> with nothing tabbable, which is the failure this
+    // component's own focus handling exists to prevent.
+    useEffect(() => {
+        if (busy)
+            cancelRef.current?.focus();
+    }, [busy]);
+    // 🔴 Server truth ENDS the handshake rather than hiding it. Without this the
+    // strip stays mounted underneath: a later `reported: false` resurrected a
+    // stale "Could not send" against a control the viewer had seen settle, and a
+    // rejection arriving after the flip landed behind an unmounted strip — the
+    // same dropped-error state the Cancel handling above exists to prevent.
+    useEffect(() => {
+        if (reported) {
+            // 🔴 Bump the attempt too, or an in-flight request keeps writing into a
+            // control that has already settled: measured, a rejection arriving after
+            // this flip set `failed` behind the settled note, and withdrawing
+            // `reported` then surfaced "Could not send — try again?" for a report that
+            // was never submitted.
+            //
+            // 🔴 Neither `setBusy(false)` nor `setFailed(false)` is redundant here, and
+            // each went a full round with NO coverage on either tier before a case was
+            // written for it — see "a withdrawn `reported` leaves Confirm USABLE" and
+            // "does not leave a stale FAILURE behind either". Both now fail on the
+            // unit tier if their line is deleted.
+            //
+            // What they prevent, and note it surfaces on the NEXT ARM, not on the
+            // withdraw itself (this effect has already cleared `confirming`, so the
+            // viewer lands on the trigger): the attempt is superseded, so its
+            // `finally` never clears the shared `busy` and its rejection never clears
+            // `failed`. Re-arm and you get Confirm disabled with a spinner, or "Could
+            // not send" for a report never submitted in that attempt. Clearing both
+            // here is what ends the attempt completely rather than half-way.
+            attemptRef.current += 1;
+            setConfirming(false);
+            setFailed(false);
+            setBusy(false);
+        }
+    }, [reported]);
+    if (settled) {
+        return (_jsx("span", { ref: doneRef, tabIndex: -1, "data-testid": ids.done, role: "status", style: { ...NOTE_STYLE, outline: 'none' }, children: "Reported for review" }));
+    }
+    if (!confirming) {
+        return (_jsx(Button, { size: "sm", variant: "subtle", onClick: () => setConfirming(true), "data-testid": ids.trigger, "aria-label": `Report this ${noun} to moderators`, children: "Report" }));
+    }
+    const confirm = async () => {
+        const attempt = (attemptRef.current += 1);
+        /** This attempt is still the one on screen. */
+        const current = () => attemptRef.current === attempt;
+        setBusy(true);
+        setFailed(false);
+        try {
+            await onReport();
+            // 🔴 Superseded — the viewer cancelled, or the parent settled us. (A
+            // newer attempt cannot be started without one of those first, since
+            // Confirm is natively disabled while busy; the check is depth, not a
+            // reachable third case.) Settling here would report an action this viewer
+            // withdrew from.
+            if (!current())
+                return;
+            setDone(true);
+            setConfirming(false);
+        }
+        catch {
+            // Same on the failure side: a rejection belonging to an abandoned or
+            // superseded attempt must not resurrect a strip, nor mark a live attempt
+            // failed.
+            if (!current())
+                return;
+            setFailed(true);
+        }
+        finally {
+            // 🔴 Load-bearing, not defensive. A superseded attempt clearing the shared
+            // `busy` is what re-enabled Confirm while a newer request was still
+            // running, which is how one row got filed three times.
+            if (current())
+                setBusy(false);
+        }
+    };
+    return (_jsxs(Group, { gap: 6, align: "center", wrap: false, "data-testid": ids.prompt, children: [_jsx("span", { style: NOTE_STYLE, ...(failed ? { role: 'alert' } : {}), children: failed ? 'Could not send — try again?' : `Send this ${noun} to moderators for review?` }), _jsx(Button, { ref: confirmRef, size: "sm", loading: busy, onClick: confirm, "data-testid": ids.confirm, "aria-label": `Confirm reporting this ${noun} to moderators`, children: "Report" }), _jsx(Button, { ref: cancelRef, size: "sm", variant: "subtle", 
+                // 🔴 DELIBERATELY NOT disabled in flight. It was, briefly, to stop a late
+                // resolve settling a cancelled report — but `onReport` here is
+                // `shared.report()` over a postMessage bridge with no timeout, so a
+                // reply that never arrives left BOTH buttons disabled and the control
+                // wedged with no way back short of a remount. Trading a rare race for a
+                // permanent dead end is the wrong side of that trade; the attempt token
+                // closes the race without taking the escape hatch away.
+                onClick: () => {
+                    attemptRef.current += 1;
+                    setBusy(false);
+                    setFailed(false);
+                    setConfirming(false);
+                }, "data-testid": ids.cancel, "aria-label": "Cancel the report", children: "Cancel" })] }));
+}
+//# sourceMappingURL=ReportButton.js.map

package/dist/ui/ReportButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReportButton.js","sourceRoot":"","sources":["../../src/ui/ReportButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEpD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAE9C,iEAAiE;AACjE,MAAM,UAAU,GAAG;IACjB,UAAU,EAAE,QAAQ;IACpB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE,IAAI;IAChB,KAAK,EAAE,kCAAkC;CACjC,CAAC;AA6FX,MAAM,UAAU,YAAY,CAAC,EAC3B,IAAI,EACJ,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,aAAa,EAAE,MAAM,GACH;IAClB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxC,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,UAAU,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IACnD,MAAM,SAAS,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAClD,MAAM,OAAO,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAC;IAC9C;;;;;;;;;;;;;OAaG;IACH,MAAM,UAAU,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;IAC7B,MAAM,OAAO,GAAG,IAAI,IAAI,QAAQ,CAAC;IACjC,eAAe,EAAE,CAAC;IAElB,MAAM,GAAG,GAAG,MAAM;QAChB,CAAC,CAAC;YACE,OAAO,EAAE,MAAM;YACf,OAAO,EAAE,GAAG,MAAM,UAAU;YAC5B,MAAM,EAAE,GAAG,MAAM,SAAS;YAC1B,IAAI,EAAE,GAAG,MAAM,OAAO;YACtB,MAAM,EAAE,GAAG,MAAM,SAAS;SAC3B;QACH,CAAC,CAAC;YACE,OAAO,EAAE,eAAe;YACxB,OAAO,EAAE,gBAAgB;YACzB,MAAM,EAAE,eAAe;YACvB,IAAI,EAAE,aAAa;YACnB,MAAM,EAAE,uBAAuB;SAChC,CAAC;IAEN,8EAA8E;IAC9E,wEAAwE;IACxE,2EAA2E;IAC3E,qCAAqC;IACrC,EAAE;IACF,0EAA0E;IAC1E,sEAAsE;IACtE,yEAAyE;IACzE,wEAAwE;IACxE,yDAAyD;IACzD,EAAE;IACF,8EAA8E;IAC9E,+EAA+E;IAC/E,8EAA8E;IAC9E,gEAAgE;IAChE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,UAAU;YAAE,UAAU,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;IAC9C,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IACjB,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,IAAI;YAAE,OAAO,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;IACrC,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IACX,yEAAyE;IACzE,6EAA6E;IAC7E,6EAA6E;IAC7E,+EAA+E;IAC/E,oDAAoD;IACpD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,IAAI;YAAE,SAAS,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;IACvC,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IACX,6EAA6E;IAC7E,0EAA0E;IAC1E,6EAA6E;IAC7E,2EAA2E;IAC3E,wEAAwE;IACxE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,QAAQ,EAAE,CAAC;YACb,wEAAwE;YACxE,yEAAyE;YACzE,kEAAkE;YAClE,2EAA2E;YAC3E,uBAAuB;YACvB,EAAE;YACF,4EAA4E;YAC5E,2EAA2E;YAC3E,0EAA0E;YAC1E,uEAAuE;YACvE,sCAAsC;YACtC,EAAE;YACF,sEAAsE;YACtE,wEAAwE;YACxE,kEAAkE;YAClE,0EAA0E;YAC1E,0EAA0E;YAC1E,wEAAwE;YACxE,iEAAiE;YACjE,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;YACxB,aAAa,CAAC,KAAK,CAAC,CAAC;YACrB,SAAS,CAAC,KAAK,CAAC,CAAC;YACjB,OAAO,CAAC,KAAK,CAAC,CAAC;QACjB,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO,CACL,eACE,GAAG,EAAE,OAAO,EACZ,QAAQ,EAAE,CAAC,CAAC,iBACC,GAAG,CAAC,IAAI,EACrB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,EAAE,GAAG,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,oCAGpC,CACR,CAAC;IACJ,CAAC;IAED,IAAI,CAAC,UAAU,EAAE,CAAC;QAChB,OAAO,CACL,KAAC,MAAM,IACL,IAAI,EAAC,IAAI,EACT,OAAO,EAAC,QAAQ,EAChB,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,iBACrB,GAAG,CAAC,OAAO,gBACZ,eAAe,IAAI,gBAAgB,uBAGxC,CACV,CAAC;IACJ,CAAC;IAED,MAAM,OAAO,GAAG,KAAK,IAAI,EAAE;QACzB,MAAM,OAAO,GAAG,CAAC,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC;QAC1C,+CAA+C;QAC/C,MAAM,OAAO,GAAG,GAAG,EAAE,CAAC,UAAU,CAAC,OAAO,KAAK,OAAO,CAAC;QACrD,OAAO,CAAC,IAAI,CAAC,CAAC;QACd,SAAS,CAAC,KAAK,CAAC,CAAC;QACjB,IAAI,CAAC;YACH,MAAM,QAAQ,EAAE,CAAC;YACjB,qEAAqE;YACrE,oEAAoE;YACpE,qEAAqE;YACrE,0EAA0E;YAC1E,iBAAiB;YACjB,IAAI,CAAC,OAAO,EAAE;gBAAE,OAAO;YACvB,OAAO,CAAC,IAAI,CAAC,CAAC;YACd,aAAa,CAAC,KAAK,CAAC,CAAC;QACvB,CAAC;QAAC,MAAM,CAAC;YACP,qEAAqE;YACrE,yEAAyE;YACzE,UAAU;YACV,IAAI,CAAC,OAAO,EAAE;gBAAE,OAAO;YACvB,SAAS,CAAC,IAAI,CAAC,CAAC;QAClB,CAAC;gBAAS,CAAC;YACT,2EAA2E;YAC3E,oEAAoE;YACpE,uDAAuD;YACvD,IAAI,OAAO,EAAE;gBAAE,OAAO,CAAC,KAAK,CAAC,CAAC;QAChC,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,MAAC,KAAK,IAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAE,KAAK,iBAAe,GAAG,CAAC,MAAM,aAMhE,eAAM,KAAK,EAAE,UAAU,KAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,OAAgB,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,YACpE,MAAM,CAAC,CAAC,CAAC,6BAA6B,CAAC,CAAC,CAAC,aAAa,IAAI,4BAA4B,GAClF,EACP,KAAC,MAAM,IACL,GAAG,EAAE,UAAU,EACf,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,IAAI,EACb,OAAO,EAAE,OAAO,iBACH,GAAG,CAAC,OAAO,gBACZ,0BAA0B,IAAI,gBAAgB,uBAGnD,EACT,KAAC,MAAM,IACL,GAAG,EAAE,SAAS,EACd,IAAI,EAAC,IAAI,EACT,OAAO,EAAC,QAAQ;gBAChB,0EAA0E;gBAC1E,+DAA+D;gBAC/D,oEAAoE;gBACpE,sEAAsE;gBACtE,wEAAwE;gBACxE,wEAAwE;gBACxE,wDAAwD;gBACxD,OAAO,EAAE,GAAG,EAAE;oBACZ,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;oBACxB,OAAO,CAAC,KAAK,CAAC,CAAC;oBACf,SAAS,CAAC,KAAK,CAAC,CAAC;oBACjB,aAAa,CAAC,KAAK,CAAC,CAAC;gBACvB,CAAC,iBACY,GAAG,CAAC,MAAM,gBACZ,mBAAmB,uBAGvB,IACH,CACT,CAAC;AACJ,CAAC"}

package/dist/ui/ResourceCard.d.ts

@@ -0,0 +1,272 @@
+import type { BlockResourceInfo } from '@civitai/app-sdk/blocks';
+/**
+ * 🔴 FROZEN — the name a resource renders under, and the single most important
+ * thing this component takes away from its callers.
+ *
+ * `BlockResourceInfo.modelName` is typed `string` (REQUIRED), and that type is
+ * optimistic: `civitai-app-model-benchmarking` writes `modelName ?? '#'+versionId`
+ * in its own code, i.e. a first-party block has already seen it absent at
+ * runtime. A resource rendered as an empty string is indistinguishable from a
+ * broken card — the row is there, the name is not, and nothing tells the viewer
+ * which of the two it is.
+ *
+ * So the fallback is `#<versionId>`: still WRONG-looking, but wrong in a way
+ * that identifies the resource and can be pasted into a URL. It is not a prop
+ * because a per-app placeholder ("Untitled model", "Unnamed LoRA") is
+ * indistinguishable from a resource actually called that.
+ *
+ * Whitespace-only counts as absent — a name of `'   '` renders as nothing at
+ * all, which is the failure this function exists to prevent.
+ */
+export declare function resourceDisplayName(resource: BlockResourceInfo): string;
+/** Which shape to render. See {@link ResourceCardProps.variant}. */
+export type ResourceCardVariant = 'card' | 'row';
+/** Props that do not depend on either discriminant. */
+interface ResourceCardCommonProps {
+    /**
+     * The picked resource, exactly as the host handed it over
+     * (`RESOURCE_PICKER_RESULT.selected`, `useResourcePicker`, or the
+     * `generation-resources` rehydrate endpoint). Pass it through — do not
+     * pre-format it, and do not re-type it locally.
+     */
+    resource: BlockResourceInfo;
+    /**
+     * Thumbnail image URL. OPTIONAL, and its absence is the NORMAL case.
+     *
+     * 🔴 `BlockResourceInfo` CARRIES NO IMAGE FIELD — measured against
+     * `packages/civitai-app-sdk/src/blocks/types.ts`, which declares
+     * `versionId, modelId, modelName, versionName, baseModel, modelType` plus the
+     * optional recommended-settings projection (`strength`, `minStrength`,
+     * `maxStrength`, `trainedWords`, `clipSkip`) and nothing image-shaped. The
+     * host's resource picker does not return a thumbnail, so this component
+     * CANNOT fetch or derive one, and a caller who has one got it from somewhere
+     * else (`civitai-app-gen-matrix` fetches its own catalog).
+     *
+     * Consequence, and the reason this is worth a paragraph: BOTH variants must
+     * look deliberate with no image, and `'card'` renders
+     * {@link NO_THUMBNAIL_LABEL} in a frame that keeps its aspect ratio rather
+     * than collapsing the tile. Two of the three known consumers have no
+     * thumbnail at all.
+     *
+     * A URL that FAILS to load falls back to the same placeholder, so a dead CDN
+     * link is never an empty grey square. The image is also `loading="lazy"` —
+     * load-bearing for the `card` variant, which is built for grids of dozens.
+     */
+    thumbnailUrl?: string;
+    /**
+     * Trailing slot — a weight slider, a Remove button, a "Change" link.
+     *
+     * 🔴 Rendered as a SIBLING of the interactive hit area, never inside it. A
+     * `<button>` nested in a `<button>` is invalid HTML: browsers reparent it, so
+     * the inner control is unreachable by keyboard and its click is eaten by the
+     * outer one. That is why this slot exists at all rather than callers wrapping
+     * their own controls around the card.
+     *
+     * This is the FLOW slot — its content sits after the card body. For a badge
+     * that must sit ON the thumbnail, use `overlay` (card variant only).
+     */
+    actions?: React.ReactNode;
+    /** Forwarded to the root, per the pack convention for every `/ui` primitive. */
+    className?: string;
+    /** Forwarded to the root, per the pack convention for every `/ui` primitive. */
+    style?: React.CSSProperties;
+    /**
+     * Test hook for the ROOT. Every inner hook is DERIVED from it by suffix, so
+     * two cards in one grid stay distinguishable: `<id>-hit`, `<id>-thumb`,
+     * `<id>-placeholder`, `<id>-image`, `<id>-overlay`, `<id>-name`,
+     * `<id>-selected`, `<id>-meta`, `<id>-type`, `<id>-actions`.
+     *
+     * 🔴 Grep for the SUFFIX, never for the composed value — a composed testid
+     * appears nowhere in source as a literal, so a search for `foo-name` returns
+     * zero whether the selector works or has just been deleted.
+     *
+     * Omitted, the ids are `resource-card`, `resource-card-hit`, and so on.
+     */
+    'data-testid'?: string;
+}
+/**
+ * `variant="card"` — thumbnail-first tile for a picker or browse GRID, and the
+ * only shape with a thumbnail corner for {@link ResourceCardCardProps.overlay}
+ * to sit in.
+ *
+ * `variant` is REQUIRED on purpose. There is no defensible default: the two
+ * shapes exist because three first-party blocks split evenly-ish between them,
+ * and a component that silently picks one renders the wrong shape for half its
+ * callers with no diagnostic.
+ */
+interface ResourceCardCardProps extends ResourceCardCommonProps {
+    variant: 'card';
+    /**
+     * Decorative status pill drawn over the thumbnail corner — the "Added" /
+     * "In your queue" badge every picker ends up wanting.
+     *
+     * 🔴 STATUS, NOT CONTROLS — and the structure enforces that rather than
+     * asking you to remember it. It renders as a SIBLING of the hit area, never
+     * inside it, so a `<button>` here is not nested in the card's `<button>`; and
+     * it carries `pointer-events: none`, so it cannot swallow a click meant for
+     * the card. An earlier version rendered it inside the thumbnail frame — i.e.
+     * inside the hit `<button>` — which recreated exactly the hazard
+     * {@link ResourceCardCommonProps.actions} exists to prevent: measured, an
+     * `onClick` pill there fired the consumer's handler AND toggled selection, and
+     * the parser reparents the inner button so hydration disagrees with the server
+     * HTML. Put anything clickable in `actions`.
+     *
+     * 🔴 WHAT THIS SLOT IS FOR, stated accurately — an earlier version of this
+     * paragraph justified it with a comparison that its own CSS change had made
+     * false. It said a consumer's absolutely-positioned child in `actions` would
+     * "escape the card and be clipped by it (card bottom 51, child bottom 120)".
+     * That measurement was taken when the root had NO `position`; the root is now
+     * `position: relative`, so it IS the containing block and a hand-rolled corner
+     * badge lands where the consumer asked. The honest claim is narrower: this
+     * slot owns the corner OFFSETS (which are arithmetic over the hit area's
+     * padding and move with it), the `pointer-events` decision, and the
+     * sibling-of-the-button placement — three things every consumer would
+     * otherwise re-derive, and two of which are not obvious. It is also why the
+     * root's `position: relative` is now load-bearing rather than cosmetic.
+     *
+     * Because it is a sibling of the labelled `<button>`, its text IS reachable to
+     * assistive tech — content inside the button is not, since the explicit
+     * `aria-label` overrides it (that is why {@link SELECTED_MARK} is
+     * `aria-hidden`). 🔴 So do NOT put the selection state here as well: with
+     * `aria-pressed` already carrying it, an "Added" pill announces it a second
+     * time. Mark such a pill `aria-hidden`, or use this slot for something
+     * `aria-pressed` does not say.
+     *
+     * If you need a control here anyway, opt back in with your own
+     * `pointer-events: auto`, and accept that you are on your own for focus order.
+     */
+    overlay?: React.ReactNode;
+}
+/**
+ * `variant="row"` — compact line for a list of already-selected resources.
+ *
+ * 🔴 `overlay` is FORBIDDEN here rather than silently dropped. A row has no
+ * thumbnail corner to hang a pill on, and this component argues twice in its own
+ * words against exactly this shape of failure: `variant` is required because "a
+ * component that silently picks one renders the wrong shape for half its callers
+ * with no diagnostic", and `interactive` is a discriminated union because a
+ * handler on the wrong arm "silently never fires". An `overlay` on a row is
+ * content that silently never renders — the same class — so it is a type error,
+ * using the same `?: never` machinery the static arm already uses.
+ */
+interface ResourceCardRowProps extends ResourceCardCommonProps {
+    variant: 'row';
+    overlay?: never;
+}
+/** A card nobody can activate: no button, no tab stop, no toggle semantics. */
+interface ResourceCardStaticArm {
+    interactive?: false;
+    onSelect?: never;
+    selected?: never;
+    disabled?: never;
+}
+/** A card that IS the control: one `<button>`, with toggle semantics. */
+interface ResourceCardInteractiveArm {
+    interactive: true;
+    /** Fires on activation (click, Enter, Space). Required — see `interactive`. */
+    onSelect: () => void;
+    /**
+     * This resource is already picked. Sets `aria-pressed` for assistive tech AND
+     * renders the frozen {@link SELECTED_MARK} for everyone else, so the state is
+     * never carried by colour alone.
+     */
+    selected?: boolean;
+    /**
+     * Cannot be activated. Sets the native `disabled`.
+     *
+     * 🔴 Do NOT wire this to the same expression as `selected` just because a
+     * picked card should not be re-picked. A disabled button leaves the tab order
+     * and can never show a focus ring, so a keyboard user tabbing a grid of 24
+     * silently skips every resource they have already chosen — and `aria-pressed`
+     * is exactly the affordance that makes re-pressing a selected card meaningful
+     * (it deselects). Reserve `disabled` for genuinely unavailable resources.
+     */
+    disabled?: boolean;
+}
+/**
+ * @see ResourceCard
+ *
+ * 🔴 A UNION OVER TWO DISCRIMINANTS, not a flat prop bag — the four arms below
+ * are `{card, row} × {static, interactive}`.
+ *
+ * `interactive` states whether this card is a control, rather than the component
+ * inferring it from whether `onSelect` happens to be defined. Inference gets
+ * both halves wrong in practice — an `onSelect` passed to something rendered as
+ * static is a handler that silently never fires, and an interactive card without
+ * one is a tab stop that does nothing.
+ *
+ * `variant` gates `overlay` for the same reason: a row has no thumbnail corner,
+ * so an `overlay` there is content that silently never renders. Both are type
+ * errors rather than diagnostics nobody sees.
+ *
+ * 🔴 CONSEQUENCE, because TypeScript's diagnostic for it is opaque: pass a
+ * LITERAL (`variant="card"`, `interactive` / `interactive={false}`) or branch on
+ * your condition. A `boolean` or a widened `string` VARIABLE narrows to no arm
+ * and fails with `TS2322: … not assignable to 'IntrinsicAttributes &
+ * ResourceCardProps'`, which names nothing useful. That is the correct behaviour
+ * — a `boolean` cannot carry a sound "then `onSelect` is required" — but it
+ * costs you a round if nobody says so. Spreading an `as const` prop bag
+ * compiles.
+ */
+export type ResourceCardProps = (ResourceCardCardProps & ResourceCardStaticArm) | (ResourceCardCardProps & ResourceCardInteractiveArm) | (ResourceCardRowProps & ResourceCardStaticArm) | (ResourceCardRowProps & ResourceCardInteractiveArm);
+/**
+ * A picked Civitai generation resource — a checkpoint or a LoRA — rendered as a
+ * grid tile (`variant="card"`) or a compact list line (`variant="row"`).
+ *
+ * PRESENTATIONAL AND STATELESS by construction. It does not fetch, it calls no
+ * host hook, and it owns no selection state: callbacks in, markup out. (Its one
+ * piece of internal state is which thumbnail URL has failed to load, which is
+ * about the image element, not about your data.) Whoever owns the
+ * picked-resource list owns the state; this renders it.
+ *
+ * Derived from three first-party blocks that each built one:
+ * `civitai-app-gen-matrix` (a thumbnail tile in a browse grid, `aria-pressed`,
+ * disabled once added), `civitai-app-model-benchmarking` (compact rows with a
+ * weight slider and a Remove button), and `civitai-block-generate-from-model`
+ * (an inline "Generating with: Name (Version)" plus a Change link). The first
+ * is the `card` shape; the other two are `row`.
+ *
+ * 🔴 WHAT IS FROZEN, and why that is the point rather than the markup: the
+ * name fallback ({@link resourceDisplayName}), the type label
+ * ({@link TYPE_LABELS}), the missing-thumbnail copy
+ * ({@link NO_THUMBNAIL_LABEL}), the non-colour selected mark
+ * ({@link SELECTED_MARK}) and the accessible-name composition
+ * ({@link accessibleName}) are NOT props. Each is a statement about what a
+ * resource IS, and three apps disagreeing about it is three apps telling a
+ * viewer different things about the same model. What legitimately varies —
+ * variant, thumbnail, selected/disabled, the two content slots, className,
+ * style, the surrounding grid — is a prop.
+ *
+ * 🔴 NOT A LINK, on purpose. It has `modelId`/`versionId` and could build a
+ * civitai.com URL, but a block renders inside a sandboxed iframe where a
+ * top-level navigation is host-mediated (`useCivitaiNavigate`), so an `<a
+ * href>` here would either be inert or would punch the viewer out of the app
+ * mid-task. A card that navigates is a different component.
+ *
+ * @example
+ * // Browse grid — the card IS the control. Note `selected` WITHOUT `disabled`:
+ * // a picked card stays focusable and re-pressing it deselects, which is what
+ * // `aria-pressed` promises. Disabling it instead drops every already-picked
+ * // resource out of the tab order.
+ * <ResourceCard
+ *   variant="card"
+ *   interactive
+ *   resource={r}
+ *   thumbnailUrl={catalog.get(r.versionId)?.thumbnailUrl}
+ *   selected={picked.has(r.versionId)}
+ *   onSelect={() => toggle(r)}
+ *   // 🔴 aria-hidden, because `selected` already sets `aria-pressed`. The
+ *   // overlay is a SIBLING of the button, so its text IS announced — an
+ *   // un-hidden "Added" here states the selection a second time, which is the
+ *   // duplication `SELECTED_MARK`'s own aria-hidden exists to prevent.
+ *   overlay={picked.has(r.versionId) ? <span aria-hidden="true">Added</span> : null}
+ *   data-testid={`browse-${r.versionId}`}
+ * />
+ *
+ * @example
+ * // Selected list — static, with the per-row controls in `actions`.
+ * <ResourceCard variant="row" resource={lora} actions={<RemoveButton … />} />
+ */
+export declare const ResourceCard: import("react").ForwardRefExoticComponent<ResourceCardProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=ResourceCard.d.ts.map

package/dist/ui/ResourceCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResourceCard.d.ts","sourceRoot":"","sources":["../../src/ui/ResourceCard.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAsEjE;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,mBAAmB,CAAC,QAAQ,EAAE,iBAAiB,GAAG,MAAM,CAIvE;AAED,oEAAoE;AACpE,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,KAAK,CAAC;AAEjD,uDAAuD;AACvD,UAAU,uBAAuB;IAC/B;;;;;OAKG;IACH,QAAQ,EAAE,iBAAiB,CAAC;IAC5B;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gFAAgF;IAChF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gFAAgF;IAChF,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;;;;;;;;;;OAWG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;GASG;AACH,UAAU,qBAAsB,SAAQ,uBAAuB;IAC7D,OAAO,EAAE,MAAM,CAAC;IAChB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAsCG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;;;;GAWG;AACH,UAAU,oBAAqB,SAAQ,uBAAuB;IAC5D,OAAO,EAAE,KAAK,CAAC;IACf,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAED,+EAA+E;AAC/E,UAAU,qBAAqB;IAC7B,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB;AAED,yEAAyE;AACzE,UAAU,0BAA0B;IAClC,WAAW,EAAE,IAAI,CAAC;IAClB,+EAA+E;IAC/E,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,MAAM,iBAAiB,GACzB,CAAC,qBAAqB,GAAG,qBAAqB,CAAC,GAC/C,CAAC,qBAAqB,GAAG,0BAA0B,CAAC,GACpD,CAAC,oBAAoB,GAAG,qBAAqB,CAAC,GAC9C,CAAC,oBAAoB,GAAG,0BAA0B,CAAC,CAAC;AAqCxD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyDG;AACH,eAAO,MAAM,YAAY,8GAsKvB,CAAC"}