@kismet-ux/constellation 1.9.0 → 1.11.1

package/dist/layout/AppContentBands/app-content-bands.js

@@ -0,0 +1,65 @@
+import { jsx } from 'react/jsx-runtime';
+import cn from 'clsx';
+import * as React from 'react';
+import s from './app-content-bands.module.scss.js';
+
+/**
+ * Publish the band's height on the content area, as a CSS custom property.
+ *
+ * Anything else that sticks to the top of the same scrollport has to clear the
+ * header, and its height is not a constant — it grows with a wrapped toolbar,
+ * an error line, an environment banner. So it is measured and written where
+ * CSS can read it: `--app-content-header-height`, on the nearest content area
+ * (or the document, if the band is used outside one).
+ *
+ * This is the one part of a sticky band that cannot be CSS: a rendered height
+ * is a number the stylesheet has no way to ask for.
+ */
+function usePublishedHeight(ref, property, enabled) {
+    React.useLayoutEffect(() => {
+        const el = ref.current;
+        if (!el || !enabled)
+            return undefined;
+        const target = el.closest('[data-slot="app-content"]') ??
+            document.documentElement;
+        const write = () => {
+            target.style.setProperty(property, `${el.getBoundingClientRect().height}px`);
+        };
+        write();
+        const observer = new ResizeObserver(write);
+        observer.observe(el);
+        return () => {
+            observer.disconnect();
+            target.style.removeProperty(property);
+        };
+    }, [ref, property, enabled]);
+}
+/**
+ * The band at the top of a content area, pinned while the page scrolls.
+ *
+ * Opaque on purpose: it paints over the content passing beneath it, and a
+ * translucent one shows the list sliding through the title.
+ */
+function AppContentHeader({ children, className, el, sticky = true, ...props }) {
+    const ref = React.useRef(null);
+    usePublishedHeight(ref, '--app-content-header-height', sticky);
+    const El = (el ?? 'header');
+    return (jsx(El, { ref: ref, "data-slot": 'app-content-header', className: cn(s['app-content-header'], !sticky && s['band-static'], className), ...props, children: children }));
+}
+/**
+ * The band at the foot of a content area — a search field, a toolbar, the
+ * action that commits the page.
+ *
+ * Sticky, not fixed: fixed is measured against the viewport, so in an app with
+ * a sidebar the band runs underneath it and has to be inset by hand for every
+ * layout the sidebar can be in. Sticky is measured against this content area,
+ * which is where it belongs, and it costs real space at the end of the scroll
+ * instead of needing the page padded to clear it.
+ */
+function AppContentFooter({ children, className, el, ...props }) {
+    const El = (el ?? 'footer');
+    return (jsx(El, { "data-slot": 'app-content-footer', className: cn(s['app-content-footer'], className), ...props, children: children }));
+}
+
+export { AppContentFooter, AppContentHeader };
+//# sourceMappingURL=app-content-bands.js.map

package/dist/layout/AppContentBands/app-content-bands.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-content-bands.js","sources":["../../../src/layout/AppContentBands/app-content-bands.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\nimport s from './app-content-bands.module.scss';\n\nexport interface AppContentBandProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** The element to render. Defaults to `header` / `footer` respectively. */\n  el?: React.ElementType<React.HTMLAttributes<HTMLDivElement>>;\n}\n\n/*\n * The header measures itself, so its element has to accept a ref — which the\n * bare `ElementType` union does not promise (it spans every tag, including the\n * ones whose ref is not an HTMLElement).\n */\ntype BandElement = React.ElementType<\n  React.HTMLAttributes<HTMLElement> & { ref?: React.Ref<HTMLElement> }\n>;\n\n/**\n * Publish the band's height on the content area, as a CSS custom property.\n *\n * Anything else that sticks to the top of the same scrollport has to clear the\n * header, and its height is not a constant — it grows with a wrapped toolbar,\n * an error line, an environment banner. So it is measured and written where\n * CSS can read it: `--app-content-header-height`, on the nearest content area\n * (or the document, if the band is used outside one).\n *\n * This is the one part of a sticky band that cannot be CSS: a rendered height\n * is a number the stylesheet has no way to ask for.\n */\nfunction usePublishedHeight(\n  ref: React.RefObject<HTMLElement | null>,\n  property: string,\n  enabled: boolean,\n) {\n  React.useLayoutEffect(() => {\n    const el = ref.current;\n    if (!el || !enabled) return undefined;\n\n    const target =\n      (el.closest('[data-slot=\"app-content\"]') as HTMLElement | null) ??\n      document.documentElement;\n\n    const write = () => {\n      target.style.setProperty(property, `${el.getBoundingClientRect().height}px`);\n    };\n\n    write();\n    const observer = new ResizeObserver(write);\n    observer.observe(el);\n    return () => {\n      observer.disconnect();\n      target.style.removeProperty(property);\n    };\n  }, [ref, property, enabled]);\n}\n\n/**\n * The band at the top of a content area, pinned while the page scrolls.\n *\n * Opaque on purpose: it paints over the content passing beneath it, and a\n * translucent one shows the list sliding through the title.\n */\nexport function AppContentHeader({\n  children, className, el, sticky = true, ...props\n}: AppContentBandProps & { sticky?: boolean }) {\n  const ref = React.useRef<HTMLElement>(null);\n  usePublishedHeight(ref, '--app-content-header-height', sticky);\n  const El = (el ?? 'header') as BandElement;\n\n  return (\n    <El\n      ref={ref}\n      data-slot={'app-content-header'}\n      className={cn(s['app-content-header'], !sticky && s['band-static'], className)}\n      {...props}\n    >\n      {children}\n    </El>\n  );\n}\n\n/**\n * The band at the foot of a content area — a search field, a toolbar, the\n * action that commits the page.\n *\n * Sticky, not fixed: fixed is measured against the viewport, so in an app with\n * a sidebar the band runs underneath it and has to be inset by hand for every\n * layout the sidebar can be in. Sticky is measured against this content area,\n * which is where it belongs, and it costs real space at the end of the scroll\n * instead of needing the page padded to clear it.\n */\nexport function AppContentFooter({\n  children, className, el, ...props\n}: AppContentBandProps) {\n  const El = (el ?? 'footer') as React.ElementType<React.HTMLAttributes<HTMLDivElement>>;\n\n  return (\n    <El\n      data-slot={'app-content-footer'}\n      className={cn(s['app-content-footer'], className)}\n      {...props}\n    >\n      {children}\n    </El>\n  );\n}\n"],"names":["_jsx"],"mappings":";;;;;AAkBA;;;;;;;;;;;AAWG;AACH,SAAS,kBAAkB,CACzB,GAAwC,EACxC,QAAgB,EAChB,OAAgB,EAAA;AAEhB,IAAA,KAAK,CAAC,eAAe,CAAC,MAAK;AACzB,QAAA,MAAM,EAAE,GAAG,GAAG,CAAC,OAAO;AACtB,QAAA,IAAI,CAAC,EAAE,IAAI,CAAC,OAAO;AAAE,YAAA,OAAO,SAAS;AAErC,QAAA,MAAM,MAAM,GACT,EAAE,CAAC,OAAO,CAAC,2BAA2B,CAAwB;YAC/D,QAAQ,CAAC,eAAe;QAE1B,MAAM,KAAK,GAAG,MAAK;AACjB,YAAA,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC,QAAQ,EAAE,CAAA,EAAG,EAAE,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAA,EAAA,CAAI,CAAC;AAC9E,QAAA,CAAC;AAED,QAAA,KAAK,EAAE;AACP,QAAA,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,KAAK,CAAC;AAC1C,QAAA,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC;AACpB,QAAA,OAAO,MAAK;YACV,QAAQ,CAAC,UAAU,EAAE;AACrB,YAAA,MAAM,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC;AACvC,QAAA,CAAC;IACH,CAAC,EAAE,CAAC,GAAG,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;AAC9B;AAEA;;;;;AAKG;SACa,gBAAgB,CAAC,EAC/B,QAAQ,EAAE,SAAS,EAAE,EAAE,EAAE,MAAM,GAAG,IAAI,EAAE,GAAG,KAAK,EACL,EAAA;IAC3C,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAc,IAAI,CAAC;AAC3C,IAAA,kBAAkB,CAAC,GAAG,EAAE,6BAA6B,EAAE,MAAM,CAAC;AAC9D,IAAA,MAAM,EAAE,IAAI,EAAE,IAAI,QAAQ,CAAgB;AAE1C,IAAA,QACEA,GAAA,CAAC,EAAE,EAAA,EACD,GAAG,EAAE,GAAG,EAAA,WAAA,EACG,oBAAoB,EAC/B,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC,oBAAoB,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,CAAC,aAAa,CAAC,EAAE,SAAS,CAAC,KAC1E,KAAK,EAAA,QAAA,EAER,QAAQ,EAAA,CACN;AAET;AAEA;;;;;;;;;AASG;AACG,SAAU,gBAAgB,CAAC,EAC/B,QAAQ,EAAE,SAAS,EAAE,EAAE,EAAE,GAAG,KAAK,EACb,EAAA;AACpB,IAAA,MAAM,EAAE,IAAI,EAAE,IAAI,QAAQ,CAA4D;IAEtF,QACEA,IAAC,EAAE,EAAA,EAAA,WAAA,EACU,oBAAoB,EAC/B,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC,oBAAoB,CAAC,EAAE,SAAS,CAAC,EAAA,GAC7C,KAAK,EAAA,QAAA,EAER,QAAQ,EAAA,CACN;AAET;;"}

package/dist/layout/AppContentBands/app-content-bands.module.scss.js

@@ -0,0 +1,6 @@
+import './app-content-bands.css';
+
+var s = {"app-content-header":"app-content-bands-module_app-content-header__BUehL","app-content-footer":"app-content-bands-module_app-content-footer__aQGGo","band-static":"app-content-bands-module_band-static__qgY7r"};
+
+export { s as default };
+//# sourceMappingURL=app-content-bands.module.scss.js.map

package/dist/layout/AppContentBands/app-content-bands.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-content-bands.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/layout/AppContentBands/index.d.ts

@@ -0,0 +1,2 @@
+export * from './app-content-bands';
+//# sourceMappingURL=index.d.ts.map

package/dist/layout/AppContentBands/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/layout/AppContentBands/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC"}

package/dist/layout/AppContentFooter/app-content-footer.css

@@ -0,0 +1,9 @@
+.app-content-footer-module_app-content-footer__B1kjp {
+  backdrop-filter: blur(12px);
+  background-color: color-mix(in srgb, var(--background-default) 88%, transparent);
+  border-top: 1px solid var(--divider);
+  flex: 0 0 auto;
+  margin-top: auto;
+  padding-bottom: env(safe-area-inset-bottom);
+  z-index: var(--z-sticky);
+}

package/dist/layout/AppContentFooter/app-content-footer.d.ts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+export interface AppContentFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** The element to render. Defaults to `footer`. */
+    el?: React.ElementType<React.HTMLAttributes<HTMLDivElement>>;
+}
+/**
+ * The band at the foot of a content area — a search field, a toolbar, the
+ * action that commits the page.
+ *
+ * ⚠️ It must be a SIBLING of `AppContentMain`, not a child of it:
+ *
+ * ```tsx
+ * <AppContent>
+ *   <AppSidebarHeader />
+ *   <AppContentMain>{page}</AppContentMain>
+ *   <AppContentFooter>{search}</AppContentFooter>
+ * </AppContent>
+ * ```
+ *
+ * Nothing here is pinned. `AppContent` is a full-height column and only the
+ * middle band scrolls, so the foot of the column IS the foot of the screen and
+ * the band stays there by arithmetic rather than by being told to.
+ *
+ * It was `position: sticky; bottom: 0` inside the scrolling area, and that
+ * cannot work however the offsets are tuned: a sticky element travels only
+ * within its containing block, and a band that is the LAST child of the page it
+ * scrolls with has nothing below it to travel over. It docked on short pages,
+ * where there was no scrolling to survive, and scrolled away on long ones.
+ *
+ * Fixed positioning is the other wrong answer — it is measured against the
+ * viewport, so in an app with a sidebar the band runs underneath it and has to
+ * be inset by hand for every state the sidebar can be in.
+ *
+ * There is no matching header band; the shell's header is already a band of the
+ * same column, so it is always in view without being told to be.
+ */
+export declare function AppContentFooter({ children, className, el, ...props }: AppContentFooterProps): React.JSX.Element;
+//# sourceMappingURL=app-content-footer.d.ts.map

package/dist/layout/AppContentFooter/app-content-footer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-content-footer.d.ts","sourceRoot":"","sources":["../../../src/layout/AppContentFooter/app-content-footer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACjF,mDAAmD;IACnD,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC,CAAC;CAC9D;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,EAAE,GAAG,KAAK,EAAE,EAAE,qBAAqB,qBAY5F"}

package/dist/layout/AppContentFooter/app-content-footer.js

@@ -0,0 +1,42 @@
+import { jsx } from 'react/jsx-runtime';
+import cn from 'clsx';
+import s from './app-content-footer.module.scss.js';
+
+/**
+ * The band at the foot of a content area — a search field, a toolbar, the
+ * action that commits the page.
+ *
+ * ⚠️ It must be a SIBLING of `AppContentMain`, not a child of it:
+ *
+ * ```tsx
+ * <AppContent>
+ *   <AppSidebarHeader />
+ *   <AppContentMain>{page}</AppContentMain>
+ *   <AppContentFooter>{search}</AppContentFooter>
+ * </AppContent>
+ * ```
+ *
+ * Nothing here is pinned. `AppContent` is a full-height column and only the
+ * middle band scrolls, so the foot of the column IS the foot of the screen and
+ * the band stays there by arithmetic rather than by being told to.
+ *
+ * It was `position: sticky; bottom: 0` inside the scrolling area, and that
+ * cannot work however the offsets are tuned: a sticky element travels only
+ * within its containing block, and a band that is the LAST child of the page it
+ * scrolls with has nothing below it to travel over. It docked on short pages,
+ * where there was no scrolling to survive, and scrolled away on long ones.
+ *
+ * Fixed positioning is the other wrong answer — it is measured against the
+ * viewport, so in an app with a sidebar the band runs underneath it and has to
+ * be inset by hand for every state the sidebar can be in.
+ *
+ * There is no matching header band; the shell's header is already a band of the
+ * same column, so it is always in view without being told to be.
+ */
+function AppContentFooter({ children, className, el, ...props }) {
+    const El = (el ?? 'footer');
+    return (jsx(El, { "data-slot": 'app-content-footer', className: cn(s['app-content-footer'], className), ...props, children: children }));
+}
+
+export { AppContentFooter };
+//# sourceMappingURL=app-content-footer.js.map

package/dist/layout/AppContentFooter/app-content-footer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-content-footer.js","sources":["../../../src/layout/AppContentFooter/app-content-footer.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\nimport s from './app-content-footer.module.scss';\n\nexport interface AppContentFooterProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** The element to render. Defaults to `footer`. */\n  el?: React.ElementType<React.HTMLAttributes<HTMLDivElement>>;\n}\n\n/**\n * The band at the foot of a content area — a search field, a toolbar, the\n * action that commits the page.\n *\n * ⚠️ It must be a SIBLING of `AppContentMain`, not a child of it:\n *\n * ```tsx\n * <AppContent>\n *   <AppSidebarHeader />\n *   <AppContentMain>{page}</AppContentMain>\n *   <AppContentFooter>{search}</AppContentFooter>\n * </AppContent>\n * ```\n *\n * Nothing here is pinned. `AppContent` is a full-height column and only the\n * middle band scrolls, so the foot of the column IS the foot of the screen and\n * the band stays there by arithmetic rather than by being told to.\n *\n * It was `position: sticky; bottom: 0` inside the scrolling area, and that\n * cannot work however the offsets are tuned: a sticky element travels only\n * within its containing block, and a band that is the LAST child of the page it\n * scrolls with has nothing below it to travel over. It docked on short pages,\n * where there was no scrolling to survive, and scrolled away on long ones.\n *\n * Fixed positioning is the other wrong answer — it is measured against the\n * viewport, so in an app with a sidebar the band runs underneath it and has to\n * be inset by hand for every state the sidebar can be in.\n *\n * There is no matching header band; the shell's header is already a band of the\n * same column, so it is always in view without being told to be.\n */\nexport function AppContentFooter({ children, className, el, ...props }: AppContentFooterProps) {\n  const El = (el ?? 'footer') as React.ElementType<React.HTMLAttributes<HTMLDivElement>>;\n\n  return (\n    <El\n      data-slot={'app-content-footer'}\n      className={cn(s['app-content-footer'], className)}\n      {...props}\n    >\n      {children}\n    </El>\n  );\n}\n"],"names":["_jsx"],"mappings":";;;;AASA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BG;AACG,SAAU,gBAAgB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,EAAE,GAAG,KAAK,EAAyB,EAAA;AAC3F,IAAA,MAAM,EAAE,IAAI,EAAE,IAAI,QAAQ,CAA4D;IAEtF,QACEA,IAAC,EAAE,EAAA,EAAA,WAAA,EACU,oBAAoB,EAC/B,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC,oBAAoB,CAAC,EAAE,SAAS,CAAC,EAAA,GAC7C,KAAK,EAAA,QAAA,EAER,QAAQ,EAAA,CACN;AAET;;"}

package/dist/layout/AppContentFooter/app-content-footer.module.scss.js

@@ -0,0 +1,6 @@
+import './app-content-footer.css';
+
+var s = {"app-content-footer":"app-content-footer-module_app-content-footer__B1kjp"};
+
+export { s as default };
+//# sourceMappingURL=app-content-footer.module.scss.js.map

package/dist/layout/AppContentFooter/app-content-footer.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-content-footer.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/layout/AppContentFooter/index.d.ts

@@ -0,0 +1,2 @@
+export * from './app-content-footer';
+//# sourceMappingURL=index.d.ts.map

package/dist/layout/AppContentFooter/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/layout/AppContentFooter/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC"}

package/dist/layout/AppContentMain/app-content-main.css

@@ -0,0 +1,6 @@
+.app-content-main-module_app-content-main__5IeB4 {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+}

package/dist/layout/AppContentMain/app-content-main.d.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+export interface AppContentMainProps extends React.HTMLAttributes<HTMLElement> {
+    /** The element to render. Defaults to `main`. */
+    el?: React.ElementType<React.HTMLAttributes<HTMLElement>>;
+}
+/**
+ * The scrolling middle band of a content area.
+ *
+ * `AppContent` is a column of exactly three bands — header, this, footer — and
+ * this is the only one that scrolls. It takes whatever height the other two
+ * leave and scrolls inside itself, so the bands above and below it are always
+ * on screen without being pinned there.
+ *
+ * That is why the footer does not need to be sticky, and why a page must not
+ * put its footer INSIDE this band hoping `position: sticky; bottom: 0` will
+ * dock it. A sticky element can only travel within its containing block, and a
+ * band that is the last child of the thing it scrolls in has no room below it
+ * to travel — it looks docked on a short page (where nothing scrolls anyway)
+ * and scrolls away on a long one, which is the case it was added for.
+ *
+ * The composition, and the only one that docks a footer:
+ *
+ * ```tsx
+ * <AppContent>
+ *   <AppSidebarHeader />
+ *   <AppContentMain>{page}</AppContentMain>
+ *   <AppContentFooter>{search}</AppContentFooter>
+ * </AppContent>
+ * ```
+ *
+ * A sticky band INSIDE the page still works, and now pins to this element
+ * rather than to the window — but note that sticky offsets are measured from
+ * the scroller's PADDING edge, so a band meant to sit flush against the top of
+ * the scrollport has to offset by this element's own padding.
+ */
+export declare function AppContentMain({ children, className, el, ...props }: AppContentMainProps): React.JSX.Element;
+//# sourceMappingURL=app-content-main.d.ts.map

package/dist/layout/AppContentMain/app-content-main.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-content-main.d.ts","sourceRoot":"","sources":["../../../src/layout/AppContentMain/app-content-main.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IAC5E,iDAAiD;IACjD,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC,CAAC;CAC3D;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,qBAQxF"}

package/dist/layout/AppContentMain/app-content-main.js

@@ -0,0 +1,41 @@
+import { jsx } from 'react/jsx-runtime';
+import cn from 'clsx';
+import s from './app-content-main.module.scss.js';
+
+/**
+ * The scrolling middle band of a content area.
+ *
+ * `AppContent` is a column of exactly three bands — header, this, footer — and
+ * this is the only one that scrolls. It takes whatever height the other two
+ * leave and scrolls inside itself, so the bands above and below it are always
+ * on screen without being pinned there.
+ *
+ * That is why the footer does not need to be sticky, and why a page must not
+ * put its footer INSIDE this band hoping `position: sticky; bottom: 0` will
+ * dock it. A sticky element can only travel within its containing block, and a
+ * band that is the last child of the thing it scrolls in has no room below it
+ * to travel — it looks docked on a short page (where nothing scrolls anyway)
+ * and scrolls away on a long one, which is the case it was added for.
+ *
+ * The composition, and the only one that docks a footer:
+ *
+ * ```tsx
+ * <AppContent>
+ *   <AppSidebarHeader />
+ *   <AppContentMain>{page}</AppContentMain>
+ *   <AppContentFooter>{search}</AppContentFooter>
+ * </AppContent>
+ * ```
+ *
+ * A sticky band INSIDE the page still works, and now pins to this element
+ * rather than to the window — but note that sticky offsets are measured from
+ * the scroller's PADDING edge, so a band meant to sit flush against the top of
+ * the scrollport has to offset by this element's own padding.
+ */
+function AppContentMain({ children, className, el, ...props }) {
+    const El = (el ?? 'main');
+    return (jsx(El, { "data-slot": 'app-content-main', className: cn(s['app-content-main'], className), ...props, children: children }));
+}
+
+export { AppContentMain };
+//# sourceMappingURL=app-content-main.js.map

package/dist/layout/AppContentMain/app-content-main.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-content-main.js","sources":["../../../src/layout/AppContentMain/app-content-main.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\nimport s from './app-content-main.module.scss';\n\nexport interface AppContentMainProps extends React.HTMLAttributes<HTMLElement> {\n  /** The element to render. Defaults to `main`. */\n  el?: React.ElementType<React.HTMLAttributes<HTMLElement>>;\n}\n\n/**\n * The scrolling middle band of a content area.\n *\n * `AppContent` is a column of exactly three bands — header, this, footer — and\n * this is the only one that scrolls. It takes whatever height the other two\n * leave and scrolls inside itself, so the bands above and below it are always\n * on screen without being pinned there.\n *\n * That is why the footer does not need to be sticky, and why a page must not\n * put its footer INSIDE this band hoping `position: sticky; bottom: 0` will\n * dock it. A sticky element can only travel within its containing block, and a\n * band that is the last child of the thing it scrolls in has no room below it\n * to travel — it looks docked on a short page (where nothing scrolls anyway)\n * and scrolls away on a long one, which is the case it was added for.\n *\n * The composition, and the only one that docks a footer:\n *\n * ```tsx\n * <AppContent>\n *   <AppSidebarHeader />\n *   <AppContentMain>{page}</AppContentMain>\n *   <AppContentFooter>{search}</AppContentFooter>\n * </AppContent>\n * ```\n *\n * A sticky band INSIDE the page still works, and now pins to this element\n * rather than to the window — but note that sticky offsets are measured from\n * the scroller's PADDING edge, so a band meant to sit flush against the top of\n * the scrollport has to offset by this element's own padding.\n */\nexport function AppContentMain({ children, className, el, ...props }: AppContentMainProps) {\n  const El = (el ?? 'main') as React.ElementType<React.HTMLAttributes<HTMLElement>>;\n\n  return (\n    <El data-slot={'app-content-main'} className={cn(s['app-content-main'], className)} {...props}>\n      {children}\n    </El>\n  );\n}\n"],"names":["_jsx"],"mappings":";;;;AASA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BG;AACG,SAAU,cAAc,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,EAAE,GAAG,KAAK,EAAuB,EAAA;AACvF,IAAA,MAAM,EAAE,IAAI,EAAE,IAAI,MAAM,CAAyD;IAEjF,QACEA,IAAC,EAAE,EAAA,EAAA,WAAA,EAAY,kBAAkB,EAAE,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC,kBAAkB,CAAC,EAAE,SAAS,CAAC,EAAA,GAAM,KAAK,EAAA,QAAA,EAC1F,QAAQ,EAAA,CACN;AAET;;"}

package/dist/layout/AppContentMain/app-content-main.module.scss.js

@@ -0,0 +1,6 @@
+import './app-content-main.css';
+
+var s = {"app-content-main":"app-content-main-module_app-content-main__5IeB4"};
+
+export { s as default };
+//# sourceMappingURL=app-content-main.module.scss.js.map

package/dist/layout/AppContentMain/app-content-main.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-content-main.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/layout/AppContentMain/index.d.ts

@@ -0,0 +1,2 @@
+export * from './app-content-main';
+//# sourceMappingURL=index.d.ts.map

package/dist/layout/AppContentMain/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/layout/AppContentMain/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC"}

package/dist/layout/AppFooter/app-footer.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
 import { useSidebar } from '../../hooks/layout/use-sidebar.js';
 import '../../ui/Alert/alert-context.js';
-import * as React from 'react';
 import '../../ui/Table/table-sort-context.js';
 import { Row } from '../Row/row.js';
 import { Link } from '../../navigation/Link/link.js';

package/dist/layout/AppSidebar/app-sidebar.js

@@ -1,7 +1,7 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import 'react';
 import { useSidebar } from '../../hooks/layout/use-sidebar.js';
 import '../../ui/Alert/alert-context.js';
-import 'react';
 import '../../ui/Table/table-sort-context.js';
 import { useMobileNavigation } from '../../hooks/use-mobile-navigation.js';
 import { useRouterAdapter } from '../../navigation/Router/router-context.js';
@@ -61,7 +61,7 @@ function AppSidebar({ logo, homeHref = '/dashboard', currentPath = '', linkCompo
     return (jsxs(Fragment, { children: [jsxs(Sidebar, { "data-slot": 'app-sidebar', collapsible: 'icon', variant: 'inset', children: [jsx(SidebarHeader, { children: jsx(SidebarMenu, { children: jsx(SidebarMenuItem, { children: jsx(SidebarMenuButton, { size: 'lg', asChild: true, children: LinkComp ? (jsx(LinkComp, { href: homeHref, onClick: handleNavigation, children: logo })) : (jsx("a", { href: homeHref, onClick: handleNavigation, children: logo })) }) }) }) }), jsx(SidebarContent, { children: sections.map(section => (jsxs(SidebarGroup, { children: [jsx(SidebarGroupLabel, { children: section.label }), jsx(SidebarMenu, { children: section.items.map(item => {
                                         const isActive = item.href === bestMatch;
                                         if (section.renderItem) {
-                                            return (jsx(SidebarMenuItem, { children: section.renderItem(item, { isActive }) }, item.title));
+                                            return (jsx(SidebarMenuItem, { children: section.renderItem(item, { isActive, onNavigate: handleNavigation }) }, item.title));
                                         }
                                         return (jsx(SidebarMenuItem, { children: jsx(SidebarMenuButton, { asChild: true, isActive: isActive, tooltip: { children: item.title }, children: jsx(NavLink, { item: item, linkComponent: LinkComp, onNavigate: handleNavigation }) }) }, item.title));
                                     }) })] }, section.label))) }), footerItems?.length ? (jsxs(Fragment, { children: [footerSeparator && jsx(Separator, {}), jsx(SidebarFooter, { children: jsx(SidebarMenu, { children: footerItems.map(item => (jsx(SidebarMenuItem, { children: jsx(SidebarMenuButton, { asChild: true, isActive: item.href === bestMatch, tooltip: { children: item.title }, children: jsx(NavLink, { item: item, linkComponent: LinkComp, onNavigate: handleNavigation }) }) }, item.title))) }) })] })) : null] }), children] }));

package/dist/layout/AppSidebar/app-sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-sidebar.js","sources":["../../../src/layout/AppSidebar/app-sidebar.tsx"],"sourcesContent":["import { useSidebar } from '@constellation/hooks';\nimport { useMobileNavigation } from '@constellation/hooks/use-mobile-navigation';\nimport { useRouterAdapter } from '@constellation/navigation/Router';\nimport { type SidebarNavItem, type SidebarSection } from '@constellation/types';\nimport { Separator } from '@constellation/ui/Separator';\nimport * as React from 'react';\nimport { flushSync } from 'react-dom';\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '../Sidebar';\n\nexport interface AppSidebarProps {\n  logo: React.ReactNode;\n  homeHref?: string;\n  currentPath?: string;\n  linkComponent?: React.ElementType;\n  sections: SidebarSection[];\n  footerItems?: SidebarNavItem[];\n  footerSeparator?: boolean;\n  children?: React.ReactNode;\n}\n\ntype NavLinkProps = {\n  item: SidebarNavItem;\n  linkComponent?: React.ElementType;\n  onNavigate?: (event: React.MouseEvent<HTMLAnchorElement>) => void;\n} & React.AnchorHTMLAttributes<HTMLAnchorElement>;\n\nfunction NavLink({ item, linkComponent: LinkComp, onNavigate, onClick, ...props }: NavLinkProps) {\n  const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {\n    onClick?.(event);\n    if (event.defaultPrevented) {\n      return;\n    }\n\n    onNavigate?.(event);\n  };\n\n  if (item.href.startsWith('http')) {\n    return (\n      <a\n        href={item.href}\n        target={'_blank'}\n        rel={'noopener noreferrer'}\n        onClick={handleClick}\n        {...props}\n      >\n        {item.icon}\n        <span>{item.title}</span>\n        <span className={'srOnly'}>(opens in new tab)</span>\n      </a>\n    );\n  }\n\n  if (!LinkComp) {\n    return (\n      <a href={item.href} onClick={handleClick} {...props}>\n        {item.icon}\n        <span>{item.title}</span>\n      </a>\n    );\n  }\n\n  return (\n    <LinkComp href={item.href} onClick={handleClick} {...props}>\n      {item.icon}\n      <span>{item.title}</span>\n    </LinkComp>\n  );\n}\n\nexport function AppSidebar({\n  logo,\n  homeHref = '/dashboard',\n  currentPath = '',\n  linkComponent,\n  sections,\n  footerItems,\n  footerSeparator,\n  children,\n}: AppSidebarProps) {\n  const { isMobile, openMobile, setOpenMobile } = useSidebar();\n  // Falls back to the RouterProvider's link component, so configuring the\n  // router once upgrades the whole sidebar without threading a prop here.\n  const { linkComponent: adapterLink } = useRouterAdapter();\n  const LinkComp = linkComponent ?? adapterLink;\n  const cleanupMobileNavigation = useMobileNavigation();\n  const allHrefs = [\n    ...sections.flatMap(s => s.items.map(i => i.href)),\n    ...(footerItems ?? []).map(i => i.href),\n  ];\n  const bestMatch =\n    allHrefs\n      .filter(\n        href =>\n          currentPath === href ||\n          currentPath.startsWith(href + '/') ||\n          currentPath.startsWith(href + '?'),\n      )\n      .sort((a, b) => b.length - a.length)[0] ?? '';\n\n  const handleNavigation = (event: React.MouseEvent<HTMLAnchorElement>) => {\n    if (!isMobile || !openMobile || event.button !== 0) {\n      return;\n    }\n\n    if (event.metaKey || event.altKey || event.ctrlKey || event.shiftKey) {\n      return;\n    }\n\n    const currentTarget = event.currentTarget;\n    const target = currentTarget.getAttribute('target');\n    if ((target && target.toLowerCase() !== '_self') || currentTarget.hasAttribute('download')) {\n      return;\n    }\n\n    flushSync(() => {\n      setOpenMobile(false);\n    });\n    cleanupMobileNavigation();\n  };\n\n  return (\n    <>\n      <Sidebar data-slot={'app-sidebar'} collapsible={'icon'} variant={'inset'}>\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size={'lg'} asChild>\n                {LinkComp ? (\n                  <LinkComp href={homeHref} onClick={handleNavigation}>\n                    {logo}\n                  </LinkComp>\n                ) : (\n                  <a href={homeHref} onClick={handleNavigation}>\n                    {logo}\n                  </a>\n                )}\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          {sections.map(section => (\n            <SidebarGroup key={section.label}>\n              <SidebarGroupLabel>{section.label}</SidebarGroupLabel>\n              <SidebarMenu>\n                {section.items.map(item => {\n                  const isActive = item.href === bestMatch;\n\n                  if (section.renderItem) {\n                    return (\n                      <SidebarMenuItem key={item.title}>\n                        {section.renderItem(item, { isActive })}\n                      </SidebarMenuItem>\n                    );\n                  }\n\n                  return (\n                    <SidebarMenuItem key={item.title}>\n                      <SidebarMenuButton\n                        asChild\n                        isActive={isActive}\n                        tooltip={{ children: item.title }}\n                      >\n                        <NavLink\n                          item={item}\n                          linkComponent={LinkComp}\n                          onNavigate={handleNavigation}\n                        />\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                  );\n                })}\n              </SidebarMenu>\n            </SidebarGroup>\n          ))}\n        </SidebarContent>\n        {footerItems?.length ? (\n          <>\n            {footerSeparator && <Separator />}\n            <SidebarFooter>\n              <SidebarMenu>\n                {footerItems.map(item => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton\n                      asChild\n                      isActive={item.href === bestMatch}\n                      tooltip={{ children: item.title }}\n                    >\n                      <NavLink item={item} linkComponent={LinkComp} onNavigate={handleNavigation} />\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarFooter>\n          </>\n        ) : null}\n      </Sidebar>\n      {children}\n    </>\n  );\n}\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":"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"}
+{"version":3,"file":"app-sidebar.js","sources":["../../../src/layout/AppSidebar/app-sidebar.tsx"],"sourcesContent":["import { useSidebar } from '@constellation/hooks';\nimport { useMobileNavigation } from '@constellation/hooks/use-mobile-navigation';\nimport { useRouterAdapter } from '@constellation/navigation/Router';\nimport { type SidebarNavItem, type SidebarSection } from '@constellation/types';\nimport { Separator } from '@constellation/ui/Separator';\nimport * as React from 'react';\nimport { flushSync } from 'react-dom';\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '../Sidebar';\n\nexport interface AppSidebarProps {\n  logo: React.ReactNode;\n  homeHref?: string;\n  currentPath?: string;\n  linkComponent?: React.ElementType;\n  sections: SidebarSection[];\n  footerItems?: SidebarNavItem[];\n  footerSeparator?: boolean;\n  children?: React.ReactNode;\n}\n\ntype NavLinkProps = {\n  item: SidebarNavItem;\n  linkComponent?: React.ElementType;\n  onNavigate?: (event: React.MouseEvent<HTMLAnchorElement>) => void;\n} & React.AnchorHTMLAttributes<HTMLAnchorElement>;\n\nfunction NavLink({ item, linkComponent: LinkComp, onNavigate, onClick, ...props }: NavLinkProps) {\n  const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {\n    onClick?.(event);\n    if (event.defaultPrevented) {\n      return;\n    }\n\n    onNavigate?.(event);\n  };\n\n  if (item.href.startsWith('http')) {\n    return (\n      <a\n        href={item.href}\n        target={'_blank'}\n        rel={'noopener noreferrer'}\n        onClick={handleClick}\n        {...props}\n      >\n        {item.icon}\n        <span>{item.title}</span>\n        <span className={'srOnly'}>(opens in new tab)</span>\n      </a>\n    );\n  }\n\n  if (!LinkComp) {\n    return (\n      <a href={item.href} onClick={handleClick} {...props}>\n        {item.icon}\n        <span>{item.title}</span>\n      </a>\n    );\n  }\n\n  return (\n    <LinkComp href={item.href} onClick={handleClick} {...props}>\n      {item.icon}\n      <span>{item.title}</span>\n    </LinkComp>\n  );\n}\n\nexport function AppSidebar({\n  logo,\n  homeHref = '/dashboard',\n  currentPath = '',\n  linkComponent,\n  sections,\n  footerItems,\n  footerSeparator,\n  children,\n}: AppSidebarProps) {\n  const { isMobile, openMobile, setOpenMobile } = useSidebar();\n  // Falls back to the RouterProvider's link component, so configuring the\n  // router once upgrades the whole sidebar without threading a prop here.\n  const { linkComponent: adapterLink } = useRouterAdapter();\n  const LinkComp = linkComponent ?? adapterLink;\n  const cleanupMobileNavigation = useMobileNavigation();\n  const allHrefs = [\n    ...sections.flatMap(s => s.items.map(i => i.href)),\n    ...(footerItems ?? []).map(i => i.href),\n  ];\n  const bestMatch =\n    allHrefs\n      .filter(\n        href =>\n          currentPath === href ||\n          currentPath.startsWith(href + '/') ||\n          currentPath.startsWith(href + '?'),\n      )\n      .sort((a, b) => b.length - a.length)[0] ?? '';\n\n  const handleNavigation = (event: React.MouseEvent<HTMLAnchorElement>) => {\n    if (!isMobile || !openMobile || event.button !== 0) {\n      return;\n    }\n\n    if (event.metaKey || event.altKey || event.ctrlKey || event.shiftKey) {\n      return;\n    }\n\n    const currentTarget = event.currentTarget;\n    const target = currentTarget.getAttribute('target');\n    if ((target && target.toLowerCase() !== '_self') || currentTarget.hasAttribute('download')) {\n      return;\n    }\n\n    flushSync(() => {\n      setOpenMobile(false);\n    });\n    cleanupMobileNavigation();\n  };\n\n  return (\n    <>\n      <Sidebar data-slot={'app-sidebar'} collapsible={'icon'} variant={'inset'}>\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size={'lg'} asChild>\n                {LinkComp ? (\n                  <LinkComp href={homeHref} onClick={handleNavigation}>\n                    {logo}\n                  </LinkComp>\n                ) : (\n                  <a href={homeHref} onClick={handleNavigation}>\n                    {logo}\n                  </a>\n                )}\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          {sections.map(section => (\n            <SidebarGroup key={section.label}>\n              <SidebarGroupLabel>{section.label}</SidebarGroupLabel>\n              <SidebarMenu>\n                {section.items.map(item => {\n                  const isActive = item.href === bestMatch;\n\n                  if (section.renderItem) {\n                    return (\n                      <SidebarMenuItem key={item.title}>\n                        {section.renderItem(item, { isActive, onNavigate: handleNavigation })}\n                      </SidebarMenuItem>\n                    );\n                  }\n\n                  return (\n                    <SidebarMenuItem key={item.title}>\n                      <SidebarMenuButton\n                        asChild\n                        isActive={isActive}\n                        tooltip={{ children: item.title }}\n                      >\n                        <NavLink\n                          item={item}\n                          linkComponent={LinkComp}\n                          onNavigate={handleNavigation}\n                        />\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                  );\n                })}\n              </SidebarMenu>\n            </SidebarGroup>\n          ))}\n        </SidebarContent>\n        {footerItems?.length ? (\n          <>\n            {footerSeparator && <Separator />}\n            <SidebarFooter>\n              <SidebarMenu>\n                {footerItems.map(item => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton\n                      asChild\n                      isActive={item.href === bestMatch}\n                      tooltip={{ children: item.title }}\n                    >\n                      <NavLink item={item} linkComponent={LinkComp} onNavigate={handleNavigation} />\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarFooter>\n          </>\n        ) : null}\n      </Sidebar>\n      {children}\n    </>\n  );\n}\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":"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"}

package/dist/layout/AppSidebarHeader/app-sidebar-header.css

@@ -1,13 +1,12 @@
 .app-sidebar-header-module_app-sidebar-header__h-3UU {
   border-bottom: 1px solid var(--sidebar-border);
   flex-shrink: 0;
-  height: var(--size-8);
-  padding: 0 var(--size-1);
+  padding: 0 var(--size-0-5);
   transition: all var(--sidebar-transition-duration) var(--sidebar-transition-ease);
 }
 @media (min-width: 769px) {
   .app-sidebar-header-module_app-sidebar-header__h-3UU {
-    padding: 0 var(--size-2);
+    padding: 0 var(--size-1);
   }
 }
 .app-sidebar-header-module_app-sidebar-header__h-3UU {

package/dist/layout/AppSidebarHeader/app-sidebar-header.d.ts

@@ -1,7 +1,7 @@
 import { type NavUserProps } from '@constellation/navigation/NavUser';
 import { type BreadcrumbItemData } from '@constellation/types';
 import * as React from 'react';
-export interface AppSidebarHeaderProps {
+export interface AppSidebarHeaderProps extends React.HTMLAttributes<HTMLElement> {
     breadcrumbs?: BreadcrumbItemData[];
     /** Omit to hide the account menu (e.g. on signed-out chrome). */
     user?: NavUserProps['user'];
@@ -9,5 +9,13 @@ export interface AppSidebarHeaderProps {
     /** Extra controls between the appearance toggle and the account menu. */
     actions?: React.ReactNode;
 }
-export declare function AppSidebarHeader({ breadcrumbs, user, userMenu, actions, }: AppSidebarHeaderProps): React.JSX.Element;
+/**
+ * The header band of a content area.
+ *
+ * `className` and any other DOM props reach the `header` element. They used to
+ * be dropped on the floor — the component took four named props and spread
+ * nothing — so a caller passing `className` got no error and no class, and
+ * spent the difference looking at its own stylesheet.
+ */
+export declare function AppSidebarHeader({ breadcrumbs, user, userMenu, actions, className, ...props }: AppSidebarHeaderProps): React.JSX.Element;
 //# sourceMappingURL=app-sidebar-header.d.ts.map

package/dist/layout/AppSidebarHeader/app-sidebar-header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"app-sidebar-header.d.ts","sourceRoot":"","sources":["../../../src/layout/AppSidebarHeader/app-sidebar-header.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAW,KAAK,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAE/E,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE/D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,qBAAqB;IACpC,WAAW,CAAC,EAAE,kBAAkB,EAAE,CAAC;IACnC,iEAAiE;IACjE,IAAI,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC;IAC5B,QAAQ,CAAC,EAAE,IAAI,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;IACtC,yEAAyE;IACzE,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,WAAgB,EAChB,IAAI,EACJ,QAAQ,EACR,OAAO,GACR,EAAE,qBAAqB,qBA0BvB"}
+{"version":3,"file":"app-sidebar-header.d.ts","sourceRoot":"","sources":["../../../src/layout/AppSidebarHeader/app-sidebar-header.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAW,KAAK,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAE/E,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE/D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IAC9E,WAAW,CAAC,EAAE,kBAAkB,EAAE,CAAC;IACnC,iEAAiE;IACjE,IAAI,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC;IAC5B,QAAQ,CAAC,EAAE,IAAI,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;IACtC,yEAAyE;IACzE,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,WAAgB,EAChB,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,SAAS,EACT,GAAG,KAAK,EACT,EAAE,qBAAqB,qBA4BvB"}

package/dist/layout/AppSidebarHeader/app-sidebar-header.js

@@ -1,47 +1,27 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react';
 import { useSidebar } from '../../hooks/layout/use-sidebar.js';
 import '../../ui/Alert/alert-context.js';
-import 'react';
 import '../../ui/Table/table-sort-context.js';
 import { Row } from '../Row/row.js';
 import { SidebarTrigger } from '../Sidebar/sidebar.js';
 import { Breadcrumbs } from '../../navigation/Breadcrumbs/breadcrumbs.js';
 import { NavUser } from '../../navigation/NavUser/nav-user.js';
-import { AppearanceToggleDropdown } from '../../settings/AppearanceDropdown/appearance-dropdown.js';
-import '../../ui/Alert/alert.js';
-import 'react-dom';
-import '../../ui/Alert/alert.css';
-import '../../ui/Avatar/avatar.js';
-import '../../ui/Button/button.js';
-import '../../ui/Chip/chip.js';
-import '../../ui/CodeBlock/code-block.js';
 import cn from 'clsx';
-import '../../ui/DevIndicator/dev-indicator.css';
-import '../../ui/Dialog/dialog.js';
-import '../../ui/EmptyState/empty-state.js';
-import '../../ui/Icon/icon.js';
-import '../../ui/List/list.js';
-import '../../ui/Pagination/pagination.js';
-import '../../ui/ProgressBar/progress-bar.js';
-import '../../ui/Separator/separator.js';
-import '../../ui/StatCard/stat-card.js';
-import '../../ui/StatusDot/status-dot.js';
-import '../../ui/StatusDot/status-dot-variants.js';
-import '../../ui/StepProgress/step-progress.js';
-import '../../ui/Switch/switch.js';
-import '../../ui/Table/table.js';
-import '../../ui/TableActionCell/table-action-cell.js';
-import '../../ui/TableToolbar/table-toolbar.js';
-import '../../ui/Toggle/toggle.js';
-import '../../ui/ToggleGroup/toggle-group.js';
-import '../../ui/Tooltip/tooltip.js';
-import 'lucide-react';
-import '../../settings/AppearanceTabs/appearance-tabs.css';
 import s from './app-sidebar-header.module.scss.js';
+import { AppearanceToggleDropdown } from '../../settings/AppearanceDropdown/appearance-dropdown.js';
 
-function AppSidebarHeader({ breadcrumbs = [], user, userMenu, actions, }) {
+/**
+ * The header band of a content area.
+ *
+ * `className` and any other DOM props reach the `header` element. They used to
+ * be dropped on the floor — the component took four named props and spread
+ * nothing — so a caller passing `className` got no error and no class, and
+ * spent the difference looking at its own stylesheet.
+ */
+function AppSidebarHeader({ breadcrumbs = [], user, userMenu, actions, className, ...props }) {
     const { state } = useSidebar();
-    return (jsxs(Row, { "data-slot": 'app-sidebar-header', el: 'header', align: 'center', gap: 1, justify: 'space-between', className: cn(s['app-sidebar-header'], state === 'collapsed' && s['sidebar-header-collapsed']), children: [jsxs(Row, { gap: 1, children: [jsx(SidebarTrigger, {}), jsx(Breadcrumbs, { breadcrumbs: breadcrumbs })] }), jsxs(Row, { gap: 1, align: 'center', children: [actions, jsx(AppearanceToggleDropdown, {}), user && jsx(NavUser, { user: user, ...userMenu })] })] }));
+    return (jsxs(Row, { "data-slot": 'app-sidebar-header', el: 'header', align: 'center', gap: 1, justify: 'space-between', className: cn(s['app-sidebar-header'], state === 'collapsed' && s['sidebar-header-collapsed'], className), ...props, children: [jsxs(Row, { gap: 1, children: [jsx(SidebarTrigger, {}), jsx(Breadcrumbs, { breadcrumbs: breadcrumbs })] }), jsxs(Row, { gap: 1, align: 'center', children: [actions, jsx(AppearanceToggleDropdown, {}), user && jsx(NavUser, { user: user, ...userMenu })] })] }));
 }
 
 export { AppSidebarHeader };

package/dist/layout/AppSidebarHeader/app-sidebar-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-sidebar-header.js","sources":["../../../src/layout/AppSidebarHeader/app-sidebar-header.tsx"],"sourcesContent":["import { useSidebar } from '@constellation/hooks';\nimport { Row } from '@constellation/layout/Row';\nimport { SidebarTrigger } from '@constellation/layout/Sidebar';\nimport { Breadcrumbs } from '@constellation/navigation/Breadcrumbs';\nimport { NavUser, type NavUserProps } from '@constellation/navigation/NavUser';\nimport { AppearanceToggleDropdown } from '@constellation/settings';\nimport { type BreadcrumbItemData } from '@constellation/types';\nimport cn from 'clsx';\nimport * as React from 'react';\nimport s from './app-sidebar-header.module.scss';\n\nexport interface AppSidebarHeaderProps {\n  breadcrumbs?: BreadcrumbItemData[];\n  /** Omit to hide the account menu (e.g. on signed-out chrome). */\n  user?: NavUserProps['user'];\n  userMenu?: Omit<NavUserProps, 'user'>;\n  /** Extra controls between the appearance toggle and the account menu. */\n  actions?: React.ReactNode;\n}\n\nexport function AppSidebarHeader({\n  breadcrumbs = [],\n  user,\n  userMenu,\n  actions,\n}: AppSidebarHeaderProps) {\n  const { state } = useSidebar();\n\n  return (\n    <Row\n      data-slot={'app-sidebar-header'}\n      el={'header'}\n      align={'center'}\n      gap={1}\n      justify={'space-between'}\n      className={cn(\n        s['app-sidebar-header'],\n        state === 'collapsed' && s['sidebar-header-collapsed'],\n      )}\n    >\n      <Row gap={1}>\n        <SidebarTrigger />\n        <Breadcrumbs breadcrumbs={breadcrumbs} />\n      </Row>\n      <Row gap={1} align={'center'}>\n        {actions}\n        <AppearanceToggleDropdown />\n        {user && <NavUser user={user} {...userMenu} />}\n      </Row>\n    </Row>\n  );\n}\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBM,SAAU,gBAAgB,CAAC,EAC/B,WAAW,GAAG,EAAE,EAChB,IAAI,EACJ,QAAQ,EACR,OAAO,GACe,EAAA;AACtB,IAAA,MAAM,EAAE,KAAK,EAAE,GAAG,UAAU,EAAE;IAE9B,QACEA,KAAC,GAAG,EAAA,EAAA,WAAA,EACS,oBAAoB,EAC/B,EAAE,EAAE,QAAQ,EACZ,KAAK,EAAE,QAAQ,EACf,GAAG,EAAE,CAAC,EACN,OAAO,EAAE,eAAe,EACxB,SAAS,EAAE,EAAE,CACX,CAAC,CAAC,oBAAoB,CAAC,EACvB,KAAK,KAAK,WAAW,IAAI,CAAC,CAAC,0BAA0B,CAAC,CACvD,aAEDA,IAAA,CAAC,GAAG,IAAC,GAAG,EAAE,CAAC,EAAA,QAAA,EAAA,CACTC,GAAA,CAAC,cAAc,EAAA,EAAA,CAAG,EAClBA,IAAC,WAAW,EAAA,EAAC,WAAW,EAAE,WAAW,GAAI,CAAA,EAAA,CACrC,EACND,KAAC,GAAG,EAAA,EAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAA,QAAA,EAAA,CACzB,OAAO,EACRC,GAAA,CAAC,wBAAwB,KAAG,EAC3B,IAAI,IAAIA,GAAA,CAAC,OAAO,IAAC,IAAI,EAAE,IAAI,EAAA,GAAM,QAAQ,GAAI,CAAA,EAAA,CAC1C,CAAA,EAAA,CACF;AAEV;;"}
+{"version":3,"file":"app-sidebar-header.js","sources":["../../../src/layout/AppSidebarHeader/app-sidebar-header.tsx"],"sourcesContent":["import { useSidebar } from '@constellation/hooks';\nimport { Row } from '@constellation/layout/Row';\nimport { SidebarTrigger } from '@constellation/layout/Sidebar';\nimport { Breadcrumbs } from '@constellation/navigation/Breadcrumbs';\nimport { NavUser, type NavUserProps } from '@constellation/navigation/NavUser';\nimport { AppearanceToggleDropdown } from '@constellation/settings';\nimport { type BreadcrumbItemData } from '@constellation/types';\nimport cn from 'clsx';\nimport * as React from 'react';\nimport s from './app-sidebar-header.module.scss';\n\nexport interface AppSidebarHeaderProps extends React.HTMLAttributes<HTMLElement> {\n  breadcrumbs?: BreadcrumbItemData[];\n  /** Omit to hide the account menu (e.g. on signed-out chrome). */\n  user?: NavUserProps['user'];\n  userMenu?: Omit<NavUserProps, 'user'>;\n  /** Extra controls between the appearance toggle and the account menu. */\n  actions?: React.ReactNode;\n}\n\n/**\n * The header band of a content area.\n *\n * `className` and any other DOM props reach the `header` element. They used to\n * be dropped on the floor — the component took four named props and spread\n * nothing — so a caller passing `className` got no error and no class, and\n * spent the difference looking at its own stylesheet.\n */\nexport function AppSidebarHeader({\n  breadcrumbs = [],\n  user,\n  userMenu,\n  actions,\n  className,\n  ...props\n}: AppSidebarHeaderProps) {\n  const { state } = useSidebar();\n\n  return (\n    <Row\n      data-slot={'app-sidebar-header'}\n      el={'header'}\n      align={'center'}\n      gap={1}\n      justify={'space-between'}\n      className={cn(\n        s['app-sidebar-header'],\n        state === 'collapsed' && s['sidebar-header-collapsed'],\n        className,\n      )}\n      {...props}\n    >\n      <Row gap={1}>\n        <SidebarTrigger />\n        <Breadcrumbs breadcrumbs={breadcrumbs} />\n      </Row>\n      <Row gap={1} align={'center'}>\n        {actions}\n        <AppearanceToggleDropdown />\n        {user && <NavUser user={user} {...userMenu} />}\n      </Row>\n    </Row>\n  );\n}\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;AAoBA;;;;;;;AAOG;SACa,gBAAgB,CAAC,EAC/B,WAAW,GAAG,EAAE,EAChB,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,SAAS,EACT,GAAG,KAAK,EACc,EAAA;AACtB,IAAA,MAAM,EAAE,KAAK,EAAE,GAAG,UAAU,EAAE;IAE9B,QACEA,KAAC,GAAG,EAAA,EAAA,WAAA,EACS,oBAAoB,EAC/B,EAAE,EAAE,QAAQ,EACZ,KAAK,EAAE,QAAQ,EACf,GAAG,EAAE,CAAC,EACN,OAAO,EAAE,eAAe,EACxB,SAAS,EAAE,EAAE,CACX,CAAC,CAAC,oBAAoB,CAAC,EACvB,KAAK,KAAK,WAAW,IAAI,CAAC,CAAC,0BAA0B,CAAC,EACtD,SAAS,CACV,EAAA,GACG,KAAK,EAAA,QAAA,EAAA,CAETA,IAAA,CAAC,GAAG,EAAA,EAAC,GAAG,EAAE,CAAC,aACTC,GAAA,CAAC,cAAc,KAAG,EAClBA,GAAA,CAAC,WAAW,EAAA,EAAC,WAAW,EAAE,WAAW,EAAA,CAAI,IACrC,EACND,IAAA,CAAC,GAAG,EAAA,EAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAA,QAAA,EAAA,CACzB,OAAO,EACRC,GAAA,CAAC,wBAAwB,EAAA,EAAA,CAAG,EAC3B,IAAI,IAAIA,GAAA,CAAC,OAAO,EAAA,EAAC,IAAI,EAAE,IAAI,EAAA,GAAM,QAAQ,EAAA,CAAI,CAAA,EAAA,CAC1C,CAAA,EAAA,CACF;AAEV;;"}

package/dist/layout/Collapse/collapse.css

@@ -13,7 +13,10 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .collapse-module_collapse__KvKxi {
+  :root:not([data-motion=full]) .collapse-module_collapse__KvKxi {
     transition: none;
   }
+}
+:root[data-motion=reduced] .collapse-module_collapse__KvKxi {
+  transition: none;
 }

package/dist/layout/Column/column.css

@@ -5,9 +5,15 @@
 .column-module_column__wLC8A.column-module_gap-0__AAHBe {
   gap: 0;
 }
+.column-module_column__wLC8A.column-module_gap-0-5__htvan {
+  gap: var(--size-0-5);
+}
 .column-module_column__wLC8A.column-module_gap-1__uPPtg {
   gap: var(--size-1);
 }
+.column-module_column__wLC8A.column-module_gap-1-5__hokuy {
+  gap: var(--size-1-5);
+}
 .column-module_column__wLC8A.column-module_gap-2__sc1tv {
   gap: var(--size-2);
 }

package/dist/layout/Column/column.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"column.d.ts","sourceRoot":"","sources":["../../../src/layout/Column/column.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAExD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA+BxC,CAAC"}
+{"version":3,"file":"column.d.ts","sourceRoot":"","sources":["../../../src/layout/Column/column.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAExD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAiCxC,CAAC"}

package/dist/layout/Column/column.js

@@ -4,7 +4,9 @@ import s from './column.module.scss.js';
 
 const Column = ({ children, className, style, el, gap = 0, full = false, fullHeight = false, align, flex, ...props }) => {
     const Component = (el ?? 'div');
-    const gapClass = gap ? s[`gap-${gap}`] : undefined;
+    // `0.5` -> `gap-0-5`: a dot is not valid in a class name, so the numeric
+    // prop is sanitised here rather than making callers write the string.
+    const gapClass = gap ? s[`gap-${String(gap).replace('.', '-')}`] : undefined;
     const flexClass = flex ? s[`flex-${flex}`] : undefined;
     const rootClassName = cn(className, s.column, gapClass, full && s['full-width'], fullHeight && s.full, align && s[`align-${align}`], flexClass);
     return (jsx(Component, { "data-slot": 'column', style: style, className: rootClassName, ...props, children: children }));