@boost33/ui 0.8.1 → 0.9.0

package/dist/components/Backdrop/BackdropConversation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackdropConversation.js","sources":["../../../src/components/Backdrop/BackdropConversation.tsx"],"sourcesContent":["import { useId } from 'react'\nimport type { HTMLAttributes, InputHTMLAttributes, ReactNode, TextareaHTMLAttributes } from 'react'\nimport styles from './BackdropConversation.module.css'\nimport { cx } from './cx'\nimport { BackdropButton, BackdropIconButton } from './BackdropButton'\nimport { BackdropTextarea } from './BackdropFields'\n\n/*\n * Batch 4 · Conversation (N27–N28). Stage A: static and presentational. No\n * component here holds state, sends, scrolls or inserts anything; a real\n * <form> is Stage B's, so the send button is already `type=\"submit\"` and the\n * field already the native element with the rest of its attributes spread on\n * it (value, onChange, placeholder, name), the way BackdropInput takes them.\n *\n *   Thread         a bottom-anchored log of messages and day separators.\n *   Message        one bubble: incoming (hairline ring) or outgoing (panel\n *                  grey), a 4px corner on the sender's side, a caption under\n *                  it (\"Julien · 16:20\"), any content inside (a nested card).\n *   DaySeparator   \"Monday\", \"Today\", centred.\n *   Composer       the box a person writes a message in. `reply` (default) is\n *                  the thread's reply box: a heading, the textarea, quick\n *                  inserts, a footer with a secondary action, a note and Send.\n *                  `ask` is the one-line question bar with an ink send button.\n *\n * The large writing box on a create page is not a composer: it is\n * BackdropTextarea `size=\"lg\"` with a `footer`, one textarea drawn once.\n * A conversation's row in a list is BackdropListRow (leading avatar with a\n * channel badge, `meta` time, `unreadLabel`); this module draws no row.\n *\n * Measurements are in backdrop-tokens.css under \"Batch 4 · Conversation\".\n * No product nouns: who is speaking, the channel and any cost are content the\n * product passes in.\n */\n\n/* ── N28 · Thread ──────────────────────────────────────────────────────── */\n\nexport interface BackdropThreadProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'role'> {\n  /** The log's accessible name, translated by the caller: \"Conversation with Julien Morel\". */\n  label: string\n  /** BackdropMessage and BackdropDaySeparator elements, oldest first. */\n  children: ReactNode\n}\n\n/*\n * role=\"log\", not a list. A log is the ARIA role for a region where new\n * entries arrive at the end and older ones matter less: it is a polite live\n * region, so when Stage B appends a message a screen reader announces it\n * without moving focus, which a <ul> would not do. The messages are read in\n * order with their captions, and the day separators read as plain text\n * between them.\n *\n * Bottom-anchored the way a chat is: the inner column's top margin is auto,\n * so a short thread sits at the bottom and a long one scrolls from the top\n * with nothing cut off (justify-content: flex-end would clip the overflow).\n * The region is focusable so it can be scrolled from the keyboard.\n */\nexport function BackdropThread({ label, children, className, tabIndex = 0, ...rest }: BackdropThreadProps) {\n  return (\n    <div role=\"log\" aria-label={label} tabIndex={tabIndex} className={cx(styles.thread, className)} {...rest}>\n      <div className={styles.threadInner}>{children}</div>\n    </div>\n  )\n}\n\n/* ── N28 · Message ─────────────────────────────────────────────────────── */\n\n/** `incoming`: from the other side, hairline ring, left. `outgoing`: from this person, panel grey, right. */\nexport type BackdropMessageDirection = 'incoming' | 'outgoing'\n\nexport interface BackdropMessageProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {\n  direction?: BackdropMessageDirection\n  /** The message: text, or text and a nested block (a next-step card). */\n  children: ReactNode\n  /** Under the bubble, muted: \"Julien · 16:20\", \"You · 9:40\". Names the sender for everyone. */\n  caption?: ReactNode\n  /** A mark beside the bubble on the sender's side (an assistant's logo, a person's avatar). Decorative. */\n  leading?: ReactNode\n}\n\n/** One message. Bubble 340 wide at most, 14/21 text, the 4px tail corner on the sender's side. */\nexport function BackdropMessage({ direction = 'incoming', children, caption, leading, className, ...rest }: BackdropMessageProps) {\n  return (\n    <div className={cx(styles.message, direction === 'outgoing' ? styles.outgoing : styles.incoming, className)} {...rest}>\n      {leading != null && (\n        <span className={styles.messageLeading} aria-hidden=\"true\">\n          {leading}\n        </span>\n      )}\n      <div className={styles.messageBody}>\n        <div className={styles.bubble}>{children}</div>\n        {caption != null && <p className={styles.caption}>{caption}</p>}\n      </div>\n    </div>\n  )\n}\n\n/* ── N28 · Day separator ───────────────────────────────────────────────── */\n\nexport interface BackdropDaySeparatorProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {\n  /** \"Monday\", \"Today\", \"Monday · Invitation accepted\". */\n  children: ReactNode\n}\n\n/** A day's label, centred between messages: 13/18 500 muted. Read as plain text in the log. */\nexport function BackdropDaySeparator({ children, className, ...rest }: BackdropDaySeparatorProps) {\n  return (\n    <div className={cx(styles.day, className)} {...rest}>\n      <span>{children}</span>\n    </div>\n  )\n}\n\n/* ── N27 · Composer ────────────────────────────────────────────────────── */\n\n/** `reply` (default): the thread's reply box. `ask`: the one-line question bar. */\nexport type BackdropComposerLook = 'reply' | 'ask'\n\ninterface BackdropComposerBase {\n  /** The field's accessible name, translated by the caller: \"Reply to Julien Morel\", \"Ask a question\". */\n  label: string\n  /** The send button's words (`reply`) or accessible name (`ask`): \"Send\". */\n  sendLabel: string\n  /** The send icon (`send` in src/backdrop-icons.ts), 18px in `reply`, 16px in `ask`. */\n  sendIcon: ReactNode\n  /**\n   * One-press chips: `reply` shows them under the field (quick inserts),\n   * `ask` above it (suggested questions). BackdropChip `kind=\"action\"`.\n   */\n  suggestions?: ReactNode\n  /** The chips' group name, translated by the caller: \"Quick inserts\", \"Suggested questions\". */\n  suggestionsLabel?: string\n  /** On the composer's outer box. Every other prop reaches the native field. */\n  className?: string\n}\n\nexport interface BackdropComposerReplyProps extends BackdropComposerBase, Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'className'> {\n  look?: 'reply'\n  /** A line above the field, 13/18 500: \"Draft ready\". It describes the field. */\n  heading?: ReactNode\n  /** A 16px icon before the heading. Decorative. */\n  headingIcon?: ReactNode\n  /** The footer's start: a ghost BackdropButton (\"Rewrite · 21 tokens\"). */\n  secondaryAction?: ReactNode\n  /** Muted, before Send: a cost or a channel note (\"Uses 9 tokens\"). It describes the send button. */\n  note?: ReactNode\n}\n\nexport interface BackdropComposerAskProps extends BackdropComposerBase, Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'type' | 'size'> {\n  look: 'ask'\n  heading?: never\n  headingIcon?: never\n  secondaryAction?: never\n  note?: never\n}\n\nexport type BackdropComposerProps = BackdropComposerReplyProps | BackdropComposerAskProps\n\n/** Joins the ids that describe an element, dropping the empty ones. */\nfunction joinIds(...ids: Array<string | undefined | false>): string | undefined {\n  const joined = ids.filter(Boolean).join(' ')\n  return joined === '' ? undefined : joined\n}\n\nfunction Suggestions({ children, label }: { children: ReactNode; label?: string }) {\n  return (\n    <div role={label !== undefined ? 'group' : undefined} aria-label={label} className={styles.suggestions}>\n      {children}\n    </div>\n  )\n}\n\n/*\n * `reply`: heading, the batch 2 BackdropTextarea (not a second textarea),\n * the quick inserts, then a footer: secondary action, a spacer, the note and\n * the orange Send, the panel's one primary. `ask`: suggestions above a 40px\n * box (D9) holding a native input and the 32px ink send button.\n */\nexport function BackdropComposer(props: BackdropComposerProps) {\n  const generated = useId()\n  if (props.look === 'ask') {\n    const { look, label, sendLabel, sendIcon, suggestions, suggestionsLabel, className, ...rest } = props\n    return (\n      <div data-look={look} className={cx(styles.composer, className)}>\n        {suggestions != null && <Suggestions label={suggestionsLabel}>{suggestions}</Suggestions>}\n        <div className={styles.askBox}>\n          <input type=\"text\" aria-label={label} {...rest} className={styles.askInput} />\n          <BackdropIconButton type=\"submit\" variant=\"ink\" size=\"sm\" label={sendLabel} icon={sendIcon} />\n        </div>\n      </div>\n    )\n  }\n  const {\n    look = 'reply',\n    label,\n    sendLabel,\n    sendIcon,\n    suggestions,\n    suggestionsLabel,\n    heading,\n    headingIcon,\n    secondaryAction,\n    note,\n    className,\n    ...rest\n  } = props\n  const headingId = `${generated}-heading`\n  const noteId = `${generated}-note`\n  const hasHeading = heading != null\n  const hasNote = note != null\n  return (\n    <div data-look={look} className={cx(styles.composer, className)}>\n      {hasHeading && (\n        <p id={headingId} className={styles.heading}>\n          {headingIcon != null && (\n            <span className={styles.headingIcon} aria-hidden=\"true\">\n              {headingIcon}\n            </span>\n          )}\n          <span>{heading}</span>\n        </p>\n      )}\n      <BackdropTextarea aria-label={label} {...rest} aria-describedby={joinIds(hasHeading && headingId, rest['aria-describedby'])} />\n      {suggestions != null && <Suggestions label={suggestionsLabel}>{suggestions}</Suggestions>}\n      <div className={styles.footer}>\n        {secondaryAction}\n        <span className={styles.spacer} />\n        {hasNote && (\n          <span id={noteId} className={styles.note}>\n            {note}\n          </span>\n        )}\n        <BackdropButton type=\"submit\" variant=\"primary\" icon={sendIcon} aria-describedby={hasNote ? noteId : undefined}>\n          {sendLabel}\n        </BackdropButton>\n      </div>\n    </div>\n  )\n}\n"],"names":["BackdropThread","label","children","className","tabIndex","rest","jsx","cx","styles","BackdropMessage","direction","caption","leading","jsxs","BackdropDaySeparator","joinIds","ids","joined","Suggestions","BackdropComposer","props","generated","useId","look","sendLabel","sendIcon","suggestions","suggestionsLabel","BackdropIconButton","heading","headingIcon","secondaryAction","note","headingId","noteId","hasHeading","hasNote","BackdropTextarea","BackdropButton"],"mappings":"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"}

package/dist/components/Backdrop/BackdropConversation.module.css.js

@@ -0,0 +1,44 @@
+const s = "_thread_96crm_11", o = "_threadInner_96crm_28", n = "_day_96crm_37", e = "_message_96crm_51", _ = "_outgoing_96crm_58", c = "_messageLeading_96crm_62", t = "_messageBody_96crm_67", a = "_incoming_96crm_74", r = "_bubble_96crm_84", m = "_caption_96crm_108", g = "_composer_96crm_117", i = "_suggestions_96crm_129", d = "_heading_96crm_136", p = "_headingIcon_96crm_146", u = "_footer_96crm_156", h = "_spacer_96crm_163", b = "_note_96crm_167", I = "_askBox_96crm_176", y = "_askInput_96crm_189", k = {
+  thread: s,
+  threadInner: o,
+  day: n,
+  message: e,
+  outgoing: _,
+  messageLeading: c,
+  messageBody: t,
+  incoming: a,
+  bubble: r,
+  caption: m,
+  composer: g,
+  suggestions: i,
+  heading: d,
+  headingIcon: p,
+  footer: u,
+  spacer: h,
+  note: b,
+  askBox: I,
+  askInput: y
+};
+export {
+  I as askBox,
+  y as askInput,
+  r as bubble,
+  m as caption,
+  g as composer,
+  n as day,
+  k as default,
+  u as footer,
+  d as heading,
+  p as headingIcon,
+  a as incoming,
+  e as message,
+  t as messageBody,
+  c as messageLeading,
+  b as note,
+  _ as outgoing,
+  h as spacer,
+  i as suggestions,
+  s as thread,
+  o as threadInner
+};
+//# sourceMappingURL=BackdropConversation.module.css.js.map

package/dist/components/Backdrop/BackdropConversation.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackdropConversation.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/Backdrop/BackdropData.d.ts

@@ -0,0 +1,195 @@
+import { ElementType, ReactNode } from 'react';
+import { BackdropButtonVariantName } from './BackdropButton';
+import { BackdropStep } from './BackdropGlobalPanels';
+import { BackdropPageAction } from './BackdropPage';
+/**
+ * What the mark says, so one meaning has one drawing.
+ *
+ * - `dot` (default): a state that is simply so ("Connected", "Running").
+ * - `check`: a state that was checked and passed ("Verified"). The `done`
+ *   icon, circle-check (ADR-0017, Batch 2 gate).
+ * - `ring`: a state not yet reached or not yet live ("Draft", "Invited").
+ */
+export type BackdropStatusMarkKind = 'dot' | 'check' | 'ring';
+/** The status pill's tones (ADR-0017, D7), drawn in the pill's dot colour. */
+export type BackdropStatusMarkTone = 'neutral' | 'success' | 'warning' | 'danger' | 'info';
+/** `md` (default) 14/20 beside a field or in an aside; `sm` 12/16 inside a board card. */
+export type BackdropStatusMarkSize = 'md' | 'sm';
+export interface BackdropStatusMarkProps {
+    /** The state, in words: "Connected", "Verified", "Draft", "Failed". It carries the meaning. */
+    children: ReactNode;
+    kind?: BackdropStatusMarkKind;
+    tone?: BackdropStatusMarkTone;
+    size?: BackdropStatusMarkSize;
+    className?: string;
+}
+export declare function BackdropStatusMark({ children, kind, tone, size, className }: BackdropStatusMarkProps): import("react").JSX.Element;
+/**
+ * - `bar` (default): the 56px bar and the number after it ("Fit ▬▬ 91"),
+ *   drawn with BackdropProgress's `mini` track.
+ * - `ring`: a 44px ring with the number in its middle.
+ * - `signal`: three to five rising bars and a word ("Strong").
+ */
+export type BackdropMeterLook = 'bar' | 'ring' | 'signal';
+/** `ink` (default). `success` only where a high reading is itself good news. Never orange. */
+export type BackdropMeterTone = 'ink' | 'success';
+export interface BackdropMeterProps {
+    value: number;
+    /** Default 100. */
+    max?: number;
+    /** Default 0. */
+    min?: number;
+    /** The meter's accessible name: "Fit", "Match", "Signal strength". */
+    label: string;
+    /**
+     * The reading as shown and spoken: "91", "Strong". Defaults to the value.
+     * A `signal` meter should always pass a word, since its bars are not a number.
+     */
+    valueText?: string;
+    /** A visible caption before the meter: "Fit". Leave it out when a column header names it. */
+    caption?: ReactNode;
+    look?: BackdropMeterLook;
+    /** `signal` only: how many bars, 3 (default) to 5. */
+    steps?: 3 | 4 | 5;
+    tone?: BackdropMeterTone;
+    className?: string;
+}
+export declare function BackdropMeter({ value, max, min, label, valueText, caption, look, steps, tone, className }: BackdropMeterProps): import("react").JSX.Element;
+/**
+ * `raised` (default): the white card with a ring and one shadow, at the right
+ * of a detail page (Off-market introduction). `aside`: the panel grey with no
+ * edge (Brokers offer, Financing application).
+ */
+export type BackdropSummaryCardSurface = 'raised' | 'aside';
+export interface BackdropSummaryCardProps {
+    /** "Your commission 8% · about €1,440 per deal", "Ready". */
+    title: ReactNode;
+    /** One or two muted lines under the title. */
+    description?: ReactNode;
+    /** A state above the title: a BackdropStatusMark, or a BackdropPill. */
+    status?: ReactNode;
+    /** The figures: a BackdropStat, key/value rows, a meter. Laid out by the caller. */
+    children?: ReactNode;
+    /** The card's one action, full width at its foot. */
+    action?: BackdropPageAction;
+    /**
+     * `primary` (default) when this is the page's main action, the one orange
+     * button on the screen. `ink` inside an aside that is not, `outline` for a
+     * quiet one.
+     */
+    actionVariant?: Extract<BackdropButtonVariantName, 'primary' | 'ink' | 'outline'>;
+    /** A second, quieter action under the first: an outline button. */
+    secondaryAction?: BackdropPageAction;
+    surface?: BackdropSummaryCardSurface;
+    /** 2 (default): the card is a region under the page's h1. */
+    headingLevel?: 2 | 3;
+    linkComponent?: ElementType;
+    className?: string;
+}
+export declare function BackdropSummaryCard({ title, description, status, children, action, actionVariant, secondaryAction, surface, headingLevel, linkComponent, className, }: BackdropSummaryCardProps): import("react").JSX.Element;
+export interface BackdropChecklistProps {
+    /** "Get set up", "Profile". */
+    title: ReactNode;
+    /** "3 of 5". */
+    progressText?: ReactNode;
+    /** 0–1. With it, a BackdropProgress bar runs under the head. */
+    progress?: number;
+    /** The bar's accessible name: "Setup, 3 of 5 done". Required with `progress`. */
+    progressLabel?: string;
+    /**
+     * The rows: BackdropStepList's steps. `done` draws the filled circle-check,
+     * `todo` the empty circle, `next` is the current row (highlighted, with its
+     * one action). A link on any other row goes in its `trailing` slot.
+     */
+    steps: BackdropStep[];
+    /** The list's name: "Setup steps". */
+    stepsLabel: string;
+    /** `icon` (default) circles, or `number` for an ordered setup. */
+    marker?: 'icon' | 'number';
+    /** 2 (default). */
+    headingLevel?: 2 | 3;
+    linkComponent?: ElementType;
+    className?: string;
+}
+export declare function BackdropChecklist({ title, progressText, progress, progressLabel, steps, stepsLabel, marker, headingLevel, linkComponent, className, }: BackdropChecklistProps): import("react").JSX.Element;
+/** `row` (default): body left, actions right (a queue of several). `stacked`: actions under the body (one item at a time). */
+export type BackdropReviewCardLayout = 'row' | 'stacked';
+export interface BackdropReviewCardProps {
+    /** Who or where it came from: "Imprimerie Bellecour", "Sophie Garnier". */
+    name: ReactNode;
+    /** A leading BackdropAvatar or BackdropIconTile. Decorative: `name` says who. */
+    avatar?: ReactNode;
+    /** After the name on the same line: a date, a source, a meter. */
+    meta?: ReactNode;
+    /** A one-line heading for the item: "Cut delivery costs". */
+    title?: ReactNode;
+    /** The words under review, quoted. Clamped to three lines. */
+    quote: ReactNode;
+    /** Context chips under the quote (BackdropChip kind="tag"). */
+    chips?: ReactNode;
+    /** Accept: "Approve", "Keep". */
+    primaryAction: BackdropPageAction;
+    /** Turn down: "Reject", "Dismiss". A ghost button, before the primary one. */
+    secondaryAction?: BackdropPageAction;
+    /**
+     * How loud the accept button is. `outline` (default) for a queue, where
+     * every row has one. `primary` (orange) only when the card is the one item
+     * on the screen, since a page has at most one orange button.
+     */
+    emphasis?: 'outline' | 'primary';
+    /** Leading 16px icon on the accept button (the `done` check). Decorative. */
+    primaryIcon?: ReactNode;
+    layout?: BackdropReviewCardLayout;
+    linkComponent?: ElementType;
+    className?: string;
+}
+export declare function BackdropReviewCard({ name, avatar, meta, title, quote, chips, primaryAction, secondaryAction, emphasis, primaryIcon, layout, linkComponent, className, }: BackdropReviewCardProps): import("react").JSX.Element;
+export interface BackdropBoardCardProps {
+    /** "Sophie Arnaud", "Clinique des Monts d'Or". */
+    title: ReactNode;
+    /** One muted line under the title: "Office manager · Lumen Assurances". */
+    subtitle?: ReactNode;
+    /** Above the title, left: a BackdropStatusMark (size="sm"). */
+    status?: ReactNode;
+    /** Above the title, right: "Today", "Won on 6 Nov". */
+    meta?: ReactNode;
+    /** Beside the title: a 24 or 32 BackdropAvatar. Decorative. */
+    avatar?: ReactNode;
+    /** A short body: one or two sentences. */
+    body?: ReactNode;
+    /** Under a hairline at the foot: a source line, or figures. */
+    footer?: ReactNode;
+    /** The card opens a page: rendered as a link. */
+    href?: string;
+    /**
+     * The card opens something in place (a side panel): rendered as a
+     * <button type="button">. Stage A draws the markup only; the handler is
+     * Stage B's. Ignored when `href` is given.
+     */
+    interactive?: boolean;
+    linkComponent?: ElementType;
+    className?: string;
+}
+export declare function BackdropBoardCard({ title, subtitle, status, meta, avatar, body, footer, href, interactive, linkComponent: Link, className }: BackdropBoardCardProps): import("react").JSX.Element;
+export interface BackdropBoardColumn {
+    key: string;
+    /** "New", "Contacted", "Won". */
+    label: ReactNode;
+    /** How many cards: "2". Formatted by the caller. */
+    count?: ReactNode;
+    /** A right-hand figure for the column: "€1,440". */
+    summary?: ReactNode;
+    /** BackdropBoardCard elements, in order. */
+    cards: ReactNode[];
+    /** Shown in place of cards when there are none: "None". */
+    emptyText?: ReactNode;
+}
+export interface BackdropBoardProps {
+    columns: BackdropBoardColumn[];
+    /** The board's accessible name: "Introductions by stage". */
+    label: string;
+    /** The level of each column's heading. 3 (default) under the page's h1 and a section h2. */
+    headingLevel?: 2 | 3 | 4;
+    className?: string;
+}
+export declare function BackdropBoard({ columns, label, headingLevel, className }: BackdropBoardProps): import("react").JSX.Element;

package/dist/components/Backdrop/BackdropData.js

@@ -0,0 +1,204 @@
+import { jsx as e, jsxs as s, Fragment as M } from "react/jsx-runtime";
+import { useId as C } from "react";
+import a from "./BackdropData.module.css.js";
+import f from "./BackdropGlobalPanels.module.css.js";
+import { cx as N } from "./cx.js";
+import { BackdropButton as g } from "./BackdropButton.js";
+import { BackdropProgress as S, BackdropStepList as I } from "./BackdropGlobalPanels.js";
+import { BackdropCard as y } from "./BackdropPage.js";
+function D({ children: o, kind: d = "dot", tone: i = "neutral", size: c = "md", className: l }) {
+  return /* @__PURE__ */ s("span", { className: N(a.status, a[`status-${i}`], c === "sm" && a.statusSm, l), "data-kind": d, "data-tone": i, children: [
+    d === "check" ? /* @__PURE__ */ e("span", { "aria-hidden": "true", className: a.statusIcon, children: /* @__PURE__ */ e(x, {}) }) : /* @__PURE__ */ e("span", { "aria-hidden": "true", className: N(a.statusDot, d === "ring" && a.statusRing) }),
+    /* @__PURE__ */ e("span", { className: a.statusLabel, children: o })
+  ] });
+}
+function x() {
+  return /* @__PURE__ */ s("svg", { "aria-hidden": "true", focusable: "false", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", className: a.statusSvg, children: [
+    /* @__PURE__ */ e("path", { d: "M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" }),
+    /* @__PURE__ */ e("path", { d: "M9 12l2 2l4 -4" })
+  ] });
+}
+function F({ value: o, max: d = 100, min: i = 0, label: c, valueText: l, caption: n, look: r = "bar", steps: t = 3, tone: h = "ink", className: u }) {
+  const p = d - i, m = p > 0 ? Math.max(0, Math.min(1, (o - i) / p)) : 0, v = l ?? String(o), b = {
+    role: "meter",
+    "aria-label": c,
+    "aria-valuemin": i,
+    "aria-valuemax": d,
+    "aria-valuenow": Math.max(i, Math.min(d, o)),
+    "aria-valuetext": l
+  };
+  if (r === "ring")
+    return /* @__PURE__ */ s("span", { ...b, className: N(a.meter, h === "success" && a.meterSuccess, u), "data-look": "ring", children: [
+      n !== void 0 && /* @__PURE__ */ e("span", { className: a.meterCaption, "aria-hidden": "true", children: n }),
+      /* @__PURE__ */ s("span", { className: a.ring, style: { "--backdrop-meter-share": `${Math.round(m * 100)}%` }, children: [
+        /* @__PURE__ */ e("span", { className: a.ringBand, "aria-hidden": "true" }),
+        /* @__PURE__ */ e("span", { className: a.ringValue, "aria-hidden": "true", children: v })
+      ] })
+    ] });
+  if (r === "signal") {
+    const k = Math.max(3, Math.min(5, t)), w = Math.round(m * k);
+    return /* @__PURE__ */ s("span", { ...b, className: N(a.meter, a.meterSignal, h === "success" && a.meterSuccess, u), "data-look": "signal", children: [
+      n !== void 0 && /* @__PURE__ */ e("span", { className: a.meterCaption, "aria-hidden": "true", children: n }),
+      /* @__PURE__ */ e("span", { className: a.signal, "aria-hidden": "true", children: Array.from({ length: k }, (T, B) => (
+        // Bars rise evenly from half the mark's height to all of it: 6, 9, 12 for three.
+        /* @__PURE__ */ e("span", { className: N(a.signalBar, B < w && a.signalBarOn), style: { height: `${50 + 50 * B / (k - 1)}%` } }, B)
+      )) }),
+      /* @__PURE__ */ e("span", { className: a.signalValue, "aria-hidden": "true", children: v })
+    ] });
+  }
+  return /* @__PURE__ */ s("span", { ...b, className: N(a.meter, h === "success" && a.meterSuccess, u), "data-look": "bar", children: [
+    n !== void 0 && /* @__PURE__ */ e("span", { className: a.meterCaption, "aria-hidden": "true", children: n }),
+    /* @__PURE__ */ e("span", { className: N(f.track, f["track-mini"], h === "success" && f["tone-success"]), "aria-hidden": "true", children: /* @__PURE__ */ e("span", { className: f.fillBar, style: { width: `${Math.round(m * 100)}%` } }) }),
+    /* @__PURE__ */ e("span", { className: a.meterValue, "aria-hidden": "true", children: v })
+  ] });
+}
+function q({
+  title: o,
+  description: d,
+  status: i,
+  children: c,
+  action: l,
+  actionVariant: n = "primary",
+  secondaryAction: r,
+  surface: t = "raised",
+  headingLevel: h = 2,
+  linkComponent: u,
+  className: p
+}) {
+  const m = C(), v = h === 3 ? "h3" : "h2";
+  return /* @__PURE__ */ s(
+    y,
+    {
+      as: "section",
+      surface: t === "aside" ? "panel" : "raised",
+      padding: "lg",
+      "aria-labelledby": m,
+      className: N(a.summary, p),
+      "data-surface": t,
+      children: [
+        /* @__PURE__ */ s("div", { className: a.summaryHead, children: [
+          i !== void 0 && /* @__PURE__ */ e("div", { className: a.summaryStatus, children: i }),
+          /* @__PURE__ */ e(v, { id: m, className: a.summaryTitle, children: o }),
+          d !== void 0 && /* @__PURE__ */ e("p", { className: a.summaryDescription, children: d })
+        ] }),
+        c !== void 0 && /* @__PURE__ */ e("div", { className: a.summaryBody, children: c }),
+        (l || r) && /* @__PURE__ */ s("div", { className: a.summaryActions, children: [
+          l && /* @__PURE__ */ e(g, { variant: n, size: "lg", fullWidth: !0, href: l.href, linkComponent: u, onClick: l.onClick, children: l.label }),
+          r && /* @__PURE__ */ e(g, { variant: "outline", size: "lg", fullWidth: !0, href: r.href, linkComponent: u, onClick: r.onClick, children: r.label })
+        ] })
+      ]
+    }
+  );
+}
+function E({
+  title: o,
+  progressText: d,
+  progress: i,
+  progressLabel: c,
+  steps: l,
+  stepsLabel: n,
+  marker: r = "icon",
+  headingLevel: t = 2,
+  linkComponent: h,
+  className: u
+}) {
+  const p = C(), m = t === 3 ? "h3" : "h2";
+  return /* @__PURE__ */ s("section", { "aria-labelledby": p, className: N(a.checklist, u), children: [
+    /* @__PURE__ */ s("div", { className: a.checklistHead, children: [
+      /* @__PURE__ */ s("div", { className: a.checklistTitleRow, children: [
+        /* @__PURE__ */ e(m, { id: p, className: a.checklistTitle, children: o }),
+        d !== void 0 && /* @__PURE__ */ e("span", { className: a.checklistCount, children: d })
+      ] }),
+      i !== void 0 && /* @__PURE__ */ e(S, { value: i, label: c ?? n })
+    ] }),
+    /* @__PURE__ */ e(I, { steps: l, label: n, marker: r, todoTone: "choice", linkComponent: h })
+  ] });
+}
+function O({
+  name: o,
+  avatar: d,
+  meta: i,
+  title: c,
+  quote: l,
+  chips: n,
+  primaryAction: r,
+  secondaryAction: t,
+  emphasis: h = "outline",
+  primaryIcon: u,
+  layout: p = "row",
+  linkComponent: m,
+  className: v
+}) {
+  const b = C(), k = C();
+  return /* @__PURE__ */ s(
+    y,
+    {
+      as: "article",
+      surface: "flat",
+      padding: "md",
+      "aria-labelledby": c !== void 0 ? k : b,
+      className: N(a.review, p === "stacked" ? a.reviewStacked : a.reviewRow, v),
+      "data-layout": p,
+      children: [
+        /* @__PURE__ */ s("div", { className: a.reviewBody, children: [
+          /* @__PURE__ */ s("div", { className: a.reviewWho, children: [
+            d !== void 0 && /* @__PURE__ */ e("span", { className: a.reviewAvatar, children: d }),
+            /* @__PURE__ */ e("span", { id: b, className: a.reviewName, children: o }),
+            i !== void 0 && /* @__PURE__ */ e("span", { className: a.reviewMeta, children: i })
+          ] }),
+          c !== void 0 && /* @__PURE__ */ e("h3", { id: k, className: a.reviewTitle, children: c }),
+          /* @__PURE__ */ e("blockquote", { className: a.reviewQuote, children: l }),
+          n !== void 0 && /* @__PURE__ */ e("div", { className: a.reviewChips, children: n })
+        ] }),
+        /* @__PURE__ */ s("div", { className: a.reviewActions, children: [
+          t && /* @__PURE__ */ e(g, { variant: "ghost", size: "lg", href: t.href, linkComponent: m, onClick: t.onClick, children: t.label }),
+          /* @__PURE__ */ e(g, { variant: h, size: "lg", icon: u, href: r.href, linkComponent: m, onClick: r.onClick, children: r.label })
+        ] })
+      ]
+    }
+  );
+}
+function P({ title: o, subtitle: d, status: i, meta: c, avatar: l, body: n, footer: r, href: t, interactive: h = !1, linkComponent: u = "a", className: p }) {
+  const m = /* @__PURE__ */ s(M, { children: [
+    (i !== void 0 || c !== void 0) && /* @__PURE__ */ s("span", { className: a.boardCardTop, children: [
+      /* @__PURE__ */ e("span", { children: i }),
+      c !== void 0 && /* @__PURE__ */ e("span", { className: a.boardCardMeta, children: c })
+    ] }),
+    /* @__PURE__ */ s("span", { className: a.boardCardHead, children: [
+      l !== void 0 && /* @__PURE__ */ e("span", { className: a.boardCardAvatar, children: l }),
+      /* @__PURE__ */ s("span", { className: a.boardCardTitles, children: [
+        /* @__PURE__ */ e("span", { className: a.boardCardTitle, children: o }),
+        d !== void 0 && /* @__PURE__ */ e("span", { className: a.boardCardSubtitle, children: d })
+      ] })
+    ] }),
+    n !== void 0 && /* @__PURE__ */ e("span", { className: a.boardCardBody, children: n }),
+    r !== void 0 && /* @__PURE__ */ e("span", { className: a.boardCardFooter, children: r })
+  ] }), v = N(a.boardCard, (t !== void 0 || h) && a.boardCardAction, p);
+  return t !== void 0 ? /* @__PURE__ */ e(u, { href: t, className: v, children: m }) : h ? /* @__PURE__ */ e("button", { type: "button", className: v, children: m }) : /* @__PURE__ */ e("div", { className: v, children: m });
+}
+function Q({ columns: o, label: d, headingLevel: i = 3, className: c }) {
+  const l = C(), n = i === 2 ? "h2" : i === 4 ? "h4" : "h3";
+  return /* @__PURE__ */ e("div", { role: "region", "aria-label": d, tabIndex: 0, className: N(a.board, c), children: o.map((r) => {
+    const t = `${l}-${r.key}`;
+    return /* @__PURE__ */ s("section", { "aria-labelledby": t, className: a.boardColumn, children: [
+      /* @__PURE__ */ s("div", { className: a.boardColumnHead, children: [
+        /* @__PURE__ */ s(n, { id: t, className: a.boardColumnTitle, children: [
+          /* @__PURE__ */ e("span", { children: r.label }),
+          r.count !== void 0 && /* @__PURE__ */ e("span", { className: a.boardColumnCount, children: r.count })
+        ] }),
+        r.summary !== void 0 && /* @__PURE__ */ e("span", { className: a.boardColumnSummary, children: r.summary })
+      ] }),
+      r.cards.length > 0 ? /* @__PURE__ */ e("ul", { className: a.boardList, children: r.cards.map((h, u) => /* @__PURE__ */ e("li", { className: a.boardItem, children: h }, u)) }) : r.emptyText !== void 0 && /* @__PURE__ */ e("p", { className: a.boardEmpty, children: r.emptyText })
+    ] }, r.key);
+  }) });
+}
+export {
+  Q as BackdropBoard,
+  P as BackdropBoardCard,
+  E as BackdropChecklist,
+  F as BackdropMeter,
+  O as BackdropReviewCard,
+  D as BackdropStatusMark,
+  q as BackdropSummaryCard
+};
+//# sourceMappingURL=BackdropData.js.map

package/dist/components/Backdrop/BackdropData.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackdropData.js","sources":["../../../src/components/Backdrop/BackdropData.tsx"],"sourcesContent":["import { useId, type CSSProperties, type ElementType, type ReactNode } from 'react'\nimport styles from './BackdropData.module.css'\nimport progressStyles from './BackdropGlobalPanels.module.css'\nimport { cx } from './cx'\nimport { BackdropButton, type BackdropButtonVariantName } from './BackdropButton'\nimport { BackdropProgress, BackdropStepList, type BackdropStep } from './BackdropGlobalPanels'\nimport { BackdropCard, type BackdropPageAction } from './BackdropPage'\n\n/*\n * Batch 3 · Data (N21–N26). The parts that show a record's state rather than\n * take input: a status mark, a meter, the summary card at the right of a\n * detail page, a checklist, a review-queue item and a board of columns.\n *\n * Stage A: static and presentational. Nothing here owns an event handler.\n * Actions take the package's one action shape ({ label, onClick?, href? }),\n * so Stage B wires them the same way it wires BackdropNextStepCard. Nothing\n * here knows what is being reviewed, scored or moved across a board: every\n * word and every figure arrives as a prop.\n */\n\n/* ── Status mark (N22) ─────────────────────────────────────────────────── */\n\n/**\n * What the mark says, so one meaning has one drawing.\n *\n * - `dot` (default): a state that is simply so (\"Connected\", \"Running\").\n * - `check`: a state that was checked and passed (\"Verified\"). The `done`\n *   icon, circle-check (ADR-0017, Batch 2 gate).\n * - `ring`: a state not yet reached or not yet live (\"Draft\", \"Invited\").\n */\nexport type BackdropStatusMarkKind = 'dot' | 'check' | 'ring'\n/** The status pill's tones (ADR-0017, D7), drawn in the pill's dot colour. */\nexport type BackdropStatusMarkTone = 'neutral' | 'success' | 'warning' | 'danger' | 'info'\n/** `md` (default) 14/20 beside a field or in an aside; `sm` 12/16 inside a board card. */\nexport type BackdropStatusMarkSize = 'md' | 'sm'\n\nexport interface BackdropStatusMarkProps {\n  /** The state, in words: \"Connected\", \"Verified\", \"Draft\", \"Failed\". It carries the meaning. */\n  children: ReactNode\n  kind?: BackdropStatusMarkKind\n  tone?: BackdropStatusMarkTone\n  size?: BackdropStatusMarkSize\n  className?: string\n}\n\n/*\n * Unboxed: a mark and a word, no ground and no edge. That is the difference\n * from BackdropPill, which is the boxed status in a row. The mark is\n * decorative; the label is the state, so colour is never the only signal.\n */\nexport function BackdropStatusMark({ children, kind = 'dot', tone = 'neutral', size = 'md', className }: BackdropStatusMarkProps) {\n  return (\n    <span className={cx(styles.status, styles[`status-${tone}`], size === 'sm' && styles.statusSm, className)} data-kind={kind} data-tone={tone}>\n      {kind === 'check' ? (\n        <span aria-hidden=\"true\" className={styles.statusIcon}>\n          <CircleCheck />\n        </span>\n      ) : (\n        <span aria-hidden=\"true\" className={cx(styles.statusDot, kind === 'ring' && styles.statusRing)} />\n      )}\n      <span className={styles.statusLabel}>{children}</span>\n    </span>\n  )\n}\n\n/* Tabler `circle-check` (MIT), the `done` meaning, at 16 with the 16px stroke (D17). */\nfunction CircleCheck() {\n  return (\n    <svg aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={styles.statusSvg}>\n      <path d=\"M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0\" />\n      <path d=\"M9 12l2 2l4 -4\" />\n    </svg>\n  )\n}\n\n/* ── Meter (N23) ───────────────────────────────────────────────────────── */\n\n/**\n * - `bar` (default): the 56px bar and the number after it (\"Fit ▬▬ 91\"),\n *   drawn with BackdropProgress's `mini` track.\n * - `ring`: a 44px ring with the number in its middle.\n * - `signal`: three to five rising bars and a word (\"Strong\").\n */\nexport type BackdropMeterLook = 'bar' | 'ring' | 'signal'\n/** `ink` (default). `success` only where a high reading is itself good news. Never orange. */\nexport type BackdropMeterTone = 'ink' | 'success'\n\nexport interface BackdropMeterProps {\n  value: number\n  /** Default 100. */\n  max?: number\n  /** Default 0. */\n  min?: number\n  /** The meter's accessible name: \"Fit\", \"Match\", \"Signal strength\". */\n  label: string\n  /**\n   * The reading as shown and spoken: \"91\", \"Strong\". Defaults to the value.\n   * A `signal` meter should always pass a word, since its bars are not a number.\n   */\n  valueText?: string\n  /** A visible caption before the meter: \"Fit\". Leave it out when a column header names it. */\n  caption?: ReactNode\n  look?: BackdropMeterLook\n  /** `signal` only: how many bars, 3 (default) to 5. */\n  steps?: 3 | 4 | 5\n  tone?: BackdropMeterTone\n  className?: string\n}\n\n/*\n * role=\"meter\": a reading within a known range, not progress toward a goal\n * (that is BackdropProgress). The drawing is hidden from assistive tech; the\n * name, the range and the reading are announced instead.\n */\nexport function BackdropMeter({ value, max = 100, min = 0, label, valueText, caption, look = 'bar', steps = 3, tone = 'ink', className }: BackdropMeterProps) {\n  const span = max - min\n  const share = span > 0 ? Math.max(0, Math.min(1, (value - min) / span)) : 0\n  const shown = valueText ?? String(value)\n  const common = {\n    role: 'meter',\n    'aria-label': label,\n    'aria-valuemin': min,\n    'aria-valuemax': max,\n    'aria-valuenow': Math.max(min, Math.min(max, value)),\n    'aria-valuetext': valueText,\n  } as const\n\n  if (look === 'ring') {\n    return (\n      <span {...common} className={cx(styles.meter, tone === 'success' && styles.meterSuccess, className)} data-look=\"ring\">\n        {caption !== undefined && <span className={styles.meterCaption} aria-hidden=\"true\">{caption}</span>}\n        <span className={styles.ring} style={{ '--backdrop-meter-share': `${Math.round(share * 100)}%` } as CSSProperties}>\n          <span className={styles.ringBand} aria-hidden=\"true\" />\n          <span className={styles.ringValue} aria-hidden=\"true\">{shown}</span>\n        </span>\n      </span>\n    )\n  }\n\n  if (look === 'signal') {\n    const count = Math.max(3, Math.min(5, steps))\n    const lit = Math.round(share * count)\n    return (\n      <span {...common} className={cx(styles.meter, styles.meterSignal, tone === 'success' && styles.meterSuccess, className)} data-look=\"signal\">\n        {caption !== undefined && <span className={styles.meterCaption} aria-hidden=\"true\">{caption}</span>}\n        <span className={styles.signal} aria-hidden=\"true\">\n          {Array.from({ length: count }, (_, i) => (\n            // Bars rise evenly from half the mark's height to all of it: 6, 9, 12 for three.\n            <span key={i} className={cx(styles.signalBar, i < lit && styles.signalBarOn)} style={{ height: `${50 + (50 * i) / (count - 1)}%` }} />\n          ))}\n        </span>\n        <span className={styles.signalValue} aria-hidden=\"true\">{shown}</span>\n      </span>\n    )\n  }\n\n  return (\n    <span {...common} className={cx(styles.meter, tone === 'success' && styles.meterSuccess, className)} data-look=\"bar\">\n      {caption !== undefined && <span className={styles.meterCaption} aria-hidden=\"true\">{caption}</span>}\n      <span className={cx(progressStyles.track, progressStyles['track-mini'], tone === 'success' && progressStyles['tone-success'])} aria-hidden=\"true\">\n        <span className={progressStyles.fillBar} style={{ width: `${Math.round(share * 100)}%` }} />\n      </span>\n      <span className={styles.meterValue} aria-hidden=\"true\">{shown}</span>\n    </span>\n  )\n}\n\n/* ── Summary card (N24) ────────────────────────────────────────────────── */\n\n/**\n * `raised` (default): the white card with a ring and one shadow, at the right\n * of a detail page (Off-market introduction). `aside`: the panel grey with no\n * edge (Brokers offer, Financing application).\n */\nexport type BackdropSummaryCardSurface = 'raised' | 'aside'\n\nexport interface BackdropSummaryCardProps {\n  /** \"Your commission 8% · about €1,440 per deal\", \"Ready\". */\n  title: ReactNode\n  /** One or two muted lines under the title. */\n  description?: ReactNode\n  /** A state above the title: a BackdropStatusMark, or a BackdropPill. */\n  status?: ReactNode\n  /** The figures: a BackdropStat, key/value rows, a meter. Laid out by the caller. */\n  children?: ReactNode\n  /** The card's one action, full width at its foot. */\n  action?: BackdropPageAction\n  /**\n   * `primary` (default) when this is the page's main action, the one orange\n   * button on the screen. `ink` inside an aside that is not, `outline` for a\n   * quiet one.\n   */\n  actionVariant?: Extract<BackdropButtonVariantName, 'primary' | 'ink' | 'outline'>\n  /** A second, quieter action under the first: an outline button. */\n  secondaryAction?: BackdropPageAction\n  surface?: BackdropSummaryCardSurface\n  /** 2 (default): the card is a region under the page's h1. */\n  headingLevel?: 2 | 3\n  linkComponent?: ElementType\n  className?: string\n}\n\n/* Built on BackdropCard (radius 16, D2; edge per D3, or the panel fill). */\nexport function BackdropSummaryCard({\n  title,\n  description,\n  status,\n  children,\n  action,\n  actionVariant = 'primary',\n  secondaryAction,\n  surface = 'raised',\n  headingLevel = 2,\n  linkComponent,\n  className,\n}: BackdropSummaryCardProps) {\n  const headingId = useId()\n  const Heading = headingLevel === 3 ? 'h3' : 'h2'\n  return (\n    <BackdropCard\n      as=\"section\"\n      surface={surface === 'aside' ? 'panel' : 'raised'}\n      padding=\"lg\"\n      aria-labelledby={headingId}\n      className={cx(styles.summary, className)}\n      data-surface={surface}\n    >\n      <div className={styles.summaryHead}>\n        {status !== undefined && <div className={styles.summaryStatus}>{status}</div>}\n        <Heading id={headingId} className={styles.summaryTitle}>\n          {title}\n        </Heading>\n        {description !== undefined && <p className={styles.summaryDescription}>{description}</p>}\n      </div>\n      {children !== undefined && <div className={styles.summaryBody}>{children}</div>}\n      {(action || secondaryAction) && (\n        <div className={styles.summaryActions}>\n          {action && (\n            <BackdropButton variant={actionVariant} size=\"lg\" fullWidth href={action.href} linkComponent={linkComponent} onClick={action.onClick}>\n              {action.label}\n            </BackdropButton>\n          )}\n          {secondaryAction && (\n            <BackdropButton variant=\"outline\" size=\"lg\" fullWidth href={secondaryAction.href} linkComponent={linkComponent} onClick={secondaryAction.onClick}>\n              {secondaryAction.label}\n            </BackdropButton>\n          )}\n        </div>\n      )}\n    </BackdropCard>\n  )\n}\n\n/* ── Checklist (N25) ───────────────────────────────────────────────────── */\n\nexport interface BackdropChecklistProps {\n  /** \"Get set up\", \"Profile\". */\n  title: ReactNode\n  /** \"3 of 5\". */\n  progressText?: ReactNode\n  /** 0–1. With it, a BackdropProgress bar runs under the head. */\n  progress?: number\n  /** The bar's accessible name: \"Setup, 3 of 5 done\". Required with `progress`. */\n  progressLabel?: string\n  /**\n   * The rows: BackdropStepList's steps. `done` draws the filled circle-check,\n   * `todo` the empty circle, `next` is the current row (highlighted, with its\n   * one action). A link on any other row goes in its `trailing` slot.\n   */\n  steps: BackdropStep[]\n  /** The list's name: \"Setup steps\". */\n  stepsLabel: string\n  /** `icon` (default) circles, or `number` for an ordered setup. */\n  marker?: 'icon' | 'number'\n  /** 2 (default). */\n  headingLevel?: 2 | 3\n  linkComponent?: ElementType\n  className?: string\n}\n\n/*\n * A checklist IS BackdropStepList: the same rows, markers, current-row action\n * and trailing slot. What a checklist on the page adds is a head (title, \"3 of\n * 5\", a bar) and a darker empty circle (StepList's `todoTone=\"choice\"`), so it\n * is a composition, as BackdropGetStartedPanel is, not a second list.\n */\nexport function BackdropChecklist({\n  title,\n  progressText,\n  progress,\n  progressLabel,\n  steps,\n  stepsLabel,\n  marker = 'icon',\n  headingLevel = 2,\n  linkComponent,\n  className,\n}: BackdropChecklistProps) {\n  const headingId = useId()\n  const Heading = headingLevel === 3 ? 'h3' : 'h2'\n  return (\n    <section aria-labelledby={headingId} className={cx(styles.checklist, className)}>\n      <div className={styles.checklistHead}>\n        <div className={styles.checklistTitleRow}>\n          <Heading id={headingId} className={styles.checklistTitle}>\n            {title}\n          </Heading>\n          {progressText !== undefined && <span className={styles.checklistCount}>{progressText}</span>}\n        </div>\n        {progress !== undefined && <BackdropProgress value={progress} label={progressLabel ?? stepsLabel} />}\n      </div>\n      <BackdropStepList steps={steps} label={stepsLabel} marker={marker} todoTone=\"choice\" linkComponent={linkComponent} />\n    </section>\n  )\n}\n\n/* ── Review card (N26) ─────────────────────────────────────────────────── */\n\n/** `row` (default): body left, actions right (a queue of several). `stacked`: actions under the body (one item at a time). */\nexport type BackdropReviewCardLayout = 'row' | 'stacked'\n\nexport interface BackdropReviewCardProps {\n  /** Who or where it came from: \"Imprimerie Bellecour\", \"Sophie Garnier\". */\n  name: ReactNode\n  /** A leading BackdropAvatar or BackdropIconTile. Decorative: `name` says who. */\n  avatar?: ReactNode\n  /** After the name on the same line: a date, a source, a meter. */\n  meta?: ReactNode\n  /** A one-line heading for the item: \"Cut delivery costs\". */\n  title?: ReactNode\n  /** The words under review, quoted. Clamped to three lines. */\n  quote: ReactNode\n  /** Context chips under the quote (BackdropChip kind=\"tag\"). */\n  chips?: ReactNode\n  /** Accept: \"Approve\", \"Keep\". */\n  primaryAction: BackdropPageAction\n  /** Turn down: \"Reject\", \"Dismiss\". A ghost button, before the primary one. */\n  secondaryAction?: BackdropPageAction\n  /**\n   * How loud the accept button is. `outline` (default) for a queue, where\n   * every row has one. `primary` (orange) only when the card is the one item\n   * on the screen, since a page has at most one orange button.\n   */\n  emphasis?: 'outline' | 'primary'\n  /** Leading 16px icon on the accept button (the `done` check). Decorative. */\n  primaryIcon?: ReactNode\n  layout?: BackdropReviewCardLayout\n  linkComponent?: ElementType\n  className?: string\n}\n\n/*\n * A flat card (D3) holding one item to accept or turn down. An <article>\n * named by its title, or by its name when it has no title.\n */\nexport function BackdropReviewCard({\n  name,\n  avatar,\n  meta,\n  title,\n  quote,\n  chips,\n  primaryAction,\n  secondaryAction,\n  emphasis = 'outline',\n  primaryIcon,\n  layout = 'row',\n  linkComponent,\n  className,\n}: BackdropReviewCardProps) {\n  const nameId = useId()\n  const titleId = useId()\n  return (\n    <BackdropCard\n      as=\"article\"\n      surface=\"flat\"\n      padding=\"md\"\n      aria-labelledby={title !== undefined ? titleId : nameId}\n      className={cx(styles.review, layout === 'stacked' ? styles.reviewStacked : styles.reviewRow, className)}\n      data-layout={layout}\n    >\n      <div className={styles.reviewBody}>\n        <div className={styles.reviewWho}>\n          {avatar !== undefined && <span className={styles.reviewAvatar}>{avatar}</span>}\n          <span id={nameId} className={styles.reviewName}>\n            {name}\n          </span>\n          {meta !== undefined && <span className={styles.reviewMeta}>{meta}</span>}\n        </div>\n        {title !== undefined && (\n          <h3 id={titleId} className={styles.reviewTitle}>\n            {title}\n          </h3>\n        )}\n        <blockquote className={styles.reviewQuote}>{quote}</blockquote>\n        {chips !== undefined && <div className={styles.reviewChips}>{chips}</div>}\n      </div>\n      <div className={styles.reviewActions}>\n        {secondaryAction && (\n          <BackdropButton variant=\"ghost\" size=\"lg\" href={secondaryAction.href} linkComponent={linkComponent} onClick={secondaryAction.onClick}>\n            {secondaryAction.label}\n          </BackdropButton>\n        )}\n        <BackdropButton variant={emphasis} size=\"lg\" icon={primaryIcon} href={primaryAction.href} linkComponent={linkComponent} onClick={primaryAction.onClick}>\n          {primaryAction.label}\n        </BackdropButton>\n      </div>\n    </BackdropCard>\n  )\n}\n\n/* ── Board (N21) ───────────────────────────────────────────────────────── */\n\nexport interface BackdropBoardCardProps {\n  /** \"Sophie Arnaud\", \"Clinique des Monts d'Or\". */\n  title: ReactNode\n  /** One muted line under the title: \"Office manager · Lumen Assurances\". */\n  subtitle?: ReactNode\n  /** Above the title, left: a BackdropStatusMark (size=\"sm\"). */\n  status?: ReactNode\n  /** Above the title, right: \"Today\", \"Won on 6 Nov\". */\n  meta?: ReactNode\n  /** Beside the title: a 24 or 32 BackdropAvatar. Decorative. */\n  avatar?: ReactNode\n  /** A short body: one or two sentences. */\n  body?: ReactNode\n  /** Under a hairline at the foot: a source line, or figures. */\n  footer?: ReactNode\n  /** The card opens a page: rendered as a link. */\n  href?: string\n  /**\n   * The card opens something in place (a side panel): rendered as a\n   * <button type=\"button\">. Stage A draws the markup only; the handler is\n   * Stage B's. Ignored when `href` is given.\n   */\n  interactive?: boolean\n  linkComponent?: ElementType\n  className?: string\n}\n\n/*\n * One card in a board column. A real <a> or <button> when it opens\n * something, never a clickable <div>; static otherwise. Its parts are spans\n * so the whole card can sit inside a button.\n */\nexport function BackdropBoardCard({ title, subtitle, status, meta, avatar, body, footer, href, interactive = false, linkComponent: Link = 'a', className }: BackdropBoardCardProps) {\n  const content = (\n    <>\n      {(status !== undefined || meta !== undefined) && (\n        <span className={styles.boardCardTop}>\n          <span>{status}</span>\n          {meta !== undefined && <span className={styles.boardCardMeta}>{meta}</span>}\n        </span>\n      )}\n      <span className={styles.boardCardHead}>\n        {avatar !== undefined && <span className={styles.boardCardAvatar}>{avatar}</span>}\n        <span className={styles.boardCardTitles}>\n          <span className={styles.boardCardTitle}>{title}</span>\n          {subtitle !== undefined && <span className={styles.boardCardSubtitle}>{subtitle}</span>}\n        </span>\n      </span>\n      {body !== undefined && <span className={styles.boardCardBody}>{body}</span>}\n      {footer !== undefined && <span className={styles.boardCardFooter}>{footer}</span>}\n    </>\n  )\n  const classes = cx(styles.boardCard, (href !== undefined || interactive) && styles.boardCardAction, className)\n  if (href !== undefined) {\n    return (\n      <Link href={href} className={classes}>\n        {content}\n      </Link>\n    )\n  }\n  if (interactive) {\n    return (\n      <button type=\"button\" className={classes}>\n        {content}\n      </button>\n    )\n  }\n  return <div className={classes}>{content}</div>\n}\n\nexport interface BackdropBoardColumn {\n  key: string\n  /** \"New\", \"Contacted\", \"Won\". */\n  label: ReactNode\n  /** How many cards: \"2\". Formatted by the caller. */\n  count?: ReactNode\n  /** A right-hand figure for the column: \"€1,440\". */\n  summary?: ReactNode\n  /** BackdropBoardCard elements, in order. */\n  cards: ReactNode[]\n  /** Shown in place of cards when there are none: \"None\". */\n  emptyText?: ReactNode\n}\n\nexport interface BackdropBoardProps {\n  columns: BackdropBoardColumn[]\n  /** The board's accessible name: \"Introductions by stage\". */\n  label: string\n  /** The level of each column's heading. 3 (default) under the page's h1 and a section h2. */\n  headingLevel?: 2 | 3 | 4\n  className?: string\n}\n\n/*\n * Kanban columns, one <section> per column named by its heading, each holding\n * a list of cards. Columns share the row and never narrow below\n * --backdrop-board-column-width; a wider board scrolls sideways, and the\n * scroller is a focusable region so a keyboard can scroll it. Stage A: no\n * drag and drop; a card moves when its record changes.\n */\nexport function BackdropBoard({ columns, label, headingLevel = 3, className }: BackdropBoardProps) {\n  const baseId = useId()\n  const Heading = headingLevel === 2 ? 'h2' : headingLevel === 4 ? 'h4' : 'h3'\n  return (\n    <div role=\"region\" aria-label={label} tabIndex={0} className={cx(styles.board, className)}>\n      {columns.map((column) => {\n        const headingId = `${baseId}-${column.key}`\n        return (\n          <section key={column.key} aria-labelledby={headingId} className={styles.boardColumn}>\n            <div className={styles.boardColumnHead}>\n              <Heading id={headingId} className={styles.boardColumnTitle}>\n                <span>{column.label}</span>\n                {column.count !== undefined && <span className={styles.boardColumnCount}>{column.count}</span>}\n              </Heading>\n              {column.summary !== undefined && <span className={styles.boardColumnSummary}>{column.summary}</span>}\n            </div>\n            {column.cards.length > 0 ? (\n              <ul className={styles.boardList}>\n                {column.cards.map((card, i) => (\n                  <li key={i} className={styles.boardItem}>\n                    {card}\n                  </li>\n                ))}\n              </ul>\n            ) : (\n              column.emptyText !== undefined && <p className={styles.boardEmpty}>{column.emptyText}</p>\n            )}\n          </section>\n        )\n      })}\n    </div>\n  )\n}\n"],"names":["BackdropStatusMark","children","kind","tone","size","className","jsxs","cx","styles","jsx","CircleCheck","BackdropMeter","value","max","min","label","valueText","caption","look","steps","span","share","shown","common","count","lit","_","i","progressStyles","BackdropSummaryCard","title","description","status","action","actionVariant","secondaryAction","surface","headingLevel","linkComponent","headingId","useId","Heading","BackdropCard","BackdropButton","BackdropChecklist","progressText","progress","progressLabel","stepsLabel","marker","BackdropProgress","BackdropStepList","BackdropReviewCard","name","avatar","meta","quote","chips","primaryAction","emphasis","primaryIcon","layout","nameId","titleId","BackdropBoardCard","subtitle","body","footer","href","interactive","Link","content","Fragment","classes","BackdropBoard","columns","baseId","column","card"],"mappings":"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"}