@viax.io/uxm 4.36.0

package/dist/ui/app-sidebar/app-sidebar.css

@@ -0,0 +1,189 @@
+@charset "UTF-8";
+/* ── app-sidebar ── */
+/* AppSidebar — chrome shell. Root holds the visible width/bg/border-right;
+   inner __heading and __footer read their own colour vars so the editor
+   can theme section labels and the footer caption independently. The
+   `--collapsed` modifier reads `--uxm-app-sidebar-collapsed-width` so
+   collapse-state width is editable too. */
+.uxm-app-sidebar {
+  background-color: var(--uxm-app-sidebar-background-color, var(--color-surface-alt));
+  border-right: 1px solid var(--uxm-app-sidebar-border-color, var(--color-border));
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  transition: width 0.2s ease;
+  width: var(--uxm-app-sidebar-expanded-width, 256px);
+}
+.uxm-app-sidebar--collapsed {
+  width: var(--uxm-app-sidebar-collapsed-width, 64px);
+}
+.uxm-app-sidebar__header {
+  align-items: center;
+  display: flex;
+  flex-shrink: 0;
+  height: 64px;
+  justify-content: space-between;
+  padding: 0 16px;
+}
+.uxm-app-sidebar__brand {
+  align-items: center;
+  display: inline-flex;
+}
+.uxm-app-sidebar__brand img {
+  display: block;
+  max-height: 28px;
+  max-width: 130px;
+}
+.uxm-app-sidebar__brand--icon {
+  align-items: center;
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  display: inline-flex;
+  height: 32px;
+  justify-content: center;
+  margin: 0 auto;
+  transition: background-color 0.15s ease;
+  width: 32px;
+}
+.uxm-app-sidebar__brand--icon:hover {
+  background-color: color-mix(in srgb, var(--color-text) 6%, transparent);
+}
+.uxm-app-sidebar__brand--icon img {
+  max-height: 24px;
+  max-width: 20px;
+}
+.uxm-app-sidebar__toggle {
+  align-items: center;
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  color: var(--color-text-muted);
+  cursor: pointer;
+  display: inline-flex;
+  height: 32px;
+  justify-content: center;
+  transition: background-color 0.15s ease, color 0.15s ease;
+  width: 32px;
+}
+.uxm-app-sidebar__toggle:hover {
+  background-color: var(--color-surface);
+  color: var(--color-text);
+}
+.uxm-app-sidebar {
+  /* The head slot — under the brand row, above the nav. Named `__lead` because
+     `__header` is already the brand row (see the `header` prop's note).
+
+     Padding matches `__nav`'s 8px and NOT `__footer`'s 24px, so a control here
+     lines up with the rows beneath it: 8 + a child's own 12 = 20px, exactly
+     where a `sidebar-nav-item` label starts. The footer's 24px puts a control
+     at 36px — that 16px step is the misalignment you see whenever a switcher is
+     parked at the foot instead.
+
+     Deliberately imposes no `font-size` or `color`. The footer sets both, being
+     built for an 11px caption; a slot meant to hold a real control leaves type
+     to whatever it holds. */
+}
+.uxm-app-sidebar__lead {
+  border-bottom: 1px solid var(--uxm-app-sidebar-border-color, var(--color-border));
+  /* A column, so a slot handed more than one control stacks them with air
+     between instead of leaving the consumer to wrap them in a spacing div.
+     A head slot commonly holds two — a tenant switcher over a workspace one —
+     and two bordered cards butted together read as one control with a line
+     through it.
+
+     8px, matching this slot's own padding and the trigger's vertical padding,
+     so the rhythm is uniform rather than a third spacing value. It is a var
+     but deliberately NOT a workbench knob: one more slider for a value that
+     should follow the padding is a way for the two to drift apart. */
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  gap: var(--uxm-app-sidebar-lead-gap, 8px);
+  padding: var(--uxm-app-sidebar-lead-padding, 8px);
+}
+.uxm-app-sidebar__nav {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 16px;
+  overflow-y: auto;
+  padding: 8px;
+}
+.uxm-app-sidebar__section {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.uxm-app-sidebar__heading {
+  color: var(--uxm-app-sidebar-heading-color, var(--color-text-muted));
+  font-size: calc(11px * var(--type-scale, 1));
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  margin: 0;
+  padding: 8px 12px 2px;
+  text-transform: uppercase;
+}
+.uxm-app-sidebar__item {
+  padding: 10px 12px;
+}
+.uxm-app-sidebar__item--collapsed {
+  height: 32px;
+  justify-content: center;
+  margin: 0 auto;
+  padding: 0;
+  /* Anchor the clipped label/badge spans below inside THIS row (the
+     SidebarNavTrigger recipe does the same) — without it they resolve
+     against some positioned ancestor up the tree and their geometry
+     doesn't travel with the scrolled nav. */
+  position: relative;
+  /* Match the brand button's 32x32 footprint at the top of the
+     collapsed sidebar so the chrome reads as a single column of tiles. */
+  width: 32px;
+  /* The label and badge are CLIPPED, not dropped (same recipe as
+     SidebarNavTrigger's collapsed text): they stay in the accessibility
+     tree so the row announces identically collapsed and expanded, and
+     the aria-hidden corner dot stays a purely sighted stand-in.
+     `position: absolute` lifts them out of flow so the 32px tile
+     keeps its geometry. */
+}
+.uxm-app-sidebar__item--collapsed .uxm-sidebar-nav-item__label,
+.uxm-app-sidebar__item--collapsed .uxm-sidebar-nav-item__badge {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+.uxm-app-sidebar__footer {
+  border-top: 1px solid var(--uxm-app-sidebar-border-color, var(--color-border));
+  color: var(--uxm-app-sidebar-footer-color, var(--color-text-muted));
+  /* Same column treatment as `__lead` — an account row above a version
+     caption is the obvious pair here. Note this makes a bare `<span>` caption
+     a flex item, so it stretches to the slot width instead of sitting inline;
+     for plain text that looks identical, but a caption carrying its own
+     background or border will now fill the row. */
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  gap: var(--uxm-app-sidebar-footer-gap, 8px);
+  font-size: calc(11px * var(--type-scale, 1));
+  /* 8px, the same as `__nav` and `__lead` — NOT the 24px caption inset this
+     used to carry. That inset was fine while the slot only ever held an 11px
+     caption, but it put a CONTROL 16px further in than every nav row (24 + the
+     child's own 12 = 36px against the nav label's 20px) and cost it 32px of
+     width, which is what pushed a signed-in address into an ellipsis. A
+     caption shifts 16px left and now lines up with the nav labels too; the var
+     is here for anyone who wants the deeper inset back. */
+  padding: var(--uxm-app-sidebar-footer-padding, 8px);
+  /* Collapsed rail: stop imposing type. The 11px above is caption chrome, and
+     what survives into a 64px rail is a control. Padding needs no override —
+     it is already the nav's 8px. */
+}
+.uxm-app-sidebar__footer--collapsed {
+  font-size: inherit;
+}

package/dist/ui/app-sidebar/app-sidebar.d.ts

@@ -0,0 +1,127 @@
+import type { ElementType, HTMLAttributes, ReactNode } from 'react';
+export interface AppSidebarBrand {
+    /** Wide logo (shown when expanded). */
+    logoUrl?: string;
+    /** Compact icon (shown when collapsed). */
+    iconUrl?: string;
+    /** Alt text for both logo and icon. */
+    alt?: string;
+}
+export interface AppSidebarNavItem {
+    href: string;
+    label: string;
+    icon?: ReactNode;
+    active?: boolean;
+    /** Per-item icon-tile background (e.g. model-type accent). */
+    iconBg?: string;
+    /** Per-item icon foreground color. */
+    iconColor?: string;
+    /**
+     * Persistent marker after the label (a "configured ✓", a count, a small
+     * pill). Unlike `trailing` it is NOT hidden on hover — it shows at rest while
+     * the row is expanded. When the sidebar is **collapsed** the inline marker is
+     * dropped (it won't fit the 32×32 tile) and stands in as a small status dot
+     * on the icon-tile corner, so the "has status" signal still reads. Forwarded
+     * to `SidebarNavItem` (as `badge` expanded, `statusDot` collapsed).
+     */
+    badge?: ReactNode;
+    /**
+     * Trailing content rendered after the label (e.g. a hover-revealed × button
+     * on removable nav items). Forwarded to `SidebarNavItem`. Hidden while the
+     * sidebar is collapsed.
+     */
+    trailing?: ReactNode;
+}
+export interface AppSidebarSection {
+    heading?: string;
+    items: AppSidebarNavItem[];
+}
+/** One icon-tile colour pair for the `autoIconColors` palette. */
+export interface AppSidebarIconColor {
+    /** Icon-tile background. */
+    bg: string;
+    /** Icon (foreground) colour — must read on `bg`. */
+    color: string;
+}
+/**
+ * Default palette for `autoIconColors` — four design-system hue pairs (tile bg +
+ * readable foreground: warm / cool / accent / indigo), cycled by item position.
+ * Exported so a consumer can extend, reorder, or replace it.
+ *
+ * Every pair clears the 3:1 non-text-contrast floor in **both** themes — the
+ * lowest is warm at 3.64:1 light / 4.10:1 dark. That "both themes" part is the
+ * real constraint: a tile and its ink are separate tokens that flip
+ * independently, so a pair can be comfortable in one theme and fail in the
+ * other. `--color-category-composite` on `--color-text-inverse` is exactly that
+ * case — 10.85:1 dark but **2.65:1 light**, because the pink tile is mid-tone
+ * while the ink turns white. It is deliberately NOT in this palette. If you
+ * replace these, measure both themes, not just the one you are looking at.
+ */
+export declare const DEFAULT_SIDEBAR_ICON_COLORS: AppSidebarIconColor[];
+export interface AppSidebarProps extends HTMLAttributes<HTMLElement> {
+    brand: AppSidebarBrand;
+    sections: AppSidebarSection[];
+    collapsed?: boolean;
+    onCollapseToggle?: () => void;
+    /**
+     * Slot at the HEAD of the rail — under the brand row, above the nav. Where a
+     * tenant or workspace switcher belongs: a control that names the level
+     * everything below it belongs to has to sit above that everything, and the
+     * `footer` was the only slot on offer before this, which inverted the
+     * hierarchy.
+     *
+     * Rendered in BOTH rail states. Collapsed the slot only stops squeezing its
+     * child — a `SidebarNavTrigger collapsed` centres its own tile.
+     *
+     * The DOM node is `uxm-app-sidebar__lead`, NOT `__header`: that class is
+     * already the brand row. Renaming it to free the nicer name would be a silent
+     * break for any consumer who wrote a selector against it, and a published
+     * library does not get to do that for tidiness.
+     */
+    header?: ReactNode;
+    /**
+     * Slot at the FOOT of the rail — the signed-in account row, a version
+     * caption. Now rendered in both rail states; see the note on `collapsed`
+     * below and the README, because that changed.
+     */
+    footer?: ReactNode;
+    /**
+     * Element type used for each nav item's outer link. Defaults to plain
+     * `'a'`. In a Next.js app, pass `next/link`'s `Link` so clicks do
+     * client-side navigation instead of a full page reload — otherwise every
+     * sidebar click tears down providers and visibly re-hydrates the
+     * sidebar's contents.
+     *
+     * Kept as a knob (rather than hardcoded) so this library stays
+     * framework-neutral. The consumer plugs in the routing primitive.
+     */
+    linkAs?: ElementType;
+    /**
+     * Auto-assign a distinct icon colour to each nav item from a palette,
+     * cycling by position — a categorical scheme that makes the sidebar
+     * scannable instead of a wall of same-coloured icons. `true` uses the
+     * built-in {@link DEFAULT_SIDEBAR_ICON_COLORS} (four design-system hues);
+     * pass an array of `{ bg, color }` to supply your own. Off by default. An
+     * item that sets either `iconColor` or `iconBg` opts out of auto entirely
+     * (the unset half falls to the component default), so a pinned colour is
+     * never mixed with an auto half meant for a different tile — one item can
+     * pin its own colour while the rest auto-fill.
+     */
+    autoIconColors?: boolean | AppSidebarIconColor[];
+    /**
+     * Whether the mobile drawer is open. Only meaningful below the 768px
+     * breakpoint — at desktop widths the sidebar is always in-flow and this
+     * flag is ignored. Defaults to false.
+     */
+    mobileOpen?: boolean;
+    /** Called when the user dismisses the mobile drawer (backdrop click). */
+    onMobileClose?: () => void;
+    /** Accessible name for the mobile drawer's close button. Default `"Close navigation"`. */
+    closeLabel?: string;
+    /** Accessible name for the collapse toggle while collapsed. Default `"Expand sidebar"`. */
+    expandLabel?: string;
+    /** Accessible name for the collapse toggle while expanded. Default `"Collapse sidebar"`. */
+    collapseLabel?: string;
+}
+export declare function AppSidebar({ brand, sections, collapsed, onCollapseToggle, header, footer, linkAs, autoIconColors, mobileOpen, onMobileClose, closeLabel, expandLabel, collapseLabel, className, ...rest }: AppSidebarProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=app-sidebar.d.ts.map

package/dist/ui/app-sidebar/app-sidebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-sidebar.d.ts","sourceRoot":"","sources":["../../../src/ui/app-sidebar/app-sidebar.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEpE,MAAM,WAAW,eAAe;IAC9B,uCAAuC;IACvC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uCAAuC;IACvC,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,8DAA8D;IAC9D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,MAAM,WAAW,iBAAiB;IAChC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,iBAAiB,EAAE,CAAC;CAC5B;AAED,kEAAkE;AAClE,MAAM,WAAW,mBAAmB;IAClC,4BAA4B;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,2BAA2B,EAAE,mBAAmB,EAK5D,CAAC;AAEF,MAAM,WAAW,eAAgB,SAAQ,cAAc,CAAC,WAAW,CAAC;IAClE,KAAK,EAAE,eAAe,CAAC;IACvB,QAAQ,EAAE,iBAAiB,EAAE,CAAC;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B;;;;;;;;;;;;;;OAcG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;;OAIG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;;;;;;;OASG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;;;;;;;OAUG;IACH,cAAc,CAAC,EAAE,OAAO,GAAG,mBAAmB,EAAE,CAAC;IACjD;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yEAAyE;IACzE,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,0FAA0F;IAC1F,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2FAA2F;IAC3F,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4FAA4F;IAC5F,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,SAAiB,EACjB,gBAAgB,EAChB,MAAM,EACN,MAAM,EACN,MAAM,EACN,cAAsB,EACtB,UAAkB,EAClB,aAAa,EACb,UAA+B,EAC/B,WAA8B,EAC9B,aAAkC,EAClC,SAAS,EACT,GAAG,IAAI,EACR,EAAE,eAAe,2CAkJjB"}

package/dist/ui/app-sidebar/app-sidebar.js

@@ -0,0 +1,129 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../helpers/index.js";
+import { Icon } from "../icon/index.js";
+import { SidebarNavItem } from "../sidebar-nav-item/index.js";
+const DEFAULT_SIDEBAR_ICON_COLORS = [
+  { bg: "var(--color-highlight-warm)", color: "var(--color-on-highlight-warm)" },
+  // 3.64 / 4.10
+  { bg: "var(--color-highlight-cool)", color: "var(--color-on-highlight-cool)" },
+  // 3.74 / 4.62
+  { bg: "var(--color-accent-subtle)", color: "var(--color-accent-bold)" },
+  // 5.54 / 8.54
+  { bg: "var(--color-category-diagram)", color: "var(--color-text-inverse)" }
+  // 4.47 / 6.60
+];
+function AppSidebar({
+  brand,
+  sections,
+  collapsed = false,
+  onCollapseToggle,
+  header,
+  footer,
+  linkAs,
+  autoIconColors = false,
+  mobileOpen = false,
+  onMobileClose,
+  closeLabel = "Close navigation",
+  expandLabel = "Expand sidebar",
+  collapseLabel = "Collapse sidebar",
+  className,
+  ...rest
+}) {
+  const iconPalette = autoIconColors === true ? DEFAULT_SIDEBAR_ICON_COLORS : Array.isArray(autoIconColors) ? autoIconColors : [];
+  const sectionOffset = [];
+  sections.reduce((n, section, i) => {
+    sectionOffset[i] = n;
+    return n + section.items.length;
+  }, 0);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    mobileOpen && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "uxm-app-sidebar__mobile-backdrop",
+        "aria-label": closeLabel,
+        onClick: onMobileClose
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "aside",
+      {
+        className: cn(
+          "uxm-app-sidebar",
+          collapsed && "uxm-app-sidebar--collapsed",
+          mobileOpen && "uxm-app-sidebar--mobile-open",
+          className
+        ),
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "uxm-app-sidebar__header", children: collapsed ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "uxm-app-sidebar__brand uxm-app-sidebar__brand--icon",
+              onClick: onCollapseToggle,
+              "aria-label": expandLabel,
+              children: brand.iconUrl && /* @__PURE__ */ jsx("img", { src: brand.iconUrl, alt: brand.alt ?? "" })
+            }
+          ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { className: "uxm-app-sidebar__brand", children: brand.logoUrl && /* @__PURE__ */ jsx("img", { src: brand.logoUrl, alt: brand.alt ?? "" }) }),
+            onCollapseToggle && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "uxm-app-sidebar__toggle",
+                onClick: onCollapseToggle,
+                "aria-label": collapseLabel,
+                children: /* @__PURE__ */ jsx(Icon, { glyph: "chevron-left", size: 16, strokeWidth: 1.5 })
+              }
+            )
+          ] }) }),
+          header && /* @__PURE__ */ jsx("div", { className: "uxm-app-sidebar__lead", children: header }),
+          /* @__PURE__ */ jsx("nav", { className: "uxm-app-sidebar__nav", children: sections.map((section, idx) => /* @__PURE__ */ jsxs("div", { className: "uxm-app-sidebar__section", children: [
+            section.heading && !collapsed && /* @__PURE__ */ jsx("p", { className: "uxm-app-sidebar__heading", children: section.heading }),
+            section.items.map((item, itemIdx) => {
+              const hasManualColor = item.iconBg != null || item.iconColor != null;
+              const auto = !hasManualColor && iconPalette.length ? iconPalette[(sectionOffset[idx] + itemIdx) % iconPalette.length] : void 0;
+              return /* @__PURE__ */ jsx(
+                SidebarNavItem,
+                {
+                  as: linkAs,
+                  href: item.href,
+                  icon: item.icon,
+                  active: item.active,
+                  iconBg: item.iconBg ?? auto?.bg,
+                  iconColor: item.iconColor ?? auto?.color,
+                  badge: item.badge,
+                  statusDot: collapsed && item.badge != null,
+                  trailing: collapsed ? void 0 : item.trailing,
+                  title: collapsed ? item.label : void 0,
+                  className: cn(
+                    "uxm-app-sidebar__item",
+                    collapsed && "uxm-app-sidebar__item--collapsed"
+                  ),
+                  children: item.label
+                },
+                item.href
+              );
+            })
+          ] }, idx)) }),
+          footer && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "uxm-app-sidebar__footer",
+                collapsed && "uxm-app-sidebar__footer--collapsed"
+              ),
+              children: footer
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+export {
+  AppSidebar,
+  DEFAULT_SIDEBAR_ICON_COLORS
+};
+//# sourceMappingURL=app-sidebar.js.map

package/dist/ui/app-sidebar/app-sidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/app-sidebar/app-sidebar.tsx"],"sourcesContent":["import { cn } from '@/helpers';\n\nimport { Icon } from '../icon';\nimport { SidebarNavItem } from '../sidebar-nav-item';\n\nimport type { ElementType, HTMLAttributes, ReactNode } from 'react';\n\nexport interface AppSidebarBrand {\n  /** Wide logo (shown when expanded). */\n  logoUrl?: string;\n  /** Compact icon (shown when collapsed). */\n  iconUrl?: string;\n  /** Alt text for both logo and icon. */\n  alt?: string;\n}\n\nexport interface AppSidebarNavItem {\n  href: string;\n  label: string;\n  icon?: ReactNode;\n  active?: boolean;\n  /** Per-item icon-tile background (e.g. model-type accent). */\n  iconBg?: string;\n  /** Per-item icon foreground color. */\n  iconColor?: string;\n  /**\n   * Persistent marker after the label (a \"configured ✓\", a count, a small\n   * pill). Unlike `trailing` it is NOT hidden on hover — it shows at rest while\n   * the row is expanded. When the sidebar is **collapsed** the inline marker is\n   * dropped (it won't fit the 32×32 tile) and stands in as a small status dot\n   * on the icon-tile corner, so the \"has status\" signal still reads. Forwarded\n   * to `SidebarNavItem` (as `badge` expanded, `statusDot` collapsed).\n   */\n  badge?: ReactNode;\n  /**\n   * Trailing content rendered after the label (e.g. a hover-revealed × button\n   * on removable nav items). Forwarded to `SidebarNavItem`. Hidden while the\n   * sidebar is collapsed.\n   */\n  trailing?: ReactNode;\n}\n\nexport interface AppSidebarSection {\n  heading?: string;\n  items: AppSidebarNavItem[];\n}\n\n/** One icon-tile colour pair for the `autoIconColors` palette. */\nexport interface AppSidebarIconColor {\n  /** Icon-tile background. */\n  bg: string;\n  /** Icon (foreground) colour — must read on `bg`. */\n  color: string;\n}\n\n/**\n * Default palette for `autoIconColors` — four design-system hue pairs (tile bg +\n * readable foreground: warm / cool / accent / indigo), cycled by item position.\n * Exported so a consumer can extend, reorder, or replace it.\n *\n * Every pair clears the 3:1 non-text-contrast floor in **both** themes — the\n * lowest is warm at 3.64:1 light / 4.10:1 dark. That \"both themes\" part is the\n * real constraint: a tile and its ink are separate tokens that flip\n * independently, so a pair can be comfortable in one theme and fail in the\n * other. `--color-category-composite` on `--color-text-inverse` is exactly that\n * case — 10.85:1 dark but **2.65:1 light**, because the pink tile is mid-tone\n * while the ink turns white. It is deliberately NOT in this palette. If you\n * replace these, measure both themes, not just the one you are looking at.\n */\nexport const DEFAULT_SIDEBAR_ICON_COLORS: AppSidebarIconColor[] = [\n  { bg: 'var(--color-highlight-warm)', color: 'var(--color-on-highlight-warm)' },  // 3.64 / 4.10\n  { bg: 'var(--color-highlight-cool)', color: 'var(--color-on-highlight-cool)' },  // 3.74 / 4.62\n  { bg: 'var(--color-accent-subtle)', color: 'var(--color-accent-bold)' },         // 5.54 / 8.54\n  { bg: 'var(--color-category-diagram)', color: 'var(--color-text-inverse)' },     // 4.47 / 6.60\n];\n\nexport interface AppSidebarProps extends HTMLAttributes<HTMLElement> {\n  brand: AppSidebarBrand;\n  sections: AppSidebarSection[];\n  collapsed?: boolean;\n  onCollapseToggle?: () => void;\n  /**\n   * Slot at the HEAD of the rail — under the brand row, above the nav. Where a\n   * tenant or workspace switcher belongs: a control that names the level\n   * everything below it belongs to has to sit above that everything, and the\n   * `footer` was the only slot on offer before this, which inverted the\n   * hierarchy.\n   *\n   * Rendered in BOTH rail states. Collapsed the slot only stops squeezing its\n   * child — a `SidebarNavTrigger collapsed` centres its own tile.\n   *\n   * The DOM node is `uxm-app-sidebar__lead`, NOT `__header`: that class is\n   * already the brand row. Renaming it to free the nicer name would be a silent\n   * break for any consumer who wrote a selector against it, and a published\n   * library does not get to do that for tidiness.\n   */\n  header?: ReactNode;\n  /**\n   * Slot at the FOOT of the rail — the signed-in account row, a version\n   * caption. Now rendered in both rail states; see the note on `collapsed`\n   * below and the README, because that changed.\n   */\n  footer?: ReactNode;\n  /**\n   * Element type used for each nav item's outer link. Defaults to plain\n   * `'a'`. In a Next.js app, pass `next/link`'s `Link` so clicks do\n   * client-side navigation instead of a full page reload — otherwise every\n   * sidebar click tears down providers and visibly re-hydrates the\n   * sidebar's contents.\n   *\n   * Kept as a knob (rather than hardcoded) so this library stays\n   * framework-neutral. The consumer plugs in the routing primitive.\n   */\n  linkAs?: ElementType;\n  /**\n   * Auto-assign a distinct icon colour to each nav item from a palette,\n   * cycling by position — a categorical scheme that makes the sidebar\n   * scannable instead of a wall of same-coloured icons. `true` uses the\n   * built-in {@link DEFAULT_SIDEBAR_ICON_COLORS} (four design-system hues);\n   * pass an array of `{ bg, color }` to supply your own. Off by default. An\n   * item that sets either `iconColor` or `iconBg` opts out of auto entirely\n   * (the unset half falls to the component default), so a pinned colour is\n   * never mixed with an auto half meant for a different tile — one item can\n   * pin its own colour while the rest auto-fill.\n   */\n  autoIconColors?: boolean | AppSidebarIconColor[];\n  /**\n   * Whether the mobile drawer is open. Only meaningful below the 768px\n   * breakpoint — at desktop widths the sidebar is always in-flow and this\n   * flag is ignored. Defaults to false.\n   */\n  mobileOpen?: boolean;\n  /** Called when the user dismisses the mobile drawer (backdrop click). */\n  onMobileClose?: () => void;\n  /** Accessible name for the mobile drawer's close button. Default `\"Close navigation\"`. */\n  closeLabel?: string;\n  /** Accessible name for the collapse toggle while collapsed. Default `\"Expand sidebar\"`. */\n  expandLabel?: string;\n  /** Accessible name for the collapse toggle while expanded. Default `\"Collapse sidebar\"`. */\n  collapseLabel?: string;\n}\n\nexport function AppSidebar({\n  brand,\n  sections,\n  collapsed = false,\n  onCollapseToggle,\n  header,\n  footer,\n  linkAs,\n  autoIconColors = false,\n  mobileOpen = false,\n  onMobileClose,\n  closeLabel = 'Close navigation',\n  expandLabel = 'Expand sidebar',\n  collapseLabel = 'Collapse sidebar',\n  className,\n  ...rest\n}: AppSidebarProps) {\n  // Resolve the auto-colour palette once: `true` → the built-in hues, an array\n  // → the caller's, anything falsy → none (icons stay monochromatic).\n  const iconPalette: AppSidebarIconColor[] =\n    autoIconColors === true\n      ? DEFAULT_SIDEBAR_ICON_COLORS\n      : Array.isArray(autoIconColors)\n        ? autoIconColors\n        : [];\n  // Global item offset per section so the palette cycles unbroken across\n  // section boundaries — adjacent items differ even over a heading.\n  const sectionOffset: number[] = [];\n  sections.reduce((n, section, i) => {\n    sectionOffset[i] = n;\n    return n + section.items.length;\n  }, 0);\n\n  return (\n    <>\n      {/* Mobile-only backdrop: rendered as a sibling so the consumer's\n          page-shell slot still receives exactly one element (the aside)\n          via fragment fall-through. Both elements are `position: fixed`,\n          so they don't disrupt the consumer's flex layout. CSS hides\n          both `--mobile-*` chrome at min-width: 768px. */}\n      {mobileOpen && (\n        <button\n          type=\"button\"\n          className=\"uxm-app-sidebar__mobile-backdrop\"\n          aria-label={closeLabel}\n          onClick={onMobileClose}\n        />\n      )}\n      <aside\n        className={cn(\n          'uxm-app-sidebar',\n          collapsed && 'uxm-app-sidebar--collapsed',\n          mobileOpen && 'uxm-app-sidebar--mobile-open',\n          className,\n        )}\n        {...rest}\n      >\n      <div className=\"uxm-app-sidebar__header\">\n        {collapsed ? (\n          <button\n            type=\"button\"\n            className=\"uxm-app-sidebar__brand uxm-app-sidebar__brand--icon\"\n            onClick={onCollapseToggle}\n            aria-label={expandLabel}\n          >\n            {brand.iconUrl && (\n              <img src={brand.iconUrl} alt={brand.alt ?? ''} />\n            )}\n          </button>\n        ) : (\n          <>\n            <span className=\"uxm-app-sidebar__brand\">\n              {brand.logoUrl && (\n                <img src={brand.logoUrl} alt={brand.alt ?? ''} />\n              )}\n            </span>\n            {onCollapseToggle && (\n              <button\n                type=\"button\"\n                className=\"uxm-app-sidebar__toggle\"\n                onClick={onCollapseToggle}\n                aria-label={collapseLabel}\n              >\n                <Icon glyph=\"chevron-left\" size={16} strokeWidth={1.5} />\n              </button>\n            )}\n          </>\n        )}\n      </div>\n\n      {header && <div className=\"uxm-app-sidebar__lead\">{header}</div>}\n\n      <nav className=\"uxm-app-sidebar__nav\">\n        {sections.map((section, idx) => (\n          <div key={idx} className=\"uxm-app-sidebar__section\">\n            {section.heading && !collapsed && (\n              <p className=\"uxm-app-sidebar__heading\">{section.heading}</p>\n            )}\n            {section.items.map((item, itemIdx) => {\n              // A per-item colour opts the item out of auto entirely: setting\n              // either `iconBg` or `iconColor` suppresses the palette pair, so\n              // the manual half is never spliced onto an auto half chosen for a\n              // different tile (which could pair, e.g., a light bg with a light\n              // foreground). Auto-fill only when the item pins neither.\n              const hasManualColor = item.iconBg != null || item.iconColor != null;\n              const auto =\n                !hasManualColor && iconPalette.length\n                  ? iconPalette[(sectionOffset[idx] + itemIdx) % iconPalette.length]\n                  : undefined;\n              return (\n              <SidebarNavItem\n                key={item.href}\n                as={linkAs}\n                href={item.href}\n                icon={item.icon}\n                active={item.active}\n                iconBg={item.iconBg ?? auto?.bg}\n                iconColor={item.iconColor ?? auto?.color}\n                // Collapsed rail: the label and the inline `badge` are kept in\n                // the DOM and visually CLIPPED (see `__item--collapsed` in the\n                // SCSS) rather than dropped — the row announces identically\n                // collapsed and expanded (\"Inbox 3\"), while the corner status\n                // dot (aria-hidden) is only the sighted stand-in for the badge.\n                // `trailing` IS dropped: it's an interactive hover-reveal slot,\n                // and a clipped focusable control would be an invisible tab stop.\n                badge={item.badge}\n                statusDot={collapsed && item.badge != null}\n                trailing={collapsed ? undefined : item.trailing}\n                title={collapsed ? item.label : undefined}\n                className={cn(\n                  'uxm-app-sidebar__item',\n                  collapsed && 'uxm-app-sidebar__item--collapsed',\n                )}\n              >\n                {item.label}\n              </SidebarNavItem>\n              );\n            })}\n          </div>\n        ))}\n      </nav>\n\n      {/* Renders in BOTH states now. It used to be dropped when collapsed,\n          which quietly took the account row and every switcher parked here out\n          of the rail — you could not see which tenant you were in, let alone\n          change it, without expanding first. The slot holds an opaque node, so\n          this component cannot shrink it the way it turns an item's `badge`\n          into a status dot; swapping rail-appropriate content is the\n          consumer's job, and they already hold `collapsed`. */}\n      {footer && (\n        <div\n          className={cn(\n            'uxm-app-sidebar__footer',\n            collapsed && 'uxm-app-sidebar__footer--collapsed',\n          )}\n        >\n          {footer}\n        </div>\n      )}\n    </aside>\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/ui/app-sidebar/index.cjs

@@ -0,0 +1,23 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var app_sidebar_exports = {};
+module.exports = __toCommonJS(app_sidebar_exports);
+__reExport(app_sidebar_exports, require("./app-sidebar.cjs"), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ...require("./app-sidebar.cjs")
+});
+//# sourceMappingURL=index.cjs.map

package/dist/ui/app-sidebar/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/app-sidebar/index.ts"],"sourcesContent":["export * from './app-sidebar';\n"],"mappings":";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,gCAAc,0BAAd;","names":[]}

package/dist/ui/app-sidebar/index.d.ts

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

package/dist/ui/app-sidebar/index.d.ts.map

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

package/dist/ui/app-sidebar/index.js

@@ -0,0 +1,2 @@
+export * from "./app-sidebar.js";
+//# sourceMappingURL=index.js.map

package/dist/ui/app-sidebar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/app-sidebar/index.ts"],"sourcesContent":["export * from './app-sidebar';\n"],"mappings":"AAAA,cAAc;","names":[]}

package/dist/ui/app-top-bar/app-top-bar-preview.cjs

@@ -0,0 +1,64 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var app_top_bar_preview_exports = {};
+__export(app_top_bar_preview_exports, {
+  AppTopBarPreview: () => AppTopBarPreview
+});
+module.exports = __toCommonJS(app_top_bar_preview_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ui = require("../../ui/index.cjs");
+var import_ui2 = require("../../ui/index.cjs");
+var import_ui3 = require("../../ui/index.cjs");
+var import_ui4 = require("../../ui/index.cjs");
+var import_ui5 = require("../../ui/index.cjs");
+function AppTopBarPreview({ styles }) {
+  const cssVars = {
+    "--uxm-app-top-bar-background-color": styles.backgroundColor,
+    "--uxm-app-top-bar-border-color": styles.borderColor,
+    "--uxm-app-top-bar-height": `${styles.height}px`,
+    "--uxm-app-top-bar-padding-x": `${styles.paddingX}px`,
+    "--uxm-app-top-bar-gap": `${styles.gap}px`,
+    width: 720
+  };
+  const searchStyle = { maxWidth: styles.searchMaxWidth };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_ui.AppTopBar,
+    {
+      style: cssVars,
+      onMobileMenuClick: () => {
+      },
+      search: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: searchStyle, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_ui5.InputWithIcon,
+        {
+          placeholder: "Search\u2026",
+          icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui4.Icon, { glyph: "search", size: 14, strokeWidth: 1.5 })
+        }
+      ) }),
+      actions: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui3.ButtonPrimary, { children: "+ New Model" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui2.Avatar, { initials: "LR" })
+      ] })
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AppTopBarPreview
+});
+//# sourceMappingURL=app-top-bar-preview.cjs.map

package/dist/ui/app-top-bar/app-top-bar-preview.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/app-top-bar/app-top-bar-preview.tsx"],"sourcesContent":["import type { PreviewProps } from '@/previews/types';\nimport { AppTopBar } from '@/ui';\nimport { Avatar } from '@/ui';\nimport { ButtonPrimary } from '@/ui';\nimport { Icon } from '@/ui';\nimport { InputWithIcon } from '@/ui';\n\nimport type { CSSProperties } from 'react';\n\nexport function AppTopBarPreview({ styles }: PreviewProps) {\n  const cssVars: CSSProperties = {\n    '--uxm-app-top-bar-background-color': styles.backgroundColor as string,\n    '--uxm-app-top-bar-border-color': styles.borderColor as string,\n    '--uxm-app-top-bar-height': `${styles.height}px`,\n    '--uxm-app-top-bar-padding-x': `${styles.paddingX}px`,\n    '--uxm-app-top-bar-gap': `${styles.gap}px`,\n    width: 720,\n  } as CSSProperties;\n  const searchStyle: CSSProperties = { maxWidth: styles.searchMaxWidth as number };\n  return (\n    <AppTopBar\n      style={cssVars}\n      onMobileMenuClick={() => {}}\n      search={\n        <div style={searchStyle}>\n          <InputWithIcon\n            placeholder=\"Search…\"\n            icon={<Icon glyph=\"search\" size={14} strokeWidth={1.5} />}\n          />\n        </div>\n      }\n      actions={\n        <>\n          <ButtonPrimary>+ New Model</ButtonPrimary>\n          <Avatar initials=\"LR\" />\n        </>\n      }\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA2BkB;AA1BlB,gBAA0B;AAC1B,IAAAA,aAAuB;AACvB,IAAAA,aAA8B;AAC9B,IAAAA,aAAqB;AACrB,IAAAA,aAA8B;AAIvB,SAAS,iBAAiB,EAAE,OAAO,GAAiB;AACzD,QAAM,UAAyB;AAAA,IAC7B,sCAAsC,OAAO;AAAA,IAC7C,kCAAkC,OAAO;AAAA,IACzC,4BAA4B,GAAG,OAAO,MAAM;AAAA,IAC5C,+BAA+B,GAAG,OAAO,QAAQ;AAAA,IACjD,yBAAyB,GAAG,OAAO,GAAG;AAAA,IACtC,OAAO;AAAA,EACT;AACA,QAAM,cAA6B,EAAE,UAAU,OAAO,eAAyB;AAC/E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,mBAAmB,MAAM;AAAA,MAAC;AAAA,MAC1B,QACE,4CAAC,SAAI,OAAO,aACV;AAAA,QAAC;AAAA;AAAA,UACC,aAAY;AAAA,UACZ,MAAM,4CAAC,mBAAK,OAAM,UAAS,MAAM,IAAI,aAAa,KAAK;AAAA;AAAA,MACzD,GACF;AAAA,MAEF,SACE,4EACE;AAAA,oDAAC,4BAAc,yBAAW;AAAA,QAC1B,4CAAC,qBAAO,UAAS,MAAK;AAAA,SACxB;AAAA;AAAA,EAEJ;AAEJ;","names":["import_ui"]}

package/dist/ui/app-top-bar/app-top-bar-preview.d.ts

@@ -0,0 +1,3 @@
+import type { PreviewProps } from '../../previews/types.js';
+export declare function AppTopBarPreview({ styles }: PreviewProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=app-top-bar-preview.d.ts.map

package/dist/ui/app-top-bar/app-top-bar-preview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-top-bar-preview.d.ts","sourceRoot":"","sources":["../../../src/ui/app-top-bar/app-top-bar-preview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AASrD,wBAAgB,gBAAgB,CAAC,EAAE,MAAM,EAAE,EAAE,YAAY,2CA8BxD"}

package/dist/ui/app-top-bar/app-top-bar-preview.js

@@ -0,0 +1,40 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { AppTopBar } from "../../ui/index.js";
+import { Avatar } from "../../ui/index.js";
+import { ButtonPrimary } from "../../ui/index.js";
+import { Icon } from "../../ui/index.js";
+import { InputWithIcon } from "../../ui/index.js";
+function AppTopBarPreview({ styles }) {
+  const cssVars = {
+    "--uxm-app-top-bar-background-color": styles.backgroundColor,
+    "--uxm-app-top-bar-border-color": styles.borderColor,
+    "--uxm-app-top-bar-height": `${styles.height}px`,
+    "--uxm-app-top-bar-padding-x": `${styles.paddingX}px`,
+    "--uxm-app-top-bar-gap": `${styles.gap}px`,
+    width: 720
+  };
+  const searchStyle = { maxWidth: styles.searchMaxWidth };
+  return /* @__PURE__ */ jsx(
+    AppTopBar,
+    {
+      style: cssVars,
+      onMobileMenuClick: () => {
+      },
+      search: /* @__PURE__ */ jsx("div", { style: searchStyle, children: /* @__PURE__ */ jsx(
+        InputWithIcon,
+        {
+          placeholder: "Search\u2026",
+          icon: /* @__PURE__ */ jsx(Icon, { glyph: "search", size: 14, strokeWidth: 1.5 })
+        }
+      ) }),
+      actions: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(ButtonPrimary, { children: "+ New Model" }),
+        /* @__PURE__ */ jsx(Avatar, { initials: "LR" })
+      ] })
+    }
+  );
+}
+export {
+  AppTopBarPreview
+};
+//# sourceMappingURL=app-top-bar-preview.js.map

package/dist/ui/app-top-bar/app-top-bar-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/app-top-bar/app-top-bar-preview.tsx"],"sourcesContent":["import type { PreviewProps } from '@/previews/types';\nimport { AppTopBar } from '@/ui';\nimport { Avatar } from '@/ui';\nimport { ButtonPrimary } from '@/ui';\nimport { Icon } from '@/ui';\nimport { InputWithIcon } from '@/ui';\n\nimport type { CSSProperties } from 'react';\n\nexport function AppTopBarPreview({ styles }: PreviewProps) {\n  const cssVars: CSSProperties = {\n    '--uxm-app-top-bar-background-color': styles.backgroundColor as string,\n    '--uxm-app-top-bar-border-color': styles.borderColor as string,\n    '--uxm-app-top-bar-height': `${styles.height}px`,\n    '--uxm-app-top-bar-padding-x': `${styles.paddingX}px`,\n    '--uxm-app-top-bar-gap': `${styles.gap}px`,\n    width: 720,\n  } as CSSProperties;\n  const searchStyle: CSSProperties = { maxWidth: styles.searchMaxWidth as number };\n  return (\n    <AppTopBar\n      style={cssVars}\n      onMobileMenuClick={() => {}}\n      search={\n        <div style={searchStyle}>\n          <InputWithIcon\n            placeholder=\"Search…\"\n            icon={<Icon glyph=\"search\" size={14} strokeWidth={1.5} />}\n          />\n        </div>\n      }\n      actions={\n        <>\n          <ButtonPrimary>+ New Model</ButtonPrimary>\n          <Avatar initials=\"LR\" />\n        </>\n      }\n    />\n  );\n}\n"],"mappings":"AA2BkB,SAKV,UALU,KAKV,YALU;AA1BlB,SAAS,iBAAiB;AAC1B,SAAS,cAAc;AACvB,SAAS,qBAAqB;AAC9B,SAAS,YAAY;AACrB,SAAS,qBAAqB;AAIvB,SAAS,iBAAiB,EAAE,OAAO,GAAiB;AACzD,QAAM,UAAyB;AAAA,IAC7B,sCAAsC,OAAO;AAAA,IAC7C,kCAAkC,OAAO;AAAA,IACzC,4BAA4B,GAAG,OAAO,MAAM;AAAA,IAC5C,+BAA+B,GAAG,OAAO,QAAQ;AAAA,IACjD,yBAAyB,GAAG,OAAO,GAAG;AAAA,IACtC,OAAO;AAAA,EACT;AACA,QAAM,cAA6B,EAAE,UAAU,OAAO,eAAyB;AAC/E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,mBAAmB,MAAM;AAAA,MAAC;AAAA,MAC1B,QACE,oBAAC,SAAI,OAAO,aACV;AAAA,QAAC;AAAA;AAAA,UACC,aAAY;AAAA,UACZ,MAAM,oBAAC,QAAK,OAAM,UAAS,MAAM,IAAI,aAAa,KAAK;AAAA;AAAA,MACzD,GACF;AAAA,MAEF,SACE,iCACE;AAAA,4BAAC,iBAAc,yBAAW;AAAA,QAC1B,oBAAC,UAAO,UAAS,MAAK;AAAA,SACxB;AAAA;AAAA,EAEJ;AAEJ;","names":[]}