@sentropic/design-system-svelte 0.34.49 → 0.34.51

package/README.md

@@ -0,0 +1,62 @@
+# `@sentropic/design-system-svelte`
+
+Svelte implementation of the Sentropic design-system component catalog. The package ships ESM JavaScript, TypeScript declarations, and the shared component CSS.
+
+## Installation
+
+```bash
+npm install @sentropic/design-system-svelte @sentropic/design-system-themes
+```
+
+Svelte is a peer dependency:
+
+```bash
+npm install svelte
+```
+
+## Usage
+
+Import the package CSS once at the app or preview boundary, then render components inside `ThemeProvider`.
+
+```svelte
+<script>
+  import { Button, Card, ThemeProvider } from "@sentropic/design-system-svelte";
+  import "@sentropic/design-system-svelte/styles.css";
+</script>
+
+<ThemeProvider>
+  <Card>
+    <strong>Release plan</strong>
+    <Button>Open plan</Button>
+  </Card>
+</ThemeProvider>
+```
+
+`ThemeProvider` defaults to the Sent Tech theme. Tenant themes can be supplied from `@sentropic/design-system-themes`, `@sentropic/design-system-theme-dsfr`, or `@sentropic/design-system-theme-carbon`.
+
+```svelte
+<script>
+  import { ThemeProvider } from "@sentropic/design-system-svelte";
+  import { carbonTheme } from "@sentropic/design-system-theme-carbon";
+</script>
+
+<ThemeProvider theme={carbonTheme}>
+  <!-- your content -->
+</ThemeProvider>
+```
+
+## Exports
+
+- `@sentropic/design-system-svelte`: all public Svelte components and TypeScript props.
+- `@sentropic/design-system-svelte/styles.css`: component CSS consumed by every theme.
+
+The package includes declarations through `dist/index.d.ts` and marks `dist/styles.css` as a side effect so bundlers keep the stylesheet import.
+
+## Build
+
+```bash
+npm --workspace @sentropic/design-system-svelte run build
+npm --workspace @sentropic/design-system-svelte run test
+```
+
+Publishing is handled by `.github/workflows/svelte-publish.yml` with a `svelte-v*` tag.

package/dist/AnomalySwimLaneChart.svelte

@@ -23,6 +23,8 @@
     | "category1" | "category2" | "category3" | "category4"
     | "category5" | "category6" | "category7" | "category8";
 
+  export type AnomalySwimLaneChartScale = "categorical" | "sequential";
+
   export type AnomalySwimLaneBucket = {
     at: number;
     score: number;
@@ -40,6 +42,7 @@
   type AnomalySwimLaneChartProps = {
     data: AnomalySwimLaneSeries[];
     max?: number;
+    scale?: AnomalySwimLaneChartScale;
     label?: string;
     width?: number;
     height?: number;
@@ -50,6 +53,7 @@
   let {
     data = [],
     max,
+    scale = "sequential",
     label,
     width,
     height = 300,
@@ -73,6 +77,10 @@
     return TONES[index];
   }
 
+  function normalizedScale(value: AnomalySwimLaneChartScale | undefined): AnomalySwimLaneChartScale {
+    return value === "categorical" ? "categorical" : "sequential";
+  }
+
   // Tronque une étiquette à la largeur de la marge gauche (approx. par char).
   function ellipsize(text: string, maxChars: number): string {
     if (text.length <= maxChars) return text;
@@ -87,6 +95,7 @@
   }
 
   let hoveredKey: string | null = $state(null);
+  const resolvedScale = $derived(normalizedScale(scale));
 
   const plotWidth = $derived(Math.max(resolvedWidth - MARGIN.left - MARGIN.right, 1));
   const plotHeight = $derived(Math.max(height - MARGIN.top - MARGIN.bottom, 1));
@@ -190,7 +199,7 @@
     return null;
   });
 
-  const classes = () => ["st-anomalySwimLaneChart", className].filter(Boolean).join(" ");
+  const classes = () => ["st-anomalySwimLaneChart", `st-anomalySwimLaneChart--${resolvedScale}`, className].filter(Boolean).join(" ");
 </script>
 
 <div class={classes()}>

package/dist/AnomalySwimLaneChart.svelte.d.ts

@@ -19,6 +19,7 @@
  *   class   string
  */
 export type AnomalySwimLaneTone = "category1" | "category2" | "category3" | "category4" | "category5" | "category6" | "category7" | "category8";
+export type AnomalySwimLaneChartScale = "categorical" | "sequential";
 export type AnomalySwimLaneBucket = {
     at: number;
     score: number;
@@ -30,6 +31,7 @@ export type AnomalySwimLaneSeries = {
 type AnomalySwimLaneChartProps = {
     data: AnomalySwimLaneSeries[];
     max?: number;
+    scale?: AnomalySwimLaneChartScale;
     label?: string;
     width?: number;
     height?: number;

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

@@ -1 +1 @@
-{"version":3,"file":"AnomalySwimLaneChart.svelte.d.ts","sourceRoot":"","sources":["../src/lib/AnomalySwimLaneChart.svelte.ts"],"names":[],"mappings":"AAGE;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,MAAM,mBAAmB,GAC3B,WAAW,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,GACrD,WAAW,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,CAAC;AAE1D,MAAM,MAAM,qBAAqB,GAAG;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,qBAAqB,EAAE,CAAC;CAClC,CAAC;AAMF,KAAK,yBAAyB,GAAG;IAC/B,IAAI,EAAE,qBAAqB,EAAE,CAAC;IAC9B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA+MJ,QAAA,MAAM,oBAAoB,+DAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"AnomalySwimLaneChart.svelte.d.ts","sourceRoot":"","sources":["../src/lib/AnomalySwimLaneChart.svelte.ts"],"names":[],"mappings":"AAGE;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,MAAM,mBAAmB,GAC3B,WAAW,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,GACrD,WAAW,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,CAAC;AAE1D,MAAM,MAAM,yBAAyB,GAAG,aAAa,GAAG,YAAY,CAAC;AAErE,MAAM,MAAM,qBAAqB,GAAG;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,qBAAqB,EAAE,CAAC;CAClC,CAAC;AAMF,KAAK,yBAAyB,GAAG;IAC/B,IAAI,EAAE,qBAAqB,EAAE,CAAC;IAC9B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,yBAAyB,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAqNJ,QAAA,MAAM,oBAAoB,+DAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}

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/CalendarHeatmapChart.svelte

@@ -16,6 +16,8 @@
     date: string;
     value: number;
   };
+
+  export type CalendarHeatmapChartScale = "categorical" | "sequential";
 </script>
 
 <script lang="ts">
@@ -29,6 +31,7 @@
   type CalendarHeatmapChartProps = {
     data: CalendarHeatmapChartDatum[];
     label: string;
+    scale?: CalendarHeatmapChartScale;
     width?: number;
     height?: number;
     class?: string;
@@ -37,6 +40,7 @@
   let {
     data = [],
     label,
+    scale = "sequential",
     width = 480,
     height = 140,
     class: className
@@ -75,6 +79,12 @@
     return Math.round((tsB - tsA) / 86400000);
   }
 
+  function normalizedScale(value: CalendarHeatmapChartScale | undefined): CalendarHeatmapChartScale {
+    return value === "categorical" ? "categorical" : "sequential";
+  }
+
+  const resolvedScale = $derived(normalizedScale(scale));
+
   // Group data by week and day-of-week
   const grid = $derived.by(() => {
     if (data.length === 0) return { cells: [], weeks: 0, monthLabels: [] };
@@ -187,7 +197,7 @@
     hoveredDate = target.getAttribute("data-chart-date") ?? null;
   }
 
-  const classes = () => ["st-calendarHeatmapChart", className].filter(Boolean).join(" ");
+  const classes = () => ["st-calendarHeatmapChart", `st-calendarHeatmapChart--${resolvedScale}`, className].filter(Boolean).join(" ");
 </script>
 
 <div class={classes()}>

package/dist/CalendarHeatmapChart.svelte.d.ts

@@ -15,9 +15,11 @@ export type CalendarHeatmapChartDatum = {
     date: string;
     value: number;
 };
+export type CalendarHeatmapChartScale = "categorical" | "sequential";
 type CalendarHeatmapChartProps = {
     data: CalendarHeatmapChartDatum[];
     label: string;
+    scale?: CalendarHeatmapChartScale;
     width?: number;
     height?: number;
     class?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"CalendarHeatmapChart.svelte.d.ts","sourceRoot":"","sources":["../src/lib/CalendarHeatmapChart.svelte.ts"],"names":[],"mappings":"AAGE;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,yBAAyB,GAAG;IACtC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAMF,KAAK,yBAAyB,GAAG;IAC/B,IAAI,EAAE,yBAAyB,EAAE,CAAC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAgNJ,QAAA,MAAM,oBAAoB,+DAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"CalendarHeatmapChart.svelte.d.ts","sourceRoot":"","sources":["../src/lib/CalendarHeatmapChart.svelte.ts"],"names":[],"mappings":"AAGE;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,yBAAyB,GAAG;IACtC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG,aAAa,GAAG,YAAY,CAAC;AAMrE,KAAK,yBAAyB,GAAG;IAC/B,IAAI,EAAE,yBAAyB,EAAE,CAAC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,yBAAyB,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAuNJ,QAAA,MAAM,oBAAoB,+DAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}

package/dist/Combobox.svelte

@@ -56,6 +56,8 @@
   let expanded = $state(false);
   let activeIndex = $state(-1);
 
+  const inputId = $derived((rest as { id?: string }).id ?? `st-combobox-${Math.random().toString(36).slice(2, 9)}`);
+
   const fieldClasses = () => ["st-field", className].filter(Boolean).join(" ");
   const groupClasses = () => ["st-combobox", `st-combobox--${size}`].join(" ");
   const isInvalid = () => invalid || Boolean(errorText);
@@ -93,6 +95,7 @@
 
   function clear() {
     value = "";
+    activeIndex = -1;
     onchange?.("");
   }
 
@@ -131,11 +134,12 @@
 </script>
 
 <div class={fieldClasses()}>
-  <label class="st-field__control">
+  <label class="st-field__control" for={inputId}>
     {#if label}<span class="st-field__label">{label}</span>{/if}
     <span class={groupClasses()}>
       <input
         {...rest}
+        id={inputId}
         type="text"
         class="st-combobox__control"
         role="combobox"

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

@@ -1 +1 @@
-{"version":3,"file":"Combobox.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Combobox.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAIH,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAGzD,KAAK,aAAa,GAAG,IAAI,CACvB,mBAAmB,EACnB,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,CACjD,GAAG;IACF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,CAAC;AAsJJ,QAAA,MAAM,QAAQ,wDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Combobox.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Combobox.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAIH,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAGzD,KAAK,aAAa,GAAG,IAAI,CACvB,mBAAmB,EACnB,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,CACjD,GAAG;IACF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,CAAC;AAyJJ,QAAA,MAAM,QAAQ,wDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}