@lapismd/design-core 0.1.0 → 0.2.0

package/src/shared/shell/app-shell/AppShellSidebar.svelte

@@ -22,11 +22,16 @@
     resizable = true,
     closeable = false,
     variant = "default",
+    constraintPriority,
+    constrainedPresentation = "preview",
     revealOnEdgeHover = false,
     edgeRevealLabel,
     resizeLabel,
     mobileLabel,
     tabindex: _tabindex,
+    hidden: hiddenProp,
+    inert: inertProp,
+    "aria-hidden": ariaHidden,
     style,
     class: className,
     children,
@@ -43,7 +48,11 @@
     /** Whether nested `AppShell.Sidebar.Close` actions may close this sidebar. */
     closeable?: boolean;
     /** Full-height outer chrome or the default transparent shell sidebar. */
-    variant?: "default" | "outer";
+    variant?: "default" | "outer" | "rail";
+    /** Lower values leave inline desktop flow before higher values. */
+    constraintPriority?: number;
+    /** Presentation used when protected main width displaces this panel. */
+    constrainedPresentation?: "preview" | "replace-main";
     /** Preview a collapsed or closed sidebar from the corresponding page edge. */
     revealOnEdgeHover?: boolean;
     /** Accessible name for the collapsed/closed edge-preview control. */
@@ -79,6 +88,7 @@
     get controller() {
       return sidebar;
     },
+    syncLayout,
     dismissOverlay,
   });
   let renderedWidth = $state(APP_SHELL_DEFAULT_SIDEBAR_WIDTH);
@@ -99,6 +109,18 @@
       (side === "left" ? "Preview left sidebar" : "Preview right sidebar"),
   );
   let mobilePanelId = $derived(controller.getPanelId(sidebar));
+  let desktopConstrained = $state(false);
+  let desktopPreviewed = $state(false);
+  let suspended = $state(false);
+  let covered = $state(false);
+  function syncProjection(): void {
+    desktopConstrained = controller.isPanelConstrained(mobilePanelId);
+    desktopPreviewed = controller.isPanelDesktopPreviewed(mobilePanelId);
+    suspended = controller.isPanelSuspended(mobilePanelId);
+    covered = controller.isPanelCovered(mobilePanelId);
+  }
+  syncProjection();
+  const unsubscribeProjection = controller.onProjectionChange(syncProjection);
   let mobileMode = $derived(controller.mobile.resolvedMode === "mobile");
   let mobileActive = $derived(
     !mobileMode ||
@@ -106,13 +128,15 @@
         controller.mobile.activePanelId(side) === mobilePanelId),
   );
   let presentation = $derived(
-    mobileMode ? "mobile" : sidebar.previewed ? "overlay" : "inline",
-  );
-  let renderSidebar = $derived(
     mobileMode
-      ? mobilePanelId !== undefined
-      : !sidebarClosed || sidebar.previewed,
+      ? "mobile"
+      : sidebar.previewed || desktopPreviewed
+        ? "overlay"
+        : desktopConstrained && constrainedPresentation === "replace-main"
+          ? "replace-main"
+          : "inline",
   );
+  let renderSidebar = $derived(mobileMode ? mobilePanelId !== undefined : true);
   let preserveCollapsedRail = $derived(
     !mobileMode && !sidebarClosed && sidebarCollapsed && sidebar.previewed,
   );
@@ -147,10 +171,78 @@
       get element() {
         return ref;
       },
+      ...(constraintPriority === undefined ? {} : { constraintPriority }),
+      constrainedPresentation,
     };
     return untrack(() => controller.mobile.registerPanel(registration));
   });
 
+  $effect(() => {
+    const panelId = mobilePanelId;
+    const element = ref;
+    untrack(() => controller.setPanelElement(panelId, element));
+    return () => untrack(() => controller.setPanelElement(panelId, null));
+  });
+
+  $effect(() => {
+    const element = ref;
+    const root = controller.mobile.getRootElement();
+    const main = controller.mobile.getMainElement();
+    if (
+      presentation !== "replace-main" ||
+      !element ||
+      !root ||
+      !main ||
+      typeof ResizeObserver === "undefined"
+    ) {
+      return;
+    }
+
+    const updateInsets = () => {
+      const rootBounds = root.getBoundingClientRect();
+      const mainBounds = main.getBoundingClientRect();
+      const paddingLeft = rootBounds.left + root.clientLeft;
+      const paddingRight = paddingLeft + root.clientWidth;
+      const paddingTop = rootBounds.top + root.clientTop;
+      const paddingBottom = paddingTop + root.clientHeight;
+      const rtl = getComputedStyle(root).direction === "rtl";
+      const inlineStart = rtl
+        ? paddingRight - mainBounds.right
+        : mainBounds.left - paddingLeft;
+      const inlineEnd = rtl
+        ? mainBounds.left - paddingLeft
+        : paddingRight - mainBounds.right;
+      element.style.setProperty(
+        "--ui-shell-replacement-inline-start",
+        `${Math.max(0, inlineStart)}px`,
+      );
+      element.style.setProperty(
+        "--ui-shell-replacement-inline-end",
+        `${Math.max(0, inlineEnd)}px`,
+      );
+      element.style.setProperty(
+        "--ui-shell-replacement-block-start",
+        `${Math.max(0, mainBounds.top - paddingTop)}px`,
+      );
+      element.style.setProperty(
+        "--ui-shell-replacement-block-end",
+        `${Math.max(0, paddingBottom - mainBounds.bottom)}px`,
+      );
+    };
+    let frame = requestAnimationFrame(updateInsets);
+    const scheduleUpdate = () => {
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(updateInsets);
+    };
+    const observer = new ResizeObserver(scheduleUpdate);
+    observer.observe(root);
+    observer.observe(main);
+    return () => {
+      cancelAnimationFrame(frame);
+      observer.disconnect();
+    };
+  });
+
   $effect(() => {
     const sidebarElement = ref;
     if (!sidebarElement) return;
@@ -227,8 +319,12 @@
 
   onDestroy(() => {
     unsubscribeLayout();
+    unsubscribeProjection();
     stopResize();
     sidebar.dismissPreview();
+    controller.setPanelElement(mobilePanelId, null);
+    if (mobilePanelId)
+      controller.setPanelDesktopPreviewed(mobilePanelId, false);
   });
 
   function revealFromEdge(element?: Element | null): void {
@@ -239,7 +335,9 @@
       return;
     }
     if (isDesktopOverlayOnly(element)) {
-      ref?.setAttribute("data-desktop-overlay-preview", "");
+      if (mobilePanelId) {
+        controller.setPanelDesktopPreviewed(mobilePanelId, true);
+      }
       queueMicrotask(() => ref?.focus({ preventScroll: true }));
       return;
     }
@@ -247,18 +345,14 @@
   }
 
   function isDesktopOverlayOnly(element?: Element | null): boolean {
-    if (!mobilePanelId) return false;
-    return (
-      (element ?? ref)
-        ?.closest("[data-shell-root]")
-        ?.getAttribute("data-desktop-overlay-panels")
-        ?.split(/\s+/)
-        .includes(mobilePanelId) ?? false
-    );
+    void element;
+    return desktopConstrained && constrainedPresentation === "preview";
   }
 
   function dismissOverlay(): void {
     sidebar.dismissPreview();
+    if (mobilePanelId)
+      controller.setPanelDesktopPreviewed(mobilePanelId, false);
   }
 
   function keepOverlay(): void {
@@ -412,7 +506,9 @@
     onblur={handleOverlayBlur}
     onclick={(event) => {
       if (isDesktopOverlayOnly(event.currentTarget)) {
-        ref?.setAttribute("data-desktop-overlay-preview", "");
+        if (mobilePanelId) {
+          controller.setPanelDesktopPreviewed(mobilePanelId, true);
+        }
         queueMicrotask(() => ref?.focus({ preventScroll: true }));
       } else sidebar.toggle();
     }}
@@ -448,15 +544,21 @@
     data-state={sidebarState}
     data-variant={variant}
     data-presentation={presentation}
+    data-desktop-constrained={desktopConstrained || undefined}
+    data-constrained-presentation={constrainedPresentation}
     data-collapsed={sidebarCollapsed || undefined}
     data-closeable={closeable || undefined}
     data-previewed={sidebar.previewed || undefined}
     data-mobile-panel-id={mobilePanelId}
     data-mobile-panel-active={mobileActive || undefined}
     data-resizing={resizing || undefined}
+    data-consumer-hidden={Boolean(hiddenProp) || undefined}
+    data-consumer-inert={Boolean(inertProp) || undefined}
+    data-consumer-aria-hidden={ariaHidden}
     aria-label={accessibleLabel}
-    aria-hidden={mobileMode && !mobileActive}
-    inert={mobileMode && !mobileActive}
+    hidden={Boolean(hiddenProp) || suspended}
+    aria-hidden={(mobileMode && !mobileActive) || covered ? "true" : ariaHidden}
+    inert={Boolean(inertProp) || (mobileMode && !mobileActive) || covered}
     onmouseenter={keepOverlay}
     onmouseleave={presentation === "overlay"
       ? handleOverlayPointerLeave
@@ -465,7 +567,7 @@
     onfocusout={presentation === "overlay" ? handleOverlayBlur : undefined}
   >
     {@render children?.()}
-    {#if !mobileMode && resizable && (!sidebarCollapsed || presentation === "overlay")}
+    {#if !mobileMode && resizable && presentation !== "replace-main" && (!sidebarCollapsed || presentation === "overlay")}
       <div
         role="slider"
         tabindex="0"

package/src/shared/shell/app-shell/AppShellSidebarClose.svelte

@@ -28,13 +28,10 @@
 
   function isDesktopOverlayOnly(element?: Element | null): boolean {
     const panelId = controller.getPanelId(sidebar);
-    if (!panelId) return false;
+    void element;
     return (
-      (element ?? ref)
-        ?.closest("[data-shell-root]")
-        ?.getAttribute("data-desktop-overlay-panels")
-        ?.split(/\s+/)
-        .includes(panelId) ?? false
+      controller.isPanelConstrained(panelId) &&
+      controller.getConstrainedPresentation(panelId) === "preview"
     );
   }
 
@@ -43,19 +40,16 @@
       '[data-ui-part="sidebar"][data-mobile-panel-id]',
     );
     const panelId = sidebarElement?.dataset.mobilePanelId;
-    const shellRoot = element.closest<HTMLElement>("[data-shell-root]");
-    const toggle =
-      panelId && shellRoot
-        ? shellRoot.querySelector<HTMLButtonElement>(
-            `[data-ui-part="sidebar-toggle"][data-target-panel-id="${CSS.escape(panelId)}"]`,
-          )
-        : null;
+    const shellRoot = controller.mobile.getRootElement();
+    const toggle = panelId
+      ? shellRoot?.querySelector<HTMLButtonElement>(
+          `[data-ui-part="sidebar-toggle"][data-target-panel-id="${CSS.escape(panelId)}"]`,
+        )
+      : null;
     if (toggle) {
       toggle.click();
       toggle.focus({ preventScroll: true });
-    } else {
-      sidebarElement?.removeAttribute("data-desktop-overlay-preview");
-    }
+    } else if (panelId) controller.setPanelDesktopPreviewed(panelId, false);
   }
 </script>
 
@@ -85,11 +79,17 @@
         const targetSidebar = panelId ? controller.getPanel(panelId) : sidebar;
         flushSync(() => {
           targetSidebar?.close();
+          context.syncLayout();
           sidebarElement?.dispatchEvent(
             new Event(APP_SHELL_SIDEBAR_LAYOUT_SYNC_EVENT),
           );
         });
-        sidebarElement?.remove();
+        controller.syncPanelProjections();
+        requestAnimationFrame(() => {
+          if (!targetSidebar?.closed || !sidebarElement?.isConnected) return;
+          sidebarElement.hidden = true;
+          sidebarElement.dataset.state = "closed";
+        });
         context.dismissOverlay();
       }
       onclick?.(event);

package/src/shared/shell/app-shell/AppShellSidebarToggle.svelte

@@ -2,14 +2,16 @@
   import { onDestroy, untrack } from "svelte";
   import type { HTMLButtonAttributes } from "svelte/elements";
   import { Button } from "../../shadcn/button/index.js";
-  import { useAppShell } from "./app-shell-context.svelte.js";
+  import { useOptionalAppShell } from "./app-shell-context.svelte.js";
   import type {
+    AppShellController,
     AppShellSide,
     AppShellSidebarController,
   } from "./app-shell-controller.svelte.js";
 
   let {
     ref = $bindable(null),
+    shellController,
     side,
     sidebarController,
     sidebarName,
@@ -25,6 +27,8 @@
     ...restProps
   }: HTMLButtonAttributes & {
     ref?: HTMLButtonElement | null;
+    /** Explicit root controller for persistent chrome rendered outside Root. */
+    shellController?: AppShellController;
     /** Sidebar controlled by this toolbar action. */
     side: AppShellSide;
     /** Optional independent sidebar controller for repeated same-side layouts. */
@@ -41,7 +45,16 @@
     previewDismissDelay?: number;
   } = $props();
 
-  const controller = useAppShell();
+  const contextualController = useOptionalAppShell();
+  const resolvedController = untrack(
+    () => shellController ?? contextualController,
+  );
+  if (!resolvedController) {
+    throw new Error(
+      "AppShell.Sidebar.Toggle requires AppShell.Root context or shellController.",
+    );
+  }
+  const controller: AppShellController = resolvedController;
   const sidebar = untrack(
     () => sidebarController ?? controller.getSidebar(side),
   );
@@ -56,8 +69,13 @@
   const unsubscribeLayout = sidebar.onLayoutChange(syncLayout);
   let mobileMode = $derived(controller.mobile.resolvedMode === "mobile");
   let mobilePanelId = $derived(controller.getPanelId(sidebar));
-  let desktopDomPreview = $state(false);
-  let desktopOverlayKnown = $state(false);
+  let desktopDomPreview = $derived(
+    controller.isPanelDesktopPreviewed(mobilePanelId),
+  );
+  let desktopOverlayKnown = $derived(
+    controller.isPanelConstrained(mobilePanelId) &&
+      controller.getConstrainedPresentation(mobilePanelId) === "preview",
+  );
   let suppressHoverPreview = false;
   let desktopOverlayOnly = $derived(!mobileMode && desktopOverlayKnown);
   let mobileExpanded = $derived(
@@ -82,71 +100,28 @@
   onDestroy(() => {
     unsubscribeLayout();
     sidebar.dismissPreview();
-    getDesktopOverlayTarget(ref)?.removeAttribute(
-      "data-desktop-overlay-preview",
-    );
-  });
-
-  $effect(() => {
-    const button = ref;
-    const panelId = mobilePanelId;
-    const shellRoot = button?.closest<HTMLElement>("[data-shell-root]");
-    if (!shellRoot || !panelId) {
-      desktopOverlayKnown = false;
-      return;
-    }
-
-    const update = () => {
-      desktopOverlayKnown =
-        shellRoot
-          .getAttribute("data-desktop-overlay-panels")
-          ?.split(/\s+/)
-          .includes(panelId) ?? false;
-    };
-    update();
-    const observer = new MutationObserver(update);
-    observer.observe(shellRoot, {
-      attributes: true,
-      attributeFilter: ["data-desktop-overlay-panels"],
-    });
-    return () => observer.disconnect();
+    if (mobilePanelId)
+      controller.setPanelDesktopPreviewed(mobilePanelId, false);
   });
 
   function isDesktopOverlayOnly(element?: Element | null): boolean {
-    if (!mobilePanelId) return false;
-    return (
-      (element ?? ref)
-        ?.closest("[data-shell-root]")
-        ?.getAttribute("data-desktop-overlay-panels")
-        ?.split(/\s+/)
-        .includes(mobilePanelId) ?? false
-    );
+    void element;
+    return desktopOverlayOnly;
   }
 
   function getDesktopOverlayTarget(
     element?: Element | null,
   ): HTMLElement | null {
-    if (!mobilePanelId) return null;
-    const shellRoot = (element ?? ref)?.closest("[data-shell-root]");
-    if (
-      !shellRoot
-        ?.getAttribute("data-desktop-overlay-panels")
-        ?.split(/\s+/)
-        .includes(mobilePanelId)
-    ) {
-      return null;
-    }
-    return shellRoot.querySelector<HTMLElement>(
-      `[data-ui-part="sidebar"][data-mobile-panel-id="${CSS.escape(mobilePanelId)}"]`,
-    );
+    void element;
+    return mobilePanelId ? controller.getPanelElement(mobilePanelId) : null;
   }
 
   function toggleDesktopDomPreview(element: Element): boolean {
     const target = getDesktopOverlayTarget(element);
-    if (!target) return false;
-    desktopDomPreview = !target.hasAttribute("data-desktop-overlay-preview");
-    target.toggleAttribute("data-desktop-overlay-preview", desktopDomPreview);
-    if (desktopDomPreview) {
+    if (!target || !mobilePanelId || !desktopOverlayOnly) return false;
+    const nextPreviewed = !desktopDomPreview;
+    controller.setPanelDesktopPreviewed(mobilePanelId, nextPreviewed);
+    if (nextPreviewed) {
       queueMicrotask(() => target.focus({ preventScroll: true }));
     }
     return true;
@@ -168,7 +143,11 @@
     ? mobileExpanded
       ? "expanded"
       : "collapsed"
-    : sidebarState}
+    : desktopOverlayOnly
+      ? desktopDomPreview
+        ? "expanded"
+        : "closed"
+      : sidebarState}
   aria-label={resolveAccessibleLabel()}
   aria-expanded={mobileMode
     ? mobileExpanded
@@ -209,6 +188,7 @@
       sidebar.dismissPreview();
       sidebar.toggle();
       syncLayout();
+      controller.syncPanelProjections();
     }
     onclick?.(event);
   }}

package/src/shared/shell/app-shell/AppShellSurfaceLayer.svelte

@@ -0,0 +1,173 @@
+<script lang="ts">
+  import { untrack, type Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+  import { useAppShell } from "./app-shell-context.svelte.js";
+
+  let {
+    ref = $bindable(null),
+    open,
+    label,
+    coverPanelIds = [],
+    suspendPanelIds = [],
+    returnFocus,
+    dismissLabel = `Close ${label}`,
+    dismissOnEscape = true,
+    onDismiss,
+    class: className,
+    children,
+    ...restProps
+  }: HTMLAttributes<HTMLDivElement> & {
+    ref?: HTMLElement | null;
+    /** Whether the structural replacement layer is mounted. */
+    open: boolean;
+    /** Accessible name for the non-modal replacement surface. */
+    label: string;
+    /** Mounted sidebar ids included in the covered surface bounds. */
+    coverPanelIds?: readonly string[];
+    /** Sidebar ids hidden transiently while the layer is active. */
+    suspendPanelIds?: readonly string[];
+    /** Focus target restored after dismissal. Defaults to the opener. */
+    returnFocus?: HTMLElement | null;
+    /** Accessible name for the dismissible scrim. */
+    dismissLabel?: string;
+    /** Whether unhandled Escape dismisses the layer. */
+    dismissOnEscape?: boolean;
+    /** Consumer-owned route or state transition that closes the layer. */
+    onDismiss?: () => void;
+    children?: Snippet;
+  } = $props();
+
+  const controller = useAppShell();
+  const token = Symbol("app-shell-surface-layer");
+  let surfaceElement = $state<HTMLElement | null>(null);
+  let inlineStart = $state(0);
+  let inlineEnd = $state(0);
+  let blockStart = $state(0);
+  let blockEnd = $state(0);
+
+  $effect(() => {
+    if (!open || typeof document === "undefined") return;
+    const { focusTarget, registration } = untrack(() => ({
+      focusTarget:
+        returnFocus ??
+        (document.activeElement instanceof HTMLElement
+          ? document.activeElement
+          : null),
+      registration: {
+        token,
+        coverPanelIds: [...coverPanelIds],
+        suspendPanelIds: [...suspendPanelIds],
+      },
+    }));
+    untrack(() => controller.activateSurfaceLayer(registration));
+    queueMicrotask(() => surfaceElement?.focus({ preventScroll: true }));
+
+    const handleKeydown = (event: KeyboardEvent) => {
+      if (
+        !dismissOnEscape ||
+        event.defaultPrevented ||
+        event.key !== "Escape"
+      ) {
+        return;
+      }
+      event.preventDefault();
+      onDismiss?.();
+    };
+    document.addEventListener("keydown", handleKeydown);
+    return () => {
+      document.removeEventListener("keydown", handleKeydown);
+      untrack(() => controller.deactivateSurfaceLayer(token));
+      queueMicrotask(() => {
+        const target = returnFocus ?? focusTarget;
+        if (target?.isConnected) target.focus({ preventScroll: true });
+        else controller.mobile.getMainElement()?.focus({ preventScroll: true });
+      });
+    };
+  });
+
+  $effect(() => {
+    void controller.panelElementsVersion;
+    if (!open || !ref || typeof ResizeObserver === "undefined") return;
+    const root = controller.mobile.getRootElement();
+    const main = controller.mobile.getMainElement();
+    if (!root || !main) return;
+    const coveredElements = coverPanelIds.flatMap((id) => {
+      const element = controller.getPanelElement(id);
+      return element ? [element] : [];
+    });
+
+    const updateInsets = () => {
+      const rootBounds = root.getBoundingClientRect();
+      const paddingLeft = rootBounds.left + root.clientLeft;
+      const paddingRight = paddingLeft + root.clientWidth;
+      const paddingTop = rootBounds.top + root.clientTop;
+      const paddingBottom = paddingTop + root.clientHeight;
+      const visibleBounds = [main, ...coveredElements]
+        .map((element) => element.getBoundingClientRect())
+        .filter((bounds) => bounds.width > 0 && bounds.height > 0);
+      if (visibleBounds.length === 0) return;
+      const left = Math.min(...visibleBounds.map((bounds) => bounds.left));
+      const right = Math.max(...visibleBounds.map((bounds) => bounds.right));
+      const top = main.getBoundingClientRect().top;
+      const bottom = main.getBoundingClientRect().bottom;
+      const rtl = getComputedStyle(root).direction === "rtl";
+      inlineStart = Math.max(
+        0,
+        rtl ? paddingRight - right : left - paddingLeft,
+      );
+      inlineEnd = Math.max(0, rtl ? left - paddingLeft : paddingRight - right);
+      blockStart = Math.max(0, top - paddingTop);
+      blockEnd = Math.max(0, paddingBottom - bottom);
+    };
+
+    let frame = requestAnimationFrame(updateInsets);
+    const scheduleUpdate = () => {
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(updateInsets);
+    };
+    const observer = new ResizeObserver(scheduleUpdate);
+    observer.observe(root);
+    observer.observe(main);
+    for (const element of coveredElements) observer.observe(element);
+    return () => {
+      cancelAnimationFrame(frame);
+      observer.disconnect();
+    };
+  });
+</script>
+
+{#if open}
+  <div
+    bind:this={ref}
+    {...restProps}
+    class={["ui-minimal-app-shell__surface-layer", className]
+      .filter(Boolean)
+      .join(" ")}
+    data-ui-component="app-shell"
+    data-ui-part="surface-layer"
+    style:inset-inline-start={`${inlineStart}px`}
+    style:inset-inline-end={`${inlineEnd}px`}
+    style:inset-block-start={`${blockStart}px`}
+    style:inset-block-end={`${blockEnd}px`}
+  >
+    <button
+      type="button"
+      tabindex="-1"
+      class="ui-minimal-app-shell__surface-layer-scrim"
+      data-ui-component="app-shell"
+      data-ui-part="surface-layer-scrim"
+      aria-label={dismissLabel}
+      onclick={() => onDismiss?.()}
+    ></button>
+    <section
+      bind:this={surfaceElement}
+      class="ui-minimal-app-shell__surface-layer-surface"
+      data-ui-component="app-shell"
+      data-ui-part="surface-layer-surface"
+      aria-label={label}
+      tabindex="-1"
+    >
+      {@render children?.()}
+    </section>
+  </div>
+{/if}

package/src/shared/shell/app-shell/AppShellSurfaceLayerBody.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+  import type { WithElementRef } from "../../../lib/utils.js";
+  import { ScrollArea } from "../../shadcn/scroll-area/index.js";
+  import { useAppShell } from "./app-shell-context.svelte.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+
+  useAppShell();
+</script>
+
+<div
+  bind:this={ref}
+  {...restProps}
+  class={["ui-minimal-app-shell__surface-layer-body", className]
+    .filter(Boolean)
+    .join(" ")}
+  data-ui-component="app-shell"
+  data-ui-part="surface-layer-body"
+>
+  <ScrollArea
+    type="auto"
+    class="ui-minimal-app-shell__surface-layer-scroll-area"
+  >
+    {@render children?.()}
+  </ScrollArea>
+</div>