@lapismd/design-core 0.1.2 → 0.2.0

package/src/shared/forms/dialog-frame/DialogFrame.svelte

@@ -0,0 +1,108 @@
+<script lang="ts" module>
+  import type { ComponentProps, Snippet } from "svelte";
+  import type * as DialogTypes from "../../shadcn/dialog/index.js";
+
+  export type DialogFrameSize = "compact" | "form" | "large" | "wide";
+  export type DialogFrameSurface = "plain" | "inset";
+  export type DialogFrameProps = Omit<
+    ComponentProps<typeof DialogTypes.Content>,
+    "children" | "title" | "showCloseButton" | "dataUiComponent" | "dataUiPart"
+  > & {
+    title: string | Snippet;
+    description?: string | Snippet;
+    descriptionHidden?: boolean;
+    size?: DialogFrameSize;
+    /** Visual treatment for the dialog shell and main content surface. */
+    surface?: DialogFrameSurface;
+    busy?: boolean;
+    closeLabel?: string;
+    sidebar?: Snippet;
+    headerActions?: Snippet;
+    footer?: Snippet;
+    children: Snippet;
+    bodyPadding?: "default" | "none";
+  };
+</script>
+
+<script lang="ts">
+  import * as Dialog from "../../shadcn/dialog/index.js";
+  import { Button } from "../../shadcn/button/index.js";
+  import { ScrollArea } from "../../shadcn/scroll-area/index.js";
+  import XIcon from "@lucide/svelte/icons/x";
+  import "./DialogFrame.css";
+
+  let {
+    title,
+    description,
+    descriptionHidden = false,
+    size = "form",
+    surface = "plain",
+    busy = false,
+    closeLabel = "Close",
+    sidebar,
+    headerActions,
+    footer,
+    children,
+    bodyPadding = "default",
+    ref = $bindable(null),
+    onInteractOutside,
+    onEscapeKeydown,
+    ...contentProps
+  }: DialogFrameProps = $props();
+</script>
+
+<Dialog.Content
+  {...contentProps}
+  bind:ref
+  showCloseButton={false}
+  data-ui-dialog-frame=""
+  data-frame-size={size}
+  data-frame-surface={surface}
+  data-frame-padding={bodyPadding}
+  onInteractOutside={(event) => {
+    if (busy) event.preventDefault();
+    else onInteractOutside?.(event);
+  }}
+  onEscapeKeydown={(event) => {
+    if (busy) event.preventDefault();
+    else onEscapeKeydown?.(event);
+  }}
+>
+  <div data-ui-part="dialog-frame-header">
+    <div data-ui-part="dialog-frame-heading">
+      <Dialog.Title
+        >{#if typeof title === "string"}{title}{:else}{@render title()}{/if}</Dialog.Title
+      >
+      {#if description}<Dialog.Description
+          class={descriptionHidden ? "sr-only" : undefined}
+          >{#if typeof description === "string"}{description}{:else}{@render description()}{/if}</Dialog.Description
+        >{/if}
+    </div>
+    {@render headerActions?.()}
+    <Dialog.Close>
+      {#snippet child({ props })}
+        <Button
+          {...props}
+          variant="ghost"
+          size="icon-sm"
+          disabled={busy}
+          aria-label={closeLabel}
+          data-ui-part="dialog-frame-close"><XIcon aria-hidden="true" /></Button
+        >
+      {/snippet}
+    </Dialog.Close>
+  </div>
+  <div data-ui-part="dialog-frame-layout" data-has-sidebar={Boolean(sidebar)}>
+    {#if sidebar}<aside data-ui-part="dialog-frame-sidebar">
+        {@render sidebar()}
+      </aside>{/if}
+    <div data-ui-part="dialog-frame-main">
+      <ScrollArea class="ui-dialog-frame-scroll" type="always">
+        <div data-ui-part="dialog-frame-body">{@render children()}</div>
+      </ScrollArea>
+      {#if footer}<Dialog.Footer data-ui-part="dialog-frame-footer"
+          >{@render footer()}</Dialog.Footer
+        >{/if}
+    </div>
+  </div>
+</Dialog.Content>

package/src/shared/forms/dialog-frame/DialogFrameExample.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import { DialogFrame } from "@lapismd/design-core/forms/dialog";
+  import * as Dialog from "@lapismd/design-core/shadcn/dialog";
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import { Input } from "@lapismd/design-core/shadcn/input";
+  let open = $state(false);
+  let name = $state("");
+</script>
+
+<Dialog.Root bind:open>
+  <Dialog.Trigger
+    >{#snippet child({ props })}<Button {...props}>Edit record</Button
+      >{/snippet}</Dialog.Trigger
+  >
+  <DialogFrame
+    title="Edit record"
+    description={name
+      ? `Editing ${name}`
+      : "The form scrolls while its actions remain visible."}
+    size="large"
+    surface="inset"
+    class={name ? "record-filled" : "record-empty"}
+  >
+    {#snippet sidebar()}<nav aria-label="Sections">
+        <Button variant="secondary">Details</Button>
+      </nav>{/snippet}
+    {#each Array.from({ length: 24 }) as _, index}<label
+        style="display: grid; gap: 0.5rem; margin-block: 1rem;"
+        >Field {index + 1}{#if index === 0}<Input
+            bind:value={name}
+          />{:else}<Input />{/if}</label
+      >{/each}
+    {#snippet footer()}<Button variant="outline" onclick={() => (open = false)}
+        >Cancel</Button
+      ><Button onclick={() => (open = false)}>Save</Button>{/snippet}
+  </DialogFrame>
+</Dialog.Root>

package/src/shared/forms/dialog-frame/index.ts

@@ -0,0 +1,6 @@
+export { default as DialogFrame } from "./DialogFrame.svelte";
+export type {
+  DialogFrameProps,
+  DialogFrameSize,
+  DialogFrameSurface,
+} from "./DialogFrame.svelte";

package/src/shared/forms/dialog.ts

@@ -0,0 +1,8 @@
+export { DialogFrame } from "./dialog-frame/index.js";
+export type {
+  DialogFrameProps,
+  DialogFrameSize,
+} from "./dialog-frame/index.js";
+export { ConfirmDialog } from "./confirm-dialog/index.js";
+export type { ConfirmDialogProps } from "./confirm-dialog/index.js";
+export { ConfirmButton } from "./confirm-button/index.js";

package/src/shared/forms/index.ts

@@ -129,3 +129,14 @@ export {
 export type { InlineOptionPickerOption } from "./inline-option-picker/InlineOptionPicker.svelte";
 export type { AddSectionOption } from "./add-section-chooser/AddSectionChooser.svelte";
 export * from "./core/core";
+
+export {
+  DialogFrame,
+  type DialogFrameProps,
+  type DialogFrameSize,
+} from "./dialog-frame/index.js";
+export {
+  ConfirmDialog,
+  type ConfirmDialogProps,
+} from "./confirm-dialog/index.js";
+export { ConfirmButton } from "./confirm-button/index.js";

package/src/shared/shadcn/button/button.svelte

@@ -276,6 +276,7 @@
         }
         [data-ui-component="button"][data-variant="outline"]:hover,
         [data-ui-component="button"][data-variant="ghost"]:hover {
+          background-color: var(--accent);
           color: var(--foreground);
         }
         [data-ui-component="button"][data-variant="link"]:hover {
@@ -294,6 +295,9 @@
           );
         }
       }
+      [data-ui-component="button"][data-variant="ghost"]:focus-visible {
+        background-color: var(--accent);
+      }
       [data-ui-component="button"]:focus-visible {
         border-color: var(--ui-button-focus-ring-color, var(--ring));
       }

package/src/shared/shadcn/code-block/highlightRanges.ts

@@ -179,8 +179,9 @@ function applyRangesToContainer(
   for (let i = 0; i < lineDivs.length; i++) {
     const tokenIndex = globalLineOffset + i;
     const tokens = tokenLines[tokenIndex];
-    if (tokens && tokens.length > 0) {
-      applyLineRanges(lineDivs[i], tokens, results, resolve);
+    const lineDiv = lineDivs[i];
+    if (lineDiv && tokens && tokens.length > 0) {
+      applyLineRanges(lineDiv, tokens, results, resolve);
     }
   }
   return results;
@@ -216,6 +217,7 @@ export function applyHighlightRangesChunked(
 
   for (let i = 0; i < codeEl.children.length; i++) {
     const child = codeEl.children[i];
+    if (!child) continue;
     const lineDivs = child.querySelectorAll("[data-line]");
     if (
       lineDivs.length > 0 &&
@@ -235,8 +237,9 @@ export function applyHighlightRangesChunked(
     const lineDivs = codeEl.querySelectorAll("[data-line]");
     for (let i = 0; i < lineDivs.length; i++) {
       const tokens = tokenLines[i];
-      if (tokens && tokens.length > 0) {
-        applyLineRanges(lineDivs[i], tokens, allRanges, resolve);
+      const lineDiv = lineDivs[i];
+      if (lineDiv && tokens && tokens.length > 0) {
+        applyLineRanges(lineDiv, tokens, allRanges, resolve);
       }
     }
     return () => cleanupRanges(allRanges);
@@ -253,7 +256,7 @@ export function applyHighlightRangesChunked(
     const ranges = applyRangesToContainer(
       wrapper,
       tokenLines,
-      chunkLineOffsets[index],
+      chunkLineOffsets[index] ?? 0,
       resolve,
     );
     chunkRanges.set(wrapper, ranges);
@@ -269,6 +272,7 @@ export function applyHighlightRangesChunked(
 
   for (let i = 0; i < chunkWrappers.length; i++) {
     const wrapper = chunkWrappers[i];
+    if (!wrapper) continue;
 
     const handler = (e: Event) => {
       // contentvisibilityautostatechange fires with .skipped = true when
@@ -347,7 +351,7 @@ export function applyHighlightRangesBatch(
 
     const lineDiv = lineDivs[divIndex];
     const tokens = tokenLines[i];
-    if (tokens && tokens.length > 0) {
+    if (lineDiv && tokens && tokens.length > 0) {
       applyLineRanges(lineDiv, tokens, results, resolve);
     }
   }

package/src/shared/shadcn/code-block/syntax/defineSyntaxTheme.ts

@@ -60,11 +60,13 @@ export function resolveSyntaxTokenForMode(
   mode: "light" | "dark",
 ): string {
   if (Array.isArray(value)) {
-    return mode === "dark" ? value[1] : value[0];
+    return (mode === "dark" ? value[1] : value[0]) ?? "";
   }
   const match = value.match(/^light-dark\(([^,]+),([^)]+)\)$/);
   if (match) {
-    return mode === "dark" ? match[2].trim() : match[1].trim();
+    return mode === "dark"
+      ? (match[2]?.trim() ?? "")
+      : (match[1]?.trim() ?? "");
   }
   return value;
 }

package/src/shared/shadcn/code-block/tokenizer.ts

@@ -517,13 +517,13 @@ export function flatTokensToLines(
   for (const token of tokens) {
     while (
       lineIdx < lineStarts.length - 1 &&
-      token.start >= lineStarts[lineIdx + 1]
+      token.start >= (lineStarts[lineIdx + 1] ?? Number.POSITIVE_INFINITY)
     ) {
       lineIdx++;
     }
 
-    const lineStart = lineStarts[lineIdx];
-    result[lineIdx].push({
+    const lineStart = lineStarts[lineIdx] ?? 0;
+    result[lineIdx]?.push({
       type: token.type,
       start: token.start - lineStart,
       end: token.end - lineStart,

package/src/shared/shadcn/dialog/dialog-content.svelte

@@ -50,7 +50,6 @@
             variant="ghost"
             size="icon-sm"
             {...props}
-            dataUiComponent="dialog"
             data-ui-part="dialog-content-anon-0"
             data-slot="dialog-content-anon-0"
           >
@@ -75,7 +74,7 @@
       }
     }
     @layer utilities {
-      [data-ui-component="dialog"][data-ui-part="dialog-content-anon-0"] {
+      [data-ui-component="button"][data-ui-part="dialog-content-anon-0"] {
         position: absolute;
       }
       [data-ui-component="dialog"][data-ui-part="dialog-content"],
@@ -88,10 +87,10 @@
       [data-ui-component="dialog"][data-ui-part="dialog-content"] {
         top: 50%;
       }
-      [data-ui-component="dialog"][data-ui-part="dialog-content-anon-0"] {
+      [data-ui-component="button"][data-ui-part="dialog-content-anon-0"] {
         top: calc(var(--spacing) * 4);
       }
-      [data-ui-component="dialog"][data-ui-part="dialog-content-anon-0"] {
+      [data-ui-component="button"][data-ui-part="dialog-content-anon-0"] {
         right: calc(var(--spacing) * 4);
       }
       [data-ui-component="dialog"][data-ui-part="dialog-content"] {

package/src/shared/shadcn/dialog/dialog-portal.svelte

@@ -1,7 +1,15 @@
 <script lang="ts">
   import { Dialog as DialogPrimitive } from "bits-ui";
 
-  let { ...restProps }: DialogPrimitive.PortalProps = $props();
+  let { to, disabled, children }: DialogPrimitive.PortalProps = $props();
+  const target = $derived(to);
+  const portalDisabled = $derived(disabled);
 </script>
 
-<DialogPrimitive.Portal {...restProps} />
+<!-- Keep portal inputs independent of reactive content so updates do not remount it. -->
+<DialogPrimitive.Portal
+  {...target === undefined ? {} : { to: target }}
+  {...portalDisabled === undefined ? {} : { disabled: portalDisabled }}
+>
+  {@render children?.()}
+</DialogPrimitive.Portal>

package/src/shared/shadcn/tooltip/tooltip-content.svelte

@@ -119,14 +119,20 @@
         fill: var(--foreground);
       }
       [data-ui-component="tooltip"][data-ui-part="tooltip-content"] {
-        padding-inline: calc(var(--spacing) * 3);
+        padding-inline: var(
+          --ui-tooltip-padding-inline,
+          calc(var(--spacing) * 2.5)
+        );
       }
       [data-ui-component="tooltip"][data-ui-part="tooltip-content"] {
-        padding-block: calc(var(--spacing) * 1.5);
+        padding-block: var(
+          --ui-tooltip-padding-block,
+          calc(var(--spacing) * 1)
+        );
       }
       [data-ui-component="tooltip"][data-ui-part="tooltip-content"] {
-        font-size: var(--text-xs);
-        line-height: var(--tw-leading, var(--text-xs--line-height));
+        font-size: var(--ui-tooltip-font-size, 0.6875rem);
+        line-height: var(--ui-tooltip-line-height, 1rem);
       }
       [data-ui-component="tooltip"][data-ui-part="tooltip-content"] {
         color: var(--ui-tooltip-foreground, var(--background));

package/src/shared/shadcn/tooltip/tooltip.tokens.ts

@@ -4,6 +4,10 @@ export const tooltipTokenNames = {
   borderColor: "--ui-tooltip-border-color",
   radius: "--ui-tooltip-radius",
   focusRingColor: "--ui-tooltip-focus-ring-color",
+  fontSize: "--ui-tooltip-font-size",
+  lineHeight: "--ui-tooltip-line-height",
+  paddingInline: "--ui-tooltip-padding-inline",
+  paddingBlock: "--ui-tooltip-padding-block",
 } as const;
 
 export type TooltipToken =

package/src/shared/shell/app-shell/AppShell.css

@@ -64,6 +64,10 @@
   background: transparent;
 }
 
+.ui-minimal-app-shell__sidebar[hidden] {
+  display: none !important;
+}
+
 .ui-minimal-app-shell__sidebar[data-side="left"] {
   width: var(--ui-shell-sidebar-size, var(--ui-shell-left-sidebar-width));
 }
@@ -78,12 +82,19 @@
   background: var(--background);
 }
 
+.ui-minimal-app-shell__sidebar[data-variant="rail"][data-presentation="inline"] {
+  margin-block: var(--ui-shell-main-block-inset);
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
 .ui-minimal-app-shell__sidebar[data-variant="outer"][data-side="left"][data-presentation="inline"] {
   border-inline-end: 1px solid var(--border);
 }
 
-.ui-minimal-app-shell__sidebar[data-presentation="overlay"],
-.ui-minimal-app-shell__sidebar[data-desktop-overlay-preview] {
+.ui-minimal-app-shell__sidebar[data-presentation="overlay"] {
   position: absolute;
   z-index: 31;
   inset-block: 0;
@@ -92,14 +103,12 @@
     color-mix(in srgb, var(--foreground) 18%, transparent);
 }
 
-.ui-minimal-app-shell__sidebar[data-presentation="overlay"][data-side="left"],
-.ui-minimal-app-shell__sidebar[data-desktop-overlay-preview][data-side="left"] {
+.ui-minimal-app-shell__sidebar[data-presentation="overlay"][data-side="left"] {
   inset-inline-start: 0;
   border-inline-end: 1px solid var(--border);
 }
 
-.ui-minimal-app-shell__sidebar[data-presentation="overlay"][data-side="right"],
-.ui-minimal-app-shell__sidebar[data-desktop-overlay-preview][data-side="right"] {
+.ui-minimal-app-shell__sidebar[data-presentation="overlay"][data-side="right"] {
   inset-inline-end: 0;
   margin-inline-start: 0;
   border-inline-start: 1px solid var(--border);
@@ -139,24 +148,27 @@
   display: block;
 }
 
-.ui-minimal-app-shell[data-desktop-overlay-right]
-  > .ui-minimal-app-shell__composition
-  > .ui-minimal-app-shell__sidebar[data-side="right"]:not(
-    [data-presentation="overlay"]
-  ):not([data-desktop-overlay-preview]),
-.ui-minimal-app-shell[data-desktop-overlay-left]
-  > .ui-minimal-app-shell__composition
-  > .ui-minimal-app-shell__sidebar[data-mobile-panel-id="left"]:not(
-    [data-presentation="overlay"]
-  ):not([data-desktop-overlay-preview]),
-.ui-minimal-app-shell[data-desktop-overlay-outer-left]
-  > .ui-minimal-app-shell__composition
-  > .ui-minimal-app-shell__sidebar[data-side="left"][data-variant="outer"]:not(
-    [data-presentation="overlay"]
-  ):not([data-desktop-overlay-preview]) {
+.ui-minimal-app-shell__sidebar[data-desktop-constrained][data-constrained-presentation="preview"][data-presentation="inline"] {
   display: none;
 }
 
+.ui-minimal-app-shell__sidebar[data-presentation="replace-main"] {
+  position: absolute;
+  z-index: 31;
+  inset-block-start: var(--ui-shell-replacement-block-start, 0px);
+  inset-block-end: var(--ui-shell-replacement-block-end, 0px);
+  inset-inline-start: var(--ui-shell-replacement-inline-start, 0px);
+  inset-inline-end: var(--ui-shell-replacement-inline-end, 0px);
+  display: flex;
+  width: auto;
+  overflow: hidden;
+  margin: 0;
+  border: var(--ui-shell-main-border);
+  border-radius: var(--ui-shell-main-radius);
+  background: var(--background);
+  box-shadow: none;
+}
+
 .ui-minimal-app-shell__sidebar[data-side="right"][data-state="expanded"] {
   border-inline-start: 1px solid var(--border);
 }
@@ -171,13 +183,11 @@
   min-width: 0;
 }
 
-.ui-minimal-app-shell__sidebar[data-presentation="overlay"][data-side="left"],
-.ui-minimal-app-shell__sidebar[data-desktop-overlay-preview][data-side="left"] {
+.ui-minimal-app-shell__sidebar[data-presentation="overlay"][data-side="left"] {
   width: var(--ui-shell-sidebar-size, var(--ui-shell-left-sidebar-width));
 }
 
-.ui-minimal-app-shell__sidebar[data-presentation="overlay"][data-side="right"],
-.ui-minimal-app-shell__sidebar[data-desktop-overlay-preview][data-side="right"] {
+.ui-minimal-app-shell__sidebar[data-presentation="overlay"][data-side="right"] {
   width: var(--ui-shell-sidebar-size, var(--ui-shell-right-sidebar-width));
 }
 
@@ -271,6 +281,76 @@
   box-shadow: var(--ui-shell-main-shadow);
 }
 
+.ui-minimal-app-shell__surface-layer {
+  position: absolute;
+  z-index: 32;
+  min-width: 0;
+  min-height: 0;
+  pointer-events: none;
+}
+
+.ui-minimal-app-shell__surface-layer-scrim {
+  position: absolute;
+  inset: 0;
+  padding: 0;
+  border: 0;
+  border-radius: var(--ui-shell-main-radius);
+  background: color-mix(in oklab, var(--background) 75%, transparent);
+  pointer-events: auto;
+  cursor: pointer;
+  transition: background-color 150ms ease;
+}
+
+.ui-minimal-app-shell__surface-layer-scrim:hover {
+  background: color-mix(in oklab, var(--background) 65%, transparent);
+}
+
+.ui-minimal-app-shell__surface-layer-surface {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: var(--ui-shell-surface-layer-main-start-allowance);
+  inset-inline-end: var(--ui-shell-surface-layer-inline-end-inset);
+  display: grid;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  grid-template-rows: auto minmax(0, 1fr);
+  border: var(--ui-shell-main-border);
+  border-radius: var(--ui-shell-main-radius);
+  outline: none;
+  background: var(--background);
+  box-shadow: none;
+  pointer-events: auto;
+}
+
+.ui-minimal-app-shell__surface-layer-surface:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: -2px;
+}
+
+.ui-minimal-app-shell__surface-layer-header {
+  display: flex;
+  min-width: 0;
+  min-height: var(--ui-shell-toolbar-height);
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.625rem 0.75rem 0.625rem 1rem;
+}
+
+.ui-minimal-app-shell__surface-layer-body {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.ui-minimal-app-shell__surface-layer-scroll-area {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+}
+
 .ui-minimal-app-shell[data-display-mode="desktop"] .ui-minimal-app-shell__main {
   min-width: min(100%, var(--ui-shell-desktop-min-main-width));
 }
@@ -301,12 +381,6 @@
   margin-inline-end: var(--ui-shell-main-block-inset);
 }
 
-.ui-minimal-app-shell[data-desktop-overlay-right]
-  > .ui-minimal-app-shell__composition
-  > .ui-minimal-app-shell__main {
-  margin-inline-end: var(--ui-shell-main-block-inset);
-}
-
 .ui-minimal-app-shell__toolbar {
   display: flex;
   flex: none;
@@ -434,6 +508,11 @@
   min-height: 0;
 }
 
+.ui-minimal-app-shell[data-display-mode="mobile"]
+  .ui-minimal-app-shell__surface-layer-surface {
+  inset-inline-start: 0;
+}
+
 .ui-minimal-app-shell[data-display-mode="mobile"]
   > .ui-minimal-app-shell__composition {
   display: none;
@@ -445,7 +524,8 @@
   height: 100%;
   min-width: 0;
   min-height: 0;
-  overflow: hidden;
+  /* Stage position belongs to the translated track, not focus scrolling. */
+  overflow: clip;
 }
 
 .ui-minimal-app-shell__mobile-track {

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

@@ -8,15 +8,24 @@
   let {
     ref = $bindable(null),
     tabindex: _tabindex,
+    inert: inertProp,
+    "aria-hidden": ariaHidden,
     class: className,
     children,
     ...restProps
   }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 
   const controller = useAppShell();
+  let mainOccluded = $state(controller.mainOccluded);
+  const unsubscribeProjection = controller.onProjectionChange(() => {
+    mainOccluded = controller.mainOccluded;
+  });
 
   $effect(() => controller.mobile.setMainElement(ref));
-  onDestroy(() => controller.mobile.setMainElement(null));
+  onDestroy(() => {
+    unsubscribeProjection();
+    controller.mobile.setMainElement(null);
+  });
 </script>
 
 <div
@@ -30,6 +39,8 @@
   class={["ui-minimal-app-shell__main", className].filter(Boolean).join(" ")}
   data-ui-component="app-shell"
   data-ui-part="main"
+  inert={Boolean(inertProp) || mainOccluded}
+  aria-hidden={Boolean(inertProp) || mainOccluded ? "true" : ariaHidden}
 >
   {@render children?.()}
 </div>