@viax.io/uxm 4.36.0

package/dist/tokens/index.js

@@ -0,0 +1,57 @@
+const themeTokens = [
+  // ── Surfaces ──
+  { name: "Surface", variable: "var(--color-surface)", cssVar: "--color-surface", hex: "#F8F7F6", darkHex: "#232220", group: "surfaces" },
+  { name: "Surface Alt", variable: "var(--color-surface-alt)", cssVar: "--color-surface-alt", hex: "#F2F1F0", darkHex: "#2A2927", group: "surfaces" },
+  { name: "Card", variable: "var(--color-card)", cssVar: "--color-card", hex: "#FFFFFF", darkHex: "#1B1A18", group: "surfaces" },
+  // ── Text ──
+  { name: "Text", variable: "var(--color-text)", cssVar: "--color-text", hex: "#1E1E1E", darkHex: "#F5F5F5", group: "text" },
+  { name: "Text Strong", variable: "var(--color-text-strong)", cssVar: "--color-text-strong", hex: "#4A4A4A", darkHex: "#C8C8C8", group: "text" },
+  { name: "Text Muted", variable: "var(--color-text-muted)", cssVar: "--color-text-muted", hex: "#9CA3AF", darkHex: "#A3A3A3", group: "text" },
+  { name: "Text Subtle", variable: "var(--color-text-subtle)", cssVar: "--color-text-subtle", hex: "#CBD5E1", darkHex: "#6E6E6E", group: "text" },
+  { name: "Text Inverse", variable: "var(--color-text-inverse)", cssVar: "--color-text-inverse", hex: "#FFFFFF", darkHex: "#1B1A18", group: "text" },
+  // ── Borders ──
+  { name: "Border", variable: "var(--color-border)", cssVar: "--color-border", hex: "#EBEBEA", darkHex: "#444240", group: "borders" },
+  // ── Accent ── (brand colour first; the others derive from its hue)
+  { name: "Accent", variable: "var(--color-accent)", cssVar: "--color-accent", hex: "#3ECC87", darkHex: "#4FD99A", group: "accent", identity: true },
+  { name: "Accent Subtle", variable: "var(--color-accent-subtle)", cssVar: "--color-accent-subtle", hex: "#E6FFD1", darkHex: "#1A4A2C", group: "accent" },
+  { name: "Accent Light", variable: "var(--color-accent-light)", cssVar: "--color-accent-light", hex: "#90E9B8", darkHex: "#3AA36A", group: "accent" },
+  { name: "Accent Bold", variable: "var(--color-accent-bold)", cssVar: "--color-accent-bold", hex: "#1E7150", darkHex: "#8AE6B4", group: "accent" },
+  // ── Highlights ──
+  { name: "Highlight Warm", variable: "var(--color-highlight-warm)", cssVar: "--color-highlight-warm", hex: "#FCD0A1", darkHex: "#8A5A2B", group: "highlights" },
+  { name: "Highlight Cool", variable: "var(--color-highlight-cool)", cssVar: "--color-highlight-cool", hex: "#C3BEF7", darkHex: "#4D4A7F", group: "highlights" },
+  { name: "On Highlight Warm", variable: "var(--color-on-highlight-warm)", cssVar: "--color-on-highlight-warm", hex: "#7C6B3E", darkHex: "#FCD0A1", group: "highlights" },
+  { name: "On Highlight Cool", variable: "var(--color-on-highlight-cool)", cssVar: "--color-on-highlight-cool", hex: "#5B54A0", darkHex: "#C3BEF7", group: "highlights" },
+  // ── Category markers ──
+  { name: "Composite", variable: "var(--color-category-composite)", cssVar: "--color-category-composite", hex: "#F472B6", darkHex: "#F9A8D4", group: "categories" },
+  { name: "Diagram", variable: "var(--color-category-diagram)", cssVar: "--color-category-diagram", hex: "#6366F1", darkHex: "#818CF8", group: "categories" },
+  // ── Semantic ──
+  { name: "Success Bg", variable: "var(--color-success-bg)", cssVar: "--color-success-bg", hex: "#F0FDF4", darkHex: "#1A3924", group: "semantic" },
+  { name: "Success Text", variable: "var(--color-success-text)", cssVar: "--color-success-text", hex: "#166534", darkHex: "#86EFAC", group: "semantic" },
+  { name: "Success Border", variable: "var(--color-success-border)", cssVar: "--color-success-border", hex: "#BBF7D0", darkHex: "#2F6040", group: "semantic" },
+  { name: "Warning Bg", variable: "var(--color-warning-bg)", cssVar: "--color-warning-bg", hex: "#FFFBEB", darkHex: "#3A2D1B", group: "semantic" },
+  { name: "Warning Text", variable: "var(--color-warning-text)", cssVar: "--color-warning-text", hex: "#92400E", darkHex: "#FCD34D", group: "semantic" },
+  { name: "Warning Border", variable: "var(--color-warning-border)", cssVar: "--color-warning-border", hex: "#FDE68A", darkHex: "#5E4D30", group: "semantic" },
+  { name: "Danger Bg", variable: "var(--color-danger-bg)", cssVar: "--color-danger-bg", hex: "#FEF2F2", darkHex: "#3A2022", group: "semantic" },
+  { name: "Danger Text", variable: "var(--color-danger-text)", cssVar: "--color-danger-text", hex: "#991B1B", darkHex: "#FCA5A5", group: "semantic" },
+  { name: "Danger Border", variable: "var(--color-danger-border)", cssVar: "--color-danger-border", hex: "#FECACA", darkHex: "#5E3034", group: "semantic" },
+  { name: "Info Bg", variable: "var(--color-info-bg)", cssVar: "--color-info-bg", hex: "#EFF6FF", darkHex: "#1A2E4C", group: "semantic" },
+  { name: "Info Text", variable: "var(--color-info-text)", cssVar: "--color-info-text", hex: "#1E40AF", darkHex: "#93C5FD", group: "semantic" },
+  { name: "Info Border", variable: "var(--color-info-border)", cssVar: "--color-info-border", hex: "#BFDBFE", darkHex: "#31507F", group: "semantic" }
+];
+function findToken(value) {
+  return themeTokens.find((t) => t.variable === value);
+}
+function isTokenValue(value) {
+  return value.startsWith("var(--color-");
+}
+function resolveHex(value) {
+  const token = findToken(value);
+  return token ? token.hex : value;
+}
+export {
+  findToken,
+  isTokenValue,
+  resolveHex,
+  themeTokens
+};
+//# sourceMappingURL=index.js.map

package/dist/tokens/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/tokens/index.ts"],"sourcesContent":["export interface ThemeToken {\n  name: string;\n  variable: string;\n  cssVar: string;\n  hex: string;\n  darkHex: string;\n  group: 'surfaces' | 'text' | 'borders' | 'accent' | 'highlights' | 'categories' | 'semantic';\n  /**\n   * Promoted into Brand Settings' Identity section as a top-level brand knob\n   * (the full token list stays the expert layer). Curated HERE, in the\n   * canonical catalog, so the promotion survives token reshuffles — a\n   * hardcoded list in the editor would silently drift. Keep this rare: it\n   * only earns its place on tokens that FAN OUT (the accent base drives the\n   * whole ramp), not ones that merely relocate a row.\n   */\n  identity?: boolean;\n}\n\nexport const themeTokens: ThemeToken[] = [\n  // ── Surfaces ──\n  { name: 'Surface', variable: 'var(--color-surface)', cssVar: '--color-surface', hex: '#F8F7F6', darkHex: '#232220', group: 'surfaces' },\n  { name: 'Surface Alt', variable: 'var(--color-surface-alt)', cssVar: '--color-surface-alt', hex: '#F2F1F0', darkHex: '#2A2927', group: 'surfaces' },\n  { name: 'Card', variable: 'var(--color-card)', cssVar: '--color-card', hex: '#FFFFFF', darkHex: '#1B1A18', group: 'surfaces' },\n\n  // ── Text ──\n  { name: 'Text', variable: 'var(--color-text)', cssVar: '--color-text', hex: '#1E1E1E', darkHex: '#F5F5F5', group: 'text' },\n  { name: 'Text Strong', variable: 'var(--color-text-strong)', cssVar: '--color-text-strong', hex: '#4A4A4A', darkHex: '#C8C8C8', group: 'text' },\n  { name: 'Text Muted', variable: 'var(--color-text-muted)', cssVar: '--color-text-muted', hex: '#9CA3AF', darkHex: '#A3A3A3', group: 'text' },\n  { name: 'Text Subtle', variable: 'var(--color-text-subtle)', cssVar: '--color-text-subtle', hex: '#CBD5E1', darkHex: '#6E6E6E', group: 'text' },\n  { name: 'Text Inverse', variable: 'var(--color-text-inverse)', cssVar: '--color-text-inverse', hex: '#FFFFFF', darkHex: '#1B1A18', group: 'text' },\n\n  // ── Borders ──\n  { name: 'Border', variable: 'var(--color-border)', cssVar: '--color-border', hex: '#EBEBEA', darkHex: '#444240', group: 'borders' },\n\n  // ── Accent ── (brand colour first; the others derive from its hue)\n  { name: 'Accent', variable: 'var(--color-accent)', cssVar: '--color-accent', hex: '#3ECC87', darkHex: '#4FD99A', group: 'accent', identity: true },\n  { name: 'Accent Subtle', variable: 'var(--color-accent-subtle)', cssVar: '--color-accent-subtle', hex: '#E6FFD1', darkHex: '#1A4A2C', group: 'accent' },\n  { name: 'Accent Light', variable: 'var(--color-accent-light)', cssVar: '--color-accent-light', hex: '#90E9B8', darkHex: '#3AA36A', group: 'accent' },\n  { name: 'Accent Bold', variable: 'var(--color-accent-bold)', cssVar: '--color-accent-bold', hex: '#1E7150', darkHex: '#8AE6B4', group: 'accent' },\n\n  // ── Highlights ──\n  { name: 'Highlight Warm', variable: 'var(--color-highlight-warm)', cssVar: '--color-highlight-warm', hex: '#FCD0A1', darkHex: '#8A5A2B', group: 'highlights' },\n  { name: 'Highlight Cool', variable: 'var(--color-highlight-cool)', cssVar: '--color-highlight-cool', hex: '#C3BEF7', darkHex: '#4D4A7F', group: 'highlights' },\n  { name: 'On Highlight Warm', variable: 'var(--color-on-highlight-warm)', cssVar: '--color-on-highlight-warm', hex: '#7C6B3E', darkHex: '#FCD0A1', group: 'highlights' },\n  { name: 'On Highlight Cool', variable: 'var(--color-on-highlight-cool)', cssVar: '--color-on-highlight-cool', hex: '#5B54A0', darkHex: '#C3BEF7', group: 'highlights' },\n\n  // ── Category markers ──\n  { name: 'Composite', variable: 'var(--color-category-composite)', cssVar: '--color-category-composite', hex: '#F472B6', darkHex: '#F9A8D4', group: 'categories' },\n  { name: 'Diagram', variable: 'var(--color-category-diagram)', cssVar: '--color-category-diagram', hex: '#6366F1', darkHex: '#818CF8', group: 'categories' },\n\n  // ── Semantic ──\n  { name: 'Success Bg', variable: 'var(--color-success-bg)', cssVar: '--color-success-bg', hex: '#F0FDF4', darkHex: '#1A3924', group: 'semantic' },\n  { name: 'Success Text', variable: 'var(--color-success-text)', cssVar: '--color-success-text', hex: '#166534', darkHex: '#86EFAC', group: 'semantic' },\n  { name: 'Success Border', variable: 'var(--color-success-border)', cssVar: '--color-success-border', hex: '#BBF7D0', darkHex: '#2F6040', group: 'semantic' },\n  { name: 'Warning Bg', variable: 'var(--color-warning-bg)', cssVar: '--color-warning-bg', hex: '#FFFBEB', darkHex: '#3A2D1B', group: 'semantic' },\n  { name: 'Warning Text', variable: 'var(--color-warning-text)', cssVar: '--color-warning-text', hex: '#92400E', darkHex: '#FCD34D', group: 'semantic' },\n  { name: 'Warning Border', variable: 'var(--color-warning-border)', cssVar: '--color-warning-border', hex: '#FDE68A', darkHex: '#5E4D30', group: 'semantic' },\n  { name: 'Danger Bg', variable: 'var(--color-danger-bg)', cssVar: '--color-danger-bg', hex: '#FEF2F2', darkHex: '#3A2022', group: 'semantic' },\n  { name: 'Danger Text', variable: 'var(--color-danger-text)', cssVar: '--color-danger-text', hex: '#991B1B', darkHex: '#FCA5A5', group: 'semantic' },\n  { name: 'Danger Border', variable: 'var(--color-danger-border)', cssVar: '--color-danger-border', hex: '#FECACA', darkHex: '#5E3034', group: 'semantic' },\n  { name: 'Info Bg', variable: 'var(--color-info-bg)', cssVar: '--color-info-bg', hex: '#EFF6FF', darkHex: '#1A2E4C', group: 'semantic' },\n  { name: 'Info Text', variable: 'var(--color-info-text)', cssVar: '--color-info-text', hex: '#1E40AF', darkHex: '#93C5FD', group: 'semantic' },\n  { name: 'Info Border', variable: 'var(--color-info-border)', cssVar: '--color-info-border', hex: '#BFDBFE', darkHex: '#31507F', group: 'semantic' },\n];\n\n/** Look up a token by its CSS variable string */\nexport function findToken(value: string): ThemeToken | undefined {\n  return themeTokens.find((t) => t.variable === value);\n}\n\n/** Check if a value is a theme token reference (vs a raw hex) */\nexport function isTokenValue(value: string): boolean {\n  return value.startsWith('var(--color-');\n}\n\n/** Get the display hex for a value — resolves tokens to their hex, passes through raw hex */\nexport function resolveHex(value: string): string {\n  const token = findToken(value);\n  return token ? token.hex : value;\n}\n"],"mappings":"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","names":[]}

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

@@ -0,0 +1,160 @@
+"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_sidebar_preview_exports = {};
+__export(app_sidebar_preview_exports, {
+  AppSidebarPreview: () => AppSidebarPreview
+});
+module.exports = __toCommonJS(app_sidebar_preview_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ui = require("../../ui/index.cjs");
+var import_ui2 = require("../../ui/index.cjs");
+const SAMPLE_SECTIONS = [
+  {
+    items: [
+      {
+        href: "#dashboard",
+        label: "Dashboard",
+        icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui2.Icon, { glyph: "grid" }),
+        active: true,
+        // Demonstrates the persistent `badge` slot: shows inline (a ✓) when
+        // expanded, and collapses to a corner status dot on the icon tile when
+        // the rail is collapsed.
+        badge: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui2.Icon, { glyph: "check", size: 14 })
+      }
+    ]
+  },
+  {
+    heading: "Model Types",
+    items: [
+      // No per-item colours here — the "Auto Icon Colors" variant fills them
+      // from the palette when on, matching how a modo sidebar (which passes no
+      // per-item colour) behaves. A real consumer can still pin `iconColor` /
+      // `iconBg` on a specific item to override the auto assignment.
+      {
+        href: "#rm",
+        label: "Revenue Motions",
+        icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui2.Icon, { glyph: "model-revenue-motion" })
+      },
+      {
+        href: "#bi",
+        label: "Business Interactions",
+        icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui2.Icon, { glyph: "model-business-interaction" })
+      },
+      {
+        href: "#dm",
+        label: "Determination",
+        icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui2.Icon, { glyph: "model-determination" })
+      },
+      {
+        href: "#cm",
+        label: "Configuration",
+        icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui2.Icon, { glyph: "model-configuration" })
+      }
+    ]
+  },
+  {
+    heading: "Experience",
+    items: [
+      {
+        href: "#uxm",
+        label: "UXM",
+        icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui2.Icon, { glyph: "paint-brush" })
+      }
+    ]
+  }
+];
+function AppSidebarPreview({ styles, variants, shell }) {
+  const brand = shell?.brand ?? {};
+  const theme = shell?.theme ?? "light";
+  const collapsed = variants.state === "collapsed";
+  const autoIconColors = variants.autoIconColors === "on";
+  const withHeader = (variants.headerSlot ?? "on") === "on";
+  const withFooter = (variants.footerSlot ?? "on") === "on";
+  const logoUrl = theme === "dark" ? brand.logoUrlDark || brand.logoUrl || "/viax-logo.svg" : brand.logoUrl || "/viax-logo.svg";
+  const iconUrl = theme === "dark" ? brand.iconUrlDark || brand.iconUrl || "/viax-icon.svg" : brand.iconUrl || "/viax-icon.svg";
+  const cssVars = {
+    ["--uxm-app-sidebar-background-color"]: styles.backgroundColor,
+    ["--uxm-app-sidebar-border-color"]: styles.borderColor,
+    // Projected, not decorative: `leadPadding` rides generate-css's kebab
+    // fallback to `--uxm-app-sidebar-lead-padding`, and a knob the live preview
+    // does not project only dies once a brand is SAVED.
+    ["--uxm-app-sidebar-lead-padding"]: `${styles.leadPadding}px`,
+    ["--uxm-app-sidebar-footer-padding"]: `${styles.footerPadding}px`,
+    width: collapsed ? styles.collapsedWidth : styles.expandedWidth,
+    height: 480
+  };
+  const switchers = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_ui2.SidebarNavTrigger,
+      {
+        variant: "outlined",
+        collapsed,
+        title: collapsed ? "Tenant A" : void 0,
+        caption: collapsed ? void 0 : "Tenant",
+        icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui2.Icon, { glyph: "organization", size: 18 }),
+        trailing: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui2.Icon, { glyph: "chevron-down", size: 16 }),
+        children: "Tenant A"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_ui2.SidebarNavTrigger,
+      {
+        variant: "outlined",
+        collapsed,
+        title: collapsed ? "Default" : void 0,
+        caption: collapsed ? void 0 : "Workspace",
+        icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui2.Icon, { glyph: "product", size: 18 }),
+        trailing: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui2.Icon, { glyph: "chevron-down", size: 16 }),
+        children: "Default"
+      }
+    )
+  ] });
+  const account = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_ui2.SidebarNavTrigger,
+    {
+      variant: "plain",
+      collapsed,
+      title: collapsed ? "dan@acme.com" : void 0,
+      caption: collapsed ? void 0 : "Tenant owner",
+      captionPlacement: "below",
+      icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui2.Avatar, { initials: "DR", size: collapsed ? "small" : "medium" }),
+      trailing: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui2.Icon, { glyph: "chevron-down", size: 16 }),
+      children: "dan@acme.com"
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_ui.AppSidebar,
+    {
+      brand: { logoUrl, iconUrl, alt: "Brand" },
+      sections: SAMPLE_SECTIONS,
+      autoIconColors,
+      collapsed,
+      onCollapseToggle: () => {
+      },
+      header: withHeader ? switchers : void 0,
+      footer: withFooter ? account : void 0,
+      style: cssVars
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AppSidebarPreview
+});
+//# sourceMappingURL=app-sidebar-preview.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/app-sidebar/app-sidebar-preview.tsx"],"sourcesContent":["import type { PreviewProps } from '@/previews/types';\nimport { AppSidebar } from '@/ui';\nimport { Avatar, Icon, SidebarNavTrigger } from '@/ui';\n\nimport type { CSSProperties } from 'react';\n\nconst SAMPLE_SECTIONS = [\n  {\n    items: [\n      {\n        href: '#dashboard',\n        label: 'Dashboard',\n        icon: <Icon glyph=\"grid\" />,\n        active: true,\n        // Demonstrates the persistent `badge` slot: shows inline (a ✓) when\n        // expanded, and collapses to a corner status dot on the icon tile when\n        // the rail is collapsed.\n        badge: <Icon glyph=\"check\" size={14} />,\n      },\n    ],\n  },\n  {\n    heading: 'Model Types',\n    items: [\n      // No per-item colours here — the \"Auto Icon Colors\" variant fills them\n      // from the palette when on, matching how a modo sidebar (which passes no\n      // per-item colour) behaves. A real consumer can still pin `iconColor` /\n      // `iconBg` on a specific item to override the auto assignment.\n      {\n        href: '#rm',\n        label: 'Revenue Motions',\n        icon: <Icon glyph=\"model-revenue-motion\" />,\n      },\n      {\n        href: '#bi',\n        label: 'Business Interactions',\n        icon: <Icon glyph=\"model-business-interaction\" />,\n      },\n      {\n        href: '#dm',\n        label: 'Determination',\n        icon: <Icon glyph=\"model-determination\" />,\n      },\n      {\n        href: '#cm',\n        label: 'Configuration',\n        icon: <Icon glyph=\"model-configuration\" />,\n      },\n    ],\n  },\n  {\n    heading: 'Experience',\n    items: [\n      {\n        href: '#uxm',\n        label: 'UXM',\n        icon: <Icon glyph=\"paint-brush\" />,\n      },\n    ],\n  },\n];\n\nexport function AppSidebarPreview({ styles, variants, shell }: PreviewProps) {\n  const brand = shell?.brand ?? {};\n  const theme = shell?.theme ?? 'light';\n  const collapsed = variants.state === 'collapsed';\n  const autoIconColors = variants.autoIconColors === 'on';\n  const withHeader = (variants.headerSlot ?? 'on') === 'on';\n  const withFooter = (variants.footerSlot ?? 'on') === 'on';\n\n  // Pick the right brand asset for the active theme. Dark variants are\n  // optional in BrandConfig — fall back through (dark → light → bundled\n  // viax default) so the sidebar always has something to show. Pulling\n  // these from the live brand context (instead of hardcoding the viax\n  // SVGs) means uploading a new logo or toggling the theme is reflected\n  // in the preview immediately.\n  const logoUrl =\n    theme === 'dark'\n      ? brand.logoUrlDark || brand.logoUrl || '/viax-logo.svg'\n      : brand.logoUrl || '/viax-logo.svg';\n  const iconUrl =\n    theme === 'dark'\n      ? brand.iconUrlDark || brand.iconUrl || '/viax-icon.svg'\n      : brand.iconUrl || '/viax-icon.svg';\n\n  const cssVars: CSSProperties = {\n    ['--uxm-app-sidebar-background-color' as string]: styles.backgroundColor as string,\n    ['--uxm-app-sidebar-border-color' as string]: styles.borderColor as string,\n    // Projected, not decorative: `leadPadding` rides generate-css's kebab\n    // fallback to `--uxm-app-sidebar-lead-padding`, and a knob the live preview\n    // does not project only dies once a brand is SAVED.\n    ['--uxm-app-sidebar-lead-padding' as string]: `${styles.leadPadding as number}px`,\n    ['--uxm-app-sidebar-footer-padding' as string]: `${styles.footerPadding as number}px`,\n    width: collapsed ? (styles.collapsedWidth as number) : (styles.expandedWidth as number),\n    height: 480,\n  };\n  // Both slots model the CONSUMER's side of the contract, which is the whole\n  // point of the pair: the sidebar renders them in either rail state and never\n  // rewrites what is inside, so it is the consumer who passes `collapsed` down\n  // and sizes the marks. A slot that ignored the rail would look right here and\n  // break at 64px.\n  // No spacing wrapper: `__lead` is a flex column and owns the gap, which is\n  // the point of it doing so — a consumer hands over controls, not a layout.\n  const switchers = (\n    <>\n      <SidebarNavTrigger\n        variant=\"outlined\"\n        collapsed={collapsed}\n        title={collapsed ? 'Tenant A' : undefined}\n        caption={collapsed ? undefined : 'Tenant'}\n        icon={<Icon glyph=\"organization\" size={18} />}\n        trailing={<Icon glyph=\"chevron-down\" size={16} />}\n      >\n        Tenant A\n      </SidebarNavTrigger>\n      <SidebarNavTrigger\n        variant=\"outlined\"\n        collapsed={collapsed}\n        title={collapsed ? 'Default' : undefined}\n        caption={collapsed ? undefined : 'Workspace'}\n        icon={<Icon glyph=\"product\" size={18} />}\n        trailing={<Icon glyph=\"chevron-down\" size={16} />}\n      >\n        Default\n      </SidebarNavTrigger>\n    </>\n  );\n\n  // The account row: a control that legitimately belongs at the FOOT (it names\n  // the person, not a level anything below it sits in) — and the reason the\n  // footer had to stop disappearing when the rail collapses.\n  const account = (\n    <SidebarNavTrigger\n      variant=\"plain\"\n      collapsed={collapsed}\n      title={collapsed ? 'dan@acme.com' : undefined}\n      caption={collapsed ? undefined : 'Tenant owner'}\n      captionPlacement=\"below\"\n      icon={<Avatar initials=\"DR\" size={collapsed ? 'small' : 'medium'} />}\n      trailing={<Icon glyph=\"chevron-down\" size={16} />}\n    >\n      dan@acme.com\n    </SidebarNavTrigger>\n  );\n\n  return (\n    <AppSidebar\n      brand={{ logoUrl, iconUrl, alt: 'Brand' }}\n      sections={SAMPLE_SECTIONS}\n      autoIconColors={autoIconColors}\n      collapsed={collapsed}\n      onCollapseToggle={() => {}}\n      header={withHeader ? switchers : undefined}\n      footer={withFooter ? account : undefined}\n      style={cssVars}\n    />\n  );\n}\n"],"mappings":"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","names":["import_ui"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"app-sidebar-preview.d.ts","sourceRoot":"","sources":["../../../src/ui/app-sidebar/app-sidebar-preview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AA8DrD,wBAAgB,iBAAiB,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,YAAY,2CA+F1E"}

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

@@ -0,0 +1,136 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { AppSidebar } from "../../ui/index.js";
+import { Avatar, Icon, SidebarNavTrigger } from "../../ui/index.js";
+const SAMPLE_SECTIONS = [
+  {
+    items: [
+      {
+        href: "#dashboard",
+        label: "Dashboard",
+        icon: /* @__PURE__ */ jsx(Icon, { glyph: "grid" }),
+        active: true,
+        // Demonstrates the persistent `badge` slot: shows inline (a ✓) when
+        // expanded, and collapses to a corner status dot on the icon tile when
+        // the rail is collapsed.
+        badge: /* @__PURE__ */ jsx(Icon, { glyph: "check", size: 14 })
+      }
+    ]
+  },
+  {
+    heading: "Model Types",
+    items: [
+      // No per-item colours here — the "Auto Icon Colors" variant fills them
+      // from the palette when on, matching how a modo sidebar (which passes no
+      // per-item colour) behaves. A real consumer can still pin `iconColor` /
+      // `iconBg` on a specific item to override the auto assignment.
+      {
+        href: "#rm",
+        label: "Revenue Motions",
+        icon: /* @__PURE__ */ jsx(Icon, { glyph: "model-revenue-motion" })
+      },
+      {
+        href: "#bi",
+        label: "Business Interactions",
+        icon: /* @__PURE__ */ jsx(Icon, { glyph: "model-business-interaction" })
+      },
+      {
+        href: "#dm",
+        label: "Determination",
+        icon: /* @__PURE__ */ jsx(Icon, { glyph: "model-determination" })
+      },
+      {
+        href: "#cm",
+        label: "Configuration",
+        icon: /* @__PURE__ */ jsx(Icon, { glyph: "model-configuration" })
+      }
+    ]
+  },
+  {
+    heading: "Experience",
+    items: [
+      {
+        href: "#uxm",
+        label: "UXM",
+        icon: /* @__PURE__ */ jsx(Icon, { glyph: "paint-brush" })
+      }
+    ]
+  }
+];
+function AppSidebarPreview({ styles, variants, shell }) {
+  const brand = shell?.brand ?? {};
+  const theme = shell?.theme ?? "light";
+  const collapsed = variants.state === "collapsed";
+  const autoIconColors = variants.autoIconColors === "on";
+  const withHeader = (variants.headerSlot ?? "on") === "on";
+  const withFooter = (variants.footerSlot ?? "on") === "on";
+  const logoUrl = theme === "dark" ? brand.logoUrlDark || brand.logoUrl || "/viax-logo.svg" : brand.logoUrl || "/viax-logo.svg";
+  const iconUrl = theme === "dark" ? brand.iconUrlDark || brand.iconUrl || "/viax-icon.svg" : brand.iconUrl || "/viax-icon.svg";
+  const cssVars = {
+    ["--uxm-app-sidebar-background-color"]: styles.backgroundColor,
+    ["--uxm-app-sidebar-border-color"]: styles.borderColor,
+    // Projected, not decorative: `leadPadding` rides generate-css's kebab
+    // fallback to `--uxm-app-sidebar-lead-padding`, and a knob the live preview
+    // does not project only dies once a brand is SAVED.
+    ["--uxm-app-sidebar-lead-padding"]: `${styles.leadPadding}px`,
+    ["--uxm-app-sidebar-footer-padding"]: `${styles.footerPadding}px`,
+    width: collapsed ? styles.collapsedWidth : styles.expandedWidth,
+    height: 480
+  };
+  const switchers = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      SidebarNavTrigger,
+      {
+        variant: "outlined",
+        collapsed,
+        title: collapsed ? "Tenant A" : void 0,
+        caption: collapsed ? void 0 : "Tenant",
+        icon: /* @__PURE__ */ jsx(Icon, { glyph: "organization", size: 18 }),
+        trailing: /* @__PURE__ */ jsx(Icon, { glyph: "chevron-down", size: 16 }),
+        children: "Tenant A"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      SidebarNavTrigger,
+      {
+        variant: "outlined",
+        collapsed,
+        title: collapsed ? "Default" : void 0,
+        caption: collapsed ? void 0 : "Workspace",
+        icon: /* @__PURE__ */ jsx(Icon, { glyph: "product", size: 18 }),
+        trailing: /* @__PURE__ */ jsx(Icon, { glyph: "chevron-down", size: 16 }),
+        children: "Default"
+      }
+    )
+  ] });
+  const account = /* @__PURE__ */ jsx(
+    SidebarNavTrigger,
+    {
+      variant: "plain",
+      collapsed,
+      title: collapsed ? "dan@acme.com" : void 0,
+      caption: collapsed ? void 0 : "Tenant owner",
+      captionPlacement: "below",
+      icon: /* @__PURE__ */ jsx(Avatar, { initials: "DR", size: collapsed ? "small" : "medium" }),
+      trailing: /* @__PURE__ */ jsx(Icon, { glyph: "chevron-down", size: 16 }),
+      children: "dan@acme.com"
+    }
+  );
+  return /* @__PURE__ */ jsx(
+    AppSidebar,
+    {
+      brand: { logoUrl, iconUrl, alt: "Brand" },
+      sections: SAMPLE_SECTIONS,
+      autoIconColors,
+      collapsed,
+      onCollapseToggle: () => {
+      },
+      header: withHeader ? switchers : void 0,
+      footer: withFooter ? account : void 0,
+      style: cssVars
+    }
+  );
+}
+export {
+  AppSidebarPreview
+};
+//# sourceMappingURL=app-sidebar-preview.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/app-sidebar/app-sidebar-preview.tsx"],"sourcesContent":["import type { PreviewProps } from '@/previews/types';\nimport { AppSidebar } from '@/ui';\nimport { Avatar, Icon, SidebarNavTrigger } from '@/ui';\n\nimport type { CSSProperties } from 'react';\n\nconst SAMPLE_SECTIONS = [\n  {\n    items: [\n      {\n        href: '#dashboard',\n        label: 'Dashboard',\n        icon: <Icon glyph=\"grid\" />,\n        active: true,\n        // Demonstrates the persistent `badge` slot: shows inline (a ✓) when\n        // expanded, and collapses to a corner status dot on the icon tile when\n        // the rail is collapsed.\n        badge: <Icon glyph=\"check\" size={14} />,\n      },\n    ],\n  },\n  {\n    heading: 'Model Types',\n    items: [\n      // No per-item colours here — the \"Auto Icon Colors\" variant fills them\n      // from the palette when on, matching how a modo sidebar (which passes no\n      // per-item colour) behaves. A real consumer can still pin `iconColor` /\n      // `iconBg` on a specific item to override the auto assignment.\n      {\n        href: '#rm',\n        label: 'Revenue Motions',\n        icon: <Icon glyph=\"model-revenue-motion\" />,\n      },\n      {\n        href: '#bi',\n        label: 'Business Interactions',\n        icon: <Icon glyph=\"model-business-interaction\" />,\n      },\n      {\n        href: '#dm',\n        label: 'Determination',\n        icon: <Icon glyph=\"model-determination\" />,\n      },\n      {\n        href: '#cm',\n        label: 'Configuration',\n        icon: <Icon glyph=\"model-configuration\" />,\n      },\n    ],\n  },\n  {\n    heading: 'Experience',\n    items: [\n      {\n        href: '#uxm',\n        label: 'UXM',\n        icon: <Icon glyph=\"paint-brush\" />,\n      },\n    ],\n  },\n];\n\nexport function AppSidebarPreview({ styles, variants, shell }: PreviewProps) {\n  const brand = shell?.brand ?? {};\n  const theme = shell?.theme ?? 'light';\n  const collapsed = variants.state === 'collapsed';\n  const autoIconColors = variants.autoIconColors === 'on';\n  const withHeader = (variants.headerSlot ?? 'on') === 'on';\n  const withFooter = (variants.footerSlot ?? 'on') === 'on';\n\n  // Pick the right brand asset for the active theme. Dark variants are\n  // optional in BrandConfig — fall back through (dark → light → bundled\n  // viax default) so the sidebar always has something to show. Pulling\n  // these from the live brand context (instead of hardcoding the viax\n  // SVGs) means uploading a new logo or toggling the theme is reflected\n  // in the preview immediately.\n  const logoUrl =\n    theme === 'dark'\n      ? brand.logoUrlDark || brand.logoUrl || '/viax-logo.svg'\n      : brand.logoUrl || '/viax-logo.svg';\n  const iconUrl =\n    theme === 'dark'\n      ? brand.iconUrlDark || brand.iconUrl || '/viax-icon.svg'\n      : brand.iconUrl || '/viax-icon.svg';\n\n  const cssVars: CSSProperties = {\n    ['--uxm-app-sidebar-background-color' as string]: styles.backgroundColor as string,\n    ['--uxm-app-sidebar-border-color' as string]: styles.borderColor as string,\n    // Projected, not decorative: `leadPadding` rides generate-css's kebab\n    // fallback to `--uxm-app-sidebar-lead-padding`, and a knob the live preview\n    // does not project only dies once a brand is SAVED.\n    ['--uxm-app-sidebar-lead-padding' as string]: `${styles.leadPadding as number}px`,\n    ['--uxm-app-sidebar-footer-padding' as string]: `${styles.footerPadding as number}px`,\n    width: collapsed ? (styles.collapsedWidth as number) : (styles.expandedWidth as number),\n    height: 480,\n  };\n  // Both slots model the CONSUMER's side of the contract, which is the whole\n  // point of the pair: the sidebar renders them in either rail state and never\n  // rewrites what is inside, so it is the consumer who passes `collapsed` down\n  // and sizes the marks. A slot that ignored the rail would look right here and\n  // break at 64px.\n  // No spacing wrapper: `__lead` is a flex column and owns the gap, which is\n  // the point of it doing so — a consumer hands over controls, not a layout.\n  const switchers = (\n    <>\n      <SidebarNavTrigger\n        variant=\"outlined\"\n        collapsed={collapsed}\n        title={collapsed ? 'Tenant A' : undefined}\n        caption={collapsed ? undefined : 'Tenant'}\n        icon={<Icon glyph=\"organization\" size={18} />}\n        trailing={<Icon glyph=\"chevron-down\" size={16} />}\n      >\n        Tenant A\n      </SidebarNavTrigger>\n      <SidebarNavTrigger\n        variant=\"outlined\"\n        collapsed={collapsed}\n        title={collapsed ? 'Default' : undefined}\n        caption={collapsed ? undefined : 'Workspace'}\n        icon={<Icon glyph=\"product\" size={18} />}\n        trailing={<Icon glyph=\"chevron-down\" size={16} />}\n      >\n        Default\n      </SidebarNavTrigger>\n    </>\n  );\n\n  // The account row: a control that legitimately belongs at the FOOT (it names\n  // the person, not a level anything below it sits in) — and the reason the\n  // footer had to stop disappearing when the rail collapses.\n  const account = (\n    <SidebarNavTrigger\n      variant=\"plain\"\n      collapsed={collapsed}\n      title={collapsed ? 'dan@acme.com' : undefined}\n      caption={collapsed ? undefined : 'Tenant owner'}\n      captionPlacement=\"below\"\n      icon={<Avatar initials=\"DR\" size={collapsed ? 'small' : 'medium'} />}\n      trailing={<Icon glyph=\"chevron-down\" size={16} />}\n    >\n      dan@acme.com\n    </SidebarNavTrigger>\n  );\n\n  return (\n    <AppSidebar\n      brand={{ logoUrl, iconUrl, alt: 'Brand' }}\n      sections={SAMPLE_SECTIONS}\n      autoIconColors={autoIconColors}\n      collapsed={collapsed}\n      onCollapseToggle={() => {}}\n      header={withHeader ? switchers : undefined}\n      footer={withFooter ? account : undefined}\n      style={cssVars}\n    />\n  );\n}\n"],"mappings":"AAYc,SA4FV,UA5FU,KA4FV,YA5FU;AAXd,SAAS,kBAAkB;AAC3B,SAAS,QAAQ,MAAM,yBAAyB;AAIhD,MAAM,kBAAkB;AAAA,EACtB;AAAA,IACE,OAAO;AAAA,MACL;AAAA,QACE,MAAM;AAAA,QACN,OAAO;AAAA,QACP,MAAM,oBAAC,QAAK,OAAM,QAAO;AAAA,QACzB,QAAQ;AAAA;AAAA;AAAA;AAAA,QAIR,OAAO,oBAAC,QAAK,OAAM,SAAQ,MAAM,IAAI;AAAA,MACvC;AAAA,IACF;AAAA,EACF;AAAA,EACA;AAAA,IACE,SAAS;AAAA,IACT,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,MAKL;AAAA,QACE,MAAM;AAAA,QACN,OAAO;AAAA,QACP,MAAM,oBAAC,QAAK,OAAM,wBAAuB;AAAA,MAC3C;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,OAAO;AAAA,QACP,MAAM,oBAAC,QAAK,OAAM,8BAA6B;AAAA,MACjD;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,OAAO;AAAA,QACP,MAAM,oBAAC,QAAK,OAAM,uBAAsB;AAAA,MAC1C;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,OAAO;AAAA,QACP,MAAM,oBAAC,QAAK,OAAM,uBAAsB;AAAA,MAC1C;AAAA,IACF;AAAA,EACF;AAAA,EACA;AAAA,IACE,SAAS;AAAA,IACT,OAAO;AAAA,MACL;AAAA,QACE,MAAM;AAAA,QACN,OAAO;AAAA,QACP,MAAM,oBAAC,QAAK,OAAM,eAAc;AAAA,MAClC;AAAA,IACF;AAAA,EACF;AACF;AAEO,SAAS,kBAAkB,EAAE,QAAQ,UAAU,MAAM,GAAiB;AAC3E,QAAM,QAAQ,OAAO,SAAS,CAAC;AAC/B,QAAM,QAAQ,OAAO,SAAS;AAC9B,QAAM,YAAY,SAAS,UAAU;AACrC,QAAM,iBAAiB,SAAS,mBAAmB;AACnD,QAAM,cAAc,SAAS,cAAc,UAAU;AACrD,QAAM,cAAc,SAAS,cAAc,UAAU;AAQrD,QAAM,UACJ,UAAU,SACN,MAAM,eAAe,MAAM,WAAW,mBACtC,MAAM,WAAW;AACvB,QAAM,UACJ,UAAU,SACN,MAAM,eAAe,MAAM,WAAW,mBACtC,MAAM,WAAW;AAEvB,QAAM,UAAyB;AAAA,IAC7B,CAAC,oCAA8C,GAAG,OAAO;AAAA,IACzD,CAAC,gCAA0C,GAAG,OAAO;AAAA;AAAA;AAAA;AAAA,IAIrD,CAAC,gCAA0C,GAAG,GAAG,OAAO,WAAqB;AAAA,IAC7E,CAAC,kCAA4C,GAAG,GAAG,OAAO,aAAuB;AAAA,IACjF,OAAO,YAAa,OAAO,iBAA6B,OAAO;AAAA,IAC/D,QAAQ;AAAA,EACV;AAQA,QAAM,YACJ,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR;AAAA,QACA,OAAO,YAAY,aAAa;AAAA,QAChC,SAAS,YAAY,SAAY;AAAA,QACjC,MAAM,oBAAC,QAAK,OAAM,gBAAe,MAAM,IAAI;AAAA,QAC3C,UAAU,oBAAC,QAAK,OAAM,gBAAe,MAAM,IAAI;AAAA,QAChD;AAAA;AAAA,IAED;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR;AAAA,QACA,OAAO,YAAY,YAAY;AAAA,QAC/B,SAAS,YAAY,SAAY;AAAA,QACjC,MAAM,oBAAC,QAAK,OAAM,WAAU,MAAM,IAAI;AAAA,QACtC,UAAU,oBAAC,QAAK,OAAM,gBAAe,MAAM,IAAI;AAAA,QAChD;AAAA;AAAA,IAED;AAAA,KACF;AAMF,QAAM,UACJ;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR;AAAA,MACA,OAAO,YAAY,iBAAiB;AAAA,MACpC,SAAS,YAAY,SAAY;AAAA,MACjC,kBAAiB;AAAA,MACjB,MAAM,oBAAC,UAAO,UAAS,MAAK,MAAM,YAAY,UAAU,UAAU;AAAA,MAClE,UAAU,oBAAC,QAAK,OAAM,gBAAe,MAAM,IAAI;AAAA,MAChD;AAAA;AAAA,EAED;AAGF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,EAAE,SAAS,SAAS,KAAK,QAAQ;AAAA,MACxC,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA,kBAAkB,MAAM;AAAA,MAAC;AAAA,MACzB,QAAQ,aAAa,YAAY;AAAA,MACjC,QAAQ,aAAa,UAAU;AAAA,MAC/B,OAAO;AAAA;AAAA,EACT;AAEJ;","names":[]}

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

@@ -0,0 +1,154 @@
+"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_sidebar_exports = {};
+__export(app_sidebar_exports, {
+  AppSidebar: () => AppSidebar,
+  DEFAULT_SIDEBAR_ICON_COLORS: () => DEFAULT_SIDEBAR_ICON_COLORS
+});
+module.exports = __toCommonJS(app_sidebar_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_helpers = require("../../helpers/index.cjs");
+var import_icon = require("../icon/index.cjs");
+var import_sidebar_nav_item = require("../sidebar-nav-item/index.cjs");
+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__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    mobileOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        type: "button",
+        className: "uxm-app-sidebar__mobile-backdrop",
+        "aria-label": closeLabel,
+        onClick: onMobileClose
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "aside",
+      {
+        className: (0, import_helpers.cn)(
+          "uxm-app-sidebar",
+          collapsed && "uxm-app-sidebar--collapsed",
+          mobileOpen && "uxm-app-sidebar--mobile-open",
+          className
+        ),
+        ...rest,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uxm-app-sidebar__header", children: collapsed ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "uxm-app-sidebar__brand uxm-app-sidebar__brand--icon",
+              onClick: onCollapseToggle,
+              "aria-label": expandLabel,
+              children: brand.iconUrl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: brand.iconUrl, alt: brand.alt ?? "" })
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-app-sidebar__brand", children: brand.logoUrl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: brand.logoUrl, alt: brand.alt ?? "" }) }),
+            onCollapseToggle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                type: "button",
+                className: "uxm-app-sidebar__toggle",
+                onClick: onCollapseToggle,
+                "aria-label": collapseLabel,
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { glyph: "chevron-left", size: 16, strokeWidth: 1.5 })
+              }
+            )
+          ] }) }),
+          header && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uxm-app-sidebar__lead", children: header }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("nav", { className: "uxm-app-sidebar__nav", children: sections.map((section, idx) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "uxm-app-sidebar__section", children: [
+            section.heading && !collapsed && /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(
+                import_sidebar_nav_item.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: (0, import_helpers.cn)(
+                    "uxm-app-sidebar__item",
+                    collapsed && "uxm-app-sidebar__item--collapsed"
+                  ),
+                  children: item.label
+                },
+                item.href
+              );
+            })
+          ] }, idx)) }),
+          footer && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              className: (0, import_helpers.cn)(
+                "uxm-app-sidebar__footer",
+                collapsed && "uxm-app-sidebar__footer--collapsed"
+              ),
+              children: footer
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AppSidebar,
+  DEFAULT_SIDEBAR_ICON_COLORS
+});
+//# sourceMappingURL=app-sidebar.cjs.map

package/dist/ui/app-sidebar/app-sidebar.cjs.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":[]}