@viax.io/uxm 4.36.0

package/dist/ui/page-header/page-header.cjs

@@ -0,0 +1,47 @@
+"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 page_header_exports = {};
+__export(page_header_exports, {
+  PageHeader: () => PageHeader
+});
+module.exports = __toCommonJS(page_header_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_helpers = require("../../helpers/index.cjs");
+var import_icon_tile = require("../icon-tile/index.cjs");
+const ICON_TILE_STYLE = {
+  ["--uxm-icon-tile-bg"]: "var(--uxm-page-header-icon-bg, var(--color-accent-subtle))",
+  ["--uxm-icon-tile-color"]: "var(--uxm-page-header-icon-color, var(--color-accent-bold))",
+  ["--uxm-icon-tile-size"]: "var(--uxm-page-header-icon-size, 40px)",
+  ["--uxm-icon-tile-radius"]: "8px"
+};
+function PageHeader({ icon, title, meta, actions, className, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_helpers.cn)("uxm-page-header", className), ...rest, children: [
+    icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon_tile.IconTile, { style: ICON_TILE_STYLE, children: icon }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "uxm-page-header__body", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { className: "uxm-page-header__title", children: title }),
+      meta && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "uxm-page-header__meta", children: meta })
+    ] }),
+    actions && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uxm-page-header__actions", children: actions })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PageHeader
+});
+//# sourceMappingURL=page-header.cjs.map

package/dist/ui/page-header/page-header.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/page-header/page-header.tsx"],"sourcesContent":["import { cn } from '@/helpers';\n\nimport { IconTile } from '../icon-tile';\n\nimport type { CSSProperties, HTMLAttributes, ReactNode } from 'react';\n\nexport interface PageHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n  icon?: ReactNode;\n  title: ReactNode;\n  meta?: ReactNode;\n  actions?: ReactNode;\n}\n\n// Project PageHeader's icon-tile theming surface onto the underlying IconTile.\n// The `--uxm-page-header-icon-{bg,color,size}` variables (set by editor saves\n// or by consumers via inline style) flow into the IconTile's own CSS-variable\n// reads, so PageHeader's per-instance icon controls keep working without any\n// hand-rolled __icon CSS.\nconst ICON_TILE_STYLE: CSSProperties = {\n  ['--uxm-icon-tile-bg' as string]: 'var(--uxm-page-header-icon-bg, var(--color-accent-subtle))',\n  ['--uxm-icon-tile-color' as string]: 'var(--uxm-page-header-icon-color, var(--color-accent-bold))',\n  ['--uxm-icon-tile-size' as string]: 'var(--uxm-page-header-icon-size, 40px)',\n  ['--uxm-icon-tile-radius' as string]: '8px',\n};\n\nexport function PageHeader({ icon, title, meta, actions, className, ...rest }: PageHeaderProps) {\n  return (\n    <div className={cn('uxm-page-header', className)} {...rest}>\n      {icon && <IconTile style={ICON_TILE_STYLE}>{icon}</IconTile>}\n      <div className=\"uxm-page-header__body\">\n        <h1 className=\"uxm-page-header__title\">{title}</h1>\n        {meta && <p className=\"uxm-page-header__meta\">{meta}</p>}\n      </div>\n      {actions && <div className=\"uxm-page-header__actions\">{actions}</div>}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA4Be;AA5Bf,qBAAmB;AAEnB,uBAAyB;AAgBzB,MAAM,kBAAiC;AAAA,EACrC,CAAC,oBAA8B,GAAG;AAAA,EAClC,CAAC,uBAAiC,GAAG;AAAA,EACrC,CAAC,sBAAgC,GAAG;AAAA,EACpC,CAAC,wBAAkC,GAAG;AACxC;AAEO,SAAS,WAAW,EAAE,MAAM,OAAO,MAAM,SAAS,WAAW,GAAG,KAAK,GAAoB;AAC9F,SACE,6CAAC,SAAI,eAAW,mBAAG,mBAAmB,SAAS,GAAI,GAAG,MACnD;AAAA,YAAQ,4CAAC,6BAAS,OAAO,iBAAkB,gBAAK;AAAA,IACjD,6CAAC,SAAI,WAAU,yBACb;AAAA,kDAAC,QAAG,WAAU,0BAA0B,iBAAM;AAAA,MAC7C,QAAQ,4CAAC,OAAE,WAAU,yBAAyB,gBAAK;AAAA,OACtD;AAAA,IACC,WAAW,4CAAC,SAAI,WAAU,4BAA4B,mBAAQ;AAAA,KACjE;AAEJ;","names":[]}

package/dist/ui/page-header/page-header.css

@@ -0,0 +1,38 @@
+@charset "UTF-8";
+/* ── page-header ── */
+/* PageHeader — defaults match the `page-header` registry entry. Each
+   knob (titleColor, titleSize, metaColor, metaSize, iconBg, iconColor,
+   iconSize, gap, paddingX, paddingY) maps to a CSS custom property the
+   class rule reads; consumers re-theme through the same surface the
+   editor knobs write to. */
+.uxm-page-header {
+  align-items: flex-start;
+  display: flex;
+  gap: var(--uxm-page-header-gap, 16px);
+  padding: var(--uxm-page-header-padding-y, 0px) var(--uxm-page-header-padding-x, 0px);
+  /* Icon tile is now <IconTile>; PageHeader's `--uxm-page-header-icon-{bg,color,size}`
+     are bridged to IconTile's own CSS-variable surface in the .tsx. */
+}
+.uxm-page-header__body {
+  flex: 1;
+  min-width: 0;
+}
+.uxm-page-header__title {
+  color: var(--uxm-page-header-title-color, var(--color-text));
+  /* Heading face/weight: per-instance var, then the brand heading token,
+     then today's value — unset brand = inherits the body face, weight 600. */
+  font-family: var(--uxm-page-header-title-font, var(--type-page-title-font, var(--brand-heading-font, inherit)));
+  font-size: calc(var(--uxm-page-header-title-size, 22px) * var(--type-page-title-scale, 1) * var(--type-scale, 1));
+  font-weight: var(--uxm-page-header-title-weight, var(--type-page-title-weight, var(--brand-heading-weight, 600)));
+  margin: 0;
+}
+.uxm-page-header__meta {
+  color: var(--uxm-page-header-meta-color, var(--color-text-muted));
+  font-size: calc(var(--uxm-page-header-meta-size, 13px) * var(--type-scale, 1));
+  margin: 2px 0 0;
+}
+.uxm-page-header__actions {
+  display: inline-flex;
+  flex-shrink: 0;
+  gap: 8px;
+}

package/dist/ui/page-header/page-header.d.ts

@@ -0,0 +1,9 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface PageHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    icon?: ReactNode;
+    title: ReactNode;
+    meta?: ReactNode;
+    actions?: ReactNode;
+}
+export declare function PageHeader({ icon, title, meta, actions, className, ...rest }: PageHeaderProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=page-header.d.ts.map

package/dist/ui/page-header/page-header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-header.d.ts","sourceRoot":"","sources":["../../../src/ui/page-header/page-header.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAiB,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtE,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACpF,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAcD,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,eAAe,2CAW7F"}

package/dist/ui/page-header/page-header.js

@@ -0,0 +1,23 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../helpers/index.js";
+import { IconTile } from "../icon-tile/index.js";
+const ICON_TILE_STYLE = {
+  ["--uxm-icon-tile-bg"]: "var(--uxm-page-header-icon-bg, var(--color-accent-subtle))",
+  ["--uxm-icon-tile-color"]: "var(--uxm-page-header-icon-color, var(--color-accent-bold))",
+  ["--uxm-icon-tile-size"]: "var(--uxm-page-header-icon-size, 40px)",
+  ["--uxm-icon-tile-radius"]: "8px"
+};
+function PageHeader({ icon, title, meta, actions, className, ...rest }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("uxm-page-header", className), ...rest, children: [
+    icon && /* @__PURE__ */ jsx(IconTile, { style: ICON_TILE_STYLE, children: icon }),
+    /* @__PURE__ */ jsxs("div", { className: "uxm-page-header__body", children: [
+      /* @__PURE__ */ jsx("h1", { className: "uxm-page-header__title", children: title }),
+      meta && /* @__PURE__ */ jsx("p", { className: "uxm-page-header__meta", children: meta })
+    ] }),
+    actions && /* @__PURE__ */ jsx("div", { className: "uxm-page-header__actions", children: actions })
+  ] });
+}
+export {
+  PageHeader
+};
+//# sourceMappingURL=page-header.js.map

package/dist/ui/page-header/page-header.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/page-header/page-header.tsx"],"sourcesContent":["import { cn } from '@/helpers';\n\nimport { IconTile } from '../icon-tile';\n\nimport type { CSSProperties, HTMLAttributes, ReactNode } from 'react';\n\nexport interface PageHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n  icon?: ReactNode;\n  title: ReactNode;\n  meta?: ReactNode;\n  actions?: ReactNode;\n}\n\n// Project PageHeader's icon-tile theming surface onto the underlying IconTile.\n// The `--uxm-page-header-icon-{bg,color,size}` variables (set by editor saves\n// or by consumers via inline style) flow into the IconTile's own CSS-variable\n// reads, so PageHeader's per-instance icon controls keep working without any\n// hand-rolled __icon CSS.\nconst ICON_TILE_STYLE: CSSProperties = {\n  ['--uxm-icon-tile-bg' as string]: 'var(--uxm-page-header-icon-bg, var(--color-accent-subtle))',\n  ['--uxm-icon-tile-color' as string]: 'var(--uxm-page-header-icon-color, var(--color-accent-bold))',\n  ['--uxm-icon-tile-size' as string]: 'var(--uxm-page-header-icon-size, 40px)',\n  ['--uxm-icon-tile-radius' as string]: '8px',\n};\n\nexport function PageHeader({ icon, title, meta, actions, className, ...rest }: PageHeaderProps) {\n  return (\n    <div className={cn('uxm-page-header', className)} {...rest}>\n      {icon && <IconTile style={ICON_TILE_STYLE}>{icon}</IconTile>}\n      <div className=\"uxm-page-header__body\">\n        <h1 className=\"uxm-page-header__title\">{title}</h1>\n        {meta && <p className=\"uxm-page-header__meta\">{meta}</p>}\n      </div>\n      {actions && <div className=\"uxm-page-header__actions\">{actions}</div>}\n    </div>\n  );\n}\n"],"mappings":"AA4Be,cACT,YADS;AA5Bf,SAAS,UAAU;AAEnB,SAAS,gBAAgB;AAgBzB,MAAM,kBAAiC;AAAA,EACrC,CAAC,oBAA8B,GAAG;AAAA,EAClC,CAAC,uBAAiC,GAAG;AAAA,EACrC,CAAC,sBAAgC,GAAG;AAAA,EACpC,CAAC,wBAAkC,GAAG;AACxC;AAEO,SAAS,WAAW,EAAE,MAAM,OAAO,MAAM,SAAS,WAAW,GAAG,KAAK,GAAoB;AAC9F,SACE,qBAAC,SAAI,WAAW,GAAG,mBAAmB,SAAS,GAAI,GAAG,MACnD;AAAA,YAAQ,oBAAC,YAAS,OAAO,iBAAkB,gBAAK;AAAA,IACjD,qBAAC,SAAI,WAAU,yBACb;AAAA,0BAAC,QAAG,WAAU,0BAA0B,iBAAM;AAAA,MAC7C,QAAQ,oBAAC,OAAE,WAAU,yBAAyB,gBAAK;AAAA,OACtD;AAAA,IACC,WAAW,oBAAC,SAAI,WAAU,4BAA4B,mBAAQ;AAAA,KACjE;AAEJ;","names":[]}

package/dist/ui/page-shell/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 page_shell_exports = {};
+module.exports = __toCommonJS(page_shell_exports);
+__reExport(page_shell_exports, require("./page-shell.cjs"), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ...require("./page-shell.cjs")
+});
+//# sourceMappingURL=index.cjs.map

package/dist/ui/page-shell/index.cjs.map

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

package/dist/ui/page-shell/index.d.ts

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

package/dist/ui/page-shell/index.d.ts.map

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

package/dist/ui/page-shell/index.js

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

package/dist/ui/page-shell/index.js.map

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

package/dist/ui/page-shell/page-shell-preview.cjs

@@ -0,0 +1,138 @@
+"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 page_shell_preview_exports = {};
+__export(page_shell_preview_exports, {
+  PageShellPreview: () => PageShellPreview
+});
+module.exports = __toCommonJS(page_shell_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");
+var import_ui6 = require("../../ui/index.cjs");
+var import_ui7 = require("../../ui/index.cjs");
+const SAMPLE_SECTIONS = [
+  {
+    items: [
+      { href: "#dashboard", label: "Dashboard", icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui5.Icon, { glyph: "grid" }), active: true }
+    ]
+  },
+  {
+    heading: "Model Types",
+    items: [
+      {
+        href: "#rm",
+        label: "Revenue Motions",
+        icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui5.Icon, { glyph: "model-revenue-motion" }),
+        iconBg: "var(--color-highlight-warm)",
+        iconColor: "var(--color-on-highlight-warm)"
+      }
+    ]
+  }
+];
+function PageShellPreview({ styles, variants }) {
+  const variant = variants.variant ?? "standard";
+  const wrapperStyle = {
+    width: 720,
+    height: 420,
+    border: "1px solid var(--color-border)",
+    borderRadius: 8,
+    overflow: "hidden",
+    ["--uxm-page-shell-bg"]: styles.backgroundColor,
+    ["--uxm-page-shell-content-padding"]: `${styles.contentPadding}px`
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_ui7.PageShell,
+    {
+      variant,
+      style: wrapperStyle,
+      sidebar: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_ui.AppSidebar,
+        {
+          brand: { logoUrl: "/viax-logo.svg", iconUrl: "/viax-icon.svg", alt: "Brand" },
+          sections: SAMPLE_SECTIONS,
+          collapsed: false,
+          footer: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "v0.1.0" }),
+          style: { height: "100%", width: 200 }
+        }
+      ),
+      topBar: variant === "canvas" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            gap: 12,
+            borderBottom: "1px solid var(--color-border)",
+            backgroundColor: "color-mix(in srgb, var(--color-surface-alt) 50%, transparent)",
+            padding: "10px 16px"
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 13, fontWeight: 600, color: "var(--color-text)" }, children: "\u2190 Lifecycle" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { display: "inline-flex", gap: 6 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui4.ButtonPrimary, { style: { padding: "4px 10px", fontSize: 11 }, children: "Publish" }) })
+          ]
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_ui2.AppTopBar,
+        {
+          search: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_ui6.InputWithIcon,
+            {
+              type: "search",
+              placeholder: "Search\u2026",
+              icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui5.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_ui4.ButtonPrimary, { children: "+ New" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui3.Avatar, { initials: "LR" })
+          ] })
+        }
+      ),
+      children: variant === "canvas" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          style: {
+            width: "100%",
+            height: "100%",
+            backgroundImage: "radial-gradient(circle, var(--color-canvas-dot) 1px, transparent 1px)",
+            backgroundSize: "20px 20px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            color: "var(--color-text-muted)",
+            fontSize: 13
+          },
+          children: "Full-bleed canvas \u2014 light toolbar above"
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { style: { fontSize: 22, fontWeight: 600, color: "var(--color-text)", margin: 0 }, children: "Standard page" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { fontSize: 13, color: "var(--color-text-muted)", marginTop: 6 }, children: "Padded content area inside the sidebar + top-bar shell." })
+      ] })
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PageShellPreview
+});
+//# sourceMappingURL=page-shell-preview.cjs.map

package/dist/ui/page-shell/page-shell-preview.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/page-shell/page-shell-preview.tsx"],"sourcesContent":["import type { PreviewProps } from '@/previews/types';\nimport { AppSidebar } from '@/ui';\nimport { AppTopBar } from '@/ui';\nimport { Avatar } from '@/ui';\nimport { ButtonPrimary } from '@/ui';\nimport { Icon } from '@/ui';\nimport { InputWithIcon } from '@/ui';\nimport { PageShell, type PageShellVariant } from '@/ui';\n\nimport type { CSSProperties } from 'react';\n\nconst SAMPLE_SECTIONS = [\n  {\n    items: [\n      { href: '#dashboard', label: 'Dashboard', icon: <Icon glyph=\"grid\" />, active: true },\n    ],\n  },\n  {\n    heading: 'Model Types',\n    items: [\n      {\n        href: '#rm',\n        label: 'Revenue Motions',\n        icon: <Icon glyph=\"model-revenue-motion\" />,\n        iconBg: 'var(--color-highlight-warm)',\n        iconColor: 'var(--color-on-highlight-warm)',\n      },\n    ],\n  },\n];\n\nexport function PageShellPreview({ styles, variants }: PreviewProps) {\n  const variant = (variants.variant as PageShellVariant) ?? 'standard';\n  const wrapperStyle: CSSProperties = {\n    width: 720,\n    height: 420,\n    border: '1px solid var(--color-border)',\n    borderRadius: 8,\n    overflow: 'hidden',\n    ['--uxm-page-shell-bg' as string]: styles.backgroundColor as string,\n    ['--uxm-page-shell-content-padding' as string]: `${styles.contentPadding}px`,\n  };\n\n  return (\n    <PageShell\n      variant={variant}\n      style={wrapperStyle}\n      sidebar={\n        <AppSidebar\n          brand={{ logoUrl: '/viax-logo.svg', iconUrl: '/viax-icon.svg', alt: 'Brand' }}\n          sections={SAMPLE_SECTIONS}\n          collapsed={false}\n          footer={<span>v0.1.0</span>}\n          style={{ height: '100%', width: 200 }}\n        />\n      }\n      topBar={\n        variant === 'canvas' ? (\n          <div\n            style={{\n              display: 'flex',\n              alignItems: 'center',\n              justifyContent: 'space-between',\n              gap: 12,\n              borderBottom: '1px solid var(--color-border)',\n              backgroundColor: 'color-mix(in srgb, var(--color-surface-alt) 50%, transparent)',\n              padding: '10px 16px',\n            }}\n          >\n            <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--color-text)' }}>\n              ← Lifecycle\n            </span>\n            <span style={{ display: 'inline-flex', gap: 6 }}>\n              <ButtonPrimary style={{ padding: '4px 10px', fontSize: 11 }}>Publish</ButtonPrimary>\n            </span>\n          </div>\n        ) : (\n          <AppTopBar\n            search={\n              <InputWithIcon\n                type=\"search\"\n                placeholder=\"Search…\"\n                icon={<Icon glyph=\"search\" size={14} strokeWidth={1.5} />}\n              />\n            }\n            actions={\n              <>\n                <ButtonPrimary>+ New</ButtonPrimary>\n                <Avatar initials=\"LR\" />\n              </>\n            }\n          />\n        )\n      }\n    >\n      {variant === 'canvas' ? (\n        <div\n          style={{\n            width: '100%',\n            height: '100%',\n            backgroundImage:\n              'radial-gradient(circle, var(--color-canvas-dot) 1px, transparent 1px)',\n            backgroundSize: '20px 20px',\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n            color: 'var(--color-text-muted)',\n            fontSize: 13,\n          }}\n        >\n          Full-bleed canvas — light toolbar above\n        </div>\n      ) : (\n        <div>\n          <h1 style={{ fontSize: 22, fontWeight: 600, color: 'var(--color-text)', margin: 0 }}>\n            Standard page\n          </h1>\n          <p style={{ fontSize: 13, color: 'var(--color-text-muted)', marginTop: 6 }}>\n            Padded content area inside the sidebar + top-bar shell.\n          </p>\n        </div>\n      )}\n    </PageShell>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAcsD;AAbtD,gBAA2B;AAC3B,IAAAA,aAA0B;AAC1B,IAAAA,aAAuB;AACvB,IAAAA,aAA8B;AAC9B,IAAAA,aAAqB;AACrB,IAAAA,aAA8B;AAC9B,IAAAA,aAAiD;AAIjD,MAAM,kBAAkB;AAAA,EACtB;AAAA,IACE,OAAO;AAAA,MACL,EAAE,MAAM,cAAc,OAAO,aAAa,MAAM,4CAAC,mBAAK,OAAM,QAAO,GAAI,QAAQ,KAAK;AAAA,IACtF;AAAA,EACF;AAAA,EACA;AAAA,IACE,SAAS;AAAA,IACT,OAAO;AAAA,MACL;AAAA,QACE,MAAM;AAAA,QACN,OAAO;AAAA,QACP,MAAM,4CAAC,mBAAK,OAAM,wBAAuB;AAAA,QACzC,QAAQ;AAAA,QACR,WAAW;AAAA,MACb;AAAA,IACF;AAAA,EACF;AACF;AAEO,SAAS,iBAAiB,EAAE,QAAQ,SAAS,GAAiB;AACnE,QAAM,UAAW,SAAS,WAAgC;AAC1D,QAAM,eAA8B;AAAA,IAClC,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,UAAU;AAAA,IACV,CAAC,qBAA+B,GAAG,OAAO;AAAA,IAC1C,CAAC,kCAA4C,GAAG,GAAG,OAAO,cAAc;AAAA,EAC1E;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,OAAO;AAAA,MACP,SACE;AAAA,QAAC;AAAA;AAAA,UACC,OAAO,EAAE,SAAS,kBAAkB,SAAS,kBAAkB,KAAK,QAAQ;AAAA,UAC5E,UAAU;AAAA,UACV,WAAW;AAAA,UACX,QAAQ,4CAAC,UAAK,oBAAM;AAAA,UACpB,OAAO,EAAE,QAAQ,QAAQ,OAAO,IAAI;AAAA;AAAA,MACtC;AAAA,MAEF,QACE,YAAY,WACV;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,YACL,SAAS;AAAA,YACT,YAAY;AAAA,YACZ,gBAAgB;AAAA,YAChB,KAAK;AAAA,YACL,cAAc;AAAA,YACd,iBAAiB;AAAA,YACjB,SAAS;AAAA,UACX;AAAA,UAEA;AAAA,wDAAC,UAAK,OAAO,EAAE,UAAU,IAAI,YAAY,KAAK,OAAO,oBAAoB,GAAG,8BAE5E;AAAA,YACA,4CAAC,UAAK,OAAO,EAAE,SAAS,eAAe,KAAK,EAAE,GAC5C,sDAAC,4BAAc,OAAO,EAAE,SAAS,YAAY,UAAU,GAAG,GAAG,qBAAO,GACtE;AAAA;AAAA;AAAA,MACF,IAEA;AAAA,QAAC;AAAA;AAAA,UACC,QACE;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,aAAY;AAAA,cACZ,MAAM,4CAAC,mBAAK,OAAM,UAAS,MAAM,IAAI,aAAa,KAAK;AAAA;AAAA,UACzD;AAAA,UAEF,SACE,4EACE;AAAA,wDAAC,4BAAc,mBAAK;AAAA,YACpB,4CAAC,qBAAO,UAAS,MAAK;AAAA,aACxB;AAAA;AAAA,MAEJ;AAAA,MAIH,sBAAY,WACX;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,YACL,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,iBACE;AAAA,YACF,gBAAgB;AAAA,YAChB,SAAS;AAAA,YACT,YAAY;AAAA,YACZ,gBAAgB;AAAA,YAChB,OAAO;AAAA,YACP,UAAU;AAAA,UACZ;AAAA,UACD;AAAA;AAAA,MAED,IAEA,6CAAC,SACC;AAAA,oDAAC,QAAG,OAAO,EAAE,UAAU,IAAI,YAAY,KAAK,OAAO,qBAAqB,QAAQ,EAAE,GAAG,2BAErF;AAAA,QACA,4CAAC,OAAE,OAAO,EAAE,UAAU,IAAI,OAAO,2BAA2B,WAAW,EAAE,GAAG,qEAE5E;AAAA,SACF;AAAA;AAAA,EAEJ;AAEJ;","names":["import_ui"]}

package/dist/ui/page-shell/page-shell-preview.d.ts

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

package/dist/ui/page-shell/page-shell-preview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-shell-preview.d.ts","sourceRoot":"","sources":["../../../src/ui/page-shell/page-shell-preview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AA+BrD,wBAAgB,gBAAgB,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,YAAY,2CA6FlE"}

package/dist/ui/page-shell/page-shell-preview.js

@@ -0,0 +1,114 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { AppSidebar } from "../../ui/index.js";
+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";
+import { PageShell } from "../../ui/index.js";
+const SAMPLE_SECTIONS = [
+  {
+    items: [
+      { href: "#dashboard", label: "Dashboard", icon: /* @__PURE__ */ jsx(Icon, { glyph: "grid" }), active: true }
+    ]
+  },
+  {
+    heading: "Model Types",
+    items: [
+      {
+        href: "#rm",
+        label: "Revenue Motions",
+        icon: /* @__PURE__ */ jsx(Icon, { glyph: "model-revenue-motion" }),
+        iconBg: "var(--color-highlight-warm)",
+        iconColor: "var(--color-on-highlight-warm)"
+      }
+    ]
+  }
+];
+function PageShellPreview({ styles, variants }) {
+  const variant = variants.variant ?? "standard";
+  const wrapperStyle = {
+    width: 720,
+    height: 420,
+    border: "1px solid var(--color-border)",
+    borderRadius: 8,
+    overflow: "hidden",
+    ["--uxm-page-shell-bg"]: styles.backgroundColor,
+    ["--uxm-page-shell-content-padding"]: `${styles.contentPadding}px`
+  };
+  return /* @__PURE__ */ jsx(
+    PageShell,
+    {
+      variant,
+      style: wrapperStyle,
+      sidebar: /* @__PURE__ */ jsx(
+        AppSidebar,
+        {
+          brand: { logoUrl: "/viax-logo.svg", iconUrl: "/viax-icon.svg", alt: "Brand" },
+          sections: SAMPLE_SECTIONS,
+          collapsed: false,
+          footer: /* @__PURE__ */ jsx("span", { children: "v0.1.0" }),
+          style: { height: "100%", width: 200 }
+        }
+      ),
+      topBar: variant === "canvas" ? /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            gap: 12,
+            borderBottom: "1px solid var(--color-border)",
+            backgroundColor: "color-mix(in srgb, var(--color-surface-alt) 50%, transparent)",
+            padding: "10px 16px"
+          },
+          children: [
+            /* @__PURE__ */ jsx("span", { style: { fontSize: 13, fontWeight: 600, color: "var(--color-text)" }, children: "\u2190 Lifecycle" }),
+            /* @__PURE__ */ jsx("span", { style: { display: "inline-flex", gap: 6 }, children: /* @__PURE__ */ jsx(ButtonPrimary, { style: { padding: "4px 10px", fontSize: 11 }, children: "Publish" }) })
+          ]
+        }
+      ) : /* @__PURE__ */ jsx(
+        AppTopBar,
+        {
+          search: /* @__PURE__ */ jsx(
+            InputWithIcon,
+            {
+              type: "search",
+              placeholder: "Search\u2026",
+              icon: /* @__PURE__ */ jsx(Icon, { glyph: "search", size: 14, strokeWidth: 1.5 })
+            }
+          ),
+          actions: /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(ButtonPrimary, { children: "+ New" }),
+            /* @__PURE__ */ jsx(Avatar, { initials: "LR" })
+          ] })
+        }
+      ),
+      children: variant === "canvas" ? /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            width: "100%",
+            height: "100%",
+            backgroundImage: "radial-gradient(circle, var(--color-canvas-dot) 1px, transparent 1px)",
+            backgroundSize: "20px 20px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            color: "var(--color-text-muted)",
+            fontSize: 13
+          },
+          children: "Full-bleed canvas \u2014 light toolbar above"
+        }
+      ) : /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h1", { style: { fontSize: 22, fontWeight: 600, color: "var(--color-text)", margin: 0 }, children: "Standard page" }),
+        /* @__PURE__ */ jsx("p", { style: { fontSize: 13, color: "var(--color-text-muted)", marginTop: 6 }, children: "Padded content area inside the sidebar + top-bar shell." })
+      ] })
+    }
+  );
+}
+export {
+  PageShellPreview
+};
+//# sourceMappingURL=page-shell-preview.js.map

package/dist/ui/page-shell/page-shell-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/page-shell/page-shell-preview.tsx"],"sourcesContent":["import type { PreviewProps } from '@/previews/types';\nimport { AppSidebar } from '@/ui';\nimport { AppTopBar } from '@/ui';\nimport { Avatar } from '@/ui';\nimport { ButtonPrimary } from '@/ui';\nimport { Icon } from '@/ui';\nimport { InputWithIcon } from '@/ui';\nimport { PageShell, type PageShellVariant } from '@/ui';\n\nimport type { CSSProperties } from 'react';\n\nconst SAMPLE_SECTIONS = [\n  {\n    items: [\n      { href: '#dashboard', label: 'Dashboard', icon: <Icon glyph=\"grid\" />, active: true },\n    ],\n  },\n  {\n    heading: 'Model Types',\n    items: [\n      {\n        href: '#rm',\n        label: 'Revenue Motions',\n        icon: <Icon glyph=\"model-revenue-motion\" />,\n        iconBg: 'var(--color-highlight-warm)',\n        iconColor: 'var(--color-on-highlight-warm)',\n      },\n    ],\n  },\n];\n\nexport function PageShellPreview({ styles, variants }: PreviewProps) {\n  const variant = (variants.variant as PageShellVariant) ?? 'standard';\n  const wrapperStyle: CSSProperties = {\n    width: 720,\n    height: 420,\n    border: '1px solid var(--color-border)',\n    borderRadius: 8,\n    overflow: 'hidden',\n    ['--uxm-page-shell-bg' as string]: styles.backgroundColor as string,\n    ['--uxm-page-shell-content-padding' as string]: `${styles.contentPadding}px`,\n  };\n\n  return (\n    <PageShell\n      variant={variant}\n      style={wrapperStyle}\n      sidebar={\n        <AppSidebar\n          brand={{ logoUrl: '/viax-logo.svg', iconUrl: '/viax-icon.svg', alt: 'Brand' }}\n          sections={SAMPLE_SECTIONS}\n          collapsed={false}\n          footer={<span>v0.1.0</span>}\n          style={{ height: '100%', width: 200 }}\n        />\n      }\n      topBar={\n        variant === 'canvas' ? (\n          <div\n            style={{\n              display: 'flex',\n              alignItems: 'center',\n              justifyContent: 'space-between',\n              gap: 12,\n              borderBottom: '1px solid var(--color-border)',\n              backgroundColor: 'color-mix(in srgb, var(--color-surface-alt) 50%, transparent)',\n              padding: '10px 16px',\n            }}\n          >\n            <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--color-text)' }}>\n              ← Lifecycle\n            </span>\n            <span style={{ display: 'inline-flex', gap: 6 }}>\n              <ButtonPrimary style={{ padding: '4px 10px', fontSize: 11 }}>Publish</ButtonPrimary>\n            </span>\n          </div>\n        ) : (\n          <AppTopBar\n            search={\n              <InputWithIcon\n                type=\"search\"\n                placeholder=\"Search…\"\n                icon={<Icon glyph=\"search\" size={14} strokeWidth={1.5} />}\n              />\n            }\n            actions={\n              <>\n                <ButtonPrimary>+ New</ButtonPrimary>\n                <Avatar initials=\"LR\" />\n              </>\n            }\n          />\n        )\n      }\n    >\n      {variant === 'canvas' ? (\n        <div\n          style={{\n            width: '100%',\n            height: '100%',\n            backgroundImage:\n              'radial-gradient(circle, var(--color-canvas-dot) 1px, transparent 1px)',\n            backgroundSize: '20px 20px',\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n            color: 'var(--color-text-muted)',\n            fontSize: 13,\n          }}\n        >\n          Full-bleed canvas — light toolbar above\n        </div>\n      ) : (\n        <div>\n          <h1 style={{ fontSize: 22, fontWeight: 600, color: 'var(--color-text)', margin: 0 }}>\n            Standard page\n          </h1>\n          <p style={{ fontSize: 13, color: 'var(--color-text-muted)', marginTop: 6 }}>\n            Padded content area inside the sidebar + top-bar shell.\n          </p>\n        </div>\n      )}\n    </PageShell>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/ui/page-shell/page-shell.cjs

@@ -0,0 +1,46 @@
+"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 page_shell_exports = {};
+__export(page_shell_exports, {
+  PageShell: () => PageShell
+});
+module.exports = __toCommonJS(page_shell_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_helpers = require("../../helpers/index.cjs");
+function PageShell({
+  variant = "standard",
+  sidebar,
+  topBar,
+  children,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_helpers.cn)("uxm-page-shell", `uxm-page-shell--${variant}`, className), ...rest, children: [
+    sidebar && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uxm-page-shell__sidebar", children: sidebar }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "uxm-page-shell__body", children: [
+      topBar && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uxm-page-shell__top-bar", children: topBar }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("main", { className: "uxm-page-shell__content", children })
+    ] })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PageShell
+});
+//# sourceMappingURL=page-shell.cjs.map

package/dist/ui/page-shell/page-shell.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/page-shell/page-shell.tsx"],"sourcesContent":["import { cn } from '@/helpers';\n\nimport type { HTMLAttributes, ReactNode } from 'react';\n\nexport type PageShellVariant = 'standard' | 'canvas';\n\nexport interface PageShellProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Layout variant — controls the content area only. The sidebar and top bar\n   * always render whatever you pass.\n   *\n   * - `standard`: padded, scrollable content area for normal product pages.\n   * - `canvas`: full-bleed, non-scrolling content area for diagram surfaces\n   *   and lifecycle modelers. Pass a lighter context-specific top bar\n   *   (Back + title + diagram actions) instead of the full AppTopBar.\n   */\n  variant?: PageShellVariant;\n  /** Left navigation. Typically <AppSidebar /> from @viax.io/uxm/ui. */\n  sidebar?: ReactNode;\n  /** Top header — anything you want, or omit/null to render no header. */\n  topBar?: ReactNode;\n  /** Page content. */\n  children: ReactNode;\n}\n\nexport function PageShell({\n  variant = 'standard',\n  sidebar,\n  topBar,\n  children,\n  className,\n  ...rest\n}: PageShellProps) {\n  return (\n    <div className={cn('uxm-page-shell', `uxm-page-shell--${variant}`, className)} {...rest}>\n      {sidebar && <div className=\"uxm-page-shell__sidebar\">{sidebar}</div>}\n      <div className=\"uxm-page-shell__body\">\n        {topBar && <div className=\"uxm-page-shell__top-bar\">{topBar}</div>}\n        <main className=\"uxm-page-shell__content\">{children}</main>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAmCkB;AAnClB,qBAAmB;AAyBZ,SAAS,UAAU;AAAA,EACxB,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAmB;AACjB,SACE,6CAAC,SAAI,eAAW,mBAAG,kBAAkB,mBAAmB,OAAO,IAAI,SAAS,GAAI,GAAG,MAChF;AAAA,eAAW,4CAAC,SAAI,WAAU,2BAA2B,mBAAQ;AAAA,IAC9D,6CAAC,SAAI,WAAU,wBACZ;AAAA,gBAAU,4CAAC,SAAI,WAAU,2BAA2B,kBAAO;AAAA,MAC5D,4CAAC,UAAK,WAAU,2BAA2B,UAAS;AAAA,OACtD;AAAA,KACF;AAEJ;","names":[]}

package/dist/ui/page-shell/page-shell.css

@@ -0,0 +1,31 @@
+@charset "UTF-8";
+/* ── page-shell ── */
+.uxm-page-shell {
+  background-color: var(--uxm-page-shell-bg, var(--color-surface));
+  display: flex;
+  height: 100%;
+}
+.uxm-page-shell__sidebar {
+  flex-shrink: 0;
+}
+.uxm-page-shell__body {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
+}
+.uxm-page-shell__top-bar {
+  flex-shrink: 0;
+}
+.uxm-page-shell__content {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+}
+.uxm-page-shell--standard .uxm-page-shell__content {
+  padding: var(--uxm-page-shell-content-padding, 0);
+}
+.uxm-page-shell--canvas .uxm-page-shell__content {
+  overflow: hidden;
+  padding: 0;
+}

package/dist/ui/page-shell/page-shell.d.ts

@@ -0,0 +1,22 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export type PageShellVariant = 'standard' | 'canvas';
+export interface PageShellProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Layout variant — controls the content area only. The sidebar and top bar
+     * always render whatever you pass.
+     *
+     * - `standard`: padded, scrollable content area for normal product pages.
+     * - `canvas`: full-bleed, non-scrolling content area for diagram surfaces
+     *   and lifecycle modelers. Pass a lighter context-specific top bar
+     *   (Back + title + diagram actions) instead of the full AppTopBar.
+     */
+    variant?: PageShellVariant;
+    /** Left navigation. Typically <AppSidebar /> from @viax.io/uxm/ui. */
+    sidebar?: ReactNode;
+    /** Top header — anything you want, or omit/null to render no header. */
+    topBar?: ReactNode;
+    /** Page content. */
+    children: ReactNode;
+}
+export declare function PageShell({ variant, sidebar, topBar, children, className, ...rest }: PageShellProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=page-shell.d.ts.map

package/dist/ui/page-shell/page-shell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-shell.d.ts","sourceRoot":"","sources":["../../../src/ui/page-shell/page-shell.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,MAAM,MAAM,gBAAgB,GAAG,UAAU,GAAG,QAAQ,CAAC;AAErD,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,cAAc,CAAC;IACpE;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,sEAAsE;IACtE,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,wEAAwE;IACxE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,oBAAoB;IACpB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,SAAS,CAAC,EACxB,OAAoB,EACpB,OAAO,EACP,MAAM,EACN,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,cAAc,2CAUhB"}

package/dist/ui/page-shell/page-shell.js

@@ -0,0 +1,22 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../helpers/index.js";
+function PageShell({
+  variant = "standard",
+  sidebar,
+  topBar,
+  children,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("uxm-page-shell", `uxm-page-shell--${variant}`, className), ...rest, children: [
+    sidebar && /* @__PURE__ */ jsx("div", { className: "uxm-page-shell__sidebar", children: sidebar }),
+    /* @__PURE__ */ jsxs("div", { className: "uxm-page-shell__body", children: [
+      topBar && /* @__PURE__ */ jsx("div", { className: "uxm-page-shell__top-bar", children: topBar }),
+      /* @__PURE__ */ jsx("main", { className: "uxm-page-shell__content", children })
+    ] })
+  ] });
+}
+export {
+  PageShell
+};
+//# sourceMappingURL=page-shell.js.map

package/dist/ui/page-shell/page-shell.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/page-shell/page-shell.tsx"],"sourcesContent":["import { cn } from '@/helpers';\n\nimport type { HTMLAttributes, ReactNode } from 'react';\n\nexport type PageShellVariant = 'standard' | 'canvas';\n\nexport interface PageShellProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Layout variant — controls the content area only. The sidebar and top bar\n   * always render whatever you pass.\n   *\n   * - `standard`: padded, scrollable content area for normal product pages.\n   * - `canvas`: full-bleed, non-scrolling content area for diagram surfaces\n   *   and lifecycle modelers. Pass a lighter context-specific top bar\n   *   (Back + title + diagram actions) instead of the full AppTopBar.\n   */\n  variant?: PageShellVariant;\n  /** Left navigation. Typically <AppSidebar /> from @viax.io/uxm/ui. */\n  sidebar?: ReactNode;\n  /** Top header — anything you want, or omit/null to render no header. */\n  topBar?: ReactNode;\n  /** Page content. */\n  children: ReactNode;\n}\n\nexport function PageShell({\n  variant = 'standard',\n  sidebar,\n  topBar,\n  children,\n  className,\n  ...rest\n}: PageShellProps) {\n  return (\n    <div className={cn('uxm-page-shell', `uxm-page-shell--${variant}`, className)} {...rest}>\n      {sidebar && <div className=\"uxm-page-shell__sidebar\">{sidebar}</div>}\n      <div className=\"uxm-page-shell__body\">\n        {topBar && <div className=\"uxm-page-shell__top-bar\">{topBar}</div>}\n        <main className=\"uxm-page-shell__content\">{children}</main>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"AAmCkB,cACZ,YADY;AAnClB,SAAS,UAAU;AAyBZ,SAAS,UAAU;AAAA,EACxB,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAmB;AACjB,SACE,qBAAC,SAAI,WAAW,GAAG,kBAAkB,mBAAmB,OAAO,IAAI,SAAS,GAAI,GAAG,MAChF;AAAA,eAAW,oBAAC,SAAI,WAAU,2BAA2B,mBAAQ;AAAA,IAC9D,qBAAC,SAAI,WAAU,wBACZ;AAAA,gBAAU,oBAAC,SAAI,WAAU,2BAA2B,kBAAO;AAAA,MAC5D,oBAAC,UAAK,WAAU,2BAA2B,UAAS;AAAA,OACtD;AAAA,KACF;AAEJ;","names":[]}