@sentropic/design-system-svelte 0.34.48 → 0.34.50

package/dist/AppShell.svelte

@@ -1,3 +1,32 @@
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { SiteConfig } from "./site-config";
+
+  export type AppShellVariant = "site" | "workspace";
+  export type AppShellUtilityMode = "reserve" | "overlay" | "floating";
+  export type AppShellUtilitySide = "left" | "right" | "bottom";
+
+  export type AppShellProps = {
+    variant?: AppShellVariant;
+    config?: SiteConfig;
+    topChrome?: Snippet;
+    primaryRail?: Snippet;
+    navigationPanel?: Snippet;
+    main?: Snippet;
+    contextPanel?: Snippet;
+    utilityPanel?: Snippet;
+    bottomPanel?: Snippet;
+    children?: Snippet;
+    mainId?: string;
+    navigationLabel?: string;
+    contextLabel?: string;
+    utilityLabel?: string;
+    utilityMode?: AppShellUtilityMode;
+    utilitySide?: AppShellUtilitySide;
+    class?: string;
+  };
+</script>
+
 <script lang="ts">
   // App-shell SVELTE : COMPOSE les vrais composants du design system — zéro contrôle
   // bricolé. Triggers = DS Button / IconButton ; menus = DS MenuPopover + Menu ;
@@ -11,24 +40,45 @@
   import Menu from "./Menu.svelte";
   import { Boxes, ChevronDown, Globe, Moon, Palette, Search as SearchIcon, Sun } from "@lucide/svelte";
   import IdentityButton from "./IdentityButton.svelte";
-  import type { SiteConfig } from "./site-config";
 
-  let { config }: { config: SiteConfig } = $props();
+  let {
+    variant,
+    config,
+    topChrome,
+    primaryRail,
+    navigationPanel,
+    main,
+    contextPanel,
+    utilityPanel,
+    bottomPanel,
+    children,
+    mainId = "main",
+    navigationLabel = "Workspace navigation",
+    contextLabel = "Context panel",
+    utilityLabel = "Utility panel",
+    utilityMode = "reserve",
+    utilitySide = "right",
+    class: className
+  }: AppShellProps = $props();
 
-  const brand = $derived(config.brand ?? { name: "Sentropic" });
-  const nav = $derived(Array.isArray(config.nav) ? config.nav : []);
-  const t = $derived(config.theming ?? { themes: [], theme: "" });
+  const mode = $derived(variant ?? (config ? "site" : "workspace"));
+  const siteConfig = $derived(config ?? ({ brand: { name: "Sentropic" }, nav: [], theming: { themes: [], theme: "" } } as SiteConfig));
+  const brand = $derived(siteConfig.brand ?? { name: "Sentropic" });
+  const nav = $derived(Array.isArray(siteConfig.nav) ? siteConfig.nav : []);
+  const t = $derived(siteConfig.theming ?? { themes: [], theme: "" });
+  const siteClasses = $derived(["st-shell", className].filter(Boolean).join(" "));
+  const workspaceClasses = $derived(["st-appShell", "st-appShell--workspace", className].filter(Boolean).join(" "));
 
   const isActive = (item: { href: string; active?: boolean }) =>
     item.active != null
       ? item.active
-      : config.activePath != null &&
-        (item.href === config.activePath || (item.href !== "/" && (config.activePath ?? "").startsWith(item.href)));
+      : siteConfig.activePath != null &&
+        (item.href === siteConfig.activePath || (item.href !== "/" && (siteConfig.activePath ?? "").startsWith(item.href)));
 
   const themeItems = $derived((t.themes ?? []).map((o) => ({ label: o.label, value: o.id })));
-  const fwItems = $derived((config.frameworkSwitcher?.available ?? []).map((o) => ({ label: o.label, value: o.id })));
-  const localeItems = $derived((config.locale?.available ?? []).map((o) => ({ label: o.label, value: o.code })));
-  const fwLabel = $derived((config.frameworkSwitcher?.available ?? []).find((o) => o.id === config.frameworkSwitcher?.current)?.label ?? "");
+  const fwItems = $derived((siteConfig.frameworkSwitcher?.available ?? []).map((o) => ({ label: o.label, value: o.id })));
+  const localeItems = $derived((siteConfig.locale?.available ?? []).map((o) => ({ label: o.label, value: o.code })));
+  const fwLabel = $derived((siteConfig.frameworkSwitcher?.available ?? []).find((o) => o.id === siteConfig.frameworkSwitcher?.current)?.label ?? "");
   const themeLabel = $derived((t.themes ?? []).find((o) => o.id === t.theme)?.label ?? "");
 
   // Ancrage des menus (MenuPopover veut un HTMLElement) : on bind un span tight.
@@ -56,7 +106,7 @@
 {/snippet}
 
 {#snippet navigation()}
-  <nav class="st-shell__nav" aria-label={config.navLabel ?? "Navigation"}>
+  <nav class="st-shell__nav" aria-label={siteConfig.navLabel ?? "Navigation"}>
     {#each nav as item (item.href)}
       <a class="st-shell__navLink" href={item.href} aria-current={isActive(item) ? "page" : undefined}>{item.label}</a>
     {/each}
@@ -65,22 +115,22 @@
 
 {#snippet actions()}
   <div class="st-shell__actions">
-    {#if config.search?.enabled}
-      <Button variant="secondary" size="sm" class="st-shell__search" onclick={() => config.search?.onSearch?.("")}>
+    {#if siteConfig.search?.enabled}
+      <Button variant="secondary" size="sm" class="st-shell__search" onclick={() => siteConfig.search?.onSearch?.("")}>
         <SearchIcon size={16} strokeWidth={2.1} aria-hidden="true" />
-        <span>{config.search.placeholder ?? "Rechercher…"}</span>
+        <span>{siteConfig.search.placeholder ?? "Rechercher…"}</span>
         <kbd class="st-shell__kbd">/</kbd>
       </Button>
     {/if}
 
-    {#if config.frameworkSwitcher?.enabled}
+    {#if siteConfig.frameworkSwitcher?.enabled}
       <span class="st-shell__menuWrap" bind:this={fwEl}>
         <Button variant="secondary" size="sm" class="st-shell__switch" onclick={() => (fwOpen = !fwOpen)} aria-haspopup="menu" aria-expanded={fwOpen}>
           <Boxes size={14} aria-hidden="true" /><span>{fwLabel}</span><ChevronDown size={14} aria-hidden="true" />
         </Button>
       </span>
       <MenuPopover bind:open={fwOpen} trigger={fwEl} placement="bottom-end" label="Framework">
-        <Menu label="Framework" items={fwItems} onselect={(v) => { config.frameworkSwitcher?.onChange?.(v); fwOpen = false; }} />
+        <Menu label="Framework" items={fwItems} onselect={(v) => { siteConfig.frameworkSwitcher?.onChange?.(v); fwOpen = false; }} />
       </MenuPopover>
     {/if}
 
@@ -101,32 +151,81 @@
       </IconButton>
     {/if}
 
-    {#if config.locale}
+    {#if siteConfig.locale}
       <span class="st-shell__menuWrap" bind:this={localeEl}>
         <Button variant="secondary" size="sm" class="st-shell__switch" onclick={() => (localeOpen = !localeOpen)} aria-haspopup="menu" aria-expanded={localeOpen}>
-          <Globe size={14} aria-hidden="true" /><span>{(config.locale.current ?? "").toUpperCase()}</span><ChevronDown size={14} aria-hidden="true" />
+          <Globe size={14} aria-hidden="true" /><span>{(siteConfig.locale.current ?? "").toUpperCase()}</span><ChevronDown size={14} aria-hidden="true" />
         </Button>
       </span>
-      <MenuPopover bind:open={localeOpen} trigger={localeEl} placement="bottom-end" label={config.locale.label ?? "Langue"}>
-        <Menu label={config.locale.label ?? "Langue"} items={localeItems} onselect={(v) => { config.locale?.onChange?.(v); localeOpen = false; }} />
+      <MenuPopover bind:open={localeOpen} trigger={localeEl} placement="bottom-end" label={siteConfig.locale.label ?? "Langue"}>
+        <Menu label={siteConfig.locale.label ?? "Langue"} items={localeItems} onselect={(v) => { siteConfig.locale?.onChange?.(v); localeOpen = false; }} />
       </MenuPopover>
     {/if}
 
-    {#if config.identity}
+    {#if siteConfig.identity}
       <IdentityButton
         mode="icon"
-        authState={config.identity.state}
-        user={config.identity.user ?? null}
-        signInLabel={config.identity.label ?? "Se connecter"}
-        onSignIn={() => config.identity?.onSignIn?.()}
-        onSignOut={() => config.identity?.onSignOut?.()}
-        menu={config.identity.menu ?? []}
+        authState={siteConfig.identity.state}
+        user={siteConfig.identity.user ?? null}
+        signInLabel={siteConfig.identity.label ?? "Se connecter"}
+        onSignIn={() => siteConfig.identity?.onSignIn?.()}
+        onSignOut={() => siteConfig.identity?.onSignOut?.()}
+        menu={siteConfig.identity.menu ?? []}
       />
     {/if}
   </div>
 {/snippet}
 
-<Header class="st-shell" label={config.brand?.label ?? "Navigation"} logo={logo} navigation={navigation} actions={actions} />
+{#if mode === "workspace"}
+  <div
+    class={workspaceClasses}
+    data-st-app-shell-variant="workspace"
+    data-utility-mode={utilityMode}
+    data-utility-side={utilitySide}
+  >
+    {#if topChrome}
+      <div class="st-appShell__topChrome">
+        {@render topChrome()}
+      </div>
+    {/if}
+    <div class="st-appShell__body">
+      {#if primaryRail}
+        <aside class="st-appShell__primaryRail" aria-label="Primary rail">
+          {@render primaryRail()}
+        </aside>
+      {/if}
+      {#if navigationPanel}
+        <aside class="st-appShell__navigationPanel" aria-label={navigationLabel}>
+          {@render navigationPanel()}
+        </aside>
+      {/if}
+      <main class="st-appShell__main" id={mainId}>
+        {#if main}
+          {@render main()}
+        {:else if children}
+          {@render children()}
+        {/if}
+      </main>
+      {#if contextPanel}
+        <aside class="st-appShell__contextPanel" aria-label={contextLabel}>
+          {@render contextPanel()}
+        </aside>
+      {/if}
+      {#if utilityPanel}
+        <aside class="st-appShell__utilityPanel" aria-label={utilityLabel}>
+          {@render utilityPanel()}
+        </aside>
+      {/if}
+    </div>
+    {#if bottomPanel}
+      <section class="st-appShell__bottomPanel" aria-label="Workspace tools">
+        {@render bottomPanel()}
+      </section>
+    {/if}
+  </div>
+{:else}
+  <Header class={siteClasses} label={siteConfig.brand?.label ?? "Navigation"} logo={logo} navigation={navigation} actions={actions} />
+{/if}
 
 <style>
   /* Hauteur de barre alignée sur la référence docs (80px) : le Header DS lit
@@ -164,4 +263,161 @@
   .st-shell__actions { display: flex; align-items: center; gap: var(--st-spacing-2, 0.5rem); }
   .st-shell__menuWrap { display: inline-flex; }
   .st-shell__kbd { border: 1px solid var(--st-semantic-border-subtle); border-radius: 0.25rem; font-size: 0.6875rem; padding: 0 0.3rem; color: var(--st-semantic-text-secondary); }
+
+  .st-appShell {
+    --st-appShell-rail-width: var(--st-component-appShell-railWidth, 4.5rem);
+    --st-appShell-navigation-width: var(--st-component-appShell-navigationWidth, 20rem);
+    --st-appShell-context-width: var(--st-component-appShell-contextWidth, 22rem);
+    --st-appShell-utility-width: var(--st-component-appShell-utilityWidth, 24rem);
+    background: var(--st-component-appShell-background, var(--st-semantic-surface-default));
+    color: var(--st-semantic-text-primary);
+    display: grid;
+    grid-template-rows: auto minmax(0, 1fr) auto;
+    min-block-size: 100%;
+    position: relative;
+  }
+
+  .st-appShell__topChrome {
+    border-block-end: 1px solid var(--st-component-appShell-border, var(--st-semantic-border-subtle));
+    min-inline-size: 0;
+    z-index: var(--st-component-appShell-top-zIndex, 30);
+  }
+
+  .st-appShell__body {
+    display: grid;
+    grid-template-columns:
+      minmax(0, auto)
+      minmax(0, auto)
+      minmax(0, 1fr)
+      minmax(0, auto)
+      minmax(0, auto);
+    min-block-size: 0;
+    min-inline-size: 0;
+    position: relative;
+  }
+
+  .st-appShell__primaryRail {
+    inline-size: var(--st-appShell-rail-width);
+    order: 10;
+  }
+
+  .st-appShell__navigationPanel {
+    inline-size: var(--st-appShell-navigation-width);
+    order: 20;
+  }
+
+  .st-appShell__contextPanel {
+    inline-size: var(--st-appShell-context-width);
+    order: 40;
+  }
+
+  .st-appShell__utilityPanel {
+    inline-size: var(--st-appShell-utility-width);
+    order: 50;
+  }
+
+  .st-appShell__main {
+    order: 30;
+  }
+
+  .st-appShell__primaryRail,
+  .st-appShell__navigationPanel,
+  .st-appShell__contextPanel,
+  .st-appShell__utilityPanel {
+    background: var(--st-component-appShell-panelSurface, var(--st-semantic-surface-raised));
+    border-color: var(--st-component-appShell-border, var(--st-semantic-border-subtle));
+    min-block-size: 0;
+    min-inline-size: 0;
+    overflow: hidden;
+  }
+
+  .st-appShell__primaryRail,
+  .st-appShell__navigationPanel {
+    border-inline-end-style: solid;
+    border-inline-end-width: 1px;
+  }
+
+  .st-appShell__contextPanel,
+  .st-appShell__utilityPanel {
+    border-inline-start-style: solid;
+    border-inline-start-width: 1px;
+  }
+
+  .st-appShell[data-utility-side="left"] .st-appShell__utilityPanel {
+    border-inline-end-style: solid;
+    border-inline-end-width: 1px;
+    border-inline-start-width: 0;
+    order: 25;
+  }
+
+  .st-appShell[data-utility-side="bottom"] .st-appShell__utilityPanel {
+    border-block-start: 1px solid var(--st-component-appShell-border, var(--st-semantic-border-subtle));
+    border-inline-start-width: 0;
+    grid-column: 1 / -1;
+    inline-size: auto;
+    order: 60;
+  }
+
+  .st-appShell__main {
+    min-block-size: 0;
+    min-inline-size: 0;
+    overflow: auto;
+  }
+
+  .st-appShell__bottomPanel {
+    background: var(--st-component-appShell-panelSurface, var(--st-semantic-surface-raised));
+    border-block-start: 1px solid var(--st-component-appShell-border, var(--st-semantic-border-subtle));
+    min-block-size: 0;
+  }
+
+  .st-appShell[data-utility-mode="overlay"] .st-appShell__utilityPanel,
+  .st-appShell[data-utility-mode="floating"] .st-appShell__utilityPanel {
+    box-shadow: var(--st-component-appShell-utilityShadow, 0 18px 45px rgb(15 23 42 / 0.18));
+    max-block-size: 100%;
+    position: absolute;
+    z-index: var(--st-component-appShell-utility-zIndex, 40);
+  }
+
+  .st-appShell[data-utility-mode="overlay"][data-utility-side="right"] .st-appShell__utilityPanel,
+  .st-appShell[data-utility-mode="floating"][data-utility-side="right"] .st-appShell__utilityPanel {
+    inset-block: 0;
+    inset-inline-end: 0;
+  }
+
+  .st-appShell[data-utility-mode="overlay"][data-utility-side="left"] .st-appShell__utilityPanel,
+  .st-appShell[data-utility-mode="floating"][data-utility-side="left"] .st-appShell__utilityPanel {
+    inset-block: 0;
+    inset-inline-start: 0;
+  }
+
+  .st-appShell[data-utility-mode="overlay"][data-utility-side="bottom"] .st-appShell__utilityPanel,
+  .st-appShell[data-utility-mode="floating"][data-utility-side="bottom"] .st-appShell__utilityPanel {
+    block-size: var(--st-component-appShell-utilityBottomHeight, min(40%, 20rem));
+    inline-size: auto;
+    inset-block-end: 0;
+    inset-inline: 0;
+  }
+
+  .st-appShell[data-utility-mode="floating"] .st-appShell__utilityPanel {
+    border: 1px solid var(--st-component-appShell-border, var(--st-semantic-border-subtle));
+    border-radius: var(--st-radius-lg, 0.75rem);
+    margin: var(--st-spacing-4, 1rem);
+  }
+
+  @media (max-width: 48rem) {
+    .st-appShell__body {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .st-appShell__primaryRail,
+    .st-appShell__navigationPanel,
+    .st-appShell__contextPanel,
+    .st-appShell__utilityPanel {
+      border-inline: 0;
+      border-block-end: 1px solid var(--st-component-appShell-border, var(--st-semantic-border-subtle));
+      inline-size: auto;
+      max-block-size: min(60vh, 28rem);
+    }
+  }
 </style>

package/dist/AppShell.svelte.d.ts

@@ -1,8 +1,28 @@
+import type { Snippet } from "svelte";
 import type { SiteConfig } from "./site-config";
-type $$ComponentProps = {
-    config: SiteConfig;
+export type AppShellVariant = "site" | "workspace";
+export type AppShellUtilityMode = "reserve" | "overlay" | "floating";
+export type AppShellUtilitySide = "left" | "right" | "bottom";
+export type AppShellProps = {
+    variant?: AppShellVariant;
+    config?: SiteConfig;
+    topChrome?: Snippet;
+    primaryRail?: Snippet;
+    navigationPanel?: Snippet;
+    main?: Snippet;
+    contextPanel?: Snippet;
+    utilityPanel?: Snippet;
+    bottomPanel?: Snippet;
+    children?: Snippet;
+    mainId?: string;
+    navigationLabel?: string;
+    contextLabel?: string;
+    utilityLabel?: string;
+    utilityMode?: AppShellUtilityMode;
+    utilitySide?: AppShellUtilitySide;
+    class?: string;
 };
-declare const AppShell: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const AppShell: import("svelte").Component<AppShellProps, {}, "">;
 type AppShell = ReturnType<typeof AppShell>;
 export default AppShell;
 //# sourceMappingURL=AppShell.svelte.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"AppShell.svelte.d.ts","sourceRoot":"","sources":["../src/lib/AppShell.svelte.ts"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE/C,KAAK,gBAAgB,GAAI;IAAE,MAAM,EAAE,UAAU,CAAA;CAAE,CAAC;AA+HjD,QAAA,MAAM,QAAQ,sDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"AppShell.svelte.d.ts","sourceRoot":"","sources":["../src/lib/AppShell.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,WAAW,CAAC;AACnD,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AACrE,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE9D,MAAM,MAAM,aAAa,GAAG;IAC1B,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,mBAAmB,CAAC;IAClC,WAAW,CAAC,EAAE,mBAAmB,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAiNJ,QAAA,MAAM,QAAQ,mDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/ContextPanel.svelte

@@ -0,0 +1,86 @@
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export interface ContextPanelProps {
+    title?: string;
+    subtitle?: string;
+    label?: string;
+    actions?: Snippet;
+    footer?: Snippet;
+    children?: Snippet;
+    class?: string;
+  }
+</script>
+
+<script lang="ts">
+  let { title, subtitle, label, actions, footer, children, class: className }: ContextPanelProps = $props();
+  const classes = $derived(["st-contextPanel", className].filter(Boolean).join(" "));
+</script>
+
+<aside class={classes} aria-label={label ?? title ?? "Context panel"}>
+  {#if title || subtitle || actions}
+    <header class="st-contextPanel__header">
+      <div class="st-contextPanel__heading">
+        {#if title}<h2 class="st-contextPanel__title">{title}</h2>{/if}
+        {#if subtitle}<p class="st-contextPanel__subtitle">{subtitle}</p>{/if}
+      </div>
+      {#if actions}<div class="st-contextPanel__actions">{@render actions()}</div>{/if}
+    </header>
+  {/if}
+  <div class="st-contextPanel__body">{@render children?.()}</div>
+  {#if footer}<footer class="st-contextPanel__footer">{@render footer()}</footer>{/if}
+</aside>
+
+<style>
+  .st-contextPanel {
+    background: var(--st-component-contextPanel-surface, var(--st-semantic-surface-raised));
+    color: var(--st-semantic-text-primary);
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+    block-size: 100%;
+    min-block-size: 0;
+  }
+
+  .st-contextPanel__header,
+  .st-contextPanel__footer {
+    border-color: var(--st-component-contextPanel-border, var(--st-semantic-border-subtle));
+    padding: var(--st-spacing-4, 1rem);
+  }
+
+  .st-contextPanel__header {
+    align-items: start;
+    border-block-end-style: solid;
+    border-block-end-width: 1px;
+    display: flex;
+    gap: var(--st-spacing-3, 0.75rem);
+    justify-content: space-between;
+  }
+
+  .st-contextPanel__footer {
+    border-block-start-style: solid;
+    border-block-start-width: 1px;
+  }
+
+  .st-contextPanel__title,
+  .st-contextPanel__subtitle {
+    margin: 0;
+  }
+
+  .st-contextPanel__title {
+    font-size: 1rem;
+    line-height: 1.3;
+  }
+
+  .st-contextPanel__subtitle {
+    color: var(--st-semantic-text-secondary);
+    font-size: 0.8125rem;
+    line-height: 1.4;
+    margin-block-start: var(--st-spacing-1, 0.25rem);
+  }
+
+  .st-contextPanel__body {
+    min-block-size: 0;
+    overflow: auto;
+    padding: var(--st-spacing-4, 1rem);
+  }
+</style>

package/dist/ContextPanel.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from "svelte";
+export interface ContextPanelProps {
+    title?: string;
+    subtitle?: string;
+    label?: string;
+    actions?: Snippet;
+    footer?: Snippet;
+    children?: Snippet;
+    class?: string;
+}
+declare const ContextPanel: import("svelte").Component<ContextPanelProps, {}, "">;
+type ContextPanel = ReturnType<typeof ContextPanel>;
+export default ContextPanel;
+//# sourceMappingURL=ContextPanel.svelte.d.ts.map

package/dist/ContextPanel.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextPanel.svelte.d.ts","sourceRoot":"","sources":["../src/lib/ContextPanel.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,MAAM,WAAW,iBAAiB;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA2BH,QAAA,MAAM,YAAY,uDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/NavDrawer.svelte

@@ -0,0 +1,46 @@
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { NavShellSide } from "./NavShell.svelte";
+
+  export interface NavDrawerProps {
+    title?: string;
+    subtitle?: string;
+    label?: string;
+    search?: Snippet;
+    footer?: Snippet;
+    children: Snippet;
+    open?: boolean;
+    side?: NavShellSide;
+    class?: string;
+  }
+</script>
+
+<script lang="ts">
+  import NavShell from "./NavShell.svelte";
+
+  let {
+    title,
+    subtitle,
+    label,
+    search,
+    footer,
+    children,
+    open = $bindable(false),
+    side = "left",
+    class: className
+  }: NavDrawerProps = $props();
+</script>
+
+<NavShell
+  bind:open
+  variant="drawer"
+  {title}
+  {subtitle}
+  {label}
+  {search}
+  {footer}
+  {side}
+  class={["st-navDrawer", className].filter(Boolean).join(" ")}
+>
+  {@render children()}
+</NavShell>

package/dist/NavDrawer.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Snippet } from "svelte";
+import type { NavShellSide } from "./NavShell.svelte";
+export interface NavDrawerProps {
+    title?: string;
+    subtitle?: string;
+    label?: string;
+    search?: Snippet;
+    footer?: Snippet;
+    children: Snippet;
+    open?: boolean;
+    side?: NavShellSide;
+    class?: string;
+}
+declare const NavDrawer: import("svelte").Component<NavDrawerProps, {}, "open">;
+type NavDrawer = ReturnType<typeof NavDrawer>;
+export default NavDrawer;
+//# sourceMappingURL=NavDrawer.svelte.d.ts.map

package/dist/NavDrawer.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavDrawer.svelte.d.ts","sourceRoot":"","sources":["../src/lib/NavDrawer.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEtD,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA6BH,QAAA,MAAM,SAAS,wDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}