@revikornmann/muka-ui 0.2.1

package/dist/cjs/components/TopBar/ControlBar.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ControlBar = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+require("./ControlBar.css");
+/**
+ * ControlBar Component
+ *
+ * A slot-based container that appears below the TopBar for secondary controls.
+ * Accepts any children (buttons, inputs, tabs, etc.) and arranges them with
+ * configurable justification.
+ *
+ * @example
+ * ```tsx
+ * <ControlBar justify="between">
+ *   <Button variant="ghost" size="sm" iconLeft={<Icon name="filter-3" />}>Filter</Button>
+ *   <Button variant="ghost" size="sm" iconRight={<Icon name="sort-desc" />}>Sort</Button>
+ * </ControlBar>
+ * ```
+ */
+const ControlBar = ({ children, justify = 'start', size, className = '', }) => {
+    const controlBarClasses = [
+        'muka-controlbar',
+        `muka-controlbar--justify-${justify}`,
+        className,
+    ].filter(Boolean).join(' ');
+    return ((0, jsx_runtime_1.jsx)("div", { className: controlBarClasses, "data-size": size, children: (0, jsx_runtime_1.jsx)("div", { className: "muka-controlbar__content", children: children }) }));
+};
+exports.ControlBar = ControlBar;
+exports.default = exports.ControlBar;
+//# sourceMappingURL=ControlBar.js.map

package/dist/cjs/components/TopBar/ControlBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ControlBar.js","sourceRoot":"","sources":["../../../../components/TopBar/ControlBar.tsx"],"names":[],"mappings":";;;;AACA,4BAA0B;AAuB1B;;;;;;;;;;;;;;GAcG;AACI,MAAM,UAAU,GAA8B,CAAC,EACpD,QAAQ,EACR,OAAO,GAAG,OAAO,EACjB,IAAI,EACJ,SAAS,GAAG,EAAE,GACf,EAAE,EAAE;IACH,MAAM,iBAAiB,GAAG;QACxB,iBAAiB;QACjB,4BAA4B,OAAO,EAAE;QACrC,SAAS;KACV,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,OAAO,CACL,gCAAK,SAAS,EAAE,iBAAiB,eAAa,IAAI,YAChD,gCAAK,SAAS,EAAC,0BAA0B,YACtC,QAAQ,GACL,GACF,CACP,CAAC;AACJ,CAAC,CAAC;AAnBW,QAAA,UAAU,cAmBrB;AAEF,kBAAe,kBAAU,CAAC"}

package/dist/cjs/components/TopBar/TopBar.css

@@ -0,0 +1,197 @@
+/* TopBar Component Styles */
+
+/*
+ * Sizing is driven by a batch of `--tb-*` custom properties set per tier.
+ * The base (small) values live on `.muka-topbar`; the medium/large tiers flip
+ * the same vars. Tiers are applied either responsively (when no `size` prop is
+ * set, scoped with `:not([data-size])`) or forced via `[data-size="…"]`.
+ */
+.muka-topbar {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  background-color: var(--topbar-color-background);
+  width: 100%;
+  box-shadow: var(--shadow-level2);
+
+  /* ─── Small tier (base) ─── */
+  --tb-height: var(--topbar-height-sm);
+  --tb-pad: var(--topbar-padding-x-sm);
+  --tb-title-position: absolute;
+  --tb-title-left: 50%;
+  --tb-title-transform: translateX(-50%);
+  --tb-title-align: center;
+  --tb-title-max-width: calc(100% - 2 * var(--tb-pad) - 2 * var(--tb-height));
+  --tb-title-font-family: var(--text-heading-xs-fontFamily);
+  --tb-title-font-weight: var(--text-heading-xs-fontWeight);
+  --tb-title-font-size: var(--text-heading-xs-fontSize);
+  --tb-title-line-height: var(--text-heading-xs-lineHeight);
+  --tb-title-letter-spacing: var(--text-heading-xs-letterSpacing);
+  --tb-breadcrumb-display: none;
+}
+
+/* ─── Medium tier ─── */
+@media (min-width: 768px) {
+  .muka-topbar:not([data-size]) {
+    --tb-height: var(--topbar-height-md);
+    --tb-pad: var(--topbar-padding-x-md);
+    --tb-title-font-family: var(--text-heading-md-fontFamily);
+    --tb-title-font-weight: var(--text-heading-md-fontWeight);
+    --tb-title-font-size: var(--text-heading-md-fontSize);
+    --tb-title-line-height: var(--text-heading-md-lineHeight);
+    --tb-title-letter-spacing: var(--text-heading-md-letterSpacing);
+  }
+}
+
+.muka-topbar[data-size='md'] {
+  --tb-height: var(--topbar-height-md);
+  --tb-pad: var(--topbar-padding-x-md);
+  --tb-title-font-family: var(--text-heading-md-fontFamily);
+  --tb-title-font-weight: var(--text-heading-md-fontWeight);
+  --tb-title-font-size: var(--text-heading-md-fontSize);
+  --tb-title-line-height: var(--text-heading-md-lineHeight);
+  --tb-title-letter-spacing: var(--text-heading-md-letterSpacing);
+}
+
+/* ─── Large tier: left-aligned title, breadcrumb row ─── */
+@media (min-width: 1024px) {
+  .muka-topbar:not([data-size]) {
+    --tb-height: var(--topbar-height-lg);
+    --tb-pad: var(--topbar-padding-x-lg);
+    --tb-title-position: static;
+    --tb-title-left: auto;
+    --tb-title-transform: none;
+    --tb-title-align: left;
+    --tb-title-max-width: none;
+    --tb-title-font-family: var(--text-heading-lg-fontFamily);
+    --tb-title-font-weight: var(--text-heading-lg-fontWeight);
+    --tb-title-font-size: var(--text-heading-lg-fontSize);
+    --tb-title-line-height: var(--text-heading-lg-lineHeight);
+    --tb-title-letter-spacing: var(--text-heading-lg-letterSpacing);
+    --tb-breadcrumb-display: flex;
+  }
+}
+
+.muka-topbar[data-size='lg'] {
+  --tb-height: var(--topbar-height-lg);
+  --tb-pad: var(--topbar-padding-x-lg);
+  --tb-title-position: static;
+  --tb-title-left: auto;
+  --tb-title-transform: none;
+  --tb-title-align: left;
+  --tb-title-max-width: none;
+  --tb-title-font-family: var(--text-heading-lg-fontFamily);
+  --tb-title-font-weight: var(--text-heading-lg-fontWeight);
+  --tb-title-font-size: var(--text-heading-lg-fontSize);
+  --tb-title-line-height: var(--text-heading-lg-lineHeight);
+  --tb-title-letter-spacing: var(--text-heading-lg-letterSpacing);
+  --tb-breadcrumb-display: flex;
+}
+
+/* Push content below the iOS notch / status bar. Opt out via disableSafeArea. */
+.muka-topbar:not(.muka-topbar--no-safe-area) {
+  padding-top: env(safe-area-inset-top);
+}
+
+/* ─── Drag Handle (draggable variant) ─────────────────── */
+
+.muka-topbar__drag-handle-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: var(--topbar-drag-handle-padding-y) 0;
+}
+
+.muka-topbar__drag-handle {
+  width: var(--topbar-drag-handle-width);
+  height: var(--topbar-drag-handle-height);
+  background-color: var(--topbar-drag-handle-color);
+  border-radius: var(--topbar-drag-handle-radius);
+}
+
+/* ─── Breadcrumb row (large tier) ─────────────────────── */
+
+.muka-topbar__breadcrumb {
+  display: var(--tb-breadcrumb-display);
+  align-items: center;
+  padding: var(--spacing-3) var(--tb-pad) 0;
+}
+
+.muka-topbar:not(.muka-topbar--no-safe-area) .muka-topbar__breadcrumb {
+  padding-left: max(var(--tb-pad), env(safe-area-inset-left));
+  padding-right: max(var(--tb-pad), env(safe-area-inset-right));
+}
+
+/* ─── Container (the bar itself) ──────────────────────── */
+
+.muka-topbar__container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: var(--tb-height);
+  padding: 0 var(--tb-pad);
+}
+
+/* Inset content on iPhone landscape with notch / iPad with curved corners. */
+.muka-topbar:not(.muka-topbar--no-safe-area) .muka-topbar__container {
+  padding-left: max(var(--tb-pad), env(safe-area-inset-left));
+  padding-right: max(var(--tb-pad), env(safe-area-inset-right));
+}
+
+/* ─── Leading slot ────────────────────────────────────── */
+
+.muka-topbar__leading {
+  flex-shrink: 0;
+  z-index: 1;
+}
+
+/* Large tier with a breadcrumb replaces the back button with the breadcrumb. */
+@media (min-width: 1024px) {
+  .muka-topbar:not([data-size]):has(.muka-topbar__breadcrumb) .muka-topbar__leading {
+    display: none;
+  }
+}
+
+.muka-topbar[data-size='lg']:has(.muka-topbar__breadcrumb) .muka-topbar__leading {
+  display: none;
+}
+
+/* ─── Title ───────────────────────────────────────────── */
+
+.muka-topbar__title {
+  position: var(--tb-title-position);
+  left: var(--tb-title-left);
+  transform: var(--tb-title-transform);
+  max-width: var(--tb-title-max-width);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: var(--tb-title-align);
+  color: var(--topbar-color-foreground);
+  font-family: var(--tb-title-font-family);
+  font-weight: var(--tb-title-font-weight);
+  font-size: var(--tb-title-font-size);
+  line-height: var(--tb-title-line-height);
+  letter-spacing: var(--tb-title-letter-spacing);
+  margin: 0;
+}
+
+/* ─── Trailing slot ───────────────────────────────────── */
+
+.muka-topbar__trailing {
+  display: flex;
+  align-items: center;
+  margin-left: auto;
+  flex-shrink: 0;
+  z-index: 1;
+}
+
+.muka-topbar__trailing-action {
+  flex-shrink: 0;
+}
+
+/* ─── ControlBar slot ────────────────────────────────── */
+
+.muka-topbar__controlbar {
+  width: 100%;
+}

package/dist/cjs/components/TopBar/TopBar.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TopBar = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+require("./TopBar.css");
+/**
+ * TopBar Component
+ *
+ * A navigation bar used at the top of views, dialogs, and sheets.
+ * Provides slots for a leading action (back/close), a centered title,
+ * and up to two trailing actions.
+ *
+ * The "draggable" variant adds a drag handle above the bar, used in
+ * bottom sheets and non-modal dialogs.
+ *
+ * Sizing is responsive by default (small <768px, medium 768–1023px, large
+ * ≥1024px). At the large tier the title is left-aligned and an optional
+ * `breadcrumb` replaces the `leading` back button. Pass `size` to force a tier.
+ *
+ * @accessibility WCAG 2.1 AA compliant
+ * - Uses `<header>` landmark for semantic structure
+ * - Navigation elements are focusable and keyboard-accessible
+ * - Title uses `aria-live="polite"` for dynamic updates
+ */
+const TopBar = ({ title, leading, trailing, trailingSecondary, variant = 'default', size, breadcrumb, controlBar, disableSafeArea = false, className = '', }) => {
+    const topBarClasses = [
+        'muka-topbar',
+        variant === 'draggable' && 'muka-topbar--draggable',
+        disableSafeArea && 'muka-topbar--no-safe-area',
+        className,
+    ].filter(Boolean).join(' ');
+    return ((0, jsx_runtime_1.jsxs)("header", { className: topBarClasses, "data-size": size, children: [variant === 'draggable' && ((0, jsx_runtime_1.jsx)("div", { className: "muka-topbar__drag-handle-container", children: (0, jsx_runtime_1.jsx)("div", { className: "muka-topbar__drag-handle" }) })), breadcrumb && ((0, jsx_runtime_1.jsx)("div", { className: "muka-topbar__breadcrumb", children: breadcrumb })), (0, jsx_runtime_1.jsxs)("div", { className: "muka-topbar__container", children: [leading && ((0, jsx_runtime_1.jsx)("div", { className: "muka-topbar__leading", children: leading })), title && ((0, jsx_runtime_1.jsx)("p", { className: "muka-topbar__title", "aria-live": "polite", children: title })), (0, jsx_runtime_1.jsxs)("div", { className: "muka-topbar__trailing", children: [trailingSecondary && ((0, jsx_runtime_1.jsx)("div", { className: "muka-topbar__trailing-action", children: trailingSecondary })), trailing && ((0, jsx_runtime_1.jsx)("div", { className: "muka-topbar__trailing-action", children: trailing }))] })] }), controlBar && ((0, jsx_runtime_1.jsx)("div", { className: "muka-topbar__controlbar", children: controlBar }))] }));
+};
+exports.TopBar = TopBar;
+exports.default = exports.TopBar;
+//# sourceMappingURL=TopBar.js.map

package/dist/cjs/components/TopBar/TopBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TopBar.js","sourceRoot":"","sources":["../../../../components/TopBar/TopBar.tsx"],"names":[],"mappings":";;;;AACA,wBAAsB;AA8CtB;;;;;;;;;;;;;;;;;;GAkBG;AACI,MAAM,MAAM,GAA0B,CAAC,EAC5C,KAAK,EACL,OAAO,EACP,QAAQ,EACR,iBAAiB,EACjB,OAAO,GAAG,SAAS,EACnB,IAAI,EACJ,UAAU,EACV,UAAU,EACV,eAAe,GAAG,KAAK,EACvB,SAAS,GAAG,EAAE,GACf,EAAE,EAAE;IACH,MAAM,aAAa,GAAG;QACpB,aAAa;QACb,OAAO,KAAK,WAAW,IAAI,wBAAwB;QACnD,eAAe,IAAI,2BAA2B;QAC9C,SAAS;KACV,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,OAAO,CACL,oCAAQ,SAAS,EAAE,aAAa,eAAa,IAAI,aAC9C,OAAO,KAAK,WAAW,IAAI,CAC1B,gCAAK,SAAS,EAAC,oCAAoC,YACjD,gCAAK,SAAS,EAAC,0BAA0B,GAAG,GACxC,CACP,EAEA,UAAU,IAAI,CACb,gCAAK,SAAS,EAAC,yBAAyB,YACrC,UAAU,GACP,CACP,EAED,iCAAK,SAAS,EAAC,wBAAwB,aACpC,OAAO,IAAI,CACV,gCAAK,SAAS,EAAC,sBAAsB,YAClC,OAAO,GACJ,CACP,EAEA,KAAK,IAAI,CACR,8BAAG,SAAS,EAAC,oBAAoB,eAAW,QAAQ,YACjD,KAAK,GACJ,CACL,EAED,iCAAK,SAAS,EAAC,uBAAuB,aACnC,iBAAiB,IAAI,CACpB,gCAAK,SAAS,EAAC,8BAA8B,YAC1C,iBAAiB,GACd,CACP,EACA,QAAQ,IAAI,CACX,gCAAK,SAAS,EAAC,8BAA8B,YAC1C,QAAQ,GACL,CACP,IACG,IACF,EAEL,UAAU,IAAI,CACb,gCAAK,SAAS,EAAC,yBAAyB,YACrC,UAAU,GACP,CACP,IACM,CACV,CAAC;AACJ,CAAC,CAAC;AAnEW,QAAA,MAAM,UAmEjB;AAEF,kBAAe,cAAM,CAAC"}

package/dist/cjs/components/TopBar/index.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = exports.ControlBar = exports.TopBar = void 0;
+var TopBar_1 = require("./TopBar");
+Object.defineProperty(exports, "TopBar", { enumerable: true, get: function () { return TopBar_1.TopBar; } });
+var ControlBar_1 = require("./ControlBar");
+Object.defineProperty(exports, "ControlBar", { enumerable: true, get: function () { return ControlBar_1.ControlBar; } });
+var TopBar_2 = require("./TopBar");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(TopBar_2).default; } });
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/TopBar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/TopBar/index.ts"],"names":[],"mappings":";;;;;;AAAA,mCAAoD;AAA3C,gGAAA,MAAM,OAAA;AACf,2CAAgE;AAAvD,wGAAA,UAAU,OAAA;AACnB,mCAAmC;AAA1B,kHAAA,OAAO,OAAA"}

package/dist/cjs/components/TypingIndicator/TypingIndicator.css

@@ -0,0 +1,69 @@
+/* TypingIndicator Component Styles */
+
+.muka-typing-indicator {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  padding: var(--spacing-2) var(--spacing-3);
+}
+
+.muka-typing-indicator__dot {
+  display: inline-block;
+  border-radius: 50%;
+  background-color: var(--color-text-subtle-default);
+  animation: muka-typing-bounce 1.2s ease-in-out infinite;
+}
+
+.muka-typing-indicator--sm .muka-typing-indicator__dot {
+  width: 4px;
+  height: 4px;
+}
+
+.muka-typing-indicator--md .muka-typing-indicator__dot {
+  width: 6px;
+  height: 6px;
+}
+
+.muka-typing-indicator__dot:nth-child(1) {
+  animation-delay: 0s;
+}
+.muka-typing-indicator__dot:nth-child(2) {
+  animation-delay: 0.16s;
+}
+.muka-typing-indicator__dot:nth-child(3) {
+  animation-delay: 0.32s;
+}
+
+@keyframes muka-typing-bounce {
+  0%, 80%, 100% {
+    transform: translateY(0);
+    opacity: 0.4;
+  }
+  40% {
+    transform: translateY(-3px);
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .muka-typing-indicator__dot {
+    animation: muka-typing-fade 1.4s ease-in-out infinite;
+    transform: none !important;
+  }
+  @keyframes muka-typing-fade {
+    0%, 100% { opacity: 0.4; }
+    50% { opacity: 1; }
+  }
+}
+
+.muka-typing-indicator__sr-label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

package/dist/cjs/components/TypingIndicator/TypingIndicator.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TypingIndicator = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+require("./TypingIndicator.css");
+/**
+ * TypingIndicator — animated three-dot indicator shown while an agent or peer
+ * is composing a message.
+ *
+ * Designed to sit inline in a `ChatMessageList`, typically replacing the
+ * placeholder agent bubble until the first token arrives. Respects
+ * `prefers-reduced-motion`.
+ */
+const TypingIndicator = ({ label = 'AI is typing', size = 'md', className = '', }) => {
+    const classes = [
+        'muka-typing-indicator',
+        `muka-typing-indicator--${size}`,
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return ((0, jsx_runtime_1.jsxs)("span", { className: classes, role: "status", "aria-live": "polite", children: [(0, jsx_runtime_1.jsx)("span", { className: "muka-typing-indicator__dot", "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("span", { className: "muka-typing-indicator__dot", "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("span", { className: "muka-typing-indicator__dot", "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("span", { className: "muka-typing-indicator__sr-label", children: label })] }));
+};
+exports.TypingIndicator = TypingIndicator;
+exports.default = exports.TypingIndicator;
+//# sourceMappingURL=TypingIndicator.js.map

package/dist/cjs/components/TypingIndicator/TypingIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TypingIndicator.js","sourceRoot":"","sources":["../../../../components/TypingIndicator/TypingIndicator.tsx"],"names":[],"mappings":";;;;AACA,iCAA+B;AAgB/B;;;;;;;GAOG;AACI,MAAM,eAAe,GAAmC,CAAC,EAC9D,KAAK,GAAG,cAAc,EACtB,IAAI,GAAG,IAAI,EACX,SAAS,GAAG,EAAE,GACf,EAAE,EAAE;IACH,MAAM,OAAO,GAAG;QACd,uBAAuB;QACvB,0BAA0B,IAAI,EAAE;QAChC,SAAS;KACV;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,OAAO,CACL,kCAAM,SAAS,EAAE,OAAO,EAAE,IAAI,EAAC,QAAQ,eAAW,QAAQ,aACxD,iCAAM,SAAS,EAAC,4BAA4B,iBAAa,MAAM,GAAG,EAClE,iCAAM,SAAS,EAAC,4BAA4B,iBAAa,MAAM,GAAG,EAClE,iCAAM,SAAS,EAAC,4BAA4B,iBAAa,MAAM,GAAG,EAClE,iCAAM,SAAS,EAAC,iCAAiC,YAAE,KAAK,GAAQ,IAC3D,CACR,CAAC;AACJ,CAAC,CAAC;AArBW,QAAA,eAAe,mBAqB1B;AAEF,kBAAe,uBAAe,CAAC"}

package/dist/cjs/components/TypingIndicator/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TypingIndicator = void 0;
+var TypingIndicator_1 = require("./TypingIndicator");
+Object.defineProperty(exports, "TypingIndicator", { enumerable: true, get: function () { return TypingIndicator_1.TypingIndicator; } });
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/TypingIndicator/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/TypingIndicator/index.ts"],"names":[],"mappings":";;;AAAA,qDAA+E;AAAtE,kHAAA,eAAe,OAAA"}

package/dist/cjs/components/View/View.css

@@ -0,0 +1,96 @@
+/* View Component Styles */
+
+/* ─── Base layout ─────────────────────────────────────── */
+
+.muka-view {
+  display: flex;
+  flex-direction: column;
+  height: 100dvh;
+  background-color: var(--view-color-background);
+  position: relative;
+  isolation: isolate;
+  box-sizing: border-box;
+
+  /* Width reserved for the footer nav once it becomes a left sidebar at the
+     large tier (matches BottomBar's desktopAs="sidebar" rail width). */
+  --view-sidebar-width: 240px;
+}
+
+/* ─── Surface level variants ─────────────────────────── */
+
+.muka-view--surface-3 {
+  background-color: var(--color-surface-level3);
+}
+
+/* ─── Large screens: make room for the left sidebar ──────────
+   A footer nav with desktopAs="sidebar" becomes a fixed 240px left rail at
+   ≥1024px. Offset the shell so the TopBar/body clear it — tied to the sidebar's
+   actual presence (the `.muka-bottombar--desktop-sidebar` element) rather than
+   the View's `size`, so a forced `size="lg"` below 1024px never reserves space
+   for a sidebar that hasn't rendered yet. */
+@media (min-width: 1024px) {
+  .muka-view:has(.muka-bottombar--desktop-sidebar) {
+    padding-left: var(--view-sidebar-width);
+  }
+}
+
+/* ─── TopBar elevation ────────────────────────────────── */
+
+.muka-view .muka-topbar {
+  flex-shrink: 0;
+  z-index: 3;
+  box-shadow: var(--shadow-level2);
+}
+
+/* ─── Scrollable body ─────────────────────────────────── */
+
+.muka-view__body {
+  flex: 1 1 0%;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: clip;
+  z-index: 1;
+}
+
+/* Inner wrapper constrains content width at the large tier (enterprise desktop)
+   using the alias-layer section/container tokens, while the body scrolls full
+   width. Full-bleed below large. */
+.muka-view__body-inner {
+  width: 100%;
+}
+
+@media (min-width: 1024px) {
+  .muka-view:not([data-size]) .muka-view__body-inner {
+    max-width: var(--container-max-width-xl);
+    margin-inline: auto;
+    padding-inline: var(--section-padding-horizontal-default);
+  }
+}
+
+.muka-view[data-size='lg'] .muka-view__body-inner {
+  max-width: var(--container-max-width-xl);
+  margin-inline: auto;
+  padding-inline: var(--section-padding-horizontal-default);
+}
+
+/* ─── Footer (e.g. BottomBar) ─────────────────────────── */
+
+.muka-view__footer {
+  flex-shrink: 0;
+  z-index: 2;
+}
+
+/* Inside an AppShell, the persistent left rail replaces the per-view bottom
+   navigation at the large tier, so hide a footer that holds a navigation bar.
+   Scoped to `.muka-app-shell` so bare Views (and the standalone
+   desktopAs="sidebar" footer pattern above) are unaffected. Action-bar footers
+   (`.muka-bottombar--actions`) don't match and remain at the bottom. */
+@media (min-width: 1024px) {
+  .muka-app-shell .muka-view__footer:has(.muka-bottombar--navigation) {
+    display: none;
+  }
+}
+
+.muka-app-shell[data-size='lg'] .muka-view__footer:has(.muka-bottombar--navigation) {
+  display: none;
+}

package/dist/cjs/components/View/View.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.View = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const TopBar_1 = require("../TopBar");
+require("./View.css");
+/**
+ * View Component
+ *
+ * A full-screen layout shell for top-level and sub-level views.
+ * Composes TopBar + scrollable body + optional footer.
+ *
+ * - `level="top"`: App home screen. No back button, footer slot for BottomBar navigation.
+ * - `level="sub"`: Deeper view. Leading slot for back button, no footer by default.
+ *
+ * @accessibility
+ * - Uses `<main>` landmark for the scrollable body
+ * - TopBar provides semantic `<header>` structure
+ */
+const View = ({ level, title, leading, trailing, trailingSecondary, controlBar, breadcrumb, surfaceLevel = 2, size, footer, children, className = '', }) => {
+    const viewClasses = [
+        'muka-view',
+        `muka-view--${level}`,
+        `muka-view--surface-${surfaceLevel}`,
+        className,
+    ].filter(Boolean).join(' ');
+    return ((0, jsx_runtime_1.jsxs)("div", { className: viewClasses, "data-size": size, children: [(0, jsx_runtime_1.jsx)(TopBar_1.TopBar, { title: title, leading: leading, trailing: trailing, trailingSecondary: trailingSecondary, controlBar: controlBar, breadcrumb: breadcrumb, size: size }), (0, jsx_runtime_1.jsx)("main", { className: "muka-view__body", children: (0, jsx_runtime_1.jsx)("div", { className: "muka-view__body-inner", children: children }) }), footer && ((0, jsx_runtime_1.jsx)("div", { className: "muka-view__footer", children: footer }))] }));
+};
+exports.View = View;
+exports.default = exports.View;
+//# sourceMappingURL=View.js.map

package/dist/cjs/components/View/View.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"View.js","sourceRoot":"","sources":["../../../../components/View/View.tsx"],"names":[],"mappings":";;;;AACA,sCAAmC;AACnC,sBAAoB;AAiDpB;;;;;;;;;;;;GAYG;AACI,MAAM,IAAI,GAAwB,CAAC,EACxC,KAAK,EACL,KAAK,EACL,OAAO,EACP,QAAQ,EACR,iBAAiB,EACjB,UAAU,EACV,UAAU,EACV,YAAY,GAAG,CAAC,EAChB,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,SAAS,GAAG,EAAE,GACf,EAAE,EAAE;IACH,MAAM,WAAW,GAAG;QAClB,WAAW;QACX,cAAc,KAAK,EAAE;QACrB,sBAAsB,YAAY,EAAE;QACpC,SAAS;KACV,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,OAAO,CACL,iCAAK,SAAS,EAAE,WAAW,eAAa,IAAI,aAC1C,uBAAC,eAAM,IACL,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,iBAAiB,EAAE,iBAAiB,EACpC,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,IAAI,GACV,EAEF,iCAAM,SAAS,EAAC,iBAAiB,YAC/B,gCAAK,SAAS,EAAC,uBAAuB,YACnC,QAAQ,GACL,GACD,EAEN,MAAM,IAAI,CACT,gCAAK,SAAS,EAAC,mBAAmB,YAC/B,MAAM,GACH,CACP,IACG,CACP,CAAC;AACJ,CAAC,CAAC;AA9CW,QAAA,IAAI,QA8Cf;AAEF,kBAAe,YAAI,CAAC"}

package/dist/cjs/components/View/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.View = void 0;
+var View_1 = require("./View");
+Object.defineProperty(exports, "View", { enumerable: true, get: function () { return View_1.View; } });
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/View/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/View/index.ts"],"names":[],"mappings":";;;AAAA,+BAA8C;AAArC,4FAAA,IAAI,OAAA"}