@boost33/ui 0.8.0 → 0.9.0

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

@@ -0,0 +1,68 @@
+import { ReactNode } from 'react';
+export interface BackdropHubSheetProps {
+    children: ReactNode;
+    /**
+     * `page` (default): the hub's 64px side padding and 28px rhythm. `bare`: no
+     * padding, for a global page that lays out its own columns (Inbox, Settings).
+     */
+    padding?: 'page' | 'bare';
+    /** A side panel floating over this sheet (BackdropSidePanel). */
+    panel?: ReactNode;
+    className?: string;
+}
+export declare function BackdropHubSheet({ children, padding, panel, className }: BackdropHubSheetProps): import("react").JSX.Element;
+export interface BackdropAppLayerProps {
+    /** The app menu column: a BackdropAppMenu. */
+    menu: ReactNode;
+    /** Layer 1: a BackdropContentSheet. */
+    children: ReactNode;
+    className?: string;
+}
+export declare function BackdropAppLayer({ menu, children, className }: BackdropAppLayerProps): import("react").JSX.Element;
+export interface BackdropContentSheetProps {
+    children: ReactNode;
+    /** `page` (default): 40px padding, 24px rhythm. `bare`: none. */
+    padding?: 'page' | 'bare';
+    /** A side panel floating over this sheet (BackdropSidePanel). */
+    panel?: ReactNode;
+    className?: string;
+}
+export declare function BackdropContentSheet({ children, padding, panel, className }: BackdropContentSheetProps): import("react").JSX.Element;
+export type BackdropSidePanelWidth = 'default' | 'wide';
+export interface BackdropSidePanelProps {
+    /** The panel's heading: the item it peeks at ("Message · Step 2"). */
+    title: ReactNode;
+    /** One fact line under the title (with `leading`, the subtitle: the person's company). */
+    facts?: ReactNode;
+    /**
+     * A mark before the title: a person's avatar on a message thread. The header
+     * then centres its row on it. Decorative: the title names the panel.
+     */
+    leading?: ReactNode;
+    /** `default` 440px. `wide` 484px, for message threads only (ADR-0017, D6). */
+    width?: BackdropSidePanelWidth;
+    /** The close button's accessible name ("Close"). */
+    closeLabel: string;
+    onClose?: () => void;
+    /**
+     * Step through the list the panel was opened from without closing it
+     * (research addition, 9 Nov). Each takes its own accessible name; omit both
+     * when the panel was not opened from a list.
+     */
+    previous?: BackdropSidePanelStep;
+    next?: BackdropSidePanelStep;
+    children: ReactNode;
+    /** Actions pinned to the panel's foot ([Approve] · "Skip"). */
+    footer?: ReactNode;
+    /** Move focus into the panel as it mounts. On by default; a story beside other stories turns it off. */
+    autoFocus?: boolean;
+    className?: string;
+}
+export interface BackdropSidePanelStep {
+    /** "Previous message" / "Next message". */
+    label: string;
+    onClick?: () => void;
+    /** At the first or last item of the list. */
+    disabled?: boolean;
+}
+export declare function BackdropSidePanel({ title, facts, leading, width, closeLabel, onClose, previous, next, children, footer, autoFocus, className, }: BackdropSidePanelProps): import("react").JSX.Element;

package/dist/components/Backdrop/BackdropSheets.js

@@ -0,0 +1,75 @@
+"use client";
+import { jsxs as i, jsx as a } from "react/jsx-runtime";
+import { useRef as C, useEffect as P } from "react";
+import e from "./BackdropSheets.module.css.js";
+import { cx as o } from "./cx.js";
+import { ChevronUp as S, ChevronDown as D, Close as E } from "./icons.js";
+import { BackdropIconButton as f } from "./BackdropButton.js";
+function x({ children: n, padding: d = "page", panel: l, className: r }) {
+  return /* @__PURE__ */ i("div", { className: o(e.hubSheet, r), children: [
+    /* @__PURE__ */ a("div", { className: o(e.scroll, d === "page" && e.hubPadding), children: n }),
+    l
+  ] });
+}
+function z({ menu: n, children: d, className: l }) {
+  return /* @__PURE__ */ i("div", { className: o(e.appLayer, l), children: [
+    n,
+    d
+  ] });
+}
+function A({ children: n, padding: d = "page", panel: l, className: r }) {
+  return /* @__PURE__ */ i("div", { className: o(e.contentSheet, r), children: [
+    /* @__PURE__ */ a("div", { className: o(e.scroll, d === "page" && e.contentPadding), children: n }),
+    l
+  ] });
+}
+function M({
+  title: n,
+  facts: d,
+  leading: l,
+  width: r = "default",
+  closeLabel: v,
+  onClose: p,
+  previous: t,
+  next: s,
+  children: k,
+  footer: h,
+  autoFocus: y = !0,
+  className: g
+}) {
+  const B = typeof n == "string" ? n : void 0, m = C(null);
+  return P(() => {
+    var b;
+    const c = document.activeElement;
+    return y && ((b = m.current) == null || b.focus({ preventScroll: !0 })), () => {
+      var N;
+      const u = document.activeElement;
+      (!u || u === document.body || !!((N = m.current) != null && N.contains(u))) && c instanceof HTMLElement && c !== document.body && c.isConnected && c.focus();
+    };
+  }, []), /* @__PURE__ */ i("aside", { ref: m, tabIndex: -1, onKeyDown: (c) => {
+    c.key !== "Escape" || c.defaultPrevented || !p || (c.preventDefault(), c.stopPropagation(), p());
+  }, className: o(e.sidePanel, r === "wide" && e.sidePanelWide, g), "aria-label": B, children: [
+    /* @__PURE__ */ i("div", { className: o(e.panelHeader, !!l && e.panelHeaderLeading), children: [
+      l && /* @__PURE__ */ a("span", { className: e.panelLeading, "aria-hidden": "true", children: l }),
+      /* @__PURE__ */ i("div", { className: e.panelHeading, children: [
+        /* @__PURE__ */ a("h2", { className: e.panelTitle, children: n }),
+        d && /* @__PURE__ */ a("p", { className: e.panelFacts, children: d })
+      ] }),
+      /* @__PURE__ */ i("div", { className: e.panelControls, children: [
+        t && /* @__PURE__ */ a(f, { label: t.label, icon: /* @__PURE__ */ a(S, {}), onClick: t.onClick, disabled: t.disabled }),
+        s && /* @__PURE__ */ a(f, { label: s.label, icon: /* @__PURE__ */ a(D, { size: 18 }), onClick: s.onClick, disabled: s.disabled }),
+        (t || s) && /* @__PURE__ */ a("span", { className: e.panelDivider, "aria-hidden": "true" }),
+        /* @__PURE__ */ a(f, { label: v, icon: /* @__PURE__ */ a(E, {}), onClick: p, tooltipSide: "left" })
+      ] })
+    ] }),
+    /* @__PURE__ */ a("div", { className: e.panelBody, children: k }),
+    h && /* @__PURE__ */ a("div", { className: e.panelFooter, children: h })
+  ] });
+}
+export {
+  z as BackdropAppLayer,
+  A as BackdropContentSheet,
+  x as BackdropHubSheet,
+  M as BackdropSidePanel
+};
+//# sourceMappingURL=BackdropSheets.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BackdropSheets.js","sources":["../../../src/components/Backdrop/BackdropSheets.tsx"],"sourcesContent":["'use client'\n\nimport { useEffect, useRef, type KeyboardEvent, type ReactNode } from 'react'\nimport styles from './BackdropSheets.module.css'\nimport { cx } from './cx'\nimport { ChevronDown, ChevronUp, Close } from './icons'\nimport { BackdropIconButton } from './BackdropButton'\n\n/* ── Hub sheet ─────────────────────────────────────────────────────────── */\n\nexport interface BackdropHubSheetProps {\n  children: ReactNode\n  /**\n   * `page` (default): the hub's 64px side padding and 28px rhythm. `bare`: no\n   * padding, for a global page that lays out its own columns (Inbox, Settings).\n   */\n  padding?: 'page' | 'bare'\n  /** A side panel floating over this sheet (BackdropSidePanel). */\n  panel?: ReactNode\n  className?: string\n}\n\n/*\n * The hub's white sheet. It sits directly on the frame (there is no app menu on\n * the hub), wears the frame theme's edge, and runs off the bottom: no bottom\n * gutter, square bottom corners, and its content scrolls inside it.\n */\nexport function BackdropHubSheet({ children, padding = 'page', panel, className }: BackdropHubSheetProps) {\n  return (\n    <div className={cx(styles.hubSheet, className)}>\n      <div className={cx(styles.scroll, padding === 'page' && styles.hubPadding)}>{children}</div>\n      {panel}\n    </div>\n  )\n}\n\n/* ── App layer (layer 2 sheet holding layer 1) ─────────────────────────── */\n\nexport interface BackdropAppLayerProps {\n  /** The app menu column: a BackdropAppMenu. */\n  menu: ReactNode\n  /** Layer 1: a BackdropContentSheet. */\n  children: ReactNode\n  className?: string\n}\n\n/*\n * Layer 2: the panel-grey sheet on the frame that carries the app's menu and,\n * inset 6px top and right, the white content sheet. It keeps a 12px gutter to\n * the frame on the right and at the bottom; the content sheet inside it runs\n * off the bottom (round 4, V4 geometry).\n */\nexport function BackdropAppLayer({ menu, children, className }: BackdropAppLayerProps) {\n  return (\n    <div className={cx(styles.appLayer, className)}>\n      {menu}\n      {children}\n    </div>\n  )\n}\n\n/* ── Content sheet (layer 1) ───────────────────────────────────────────── */\n\nexport interface BackdropContentSheetProps {\n  children: ReactNode\n  /** `page` (default): 40px padding, 24px rhythm. `bare`: none. */\n  padding?: 'page' | 'bare'\n  /** A side panel floating over this sheet (BackdropSidePanel). */\n  panel?: ReactNode\n  className?: string\n}\n\nexport function BackdropContentSheet({ children, padding = 'page', panel, className }: BackdropContentSheetProps) {\n  return (\n    <div className={cx(styles.contentSheet, className)}>\n      <div className={cx(styles.scroll, padding === 'page' && styles.contentPadding)}>{children}</div>\n      {panel}\n    </div>\n  )\n}\n\n/* ── Side panel ────────────────────────────────────────────────────────── */\n\nexport type BackdropSidePanelWidth = 'default' | 'wide'\n\nexport interface BackdropSidePanelProps {\n  /** The panel's heading: the item it peeks at (\"Message · Step 2\"). */\n  title: ReactNode\n  /** One fact line under the title (with `leading`, the subtitle: the person's company). */\n  facts?: ReactNode\n  /**\n   * A mark before the title: a person's avatar on a message thread. The header\n   * then centres its row on it. Decorative: the title names the panel.\n   */\n  leading?: ReactNode\n  /** `default` 440px. `wide` 484px, for message threads only (ADR-0017, D6). */\n  width?: BackdropSidePanelWidth\n  /** The close button's accessible name (\"Close\"). */\n  closeLabel: string\n  onClose?: () => void\n  /**\n   * Step through the list the panel was opened from without closing it\n   * (research addition, 9 Nov). Each takes its own accessible name; omit both\n   * when the panel was not opened from a list.\n   */\n  previous?: BackdropSidePanelStep\n  next?: BackdropSidePanelStep\n  children: ReactNode\n  /** Actions pinned to the panel's foot ([Approve] · \"Skip\"). */\n  footer?: ReactNode\n  /** Move focus into the panel as it mounts. On by default; a story beside other stories turns it off. */\n  autoFocus?: boolean\n  className?: string\n}\n\nexport interface BackdropSidePanelStep {\n  /** \"Previous message\" / \"Next message\". */\n  label: string\n  onClick?: () => void\n  /** At the first or last item of the list. */\n  disabled?: boolean\n}\n\n/*\n * A floating card over the content sheet: peek at one item while the list\n * stays (the depth rule). 440px, inset 6px from the sheet's top, right and\n * bottom, radius 10 all round, no scrim -- layer 1 stays visible and usable\n * beside it (round 5, decision 2). Content longer than the card scrolls inside.\n *\n * A complementary landmark named by its title, not a dialog: it does not trap\n * focus or block the page. Open while it is mounted. On mount it takes focus\n * (the landmark itself, so a screen reader announces its name, without a ring:\n * it is a landing point, not a control) unless `autoFocus` is false. Escape\n * inside it calls `onClose`, and on unmount focus returns to wherever it was\n * when the panel opened -- the list row it was opened from -- when focus would\n * otherwise be stranded in the panel or dropped to the body. Stepping with\n * previous / next keeps it mounted, so focus stays in the panel.\n */\nexport function BackdropSidePanel({\n  title,\n  facts,\n  leading,\n  width = 'default',\n  closeLabel,\n  onClose,\n  previous,\n  next,\n  children,\n  footer,\n  autoFocus = true,\n  className,\n}: BackdropSidePanelProps) {\n  const name = typeof title === 'string' ? title : undefined\n  const panel = useRef<HTMLElement | null>(null)\n\n  useEffect(() => {\n    const opener = document.activeElement\n    if (autoFocus) panel.current?.focus({ preventScroll: true })\n    return () => {\n      const active = document.activeElement\n      const stranded = !active || active === document.body || Boolean(panel.current?.contains(active))\n      if (stranded && opener instanceof HTMLElement && opener !== document.body && opener.isConnected) opener.focus()\n    }\n    // Mount and unmount only: a new title while stepping is the same panel.\n  }, [])\n\n  const onKeyDown = (event: KeyboardEvent<HTMLElement>) => {\n    // A popover inside the panel stops its own Escape, so this one only sees\n    // an Escape meant for the panel.\n    if (event.key !== 'Escape' || event.defaultPrevented || !onClose) return\n    event.preventDefault()\n    event.stopPropagation()\n    onClose()\n  }\n\n  return (\n    <aside ref={panel} tabIndex={-1} onKeyDown={onKeyDown} className={cx(styles.sidePanel, width === 'wide' && styles.sidePanelWide, className)} aria-label={name}>\n      <div className={cx(styles.panelHeader, Boolean(leading) && styles.panelHeaderLeading)}>\n        {leading && (\n          <span className={styles.panelLeading} aria-hidden=\"true\">\n            {leading}\n          </span>\n        )}\n        <div className={styles.panelHeading}>\n          <h2 className={styles.panelTitle}>{title}</h2>\n          {facts && <p className={styles.panelFacts}>{facts}</p>}\n        </div>\n        <div className={styles.panelControls}>\n          {previous && (\n            <BackdropIconButton label={previous.label} icon={<ChevronUp />} onClick={previous.onClick} disabled={previous.disabled} />\n          )}\n          {next && <BackdropIconButton label={next.label} icon={<ChevronDown size={18} />} onClick={next.onClick} disabled={next.disabled} />}\n          {(previous || next) && <span className={styles.panelDivider} aria-hidden=\"true\" />}\n          <BackdropIconButton label={closeLabel} icon={<Close />} onClick={onClose} tooltipSide=\"left\" />\n        </div>\n      </div>\n      <div className={styles.panelBody}>{children}</div>\n      {footer && <div className={styles.panelFooter}>{footer}</div>}\n    </aside>\n  )\n}\n"],"names":["BackdropHubSheet","children","padding","panel","className","cx","styles","jsx","BackdropAppLayer","menu","BackdropContentSheet","BackdropSidePanel","title","facts","leading","width","closeLabel","onClose","previous","next","footer","autoFocus","name","useRef","useEffect","opener","_a","active","event","jsxs","BackdropIconButton","ChevronUp","ChevronDown","Close"],"mappings":"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"}

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

@@ -0,0 +1,42 @@
+const e = "_scroll_f4fzw_3", n = "_hubSheet_f4fzw_12", a = "_hubPadding_f4fzw_24", _ = "_appLayer_f4fzw_33", t = "_contentSheet_f4fzw_49", l = "_contentPadding_f4fzw_60", o = "_sidePanel_f4fzw_69", d = "_panelHeader_f4fzw_92", f = "_sidePanelWide_f4fzw_101", p = "_panelHeaderLeading_f4fzw_107", s = "_panelLeading_f4fzw_112", i = "_panelHeading_f4fzw_117", c = "_panelTitle_f4fzw_125", r = "_panelFacts_f4fzw_134", w = "_panelBody_f4fzw_141", z = "_panelFooter_f4fzw_151", g = "_panelControls_f4fzw_160", h = "_panelDivider_f4fzw_167", P = {
+  scroll: e,
+  hubSheet: n,
+  hubPadding: a,
+  appLayer: _,
+  contentSheet: t,
+  contentPadding: l,
+  sidePanel: o,
+  panelHeader: d,
+  sidePanelWide: f,
+  panelHeaderLeading: p,
+  panelLeading: s,
+  panelHeading: i,
+  panelTitle: c,
+  panelFacts: r,
+  panelBody: w,
+  panelFooter: z,
+  panelControls: g,
+  panelDivider: h
+};
+export {
+  _ as appLayer,
+  l as contentPadding,
+  t as contentSheet,
+  P as default,
+  a as hubPadding,
+  n as hubSheet,
+  w as panelBody,
+  g as panelControls,
+  h as panelDivider,
+  r as panelFacts,
+  z as panelFooter,
+  d as panelHeader,
+  p as panelHeaderLeading,
+  i as panelHeading,
+  s as panelLeading,
+  c as panelTitle,
+  e as scroll,
+  o as sidePanel,
+  f as sidePanelWide
+};
+//# sourceMappingURL=BackdropSheets.module.css.js.map

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

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

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

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+export interface BackdropTab {
+    value: string;
+    label: ReactNode;
+    /** A count after the label ("People 48", "To send 5"). */
+    count?: ReactNode;
+    disabled?: boolean;
+}
+export interface BackdropTabsProps {
+    tabs: BackdropTab[];
+    /** The selected tab's value. Controlled: the caller owns which tab is open. */
+    value: string;
+    onValueChange?: (value: string) => void;
+    /** The tab list's accessible name, e.g. the page title. */
+    label: string;
+    /** Content at the right end of the row ("Connect a channel"). */
+    trailing?: ReactNode;
+    className?: string;
+}
+export declare function BackdropTabs({ tabs, value, onValueChange, label, trailing, className }: BackdropTabsProps): import("react").JSX.Element;

package/dist/components/Backdrop/BackdropTabs.js

@@ -0,0 +1,31 @@
+import { jsxs as a, jsx as s } from "react/jsx-runtime";
+import l from "./BackdropTabs.module.css.js";
+import { cx as m } from "./cx.js";
+function h({ tabs: c, value: o, onValueChange: r, label: d, trailing: i, className: t }) {
+  return /* @__PURE__ */ a("div", { className: m(l.row, t), children: [
+    /* @__PURE__ */ s("div", { role: "tablist", "aria-label": d, className: l.list, children: c.map((e) => {
+      const n = e.value === o;
+      return /* @__PURE__ */ a(
+        "button",
+        {
+          type: "button",
+          role: "tab",
+          "aria-selected": n,
+          disabled: e.disabled,
+          className: l.tab,
+          onClick: r ? () => r(e.value) : void 0,
+          children: [
+            /* @__PURE__ */ s("span", { children: e.label }),
+            e.count !== void 0 && /* @__PURE__ */ s("span", { className: l.count, children: e.count })
+          ]
+        },
+        e.value
+      );
+    }) }),
+    i && /* @__PURE__ */ s("div", { className: l.trailing, children: i })
+  ] });
+}
+export {
+  h as BackdropTabs
+};
+//# sourceMappingURL=BackdropTabs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BackdropTabs.js","sources":["../../../src/components/Backdrop/BackdropTabs.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport styles from './BackdropTabs.module.css'\nimport { cx } from './cx'\n\nexport interface BackdropTab {\n  value: string\n  label: ReactNode\n  /** A count after the label (\"People 48\", \"To send 5\"). */\n  count?: ReactNode\n  disabled?: boolean\n}\n\nexport interface BackdropTabsProps {\n  tabs: BackdropTab[]\n  /** The selected tab's value. Controlled: the caller owns which tab is open. */\n  value: string\n  onValueChange?: (value: string) => void\n  /** The tab list's accessible name, e.g. the page title. */\n  label: string\n  /** Content at the right end of the row (\"Connect a channel\"). */\n  trailing?: ReactNode\n  className?: string\n}\n\n/*\n * Underlined tabs on a hairline, Paper's campaign-builder row: 15px, the\n * selected tab ink semibold over a 2px ink rule, the rest muted medium.\n *\n * Stage A: the selection is a prop and each tab is a button that reports a\n * click. Arrow-key roving focus (WAI-ARIA tabs) is Stage B; until then every\n * tab is in the tab order, which is operable, just not the pattern's ideal.\n */\nexport function BackdropTabs({ tabs, value, onValueChange, label, trailing, className }: BackdropTabsProps) {\n  return (\n    <div className={cx(styles.row, className)}>\n      <div role=\"tablist\" aria-label={label} className={styles.list}>\n        {tabs.map((tab) => {\n          const selected = tab.value === value\n          return (\n            <button\n              key={tab.value}\n              type=\"button\"\n              role=\"tab\"\n              aria-selected={selected}\n              disabled={tab.disabled}\n              className={styles.tab}\n              onClick={onValueChange ? () => onValueChange(tab.value) : undefined}\n            >\n              <span>{tab.label}</span>\n              {tab.count !== undefined && <span className={styles.count}>{tab.count}</span>}\n            </button>\n          )\n        })}\n      </div>\n      {trailing && <div className={styles.trailing}>{trailing}</div>}\n    </div>\n  )\n}\n"],"names":["BackdropTabs","tabs","value","onValueChange","label","trailing","className","cx","styles","jsx","tab","selected","jsxs"],"mappings":";;;AAgCO,SAASA,EAAa,EAAE,MAAAC,GAAM,OAAAC,GAAO,eAAAC,GAAe,OAAAC,GAAO,UAAAC,GAAU,WAAAC,KAAgC;AAC1G,2BACG,OAAA,EAAI,WAAWC,EAAGC,EAAO,KAAKF,CAAS,GACtC,UAAA;AAAA,IAAA,gBAAAG,EAAC,OAAA,EAAI,MAAK,WAAU,cAAYL,GAAO,WAAWI,EAAO,MACtD,UAAAP,EAAK,IAAI,CAACS,MAAQ;AACjB,YAAMC,IAAWD,EAAI,UAAUR;AAC/B,aACE,gBAAAU;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,MAAK;AAAA,UACL,MAAK;AAAA,UACL,iBAAeD;AAAA,UACf,UAAUD,EAAI;AAAA,UACd,WAAWF,EAAO;AAAA,UAClB,SAASL,IAAgB,MAAMA,EAAcO,EAAI,KAAK,IAAI;AAAA,UAE1D,UAAA;AAAA,YAAA,gBAAAD,EAAC,QAAA,EAAM,YAAI,MAAA,CAAM;AAAA,YAChBC,EAAI,UAAU,UAAa,gBAAAD,EAAC,UAAK,WAAWD,EAAO,OAAQ,UAAAE,EAAI,MAAA,CAAM;AAAA,UAAA;AAAA,QAAA;AAAA,QATjEA,EAAI;AAAA,MAAA;AAAA,IAYf,CAAC,EAAA,CACH;AAAA,IACCL,KAAY,gBAAAI,EAAC,OAAA,EAAI,WAAWD,EAAO,UAAW,UAAAH,EAAA,CAAS;AAAA,EAAA,GAC1D;AAEJ;"}

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

@@ -0,0 +1,16 @@
+const t = "_row_1f0u9_3", _ = "_list_1f0u9_10", o = "_tab_1f0u9_15", n = "_count_1f0u9_55", s = "_trailing_1f0u9_63", c = {
+  row: t,
+  list: _,
+  tab: o,
+  count: n,
+  trailing: s
+};
+export {
+  n as count,
+  c as default,
+  _ as list,
+  t as row,
+  o as tab,
+  s as trailing
+};
+//# sourceMappingURL=BackdropTabs.module.css.js.map

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

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

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

@@ -0,0 +1,21 @@
+import { ReactElement, ReactNode } from 'react';
+export type BackdropTooltipSide = 'top' | 'right' | 'bottom' | 'left';
+export interface BackdropTooltipProps {
+    /** The tip. Short: a name ("Inbox"), a shortcut, or one fact. */
+    content: ReactNode;
+    /** One focusable element: the tooltip shows on its hover and keyboard focus. */
+    children: ReactElement<Record<string, unknown>>;
+    side?: BackdropTooltipSide;
+    /**
+     * The tip repeats the trigger's own accessible name (an icon-only rail item
+     * or button). It is then hidden from assistive tech, so the name is not read
+     * twice; otherwise it is wired as the trigger's description.
+     */
+    labelsTrigger?: boolean;
+    /** Hold the tip open, for a story or a screenshot. */
+    open?: boolean;
+    /** Keep the tip hidden (its trigger's panel is open) without unmounting it. */
+    suppressed?: boolean;
+    className?: string;
+}
+export declare function BackdropTooltip({ content, children, side, labelsTrigger, open, suppressed, className }: BackdropTooltipProps): import("react").JSX.Element;

package/dist/components/Backdrop/BackdropTooltip.js

@@ -0,0 +1,15 @@
+import { jsxs as c, jsx as f } from "react/jsx-runtime";
+import { useId as l, isValidElement as v, cloneElement as u } from "react";
+import i from "./BackdropTooltip.module.css.js";
+import { cx as a } from "./cx.js";
+function E({ content: d, children: t, side: e = "top", labelsTrigger: o = !1, open: p = !1, suppressed: r = !1, className: n }) {
+  const s = l(), m = !o && v(t) ? u(t, { "aria-describedby": s }) : t;
+  return /* @__PURE__ */ c("span", { className: a(i.anchor, n), "data-open": p || void 0, "data-suppressed": r || void 0, children: [
+    m,
+    /* @__PURE__ */ f("span", { id: o ? void 0 : s, role: o ? void 0 : "tooltip", "aria-hidden": o || void 0, className: a(i.tip, i[e]), children: d })
+  ] });
+}
+export {
+  E as BackdropTooltip
+};
+//# sourceMappingURL=BackdropTooltip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BackdropTooltip.js","sources":["../../../src/components/Backdrop/BackdropTooltip.tsx"],"sourcesContent":["import { cloneElement, isValidElement, useId, type ReactElement, type ReactNode } from 'react'\nimport styles from './BackdropTooltip.module.css'\nimport { cx } from './cx'\n\nexport type BackdropTooltipSide = 'top' | 'right' | 'bottom' | 'left'\n\nexport interface BackdropTooltipProps {\n  /** The tip. Short: a name (\"Inbox\"), a shortcut, or one fact. */\n  content: ReactNode\n  /** One focusable element: the tooltip shows on its hover and keyboard focus. */\n  children: ReactElement<Record<string, unknown>>\n  side?: BackdropTooltipSide\n  /**\n   * The tip repeats the trigger's own accessible name (an icon-only rail item\n   * or button). It is then hidden from assistive tech, so the name is not read\n   * twice; otherwise it is wired as the trigger's description.\n   */\n  labelsTrigger?: boolean\n  /** Hold the tip open, for a story or a screenshot. */\n  open?: boolean\n  /** Keep the tip hidden (its trigger's panel is open) without unmounting it. */\n  suppressed?: boolean\n  className?: string\n}\n\n/*\n * CSS-only: the tip shows while the wrapper is hovered or holds keyboard focus\n * (`:focus-visible` inside it), after a short delay, and needs no state -- so\n * the component stays a server component and costs a consumer no client\n * bundle. Escape-to-dismiss (WCAG 1.4.13) is the one behaviour this cannot\n * give; it lands with Stage B.\n */\nexport function BackdropTooltip({ content, children, side = 'top', labelsTrigger = false, open = false, suppressed = false, className }: BackdropTooltipProps) {\n  const id = useId()\n  const trigger =\n    !labelsTrigger && isValidElement(children) ? cloneElement(children, { 'aria-describedby': id }) : children\n  return (\n    <span className={cx(styles.anchor, className)} data-open={open || undefined} data-suppressed={suppressed || undefined}>\n      {trigger}\n      <span id={labelsTrigger ? undefined : id} role={labelsTrigger ? undefined : 'tooltip'} aria-hidden={labelsTrigger || undefined} className={cx(styles.tip, styles[side])}>\n        {content}\n      </span>\n    </span>\n  )\n}\n"],"names":["BackdropTooltip","content","children","side","labelsTrigger","open","suppressed","className","id","useId","trigger","isValidElement","cloneElement","jsxs","cx","styles","jsx"],"mappings":";;;;AAgCO,SAASA,EAAgB,EAAE,SAAAC,GAAS,UAAAC,GAAU,MAAAC,IAAO,OAAO,eAAAC,IAAgB,IAAO,MAAAC,IAAO,IAAO,YAAAC,IAAa,IAAO,WAAAC,KAAmC;AAC7J,QAAMC,IAAKC,EAAA,GACLC,IACJ,CAACN,KAAiBO,EAAeT,CAAQ,IAAIU,EAAaV,GAAU,EAAE,oBAAoBM,EAAA,CAAI,IAAIN;AACpG,SACE,gBAAAW,EAAC,QAAA,EAAK,WAAWC,EAAGC,EAAO,QAAQR,CAAS,GAAG,aAAWF,KAAQ,QAAW,mBAAiBC,KAAc,QACzG,UAAA;AAAA,IAAAI;AAAA,IACD,gBAAAM,EAAC,UAAK,IAAIZ,IAAgB,SAAYI,GAAI,MAAMJ,IAAgB,SAAY,WAAW,eAAaA,KAAiB,QAAW,WAAWU,EAAGC,EAAO,KAAKA,EAAOZ,CAAI,CAAC,GACnK,UAAAF,EAAA,CACH;AAAA,EAAA,GACF;AAEJ;"}

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

@@ -0,0 +1,18 @@
+const t = "_anchor_2v4zk_3", o = "_tip_2v4zk_10", _ = "_top_2v4zk_53", c = "_bottom_2v4zk_59", n = "_right_2v4zk_65", s = "_left_2v4zk_71", p = {
+  anchor: t,
+  tip: o,
+  top: _,
+  bottom: c,
+  right: n,
+  left: s
+};
+export {
+  t as anchor,
+  c as bottom,
+  p as default,
+  s as left,
+  n as right,
+  o as tip,
+  _ as top
+};
+//# sourceMappingURL=BackdropTooltip.module.css.js.map

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

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

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

@@ -0,0 +1,65 @@
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+export interface BackdropTopStripCollapse {
+    /** "Collapse menu" / "Expand menu": the toggle's accessible name, both states. */
+    label: string;
+    /** The app menu is folded to its icon strip; the toggle shows the expand glyph. */
+    folded: boolean;
+    onToggle?: () => void;
+}
+export interface BackdropTopStripProps {
+    /**
+     * `app` puts the menu's collapse toggle in the slot above the rail and the
+     * Boost33 mark after it. `hub` has no menu to collapse: the mark moves into
+     * that slot and the wordmark follows it. Search sits at the same x in both.
+     */
+    variant: 'hub' | 'app';
+    /** The Boost33 mark, 32px (Boost33Mark). */
+    mark: ReactNode;
+    /** Hub only: the word after the mark. A brand name, passed in like any copy. */
+    wordmark?: ReactNode;
+    /** App only: the collapse/expand toggle. */
+    collapse?: BackdropTopStripCollapse;
+    /** A BackdropSearchTrigger. */
+    search: ReactNode;
+    /**
+     * The right-hand group, in order: mission chip · tokens chip · Ask · Help ·
+     * account avatar (round 4, correction 2).
+     */
+    trailing: ReactNode;
+    /** The strip's landmark name. */
+    label: string;
+    className?: string;
+}
+export declare function BackdropTopStrip({ variant, mark, wordmark, collapse, search, trailing, label, className }: BackdropTopStripProps): import("react").JSX.Element;
+export interface BackdropSearchTriggerProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    /** The placeholder line: "Search apps, companies, deals". */
+    placeholder: string;
+    /** The shortcut shown at the right end: "⌘K". */
+    shortcut?: string;
+}
+/** A button that looks like a field: it opens the search dialog (⌘K). 360px, 280px below 1200px. */
+export declare function BackdropSearchTrigger({ placeholder, shortcut, className, type, ...rest }: BackdropSearchTriggerProps): import("react").JSX.Element;
+export interface BackdropStripChipProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    icon: ReactNode;
+    /** "Book 5 meetings · 2/5", "1,240 tokens". */
+    label: ReactNode;
+    /** The shorter label below 1200px ("2/5"). The full label stays the accessible name. */
+    compactLabel?: ReactNode;
+    /** Its popover is open. */
+    pressed?: boolean;
+}
+export declare function BackdropStripChip({ icon, label, compactLabel, pressed, className, type, ...rest }: BackdropStripChipProps): import("react").JSX.Element;
+export interface BackdropStripButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    icon: ReactNode;
+    label: ReactNode;
+    pressed?: boolean;
+}
+export declare function BackdropStripButton({ icon, label, pressed, className, type, ...rest }: BackdropStripButtonProps): import("react").JSX.Element;
+export interface BackdropStripAvatarProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'aria-label'> {
+    /** Two letters. */
+    initials: string;
+    /** The button's name: "Account menu, Camille Martin". */
+    label: string;
+    pressed?: boolean;
+}
+export declare function BackdropStripAvatar({ initials, label, pressed, className, type, ...rest }: BackdropStripAvatarProps): import("react").JSX.Element;

package/dist/components/Backdrop/BackdropTopStrip.js

@@ -0,0 +1,46 @@
+import { jsxs as c, jsx as a } from "react/jsx-runtime";
+import e from "./BackdropTopStrip.module.css.js";
+import { cx as d } from "./cx.js";
+import { Search as p, Expand as m, Collapse as u } from "./icons.js";
+import { BackdropTooltip as b } from "./BackdropTooltip.js";
+function v({ variant: l, mark: i, wordmark: n, collapse: r, search: s, trailing: t, label: o, className: h }) {
+  return /* @__PURE__ */ c("header", { className: d(e.strip, h), "aria-label": o, children: [
+    /* @__PURE__ */ a("div", { className: e.slot, children: l === "hub" ? /* @__PURE__ */ a("span", { className: e.mark, children: i }) : r && /* @__PURE__ */ a(b, { content: r.label, side: "right", labelsTrigger: !0, children: /* @__PURE__ */ a("button", { type: "button", className: e.collapse, "aria-label": r.label, "aria-expanded": !r.folded, onClick: r.onToggle, children: r.folded ? /* @__PURE__ */ a(m, {}) : /* @__PURE__ */ a(u, {}) }) }) }),
+    l === "hub" && n && /* @__PURE__ */ a("span", { className: e.wordmark, children: n }),
+    /* @__PURE__ */ a("div", { className: e.lead, children: l === "app" && /* @__PURE__ */ a("span", { className: e.mark, children: i }) }),
+    /* @__PURE__ */ a("div", { className: e.search, children: s }),
+    /* @__PURE__ */ a("div", { className: e.fill }),
+    /* @__PURE__ */ a("div", { className: e.trailing, children: t })
+  ] });
+}
+function B({ placeholder: l, shortcut: i, className: n, type: r = "button", ...s }) {
+  return /* @__PURE__ */ c("button", { type: r, className: d(e.searchTrigger, n), "aria-keyshortcuts": i ? "Meta+K" : void 0, ...s, children: [
+    /* @__PURE__ */ a(p, {}),
+    /* @__PURE__ */ a("span", { className: e.searchPlaceholder, children: l }),
+    i && /* @__PURE__ */ a("kbd", { className: e.shortcut, "aria-hidden": "true", children: i })
+  ] });
+}
+function S({ icon: l, label: i, compactLabel: n, pressed: r = !1, className: s, type: t = "button", ...o }) {
+  return /* @__PURE__ */ c("button", { type: t, "aria-expanded": r, className: d(e.chip, s), ...o, children: [
+    l,
+    /* @__PURE__ */ a("span", { className: d(e.chipLabel, n !== void 0 && e.hasCompact), children: i }),
+    n !== void 0 && /* @__PURE__ */ a("span", { className: e.chipCompact, "aria-hidden": "true", children: n })
+  ] });
+}
+function T({ icon: l, label: i, pressed: n = !1, className: r, type: s = "button", ...t }) {
+  return /* @__PURE__ */ c("button", { type: s, "aria-expanded": n, className: d(e.stripButton, r), ...t, children: [
+    l,
+    /* @__PURE__ */ a("span", { children: i })
+  ] });
+}
+function C({ initials: l, label: i, pressed: n = !1, className: r, type: s = "button", ...t }) {
+  return /* @__PURE__ */ a("button", { type: s, "aria-label": i, "aria-expanded": n, className: d(e.avatar, r), ...t, children: /* @__PURE__ */ a("span", { "aria-hidden": "true", children: l }) });
+}
+export {
+  B as BackdropSearchTrigger,
+  C as BackdropStripAvatar,
+  T as BackdropStripButton,
+  S as BackdropStripChip,
+  v as BackdropTopStrip
+};
+//# sourceMappingURL=BackdropTopStrip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BackdropTopStrip.js","sources":["../../../src/components/Backdrop/BackdropTopStrip.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, ReactNode } from 'react'\nimport styles from './BackdropTopStrip.module.css'\nimport { cx } from './cx'\nimport { Collapse, Expand, Search } from './icons'\nimport { BackdropTooltip } from './BackdropTooltip'\n\nexport interface BackdropTopStripCollapse {\n  /** \"Collapse menu\" / \"Expand menu\": the toggle's accessible name, both states. */\n  label: string\n  /** The app menu is folded to its icon strip; the toggle shows the expand glyph. */\n  folded: boolean\n  onToggle?: () => void\n}\n\nexport interface BackdropTopStripProps {\n  /**\n   * `app` puts the menu's collapse toggle in the slot above the rail and the\n   * Boost33 mark after it. `hub` has no menu to collapse: the mark moves into\n   * that slot and the wordmark follows it. Search sits at the same x in both.\n   */\n  variant: 'hub' | 'app'\n  /** The Boost33 mark, 32px (Boost33Mark). */\n  mark: ReactNode\n  /** Hub only: the word after the mark. A brand name, passed in like any copy. */\n  wordmark?: ReactNode\n  /** App only: the collapse/expand toggle. */\n  collapse?: BackdropTopStripCollapse\n  /** A BackdropSearchTrigger. */\n  search: ReactNode\n  /**\n   * The right-hand group, in order: mission chip · tokens chip · Ask · Help ·\n   * account avatar (round 4, correction 2).\n   */\n  trailing: ReactNode\n  /** The strip's landmark name. */\n  label: string\n  className?: string\n}\n\n/*\n * Backdrop's top strip, 60px. The left 76px is the slot directly above the\n * rail's icon column. Search starts at x = 140 on every screen: 76 + 64 -- the\n * 64 is the mark plus its 16px either side in an app, and the wordmark's run on\n * the hub (round 4: \"Search stays at exactly the same x on the hub and in\n * apps; only the logo area differs\").\n */\nexport function BackdropTopStrip({ variant, mark, wordmark, collapse, search, trailing, label, className }: BackdropTopStripProps) {\n  return (\n    <header className={cx(styles.strip, className)} aria-label={label}>\n      <div className={styles.slot}>\n        {variant === 'hub' ? (\n          <span className={styles.mark}>{mark}</span>\n        ) : (\n          collapse && (\n            <BackdropTooltip content={collapse.label} side=\"right\" labelsTrigger>\n              <button type=\"button\" className={styles.collapse} aria-label={collapse.label} aria-expanded={!collapse.folded} onClick={collapse.onToggle}>\n                {collapse.folded ? <Expand /> : <Collapse />}\n              </button>\n            </BackdropTooltip>\n          )\n        )}\n      </div>\n      {variant === 'hub' && wordmark && <span className={styles.wordmark}>{wordmark}</span>}\n      <div className={styles.lead}>{variant === 'app' && <span className={styles.mark}>{mark}</span>}</div>\n      <div className={styles.search}>{search}</div>\n      <div className={styles.fill} />\n      <div className={styles.trailing}>{trailing}</div>\n    </header>\n  )\n}\n\n/* ── Search trigger ────────────────────────────────────────────────────── */\n\nexport interface BackdropSearchTriggerProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {\n  /** The placeholder line: \"Search apps, companies, deals\". */\n  placeholder: string\n  /** The shortcut shown at the right end: \"⌘K\". */\n  shortcut?: string\n}\n\n/** A button that looks like a field: it opens the search dialog (⌘K). 360px, 280px below 1200px. */\nexport function BackdropSearchTrigger({ placeholder, shortcut, className, type = 'button', ...rest }: BackdropSearchTriggerProps) {\n  return (\n    <button type={type} className={cx(styles.searchTrigger, className)} aria-keyshortcuts={shortcut ? 'Meta+K' : undefined} {...rest}>\n      <Search />\n      <span className={styles.searchPlaceholder}>{placeholder}</span>\n      {shortcut && (\n        <kbd className={styles.shortcut} aria-hidden=\"true\">\n          {shortcut}\n        </kbd>\n      )}\n    </button>\n  )\n}\n\n/* ── Strip chip (mission, tokens) ──────────────────────────────────────── */\n\nexport interface BackdropStripChipProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {\n  icon: ReactNode\n  /** \"Book 5 meetings · 2/5\", \"1,240 tokens\". */\n  label: ReactNode\n  /** The shorter label below 1200px (\"2/5\"). The full label stays the accessible name. */\n  compactLabel?: ReactNode\n  /** Its popover is open. */\n  pressed?: boolean\n}\n\nexport function BackdropStripChip({ icon, label, compactLabel, pressed = false, className, type = 'button', ...rest }: BackdropStripChipProps) {\n  return (\n    <button type={type} aria-expanded={pressed} className={cx(styles.chip, className)} {...rest}>\n      {icon}\n      <span className={cx(styles.chipLabel, compactLabel !== undefined && styles.hasCompact)}>{label}</span>\n      {compactLabel !== undefined && (\n        <span className={styles.chipCompact} aria-hidden=\"true\">\n          {compactLabel}\n        </span>\n      )}\n    </button>\n  )\n}\n\n/* ── Strip button (Ask, Help) ──────────────────────────────────────────── */\n\nexport interface BackdropStripButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {\n  icon: ReactNode\n  label: ReactNode\n  pressed?: boolean\n}\n\nexport function BackdropStripButton({ icon, label, pressed = false, className, type = 'button', ...rest }: BackdropStripButtonProps) {\n  return (\n    <button type={type} aria-expanded={pressed} className={cx(styles.stripButton, className)} {...rest}>\n      {icon}\n      <span>{label}</span>\n    </button>\n  )\n}\n\n/* ── Account avatar ────────────────────────────────────────────────────── */\n\nexport interface BackdropStripAvatarProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'aria-label'> {\n  /** Two letters. */\n  initials: string\n  /** The button's name: \"Account menu, Camille Martin\". */\n  label: string\n  pressed?: boolean\n}\n\nexport function BackdropStripAvatar({ initials, label, pressed = false, className, type = 'button', ...rest }: BackdropStripAvatarProps) {\n  return (\n    <button type={type} aria-label={label} aria-expanded={pressed} className={cx(styles.avatar, className)} {...rest}>\n      <span aria-hidden=\"true\">{initials}</span>\n    </button>\n  )\n}\n"],"names":["BackdropTopStrip","variant","mark","wordmark","collapse","search","trailing","label","className","jsxs","cx","styles","jsx","BackdropTooltip","Expand","Collapse","BackdropSearchTrigger","placeholder","shortcut","type","rest","Search","BackdropStripChip","icon","compactLabel","pressed","BackdropStripButton","BackdropStripAvatar","initials"],"mappings":"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"}

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

@@ -0,0 +1,40 @@
+const s = "_strip_jhosp_3", o = "_slot_jhosp_14", t = "_lead_jhosp_24", _ = "_mark_jhosp_33", c = "_wordmark_jhosp_44", a = "_search_jhosp_58", r = "_fill_jhosp_63", h = "_trailing_jhosp_67", p = "_collapse_jhosp_75", l = "_searchTrigger_jhosp_76", e = "_chip_jhosp_77", i = "_stripButton_jhosp_78", n = "_avatar_jhosp_79", j = "_searchPlaceholder_jhosp_133", m = "_shortcut_jhosp_142", d = "_chipCompact_jhosp_174", g = "_hasCompact_jhosp_233", u = {
+  strip: s,
+  slot: o,
+  lead: t,
+  mark: _,
+  wordmark: c,
+  search: a,
+  fill: r,
+  trailing: h,
+  collapse: p,
+  searchTrigger: l,
+  chip: e,
+  stripButton: i,
+  avatar: n,
+  searchPlaceholder: j,
+  shortcut: m,
+  chipCompact: d,
+  hasCompact: g
+};
+export {
+  n as avatar,
+  e as chip,
+  d as chipCompact,
+  p as collapse,
+  u as default,
+  r as fill,
+  g as hasCompact,
+  t as lead,
+  _ as mark,
+  a as search,
+  j as searchPlaceholder,
+  l as searchTrigger,
+  m as shortcut,
+  o as slot,
+  s as strip,
+  i as stripButton,
+  h as trailing,
+  c as wordmark
+};
+//# sourceMappingURL=BackdropTopStrip.module.css.js.map

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

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

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

@@ -0,0 +1,2 @@
+/** Joins the truthy class names. Local to Backdrop; the 0.8 components inline theirs. */
+export declare function cx(...names: Array<string | false | null | undefined>): string;

package/dist/components/Backdrop/cx.js

@@ -0,0 +1,7 @@
+function o(...n) {
+  return n.filter(Boolean).join(" ");
+}
+export {
+  o as cx
+};
+//# sourceMappingURL=cx.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cx.js","sources":["../../../src/components/Backdrop/cx.ts"],"sourcesContent":["/** Joins the truthy class names. Local to Backdrop; the 0.8 components inline theirs. */\nexport function cx(...names: Array<string | false | null | undefined>): string {\n  return names.filter(Boolean).join(' ')\n}\n"],"names":["cx","names"],"mappings":"AACO,SAASA,KAAMC,GAAyD;AAC7E,SAAOA,EAAM,OAAO,OAAO,EAAE,KAAK,GAAG;AACvC;"}