@kismet-ux/constellation 1.8.0 → 1.11.0

package/dist/index.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 a,
 abbr,
 acronym,
@@ -252,7 +253,12 @@ svg {
   --warning-selected: rgba(255, 176, 32, 0.075);
   --success-main: #0d9467;
   --success-dark: #085c40;
-  --success-emphasis: #0d9467;
+  /*
+   * 700, not 600. Emphasis is INK, and green is the family where the 600 step
+   * is still too light to carry it: $emerald-600 measures 3.85:1 on white
+   * against AA's 4.5, where every other family's 600 clears it. 700 is 8.0:1.
+   */
+  --success-emphasis: #085c40;
   --success-light: rgba(16, 185, 129, 0.75);
   --success-contrast: #ffffff;
   --success-focus: rgba(16, 185, 129, 0.25);
@@ -284,7 +290,7 @@ svg {
   --action-disabled: rgba(94, 106, 125, 0.5);
   --action-disabled-background: rgba(94, 106, 125, 0.1);
   --action-focus: rgba(94, 106, 125, 0.25);
-  --action-hover: rgba(94, 106, 125, 0.075);
+  --action-hover: rgba(94, 106, 125, 0.125);
   --action-selected: rgba(94, 106, 125, 0.25);
   --avatar-fallback: rgba(94, 106, 125, 0.25);
   --common-black-main: #151a23;
@@ -412,6 +418,33 @@ svg {
   --size-10: 5rem;
   --size-11: 5.5rem;
   --size-12: 6rem;
+  /*
+   * Half steps, for dense UI.
+   *
+   * A list row, a chip strip or a badge cluster wants 4-6px between things,
+   * and the whole-number scale starts at 8px — which is why callers kept
+   * reaching past `gap` for a hand-written `gap: 0.3rem`. Named with a dash
+   * because `--size-0.5` is not a usable identifier.
+   */
+  --size-0-5: 0.25rem;
+  --size-1-5: 0.75rem;
+  /*
+   * ── Measure ────────────────────────────────────────────────────────────
+   *
+   * How wide content is allowed to get, as opposed to how wide it CAN get.
+   * A layout that only answers "fill the space" reads fine on a laptop and
+   * badly on a 27-inch monitor, where a row of one-line items stretches its
+   * last column a metre from its first.
+   *
+   * `text`   — a single column of prose. Character-based, so it follows the
+   *            font rather than a guess in pixels.
+   * `content`— the default working width for forms, lists and cards.
+   * `wide`   — dense, tabular or multi-column work that earns the room: a
+   *            till, a dashboard, an inventory grid.
+   */
+  --measure-text: 68ch;
+  --measure-content: 1100px;
+  --measure-wide: 1600px;
   --appbar-height: 64px;
   --footer-height: 52px;
   --main-body-height: calc(100vh - var(--appbar-height) - var(--footer-height));
@@ -451,63 +484,70 @@ PALETTE - DARK MODE
   --inherit-selected: rgba(255, 255, 255, 0.12);
   --primary-main: #0ea5e9;
   --primary-dark: #0369a1;
-  --primary-emphasis: #7dd3fc;
+  --primary-emphasis: #0ea5e9;
   --primary-light: #38bdf8;
   --primary-contrast: #0d1017;
   --primary-focus: #38bdf8;
   --primary-focus-visible: #38bdf8;
   --primary-hover: rgba(125, 211, 252, 0.16);
-  --primary-outlined-border: #7dd3fc;
+  /*
+   * SOLID 500, not the 300 tint. 25-400 are alpha shades of the same hue, so
+   * `$rose-300` is `rgba(#f43f5e, .5)` — as a border it composites fine, but
+   * these tokens are also the INK of every outlined Button and Chip, and half
+   * an opacity over the dark ground measured 2.0:1 against AA's 4.5. The 500s
+   * are the bright solids these were always meant to be: rose lands at 4.6:1.
+   */
+  --primary-outlined-border: #0ea5e9;
   --primary-selected: rgba(125, 211, 252, 0.12);
   --secondary-main: #8b5cf6;
   --secondary-dark: #462e7b;
-  --secondary-emphasis: rgba(139, 92, 246, 0.5);
+  --secondary-emphasis: #9970f7;
   --secondary-light: rgba(139, 92, 246, 0.75);
   --secondary-contrast: #ffffff;
   --secondary-focus: rgba(139, 92, 246, 0.5);
   --secondary-focus-visible: rgba(139, 92, 246, 0.5);
   --secondary-hover: rgba(139, 92, 246, 0.1);
-  --secondary-outlined-border: rgba(139, 92, 246, 0.5);
+  --secondary-outlined-border: #9970f7;
   --secondary-selected: rgba(139, 92, 246, 0.075);
   --destructive-main: #f43f5e;
   --destructive-dark: #7a202f;
-  --destructive-emphasis: rgba(244, 63, 94, 0.5);
+  --destructive-emphasis: #f43f5e;
   --destructive-light: rgba(244, 63, 94, 0.75);
   --destructive-contrast: #ffffff;
   --destructive-focus: rgba(244, 63, 94, 0.5);
   --destructive-focus-visible: rgba(244, 63, 94, 0.5);
   --destructive-hover: rgba(244, 63, 94, 0.1);
-  --destructive-outlined-border: rgba(244, 63, 94, 0.5);
+  --destructive-outlined-border: #f43f5e;
   --destructive-selected: rgba(244, 63, 94, 0.075);
   --warning-main: #ffb020;
   --warning-dark: #805810;
-  --warning-emphasis: rgba(255, 176, 32, 0.5);
+  --warning-emphasis: #ffb020;
   --warning-light: rgba(255, 176, 32, 0.75);
   --warning-contrast: #0d1017;
   --warning-focus: rgba(255, 176, 32, 0.5);
   --warning-focus-visible: rgba(255, 176, 32, 0.5);
   --warning-hover: rgba(255, 176, 32, 0.1);
-  --warning-outlined-border: rgba(255, 176, 32, 0.5);
+  --warning-outlined-border: #ffb020;
   --warning-selected: rgba(255, 176, 32, 0.075);
   --success-main: #10b981;
   --success-dark: #085c40;
-  --success-emphasis: rgba(16, 185, 129, 0.5);
+  --success-emphasis: #10b981;
   --success-light: rgba(16, 185, 129, 0.75);
   --success-contrast: #0d1017;
   --success-focus: rgba(16, 185, 129, 0.5);
   --success-focus-visible: rgba(16, 185, 129, 0.5);
   --success-hover: rgba(16, 185, 129, 0.1);
-  --success-outlined-border: rgba(16, 185, 129, 0.5);
+  --success-outlined-border: #10b981;
   --success-selected: rgba(16, 185, 129, 0.075);
   --info-main: #3688b3;
   --info-dark: #1b5276;
-  --info-emphasis: #96c4dd;
+  --info-emphasis: #4a94bb;
   --info-light: #7bb6d4;
   --info-contrast: #ffffff;
   --info-focus: #5fa6cb;
   --info-focus-visible: #5fa6cb;
   --info-hover: rgba(54, 136, 179, 0.1);
-  --info-outlined-border: #96c4dd;
+  --info-outlined-border: #3688b3;
   --info-selected: rgba(54, 136, 179, 0.075);
   --slate-main: #5e6a7d;
   --slate-dark: #333c4a;
@@ -516,14 +556,16 @@ PALETTE - DARK MODE
   --slate-contrast: #0d1017;
   --slate-focus: rgba(255, 255, 255, 0.24);
   --slate-focus-visible: rgba(255, 255, 255, 0.32);
-  --slate-hover: rgba(255, 255, 255, 0.08);
-  --slate-outlined-border: rgba(255, 255, 255, 0.4);
+  --slate-hover: rgba(255, 255, 255, 0.12);
+  /* $white-40 composited to 3.82:1 as button ink; 56% clears AA and still
+     reads as the quiet neutral rather than as primary text. */
+  --slate-outlined-border: rgba(255, 255, 255, 0.56);
   --slate-selected: rgba(255, 255, 255, 0.08);
   --action-active: rgba(255, 255, 255, 0.64);
   --action-disabled: rgba(255, 255, 255, 0.32);
   --action-disabled-background: rgba(255, 255, 255, 0.08);
   --action-focus: rgba(255, 255, 255, 0.24);
-  --action-hover: rgba(255, 255, 255, 0.08);
+  --action-hover: rgba(255, 255, 255, 0.12);
   --action-selected: rgba(255, 255, 255, 0.16);
   --avatar-fallback: rgba(255, 255, 255, 0.16);
   --background-default: #0d1017;
@@ -655,7 +697,7 @@ main {
   flex-direction: column;
   gap: var(--size-4);
   height: 100%;
-  overflow: hidden;
+  overflow-y: scroll;
   padding: var(--main-padding-width) var(--main-padding-height);
   position: relative;
 }
@@ -708,6 +750,20 @@ a {
 button {
   -webkit-appearance: button;
   background-image: none;
+}
+
+/*
+ * `display` is a DEFAULT, so it ships at zero specificity through `:where()`.
+ *
+ * It used to live in the rule above, where `[type='button']:not([role='checkbox'])`
+ * scores 0,2,0 — enough to beat a component's own `.item { display: flex }` at
+ * 0,1,0. So every Constellation button that set its own display was silently
+ * forced back to `inline-flex`. That LOOKED correct anywhere the button was a
+ * flex or grid child, because those layouts blockify their items; drop one into
+ * a plain block container — a SelectGroup, say — and the items flow inline
+ * instead of stacking.
+ */
+:where([type=button]:not([role=checkbox]), [type=reset], [type=submit], button) {
   display: inline-flex;
 }
 

package/dist/index.d.ts

@@ -1,21 +1,21 @@
 export { Logo, LogoProps } from './brand.js';
-export { C as Checkbox, a as CheckboxProps, D as DatePicker, b as DatePickerProps, F as FormTheme, L as Label, c as LabelProps, S as Select, d as SelectAlign, e as SelectContent, f as SelectContentProps, g as SelectField, h as SelectFieldProps, i as SelectGroup, j as SelectItem, k as SelectPosition, l as SelectProps, m as SelectSeparator, n as SelectSide, o as SelectTrigger, p as SelectValue } from './index-ibcvWtdH.js';
+export { C as Checkbox, a as CheckboxProps, b as Combobox, c as ComboboxOption, d as ComboboxProps, D as DatePicker, e as DatePickerProps, F as FormTheme, L as Label, f as LabelProps, S as Select, g as SelectAlign, h as SelectContent, i as SelectContentProps, j as SelectField, k as SelectFieldProps, l as SelectGroup, m as SelectItem, n as SelectPosition, o as SelectProps, p as SelectSeparator, q as SelectSide, r as SelectTrigger, s as SelectValue, t as __Surface } from './index-2nHZOukj.js';
 export { I as Input, a as InputBaseProps } from './input-Cp5LET5i.js';
-import { S as SidebarContextValue } from './index-BSSQnlm_.js';
-export { A as AppContent, a as AppFooter, b as AppFooterProps, c as AppShell, d as AppShellProps, e as AppSidebar, f as AppSidebarHeader, g as AppSidebarHeaderProps, h as AppSidebarProps, C as Collapse, i as CollapseProps, j as Column, k as ColumnProps, l as Container, m as ContainerProps, G as Grid, n as GridColumns, o as GridProps, R as Row, p as Sidebar, q as SidebarContent, r as SidebarFooter, s as SidebarGroup, t as SidebarGroupAction, u as SidebarGroupContent, v as SidebarGroupLabel, w as SidebarHeader, x as SidebarInput, y as SidebarInset, z as SidebarMenu, B as SidebarMenuAction, D as SidebarMenuBadge, E as SidebarMenuButton, F as SidebarMenuItem, H as SidebarMenuSkeleton, I as SidebarMenuSub, J as SidebarMenuSubButton, K as SidebarMenuSubItem, L as SidebarProvider, M as SidebarRail, N as SidebarTrigger, O as SidebarVariant, P as Skeleton } from './index-BSSQnlm_.js';
-import { A as AlertContextValue, S as SortState } from './index-CkQ6wNCc.js';
-export { a as Alert, b as AlertBanner, c as AlertBannerProps, d as AlertDescription, e as AlertMessage, f as AlertProps, g as AlertProvider, h as AlertTheme, i as AlertTitle, j as Avatar, k as AvatarFallback, l as AvatarFallbackProps, m as AvatarImage, n as AvatarImageProps, o as AvatarProps, C as Chip, p as ChipProps, q as CodeBlock, r as CodeBlockProps, D as DevIndicator, s as DevIndicatorProps, t as Dialog, u as DialogClose, v as DialogCloseProps, w as DialogContent, x as DialogContentProps, y as DialogDescription, z as DialogFooter, B as DialogHeader, E as DialogOverlay, F as DialogPortal, G as DialogProps, H as DialogTitle, I as DialogTrigger, J as DialogTriggerProps, K as EmptyState, L as EmptyStateProps, M as Icon, N as IconProps, O as List, P as ListItem, Q as ListItemProps, R as ListProps, T as Pagination, U as PaginationProps, V as ProgressBar, W as ProgressBarProps, X as PushAlertInput, Y as Separator, Z as SeparatorProps, _ as SortContextValue, $ as SortDirection, a0 as StatCard, a1 as StatCardDirection, a2 as StatCardProps, a3 as StatCardSize, a4 as StatCardTheme, a5 as StatCardVariant, a6 as StatusDot, a7 as StatusDotProps, a8 as Step, a9 as StepProgress, aa as StepProgressProps, ab as Switch, ac as SwitchProps, ad as Table, ae as TableActionCell, af as TableActionCellProps, ag as TableActionItem, ah as TableBody, ai as TableBodyProps, aj as TableCard, ak as TableCell, al as TableFooter, am as TableHead, an as TableHeader, ao as TableRow, ap as TableSortableHeader, aq as TableSortableHeaderProps, ar as TableToolbar, as as TableToolbarProps, at as Toggle, au as ToggleGroup, av as ToggleGroupProps, aw as ToggleProps, ax as TrendDirection, ay as persistAlert, az as statusDotVariants } from './index-CkQ6wNCc.js';
-export { R as RowProps } from './row-CS9-talZ.js';
+import * as React from 'react';
+import { S as SidebarContextValue } from './index-BWTwKQsp.js';
+export { A as AppContent, a as AppContentFooter, b as AppContentFooterProps, c as AppContentMain, d as AppContentMainProps, e as AppFooter, f as AppFooterProps, g as AppShell, h as AppShellProps, i as AppSidebar, j as AppSidebarHeader, k as AppSidebarHeaderProps, l as AppSidebarProps, C as Collapse, m as CollapseProps, n as Column, o as ColumnProps, p as Container, q as ContainerProps, G as Grid, r as GridColumns, s as GridProps, R as Row, t as Sidebar, u as SidebarContent, v as SidebarFooter, w as SidebarGroup, x as SidebarGroupAction, y as SidebarGroupContent, z as SidebarGroupLabel, B as SidebarHeader, D as SidebarInput, E as SidebarInset, F as SidebarMenu, H as SidebarMenuAction, I as SidebarMenuBadge, J as SidebarMenuButton, K as SidebarMenuItem, L as SidebarMenuSkeleton, M as SidebarMenuSub, N as SidebarMenuSubButton, O as SidebarMenuSubItem, P as SidebarProvider, Q as SidebarRail, T as SidebarTrigger, U as SidebarVariant, V as Skeleton } from './index-BWTwKQsp.js';
+import { A as AlertContextValue, S as SortState } from './index-CWM2ewRz.js';
+export { a as Alert, b as AlertBanner, c as AlertBannerProps, d as AlertDescription, e as AlertMessage, f as AlertProps, g as AlertProvider, h as AlertTheme, i as AlertTitle, j as Avatar, k as AvatarFallback, l as AvatarFallbackProps, m as AvatarImage, n as AvatarImageProps, o as AvatarProps, C as Chip, p as ChipProps, q as CodeBlock, r as CodeBlockProps, D as DevIndicator, s as DevIndicatorProps, t as Dialog, u as DialogClose, v as DialogCloseProps, w as DialogContent, x as DialogContentProps, y as DialogDescription, z as DialogFooter, B as DialogHeader, E as DialogOverlay, F as DialogPortal, G as DialogProps, H as DialogTitle, I as DialogTrigger, J as DialogTriggerProps, K as EmptyState, L as EmptyStateProps, M as Icon, N as IconProps, O as List, P as ListItem, Q as ListItemProps, R as ListProps, T as Pagination, U as PaginationProps, V as ProgressBar, W as ProgressBarProps, X as PushAlertInput, Y as Separator, Z as SeparatorProps, _ as SortContextValue, $ as SortDirection, a0 as StatCard, a1 as StatCardDirection, a2 as StatCardProps, a3 as StatCardSize, a4 as StatCardTheme, a5 as StatCardVariant, a6 as StatusDot, a7 as StatusDotProps, a8 as Step, a9 as StepProgress, aa as StepProgressProps, ab as Switch, ac as SwitchProps, ad as Table, ae as TableActionCell, af as TableActionCellProps, ag as TableActionItem, ah as TableBody, ai as TableBodyProps, aj as TableCard, ak as TableCell, al as TableFooter, am as TableHead, an as TableHeader, ao as TableRow, ap as TableSortableHeader, aq as TableSortableHeaderProps, ar as TableToolbar, as as TableToolbarProps, at as Toggle, au as ToggleGroup, av as ToggleGroupProps, aw as ToggleProps, ax as TrendDirection, ay as persistAlert, az as statusDotVariants } from './index-CWM2ewRz.js';
+export { R as RowProps } from './row-CuhTBQhK.js';
 export { Breadcrumbs, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuContentProps, DropdownMenuGroup, DropdownMenuItem, DropdownMenuItemProps, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuProps, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DropdownMenuTriggerProps, Link, LinkProps, RouterAdapter, RouterProvider, Sheet, SheetBody, SheetClose, SheetCloseProps, SheetContent, SheetContentProps, SheetDescription, SheetFooter, SheetHeader, SheetProps, SheetTitle, SheetTrigger, SheetTriggerProps, useRouterAdapter } from './navigation.js';
 export { B as BreadcrumbItemData, N as NavGroup, a as NavItem, b as NavUser, c as NavUserProps, S as SidebarNavItem, d as SidebarSection } from './nav-user-CJIcWKyY.js';
 export { AppearanceTabs, AppearanceToggleDropdown } from './settings.js';
 export { a as User, b as UserMenuContent, U as UserMenuContentProps, c as UserMenuItem } from './user-menu-content-D0Ldzigm.js';
 export { Heading, TruncatedText, TruncatedTextProps } from './typography.js';
-export { T as Typography, a as TypographyAlign, b as TypographyProps, c as TypographyTheme, d as TypographyTransform, e as TypographyVariant, f as TypographyWeight } from './typography-DOZHFR5A.js';
-export { B as Button, a as ButtonProps, T as Tooltip, b as TooltipContent, c as TooltipContentProps, d as TooltipProps, e as TooltipProvider, f as TooltipTrigger, g as TooltipTriggerProps } from './tooltip-XagXjWLB.js';
+export { T as Typography, a as TypographyAlign, b as TypographyProps, c as TypographySize, d as TypographyTheme, e as TypographyTransform, f as TypographyVariant, g as TypographyWeight } from './typography-CTGVc_Gg.js';
+export { B as Button, a as ButtonProps, T as Tooltip, b as TooltipContent, c as TooltipContentProps, d as TooltipProps, e as TooltipProvider, f as TooltipTrigger, g as TooltipTriggerProps } from './tooltip-BpAJwi3K.js';
 export { UserInfo } from './user.js';
-export { getCsrfToken } from './utils.js';
-import 'react';
+export { CONSTELLATION_PORTAL_SELECTOR, getCsrfToken, isInConstellationPortal } from './utils.js';
 import 'class-variance-authority';
 import 'class-variance-authority/types';
 import 'lucide-react';
@@ -24,6 +24,42 @@ interface DragDropRef {
     open: () => void;
 }
 
+interface UseFlipOptions {
+    /** Milliseconds for a child to travel to its new place. */
+    duration?: number;
+    /** Easing for that travel. Defaults to the theme's standard curve. */
+    easing?: string;
+    /** Animate children that appear, as well as ones that move. */
+    animateEntry?: boolean;
+    /** Turn the whole thing off without unmounting the hook. */
+    enabled?: boolean;
+}
+/**
+ * FLIP-animate the direct children of a container so they never teleport.
+ *
+ * Layout is instantaneous by default: a card that reflows into a new column
+ * when the window narrows, or that is pushed down because a sibling expanded,
+ * simply IS somewhere else on the next frame. The eye reads that as a glitch
+ * rather than as movement, and in a masonry — where one change can restack a
+ * whole column — it is disorienting.
+ *
+ * FLIP is the standard answer: measure where things were (First), let the
+ * browser lay them out (Last), transform them back to where they came from
+ * (Invert), then release the transform (Play). Only `transform` is animated,
+ * so it runs on the compositor and does not re-lay-out anything per frame.
+ *
+ * Positions are read in a layout effect after every commit, which is why this
+ * catches expansion, insertion, removal and re-ordering without being told
+ * about them; a ResizeObserver covers the reflows that no render accompanies,
+ * such as the window being dragged wider.
+ *
+ * Honours the app's motion preference (`useMotion`), which defaults to
+ * `prefers-reduced-motion` but can be overridden — someone who has asked for
+ * less movement gets the instant layout, and someone whose OS says so but who
+ * wants it anyway can have it.
+ */
+declare function useFlip<T extends HTMLElement>(ref: React.RefObject<T | null>, { duration, easing, animateEntry, enabled, }?: UseFlipOptions): void;
+
 declare function useSidebar(): SidebarContextValue;
 
 declare function useAlerts(): AlertContextValue;
@@ -51,5 +87,35 @@ declare function useBreakpoint(): {
 };
 declare function useIsMobile(breakpoint?: number): boolean;
 
-export { AlertContextValue, SidebarContextValue, SortState, initializeTheme, useAlerts, useAppearance, useBreakpoint, useInitials, useIsMobile, useSidebar, useTableSorting };
-export type { Appearance, DragDropRef, ResolvedAppearance };
+/**
+ * `system` follows `prefers-reduced-motion`; the other two override it.
+ *
+ * The OS setting is the right DEFAULT and the wrong prison. Someone may have
+ * switched Windows animations off years ago for a laptop that no longer
+ * exists, or turned them off for one badly-behaved app; either way they are
+ * then told, silently, that this app cannot animate. Equally, someone who
+ * genuinely needs less movement must be able to keep it off in an app that
+ * otherwise ignores them. So it is a real preference, defaulting to the
+ * system's answer.
+ */
+type Motion = 'system' | 'full' | 'reduced';
+/** Set once before render so the first frame is already correct. */
+declare function initializeMotion(): void;
+/**
+ * Whether motion should be suppressed, and how to change that.
+ *
+ * Prefer this over reading `prefers-reduced-motion` directly: a component that
+ * asks the media query cannot be overridden by the app's own setting.
+ */
+declare function useMotion(): {
+    setMotion: (motion: Motion) => void;
+    motion: Motion;
+    reduced: boolean;
+};
+/** The question most callers actually have. */
+declare function useReducedMotion(): boolean;
+/** For the non-React paths — animation helpers that run outside a component. */
+declare function prefersReducedMotion(): boolean;
+
+export { AlertContextValue, SidebarContextValue, SortState, initializeMotion, initializeTheme, prefersReducedMotion, useAlerts, useAppearance, useBreakpoint, useFlip, useInitials, useIsMobile, useMotion, useReducedMotion, useSidebar, useTableSorting };
+export type { Appearance, DragDropRef, Motion, ResolvedAppearance, UseFlipOptions };

package/dist/index.js

@@ -1,57 +1,59 @@
-export { Logo } from './brand/Logo/logo.js';
-export { Checkbox } from './form/Checkbox/checkbox.js';
-export { DatePicker } from './form/DatePicker/date-picker.js';
-export { Input } from './form/Input/input.js';
-export { Label } from './form/Label/label.js';
-export { Select, SelectContent, SelectField, SelectGroup, SelectItem, SelectSeparator, SelectTrigger, SelectValue } from './form/Select/select.js';
+export { useFlip } from './hooks/layout/use-flip.js';
 export { useSidebar } from './hooks/layout/use-sidebar.js';
 export { useAlerts } from './hooks/ui/use-alerts.js';
 export { useTableSorting } from './hooks/ui/use-table-sorting.js';
 export { initializeTheme, useAppearance } from './hooks/use-appearance.js';
 export { useInitials } from './hooks/use-initials.js';
 export { useBreakpoint, useIsMobile } from './hooks/use-mobile.js';
+export { initializeMotion, prefersReducedMotion, useMotion, useReducedMotion } from './hooks/use-motion.js';
+import './index.css';
+export { Alert, AlertBanner, AlertDescription, AlertTitle } from './ui/Alert/alert.js';
+export { AlertProvider } from './ui/Alert/alert-provider.js';
 export { AppContent } from './layout/AppContent/app-content.js';
+export { AppContentFooter } from './layout/AppContentFooter/app-content-footer.js';
+export { AppContentMain } from './layout/AppContentMain/app-content-main.js';
 export { AppFooter } from './layout/AppFooter/app-footer.js';
 export { AppShell } from './layout/AppShell/app-shell.js';
 export { AppSidebar } from './layout/AppSidebar/app-sidebar.js';
 export { AppSidebarHeader } from './layout/AppSidebarHeader/app-sidebar-header.js';
-export { Collapse } from './layout/Collapse/collapse.js';
-export { Column } from './layout/Column/column.js';
-export { Container } from './layout/Container/container.js';
-export { Grid } from './layout/Grid/grid.js';
-export { Row } from './layout/Row/row.js';
-export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarTrigger } from './layout/Sidebar/sidebar.js';
-export { Skeleton } from './layout/Skeleton/skeleton.js';
-export { Breadcrumbs } from './navigation/Breadcrumbs/breadcrumbs.js';
-export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from './navigation/DropdownMenu/dropdown-menu.js';
-export { Link } from './navigation/Link/link.js';
-export { NavUser } from './navigation/NavUser/nav-user.js';
-export { RouterProvider, useRouterAdapter } from './navigation/Router/router-context.js';
-export { Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from './navigation/Sheet/sheet.js';
-export { AppearanceToggleDropdown } from './settings/AppearanceDropdown/appearance-dropdown.js';
 export { AppearanceTabs } from './settings/AppearanceTabs/appearance-tabs.js';
-import './index.css';
-export { Heading } from './typography/Heading/heading.js';
-export { TruncatedText } from './typography/TruncatedText/truncated-text.js';
-export { Typography } from './typography/Typography/typography.js';
-export { Alert, AlertBanner, AlertDescription, AlertTitle } from './ui/Alert/alert.js';
-export { persistAlert } from './ui/Alert/alert-persist.js';
-export { AlertProvider } from './ui/Alert/alert-provider.js';
+export { AppearanceToggleDropdown } from './settings/AppearanceDropdown/appearance-dropdown.js';
 export { Avatar, AvatarFallback, AvatarImage } from './ui/Avatar/avatar.js';
+export { Breadcrumbs } from './navigation/Breadcrumbs/breadcrumbs.js';
 export { Button } from './ui/Button/button.js';
+export { CONSTELLATION_PORTAL_SELECTOR, isInConstellationPortal } from './utils/portal.js';
+export { Checkbox } from './form/Checkbox/checkbox.js';
 export { Chip } from './ui/Chip/chip.js';
 export { CodeBlock } from './ui/CodeBlock/code-block.js';
+export { Collapse } from './layout/Collapse/collapse.js';
+export { Column } from './layout/Column/column.js';
+export { Combobox } from './form/Combobox/combobox.js';
+export { Container } from './layout/Container/container.js';
+export { DatePicker } from './form/DatePicker/date-picker.js';
 export { DevIndicator } from './ui/DevIndicator/dev-indicator.js';
 export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from './ui/Dialog/dialog.js';
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from './navigation/DropdownMenu/dropdown-menu.js';
 export { EmptyState } from './ui/EmptyState/empty-state.js';
+export { Grid } from './layout/Grid/grid.js';
+export { Heading } from './typography/Heading/heading.js';
 export { Icon } from './ui/Icon/icon.js';
+export { Input } from './form/Input/input.js';
+export { Label } from './form/Label/label.js';
+export { Link } from './navigation/Link/link.js';
 export { List, ListItem } from './ui/List/list.js';
+export { Logo } from './brand/Logo/logo.js';
+export { NavUser } from './navigation/NavUser/nav-user.js';
 export { Pagination } from './ui/Pagination/pagination.js';
 export { ProgressBar } from './ui/ProgressBar/progress-bar.js';
+export { RouterProvider, useRouterAdapter } from './navigation/Router/router-context.js';
+export { Row } from './layout/Row/row.js';
+export { Select, SelectContent, SelectField, SelectGroup, SelectItem, SelectSeparator, SelectTrigger, SelectValue, __Surface } from './form/Select/select.js';
 export { Separator } from './ui/Separator/separator.js';
+export { Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from './navigation/Sheet/sheet.js';
+export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarTrigger } from './layout/Sidebar/sidebar.js';
+export { Skeleton } from './layout/Skeleton/skeleton.js';
 export { StatCard } from './ui/StatCard/stat-card.js';
 export { StatusDot } from './ui/StatusDot/status-dot.js';
-export { statusDotVariants } from './ui/StatusDot/status-dot-variants.js';
 export { StepProgress } from './ui/StepProgress/step-progress.js';
 export { Switch } from './ui/Switch/switch.js';
 export { Table, TableBody, TableCard, TableCell, TableFooter, TableHead, TableHeader, TableRow, TableSortableHeader } from './ui/Table/table.js';
@@ -60,7 +62,11 @@ export { TableToolbar } from './ui/TableToolbar/table-toolbar.js';
 export { Toggle } from './ui/Toggle/toggle.js';
 export { ToggleGroup } from './ui/ToggleGroup/toggle-group.js';
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './ui/Tooltip/tooltip.js';
+export { TruncatedText } from './typography/TruncatedText/truncated-text.js';
+export { Typography } from './typography/Typography/typography.js';
 export { UserInfo } from './user/UserInfo/user-info.js';
 export { UserMenuContent } from './user/UserMenuContent/user-menu-content.js';
 export { getCsrfToken } from './utils/csrf.js';
+export { persistAlert } from './ui/Alert/alert-persist.js';
+export { statusDotVariants } from './ui/StatusDot/status-dot-variants.js';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

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

package/dist/internal/use-scroll-lock.d.ts

@@ -1,2 +1,17 @@
+/**
+ * Hold the page still while something modal is open.
+ *
+ * The compensation is MEASURED rather than assumed. Hiding the overflow can
+ * take the scrollbar away, which widens the content by its width and shifts
+ * everything under the dialog; padding the body back out cancels that. But it
+ * only needs cancelling when it actually happened — with
+ * `scrollbar-gutter: stable` the gutter is reserved whether or not a bar is
+ * drawn in it, so nothing moves and adding padding anyway NARROWS the content
+ * instead. That showed up as a masonry twitching a few pixels every time a
+ * modal opened and closed.
+ *
+ * So: hide the overflow, look at what the page width actually did, and pad by
+ * exactly that.
+ */
 export declare function useScrollLock(active: boolean): void;
 //# sourceMappingURL=use-scroll-lock.d.ts.map

package/dist/internal/use-scroll-lock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-scroll-lock.d.ts","sourceRoot":"","sources":["../../src/internal/use-scroll-lock.ts"],"names":[],"mappings":"AAEA,wBAAgB,aAAa,CAAC,MAAM,EAAE,OAAO,QAkB5C"}
+{"version":3,"file":"use-scroll-lock.d.ts","sourceRoot":"","sources":["../../src/internal/use-scroll-lock.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,OAAO,QAsB5C"}

package/dist/internal/use-scroll-lock.js

@@ -1,19 +1,37 @@
 import * as React from 'react';
 
+/**
+ * Hold the page still while something modal is open.
+ *
+ * The compensation is MEASURED rather than assumed. Hiding the overflow can
+ * take the scrollbar away, which widens the content by its width and shifts
+ * everything under the dialog; padding the body back out cancels that. But it
+ * only needs cancelling when it actually happened — with
+ * `scrollbar-gutter: stable` the gutter is reserved whether or not a bar is
+ * drawn in it, so nothing moves and adding padding anyway NARROWS the content
+ * instead. That showed up as a masonry twitching a few pixels every time a
+ * modal opened and closed.
+ *
+ * So: hide the overflow, look at what the page width actually did, and pad by
+ * exactly that.
+ */
 function useScrollLock(active) {
     React.useEffect(() => {
         if (!active)
             return;
-        const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
-        const prevOverflow = document.body.style.overflow;
-        const prevPaddingRight = document.body.style.paddingRight;
-        document.body.style.overflow = 'hidden';
-        if (scrollbarWidth > 0) {
-            document.body.style.paddingRight = `${scrollbarWidth}px`;
+        const { body, documentElement: html } = document;
+        const prevOverflow = body.style.overflow;
+        const prevPaddingRight = body.style.paddingRight;
+        const widthBefore = html.clientWidth;
+        body.style.overflow = 'hidden';
+        const gained = html.clientWidth - widthBefore;
+        if (gained > 0) {
+            const current = parseFloat(window.getComputedStyle(body).paddingRight) || 0;
+            body.style.paddingRight = `${current + gained}px`;
         }
         return () => {
-            document.body.style.overflow = prevOverflow;
-            document.body.style.paddingRight = prevPaddingRight;
+            body.style.overflow = prevOverflow;
+            body.style.paddingRight = prevPaddingRight;
         };
     }, [active]);
 }

package/dist/internal/use-scroll-lock.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-scroll-lock.js","sources":["../../src/internal/use-scroll-lock.ts"],"sourcesContent":["import * as React from 'react';\n\nexport function useScrollLock(active: boolean) {\n  React.useEffect(() => {\n    if (!active) return;\n\n    const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;\n    const prevOverflow = document.body.style.overflow;\n    const prevPaddingRight = document.body.style.paddingRight;\n\n    document.body.style.overflow = 'hidden';\n    if (scrollbarWidth > 0) {\n      document.body.style.paddingRight = `${scrollbarWidth}px`;\n    }\n\n    return () => {\n      document.body.style.overflow = prevOverflow;\n      document.body.style.paddingRight = prevPaddingRight;\n    };\n  }, [active]);\n}\n"],"names":[],"mappings":";;AAEM,SAAU,aAAa,CAAC,MAAe,EAAA;AAC3C,IAAA,KAAK,CAAC,SAAS,CAAC,MAAK;AACnB,QAAA,IAAI,CAAC,MAAM;YAAE;QAEb,MAAM,cAAc,GAAG,MAAM,CAAC,UAAU,GAAG,QAAQ,CAAC,eAAe,CAAC,WAAW;QAC/E,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ;QACjD,MAAM,gBAAgB,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY;QAEzD,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ;AACvC,QAAA,IAAI,cAAc,GAAG,CAAC,EAAE;YACtB,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,GAAG,CAAA,EAAG,cAAc,CAAA,EAAA,CAAI;QAC1D;AAEA,QAAA,OAAO,MAAK;YACV,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,YAAY;YAC3C,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,GAAG,gBAAgB;AACrD,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC;AACd;;"}
+{"version":3,"file":"use-scroll-lock.js","sources":["../../src/internal/use-scroll-lock.ts"],"sourcesContent":["import * as React from 'react';\n\n/**\n * Hold the page still while something modal is open.\n *\n * The compensation is MEASURED rather than assumed. Hiding the overflow can\n * take the scrollbar away, which widens the content by its width and shifts\n * everything under the dialog; padding the body back out cancels that. But it\n * only needs cancelling when it actually happened — with\n * `scrollbar-gutter: stable` the gutter is reserved whether or not a bar is\n * drawn in it, so nothing moves and adding padding anyway NARROWS the content\n * instead. That showed up as a masonry twitching a few pixels every time a\n * modal opened and closed.\n *\n * So: hide the overflow, look at what the page width actually did, and pad by\n * exactly that.\n */\nexport function useScrollLock(active: boolean) {\n  React.useEffect(() => {\n    if (!active) return;\n\n    const { body, documentElement: html } = document;\n    const prevOverflow = body.style.overflow;\n    const prevPaddingRight = body.style.paddingRight;\n\n    const widthBefore = html.clientWidth;\n    body.style.overflow = 'hidden';\n    const gained = html.clientWidth - widthBefore;\n\n    if (gained > 0) {\n      const current = parseFloat(window.getComputedStyle(body).paddingRight) || 0;\n      body.style.paddingRight = `${current + gained}px`;\n    }\n\n    return () => {\n      body.style.overflow = prevOverflow;\n      body.style.paddingRight = prevPaddingRight;\n    };\n  }, [active]);\n}\n"],"names":[],"mappings":";;AAEA;;;;;;;;;;;;;;AAcG;AACG,SAAU,aAAa,CAAC,MAAe,EAAA;AAC3C,IAAA,KAAK,CAAC,SAAS,CAAC,MAAK;AACnB,QAAA,IAAI,CAAC,MAAM;YAAE;QAEb,MAAM,EAAE,IAAI,EAAE,eAAe,EAAE,IAAI,EAAE,GAAG,QAAQ;AAChD,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ;AACxC,QAAA,MAAM,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY;AAEhD,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW;AACpC,QAAA,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ;AAC9B,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,WAAW,GAAG,WAAW;AAE7C,QAAA,IAAI,MAAM,GAAG,CAAC,EAAE;AACd,YAAA,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,YAAY,CAAC,IAAI,CAAC;YAC3E,IAAI,CAAC,KAAK,CAAC,YAAY,GAAG,GAAG,OAAO,GAAG,MAAM,CAAA,EAAA,CAAI;QACnD;AAEA,QAAA,OAAO,MAAK;AACV,YAAA,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,YAAY;AAClC,YAAA,IAAI,CAAC,KAAK,CAAC,YAAY,GAAG,gBAAgB;AAC5C,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC;AACd;;"}

package/dist/layout/AppContent/app-content.css

@@ -1,3 +1,3 @@
 .app-content-module_app-sidebar-content__Tl-lJ {
-  overflow-x: clip;
+  overflow: hidden;
 }

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

@@ -0,0 +1,21 @@
+.app-content-bands-module_app-content-header__BUehL {
+  background-color: var(--background-default);
+  position: sticky;
+  top: 0;
+  z-index: var(--z-sticky);
+}
+
+.app-content-bands-module_app-content-footer__aQGGo {
+  backdrop-filter: blur(12px);
+  background-color: color-mix(in srgb, var(--background-default) 88%, transparent);
+  border-top: 1px solid var(--divider);
+  bottom: 0;
+  margin-top: auto;
+  padding-bottom: env(safe-area-inset-bottom);
+  position: sticky;
+  z-index: var(--z-sticky);
+}
+
+.app-content-bands-module_band-static__qgY7r {
+  position: static;
+}

package/dist/layout/AppContentBands/app-content-bands.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+export interface AppContentBandProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** The element to render. Defaults to `header` / `footer` respectively. */
+    el?: React.ElementType<React.HTMLAttributes<HTMLDivElement>>;
+}
+/**
+ * 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.
+ */
+export declare function AppContentHeader({ children, className, el, sticky, ...props }: AppContentBandProps & {
+    sticky?: boolean;
+}): React.JSX.Element;
+/**
+ * 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.
+ */
+export declare function AppContentFooter({ children, className, el, ...props }: AppContentBandProps): React.JSX.Element;
+//# sourceMappingURL=app-content-bands.d.ts.map

package/dist/layout/AppContentBands/app-content-bands.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-content-bands.d.ts","sourceRoot":"","sources":["../../../src/layout/AppContentBands/app-content-bands.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC/E,2EAA2E;IAC3E,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC,CAAC;CAC9D;AAkDD;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EAAE,SAAS,EAAE,EAAE,EAAE,MAAa,EAAE,GAAG,KAAK,EACjD,EAAE,mBAAmB,GAAG;IAAE,MAAM,CAAC,EAAE,OAAO,CAAA;CAAE,qBAe5C;AAED;;;;;;;;;GASG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EAAE,SAAS,EAAE,EAAE,EAAE,GAAG,KAAK,EAClC,EAAE,mBAAmB,qBAYrB"}

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