@sveltekitchen/sveltekitchen 0.0.0-stage → 1.0.0

package/dist/layout/SidebarProfile.svelte.d.ts

@@ -0,0 +1,19 @@
+export default SidebarProfile;
+type SidebarProfile = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const SidebarProfile: import("svelte").Component<{
+    name?: string;
+    role?: string;
+    initials?: string;
+    avatarSrc?: any;
+    children: any;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    name?: string;
+    role?: string;
+    initials?: string;
+    avatarSrc?: any;
+    children: any;
+} & Record<string, any>;

package/dist/layouts/AppShell.svelte

@@ -0,0 +1,60 @@
+<script>
+  // AppShell — one app layout driven by two independent, bindable menu props:
+  //
+  //   topMenu   → renders a top bar   (omit for no top bar)
+  //   sideMenu  → renders a sidebar   (omit for no sidebar)
+  //
+  //   both  → hybrid (top bar + sidebar)
+  //   one   → top-only or side-only
+  //   none  → just content
+  //
+  // Each menu is its own bindable prop, so users wire and update them
+  // independently:
+  //   <AppShell bind:topMenu bind:sideMenu>{content}</AppShell>
+  //
+  // Menu contract (same for both regions):
+  //   { brand?, sections: [{ label?, items: [{ id, label, icon?, href?, badge?, children? }] }], active? }
+  import TopBar from './TopBar.svelte';
+  import SideBar from './SideBar.svelte';
+
+  let {
+    topMenu   = $bindable(undefined),
+    sideMenu  = $bindable(undefined),
+    sideRight = false,       // place the sidebar on the right
+    actions,                 // snippet: top bar right-side actions
+    footer,                  // snippet: sidebar footer (e.g. profile)
+    children,
+    ...rest
+  } = $props();
+
+  let hasTop  = $derived(!!topMenu);
+  let hasSide = $derived(!!sideMenu);
+
+  // Flatten the top menu's sections into a horizontal item list.
+  let topItems = $derived(hasTop ? (topMenu.sections ?? []).flatMap((s) => s.items ?? []) : []);
+</script>
+
+<div class="lyt lyt-col" {...rest}>
+  {#if hasTop}
+    <TopBar
+      brand={topMenu.brand}
+      items={topItems}
+      active={topMenu.active}
+      {actions}
+    />
+  {/if}
+
+  {#if hasSide}
+    <div class="lyt-row lyt-fill" class:lyt-side-right={sideRight}>
+      <SideBar
+        brand={hasTop ? undefined : sideMenu.brand}
+        sections={sideMenu.sections}
+        active={sideMenu.active}
+        {footer}
+      />
+      <main class="lyt-main"><div class="lyt-inner">{@render children?.()}</div></main>
+    </div>
+  {:else}
+    <main class="lyt-main"><div class="lyt-inner">{@render children?.()}</div></main>
+  {/if}
+</div>

package/dist/layouts/AppShell.svelte.d.ts

@@ -0,0 +1,21 @@
+export default AppShell;
+type AppShell = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const AppShell: import("svelte").Component<{
+    topMenu?: any;
+    sideMenu?: any;
+    sideRight?: boolean;
+    actions: any;
+    footer: any;
+    children: any;
+} & Record<string, any>, {}, "topMenu" | "sideMenu">;
+type $$ComponentProps = {
+    topMenu?: any;
+    sideMenu?: any;
+    sideRight?: boolean;
+    actions: any;
+    footer: any;
+    children: any;
+} & Record<string, any>;

package/dist/layouts/BarLayout.svelte

@@ -0,0 +1,60 @@
+<script>
+  // BarLayout — one app layout driven by two independent, bindable menu props:
+  //
+  //   topMenu   → renders a top bar   (omit for no top bar)
+  //   sideMenu  → renders a sidebar   (omit for no sidebar)
+  //
+  //   both  → hybrid (top bar + sidebar)
+  //   one   → top-only or side-only
+  //   none  → just content
+  //
+  // Each menu is its own bindable prop, so users wire and update them
+  // independently:
+  //   <BarLayout bind:topMenu bind:sideMenu>{content}</AppShell>
+  //
+  // Menu contract (same for both regions):
+  //   { brand?, sections: [{ label?, items: [{ id, label, icon?, href?, badge?, children? }] }], active? }
+  import TopBar from './TopBar.svelte';
+  import SideBar from './SideBar.svelte';
+
+  let {
+    topMenu   = $bindable(undefined),
+    sideMenu  = $bindable(undefined),
+    sideRight = false,       // place the sidebar on the right
+    actions,                 // snippet: top bar right-side actions
+    footer,                  // snippet: sidebar footer (e.g. profile)
+    children,
+    ...rest
+  } = $props();
+
+  let hasTop  = $derived(!!topMenu);
+  let hasSide = $derived(!!sideMenu);
+
+  // Flatten the top menu's sections into a horizontal item list.
+  let topItems = $derived(hasTop ? (topMenu.sections ?? []).flatMap((s) => s.items ?? []) : []);
+</script>
+
+<div class="lyt lyt-col" {...rest}>
+  {#if hasTop}
+    <TopBar
+      brand={topMenu.brand}
+      items={topItems}
+      active={topMenu.active}
+      {actions}
+    />
+  {/if}
+
+  {#if hasSide}
+    <div class="lyt-row lyt-fill" class:lyt-side-right={sideRight}>
+      <SideBar
+        brand={hasTop ? undefined : sideMenu.brand}
+        sections={sideMenu.sections}
+        active={sideMenu.active}
+        {footer}
+      />
+      <main class="lyt-main"><div class="lyt-inner">{@render children?.()}</div></main>
+    </div>
+  {:else}
+    <main class="lyt-main"><div class="lyt-inner">{@render children?.()}</div></main>
+  {/if}
+</div>

package/dist/layouts/BarLayout.svelte.d.ts

@@ -0,0 +1,21 @@
+export default BarLayout;
+type BarLayout = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const BarLayout: import("svelte").Component<{
+    topMenu?: any;
+    sideMenu?: any;
+    sideRight?: boolean;
+    actions: any;
+    footer: any;
+    children: any;
+} & Record<string, any>, {}, "topMenu" | "sideMenu">;
+type $$ComponentProps = {
+    topMenu?: any;
+    sideMenu?: any;
+    sideRight?: boolean;
+    actions: any;
+    footer: any;
+    children: any;
+} & Record<string, any>;

package/dist/layouts/BottomBarLayout.svelte

@@ -0,0 +1,23 @@
+<script>
+  // BottomBarLayout — a fillable content area + a single bottom bar region.
+  // Bottom bar is a horizontal menu pinned to the bottom. Nestable.
+  import TopBar from './TopBar.svelte';
+
+  let {
+    menu = $bindable(undefined),
+    actions,
+    children,
+    ...rest
+  } = $props();
+
+  let items = $derived(menu ? (menu.sections ?? []).flatMap((s) => s.items ?? []) : []);
+</script>
+
+<div class="nl nl-col" {...rest}>
+  <div class="nl-fill nl-scroll">{@render children?.()}</div>
+  {#if menu}
+    <div class="nl-bottom">
+      <TopBar brand={menu.brand} {items} active={menu.active} {actions} />
+    </div>
+  {/if}
+</div>

package/dist/layouts/BottomBarLayout.svelte.d.ts

@@ -0,0 +1,15 @@
+export default BottomBarLayout;
+type BottomBarLayout = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const BottomBarLayout: import("svelte").Component<{
+    menu?: any;
+    actions: any;
+    children: any;
+} & Record<string, any>, {}, "menu">;
+type $$ComponentProps = {
+    menu?: any;
+    actions: any;
+    children: any;
+} & Record<string, any>;

package/dist/layouts/DockLayout.svelte

@@ -0,0 +1,81 @@
+<script>
+  // DockLayout — a macOS-style floating dock: a centered, rounded bar of icons
+  // floating over the content near the bottom. Minimal brand/actions in the
+  // corners. One bindable `menu` drives the dock items.
+  //
+  //   <DockLayout bind:menu>{content}</DockLayout>
+  //
+  // Menu contract (shared):
+  //   { brand?, sections: [{ items: [{ id, label, icon?, href?, children? }] }], active? }
+  import ThemeToggle from '../components/ThemeToggle.svelte';
+
+  let {
+    menu    = $bindable({ brand: {}, sections: [], active: undefined }),
+    actions,          // snippet: top-right actions (defaults to ThemeToggle)
+    children,
+    ...rest
+  } = $props();
+
+  let brand = $derived(menu?.brand ?? {});
+  let items = $derived((menu?.sections ?? []).flatMap((s) => s.items ?? []));
+
+  // Flyout for dock items that have children (opens upward).
+  let openId = $state(null);
+  function toggle(id) { openId = openId === id ? null : id; }
+  $effect(() => {
+    if (openId == null) return;
+    function onDoc(e) { if (!e.target.closest?.('.dk-flywrap')) openId = null; }
+    document.addEventListener('pointerdown', onDoc);
+    return () => document.removeEventListener('pointerdown', onDoc);
+  });
+</script>
+
+<div class="dk" {...rest}>
+  {#if brand?.label}
+    <div class="dk-corner dk-corner-left">
+      {#if brand.icon}<span class="material-symbols-outlined dk-brand-icon">{brand.icon}</span>{/if}
+      <span class="dk-brand-name">{brand.label}</span>
+    </div>
+  {/if}
+  <div class="dk-corner dk-corner-right">
+    {#if actions}{@render actions()}{:else}<ThemeToggle />{/if}
+  </div>
+
+  <main class="dk-main">
+    <div class="dk-inner">{@render children?.()}</div>
+  </main>
+
+  <nav class="dk-dock" aria-label="Primary">
+    {#each items as item}
+      {#if item.children}
+        <div class="dk-flywrap">
+          {#if openId === item.id}
+            <div class="dk-flyout">
+              {#each item.children as child}
+                <a href={child.href} class="dk-flyout-item" onclick={() => (openId = null)}>
+                  {#if child.icon}<span class="material-symbols-outlined">{child.icon}</span>{/if}
+                  {child.label}
+                </a>
+              {/each}
+            </div>
+          {/if}
+          <button
+            class="dk-item"
+            class:active={item.id === menu.active}
+            title={item.label}
+            aria-label={item.label}
+            onclick={() => toggle(item.id)}
+          >
+            {#if item.icon}<span class="material-symbols-outlined">{item.icon}</span>{/if}
+            <span class="dk-label">{item.label}</span>
+          </button>
+        </div>
+      {:else}
+        <a href={item.href} class="dk-item" class:active={item.id === menu.active} title={item.label}>
+          {#if item.icon}<span class="material-symbols-outlined">{item.icon}</span>{/if}
+          <span class="dk-label">{item.label}</span>
+        </a>
+      {/if}
+    {/each}
+  </nav>
+</div>

package/dist/layouts/DockLayout.svelte.d.ts

@@ -0,0 +1,15 @@
+export default DockLayout;
+type DockLayout = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const DockLayout: import("svelte").Component<{
+    menu?: Record<string, any>;
+    actions: any;
+    children: any;
+} & Record<string, any>, {}, "menu">;
+type $$ComponentProps = {
+    menu?: Record<string, any>;
+    actions: any;
+    children: any;
+} & Record<string, any>;

package/dist/layouts/FloatingDockLayout.svelte

@@ -0,0 +1,56 @@
+<script>
+  // FloatingDockLayout — content with a centered floating dock of icons near
+  // the bottom (macOS-style). Nestable single-region layout. Items with
+  // children open an upward flyout.
+  let { menu = $bindable(undefined), children, ...rest } = $props();
+  let items = $derived(menu ? (menu.sections ?? []).flatMap((s) => s.items ?? []) : []);
+
+  let openId = $state(null);
+  const toggle = (id) => { openId = openId === id ? null : id; };
+  $effect(() => {
+    if (openId == null) return;
+    const onDoc = (e) => { if (!e.target.closest?.('.nldk-flywrap')) openId = null; };
+    document.addEventListener('pointerdown', onDoc);
+    return () => document.removeEventListener('pointerdown', onDoc);
+  });
+</script>
+
+<div class="nl nl-col nldk" {...rest}>
+  <div class="nl-fill nl-scroll nldk-content">{@render children?.()}</div>
+  {#if menu}
+    <div class="nldk-dockwrap">
+      <nav class="nldk-dock" aria-label="Primary">
+        {#each items as item}
+          {#if item.children?.length}
+            <div class="nldk-flywrap">
+              {#if openId === item.id}
+                <div class="nldk-flyout">
+                  {#each item.children as child}
+                    <a href={child.href} class="nldk-flyout-item" onclick={() => (openId = null)}>
+                      {#if child.icon}<span class="material-symbols-outlined">{child.icon}</span>{/if}
+                      {child.label}
+                    </a>
+                  {/each}
+                </div>
+              {/if}
+              <button
+                class="nldk-item"
+                class:active={item.id === menu.active || item.children.some((c) => c.id === menu.active)}
+                title={item.label} aria-label={item.label}
+                onclick={() => toggle(item.id)}
+              >
+                {#if item.icon}<span class="material-symbols-outlined">{item.icon}</span>{/if}
+                <span class="nldk-label">{item.label}</span>
+              </button>
+            </div>
+          {:else}
+            <a href={item.href} class="nldk-item" class:active={item.id === menu.active} title={item.label} aria-label={item.label}>
+              {#if item.icon}<span class="material-symbols-outlined">{item.icon}</span>{/if}
+              <span class="nldk-label">{item.label}</span>
+            </a>
+          {/if}
+        {/each}
+      </nav>
+    </div>
+  {/if}
+</div>

package/dist/layouts/FloatingDockLayout.svelte.d.ts

@@ -0,0 +1,13 @@
+export default FloatingDockLayout;
+type FloatingDockLayout = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const FloatingDockLayout: import("svelte").Component<{
+    menu?: any;
+    children: any;
+} & Record<string, any>, {}, "menu">;
+type $$ComponentProps = {
+    menu?: any;
+    children: any;
+} & Record<string, any>;

package/dist/layouts/FloatingLayout.svelte

@@ -0,0 +1,80 @@
+<script>
+  // FloatingLayout — a layout where the menus float as detached, rounded cards
+  // over the content, rather than attached bars.
+  //
+  //   topMenu   → a floating card along the top    (horizontal)
+  //   sideMenu  → a floating card on the left       (vertical)
+  //
+  // Each is its own bindable prop, using the shared menu contract:
+  //   { brand?, sections: [{ label?, items: [{ id, label, icon?, href?, badge?, children? }] }], active? }
+  //
+  //   <FloatingLayout bind:topMenu bind:sideMenu>{content}</FloatingShell>
+  import ThemeToggle from '../components/ThemeToggle.svelte';
+
+  let {
+    topMenu   = $bindable(undefined),
+    sideMenu  = $bindable(undefined),
+    actions,                 // snippet: top card right-side actions
+    footer,                  // snippet: side card footer
+    children,
+    ...rest
+  } = $props();
+
+  let hasTop  = $derived(!!topMenu);
+  let hasSide = $derived(!!sideMenu);
+  let topItems = $derived(hasTop ? (topMenu.sections ?? []).flatMap((s) => s.items ?? []) : []);
+</script>
+
+<div class="fl-root" {...rest}>
+  {#if hasTop}
+    <div class="fl-topcard">
+      {#if topMenu.brand?.label}
+        <div class="fl-brand">
+          {#if topMenu.brand.icon}<span class="material-symbols-outlined fl-brand-icon">{topMenu.brand.icon}</span>{/if}
+          {topMenu.brand.label}
+        </div>
+      {/if}
+      <nav class="fl-topnav">
+        {#each topItems as item}
+          <a href={item.href} class="fl-toplink" class:active={item.id === topMenu.active}>
+            {#if item.icon}<span class="material-symbols-outlined">{item.icon}</span>{/if}
+            {item.label}
+          </a>
+        {/each}
+      </nav>
+      <div class="fl-actions">
+        {#if actions}{@render actions()}{:else}<ThemeToggle />{/if}
+      </div>
+    </div>
+  {/if}
+
+  <div class="fl-body">
+    {#if hasSide}
+      <aside class="fl-sidecard">
+        {#if sideMenu.brand?.label && !hasTop}
+          <div class="fl-brand fl-side-brand">
+            {#if sideMenu.brand.icon}<span class="material-symbols-outlined fl-brand-icon">{sideMenu.brand.icon}</span>{/if}
+            {sideMenu.brand.label}
+          </div>
+        {/if}
+        <nav class="fl-sidenav">
+          {#each sideMenu.sections as section}
+            {#if section.label}<div class="fl-side-label">{section.label}</div>{/if}
+            {#each section.items as item}
+              <a href={item.href} class="fl-sidelink" class:active={item.id === sideMenu.active}>
+                {#if item.icon}<span class="material-symbols-outlined">{item.icon}</span>{/if}
+                <span class="fl-sidelabel">{item.label}</span>
+                {#if item.badge != null}<span class="fl-badge">{item.badge}</span>{/if}
+              </a>
+            {/each}
+          {/each}
+        </nav>
+        {#if footer}<div class="fl-side-foot">{@render footer()}</div>{/if}
+      </aside>
+    {/if}
+
+    <main class="fl-content">
+      <div class="fl-inner">{@render children?.()}</div>
+    </main>
+  </div>
+</div>

package/dist/layouts/FloatingLayout.svelte.d.ts

@@ -0,0 +1,19 @@
+export default FloatingLayout;
+type FloatingLayout = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const FloatingLayout: import("svelte").Component<{
+    topMenu?: any;
+    sideMenu?: any;
+    actions: any;
+    footer: any;
+    children: any;
+} & Record<string, any>, {}, "topMenu" | "sideMenu">;
+type $$ComponentProps = {
+    topMenu?: any;
+    sideMenu?: any;
+    actions: any;
+    footer: any;
+    children: any;
+} & Record<string, any>;

package/dist/layouts/FloatingLeftLayout.svelte

@@ -0,0 +1,59 @@
+<script>
+  // FloatingLeftLayout — a detached, rounded left menu card floating over the
+  // content. Nestable single-region layout. Supports 2-level submenus.
+  let { menu = $bindable(undefined), footer, children, ...rest } = $props();
+  let brand = $derived(menu?.brand ?? {});
+
+  let toggled = $state({});
+  const isChildActive = (item) => item.children?.some((c) => c.id === menu?.active);
+  const isOpen = (item) => toggled[item.id] ?? isChildActive(item);
+  const toggle = (item) => { toggled = { ...toggled, [item.id]: !isOpen(item) }; };
+</script>
+
+<div class="nl nl-row nlf-pad" {...rest}>
+  {#if menu}
+    <aside class="nlf-sidecard">
+      {#if brand.label}
+        <div class="nlf-brand nlf-side-brand">
+          {#if brand.icon}<span class="material-symbols-outlined nlf-brand-icon">{brand.icon}</span>{/if}
+          {brand.label}
+        </div>
+      {/if}
+      <nav class="nlf-sidenav">
+        {#each (menu.sections ?? []) as section}
+          {#if section.label}<div class="nlf-side-label">{section.label}</div>{/if}
+          {#each section.items as item}
+            {#if item.children?.length}
+              <button type="button" class="nlf-sidelink nlf-parent"
+                class:active={item.id === menu.active || isChildActive(item)}
+                aria-expanded={isOpen(item)} onclick={() => toggle(item)}>
+                {#if item.icon}<span class="material-symbols-outlined">{item.icon}</span>{/if}
+                <span class="nlf-sidelabel">{item.label}</span>
+                {#if item.badge != null}<span class="nlf-badge">{item.badge}</span>{/if}
+                <span class="material-symbols-outlined nlf-chevron" class:open={isOpen(item)}>chevron_right</span>
+              </button>
+              {#if isOpen(item)}
+                <div class="nlf-subnav">
+                  {#each item.children as child}
+                    <a href={child.href} class="nlf-sublink" class:active={child.id === menu.active}>
+                      {#if child.icon}<span class="material-symbols-outlined">{child.icon}</span>{/if}
+                      <span class="nlf-sidelabel">{child.label}</span>
+                    </a>
+                  {/each}
+                </div>
+              {/if}
+            {:else}
+              <a href={item.href} class="nlf-sidelink" class:active={item.id === menu.active}>
+                {#if item.icon}<span class="material-symbols-outlined">{item.icon}</span>{/if}
+                <span class="nlf-sidelabel">{item.label}</span>
+                {#if item.badge != null}<span class="nlf-badge">{item.badge}</span>{/if}
+              </a>
+            {/if}
+          {/each}
+        {/each}
+      </nav>
+      {#if footer}<div class="nlf-side-foot">{@render footer()}</div>{/if}
+    </aside>
+  {/if}
+  <div class="nl-fill nl-scroll nlf-content">{@render children?.()}</div>
+</div>

package/dist/layouts/FloatingLeftLayout.svelte.d.ts

@@ -0,0 +1,15 @@
+export default FloatingLeftLayout;
+type FloatingLeftLayout = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const FloatingLeftLayout: import("svelte").Component<{
+    menu?: any;
+    footer: any;
+    children: any;
+} & Record<string, any>, {}, "menu">;
+type $$ComponentProps = {
+    menu?: any;
+    footer: any;
+    children: any;
+} & Record<string, any>;

package/dist/layouts/FloatingShell.svelte

@@ -0,0 +1,80 @@
+<script>
+  // FloatingShell — a layout where the menus float as detached, rounded cards
+  // over the content, rather than attached bars.
+  //
+  //   topMenu   → a floating card along the top    (horizontal)
+  //   sideMenu  → a floating card on the left       (vertical)
+  //
+  // Each is its own bindable prop, using the shared menu contract:
+  //   { brand?, sections: [{ label?, items: [{ id, label, icon?, href?, badge?, children? }] }], active? }
+  //
+  //   <FloatingShell bind:topMenu bind:sideMenu>{content}</FloatingShell>
+  import ThemeToggle from '../components/ThemeToggle.svelte';
+
+  let {
+    topMenu   = $bindable(undefined),
+    sideMenu  = $bindable(undefined),
+    actions,                 // snippet: top card right-side actions
+    footer,                  // snippet: side card footer
+    children,
+    ...rest
+  } = $props();
+
+  let hasTop  = $derived(!!topMenu);
+  let hasSide = $derived(!!sideMenu);
+  let topItems = $derived(hasTop ? (topMenu.sections ?? []).flatMap((s) => s.items ?? []) : []);
+</script>
+
+<div class="fl-root" {...rest}>
+  {#if hasTop}
+    <div class="fl-topcard">
+      {#if topMenu.brand?.label}
+        <div class="fl-brand">
+          {#if topMenu.brand.icon}<span class="material-symbols-outlined fl-brand-icon">{topMenu.brand.icon}</span>{/if}
+          {topMenu.brand.label}
+        </div>
+      {/if}
+      <nav class="fl-topnav">
+        {#each topItems as item}
+          <a href={item.href} class="fl-toplink" class:active={item.id === topMenu.active}>
+            {#if item.icon}<span class="material-symbols-outlined">{item.icon}</span>{/if}
+            {item.label}
+          </a>
+        {/each}
+      </nav>
+      <div class="fl-actions">
+        {#if actions}{@render actions()}{:else}<ThemeToggle />{/if}
+      </div>
+    </div>
+  {/if}
+
+  <div class="fl-body">
+    {#if hasSide}
+      <aside class="fl-sidecard">
+        {#if sideMenu.brand?.label && !hasTop}
+          <div class="fl-brand fl-side-brand">
+            {#if sideMenu.brand.icon}<span class="material-symbols-outlined fl-brand-icon">{sideMenu.brand.icon}</span>{/if}
+            {sideMenu.brand.label}
+          </div>
+        {/if}
+        <nav class="fl-sidenav">
+          {#each sideMenu.sections as section}
+            {#if section.label}<div class="fl-side-label">{section.label}</div>{/if}
+            {#each section.items as item}
+              <a href={item.href} class="fl-sidelink" class:active={item.id === sideMenu.active}>
+                {#if item.icon}<span class="material-symbols-outlined">{item.icon}</span>{/if}
+                <span class="fl-sidelabel">{item.label}</span>
+                {#if item.badge != null}<span class="fl-badge">{item.badge}</span>{/if}
+              </a>
+            {/each}
+          {/each}
+        </nav>
+        {#if footer}<div class="fl-side-foot">{@render footer()}</div>{/if}
+      </aside>
+    {/if}
+
+    <main class="fl-content">
+      <div class="fl-inner">{@render children?.()}</div>
+    </main>
+  </div>
+</div>

package/dist/layouts/FloatingShell.svelte.d.ts

@@ -0,0 +1,19 @@
+export default FloatingShell;
+type FloatingShell = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const FloatingShell: import("svelte").Component<{
+    topMenu?: any;
+    sideMenu?: any;
+    actions: any;
+    footer: any;
+    children: any;
+} & Record<string, any>, {}, "topMenu" | "sideMenu">;
+type $$ComponentProps = {
+    topMenu?: any;
+    sideMenu?: any;
+    actions: any;
+    footer: any;
+    children: any;
+} & Record<string, any>;