@boost33/ui 0.8.1 → 0.9.0

package/dist/components/Backdrop/BackdropFlows.js

@@ -0,0 +1,156 @@
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import { useId as g } from "react";
+import l from "./BackdropFlows.module.css.js";
+import { cx as b } from "./cx.js";
+import { Close as w } from "./icons.js";
+import { BackdropIconButton as B, BackdropButton as v } from "./BackdropButton.js";
+import { BackdropPageHeader as S, BackdropCard as C, BackdropSectionHeader as z } from "./BackdropPage.js";
+import { BackdropIconTile as I } from "./BackdropDisplay.js";
+import { BackdropStepList as D } from "./BackdropGlobalPanels.js";
+function P({
+  label: s,
+  description: r,
+  htmlFor: n,
+  children: o,
+  action: a,
+  layout: t = "columns",
+  align: c = "center",
+  linkComponent: i,
+  className: h,
+  ...f
+}) {
+  const m = g(), u = n !== void 0, N = `${m}-label`, k = r != null ? u ? `${n}-description` : `${m}-description` : void 0, p = u ? "label" : "span";
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      role: u ? void 0 : "group",
+      "aria-labelledby": u ? void 0 : N,
+      "aria-describedby": u ? void 0 : k,
+      className: b(l.row, t === "stacked" ? l.rowStacked : l.rowColumns, c === "start" && l.rowStart, h),
+      ...f,
+      children: [
+        /* @__PURE__ */ d("div", { className: l.rowLabelColumn, children: [
+          /* @__PURE__ */ e(p, { id: N, htmlFor: n, className: l.rowLabel, children: s }),
+          r != null && /* @__PURE__ */ e("span", { id: k, className: l.rowDescription, children: r })
+        ] }),
+        o != null && /* @__PURE__ */ e("div", { className: l.rowControl, children: o }),
+        a && /* @__PURE__ */ e("div", { className: l.rowAction, children: /* @__PURE__ */ e(v, { variant: "outline", size: "lg", href: a.href, linkComponent: i, onClick: a.onClick, children: a.label }) })
+      ]
+    }
+  );
+}
+function T({
+  title: s,
+  description: r,
+  action: n,
+  level: o = 2,
+  children: a,
+  linkComponent: t,
+  className: c,
+  ...i
+}) {
+  const h = g();
+  return /* @__PURE__ */ d("section", { "aria-labelledby": h, className: b(l.settingsSection, c), ...i, children: [
+    /* @__PURE__ */ d("div", { className: l.settingsSectionHead, children: [
+      /* @__PURE__ */ e(z, { label: s, level: o, action: n, headingId: h, linkComponent: t }),
+      r != null && /* @__PURE__ */ e("p", { className: l.settingsSectionDescription, children: r })
+    ] }),
+    /* @__PURE__ */ e("div", { className: l.settingsSectionRows, children: a })
+  ] });
+}
+function V({
+  cancel: s,
+  save: r,
+  emphasis: n = "ink",
+  status: o,
+  busy: a = !1,
+  saveDisabled: t = !1,
+  appearance: c = "bar",
+  sticky: i = !1,
+  linkComponent: h,
+  className: f
+}) {
+  const m = c === "bar";
+  return /* @__PURE__ */ d("div", { className: b(l.footer, m && l.footerBar, m && i && l.footerSticky, f), children: [
+    o != null && /* @__PURE__ */ e("span", { className: l.footerStatus, children: o }),
+    /* @__PURE__ */ d("div", { className: l.footerButtons, children: [
+      /* @__PURE__ */ e(v, { variant: "ghost", size: "lg", href: s.href, linkComponent: h, onClick: s.onClick, children: s.label }),
+      /* @__PURE__ */ e(
+        v,
+        {
+          variant: n,
+          size: "lg",
+          loading: a,
+          disabled: t || void 0,
+          href: r.href,
+          linkComponent: h,
+          onClick: r.onClick,
+          children: r.label
+        }
+      )
+    ] })
+  ] });
+}
+function q({
+  mark: s,
+  flowName: r,
+  steps: n,
+  stepsLabel: o,
+  stepText: a,
+  title: t,
+  description: c,
+  exitLabel: i,
+  className: h
+}) {
+  return /* @__PURE__ */ d("div", { className: b(l.flow, h), children: [
+    /* @__PURE__ */ d("div", { className: l.flowBar, children: [
+      /* @__PURE__ */ d("div", { className: l.flowIdentity, children: [
+        s != null && /* @__PURE__ */ e("span", { className: l.flowMark, "aria-hidden": "true", children: s }),
+        /* @__PURE__ */ e("span", { className: l.flowName, children: r })
+      ] }),
+      n && n.length > 0 && o !== void 0 && /* @__PURE__ */ e("div", { className: l.flowSteps, children: /* @__PURE__ */ e(D, { steps: n, label: o, orientation: "horizontal" }) }),
+      /* @__PURE__ */ e("div", { className: l.flowExit, children: i && /* @__PURE__ */ e(B, { label: i, icon: /* @__PURE__ */ e(w, {}), size: "md", tooltip: !1 }) })
+    ] }),
+    (t != null || a != null) && /* @__PURE__ */ d("div", { className: l.flowHeading, children: [
+      a != null && /* @__PURE__ */ e("p", { className: l.flowStepText, children: a }),
+      t != null && /* @__PURE__ */ e(S, { size: "hero", title: t, fact: c })
+    ] })
+  ] });
+}
+function F({
+  tone: s = "neutral",
+  icon: r,
+  title: n,
+  body: o,
+  details: a,
+  detailsLabel: t,
+  primaryAction: c,
+  secondaryAction: i,
+  headingLevel: h = 1,
+  linkComponent: f,
+  className: m,
+  ...u
+}) {
+  const N = g(), k = h === 2 ? "h2" : "h1";
+  return /* @__PURE__ */ d("section", { "aria-labelledby": N, className: b(l.result, m), "data-tone": s, ...u, children: [
+    /* @__PURE__ */ e(I, { size: "empty", shape: "circle", tone: s, className: l.resultIcon, children: r }),
+    /* @__PURE__ */ e(k, { id: N, className: l.resultTitle, children: n }),
+    o != null && /* @__PURE__ */ e("p", { className: l.resultBody, children: o }),
+    a && a.length > 0 && /* @__PURE__ */ e(C, { surface: "flat", padding: "md", className: l.resultCard, children: /* @__PURE__ */ e("dl", { className: l.resultDetails, "aria-label": t, children: a.map((p) => /* @__PURE__ */ d("div", { className: l.resultDetail, children: [
+      /* @__PURE__ */ e("dt", { className: l.resultDetailLabel, children: p.label }),
+      /* @__PURE__ */ e("dd", { className: l.resultDetailValue, children: p.value })
+    ] }, p.key)) }) }),
+    (c || i) && /* @__PURE__ */ d("div", { className: l.resultActions, children: [
+      c && /* @__PURE__ */ e(v, { variant: "primary", size: "lg", href: c.href, linkComponent: f, onClick: c.onClick, children: c.label }),
+      i && /* @__PURE__ */ e(v, { variant: "outline", size: "lg", href: i.href, linkComponent: f, onClick: i.onClick, children: i.label })
+    ] })
+  ] });
+}
+export {
+  q as BackdropFlowHeader,
+  F as BackdropResult,
+  V as BackdropSaveFooter,
+  P as BackdropSettingsRow,
+  T as BackdropSettingsSection
+};
+//# sourceMappingURL=BackdropFlows.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BackdropFlows.js","sources":["../../../src/components/Backdrop/BackdropFlows.tsx"],"sourcesContent":["import { useId, type ElementType, type HTMLAttributes, type ReactNode } from 'react'\nimport styles from './BackdropFlows.module.css'\nimport { cx } from './cx'\nimport { Close } from './icons'\nimport { BackdropButton, BackdropIconButton } from './BackdropButton'\nimport { BackdropCard, BackdropPageHeader, BackdropSectionHeader, type BackdropPageAction } from './BackdropPage'\nimport { BackdropIconTile } from './BackdropDisplay'\nimport { BackdropStepList, type BackdropStep } from './BackdropGlobalPanels'\n\n/*\n * Batch 2 · Flows (N14–N16). Stage A: static and presentational. No state and\n * no event handler of its own: every action takes the package's one action\n * shape ({ label, onClick?, href? }, as BackdropNextStepCard and\n * BackdropAvailability do), so Stage B wires them all the same way.\n *\n *   Settings row      a label column beside a control column, on a ruled row.\n *   Settings section  a titled group of rows, headed by BackdropSectionHeader.\n *   Save footer       Cancel / Save, as a bar (optionally sticky) or bare for\n *                     BackdropDialog's own footer slot.\n *   Flow header       the bar across a multi-step setup: the app's mark and the\n *                     flow's name, the stepper (BackdropStepList horizontal),\n *                     an exit button; then \"Step N of M\" and the step's title.\n *   Result            the centred outcome after an action: a toned circle\n *                     (BackdropIconTile), a title, one line, an optional\n *                     key-value card (BackdropCard), up to two actions.\n *\n * Every visible word is a prop: the package holds no copy (tests/no-hardcoded-\n * strings.test.ts). Controls are not built here; a row takes any control as\n * its children.\n */\n\n/* ── Settings row (N14) ─────────────────────────────────────────────────── */\n\n/**\n * `columns` (default): the label in a 200px column beside the control\n * (--backdrop-settings-label-width). `stacked`: the label above the control,\n * for a container too narrow for a column (a 480px form dialog).\n */\nexport type BackdropSettingsRowLayout = 'columns' | 'stacked'\n\nexport interface BackdropSettingsRowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {\n  /** The setting's name: \"Daily limit\". 15/22, semibold. */\n  label: ReactNode\n  /** One line under the name: \"Messages sent per channel each day.\" 14/20, muted. */\n  description?: ReactNode\n  /**\n   * The id of the control this row labels. With it the name renders as a\n   * `<label htmlFor>`, so a native control is named by it, and the row is not\n   * also a group (the name would be read twice). The description's id is then\n   * `${htmlFor}-description`, for the control's `aria-describedby`. Without it\n   * the name is a plain span and the row names itself as a group, described\n   * by the description.\n   */\n  htmlFor?: string\n  /** The control: an input, a select, a switch, a value. */\n  children?: ReactNode\n  /** One trailing action after the control: \"Change\", \"Disconnect\". An outline button at 34px. */\n  action?: BackdropPageAction\n  layout?: BackdropSettingsRowLayout\n  /**\n   * `center` (default) centres the label on the control, right for a 40px\n   * input or a switch. `start` tops them, for a tall control (a text area).\n   */\n  align?: 'center' | 'start'\n  linkComponent?: ElementType\n}\n\n/*\n * Without `htmlFor` the row is a group named by its label and described by its\n * description, so the setting reads whole whatever the control is (a switch\n * with its own name, a value, a segmented control). With it, the label names\n * the native control directly. Rows separate with a\n * hairline in --backdrop-line (ADR-0017, D8), drawn between rows only.\n */\nexport function BackdropSettingsRow({\n  label,\n  description,\n  htmlFor,\n  children,\n  action,\n  layout = 'columns',\n  align = 'center',\n  linkComponent,\n  className,\n  ...rest\n}: BackdropSettingsRowProps) {\n  const id = useId()\n  const labelsControl = htmlFor !== undefined\n  const labelId = `${id}-label`\n  const descriptionId = description != null ? (labelsControl ? `${htmlFor}-description` : `${id}-description`) : undefined\n  const Name = labelsControl ? 'label' : 'span'\n  return (\n    <div\n      role={labelsControl ? undefined : 'group'}\n      aria-labelledby={labelsControl ? undefined : labelId}\n      aria-describedby={labelsControl ? undefined : descriptionId}\n      className={cx(styles.row, layout === 'stacked' ? styles.rowStacked : styles.rowColumns, align === 'start' && styles.rowStart, className)}\n      {...rest}\n    >\n      <div className={styles.rowLabelColumn}>\n        <Name id={labelId} htmlFor={htmlFor} className={styles.rowLabel}>\n          {label}\n        </Name>\n        {description != null && (\n          <span id={descriptionId} className={styles.rowDescription}>\n            {description}\n          </span>\n        )}\n      </div>\n      {children != null && <div className={styles.rowControl}>{children}</div>}\n      {action && (\n        <div className={styles.rowAction}>\n          <BackdropButton variant=\"outline\" size=\"lg\" href={action.href} linkComponent={linkComponent} onClick={action.onClick}>\n            {action.label}\n          </BackdropButton>\n        </div>\n      )}\n    </div>\n  )\n}\n\n/* ── Settings section (N14) ─────────────────────────────────────────────── */\n\nexport interface BackdropSettingsSectionProps extends Omit<HTMLAttributes<HTMLElement>, 'title' | 'children'> {\n  /** The section's name: \"Sending\". Drawn by BackdropSectionHeader. */\n  title: ReactNode\n  /** One line under the name: \"Added to the end of every email.\" 14/20, muted. */\n  description?: ReactNode\n  /** A trailing link in the header: \"Reset to defaults\". */\n  action?: BackdropPageAction\n  /** 2 under a page title (default), 3 inside a settings dialog, whose title is the h2. Size does not change. */\n  level?: 2 | 3\n  /** BackdropSettingsRow elements. */\n  children: ReactNode\n  linkComponent?: ElementType\n}\n\n/** A `<section>` named by its heading, holding a run of ruled rows. */\nexport function BackdropSettingsSection({\n  title,\n  description,\n  action,\n  level = 2,\n  children,\n  linkComponent,\n  className,\n  ...rest\n}: BackdropSettingsSectionProps) {\n  const headingId = useId()\n  return (\n    <section aria-labelledby={headingId} className={cx(styles.settingsSection, className)} {...rest}>\n      <div className={styles.settingsSectionHead}>\n        <BackdropSectionHeader label={title} level={level} action={action} headingId={headingId} linkComponent={linkComponent} />\n        {description != null && <p className={styles.settingsSectionDescription}>{description}</p>}\n      </div>\n      <div className={styles.settingsSectionRows}>{children}</div>\n    </section>\n  )\n}\n\n/* ── Save footer (N14) ──────────────────────────────────────────────────── */\n\nexport interface BackdropSaveFooterProps {\n  /** \"Cancel\": a ghost button. */\n  cancel: BackdropPageAction\n  /** \"Save\": ink by default, the primary inside a dialog. */\n  save: BackdropPageAction\n  /**\n   * `ink` (default) as in a dialog. `primary` is the screen's one orange\n   * action, for a settings page with no other primary on it.\n   */\n  emphasis?: 'ink' | 'primary'\n  /** A short fact at the start of the bar: \"Unsaved changes\". Muted. */\n  status?: ReactNode\n  /** The save is in progress: Save shows the button's spinner and `aria-busy`. */\n  busy?: boolean\n  /** Nothing to save yet. */\n  saveDisabled?: boolean\n  /**\n   * `bar` (default): its own white bar with a hairline above, padded 16 / 24.\n   * `plain`: the two buttons only, to pass as BackdropDialog's `footer`, which\n   * draws the bar itself.\n   */\n  appearance?: 'bar' | 'plain'\n  /** `bar` only: stick to the bottom of the scrolling container. */\n  sticky?: boolean\n  linkComponent?: ElementType\n  className?: string\n}\n\nexport function BackdropSaveFooter({\n  cancel,\n  save,\n  emphasis = 'ink',\n  status,\n  busy = false,\n  saveDisabled = false,\n  appearance = 'bar',\n  sticky = false,\n  linkComponent,\n  className,\n}: BackdropSaveFooterProps) {\n  const bar = appearance === 'bar'\n  return (\n    <div className={cx(styles.footer, bar && styles.footerBar, bar && sticky && styles.footerSticky, className)}>\n      {status != null && <span className={styles.footerStatus}>{status}</span>}\n      <div className={styles.footerButtons}>\n        <BackdropButton variant=\"ghost\" size=\"lg\" href={cancel.href} linkComponent={linkComponent} onClick={cancel.onClick}>\n          {cancel.label}\n        </BackdropButton>\n        <BackdropButton\n          variant={emphasis}\n          size=\"lg\"\n          loading={busy}\n          disabled={saveDisabled || undefined}\n          href={save.href}\n          linkComponent={linkComponent}\n          onClick={save.onClick}\n        >\n          {save.label}\n        </BackdropButton>\n      </div>\n    </div>\n  )\n}\n\n/* ── Flow header (N15) ──────────────────────────────────────────────────── */\n\nexport interface BackdropFlowHeaderProps {\n  /** The app's 32px mark. Decorative: the flow's name follows it. */\n  mark?: ReactNode\n  /** The flow's name: \"Outbound setup\". */\n  flowName: ReactNode\n  /** The steps, drawn by BackdropStepList as the horizontal stepper in the bar's middle. */\n  steps?: BackdropStep[]\n  /** The stepper's accessible name (\"Setup steps\"). Required with `steps`. */\n  stepsLabel?: string\n  /** The position, formatted by the caller: \"Step 2 of 4\". Above the title. */\n  stepText?: ReactNode\n  /** The step's title. The page's one h1, at the 40px focus-flow size (ADR-0017, D1). */\n  title?: ReactNode\n  /** One line under the title. */\n  description?: ReactNode\n  /** The exit button's name (\"Exit setup\"). Omit to draw no exit. Stage B wires it. */\n  exitLabel?: string\n  className?: string\n}\n\n/*\n * Two parts, each optional after the bar: the bar (mark, name, stepper, exit)\n * with a hairline below, and the step's heading under it. The heading is\n * BackdropPageHeader at size `hero`, so the focus flow's title exists once.\n */\nexport function BackdropFlowHeader({\n  mark,\n  flowName,\n  steps,\n  stepsLabel,\n  stepText,\n  title,\n  description,\n  exitLabel,\n  className,\n}: BackdropFlowHeaderProps) {\n  return (\n    <div className={cx(styles.flow, className)}>\n      <div className={styles.flowBar}>\n        <div className={styles.flowIdentity}>\n          {mark != null && (\n            <span className={styles.flowMark} aria-hidden=\"true\">\n              {mark}\n            </span>\n          )}\n          <span className={styles.flowName}>{flowName}</span>\n        </div>\n        {steps && steps.length > 0 && stepsLabel !== undefined && (\n          <div className={styles.flowSteps}>\n            <BackdropStepList steps={steps} label={stepsLabel} orientation=\"horizontal\" />\n          </div>\n        )}\n        <div className={styles.flowExit}>{exitLabel && <BackdropIconButton label={exitLabel} icon={<Close />} size=\"md\" tooltip={false} />}</div>\n      </div>\n      {(title != null || stepText != null) && (\n        <div className={styles.flowHeading}>\n          {stepText != null && <p className={styles.flowStepText}>{stepText}</p>}\n          {title != null && <BackdropPageHeader size=\"hero\" title={title} fact={description} />}\n        </div>\n      )}\n    </div>\n  )\n}\n\n/* ── Result (N16) ───────────────────────────────────────────────────────── */\n\n/** The outcome's tone, in the status pill's colours (ADR-0017, D7). */\nexport type BackdropResultTone = 'success' | 'danger' | 'neutral'\n\n/** One line of the details card: \"Amount\" · \"€1,200.00\". */\nexport interface BackdropResultDetail {\n  key: string\n  label: ReactNode\n  value: ReactNode\n}\n\nexport interface BackdropResultProps extends Omit<HTMLAttributes<HTMLElement>, 'title' | 'children'> {\n  tone?: BackdropResultTone\n  /** 20px (ADR-0017, D17), drawn in the 48px circle: a check, a cross, an hourglass. Decorative. */\n  icon: ReactNode\n  /** \"Payment received\". The page's h1 by default. */\n  title: ReactNode\n  /** One line: \"€1,200 is now in your wallet.\" */\n  body?: ReactNode\n  /** Key-value lines in a flat card under the body. */\n  details?: BackdropResultDetail[]\n  /** The details list's accessible name (\"Payment details\"). */\n  detailsLabel?: string\n  /** The main next step: the screen's orange button. */\n  primaryAction?: BackdropPageAction\n  /** A second, quieter step: an outline button after the first. */\n  secondaryAction?: BackdropPageAction\n  /** 1 (default) on its own page; 2 inside a dialog or under another title. Size does not change. */\n  headingLevel?: 1 | 2\n  linkComponent?: ElementType\n}\n\n/*\n * The empty state's shape (D12), grown for an outcome: the 48px tile drawn as\n * a toned circle, the page title's size, a card of facts, two actions. A\n * static region: the outcome is the page, not an announcement over it.\n */\nexport function BackdropResult({\n  tone = 'neutral',\n  icon,\n  title,\n  body,\n  details,\n  detailsLabel,\n  primaryAction,\n  secondaryAction,\n  headingLevel = 1,\n  linkComponent,\n  className,\n  ...rest\n}: BackdropResultProps) {\n  const headingId = useId()\n  const Heading = headingLevel === 2 ? 'h2' : 'h1'\n  return (\n    <section aria-labelledby={headingId} className={cx(styles.result, className)} data-tone={tone} {...rest}>\n      <BackdropIconTile size=\"empty\" shape=\"circle\" tone={tone} className={styles.resultIcon}>\n        {icon}\n      </BackdropIconTile>\n      <Heading id={headingId} className={styles.resultTitle}>\n        {title}\n      </Heading>\n      {body != null && <p className={styles.resultBody}>{body}</p>}\n      {details && details.length > 0 && (\n        <BackdropCard surface=\"flat\" padding=\"md\" className={styles.resultCard}>\n          <dl className={styles.resultDetails} aria-label={detailsLabel}>\n            {details.map((detail) => (\n              <div key={detail.key} className={styles.resultDetail}>\n                <dt className={styles.resultDetailLabel}>{detail.label}</dt>\n                <dd className={styles.resultDetailValue}>{detail.value}</dd>\n              </div>\n            ))}\n          </dl>\n        </BackdropCard>\n      )}\n      {(primaryAction || secondaryAction) && (\n        <div className={styles.resultActions}>\n          {primaryAction && (\n            <BackdropButton variant=\"primary\" size=\"lg\" href={primaryAction.href} linkComponent={linkComponent} onClick={primaryAction.onClick}>\n              {primaryAction.label}\n            </BackdropButton>\n          )}\n          {secondaryAction && (\n            <BackdropButton variant=\"outline\" size=\"lg\" href={secondaryAction.href} linkComponent={linkComponent} onClick={secondaryAction.onClick}>\n              {secondaryAction.label}\n            </BackdropButton>\n          )}\n        </div>\n      )}\n    </section>\n  )\n}\n"],"names":["BackdropSettingsRow","label","description","htmlFor","children","action","layout","align","linkComponent","className","rest","id","useId","labelsControl","labelId","descriptionId","Name","jsxs","cx","styles","jsx","BackdropButton","BackdropSettingsSection","title","level","headingId","BackdropSectionHeader","BackdropSaveFooter","cancel","save","emphasis","status","busy","saveDisabled","appearance","sticky","bar","BackdropFlowHeader","mark","flowName","steps","stepsLabel","stepText","exitLabel","BackdropStepList","BackdropIconButton","Close","BackdropPageHeader","BackdropResult","tone","icon","body","details","detailsLabel","primaryAction","secondaryAction","headingLevel","Heading","BackdropIconTile","BackdropCard","detail"],"mappings":"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"}

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

@@ -0,0 +1,80 @@
+const t = "_row_1nkyt_15", o = "_rowColumns_1nkyt_28", n = "_rowLabelColumn_1nkyt_32", e = "_rowStart_1nkyt_37", s = "_rowStacked_1nkyt_47", _ = "_rowLabel_1nkyt_32", r = "_rowDescription_1nkyt_66", l = "_rowControl_1nkyt_72", c = "_rowAction_1nkyt_84", i = "_settingsSection_1nkyt_95", w = "_settingsSectionHead_1nkyt_103", a = "_settingsSectionDescription_1nkyt_109", y = "_settingsSectionRows_1nkyt_116", k = "_footer_1nkyt_123", u = "_footerBar_1nkyt_133", f = "_footerSticky_1nkyt_139", S = "_footerStatus_1nkyt_145", d = "_footerButtons_1nkyt_153", D = "_flow_1nkyt_161", g = "_flowBar_1nkyt_170", p = "_flowIdentity_1nkyt_180", B = "_flowExit_1nkyt_181", C = "_flowMark_1nkyt_196", b = "_flowName_1nkyt_201", m = "_flowSteps_1nkyt_210", L = "_flowHeading_1nkyt_216", x = "_flowStepText_1nkyt_223", A = "_result_1nkyt_234", H = "_resultIcon_1nkyt_248", I = "_resultTitle_1nkyt_258", T = "_resultBody_1nkyt_267", E = "_resultCard_1nkyt_274", M = "_resultDetails_1nkyt_281", N = "_resultDetail_1nkyt_281", R = "_resultDetailLabel_1nkyt_297", V = "_resultDetailValue_1nkyt_301", h = "_resultActions_1nkyt_308", j = {
+  row: t,
+  rowColumns: o,
+  rowLabelColumn: n,
+  rowStart: e,
+  rowStacked: s,
+  rowLabel: _,
+  rowDescription: r,
+  rowControl: l,
+  rowAction: c,
+  settingsSection: i,
+  settingsSectionHead: w,
+  settingsSectionDescription: a,
+  settingsSectionRows: y,
+  footer: k,
+  footerBar: u,
+  footerSticky: f,
+  footerStatus: S,
+  footerButtons: d,
+  flow: D,
+  flowBar: g,
+  flowIdentity: p,
+  flowExit: B,
+  flowMark: C,
+  flowName: b,
+  flowSteps: m,
+  flowHeading: L,
+  flowStepText: x,
+  result: A,
+  resultIcon: H,
+  resultTitle: I,
+  resultBody: T,
+  resultCard: E,
+  resultDetails: M,
+  resultDetail: N,
+  resultDetailLabel: R,
+  resultDetailValue: V,
+  resultActions: h
+};
+export {
+  j as default,
+  D as flow,
+  g as flowBar,
+  B as flowExit,
+  L as flowHeading,
+  p as flowIdentity,
+  C as flowMark,
+  b as flowName,
+  x as flowStepText,
+  m as flowSteps,
+  k as footer,
+  u as footerBar,
+  d as footerButtons,
+  S as footerStatus,
+  f as footerSticky,
+  A as result,
+  h as resultActions,
+  T as resultBody,
+  E as resultCard,
+  N as resultDetail,
+  R as resultDetailLabel,
+  V as resultDetailValue,
+  M as resultDetails,
+  H as resultIcon,
+  I as resultTitle,
+  t as row,
+  c as rowAction,
+  o as rowColumns,
+  l as rowControl,
+  r as rowDescription,
+  _ as rowLabel,
+  n as rowLabelColumn,
+  s as rowStacked,
+  e as rowStart,
+  i as settingsSection,
+  a as settingsSectionDescription,
+  w as settingsSectionHead,
+  y as settingsSectionRows
+};
+//# sourceMappingURL=BackdropFlows.module.css.js.map

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

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

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

@@ -0,0 +1,36 @@
+import { CSSProperties, ReactNode } from 'react';
+export type BackdropTheme = 'black' | 'light';
+export interface BackdropFrameProps {
+    /**
+     * The frame's colour. Only the frame differs between the two: the rail, the
+     * strip and the edge of the sheet that sits on the frame. Everything on a
+     * white sheet is identical in both. Omit it to inherit the theme from an
+     * ancestor's `data-backdrop-theme` (black when there is none).
+     */
+    theme?: BackdropTheme;
+    /** Layer 3, across the top: a BackdropTopStrip. */
+    strip: ReactNode;
+    /** Layer 3, down the left: a BackdropRail. */
+    rail: ReactNode;
+    /**
+     * What sits on the frame: a BackdropHubSheet on the hub and global pages, or
+     * a BackdropAppLayer (menu sheet holding the content sheet) inside an app.
+     */
+    children: ReactNode;
+    /**
+     * Overlays drawn over the whole frame: an open popover, a dialog, toasts.
+     * They are positioned against the frame, so a story or a screenshot shows
+     * them in place without a portal.
+     */
+    overlays?: ReactNode;
+    /**
+     * The narrow layout: rail items icon-only with tooltips, the app menu folded
+     * to its icon strip, Search 280px. `auto` (default) switches below 1200px of
+     * viewport; `true`/`false` force it, for a fixed-size story or a host that
+     * decides by its own measure.
+     */
+    compact?: boolean | 'auto';
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function BackdropFrame({ theme, strip, rail, children, overlays, compact, className, style }: BackdropFrameProps): import("react").JSX.Element;

package/dist/components/Backdrop/BackdropFrame.js

@@ -0,0 +1,15 @@
+import { jsxs as l, jsx as r } from "react/jsx-runtime";
+import a from "./BackdropFrame.module.css.js";
+import { cx as p } from "./cx.js";
+function x({ theme: e, strip: s, rail: m, children: t, overlays: c, compact: i = "auto", className: o, style: d }) {
+  return /* @__PURE__ */ l("div", { className: p(a.frame, o), "data-backdrop-theme": e, "data-backdrop-compact": String(i), style: d, children: [
+    /* @__PURE__ */ r("div", { className: a.strip, children: s }),
+    /* @__PURE__ */ r("div", { className: a.rail, children: m }),
+    /* @__PURE__ */ r("main", { className: a.sheets, children: t }),
+    c
+  ] });
+}
+export {
+  x as BackdropFrame
+};
+//# sourceMappingURL=BackdropFrame.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BackdropFrame.js","sources":["../../../src/components/Backdrop/BackdropFrame.tsx"],"sourcesContent":["import type { CSSProperties, ReactNode } from 'react'\nimport styles from './BackdropFrame.module.css'\nimport { cx } from './cx'\n\nexport type BackdropTheme = 'black' | 'light'\n\nexport interface BackdropFrameProps {\n  /**\n   * The frame's colour. Only the frame differs between the two: the rail, the\n   * strip and the edge of the sheet that sits on the frame. Everything on a\n   * white sheet is identical in both. Omit it to inherit the theme from an\n   * ancestor's `data-backdrop-theme` (black when there is none).\n   */\n  theme?: BackdropTheme\n  /** Layer 3, across the top: a BackdropTopStrip. */\n  strip: ReactNode\n  /** Layer 3, down the left: a BackdropRail. */\n  rail: ReactNode\n  /**\n   * What sits on the frame: a BackdropHubSheet on the hub and global pages, or\n   * a BackdropAppLayer (menu sheet holding the content sheet) inside an app.\n   */\n  children: ReactNode\n  /**\n   * Overlays drawn over the whole frame: an open popover, a dialog, toasts.\n   * They are positioned against the frame, so a story or a screenshot shows\n   * them in place without a portal.\n   */\n  overlays?: ReactNode\n  /**\n   * The narrow layout: rail items icon-only with tooltips, the app menu folded\n   * to its icon strip, Search 280px. `auto` (default) switches below 1200px of\n   * viewport; `true`/`false` force it, for a fixed-size story or a host that\n   * decides by its own measure.\n   */\n  compact?: boolean | 'auto'\n  className?: string\n  style?: CSSProperties\n}\n\n/*\n * Backdrop's layer 3: the black (or light) frame every Boost33 screen sits in.\n * A grid of three areas -- the 60px strip, the 76px rail, and the sheet area --\n * and nothing else. The sheets own their own insets from the frame edge, because\n * the hub sheet runs off the bottom (no bottom gutter) and the app menu sheet\n * does not (round 4, \"DECISION AFTER THE FRAME TEST\").\n *\n * Fills its container. Give the container a height (100dvh in an app; a fixed\n * artboard size in a story).\n */\nexport function BackdropFrame({ theme, strip, rail, children, overlays, compact = 'auto', className, style }: BackdropFrameProps) {\n  return (\n    <div className={cx(styles.frame, className)} data-backdrop-theme={theme} data-backdrop-compact={String(compact)} style={style}>\n      <div className={styles.strip}>{strip}</div>\n      <div className={styles.rail}>{rail}</div>\n      <main className={styles.sheets}>{children}</main>\n      {overlays}\n    </div>\n  )\n}\n"],"names":["BackdropFrame","theme","strip","rail","children","overlays","compact","className","style","jsxs","cx","styles","jsx"],"mappings":";;;AAkDO,SAASA,EAAc,EAAE,OAAAC,GAAO,OAAAC,GAAO,MAAAC,GAAM,UAAAC,GAAU,UAAAC,GAAU,SAAAC,IAAU,QAAQ,WAAAC,GAAW,OAAAC,EAAA,GAA6B;AAChI,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAWC,EAAGC,EAAO,OAAOJ,CAAS,GAAG,uBAAqBN,GAAO,yBAAuB,OAAOK,CAAO,GAAG,OAAAE,GAC/G,UAAA;AAAA,IAAA,gBAAAI,EAAC,OAAA,EAAI,WAAWD,EAAO,OAAQ,UAAAT,GAAM;AAAA,IACrC,gBAAAU,EAAC,OAAA,EAAI,WAAWD,EAAO,MAAO,UAAAR,GAAK;AAAA,IACnC,gBAAAS,EAAC,QAAA,EAAK,WAAWD,EAAO,QAAS,UAAAP,GAAS;AAAA,IACzCC;AAAA,EAAA,GACH;AAEJ;"}

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

@@ -0,0 +1,14 @@
+const s = "_frame_1kx6d_3", t = "_strip_1kx6d_22", e = "_rail_1kx6d_27", _ = "_sheets_1kx6d_32", r = {
+  frame: s,
+  strip: t,
+  rail: e,
+  sheets: _
+};
+export {
+  r as default,
+  s as frame,
+  e as rail,
+  _ as sheets,
+  t as strip
+};
+//# sourceMappingURL=BackdropFrame.module.css.js.map

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

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

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

@@ -0,0 +1,272 @@
+import { ElementType, InputHTMLAttributes, ReactNode } from 'react';
+import { BackdropMenuRow } from './BackdropOverlays';
+export interface BackdropAccountMenuProps {
+    person: {
+        name: string;
+        organisation?: string;
+        email?: string;
+    };
+    /**
+     * An optional group above the settings rows, under its own divider (the Hub
+     * draws one row there: a link to the organisation's public profile). Omit
+     * it and the menu is unchanged.
+     */
+    topGroup?: BackdropMenuRow[];
+    /** Profile, Company, Team, Billing and tokens, the Language row. */
+    rows: BackdropMenuRow[];
+    /** Sign out, under its own divider. */
+    signOut: BackdropMenuRow;
+    /** The panel's accessible name. */
+    label: string;
+    linkComponent?: ElementType;
+}
+export declare function BackdropAccountMenu({ person, topGroup, rows, signOut, label, linkComponent }: BackdropAccountMenuProps): import("react").JSX.Element;
+/** `default` 6px full width; `thin` 4px full width; `mini` 6px and 56px wide, inline in a row. */
+export type BackdropProgressSize = 'default' | 'thin' | 'mini';
+/** `ink` for progress; `success` only where the bar itself reports a good outcome. Never orange. */
+export type BackdropProgressTone = 'ink' | 'success';
+export interface BackdropProgressPart {
+    key: string;
+    /** 0–1, this part's share of the whole bar. */
+    share: number;
+    /** The legend line: "<b>710 granted</b> · resets 1 Dec". The words carry the meaning, not the swatch. */
+    legend: ReactNode;
+}
+export interface BackdropProgressProps {
+    /** 0–1. Ignored when `segments` or `parts` is given. */
+    value: number;
+    /** The bar's name, e.g. "Outbound, 220 of 310". */
+    label: string;
+    size?: BackdropProgressSize;
+    tone?: BackdropProgressTone;
+    /**
+     * Segmented: `total` discrete steps, `done` of them filled. The bar then
+     * reports `done` of `total` to assistive tech instead of a percentage.
+     */
+    segments?: {
+        total: number;
+        done: number;
+    };
+    /**
+     * Two-part: one 8px bar split into two parts (granted vs purchased), each
+     * with a legend line under it. The first part is ink, the second grey.
+     * Rendered as a labelled group, not a progressbar: it shows a composition,
+     * not progress. `size` and `tone` do not apply.
+     */
+    parts?: [BackdropProgressPart, BackdropProgressPart];
+    className?: string;
+}
+/** A 6px ink bar on a track. Ink, never orange: progress is not an action. */
+export declare function BackdropProgress({ value, label, size, tone, segments, parts, className }: BackdropProgressProps): import("react").JSX.Element;
+export interface BackdropTokensPopoverProps {
+    /** "Token balance". */
+    title: string;
+    /** "1,240", formatted by the caller. */
+    balance: ReactNode;
+    /** "tokens", after the number. */
+    unit: ReactNode;
+    /**
+     * A two-part bar under the balance, with its legend (granted vs purchased).
+     * Drawn between the number and the caption. Omit it and the popover is unchanged.
+     */
+    breakdown?: {
+        label: string;
+        parts: [BackdropProgressPart, BackdropProgressPart];
+    };
+    /** One fact: "Enough for about 6 weeks". */
+    caption?: ReactNode;
+    usage?: {
+        /** "Used this month". */
+        label: ReactNode;
+        total: ReactNode;
+        rows: {
+            key: string;
+            label: ReactNode;
+            value: ReactNode;
+            share: number;
+            barLabel: string;
+        }[];
+    };
+    /**
+     * "Buy tokens": an INK button, so the page keeps its one orange. Optional:
+     * an account whose wallet is not live has a true balance and nowhere to buy,
+     * and a button with no honest label is worse than none.
+     */
+    primaryAction?: {
+        label: string;
+        onClick?: () => void;
+        href?: string;
+    };
+    /** "Open wallet": a text link. */
+    secondaryAction?: {
+        label: string;
+        onClick?: () => void;
+        href?: string;
+    };
+    linkComponent?: ElementType;
+}
+export declare function BackdropTokensPopover({ title, balance, unit, breakdown, caption, usage, primaryAction, secondaryAction, linkComponent }: BackdropTokensPopoverProps): import("react").JSX.Element;
+export interface BackdropStep {
+    key: string;
+    label: ReactNode;
+    /**
+     * `done` ticks, `next` is highlighted and may carry an action, `todo` is
+     * grey, `locked` shows a lock: not reachable yet. Pass a stateLabel saying
+     * so ("Locked"), since the lock is an icon.
+     */
+    state: 'done' | 'next' | 'todo' | 'locked';
+    /** The next step's one outline button ("Open replies"). */
+    action?: {
+        label: string;
+        onClick?: () => void;
+        href?: string;
+    };
+    /** Spoken state, since the tick is an icon: "Done". */
+    stateLabel?: string;
+    /** A right-hand fact for the step: a reward ("+50 tokens"), a date. */
+    trailing?: ReactNode;
+}
+export interface BackdropStepListProps {
+    steps: BackdropStep[];
+    /** The list's name ("Steps"). */
+    label: string;
+    /** `icon` (default) draws a tick or a circle; `number` draws the step's position in a circle. */
+    marker?: 'icon' | 'number';
+    /**
+     * `vertical` (default) is the checklist. `horizontal` is the stepper across
+     * the head of a focus flow: numbered markers joined by a line, no actions.
+     */
+    orientation?: 'vertical' | 'horizontal';
+    /**
+     * The colour of a `todo` step's empty circle or numbered ring. `faint`
+     * (default) is the light grey the mission and Get started panels draw.
+     * `choice` (Batch 3) is --backdrop-choice-off, the 3:1 grey an unselected
+     * choice control uses (WCAG 1.4.11): for a checklist on the page, where the
+     * empty circle is the only thing saying "not done yet". Vertical only.
+     */
+    todoTone?: 'faint' | 'choice';
+    linkComponent?: ElementType;
+}
+export declare function BackdropStepList({ steps, label, marker, orientation, todoTone, linkComponent }: BackdropStepListProps): import("react").JSX.Element;
+export interface BackdropMissionPopoverProps {
+    /** "Book 5 meetings". */
+    title: string;
+    /** "2 of 5". */
+    progressText: ReactNode;
+    /** 0–1. */
+    progress: number;
+    /** The bar's name: "2 of 5 meetings booked". */
+    progressLabel: string;
+    /** Each step may carry its reward in `trailing` ("+50 tokens"). */
+    steps: BackdropStep[];
+    stepsLabel: string;
+    linkComponent?: ElementType;
+}
+export declare function BackdropMissionPopover({ title, progressText, progress, progressLabel, steps, stepsLabel, linkComponent }: BackdropMissionPopoverProps): import("react").JSX.Element;
+export interface BackdropGetStartedProps {
+    /** "Get started". */
+    label: string;
+    /** "1 of 2". */
+    progressText: ReactNode;
+    /** 0–1, drawn as a small ring. */
+    progress: number;
+    /** Its panel is open: the pill holds its pressed state. */
+    open?: boolean;
+    onToggle?: () => void;
+}
+export declare function BackdropGetStarted({ label, progressText, progress, open, onToggle }: BackdropGetStartedProps): import("react").JSX.Element;
+export interface BackdropGetStartedPanelProps {
+    /** "Get started". */
+    label: string;
+    /** "1 of 2". */
+    progressText: ReactNode;
+    steps: BackdropStep[];
+    stepsLabel: string;
+    linkComponent?: ElementType;
+}
+export declare function BackdropGetStartedPanel({ label, progressText, steps, stepsLabel, linkComponent }: BackdropGetStartedPanelProps): import("react").JSX.Element;
+export interface BackdropAllAppsApp {
+    key: string;
+    name: string;
+    mark: ReactNode;
+    /**
+     * `pinned` shows a filled pin; `unpinned` an outline pin (and a "Pin" button
+     * on hover); `link` a trailing text + chevron ("Request access", "Set up");
+     * `soon` a Soon tag.
+     */
+    state: 'pinned' | 'unpinned' | 'link' | 'soon';
+    /** Words for the trailing affordance: "Pin", "Unpin", "Request access", "Soon". */
+    actionLabel: string;
+    href?: string;
+    onAction?: () => void;
+    /** Draw the hover state, for a story. */
+    highlighted?: boolean;
+}
+export interface BackdropAllAppsPopoverProps {
+    /** The panel's name ("All apps"). */
+    label: string;
+    /** The search field's placeholder ("Search apps"). Stage A: a static field. */
+    searchPlaceholder: string;
+    sections: {
+        key: string;
+        label: ReactNode;
+        apps: BackdropAllAppsApp[];
+    }[];
+    /** "Pin up to 4 apps to the rail". */
+    footer?: ReactNode;
+    linkComponent?: ElementType;
+}
+export declare function BackdropAllAppsPopover({ label, searchPlaceholder, sections, footer, linkComponent: Link }: BackdropAllAppsPopoverProps): import("react").JSX.Element;
+export interface BackdropSearchResult {
+    key: string;
+    /** 24px: an app mark, a company square, a person avatar. */
+    leading: ReactNode;
+    /** The title, with the matched run in a <mark> (BackdropMatch). */
+    title: ReactNode;
+    /** Right-hand fact: a city, a status pill. */
+    meta?: ReactNode;
+    href?: string;
+}
+export interface BackdropSearchDialogProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size' | 'className' | 'placeholder' | 'defaultValue'> {
+    /** The dialog's name ("Search"). */
+    label: string;
+    placeholder: string;
+    /**
+     * What is typed, when the host does not drive the field: it becomes the
+     * input's starting value and the person types over it. A host that needs to
+     * read what is typed passes `value` and `onChange` instead, like any native
+     * field, and `query` is then ignored. Every other input prop reaches the
+     * <input> too.
+     */
+    query: string;
+    /** Groups with no result are not passed (round 6: "Apps (none → hide the group)"). */
+    groups: {
+        key: string;
+        label: ReactNode;
+        results: BackdropSearchResult[];
+    }[];
+    /** The highlighted result, the one ↵ opens. */
+    activeKey?: string;
+    /** "esc" on the key cap. */
+    escapeHint: string;
+    /** "↑↓ to move · ↵ to open · esc to close". */
+    footerHint: ReactNode;
+    /** One line when nothing matches: "No matching results". */
+    emptyText?: ReactNode;
+    contained?: boolean;
+    /**
+     * Called by Escape and by a press on the scrim, as on any BackdropDialog.
+     * The host unmounts the dialog in response; without it the "esc" cap above
+     * names a shortcut that does nothing.
+     */
+    onClose?: () => void;
+    /** Its key in a surrounding BackdropChrome, so a ⌘K handler opens it with `useBackdropPanel(panel)`. */
+    panel?: string;
+    linkComponent?: ElementType;
+}
+/** ⌘K: a 640px dialog 96px from the top, over the light scrim. */
+export declare function BackdropSearchDialog({ label, placeholder, query, groups, activeKey, escapeHint, footerHint, emptyText, contained, onClose, panel, linkComponent: Link, ...rest }: BackdropSearchDialogProps): import("react").JSX.Element;
+/** The matched run inside a search result title. */
+export declare function BackdropMatch({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;