@boost33/ui 0.8.0 → 0.9.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"BackdropChrome.js","sources":["../../../src/components/Backdrop/BackdropChrome.tsx"],"sourcesContent":["'use client'\n\nimport { createContext, useCallback, useContext, useMemo, useState, type Dispatch, type ReactNode, type SetStateAction } from 'react'\n\n/*\n * Which one chrome panel is open (Batch 7, ADR-0009 addendum, 12 Nov 2026).\n *\n * The strip's popovers, the rail's All apps panel and the search dialog are\n * separate client islands in a host that streams its page, so none can hold\n * another's state. Each overlay's own dismissal (Escape, an outside press,\n * focus leaving) is enough while a person only opens panels by pressing them,\n * and not otherwise: ⌘K is a keystroke, so an open popover hears no outside\n * press and stays up behind the search dialog; and a control in the page (the\n * Hub's \"All apps\" card) can open a panel the chrome draws.\n *\n * So one key for the whole chrome, held here. Wrapping server-rendered\n * children costs them nothing: they stay Server Components. An overlay joins\n * by naming its key (`panel`); one that names none keeps its own state exactly\n * as before, which is why no approved story moves.\n */\n\ninterface ChromeState {\n  openKey: string | null\n  setOpenKey: Dispatch<SetStateAction<string | null>>\n}\n\nconst ChromeContext = createContext<ChromeState | null>(null)\n\n/** The chrome's one open panel. Put it around the frame; its children may be Server Components. */\nexport function BackdropChrome({ children }: { children: ReactNode }) {\n  const [openKey, setOpenKey] = useState<string | null>(null)\n  const value = useMemo(() => ({ openKey, setOpenKey }), [openKey])\n  return <ChromeContext.Provider value={value}>{children}</ChromeContext.Provider>\n}\n\nexport interface BackdropPanelControl {\n  /** True while this key is the chrome's open panel. */\n  open: boolean\n  /** Opening closes whatever else was open, in the same update. Closing closes only this key. */\n  setOpen: (open: boolean) => void\n}\n\n/*\n * Both rules are applied to the current key, not the one this render saw: a\n * close from a panel that is already shut must not shut the panel that\n * replaced it, and an open must not wait for an effect, or two panels paint\n * together for a frame.\n */\nfunction usePanelSetter(setOpenKey: Dispatch<SetStateAction<string | null>> | undefined, key: string | undefined) {\n  return useCallback(\n    (next: boolean) => {\n      if (!setOpenKey || key === undefined) return\n      setOpenKey((current) => (next ? key : current === key ? null : current))\n    },\n    [setOpenKey, key],\n  )\n}\n\n/**\n * A control that opens a chrome panel it does not draw: the Hub's \"All apps\"\n * card, a ⌘K shortcut. Throws outside a BackdropChrome, because an opener that\n * silently does nothing survives every screenshot review.\n */\nexport function useBackdropPanel(key: string): BackdropPanelControl {\n  const chrome = useContext(ChromeContext)\n  const setOpen = usePanelSetter(chrome?.setOpenKey, key)\n  if (!chrome) throw new Error(`useBackdropPanel('${key}') is outside a BackdropChrome`)\n  return { open: chrome.openKey === key, setOpen }\n}\n\n/** For the overlays themselves: null outside a BackdropChrome, or with no key, so they keep their own state. */\nexport function useChromePanel(key: string | undefined): BackdropPanelControl | null {\n  const chrome = useContext(ChromeContext)\n  const setOpen = usePanelSetter(chrome?.setOpenKey, key)\n  if (!chrome || key === undefined) return null\n  return { open: chrome.openKey === key, setOpen }\n}\n\n/** For a modal dialog, which claims the chrome while it is mounted (see BackdropDialog). */\nexport function useChromeState(): ChromeState | null {\n  return useContext(ChromeContext)\n}\n"],"names":["ChromeContext","createContext","BackdropChrome","children","openKey","setOpenKey","useState","value","useMemo","jsx","usePanelSetter","key","useCallback","next","current","useBackdropPanel","chrome","useContext","setOpen","useChromePanel","useChromeState"],"mappings":";;;AA0BA,MAAMA,IAAgBC,EAAkC,IAAI;AAGrD,SAASC,EAAe,EAAE,UAAAC,KAAqC;AACpE,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAwB,IAAI,GACpDC,IAAQC,EAAQ,OAAO,EAAE,SAAAJ,GAAS,YAAAC,MAAe,CAACD,CAAO,CAAC;AAChE,SAAO,gBAAAK,EAACT,EAAc,UAAd,EAAuB,OAAAO,GAAe,UAAAJ,EAAA,CAAS;AACzD;AAeA,SAASO,EAAeL,GAAiEM,GAAyB;AAChH,SAAOC;AAAA,IACL,CAACC,MAAkB;AACjB,MAAI,CAACR,KAAcM,MAAQ,UAC3BN,EAAW,CAACS,MAAaD,IAAOF,IAAMG,MAAYH,IAAM,OAAOG,CAAQ;AAAA,IACzE;AAAA,IACA,CAACT,GAAYM,CAAG;AAAA,EAAA;AAEpB;AAOO,SAASI,EAAiBJ,GAAmC;AAClE,QAAMK,IAASC,EAAWjB,CAAa,GACjCkB,IAAUR,EAAeM,KAAA,gBAAAA,EAAQ,YAAYL,CAAG;AACtD,MAAI,CAACK,EAAQ,OAAM,IAAI,MAAM,qBAAqBL,CAAG,gCAAgC;AACrF,SAAO,EAAE,MAAMK,EAAO,YAAYL,GAAK,SAAAO,EAAA;AACzC;AAGO,SAASC,EAAeR,GAAsD;AACnF,QAAMK,IAASC,EAAWjB,CAAa,GACjCkB,IAAUR,EAAeM,KAAA,gBAAAA,EAAQ,YAAYL,CAAG;AACtD,SAAI,CAACK,KAAUL,MAAQ,SAAkB,OAClC,EAAE,MAAMK,EAAO,YAAYL,GAAK,SAAAO,EAAA;AACzC;AAGO,SAASE,IAAqC;AACnD,SAAOH,EAAWjB,CAAa;AACjC;"}

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

@@ -0,0 +1,67 @@
+import { HTMLAttributes, InputHTMLAttributes, ReactNode, TextareaHTMLAttributes } from 'react';
+export interface BackdropThreadProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'role'> {
+    /** The log's accessible name, translated by the caller: "Conversation with Julien Morel". */
+    label: string;
+    /** BackdropMessage and BackdropDaySeparator elements, oldest first. */
+    children: ReactNode;
+}
+export declare function BackdropThread({ label, children, className, tabIndex, ...rest }: BackdropThreadProps): import("react").JSX.Element;
+/** `incoming`: from the other side, hairline ring, left. `outgoing`: from this person, panel grey, right. */
+export type BackdropMessageDirection = 'incoming' | 'outgoing';
+export interface BackdropMessageProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    direction?: BackdropMessageDirection;
+    /** The message: text, or text and a nested block (a next-step card). */
+    children: ReactNode;
+    /** Under the bubble, muted: "Julien · 16:20", "You · 9:40". Names the sender for everyone. */
+    caption?: ReactNode;
+    /** A mark beside the bubble on the sender's side (an assistant's logo, a person's avatar). Decorative. */
+    leading?: ReactNode;
+}
+/** One message. Bubble 340 wide at most, 14/21 text, the 4px tail corner on the sender's side. */
+export declare function BackdropMessage({ direction, children, caption, leading, className, ...rest }: BackdropMessageProps): import("react").JSX.Element;
+export interface BackdropDaySeparatorProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** "Monday", "Today", "Monday · Invitation accepted". */
+    children: ReactNode;
+}
+/** A day's label, centred between messages: 13/18 500 muted. Read as plain text in the log. */
+export declare function BackdropDaySeparator({ children, className, ...rest }: BackdropDaySeparatorProps): import("react").JSX.Element;
+/** `reply` (default): the thread's reply box. `ask`: the one-line question bar. */
+export type BackdropComposerLook = 'reply' | 'ask';
+interface BackdropComposerBase {
+    /** The field's accessible name, translated by the caller: "Reply to Julien Morel", "Ask a question". */
+    label: string;
+    /** The send button's words (`reply`) or accessible name (`ask`): "Send". */
+    sendLabel: string;
+    /** The send icon (`send` in src/backdrop-icons.ts), 18px in `reply`, 16px in `ask`. */
+    sendIcon: ReactNode;
+    /**
+     * One-press chips: `reply` shows them under the field (quick inserts),
+     * `ask` above it (suggested questions). BackdropChip `kind="action"`.
+     */
+    suggestions?: ReactNode;
+    /** The chips' group name, translated by the caller: "Quick inserts", "Suggested questions". */
+    suggestionsLabel?: string;
+    /** On the composer's outer box. Every other prop reaches the native field. */
+    className?: string;
+}
+export interface BackdropComposerReplyProps extends BackdropComposerBase, Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'className'> {
+    look?: 'reply';
+    /** A line above the field, 13/18 500: "Draft ready". It describes the field. */
+    heading?: ReactNode;
+    /** A 16px icon before the heading. Decorative. */
+    headingIcon?: ReactNode;
+    /** The footer's start: a ghost BackdropButton ("Rewrite · 21 tokens"). */
+    secondaryAction?: ReactNode;
+    /** Muted, before Send: a cost or a channel note ("Uses 9 tokens"). It describes the send button. */
+    note?: ReactNode;
+}
+export interface BackdropComposerAskProps extends BackdropComposerBase, Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'type' | 'size'> {
+    look: 'ask';
+    heading?: never;
+    headingIcon?: never;
+    secondaryAction?: never;
+    note?: never;
+}
+export type BackdropComposerProps = BackdropComposerReplyProps | BackdropComposerAskProps;
+export declare function BackdropComposer(props: BackdropComposerProps): import("react").JSX.Element;
+export {};

package/dist/components/Backdrop/BackdropConversation.js

@@ -0,0 +1,76 @@
+import { jsxs as i, jsx as a } from "react/jsx-runtime";
+import { useId as A } from "react";
+import e from "./BackdropConversation.module.css.js";
+import { cx as c } from "./cx.js";
+import { BackdropIconButton as C, BackdropButton as D } from "./BackdropButton.js";
+import { BackdropTextarea as H } from "./BackdropFields.js";
+function K({ label: n, children: s, className: o, tabIndex: l = 0, ...r }) {
+  return /* @__PURE__ */ a("div", { role: "log", "aria-label": n, tabIndex: l, className: c(e.thread, o), ...r, children: /* @__PURE__ */ a("div", { className: e.threadInner, children: s }) });
+}
+function O({ direction: n = "incoming", children: s, caption: o, leading: l, className: r, ...d }) {
+  return /* @__PURE__ */ i("div", { className: c(e.message, n === "outgoing" ? e.outgoing : e.incoming, r), ...d, children: [
+    l != null && /* @__PURE__ */ a("span", { className: e.messageLeading, "aria-hidden": "true", children: l }),
+    /* @__PURE__ */ i("div", { className: e.messageBody, children: [
+      /* @__PURE__ */ a("div", { className: e.bubble, children: s }),
+      o != null && /* @__PURE__ */ a("p", { className: e.caption, children: o })
+    ] })
+  ] });
+}
+function P({ children: n, className: s, ...o }) {
+  return /* @__PURE__ */ a("div", { className: c(e.day, s), ...o, children: /* @__PURE__ */ a("span", { children: n }) });
+}
+function M(...n) {
+  const s = n.filter(Boolean).join(" ");
+  return s === "" ? void 0 : s;
+}
+function f({ children: n, label: s }) {
+  return /* @__PURE__ */ a("div", { role: s !== void 0 ? "group" : void 0, "aria-label": s, className: e.suggestions, children: n });
+}
+function Q(n) {
+  const s = A();
+  if (n.look === "ask") {
+    const { look: x, label: L, sendLabel: j, sendIcon: S, suggestions: v, suggestionsLabel: T, className: $, ...z } = n;
+    return /* @__PURE__ */ i("div", { "data-look": x, className: c(e.composer, $), children: [
+      v != null && /* @__PURE__ */ a(f, { label: T, children: v }),
+      /* @__PURE__ */ i("div", { className: e.askBox, children: [
+        /* @__PURE__ */ a("input", { type: "text", "aria-label": L, ...z, className: e.askInput }),
+        /* @__PURE__ */ a(C, { type: "submit", variant: "ink", size: "sm", label: j, icon: S })
+      ] })
+    ] });
+  }
+  const {
+    look: o = "reply",
+    label: l,
+    sendLabel: r,
+    sendIcon: d,
+    suggestions: t,
+    suggestionsLabel: y,
+    heading: m,
+    headingIcon: u,
+    secondaryAction: B,
+    note: g,
+    className: I,
+    ...p
+  } = n, h = `${s}-heading`, b = `${s}-note`, N = m != null, k = g != null;
+  return /* @__PURE__ */ i("div", { "data-look": o, className: c(e.composer, I), children: [
+    N && /* @__PURE__ */ i("p", { id: h, className: e.heading, children: [
+      u != null && /* @__PURE__ */ a("span", { className: e.headingIcon, "aria-hidden": "true", children: u }),
+      /* @__PURE__ */ a("span", { children: m })
+    ] }),
+    /* @__PURE__ */ a(H, { "aria-label": l, ...p, "aria-describedby": M(N && h, p["aria-describedby"]) }),
+    t != null && /* @__PURE__ */ a(f, { label: y, children: t }),
+    /* @__PURE__ */ i("div", { className: e.footer, children: [
+      B,
+      /* @__PURE__ */ a("span", { className: e.spacer }),
+      k && /* @__PURE__ */ a("span", { id: b, className: e.note, children: g }),
+      /* @__PURE__ */ a(D, { type: "submit", variant: "primary", icon: d, "aria-describedby": k ? b : void 0, children: r })
+    ] })
+  ] });
+}
+export {
+  Q as BackdropComposer,
+  P as BackdropDaySeparator,
+  O as BackdropMessage,
+  K as BackdropThread
+};
+//# sourceMappingURL=BackdropConversation.js.map

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