@nonoun/native-app 0.2.0 → 0.2.2

package/dist/{nui-app.css → native-app.css}

@@ -1,14 +1,21 @@
 @layer ui {
 
+  :where(n-sidebar):not(:defined),
+  :where(n-sidebar-item):not(:defined),
+  :where(n-sidebar-nav):not(:defined),
+  :where(n-sidebar-group):not(:defined),
+  :where(n-sidebar-group-header):not(:defined),
+  :where(n-sidebar-nav-item):not(:defined) { visibility: hidden; }
+
   /* ╭──────────────────────────────────────────────────────────╮
-     │  nui-sidebar                                             │
+     │  n-sidebar                                             │
      │  Full-page layout: collapsible/resizable sidebar aside   │
      │  + content column (breadcrumb, canvas, body, chat).      │
      ╰──────────────────────────────────────────────────────────╯ */
 
   /* ── Outer Layout ── */
 
-  :where(nui-sidebar) {
+  :where(n-sidebar) {
     display: flex;
     height: 100dvh;
   }
@@ -16,15 +23,15 @@
   /* WHY: Reserve sidebar width before JS builds the DOM — prevents layout shift.
      Collapsed state is read synchronously in the constructor so CSS matches immediately.
      Replaced by the real aside once [data-ready] is set. */
-  :where(nui-sidebar):not([data-ready]):not([collapsed])::before {
+  :where(n-sidebar):not([data-ready]):not([collapsed])::before {
     content: '';
-    width: var(--ui-layout-sidebar-width);
+    width: var(--n-sidebar-width);
     flex-shrink: 0;
     background: var(--n-body);
     border-right: 1px solid var(--n-border-muted);
   }
 
-  :where(nui-sidebar):not([data-ready])[collapsed]::before {
+  :where(n-sidebar):not([data-ready])[collapsed]::before {
     content: '';
     width: 48px;
     flex-shrink: 0;
@@ -35,7 +42,7 @@
   /* ── Content Column ── */
   /* WHY: Everything except the aside forms a flex column. */
 
-  :where(nui-sidebar) > :where(:not([slot])) {
+  :where(n-sidebar) > :where(:not([slot])) {
     flex: 1 1 0%;
     min-width: 0;
     min-height: 0;
@@ -49,7 +56,7 @@
      header/footer overlays. Content fills the full height and scrolls
      underneath the pinned header/footer. */
 
-  :where(nui-sidebar) > :where([slot="sidebar"]) {
+  :where(n-sidebar) > :where([slot="sidebar"]) {
     --n-sidebar-header-height: 0px;
     --n-sidebar-footer-height: 0px;
 
@@ -57,7 +64,7 @@
     container-type: inline-size;
     position: sticky;
     top: 0;
-    width: var(--ui-layout-sidebar-width);
+    width: var(--n-sidebar-width);
     min-width: 160px;
     max-width: 400px;
     height: 100dvh;
@@ -68,7 +75,7 @@
   }
 
   /* WHY: Disable width transition while dragging — it fights the pointer. */
-  :where(nui-sidebar) > :where([slot="sidebar"][resizing]) {
+  :where(n-sidebar) > :where([slot="sidebar"][resizing]) {
     transition: none;
   }
 
@@ -77,14 +84,14 @@
      [collapsed] drives the aside to 48px which triggers @container sidebar queries
      in this file and in child component CSS. */
 
-  :where(nui-sidebar)[collapsed] > :where([slot="sidebar"]) {
+  :where(n-sidebar)[collapsed] > :where([slot="sidebar"]) {
     width: 48px;
     min-width: 48px;
   }
 
   /* ── Resize Handle ── */
 
-  :where(nui-sidebar) :where(.layout-resize-handle) {
+  :where(n-sidebar) :where(.layout-resize-handle) {
     position: absolute;
     top: 0;
     right: 0;
@@ -94,18 +101,18 @@
     z-index: 1;
   }
 
-  :where(nui-sidebar) :where(.layout-resize-handle):hover,
-  :where(nui-sidebar) > :where([slot="sidebar"][resizing]) :where(.layout-resize-handle) {
+  :where(n-sidebar) :where(.layout-resize-handle):hover,
+  :where(n-sidebar) > :where([slot="sidebar"][resizing]) :where(.layout-resize-handle) {
     background: var(--n-border-muted);
   }
 
   /* WHY: When collapsed to icon rail, the sidebar edge meets content — drop left padding. */
 
-  :where(nui-sidebar)[collapsed] :where(nui-app-canvas) {
+  :where(n-sidebar)[collapsed] :where(n-app-canvas) {
     padding-inline-start: 0;
   }
 
-  :where(nui-sidebar)[collapsed] :where(nui-app-breadcrumb) {
+  :where(n-sidebar)[collapsed] :where(n-app-breadcrumb) {
     padding-inline-start: 0;
   }
 
@@ -113,7 +120,7 @@
   /* WHY: Absolute-positioned overlay pinned to top of aside. Content scrolls
      underneath it. z-index: 2 sits above content (z-index: 0). */
 
-  :where(nui-sidebar-header) {
+  :where(n-sidebar-header) {
     position: absolute;
     top: 0;
     left: 0;
@@ -128,7 +135,7 @@
      content from starting behind header / ending behind footer.
      Fade-out alpha mask dissolves content edges under the overlays. */
 
-  :where(nui-sidebar-content) {
+  :where(n-sidebar-content) {
     display: flex;
     flex-direction: column;
     padding-block-start: var(--n-sidebar-header-height);
@@ -142,7 +149,7 @@
   /* WHY: When header is present, fade top edge. Content dissolves as it
      scrolls under the header — transparent at top, fully visible by 1.25×
      the header height. No opaque header background needed. */
-  :where(nui-sidebar-content)[data-has-header] {
+  :where(n-sidebar-content)[data-has-header] {
     mask-image: linear-gradient(
       to bottom,
       transparent 0,
@@ -152,7 +159,7 @@
   }
 
   /* WHY: When footer is present, fade bottom edge. */
-  :where(nui-sidebar-content)[data-has-footer] {
+  :where(n-sidebar-content)[data-has-footer] {
     mask-image: linear-gradient(
       to bottom,
       black 0,
@@ -162,7 +169,7 @@
   }
 
   /* WHY: When both header AND footer are present, fade both edges. */
-  :where(nui-sidebar-content)[data-has-header][data-has-footer] {
+  :where(n-sidebar-content)[data-has-header][data-has-footer] {
     mask-image: linear-gradient(
       to bottom,
       transparent 0,
@@ -175,7 +182,7 @@
   /* ── Sidebar Footer ── */
   /* WHY: Absolute-positioned overlay pinned to bottom of aside. */
 
-  :where(nui-sidebar-footer) {
+  :where(n-sidebar-footer) {
     position: absolute;
     bottom: 0;
     left: 0;
@@ -187,10 +194,10 @@
 
   /* ── Sidebar Item ── */
   /* WHY: Universal sidebar row element. Provides inline padding for any content
-     (buttons, links, icons). When a child ui-listbox[popover] is present, JS
+     (buttons, links, icons). When a child n-listbox[popover] is present, JS
      wires PopoverController for click-to-toggle menu behavior. */
 
-  :where(nui-sidebar-item) {
+  :where(n-sidebar-item) {
     display: flex;
     align-items: center;
     flex: 1;
@@ -198,9 +205,9 @@
     gap: calc(var(--n-space) * 2);
     min-height: var(--n-size);
     font-size: var(--n-font-size);
-    font-weight: var(--ui-font-weight-button);
+    font-weight: var(--n-button-font-weight);
     letter-spacing: var(--n-letter-spacing);
-    line-height: var(--ui-line-height-control);
+    line-height: var(--n-control-line-height);
     color: var(--n-ink);
     cursor: pointer;
     user-select: none;
@@ -214,26 +221,26 @@
 
   /* WHY: Items in header/footer match the breadcrumb bar height so the
      first sidebar row aligns horizontally with the breadcrumb. */
-  :where(nui-sidebar-header) > :where(nui-sidebar-item),
-  :where(nui-sidebar-footer) > :where(nui-sidebar-item) {
-    min-height: var(--ui-layout-bar-height);
+  :where(n-sidebar-header) > :where(n-sidebar-item),
+  :where(n-sidebar-footer) > :where(n-sidebar-item) {
+    min-height: var(--n-sidebar-item-height);
   }
 
-  :where(nui-sidebar-item):hover,
-  :where(nui-sidebar-item)[force-hover] {
+  :where(n-sidebar-item):hover,
+  :where(n-sidebar-item)[force-hover] {
     color: var(--n-ink-strong);
   }
 
-  :where(nui-sidebar-item):focus-visible,
-  :where(nui-sidebar-item)[force-focus-visible] {
-    outline: 2px solid var(--ui-focus-ring);
+  :where(n-sidebar-item):focus-visible,
+  :where(n-sidebar-item)[force-focus-visible] {
+    outline: 2px solid var(--n-focus-ring);
     outline-offset: -2px;
   }
 
   /* WHY: Fixed-size icon well so all sidebar icons center-align on the same
      column width regardless of intrinsic icon size. 1.5rem matches the sidebar's
      visual rhythm at default density. */
-  :where(nui-sidebar-item) > :where([slot="icon"]) {
+  :where(n-sidebar-item) > :where([slot="icon"]) {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -243,21 +250,21 @@
   }
 
   /* WHY: Trailing caret pushes to end — same pattern as button justify="spread". */
-  :where(nui-sidebar-item) > :where([slot="trailing"]) {
+  :where(n-sidebar-item) > :where([slot="trailing"]) {
     margin-inline-start: auto;
     flex-shrink: 0;
     color: var(--n-ink-muted);
   }
 
-  /* WHY: When the item wraps a sub-component (e.g. ui-button) that provides
+  /* WHY: When the item wraps a sub-component (e.g. n-button) that provides
      its own icon, hide [slot="icon"] in expanded mode — it only serves as the
      bare collapsed-rail representation. */
-  :where(nui-sidebar-item:has(> ui-button)) > :where([slot="icon"]) {
+  :where(n-sidebar-item:has(> n-button)) > :where([slot="icon"]) {
     display: none;
   }
 
   /* WHY: Title text truncates when sidebar narrows during resize. */
-  :where(nui-sidebar-item) > :where([slot="label"]) {
+  :where(n-sidebar-item) > :where([slot="label"]) {
     flex: 1;
     min-width: 0;
     white-space: nowrap;
@@ -270,18 +277,18 @@
      Default: top-aligned, grows downward (span-block-end).
      Flip: bottom-aligned, grows upward (span-block-start). */
 
-  :where(nui-sidebar-item) > :where(ui-listbox[popover]) {
+  :where(n-sidebar-item) > :where(n-listbox[popover]) {
     --n-popover-origin: left center;
     --n-popover-from: perspective(800px) scale(0.96) rotateY(20deg);
 
     position: fixed;
     position-area: inline-end span-block-end;
     position-try-fallbacks: --sidebar-item-flip-up;
-    margin-block: var(--ui-popover-viewport-margin);
+    margin-block: var(--n-popover-viewport-margin);
     margin-inline: 0;
-    margin-inline-start: var(--ui-popover-gap);
+    margin-inline-start: var(--n-popover-gap);
     min-width: 200px;
-    max-height: var(--ui-popover-max-height);
+    max-height: var(--n-popover-max-height);
     overflow-y: auto;
   }
 
@@ -307,33 +314,33 @@
     }
 
     /* Header/footer — center content horizontally */
-    :where(nui-sidebar-header),
-    :where(nui-sidebar-footer) {
+    :where(n-sidebar-header),
+    :where(n-sidebar-footer) {
       align-items: center;
     }
 
     /* Content — center items in the 48px rail */
-    :where(nui-sidebar-content) {
+    :where(n-sidebar-content) {
       align-items: center;
     }
 
     /* Item — shrink to icon-only. */
-    :where(nui-sidebar-item) {
+    :where(n-sidebar-item) {
       flex: 0 0 auto;
       padding-inline: var(--n-space);
     }
 
-    :where(nui-sidebar-item) > :where([slot="icon"]) {
+    :where(n-sidebar-item) > :where([slot="icon"]) {
       display: inline-flex;
     }
 
-    :where(nui-sidebar-item) > :where(:not([slot="icon"]):not(ui-listbox[popover]):not(.nav-group-flyout)) {
+    :where(n-sidebar-item) > :where(:not([slot="icon"]):not(n-listbox[popover]):not(.nav-group-flyout)) {
       display: none;
     }
 
     /* WHY: In collapsed mode the sidebar item is a small icon — centering
        the popover vertically with the anchor is more natural than top-aligning. */
-    :where(nui-sidebar-item) > :where(ui-listbox[popover]) {
+    :where(n-sidebar-item) > :where(n-listbox[popover]) {
       position-area: inline-end;
       position-try-fallbacks: --sidebar-item-flip-up, --sidebar-item-flip-down;
     }
@@ -341,30 +348,36 @@
 
 
   /* ╭──────────────────────────────────────────────────────────╮
-     │  nui-sidebar-nav                                         │
+     │  n-sidebar-nav                                         │
      │  Navigation list with keyboard nav + selection.          │
      │  Transparent wrapper — no visual surface.                │
-     │  Uses nui-sidebar-nav-item / nui-sidebar-group.          │
+     │  Uses n-sidebar-nav-item / n-sidebar-group.          │
      ╰──────────────────────────────────────────────────────────╯ */
 
-  /* WHY: nui-sidebar-nav is a transparent flex wrapper — no inline padding.
+  /* WHY: n-sidebar-nav is a transparent flex wrapper — no inline padding.
      Inline padding is owned by leaf items (nav-item, summary).
      Block padding is owned by nav-group margins. */
-  :where(nui-sidebar-nav) {
+  :where(n-sidebar-nav) {
     display: flex;
     flex-direction: column;
     gap: 0;
     padding: 0;
     outline: none;
+    user-select: none;
+  }
+
+  :where(n-sidebar-nav)[aria-disabled="true"] {
+    color: var(--n-ink-disabled);
+    pointer-events: none;
   }
 
   /* ── Nav Item ── */
   /* WHY: Nav items share the same visual pattern as options (ghost row,
      hover/active/selected states). */
 
-  :where(nui-sidebar-nav-item) {
-    --n-font-weight: var(--ui-font-weight-text);
-    --n-line-height: var(--ui-line-height-control);
+  :where(n-sidebar-nav-item) {
+    --n-font-weight: var(--n-text-font-weight);
+    --n-line-height: var(--n-control-line-height-dense);
 
     display: flex;
     align-items: center;
@@ -392,55 +405,56 @@
 
   /* ── Nav Item States ── */
 
-  :where(nui-sidebar-nav-item):hover,
-  :where(nui-sidebar-nav-item)[force-hover] {
+  :where(n-sidebar-nav-item):hover,
+  :where(n-sidebar-nav-item)[force-hover] {
     color: var(--n-ink-hover);
   }
 
-  :where(nui-sidebar-nav-item):active,
-  :where(nui-sidebar-nav-item)[force-active] {
+  :where(n-sidebar-nav-item):active,
+  :where(n-sidebar-nav-item)[force-active] {
     color: var(--n-ink-active);
   }
 
-  :where(nui-sidebar-nav-item)[aria-current="page"] {
+  :where(n-sidebar-nav-item)[aria-current="page"] {
     color: var(--n-ink-strong);
   }
 
-  :where(nui-sidebar-nav-item)[aria-disabled="true"] {
+  :where(n-sidebar-nav-item)[aria-disabled="true"] {
     color: var(--n-ink-disabled);
     cursor: not-allowed;
     pointer-events: none;
   }
 
-  :where(nui-sidebar-nav-item):focus-visible,
-  :where(nui-sidebar-nav-item)[force-focus-visible] {
-    outline: 2px solid var(--ui-focus-ring);
+  :where(n-sidebar-nav-item):focus-visible,
+  :where(n-sidebar-nav-item)[force-focus-visible] {
+    outline: 2px solid var(--n-focus-ring);
     outline-offset: -2px;
   }
 
   /* ── Nav Group ── */
   /* WHY: Groups stamp a native <details>/<summary> for collapsible behavior.
-     DOM structure: nui-sidebar-group > details > summary > nui-sidebar-group-header
-                                                          > nui-sidebar-nav-item* */
+     DOM structure: n-sidebar-group > details > summary > n-sidebar-group-header
+                                                          > n-sidebar-nav-item* */
 
-  :where(nui-sidebar-group) {
+  :where(n-sidebar-group) {
     --n-indicator-index: 0;
 
     display: block;
     position: relative;
+    user-select: none;
   }
 
-  :where(nui-sidebar-group) + :where(nui-sidebar-group) {
+  :where(n-sidebar-group) + :where(n-sidebar-group) {
     margin-block-start: calc(var(--n-space) * 2);
   }
 
   /* ── Details (native disclosure with animated open/close) ── */
 
-  :where(nui-sidebar-group) > :where(details) {
+  :where(n-sidebar-group) > :where(details) {
     interpolate-size: allow-keywords;
   }
 
-  :where(nui-sidebar-group) > :where(details)::details-content {
+  :where(n-sidebar-group) > :where(details)::details-content {
     height: 0;
     overflow: clip;
     opacity: 0;
@@ -451,14 +465,14 @@
       content-visibility var(--n-duration) var(--n-easing) allow-discrete;
   }
 
-  :where(nui-sidebar-group) > :where(details[open])::details-content {
+  :where(n-sidebar-group) > :where(details[open])::details-content {
     height: auto;
     opacity: 1;
   }
 
   /* ── Summary (clickable header row) ── */
 
-  :where(nui-sidebar-group) > :where(details) > :where(summary) {
+  :where(n-sidebar-group) > :where(details) > :where(summary) {
     display: flex;
     align-items: center;
     gap: calc(var(--n-space) * 2);
@@ -470,11 +484,11 @@
   }
 
   /* WHY: Remove default marker in WebKit */
-  :where(nui-sidebar-group) > :where(details) > :where(summary)::-webkit-details-marker {
+  :where(n-sidebar-group) > :where(details) > :where(summary)::-webkit-details-marker {
     display: none;
   }
 
-  :where(nui-sidebar-group) > :where(details) > :where(summary)::marker {
+  :where(n-sidebar-group) > :where(details) > :where(summary)::marker {
     display: none;
     content: '';
   }
@@ -482,25 +496,25 @@
   /* ── Nav Group Header ── */
   /* WHY: Header sits inside <summary>. Bold text with optional icon. */
 
-  :where(nui-sidebar-group-header) {
+  :where(n-sidebar-group-header) {
     display: flex;
     align-items: center;
     flex: 1;
     gap: calc(var(--n-space) * 2);
     min-height: var(--n-size);
     font-size: var(--n-font-size);
-    font-weight: var(--ui-font-weight-button);
+    font-weight: var(--n-button-font-weight);
     letter-spacing: var(--n-letter-spacing);
-    line-height: var(--ui-line-height-control);
+    line-height: var(--n-control-line-height);
     color: var(--n-ink);
     cursor: pointer;
     user-select: none;
   }
 
-  /* WHY: Fixed-size icon well — matches nui-sidebar-item [slot="icon"].
+  /* WHY: Fixed-size icon well — matches n-sidebar-item [slot="icon"].
      All sidebar icons align on the same 1.5rem column regardless of icon size.
-     JS wraps the first <ui-icon> child in a .icon-well span during setup(). */
-  :where(nui-sidebar-group-header) > :where(.icon-well) {
+     JS wraps the first <n-icon> child in a .icon-well span during setup(). */
+  :where(n-sidebar-group-header) > :where(.icon-well) {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -511,7 +525,7 @@
 
   /* ── Chevron icon (right side of summary) ── */
 
-  :where(nui-sidebar-group) > :where(details) > :where(summary)::after {
+  :where(n-sidebar-group) > :where(details) > :where(summary)::after {
     content: '';
     flex-shrink: 0;
     width: var(--n-icon-size);
@@ -533,41 +547,41 @@
   }
 
   /* Chevron rotates when open */
-  :where(nui-sidebar-group) > :where(details[open]) > :where(summary)::after {
+  :where(n-sidebar-group) > :where(details[open]) > :where(summary)::after {
     transform: rotate(180deg);
   }
 
   /* ── Selected group — has a child with aria-current ── */
 
-  :where(nui-sidebar-group):state(has-selection) > :where(details) > :where(summary) :where(nui-sidebar-group-header) {
+  :where(n-sidebar-group):state(has-selection) > :where(details) > :where(summary) :where(n-sidebar-group-header) {
     color: var(--n-ink-strong);
   }
 
   /* ── Summary Hover ── */
 
-  :where(nui-sidebar-group) > :where(details) > :where(summary):hover :where(nui-sidebar-group-header),
-  :where(nui-sidebar-group[force-hover]) > :where(details) > :where(summary) :where(nui-sidebar-group-header) {
+  :where(n-sidebar-group) > :where(details) > :where(summary):hover :where(n-sidebar-group-header),
+  :where(n-sidebar-group[force-hover]) > :where(details) > :where(summary) :where(n-sidebar-group-header) {
     color: var(--n-ink-strong);
   }
 
   /* ── Summary Focus ── */
 
-  :where(nui-sidebar-group) > :where(details) > :where(summary):focus-visible,
-  :where(nui-sidebar-group[force-focus-visible]) > :where(details) > :where(summary) {
-    outline: 2px solid var(--ui-focus-ring);
+  :where(n-sidebar-group) > :where(details) > :where(summary):focus-visible,
+  :where(n-sidebar-group[force-focus-visible]) > :where(details) > :where(summary) {
+    outline: 2px solid var(--n-focus-ring);
     outline-offset: -2px;
   }
 
   /* ── Vertical connector line (icon groups only) ── */
 
-  :where(nui-sidebar-group):has(:where(nui-sidebar-group-header) :where(.icon-well)) {
+  :where(n-sidebar-group):has(:where(n-sidebar-group-header) :where(.icon-well)) {
     --n-group-pad: calc(var(--n-space-k) * var(--n-space));
     --n-group-icon-well: 1.5rem;
     --n-group-line-inset: calc(var(--n-group-pad) + var(--n-group-icon-well) / 2);
     --n-group-child-inset: calc(var(--n-group-icon-well) + var(--n-space) * 2);
   }
 
-  :where(nui-sidebar-group):has(:where(nui-sidebar-group-header) :where(.icon-well)):has(:where(details[open]))::after {
+  :where(n-sidebar-group):has(:where(n-sidebar-group-header) :where(.icon-well)):has(:where(details[open]))::after {
     content: '';
     position: absolute;
     inset-inline-start: var(--n-group-line-inset);
@@ -580,7 +594,7 @@
 
   /* ── Sliding indicator ── */
 
-  :where(nui-sidebar-group):has(:where(nui-sidebar-group-header) :where(.icon-well)):has(:where(details[open])):state(has-selection)::before {
+  :where(n-sidebar-group):has(:where(n-sidebar-group-header) :where(.icon-well)):has(:where(details[open])):state(has-selection)::before {
     content: '';
     position: absolute;
     z-index: 1;
@@ -600,24 +614,24 @@
 
   /* ── Grouped Child Items ── */
 
-  :where(nui-sidebar-group) > :where(details) > :where(nui-sidebar-nav-item) {
+  :where(n-sidebar-group) > :where(details) > :where(n-sidebar-nav-item) {
     margin-inline-start: var(--n-group-child-inset, 0);
   }
 
   /* ── Nav Group Flyout (collapsed sidebar) ── */
 
-  :where(nui-sidebar-group) > :where(ui-listbox.nav-group-flyout[popover]) {
+  :where(n-sidebar-group) > :where(n-listbox.nav-group-flyout[popover]) {
     --n-popover-origin: left center;
     --n-popover-from: perspective(800px) scale(0.96) rotateY(20deg);
 
     position: fixed;
     position-area: inline-end span-block-end;
     position-try-fallbacks: --nav-flyout-flip-up;
-    margin-block: var(--ui-popover-viewport-margin);
+    margin-block: var(--n-popover-viewport-margin);
     margin-inline: 0;
-    margin-inline-start: var(--ui-popover-gap);
+    margin-inline-start: var(--n-popover-gap);
     min-width: 200px;
-    max-height: var(--ui-popover-max-height);
+    max-height: var(--n-popover-max-height);
     overflow-y: auto;
   }
 
@@ -634,47 +648,47 @@
   @container sidebar (max-width: 80px) {
 
     /* Nav items hide entirely — only group headers (with icons) remain. */
-    :where(nui-sidebar-nav-item) {
+    :where(n-sidebar-nav-item) {
       display: none;
     }
 
     /* Summary shrinks to icon-only. */
-    :where(nui-sidebar-group) > :where(details) > :where(summary) {
+    :where(n-sidebar-group) > :where(details) > :where(summary) {
       padding-inline: var(--n-space);
       border-radius: var(--n-radius);
     }
 
     /* Hide chevron — no expand/collapse in icon rail (flyout instead). */
-    :where(nui-sidebar-group) > :where(details) > :where(summary)::after {
+    :where(n-sidebar-group) > :where(details) > :where(summary)::after {
       display: none;
     }
 
     /* Hide vertical connector line and sliding indicator. */
-    :where(nui-sidebar-group)::after,
-    :where(nui-sidebar-group)::before {
+    :where(n-sidebar-group)::after,
+    :where(n-sidebar-group)::before {
       display: none;
     }
 
     /* Header collapses to icon-only. */
-    :where(nui-sidebar-group-header) {
+    :where(n-sidebar-group-header) {
       flex: 0 0 auto;
       font-size: 0;
       gap: 0;
     }
 
-    :where(nui-sidebar-group-header) :where(.icon-well) :where(ui-icon) {
+    :where(n-sidebar-group-header) :where(.icon-well) :where(n-icon) {
       font-size: var(--n-font-size, 1rem);
     }
 
     /* WHY: In collapsed mode the group is a small icon — centering
        the flyout vertically with the anchor is more natural. */
-    :where(nui-sidebar-group) > :where(ui-listbox.nav-group-flyout[popover]) {
+    :where(n-sidebar-group) > :where(n-listbox.nav-group-flyout[popover]) {
       position-area: inline-end;
       position-try-fallbacks: --nav-flyout-flip-up, --nav-flyout-flip-down;
     }
 
     /* Collapse inter-group spacing in icon rail. */
-    :where(nui-sidebar-group) + :where(nui-sidebar-group) {
+    :where(n-sidebar-group) + :where(n-sidebar-group) {
       margin-block-start: 0;
     }
   }
@@ -684,18 +698,18 @@
 @layer ui {
 
   /* ╭──────────────────────────────────────────────────────────╮
-     │  nui-app-breadcrumb                                      │
+     │  n-app-breadcrumb                                      │
      │  Grid bar with leading / label / trailing slots.         │
-     │  Same slot pattern as ui-header.                         │
+     │  Same slot pattern as n-card-header.                        │
      ╰──────────────────────────────────────────────────────────╯ */
 
   /* ── Base ── */
 
-  :where(nui-app-breadcrumb) {
+  :where(n-app-breadcrumb) {
     display: grid;
     grid-template-columns: 1fr;
     align-items: center;
-    min-height: var(--ui-layout-bar-height);
+    min-height: var(--n-sidebar-item-height);
     gap: calc(var(--n-space) * 2);
     padding-block: var(--n-space);
     padding-inline: calc(var(--n-space-k) * var(--n-space));
@@ -705,30 +719,30 @@
 
   /* ── Slots ── */
 
-  :where(nui-app-breadcrumb):has(> [slot="leading"]):has(> [slot="trailing"]) {
+  :where(n-app-breadcrumb):has(> [slot="leading"]):has(> [slot="trailing"]) {
     grid-template-columns: auto 1fr auto;
   }
 
-  :where(nui-app-breadcrumb):has(> [slot="leading"]):not(:has(> [slot="trailing"])) {
+  :where(n-app-breadcrumb):has(> [slot="leading"]):not(:has(> [slot="trailing"])) {
     grid-template-columns: auto 1fr;
   }
 
-  :where(nui-app-breadcrumb):not(:has(> [slot="leading"])):has(> [slot="trailing"]) {
+  :where(n-app-breadcrumb):not(:has(> [slot="leading"])):has(> [slot="trailing"]) {
     grid-template-columns: 1fr auto;
   }
 
-  :where(nui-app-breadcrumb) > :where([slot="leading"]) {
+  :where(n-app-breadcrumb) > :where([slot="leading"]) {
     display: flex;
     align-items: center;
     gap: calc(var(--n-space) * 2);
   }
 
-  :where(nui-app-breadcrumb) > :where([slot="label"]),
-  :where(nui-app-breadcrumb) > :where(:not([slot])) {
+  :where(n-app-breadcrumb) > :where([slot="label"]),
+  :where(n-app-breadcrumb) > :where(:not([slot])) {
     min-width: 0;
   }
 
-  :where(nui-app-breadcrumb) > :where([slot="trailing"]) {
+  :where(n-app-breadcrumb) > :where([slot="trailing"]) {
     display: flex;
     align-items: center;
     gap: calc(var(--n-space) * 2);
@@ -739,12 +753,12 @@
 @layer ui {
 
   /* ╭──────────────────────────────────────────────────────────╮
-     │  nui-app-canvas                                          │
+     │  n-app-canvas                                          │
      │  Structural flex row for body + chat panels.             │
      │  No background, no radius — purely layout.               │
      ╰──────────────────────────────────────────────────────────╯ */
 
-  :where(nui-app-canvas) {
+  :where(n-app-canvas) {
     display: flex;
     flex: 1;
     min-height: 0;
@@ -755,8 +769,10 @@
 
 @layer ui {
 
+  :where(n-app-panel):not(:defined) { visibility: hidden; }
+
   /* ╭──────────────────────────────────────────────────────────╮
-     │  nui-app-panel                                           │
+     │  n-app-panel                                           │
      │  Layout panel — main content surface or collapsible      │
      │  aside. Default: flex-1 scrollable body. [aside]:        │
      │  fixed-width side panel with open/close + resize.        │
@@ -764,21 +780,23 @@
 
   /* ── Base (shared) ── */
 
-  :where(nui-app-panel) {
+  :where(n-app-panel) {
+    --n-ground: var(--n-panel);
+
     display: flex;
     flex-direction: column;
     scrollbar-width: none;
-    background: var(--n-ground, var(--n-panel));
+    background: var(--n-ground);
     border-radius: var(--n-radius);
   }
 
-  :where(nui-app-panel)[show-scrollbar] {
+  :where(n-app-panel)[show-scrollbar] {
     scrollbar-width: thin;
   }
 
   /* ── Main mode (default) ── */
 
-  :where(nui-app-panel):not([aside]) {
+  :where(n-app-panel):not([aside]) {
     flex: 1;
     min-width: 0;
     overflow-y: auto;
@@ -787,7 +805,7 @@
 
   /* ── Aside mode ── */
 
-  :where(nui-app-panel)[aside] {
+  :where(n-app-panel)[aside] {
     position: relative;
     width: 0;
     min-width: 0;
@@ -801,7 +819,7 @@
       margin var(--n-duration) var(--n-easing);
   }
 
-  :where(nui-app-panel)[aside][open] {
+  :where(n-app-panel)[aside][open] {
     width: 360px;
     min-width: 280px;
     margin-inline-start: calc(var(--n-space) * 2);
@@ -809,23 +827,23 @@
     padding: calc(var(--n-space-k) * var(--n-space));
   }
 
-  /* WHY: When ui-chat manages its own sub-container padding and scroll,
+  /* WHY: When n-chat manages its own sub-container padding and scroll,
      the layout container delegates — no own padding, no own scroll.
-     overflow: visible lets CSS anchor-positioned popovers (ui-select etc.)
+     overflow: visible lets CSS anchor-positioned popovers (n-select etc.)
      resolve through to the top layer. */
-  :where(nui-app-panel)[aside][open]:has(> ui-chat) {
+  :where(n-app-panel)[aside][open]:has(> n-chat) {
     padding: 0;
     overflow: visible;
   }
 
   /* WHY: Disable width transition while dragging — it fights the pointer. */
-  :where(nui-app-panel)[aside][resizing] {
+  :where(n-app-panel)[aside][resizing] {
     transition: none;
   }
 
   /* ── Resize Handle ── */
 
-  :where(nui-app-panel)[aside] :where(.layout-resize-handle) {
+  :where(n-app-panel)[aside] :where(.layout-resize-handle) {
     position: absolute;
     top: 0;
     left: 0;
@@ -835,9 +853,26 @@
     z-index: 1;
   }
 
-  :where(nui-app-panel)[aside] :where(.layout-resize-handle):hover,
-  :where(nui-app-panel)[aside][resizing] :where(.layout-resize-handle) {
+  :where(n-app-panel)[aside] :where(.layout-resize-handle):hover,
+  :where(n-app-panel)[aside][resizing] :where(.layout-resize-handle) {
     background: var(--n-border-muted);
   }
 
+  /* ── Panel sub-container integration ── */
+  /* WHY: When n-panel-body is present, delegate overflow to it so
+     header/footer stay fixed while body scrolls. */
+
+  :where(n-app-panel):has(> n-panel-body) {
+    overflow: hidden;
+    padding: 0;
+  }
+
+  :where(n-app-panel) > :where(n-panel-header) {
+    border-bottom: 1px solid var(--n-border-muted);
+  }
+
+  :where(n-app-panel) > :where(n-panel-footer) {
+    border-top: 1px solid var(--n-border-muted);
+  }
+
 }