@boost33/ui 0.8.1 → 0.9.0

package/dist/backdrop.d.ts

@@ -0,0 +1,46 @@
+export { BackdropButton, BackdropIconButton, BackdropTextLink } from './components/Backdrop/BackdropButton';
+export type { BackdropButtonProps, BackdropButtonVariant, BackdropButtonVariantName, BackdropButtonSize, BackdropIconButtonProps, BackdropTextLinkProps, } from './components/Backdrop/BackdropButton';
+export { BackdropTooltip } from './components/Backdrop/BackdropTooltip';
+export type { BackdropTooltipProps, BackdropTooltipSide } from './components/Backdrop/BackdropTooltip';
+export { BackdropBadge, BackdropChip, BackdropPill, BackdropSoonTag, BackdropAvatar, BackdropAvatarStack, BackdropVisuallyHidden, } from './components/Backdrop/BackdropBasics';
+export type { BackdropBadgeProps, BackdropChipProps, BackdropChipKind, BackdropPillProps, BackdropPillTone, BackdropPillAppearance, BackdropSoonTagProps, BackdropAvatarProps, BackdropAvatarTone, BackdropAvatarSize, BackdropAvatarStackProps, BackdropAvatarStackPerson, } from './components/Backdrop/BackdropBasics';
+export { BackdropTabs } from './components/Backdrop/BackdropTabs';
+export type { BackdropTabsProps, BackdropTab } from './components/Backdrop/BackdropTabs';
+export { BackdropFrame } from './components/Backdrop/BackdropFrame';
+export type { BackdropFrameProps, BackdropTheme } from './components/Backdrop/BackdropFrame';
+export { BackdropRail } from './components/Backdrop/BackdropRail';
+export type { BackdropRailProps, BackdropRailItem, BackdropRailApp } from './components/Backdrop/BackdropRail';
+export { BackdropTopStrip, BackdropSearchTrigger, BackdropStripChip, BackdropStripButton, BackdropStripAvatar, } from './components/Backdrop/BackdropTopStrip';
+export type { BackdropTopStripProps, BackdropTopStripCollapse, BackdropSearchTriggerProps, BackdropStripChipProps, BackdropStripButtonProps, BackdropStripAvatarProps, } from './components/Backdrop/BackdropTopStrip';
+export { BackdropHubSheet, BackdropAppLayer, BackdropContentSheet, BackdropSidePanel } from './components/Backdrop/BackdropSheets';
+export type { BackdropHubSheetProps, BackdropAppLayerProps, BackdropContentSheetProps, BackdropSidePanelProps, BackdropSidePanelStep, BackdropSidePanelWidth, } from './components/Backdrop/BackdropSheets';
+export { BackdropAppMenu } from './components/Backdrop/BackdropAppMenu';
+export type { BackdropAppMenuProps, BackdropAppMenuItem, BackdropAppMenuSection } from './components/Backdrop/BackdropAppMenu';
+export { BackdropPopover, BackdropPopoverAnchor, BackdropMenuList, BackdropSegmented, BackdropDialog, BackdropToast, BackdropToastRegion, } from './components/Backdrop/BackdropOverlays';
+export type { BackdropPopoverProps, BackdropPopoverWidth, BackdropPopoverAnchorProps, BackdropMenuRow, BackdropMenuListProps, BackdropSegmentedProps, BackdropSegmentedOption, BackdropSegmentedSize, BackdropDialogProps, BackdropDialogWidth, BackdropDialogSection, BackdropToastProps, BackdropToastRegionProps, } from './components/Backdrop/BackdropOverlays';
+export { BackdropChrome, useBackdropPanel } from './components/Backdrop/BackdropChrome';
+export type { BackdropPanelControl } from './components/Backdrop/BackdropChrome';
+export { BackdropAccountMenu, BackdropProgress, BackdropTokensPopover, BackdropStepList, BackdropMissionPopover, BackdropGetStarted, BackdropGetStartedPanel, BackdropAllAppsPopover, BackdropSearchDialog, BackdropMatch, } from './components/Backdrop/BackdropGlobalPanels';
+export type { BackdropAccountMenuProps, BackdropProgressProps, BackdropProgressSize, BackdropProgressTone, BackdropProgressPart, BackdropTokensPopoverProps, BackdropStep, BackdropStepListProps, BackdropMissionPopoverProps, BackdropGetStartedProps, BackdropGetStartedPanelProps, BackdropAllAppsApp, BackdropAllAppsPopoverProps, BackdropSearchResult, BackdropSearchDialogProps, } from './components/Backdrop/BackdropGlobalPanels';
+export { BackdropDisclosure, BackdropOverflowMenu, BackdropFilterButton, BackdropFilterPopover, BackdropCheckbox, BackdropBulkBar, BackdropBulkAction, BackdropNextStepCard, BackdropAllSet, BackdropAvailability, } from './components/Backdrop/BackdropPatterns';
+export type { BackdropDisclosureProps, BackdropOverflowMenuProps, BackdropFilterButtonProps, BackdropFilterOption, BackdropFilterPopoverProps, BackdropCheckboxProps, BackdropBulkBarProps, BackdropNextStepCardProps, BackdropNextStepSingleProps, BackdropNextStepListProps, BackdropNextStepRow, BackdropAllSetProps, BackdropAvailabilityProps, BackdropAvailabilityAppProps, BackdropAvailabilityEmptyProps, } from './components/Backdrop/BackdropPatterns';
+export { BackdropPageHeader, BackdropBackLink, BackdropSectionHeader, BackdropCard } from './components/Backdrop/BackdropPage';
+export type { BackdropPageAction, BackdropPageHeaderProps, BackdropPageHeaderSize, BackdropBackLinkProps, BackdropSectionHeaderProps, BackdropCardProps, BackdropCardSurface, BackdropCardPadding, } from './components/Backdrop/BackdropPage';
+export { BackdropIconTile, BackdropEmptyState, BackdropStat, BackdropStatRow, BackdropCallout } from './components/Backdrop/BackdropDisplay';
+export type { BackdropIconTileProps, BackdropIconTileSize, BackdropIconTileShape, BackdropIconTileTone, BackdropEmptyStateProps, BackdropStatProps, BackdropStatInlineProps, BackdropStatTileProps, BackdropStatTone, BackdropStatRowProps, BackdropCalloutProps, BackdropCalloutBoxProps, BackdropCalloutNoteProps, BackdropCalloutTone, } from './components/Backdrop/BackdropDisplay';
+export { BackdropField, BackdropInput, BackdropTextarea, BackdropSelect, BackdropSearchField, BackdropSwitch, BackdropRadioGroup, BackdropRadio, BackdropRadioCardGroup, BackdropRadioCard, } from './components/Backdrop/BackdropFields';
+export type { BackdropFieldProps, BackdropInputProps, BackdropTextareaProps, BackdropTextareaSize, BackdropSelectProps, BackdropSelectAppearance, BackdropSearchFieldProps, BackdropSwitchProps, BackdropRadioGroupProps, BackdropRadioProps, BackdropRadioCardGroupProps, BackdropRadioCardProps, } from './components/Backdrop/BackdropFields';
+export { BackdropSettingsRow, BackdropSettingsSection, BackdropSaveFooter, BackdropFlowHeader, BackdropResult } from './components/Backdrop/BackdropFlows';
+export type { BackdropSettingsRowProps, BackdropSettingsRowLayout, BackdropSettingsSectionProps, BackdropSaveFooterProps, BackdropFlowHeaderProps, BackdropResultProps, BackdropResultTone, BackdropResultDetail, } from './components/Backdrop/BackdropFlows';
+export { BackdropStatusMark, BackdropMeter, BackdropSummaryCard, BackdropChecklist, BackdropReviewCard, BackdropBoard, BackdropBoardCard, } from './components/Backdrop/BackdropData';
+export type { BackdropStatusMarkProps, BackdropStatusMarkKind, BackdropStatusMarkTone, BackdropStatusMarkSize, BackdropMeterProps, BackdropMeterLook, BackdropMeterTone, BackdropSummaryCardProps, BackdropSummaryCardSurface, BackdropChecklistProps, BackdropReviewCardProps, BackdropReviewCardLayout, BackdropBoardProps, BackdropBoardColumn, BackdropBoardCardProps, } from './components/Backdrop/BackdropData';
+export { backdropIconNames } from './backdrop-icons';
+export type { BackdropIconMeaning, BackdropIconName } from './backdrop-icons';
+export { BackdropList, BackdropListRow, BackdropKeyValueList, BackdropDataTable, BackdropListToolbar } from './components/Backdrop/BackdropLists';
+export type { BackdropListProps, BackdropListSurface, BackdropListRowProps, BackdropKeyValueItem, BackdropKeyValueLayout, BackdropKeyValueListProps, BackdropSortDirection, BackdropDataTableColumn, BackdropDataTableRowTarget, BackdropDataTableSelection, BackdropDataTableProps, BackdropListToolbarProps, } from './components/Backdrop/BackdropLists';
+export { BackdropThread, BackdropMessage, BackdropDaySeparator, BackdropComposer } from './components/Backdrop/BackdropConversation';
+export type { BackdropThreadProps, BackdropMessageProps, BackdropMessageDirection, BackdropDaySeparatorProps, BackdropComposerProps, BackdropComposerLook, BackdropComposerReplyProps, BackdropComposerAskProps, } from './components/Backdrop/BackdropConversation';
+export { BackdropBarChart, BackdropBarList, BackdropLineChart } from './components/Backdrop/BackdropCharts';
+export type { BackdropChartTone, BackdropChartTick, BackdropChartActionEmphasis, BackdropBarChartDatum, BackdropBarChartProps, BackdropBarListItem, BackdropBarListProps, BackdropLineChartEnd, BackdropLineChartPoint, BackdropLineChartMarker, BackdropLineChartProps, } from './components/Backdrop/BackdropCharts';
+export { BackdropQuickAction, BackdropAppCard, BackdropProfileStrip, BackdropMapCard } from './components/Backdrop/BackdropHub';
+export type { BackdropQuickActionProps, BackdropAppCardProps, BackdropAppCardLayout, BackdropProfileStripProps, BackdropMapCardProps, } from './components/Backdrop/BackdropHub';

package/dist/backdrop.js

@@ -0,0 +1,127 @@
+import { BackdropButton as a, BackdropIconButton as p, BackdropTextLink as d } from "./components/Backdrop/BackdropButton.js";
+import { BackdropTooltip as B } from "./components/Backdrop/BackdropTooltip.js";
+import { BackdropAvatar as e, BackdropAvatarStack as t, BackdropBadge as i, BackdropChip as l, BackdropPill as n, BackdropSoonTag as S, BackdropVisuallyHidden as m } from "./components/Backdrop/BackdropBasics.js";
+import { BackdropTabs as x } from "./components/Backdrop/BackdropTabs.js";
+import { BackdropFrame as u } from "./components/Backdrop/BackdropFrame.js";
+import { BackdropRail as h } from "./components/Backdrop/BackdropRail.js";
+import { BackdropSearchTrigger as T, BackdropStripAvatar as g, BackdropStripButton as v, BackdropStripChip as P, BackdropTopStrip as L } from "./components/Backdrop/BackdropTopStrip.js";
+import { BackdropAppLayer as M, BackdropContentSheet as b, BackdropHubSheet as w, BackdropSidePanel as y } from "./components/Backdrop/BackdropSheets.js";
+import { BackdropAppMenu as D } from "./components/Backdrop/BackdropAppMenu.js";
+import { BackdropDialog as G, BackdropMenuList as I, BackdropPopover as N, BackdropPopoverAnchor as V, BackdropSegmented as E, BackdropToast as K, BackdropToastRegion as O } from "./components/Backdrop/BackdropOverlays.js";
+import { BackdropChrome as j, useBackdropPanel as q } from "./components/Backdrop/BackdropChrome.js";
+import { BackdropAccountMenu as J, BackdropAllAppsPopover as U, BackdropGetStarted as W, BackdropGetStartedPanel as X, BackdropMatch as Y, BackdropMissionPopover as Z, BackdropProgress as _, BackdropSearchDialog as $, BackdropStepList as oo, BackdropTokensPopover as ro } from "./components/Backdrop/BackdropGlobalPanels.js";
+import { BackdropAllSet as po, BackdropAvailability as co, BackdropBulkAction as Bo, BackdropBulkBar as ko, BackdropCheckbox as eo, BackdropDisclosure as to, BackdropFilterButton as io, BackdropFilterPopover as lo, BackdropNextStepCard as no, BackdropOverflowMenu as So } from "./components/Backdrop/BackdropPatterns.js";
+import { BackdropBackLink as so, BackdropCard as xo, BackdropPageHeader as fo, BackdropSectionHeader as uo } from "./components/Backdrop/BackdropPage.js";
+import { BackdropCallout as ho, BackdropEmptyState as Ao, BackdropIconTile as To, BackdropStat as go, BackdropStatRow as vo } from "./components/Backdrop/BackdropDisplay.js";
+import { BackdropField as Lo, BackdropInput as Ro, BackdropRadio as Mo, BackdropRadioCard as bo, BackdropRadioCardGroup as wo, BackdropRadioGroup as yo, BackdropSearchField as Fo, BackdropSelect as Do, BackdropSwitch as Ho, BackdropTextarea as Go } from "./components/Backdrop/BackdropFields.js";
+import { BackdropFlowHeader as No, BackdropResult as Vo, BackdropSaveFooter as Eo, BackdropSettingsRow as Ko, BackdropSettingsSection as Oo } from "./components/Backdrop/BackdropFlows.js";
+import { BackdropBoard as jo, BackdropBoardCard as qo, BackdropChecklist as zo, BackdropMeter as Jo, BackdropReviewCard as Uo, BackdropStatusMark as Wo, BackdropSummaryCard as Xo } from "./components/Backdrop/BackdropData.js";
+import { backdropIconNames as Zo } from "./backdrop-icons.js";
+import { BackdropDataTable as $o, BackdropKeyValueList as or, BackdropList as rr, BackdropListRow as ar, BackdropListToolbar as pr } from "./components/Backdrop/BackdropLists.js";
+import { BackdropComposer as cr, BackdropDaySeparator as Br, BackdropMessage as kr, BackdropThread as er } from "./components/Backdrop/BackdropConversation.js";
+import { BackdropBarChart as ir, BackdropBarList as lr, BackdropLineChart as nr } from "./components/Backdrop/BackdropCharts.js";
+import { BackdropAppCard as mr, BackdropMapCard as sr, BackdropProfileStrip as xr, BackdropQuickAction as fr } from "./components/Backdrop/BackdropHub.js";
+export {
+  J as BackdropAccountMenu,
+  U as BackdropAllAppsPopover,
+  po as BackdropAllSet,
+  mr as BackdropAppCard,
+  M as BackdropAppLayer,
+  D as BackdropAppMenu,
+  co as BackdropAvailability,
+  e as BackdropAvatar,
+  t as BackdropAvatarStack,
+  so as BackdropBackLink,
+  i as BackdropBadge,
+  ir as BackdropBarChart,
+  lr as BackdropBarList,
+  jo as BackdropBoard,
+  qo as BackdropBoardCard,
+  Bo as BackdropBulkAction,
+  ko as BackdropBulkBar,
+  a as BackdropButton,
+  ho as BackdropCallout,
+  xo as BackdropCard,
+  eo as BackdropCheckbox,
+  zo as BackdropChecklist,
+  l as BackdropChip,
+  j as BackdropChrome,
+  cr as BackdropComposer,
+  b as BackdropContentSheet,
+  $o as BackdropDataTable,
+  Br as BackdropDaySeparator,
+  G as BackdropDialog,
+  to as BackdropDisclosure,
+  Ao as BackdropEmptyState,
+  Lo as BackdropField,
+  io as BackdropFilterButton,
+  lo as BackdropFilterPopover,
+  No as BackdropFlowHeader,
+  u as BackdropFrame,
+  W as BackdropGetStarted,
+  X as BackdropGetStartedPanel,
+  w as BackdropHubSheet,
+  p as BackdropIconButton,
+  To as BackdropIconTile,
+  Ro as BackdropInput,
+  or as BackdropKeyValueList,
+  nr as BackdropLineChart,
+  rr as BackdropList,
+  ar as BackdropListRow,
+  pr as BackdropListToolbar,
+  sr as BackdropMapCard,
+  Y as BackdropMatch,
+  I as BackdropMenuList,
+  kr as BackdropMessage,
+  Jo as BackdropMeter,
+  Z as BackdropMissionPopover,
+  no as BackdropNextStepCard,
+  So as BackdropOverflowMenu,
+  fo as BackdropPageHeader,
+  n as BackdropPill,
+  N as BackdropPopover,
+  V as BackdropPopoverAnchor,
+  xr as BackdropProfileStrip,
+  _ as BackdropProgress,
+  fr as BackdropQuickAction,
+  Mo as BackdropRadio,
+  bo as BackdropRadioCard,
+  wo as BackdropRadioCardGroup,
+  yo as BackdropRadioGroup,
+  h as BackdropRail,
+  Vo as BackdropResult,
+  Uo as BackdropReviewCard,
+  Eo as BackdropSaveFooter,
+  $ as BackdropSearchDialog,
+  Fo as BackdropSearchField,
+  T as BackdropSearchTrigger,
+  uo as BackdropSectionHeader,
+  E as BackdropSegmented,
+  Do as BackdropSelect,
+  Ko as BackdropSettingsRow,
+  Oo as BackdropSettingsSection,
+  y as BackdropSidePanel,
+  S as BackdropSoonTag,
+  go as BackdropStat,
+  vo as BackdropStatRow,
+  Wo as BackdropStatusMark,
+  oo as BackdropStepList,
+  g as BackdropStripAvatar,
+  v as BackdropStripButton,
+  P as BackdropStripChip,
+  Xo as BackdropSummaryCard,
+  Ho as BackdropSwitch,
+  x as BackdropTabs,
+  d as BackdropTextLink,
+  Go as BackdropTextarea,
+  er as BackdropThread,
+  K as BackdropToast,
+  O as BackdropToastRegion,
+  ro as BackdropTokensPopover,
+  B as BackdropTooltip,
+  L as BackdropTopStrip,
+  m as BackdropVisuallyHidden,
+  Zo as backdropIconNames,
+  q as useBackdropPanel
+};
+//# sourceMappingURL=backdrop.js.map

package/dist/backdrop.js.map

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

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

@@ -0,0 +1,55 @@
+import { ElementType, ReactNode } from 'react';
+export interface BackdropAppMenuItem {
+    key: string;
+    label: string;
+    /** 18px stroke icon. The folded strip shows only this. */
+    icon: ReactNode;
+    href?: string;
+    onClick?: () => void;
+    active?: boolean;
+    /** A count badge ("5" waiting approvals). */
+    count?: ReactNode;
+    /** Spoken with the count: "5 waiting". */
+    countLabel?: string;
+    /** Not built yet: the row shows a "Soon" tag and does not navigate. */
+    soon?: ReactNode;
+}
+export interface BackdropAppMenuSection {
+    /** A fixed 1–2 word group label ("Outreach"). Never collapsible. Omit for the first, unlabelled group. */
+    label?: string;
+    items: BackdropAppMenuItem[];
+}
+export interface BackdropAppMenuProps {
+    /** The app's name, beside its mark at the top. */
+    appName: string;
+    /** The app's 28px mark (ProductMark). */
+    mark: ReactNode;
+    /**
+     * The menu's main action. Always an OUTLINE button with a plus (round 5,
+     * decision 1): orange belongs to the page's own main action.
+     */
+    action: {
+        label: string;
+        onClick?: () => void;
+        href?: string;
+    };
+    sections: BackdropAppMenuSection[];
+    /** Settings, pinned to the bottom. Opens the hub's settings at this app. */
+    settings: BackdropAppMenuItem;
+    /**
+     * The first-time checklist pill above Settings ("Get started · 1 of 2"): a
+     * BackdropGetStarted. Gone once the steps are done.
+     */
+    getStarted?: ReactNode;
+    /**
+     * Folded to the 56px icon strip (round 5, decision 3): names move to
+     * tooltips, group labels become short dividers. `auto` (default) follows the
+     * frame's compact layout (below 1200px, or BackdropFrame `compact`).
+     */
+    folded?: boolean | 'auto';
+    /** The menu's landmark name: "Outbound menu". */
+    label: string;
+    linkComponent?: ElementType;
+    className?: string;
+}
+export declare function BackdropAppMenu(props: BackdropAppMenuProps): import("react").JSX.Element;

package/dist/components/Backdrop/BackdropAppMenu.js

@@ -0,0 +1,79 @@
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import l from "./BackdropAppMenu.module.css.js";
+import { cx as N } from "./cx.js";
+import { Plus as p } from "./icons.js";
+import { BackdropBadge as v, BackdropSoonTag as k } from "./BackdropBasics.js";
+import { BackdropTooltip as b } from "./BackdropTooltip.js";
+function x(a) {
+  const { folded: d = "auto", label: r, className: s } = a;
+  return /* @__PURE__ */ c("nav", { className: N(l.menu, s), "aria-label": r, "data-folded": String(d), children: [
+    d !== !0 && /* @__PURE__ */ e(g, { ...a }),
+    d !== !1 && /* @__PURE__ */ e(L, { ...a })
+  ] });
+}
+function u({ item: a, Link: d, folded: r }) {
+  const s = a.soon !== void 0, t = a.href !== void 0 && !s ? d : "button", i = a.href !== void 0 && !s ? { href: a.href } : { type: "button", "aria-disabled": s || void 0 }, n = /* @__PURE__ */ c(
+    t,
+    {
+      ...i,
+      onClick: s ? void 0 : a.onClick,
+      "aria-current": a.active ? "page" : void 0,
+      "aria-label": r ? a.label : void 0,
+      className: r ? l.foldedItem : l.item,
+      children: [
+        /* @__PURE__ */ e("span", { className: l.itemIcon, children: a.icon }),
+        !r && /* @__PURE__ */ e("span", { className: l.itemLabel, children: a.label }),
+        !r && a.count !== void 0 && /* @__PURE__ */ e(v, { label: a.countLabel, children: a.count }),
+        !r && s && /* @__PURE__ */ e(k, { children: a.soon }),
+        r && a.count !== void 0 && /* @__PURE__ */ e("span", { className: l.foldedDot, "aria-hidden": "true" })
+      ]
+    }
+  );
+  return r ? /* @__PURE__ */ e(b, { content: a.label, side: "right", labelsTrigger: !0, children: n }) : n;
+}
+function g({ appName: a, mark: d, action: r, sections: s, settings: t, getStarted: i, linkComponent: n = "a" }) {
+  const h = r.href !== void 0 ? n : "button";
+  return /* @__PURE__ */ c("div", { className: l.open, children: [
+    /* @__PURE__ */ c("div", { className: l.header, children: [
+      /* @__PURE__ */ e("span", { className: l.mark, children: d }),
+      /* @__PURE__ */ e("span", { className: l.appName, children: a })
+    ] }),
+    /* @__PURE__ */ c(h, { ...r.href !== void 0 ? { href: r.href } : { type: "button" }, onClick: r.onClick, className: l.action, children: [
+      /* @__PURE__ */ e(p, {}),
+      /* @__PURE__ */ e("span", { children: r.label })
+    ] }),
+    /* @__PURE__ */ e("div", { className: l.sections, children: s.map((o, m) => /* @__PURE__ */ c("div", { className: l.section, children: [
+      o.label && /* @__PURE__ */ e("p", { className: l.groupLabel, children: o.label }),
+      /* @__PURE__ */ e("ul", { className: l.list, children: o.items.map((f) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(u, { item: f, Link: n, folded: !1 }) }, f.key)) })
+    ] }, o.label ?? m)) }),
+    /* @__PURE__ */ e("div", { className: l.fill }),
+    i && /* @__PURE__ */ e("div", { className: l.getStarted, children: i }),
+    /* @__PURE__ */ e(u, { item: t, Link: n, folded: !1 })
+  ] });
+}
+function L({ mark: a, appName: d, action: r, sections: s, settings: t, linkComponent: i = "a" }) {
+  const n = r.href !== void 0 ? i : "button";
+  return /* @__PURE__ */ c("div", { className: l.folded, children: [
+    /* @__PURE__ */ e("span", { className: l.foldedMark, children: /* @__PURE__ */ e("span", { className: l.mark, role: "img", "aria-label": d, children: a }) }),
+    /* @__PURE__ */ e(b, { content: r.label, side: "right", labelsTrigger: !0, children: /* @__PURE__ */ e(
+      n,
+      {
+        ...r.href !== void 0 ? { href: r.href } : { type: "button" },
+        onClick: r.onClick,
+        "aria-label": r.label,
+        className: l.foldedAction,
+        children: /* @__PURE__ */ e(p, {})
+      }
+    ) }),
+    /* @__PURE__ */ e("ul", { className: l.foldedList, children: s.map((h, o) => /* @__PURE__ */ c("li", { className: l.foldedSection, children: [
+      o > 0 && /* @__PURE__ */ e("span", { className: l.foldedDivider, "aria-hidden": "true" }),
+      /* @__PURE__ */ e("ul", { className: l.list, children: h.items.map((m) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(u, { item: m, Link: i, folded: !0 }) }, m.key)) })
+    ] }, h.label ?? o)) }),
+    /* @__PURE__ */ e("div", { className: l.fill }),
+    /* @__PURE__ */ e(u, { item: t, Link: i, folded: !0 })
+  ] });
+}
+export {
+  x as BackdropAppMenu
+};
+//# sourceMappingURL=BackdropAppMenu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BackdropAppMenu.js","sources":["../../../src/components/Backdrop/BackdropAppMenu.tsx"],"sourcesContent":["import type { ElementType, ReactNode } from 'react'\nimport styles from './BackdropAppMenu.module.css'\nimport { cx } from './cx'\nimport { Plus } from './icons'\nimport { BackdropBadge, BackdropSoonTag } from './BackdropBasics'\nimport { BackdropTooltip } from './BackdropTooltip'\n\nexport interface BackdropAppMenuItem {\n  key: string\n  label: string\n  /** 18px stroke icon. The folded strip shows only this. */\n  icon: ReactNode\n  href?: string\n  onClick?: () => void\n  active?: boolean\n  /** A count badge (\"5\" waiting approvals). */\n  count?: ReactNode\n  /** Spoken with the count: \"5 waiting\". */\n  countLabel?: string\n  /** Not built yet: the row shows a \"Soon\" tag and does not navigate. */\n  soon?: ReactNode\n}\n\nexport interface BackdropAppMenuSection {\n  /** A fixed 1–2 word group label (\"Outreach\"). Never collapsible. Omit for the first, unlabelled group. */\n  label?: string\n  items: BackdropAppMenuItem[]\n}\n\nexport interface BackdropAppMenuProps {\n  /** The app's name, beside its mark at the top. */\n  appName: string\n  /** The app's 28px mark (ProductMark). */\n  mark: ReactNode\n  /**\n   * The menu's main action. Always an OUTLINE button with a plus (round 5,\n   * decision 1): orange belongs to the page's own main action.\n   */\n  action: { label: string; onClick?: () => void; href?: string }\n  sections: BackdropAppMenuSection[]\n  /** Settings, pinned to the bottom. Opens the hub's settings at this app. */\n  settings: BackdropAppMenuItem\n  /**\n   * The first-time checklist pill above Settings (\"Get started · 1 of 2\"): a\n   * BackdropGetStarted. Gone once the steps are done.\n   */\n  getStarted?: ReactNode\n  /**\n   * Folded to the 56px icon strip (round 5, decision 3): names move to\n   * tooltips, group labels become short dividers. `auto` (default) follows the\n   * frame's compact layout (below 1200px, or BackdropFrame `compact`).\n   */\n  folded?: boolean | 'auto'\n  /** The menu's landmark name: \"Outbound menu\". */\n  label: string\n  linkComponent?: ElementType\n  className?: string\n}\n\n/*\n * Layer 2's menu column. Open: 232px -- mark and app name, the outline main\n * action, the pages (groups past ~5 pages, one level), Settings at the bottom.\n * Folded: 56px of icons with the same order and the same active chip.\n *\n * `auto` renders both and lets CSS show one, so the switch costs no state and\n * no hydration. Only the visible one is in the accessibility tree.\n */\nexport function BackdropAppMenu(props: BackdropAppMenuProps) {\n  const { folded = 'auto', label, className } = props\n  return (\n    <nav className={cx(styles.menu, className)} aria-label={label} data-folded={String(folded)}>\n      {folded !== true && <OpenMenu {...props} />}\n      {folded !== false && <FoldedMenu {...props} />}\n    </nav>\n  )\n}\n\nfunction Row({ item, Link, folded }: { item: BackdropAppMenuItem; Link: ElementType; folded: boolean }) {\n  const isSoon = item.soon !== undefined\n  const Element: ElementType = item.href !== undefined && !isSoon ? Link : 'button'\n  const elementProps =\n    item.href !== undefined && !isSoon ? { href: item.href } : { type: 'button', 'aria-disabled': isSoon || undefined }\n  const row = (\n    <Element\n      {...elementProps}\n      onClick={isSoon ? undefined : item.onClick}\n      aria-current={item.active ? 'page' : undefined}\n      aria-label={folded ? item.label : undefined}\n      className={folded ? styles.foldedItem : styles.item}\n    >\n      <span className={styles.itemIcon}>{item.icon}</span>\n      {!folded && <span className={styles.itemLabel}>{item.label}</span>}\n      {!folded && item.count !== undefined && <BackdropBadge label={item.countLabel}>{item.count}</BackdropBadge>}\n      {!folded && isSoon && <BackdropSoonTag>{item.soon}</BackdropSoonTag>}\n      {folded && item.count !== undefined && <span className={styles.foldedDot} aria-hidden=\"true\" />}\n    </Element>\n  )\n  return folded ? (\n    <BackdropTooltip content={item.label} side=\"right\" labelsTrigger>\n      {row}\n    </BackdropTooltip>\n  ) : (\n    row\n  )\n}\n\nfunction OpenMenu({ appName, mark, action, sections, settings, getStarted, linkComponent = 'a' }: BackdropAppMenuProps) {\n  const ActionElement: ElementType = action.href !== undefined ? linkComponent : 'button'\n  return (\n    <div className={styles.open}>\n      <div className={styles.header}>\n        <span className={styles.mark}>{mark}</span>\n        <span className={styles.appName}>{appName}</span>\n      </div>\n      <ActionElement {...(action.href !== undefined ? { href: action.href } : { type: 'button' })} onClick={action.onClick} className={styles.action}>\n        <Plus />\n        <span>{action.label}</span>\n      </ActionElement>\n      <div className={styles.sections}>\n        {sections.map((section, index) => (\n          <div key={section.label ?? index} className={styles.section}>\n            {section.label && <p className={styles.groupLabel}>{section.label}</p>}\n            <ul className={styles.list}>\n              {section.items.map((item) => (\n                <li key={item.key}>\n                  <Row item={item} Link={linkComponent} folded={false} />\n                </li>\n              ))}\n            </ul>\n          </div>\n        ))}\n      </div>\n      <div className={styles.fill} />\n      {getStarted && <div className={styles.getStarted}>{getStarted}</div>}\n      <Row item={settings} Link={linkComponent} folded={false} />\n    </div>\n  )\n}\n\nfunction FoldedMenu({ mark, appName, action, sections, settings, linkComponent = 'a' }: BackdropAppMenuProps) {\n  const ActionElement: ElementType = action.href !== undefined ? linkComponent : 'button'\n  return (\n    <div className={styles.folded}>\n      <span className={styles.foldedMark}>\n        <span className={styles.mark} role=\"img\" aria-label={appName}>\n          {mark}\n        </span>\n      </span>\n      <BackdropTooltip content={action.label} side=\"right\" labelsTrigger>\n        <ActionElement\n          {...(action.href !== undefined ? { href: action.href } : { type: 'button' })}\n          onClick={action.onClick}\n          aria-label={action.label}\n          className={styles.foldedAction}\n        >\n          <Plus />\n        </ActionElement>\n      </BackdropTooltip>\n      <ul className={styles.foldedList}>\n        {sections.map((section, index) => (\n          <li key={section.label ?? index} className={styles.foldedSection}>\n            {index > 0 && <span className={styles.foldedDivider} aria-hidden=\"true\" />}\n            <ul className={styles.list}>\n              {section.items.map((item) => (\n                <li key={item.key}>\n                  <Row item={item} Link={linkComponent} folded />\n                </li>\n              ))}\n            </ul>\n          </li>\n        ))}\n      </ul>\n      <div className={styles.fill} />\n      <Row item={settings} Link={linkComponent} folded />\n    </div>\n  )\n}\n"],"names":["BackdropAppMenu","props","folded","label","className","jsxs","cx","styles","jsx","OpenMenu","FoldedMenu","Row","item","Link","isSoon","Element","elementProps","row","BackdropBadge","BackdropSoonTag","BackdropTooltip","appName","mark","action","sections","settings","getStarted","linkComponent","ActionElement","Plus","section","index"],"mappings":"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"}

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

@@ -0,0 +1,48 @@
+const e = "_menu_1m4z2_3", o = "_list_1m4z2_11", t = "_fill_1m4z2_19", _ = "_open_1m4z2_25", d = "_header_1m4z2_35", m = "_mark_1m4z2_43", l = "_appName_1m4z2_54", n = "_action_1m4z2_66", c = "_groupLabel_1m4z2_93", i = "_item_1m4z2_102", s = "_itemIcon_1m4z2_124", a = "_itemLabel_1m4z2_129", f = "_foldedItem_1m4z2_137", z = "_foldedAction_1m4z2_168", r = "_getStarted_1m4z2_173", p = "_folded_1m4z2_137", L = "_foldedMark_1m4z2_190", u = "_foldedList_1m4z2_220", b = "_foldedSection_1m4z2_229", g = "_foldedDivider_1m4z2_254", k = "_foldedDot_1m4z2_263", D = {
+  menu: e,
+  list: o,
+  fill: t,
+  open: _,
+  header: d,
+  mark: m,
+  appName: l,
+  action: n,
+  groupLabel: c,
+  item: i,
+  itemIcon: s,
+  itemLabel: a,
+  foldedItem: f,
+  foldedAction: z,
+  getStarted: r,
+  folded: p,
+  foldedMark: L,
+  foldedList: u,
+  foldedSection: b,
+  foldedDivider: g,
+  foldedDot: k
+};
+export {
+  n as action,
+  l as appName,
+  D as default,
+  t as fill,
+  p as folded,
+  z as foldedAction,
+  g as foldedDivider,
+  k as foldedDot,
+  f as foldedItem,
+  u as foldedList,
+  L as foldedMark,
+  b as foldedSection,
+  r as getStarted,
+  c as groupLabel,
+  d as header,
+  i as item,
+  s as itemIcon,
+  a as itemLabel,
+  o as list,
+  m as mark,
+  e as menu,
+  _ as open
+};
+//# sourceMappingURL=BackdropAppMenu.module.css.js.map

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

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

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

@@ -0,0 +1,129 @@
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+export interface BackdropBadgeProps {
+    /** A count, or a one-word tag such as "New". */
+    children: ReactNode;
+    /**
+     * `ink` (default): white on ink, the app menu's counts and Help's "New".
+     * `muted`: grey on the panel, a count that should not pull the eye.
+     */
+    tone?: 'ink' | 'muted';
+    /** Screen-reader text when the visible badge is a bare number. */
+    label?: string;
+    className?: string;
+}
+export declare function BackdropBadge({ children, tone, label, className }: BackdropBadgeProps): import("react").JSX.Element;
+/**
+ * What a chip is for. Every kind is 34px, fully round, 14px medium.
+ *
+ * - `filter` (default): a toggle in a filter row, ink-filled when on.
+ * - `choice`: one answer among several (a setup question). Ink-filled with a
+ *   leading check when chosen, so the state never rests on colour alone.
+ * - `tag`: a value already picked, on the panel grey. With `removeLabel` it
+ *   carries a × button; the chip itself is not a control.
+ * - `add`: the action at the end of a tag row, a leading plus on the hairline.
+ * - `action` (Batch 4): a one-press action drawn as a resting chip, with the
+ *   caller's leading icon if any: a composer's quick insert ("Video link") or
+ *   a suggested question ("What are tokens?"). A plain button, never pressed.
+ */
+export type BackdropChipKind = 'filter' | 'choice' | 'tag' | 'add' | 'action';
+export interface BackdropChipProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    children: ReactNode;
+    /** The filter this chip stands for is on, or this choice is chosen. Drawn ink-filled. */
+    selected?: boolean;
+    /** A count after the label ("Running 5"). */
+    count?: ReactNode;
+    /** Leading icon, 16px (a channel glyph, say). A chosen `choice` shows its check here instead. */
+    icon?: ReactNode;
+    kind?: BackdropChipKind;
+    /**
+     * `choice` only. `multiple` (default): each chip is a toggle, `aria-pressed`.
+     * `single`: the chips are a radio group, `role="radio"` with `aria-checked`;
+     * the caller wraps them in an element with `role="radiogroup"` and a name.
+     */
+    selectionMode?: 'single' | 'multiple';
+    /**
+     * `tag` only. The × button's accessible name, translated by the caller:
+     * "Remove LinkedIn". Without it the tag renders with no × at all.
+     * Stage A: the button is markup only; removing is Stage B's handler.
+     */
+    removeLabel?: string;
+}
+/** A filter chip: a toggle (aria-pressed), so a row of them is a filter group. */
+export declare function BackdropChip({ children, selected, count, icon, kind, selectionMode, removeLabel, className, type, ...rest }: BackdropChipProps): import("react").JSX.Element;
+export type BackdropPillTone = 'success' | 'neutral' | 'warning' | 'danger' | 'info' | 'ink';
+/** `soft` (default): a tinted ground. `outline`: no ground, a 1px edge in the tone. */
+export type BackdropPillAppearance = 'soft' | 'outline';
+export interface BackdropPillProps {
+    /** The status word: "Running", "Paused", "Needs approval". */
+    children: ReactNode;
+    tone?: BackdropPillTone;
+    /** The leading status dot. Off for a plain tag such as a title's "Draft". */
+    dot?: boolean;
+    /**
+     * A leading 16px icon in place of the dot, drawn in the tone's dot colour.
+     * Decorative: the word carries the meaning.
+     */
+    icon?: ReactNode;
+    appearance?: BackdropPillAppearance;
+    className?: string;
+}
+/** A status pill. Not interactive; the word carries the meaning, the colour repeats it. */
+export declare function BackdropPill({ children, tone, dot, icon, appearance, className }: BackdropPillProps): import("react").JSX.Element;
+export interface BackdropSoonTagProps {
+    /** The word, translated: "Soon". */
+    children: ReactNode;
+    className?: string;
+}
+/** The small tag beside an app that is not built yet, in menus and the All apps popover. */
+export declare function BackdropSoonTag({ children, className }: BackdropSoonTagProps): import("react").JSX.Element;
+export type BackdropAvatarTone = 'ink' | 'sand' | 'slate' | 'sage' | 'stone';
+export type BackdropAvatarSize = 24 | 32 | 36 | 40 | 44 | 48 | 56 | 64;
+export interface BackdropAvatarProps {
+    /** A person's name or email; the two letters are derived the Hub's way. */
+    name: string;
+    /** Override the derived letters. */
+    initials?: string;
+    /** 24–40 in lists and menus; 44–64 for a profile head or a focus flow. */
+    size?: BackdropAvatarSize;
+    tone?: BackdropAvatarTone;
+    /** Square with rounded corners, for a company rather than a person. */
+    square?: boolean;
+    /** Hidden from assistive tech when the name is already printed beside it. */
+    decorative?: boolean;
+    /**
+     * A small badge on the bottom-right corner (a channel glyph). Pass a 16px
+     * icon; it sits on a white disc ringed off from the avatar. Decorative: name
+     * the channel in text beside the avatar if it matters.
+     */
+    badge?: ReactNode;
+    className?: string;
+}
+export declare function BackdropAvatar({ name, initials, size, tone, square, decorative, badge, className }: BackdropAvatarProps): import("react").JSX.Element;
+export interface BackdropAvatarStackPerson {
+    name: string;
+    initials?: string;
+    tone?: BackdropAvatarTone;
+}
+export interface BackdropAvatarStackProps {
+    people: BackdropAvatarStackPerson[];
+    /** How many avatars show before the rest fold into "+N". Default 3. */
+    max?: number;
+    size?: BackdropAvatarSize;
+    /** The group's accessible name, translated by the caller: "People on this team". */
+    label: string;
+    /**
+     * Screen-reader text for the "+N" bubble, translated by the caller:
+     * "and 4 more". Without it the bubble announces as "+4".
+     */
+    overflowLabel?: string;
+    className?: string;
+}
+/**
+ * Overlapping avatars, each ringed in white so the edges stay legible, with
+ * the rest folded into a "+N" bubble. Each person is named to assistive tech;
+ * the stack is a labelled group.
+ */
+export declare function BackdropAvatarStack({ people, max, size, label, overflowLabel, className }: BackdropAvatarStackProps): import("react").JSX.Element;
+export declare function BackdropVisuallyHidden({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;