npm - @artstorefronts/arthelper-nav - Versions diffs - 0.1.0-alpha.0 - Mend

@artstorefronts/arthelper-nav 0.1.0-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (51) hide show

package/dist/index.css ADDED Viewed

@@ -0,0 +1,509 @@
+/* @artstorefronts/arthelper-nav — the ArtHelper suite bar.
+ *
+ * Every selector is `ahsuite-` prefixed and no Tailwind utility appears anywhere,
+ * because client, town-square and marketing each own a separate Tailwind v4
+ * CSS-first config and purge scope. Hosts import this by deep path:
+ *   @import '@artstorefronts/arthelper-nav/dist/index.css';
+ *
+ * Two deliberate departures from the prototype:
+ *  1. Collapsed state is keyed off `data-collapsed="true"` on the bar and on the
+ *     docked trigger, not a class on <body>. A package must never mutate its host's
+ *     <body>.
+ *  2. `position: sticky` is opt-in per host via the `ahsuite-bar--sticky` modifier
+ *     (the NavBar `sticky` prop), not baked into `.ahsuite-bar`. A host that is a
+ *     fixed-height flex column never scrolls its document and does not want it.
+ */
+/* ---------------------------------------------------------------------------
+ * Tokens. `.ahsuite-panel` inherits from `.ahsuite-bar`; `.ahsuite-docked` lives
+ * in the host's own header and so carries its own copy.
+ * Dark "Forest" is the default.
+ * ------------------------------------------------------------------------- */
+.ahsuite-bar,
+.ahsuite-docked {
+  --ahsuite-bar-bg: #12211a;
+  --ahsuite-bar-border: #ffffff1f;
+  --ahsuite-waffle-icon: #c4d2c8;
+  --ahsuite-waffle-hover-bg: #ffffff1f;
+  --ahsuite-waffle-hover-icon: #9fd9b4;
+  --ahsuite-wordmark: #fff;
+  --ahsuite-divider: #ffffff1f;
+  --ahsuite-chip-bg: #ffffff1f;
+  --ahsuite-chip-icon: #c4d2c8;
+  --ahsuite-chip-hover-bg: #ffffff2e;
+  --ahsuite-chip-hover-icon: #9fd9b4;
+  --ahsuite-chip-active-bg: transparent;
+  --ahsuite-chip-active-image: linear-gradient(180deg, #3dbe66, #2aa34f);
+  --ahsuite-chip-active-icon: #fff;
+  --ahsuite-label: #c4d2c8;
+  --ahsuite-label-active: #fff;
+  --ahsuite-surface-bg: #12211a;
+  --ahsuite-surface-border: #ffffff1f;
+  --ahsuite-control-border: #ffffff2e;
+  --ahsuite-row-hover-bg: #ffffff1f;
+  --ahsuite-accent-text: #9fd9b4;
+  --ahsuite-tiles-justify: flex-start;
+}
+.ahsuite-bar[data-theme='light'],
+.ahsuite-docked[data-theme='light'] {
+  --ahsuite-bar-bg: #fff;
+  --ahsuite-bar-border: #e6e1d5;
+  --ahsuite-waffle-icon: #4a5951;
+  --ahsuite-waffle-hover-bg: #f1ede2;
+  --ahsuite-waffle-hover-icon: #2e9e58;
+  --ahsuite-wordmark: #12211a;
+  --ahsuite-divider: #e6e1d5;
+  --ahsuite-chip-bg: #f1ede2;
+  --ahsuite-chip-icon: #4a5951;
+  --ahsuite-chip-hover-bg: #e4f4e8;
+  --ahsuite-chip-hover-icon: #2e9e58;
+  --ahsuite-label: #4a5951;
+  --ahsuite-label-active: #12211a;
+  --ahsuite-surface-bg: #fff;
+  --ahsuite-surface-border: #e6e1d5;
+  --ahsuite-control-border: #e6e1d5;
+  --ahsuite-row-hover-bg: #f1ede2;
+  --ahsuite-accent-text: #2e9e58;
+}
+/* ---------------------------------------------------------------------------
+ * The bar. In normal flow, never fixed and never portalled, so the page shifts
+ * down exactly once. box-sizing: border-box means the measured height including
+ * the 1px border is exactly 56px.
+ * ------------------------------------------------------------------------- */
+.ahsuite-bar {
+  box-sizing: border-box;
+  height: 56px;
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 10px;
+  padding: 0 12px;
+  width: 100%;
+  background: var(--ahsuite-bar-bg);
+  background-color: var(--ahsuite-bar-bg);
+  border-bottom: 1px solid var(--ahsuite-bar-border);
+  font-family: inherit;
+  color: var(--ahsuite-label);
+  isolation: isolate;
+  visibility: visible;
+  /* `visibility 0s linear 0s` (no delay) is the expand half of the delayed-visibility
+   * pair below: on the way back in the bar must be visible for frame one, so the
+   * height and opacity have something to animate. */
+  transition:
+    height 180ms ease,
+    opacity 180ms ease,
+    visibility 0s linear 0s;
+}
+.ahsuite-bar * {
+  box-sizing: border-box;
+}
+.ahsuite-bar--sticky {
+  position: sticky;
+  top: 0;
+  z-index: 60;
+}
+/* Collapse ACTUALLY minimizes: the bar leaves layout completely, reserving
+ * nothing, so the host header rises and the page gets all 56px back.
+ *
+ * `visibility` is the load-bearing declaration, and the only one here that removes
+ * the bar from the ACCESSIBILITY TREE and the TAB ORDER. `height: 0`, `opacity: 0`,
+ * `overflow: hidden` and `pointer-events: none` do none of those three things: a bar
+ * collapsed with only those is still announced as the "ArtHelper suite" navigation
+ * region and still takes Tab focus, so a viewer tabbing from the top of the page
+ * lands on an invisible "Show the suite bar" button and then an invisible wordmark
+ * link that navigates off-site. `.ahsuite-docked` above already gets this right.
+ *
+ * It has to be DELAYED, not immediate: `visibility` is a discrete property, so
+ * `visibility 0s linear 180ms` holds it at `visible` for the whole slide and flips it
+ * the instant the height and opacity land — the same delayed-visibility pair
+ * `.ahsuite-tiles` already uses below. Setting it without the delay would make the
+ * bar vanish in one frame instead of animating.
+ *
+ * It also takes the mobile dropdown with it, which `overflow: hidden` cannot:
+ * `.ahsuite-panel` is `position: fixed`, so it is not clipped by an ancestor's
+ * overflow, but `visibility` inherits regardless of positioning. Together with the
+ * `.ahsuite-trigger` that opens it becoming unfocusable, that is what makes the
+ * ghost panel unreachable below 768px rather than merely closed after the fact. */
+.ahsuite-bar[data-collapsed='true'] {
+  height: 0;
+  opacity: 0;
+  overflow: hidden;
+  border-bottom-width: 0;
+  pointer-events: none;
+  visibility: hidden;
+  transition:
+    height 180ms ease,
+    opacity 180ms ease,
+    visibility 0s linear 180ms;
+}
+.ahsuite-waffle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: 0;
+  border-radius: 8px;
+  color: var(--ahsuite-waffle-icon);
+  cursor: pointer;
+  flex: 0 0 auto;
+  font: inherit;
+}
+.ahsuite-waffle:hover {
+  color: var(--ahsuite-waffle-hover-icon);
+  background: var(--ahsuite-waffle-hover-bg);
+}
+.ahsuite-waffle svg {
+  display: block;
+}
+.ahsuite-wordmark {
+  font-weight: 600;
+  color: var(--ahsuite-wordmark);
+  font-size: 15px;
+  line-height: 1;
+  letter-spacing: -0.01em;
+  white-space: nowrap;
+  flex: 0 0 auto;
+  text-decoration: none;
+}
+.ahsuite-divider {
+  display: block;
+  width: 1px;
+  height: 20px;
+  background: var(--ahsuite-divider);
+  flex: 0 0 auto;
+}
+.ahsuite-bar[data-collapsed='true'] .ahsuite-divider {
+  display: none;
+}
+/* ---------------------------------------------------------------------------
+ * Desktop tile row. `alignment` drives justify-content and nothing else.
+ * ------------------------------------------------------------------------- */
+.ahsuite-tiles {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  justify-content: var(--ahsuite-tiles-justify);
+  overflow: hidden;
+  max-width: 1200px;
+  opacity: 1;
+  transform: translateY(0);
+  transition:
+    opacity 180ms ease,
+    max-width 180ms ease,
+    transform 180ms ease;
+}
+.ahsuite-bar[data-collapsed='true'] .ahsuite-tiles {
+  opacity: 0;
+  max-width: 0;
+  transform: translateY(-4px);
+  visibility: hidden;
+  transition:
+    opacity 180ms ease,
+    max-width 180ms ease,
+    transform 180ms ease,
+    visibility 0s linear 180ms;
+}
+.ahsuite-tile {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  width: 88px;
+  height: 52px;
+  flex: 0 0 88px;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: 0;
+  border-radius: 8px;
+  cursor: pointer;
+  font: inherit;
+  color: var(--ahsuite-label);
+  text-decoration: none;
+}
+/* An active app with no destination is an indicator, not a link. */
+span.ahsuite-tile,
+span.ahsuite-row {
+  cursor: default;
+}
+.ahsuite-chip {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  flex: 0 0 28px;
+  border-radius: 8px;
+  background: var(--ahsuite-chip-bg);
+  background-color: var(--ahsuite-chip-bg);
+  color: var(--ahsuite-chip-icon);
+}
+.ahsuite-chip svg {
+  display: block;
+  width: 16px;
+  height: 16px;
+}
+.ahsuite-tile:hover .ahsuite-chip {
+  background: var(--ahsuite-chip-hover-bg);
+  background-color: var(--ahsuite-chip-hover-bg);
+  color: var(--ahsuite-chip-hover-icon);
+}
+.ahsuite-label {
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1;
+  color: var(--ahsuite-label);
+  white-space: nowrap;
+}
+/* accent_color arrives as a single flat fill: --ahsuite-chip-active-bg is the
+ * colour and --ahsuite-chip-active-image is switched to none. */
+.ahsuite-chip--active,
+.ahsuite-tile--active .ahsuite-chip--active,
+.ahsuite-tile--active:hover .ahsuite-chip--active {
+  background-color: var(--ahsuite-chip-active-bg);
+  background-image: var(--ahsuite-chip-active-image);
+  color: var(--ahsuite-chip-active-icon);
+}
+.ahsuite-tile--active .ahsuite-label {
+  font-weight: 600;
+  color: var(--ahsuite-label-active);
+}
+/* ---------------------------------------------------------------------------
+ * The docked restore control, placed by the host in its own header. Only visible
+ * while the bar is minimized, and the only way back. Deliberately neutral
+ * greys — it sits on the host's surface, not the bar's.
+ * ------------------------------------------------------------------------- */
+.ahsuite-docked {
+  display: none;
+}
+.ahsuite-docked[data-collapsed='true'] {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin-left: 8px;
+  padding: 2px 8px 2px 2px;
+  background: transparent;
+  border: 1px solid #8080804d;
+  border-radius: 10px;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  flex: 0 0 auto;
+}
+.ahsuite-docked[data-collapsed='true']:hover {
+  background: #80808026;
+}
+.ahsuite-docked * {
+  box-sizing: border-box;
+}
+.ahsuite-docked .ahsuite-waffle-mini {
+  display: block;
+  width: 14px;
+  height: 14px;
+  flex: 0 0 14px;
+}
+/* ---------------------------------------------------------------------------
+ * Below the md breakpoint (768px) the tile row is replaced by a labelled
+ * dropdown trigger at least 44px tall.
+ * ------------------------------------------------------------------------- */
+.ahsuite-trigger {
+  display: none;
+  align-items: center;
+  gap: 8px;
+  min-height: 44px;
+  padding: 6px 10px;
+  background: transparent;
+  border: 1px solid var(--ahsuite-control-border);
+  border-radius: 8px;
+  color: var(--ahsuite-label);
+  cursor: pointer;
+  font: inherit;
+  flex: 0 1 auto;
+}
+.ahsuite-trigger:hover {
+  background: var(--ahsuite-row-hover-bg);
+}
+.ahsuite-trigger-label {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--ahsuite-label-active);
+  line-height: 1;
+  white-space: nowrap;
+}
+.ahsuite-trigger .ahsuite-chevron {
+  width: 18px;
+  height: 18px;
+  display: block;
+  color: var(--ahsuite-label);
+  flex: 0 0 18px;
+}
+.ahsuite-panel {
+  display: none;
+  position: fixed;
+  top: 62px;
+  left: 12px;
+  right: 12px;
+  z-index: 61;
+  padding: 6px;
+  background: var(--ahsuite-surface-bg);
+  border: 1px solid var(--ahsuite-surface-border);
+  border-radius: 12px;
+  font-family: inherit;
+}
+.ahsuite-panel-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 44px;
+  padding: 0 8px;
+  border-bottom: 1px solid var(--ahsuite-surface-border);
+  margin-bottom: 4px;
+}
+.ahsuite-panel-title {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  color: var(--ahsuite-accent-text);
+}
+.ahsuite-close {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 36px;
+  padding: 0 10px;
+  background: transparent;
+  border: 1px solid var(--ahsuite-control-border);
+  border-radius: 8px;
+  color: var(--ahsuite-label);
+  font: inherit;
+  font-size: 12px;
+  cursor: pointer;
+}
+.ahsuite-close:hover {
+  background: var(--ahsuite-row-hover-bg);
+  color: var(--ahsuite-chip-hover-icon);
+}
+.ahsuite-close svg {
+  width: 14px;
+  height: 14px;
+  display: block;
+}
+.ahsuite-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  min-height: 44px;
+  padding: 6px 8px;
+  background: transparent;
+  border: 0;
+  border-radius: 8px;
+  color: var(--ahsuite-label);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  text-decoration: none;
+}
+.ahsuite-row:hover {
+  background: var(--ahsuite-row-hover-bg);
+}
+.ahsuite-row:hover .ahsuite-chip {
+  background: var(--ahsuite-chip-hover-bg);
+  background-color: var(--ahsuite-chip-hover-bg);
+  color: var(--ahsuite-chip-hover-icon);
+}
+.ahsuite-row:hover .ahsuite-chip--active {
+  background-color: var(--ahsuite-chip-active-bg);
+  background-image: var(--ahsuite-chip-active-image);
+  color: var(--ahsuite-chip-active-icon);
+}
+.ahsuite-row-label {
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1;
+  color: var(--ahsuite-label);
+}
+.ahsuite-row--active .ahsuite-row-label {
+  font-weight: 600;
+  color: var(--ahsuite-label-active);
+}
+@media (max-width: 767px) {
+  .ahsuite-tiles {
+    display: none;
+  }
+  .ahsuite-trigger {
+    display: inline-flex;
+  }
+  .ahsuite-panel {
+    display: block;
+  }
+  .ahsuite-panel[hidden] {
+    display: none;
+  }
+}
+/* The collapsed selectors have to be repeated here. `.ahsuite-bar[data-collapsed='true']`
+ * outranks a bare `.ahsuite-bar` on specificity, so listing only the base classes would
+ * leave the collapse transitions running under reduced motion — and, worse, would leave
+ * `visibility` deferred by 180ms with no animation to wait for, i.e. 180ms of an
+ * invisible-but-focusable bar. */
+@media (prefers-reduced-motion: reduce) {
+  .ahsuite-bar,
+  .ahsuite-bar[data-collapsed='true'],
+  .ahsuite-tiles,
+  .ahsuite-bar[data-collapsed='true'] .ahsuite-tiles {
+    transition: none;
+  }
+}

package/dist/index.d.ts ADDED Viewed

@@ -0,0 +1,13 @@
+export { useNav } from './context.js';
+export { COLLAPSED_COOKIE } from './cookie.js';
+export { FALLBACK_CONFIG } from './fallback.js';
+export { NavBar } from './nav-bar.js';
+export { NavTrigger } from './nav-trigger.js';
+export { NavProvider } from './provider.js';
+export { resolveApps } from './resolve.js';
+export type { NavContextValue } from './context.js';
+export type { NavBarProps } from './nav-bar.js';
+export type { NavTriggerProps } from './nav-trigger.js';
+export type { NavProviderProps } from './provider.js';
+export type { NavAlignment, NavApp, NavAppClickArgs, NavConfigPayload, NavLogo, NavTheme, NavThemeMode, ResolvedNavApp, } from './types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,YAAY,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAChD,YAAY,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACxD,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtD,YAAY,EACV,YAAY,EACZ,MAAM,EACN,eAAe,EACf,gBAAgB,EAChB,OAAO,EACP,QAAQ,EACR,YAAY,EACZ,cAAc,GACf,MAAM,YAAY,CAAC"}

package/dist/index.js ADDED Viewed

@@ -0,0 +1,8 @@
+export { useNav } from './context.js';
+export { COLLAPSED_COOKIE } from './cookie.js';
+export { FALLBACK_CONFIG } from './fallback.js';
+export { NavBar } from './nav-bar.js';
+export { NavTrigger } from './nav-trigger.js';
+export { NavProvider } from './provider.js';
+export { resolveApps } from './resolve.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC"}

package/dist/nav-bar.d.ts ADDED Viewed

@@ -0,0 +1,13 @@
+interface NavBarProps {
+    /**
+     * Opt in per host. A host whose document scrolls (town-square) needs sticky;
+     * a host that is a fixed-height flex column (client) does not, and sticky there
+     * would be inert dead weight. Default false — the bar is always in normal flow.
+     */
+    sticky?: boolean;
+    className?: string;
+}
+declare function NavBar({ sticky, className }: NavBarProps): import("react/jsx-runtime").JSX.Element;
+export { NavBar };
+export type { NavBarProps };
+//# sourceMappingURL=nav-bar.d.ts.map

package/dist/nav-bar.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"nav-bar.d.ts","sourceRoot":"","sources":["../src/nav-bar.tsx"],"names":[],"mappings":"AASA,UAAU,WAAW;IACnB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAsED,iBAAS,MAAM,CAAC,EAAE,MAAc,EAAE,SAAS,EAAE,EAAE,WAAW,2CA6HzD;AAED,OAAO,EAAE,MAAM,EAAE,CAAC;AAClB,YAAY,EAAE,WAAW,EAAE,CAAC"}

package/dist/nav-bar.js ADDED Viewed

@@ -0,0 +1,91 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown, X } from 'lucide-react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useNav } from './context.js';
+import { NavIcon, WaffleIcon } from './icons.js';
+import { themeVars } from './theme.js';
+function chipClass(entry) {
+    return entry.active ? 'ahsuite-chip ahsuite-chip--active' : 'ahsuite-chip';
+}
+function Chip({ entry }) {
+    return (_jsx("span", { className: chipClass(entry), children: _jsx(NavIcon, { name: entry.app.icon }) }));
+}
+/**
+ * One desktop tile. A real anchor, so the browser navigates natively and the
+ * address bar becomes the destination — `activate` only fires the host's seam.
+ * The host's own app without a destination renders as an inert indicator instead.
+ */
+function Tile({ entry, onActivate }) {
+    const className = entry.active ? 'ahsuite-tile ahsuite-tile--active' : 'ahsuite-tile';
+    if (!entry.navigable) {
+        return (_jsxs("span", { "aria-current": entry.active ? 'page' : undefined, className: className, children: [_jsx(Chip, { entry: entry }), _jsx("span", { className: "ahsuite-label", children: entry.app.label })] }));
+    }
+    return (_jsxs("a", { "aria-current": entry.active ? 'page' : undefined, className: className, href: entry.app.href, onClick: () => onActivate(entry), children: [_jsx(Chip, { entry: entry }), _jsx("span", { className: "ahsuite-label", children: entry.app.label })] }));
+}
+/** One dropdown row below the md breakpoint. Shares Tile's activation handler exactly. */
+function Row({ entry, onActivate }) {
+    const className = entry.active ? 'ahsuite-row ahsuite-row--active' : 'ahsuite-row';
+    if (!entry.navigable) {
+        return (_jsxs("span", { "aria-current": entry.active ? 'page' : undefined, className: className, children: [_jsx(Chip, { entry: entry }), _jsx("span", { className: "ahsuite-row-label", children: entry.app.label })] }));
+    }
+    return (_jsxs("a", { "aria-current": entry.active ? 'page' : undefined, className: className, href: entry.app.href, onClick: () => onActivate(entry), children: [_jsx(Chip, { entry: entry }), _jsx("span", { className: "ahsuite-row-label", children: entry.app.label })] }));
+}
+function NavBar({ sticky = false, className }) {
+    const { config, apps, activeApp, collapsed, toggle, activate } = useNav();
+    const [open, setOpen] = useState(false);
+    const panelRef = useRef(null);
+    const triggerRef = useRef(null);
+    // The dropdown must be dismissable without leaving the page: Escape, the Close
+    // button, or a pointer anywhere outside it.
+    useEffect(() => {
+        if (!open) {
+            return undefined;
+        }
+        const onKeyDown = (event) => {
+            if (event.key !== 'Escape') {
+                return;
+            }
+            setOpen(false);
+            triggerRef.current?.focus();
+        };
+        const onPointerDown = (event) => {
+            const target = event.target;
+            if (!target) {
+                return;
+            }
+            if (panelRef.current?.contains(target) || triggerRef.current?.contains(target)) {
+                return;
+            }
+            setOpen(false);
+        };
+        document.addEventListener('keydown', onKeyDown);
+        document.addEventListener('mousedown', onPointerDown);
+        return () => {
+            document.removeEventListener('keydown', onKeyDown);
+            document.removeEventListener('mousedown', onPointerDown);
+        };
+    }, [open]);
+    // Collapsing while the dropdown is open must not leave it open to reappear on the
+    // next expand. This handles that one direction only, and deliberately so: it fires
+    // on a CHANGE of `collapsed`, so it could never have policed a panel opened while
+    // already collapsed. What makes that unreachable is the stylesheet — a collapsed
+    // `.ahsuite-bar` is `visibility: hidden`, which takes `.ahsuite-trigger` out of the
+    // tab order and the panel (a `position: fixed` descendant that `overflow: hidden`
+    // does not clip) out of the accessibility tree with it. There is no longer a way to
+    // reach the trigger to open it, so this effect is not the guard — it is the tidy-up.
+    useEffect(() => {
+        if (!collapsed) {
+            return;
+        }
+        setOpen(false);
+    }, [collapsed]);
+    const onActivate = useCallback((entry) => {
+        activate(entry);
+        setOpen(false);
+    }, [activate]);
+    const classes = ['ahsuite-bar', sticky ? 'ahsuite-bar--sticky' : '', className ?? ''].filter(Boolean).join(' ');
+    return (_jsxs("div", { "aria-label": "ArtHelper suite", className: classes, "data-collapsed": collapsed ? 'true' : 'false', "data-theme": config.theme.mode, role: "navigation", style: themeVars(config.theme), children: [_jsx("button", { "aria-expanded": !collapsed, "aria-label": collapsed ? 'Show the suite bar' : 'Hide the suite bar', className: "ahsuite-waffle", onClick: toggle, type: "button", children: _jsx(WaffleIcon, {}) }), config.logo.href ? (_jsx("a", { className: "ahsuite-wordmark", href: config.logo.href, children: config.logo.label })) : (_jsx("span", { className: "ahsuite-wordmark", children: config.logo.label })), _jsx("span", { "aria-hidden": "true", className: "ahsuite-divider" }), _jsx("div", { className: "ahsuite-tiles", children: apps.map((entry) => (_jsx(Tile, { entry: entry, onActivate: onActivate }, entry.app.id))) }), _jsxs("button", { "aria-controls": "ahsuite-panel", "aria-expanded": open, "aria-haspopup": "true", className: "ahsuite-trigger", onClick: () => setOpen((current) => !current), ref: triggerRef, type: "button", children: [activeApp ? _jsx(Chip, { entry: activeApp }) : null, _jsx("span", { className: "ahsuite-trigger-label", children: activeApp?.app.label ?? 'Apps' }), _jsx(ChevronDown, { "aria-hidden": "true", className: "ahsuite-chevron", height: 18, strokeWidth: 2, width: 18 })] }), _jsxs("div", { "aria-label": "Apps", className: "ahsuite-panel", hidden: !open, id: "ahsuite-panel", ref: panelRef, role: "dialog", children: [_jsxs("div", { className: "ahsuite-panel-head", children: [_jsx("span", { className: "ahsuite-panel-title", children: "Apps" }), _jsxs("button", { "aria-label": "Close", className: "ahsuite-close", onClick: () => setOpen(false), type: "button", children: [_jsx(X, { "aria-hidden": "true", className: "ahsuite-icon", height: 14, strokeWidth: 2, width: 14 }), _jsx("span", { children: "Close" })] })] }), apps.map((entry) => (_jsx(Row, { entry: entry, onActivate: onActivate }, entry.app.id)))] })] }));
+}
+export { NavBar };
+//# sourceMappingURL=nav-bar.js.map

package/dist/nav-bar.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"nav-bar.js","sourceRoot":"","sources":["../src/nav-bar.tsx"],"names":[],"mappings":"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"}

package/dist/nav-trigger.d.ts ADDED Viewed

@@ -0,0 +1,16 @@
+interface NavTriggerProps {
+    className?: string;
+}
+/**
+ * The waffle plus active-app chip a host places by hand in its own header, beside
+ * its logo. This is the RESTORE control: while the bar is collapsed it is the only
+ * way back, so it is visibly interactive and always carries the restore label.
+ *
+ * It is display:none while the bar is expanded (and therefore out of the
+ * accessibility tree), which is why the label and aria-expanded are fixed rather
+ * than swapped — the bar's own waffle is the hide control.
+ */
+declare function NavTrigger({ className }: NavTriggerProps): import("react/jsx-runtime").JSX.Element;
+export { NavTrigger };
+export type { NavTriggerProps };
+//# sourceMappingURL=nav-trigger.d.ts.map

package/dist/nav-trigger.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"nav-trigger.d.ts","sourceRoot":"","sources":["../src/nav-trigger.tsx"],"names":[],"mappings":"AAMA,UAAU,eAAe;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;GAQG;AACH,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,EAAE,eAAe,2CAuBjD;AAED,OAAO,EAAE,UAAU,EAAE,CAAC;AACtB,YAAY,EAAE,eAAe,EAAE,CAAC"}