@noxlovette/material 0.3.2 → 0.4.0

package/dist/components/containers/pane/Pane.svelte

@@ -0,0 +1,78 @@
+<!--
+@component
+A single content region. Used standalone as a page-level wrapper (centered column,
+padding/gap, optional background), or as a child of PaneGrid to become one region
+of a multi-pane layout — a sidebar, a detail column, a supporting panel — via
+`width`/`resizable`/`sticky`/`visibleFrom`/`hiddenFrom`. A `resizable` pane doesn't
+own a drag handle itself — place a `PaneHandle` with a matching `persistKey`
+alongside it in the PaneGrid; this pane just mirrors the width it drags to.
+
+With `full` (the default), the pane's min-height is `100dvh` minus
+`--appbar-height`, a CSS custom property `AppBar` publishes on the document root
+while mounted (0px otherwise) — automatic, no props needed here. A hand-rolled
+fixed top bar instead of `AppBar` won't set it, so set `--appbar-height: <px>` on
+the document root yourself to get the same behavior.
+-->
+<script lang="ts">
+  import clsx from 'clsx';
+  import { onMount } from 'svelte';
+  import { pane, responsiveTables } from './theme.js';
+  import { paneWidths } from './resizeStore.svelte.js';
+  import type { PaneProps } from './types.js';
+
+  let {
+    children,
+    background = true,
+    full = true,
+    padding = 'md',
+    gap = 'md',
+    rounded = true,
+    width = $bindable(undefined),
+    resizable = false,
+    persistKey,
+    sticky = false,
+    stickyTop = 0,
+    visibleFrom,
+    hiddenFrom,
+    class: className,
+    contentClass,
+    ...rest
+  }: PaneProps = $props();
+
+  const flexible = $derived(width === undefined);
+
+  const { base, content } = $derived(
+    pane({ padding, gap, full, background, rounded, flexible, sticky })
+  );
+
+  const visibilityClass = $derived(
+    clsx(
+      visibleFrom && responsiveTables.visibleFrom[visibleFrom],
+      hiddenFrom && responsiveTables.hiddenFrom[hiddenFrom]
+    )
+  );
+
+  const style = $derived(
+    clsx(
+      !flexible && `width: ${width}px; flex-basis: ${width}px;`,
+      sticky && `--pane-sticky-top: ${stickyTop}px;`
+    )
+  );
+
+  onMount(() => {
+    if (!resizable || !persistKey) return;
+    width = paneWidths.hydrate(persistKey, width ?? 200);
+  });
+
+  $effect(() => {
+    if (!resizable || !persistKey) return;
+    const stored = paneWidths.get(persistKey);
+    if (stored !== undefined) width = stored;
+  });
+</script>
+
+<div class={base({ class: clsx(className, visibilityClass) })} {style} {...rest}>
+  <div class={content({ class: clsx(contentClass) })}>
+    {@render children()}
+  </div>
+</div>

package/dist/components/containers/pane/Pane.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { PaneProps } from './types.js';
+/**
+ * A single content region. Used standalone as a page-level wrapper (centered column,
+ * padding/gap, optional background), or as a child of PaneGrid to become one region
+ * of a multi-pane layout — a sidebar, a detail column, a supporting panel — via
+ * `width`/`resizable`/`sticky`/`visibleFrom`/`hiddenFrom`. A `resizable` pane doesn't
+ * own a drag handle itself — place a `PaneHandle` with a matching `persistKey`
+ * alongside it in the PaneGrid; this pane just mirrors the width it drags to.
+ *
+ * With `full` (the default), the pane's min-height is `100dvh` minus
+ * `--appbar-height`, a CSS custom property `AppBar` publishes on the document root
+ * while mounted (0px otherwise) — automatic, no props needed here. A hand-rolled
+ * fixed top bar instead of `AppBar` won't set it, so set `--appbar-height: <px>` on
+ * the document root yourself to get the same behavior.
+ */
+declare const Pane: import("svelte").Component<PaneProps, {}, "width">;
+type Pane = ReturnType<typeof Pane>;
+export default Pane;

package/dist/components/containers/pane/PaneGrid.stories.svelte

@@ -0,0 +1,134 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import PaneGrid from './PaneGrid.svelte';
+  import Pane from './Pane.svelte';
+  import PaneHandle from './PaneHandle.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Containers/Pane Grid',
+    component: PaneGrid
+  });
+</script>
+
+<!--
+  Resizable two-column split — replaces the old SplitPane. A PaneHandle sits
+  between the two Panes as its own flex child (not clipped inside the left
+  Pane the way a self-owned handle was) and drags the left Pane's width via
+  a shared persistKey. Drag near 360/412px to feel it snap.
+-->
+<Story name="Resizable Split" asChild>
+  <div
+    class="border-md-sys-color-outline-variant relative h-[420px] overflow-hidden rounded-lg border"
+  >
+    <PaneGrid gap="none" class="h-full">
+      <Pane
+        width={320}
+        resizable
+        persistKey="storybook:pane-grid-split"
+        rounded={false}
+        background={false}
+        full={false}
+      >
+        <div class="p-4">
+          <p class="md-sys-typescale-title-small mb-2">Left pane</p>
+          <p class="text-md-sys-color-on-surface-variant text-sm">
+            Drag the handle to resize — persisted to localStorage, and snaps near 360/412px.
+          </p>
+        </div>
+      </Pane>
+      <PaneHandle persistKey="storybook:pane-grid-split" min={240} max={560} />
+      <Pane rounded={false} full={false}>
+        <div class="p-4">
+          <p class="md-sys-typescale-title-small mb-2">Right pane</p>
+          <p class="text-md-sys-color-on-surface-variant text-sm">Main content area.</p>
+        </div>
+      </Pane>
+    </PaneGrid>
+  </div>
+</Story>
+
+<!--
+  Sticky nav — a static (non-resizable) sidebar that sticks to the top of its
+  scroll container as the main content scrolls past it. Replaces
+  SplitPane anchor="sticky". Works inside any scrolling ancestor, not just the
+  true browser viewport, which is what lets this demo meaningfully inside
+  Storybook's bounded canvas.
+-->
+<Story name="Sticky Sidebar" asChild>
+  <div class="border-md-sys-color-outline-variant h-[420px] overflow-y-auto rounded-lg border">
+    <PaneGrid rounded>
+      <Pane width={240} sticky rounded={false}>
+        <div class="p-4">
+          <p class="md-sys-typescale-title-small mb-2">Sticky nav</p>
+          <p class="text-md-sys-color-on-surface-variant text-sm">
+            Stays pinned to the top of the scroll container while the right pane scrolls past it.
+          </p>
+        </div>
+      </Pane>
+      <Pane rounded={false}>
+        <div class="flex flex-col gap-4 p-4">
+          {#each Array(12) as _, i}
+            <div class="bg-md-sys-color-surface-container-high rounded-lg p-6">
+              Scrollable content block {i + 1}
+            </div>
+          {/each}
+        </div>
+      </Pane>
+    </PaneGrid>
+  </div>
+</Story>
+
+<!--
+  Main + supporting panel that stacks on small viewports and moves to a row
+  from `large` up — replaces SupportingPane. The panel is sticky once it's
+  in the row layout, so it stays visible while the main column scrolls.
+-->
+<Story name="Main + Supporting" asChild>
+  <div class="border-md-sys-color-outline-variant h-[420px] overflow-y-auto rounded-lg border">
+    <PaneGrid direction={{ small: 'column', large: 'row' }} gap="lg" padding="md">
+      <Pane background={false} padding="none">
+        <div class="flex flex-col gap-4">
+          {#each Array(6) as _, i}
+            <div class="bg-md-sys-color-surface-container-high rounded-lg p-6">
+              Main content block {i + 1}
+            </div>
+          {/each}
+        </div>
+      </Pane>
+      <Pane width={280} sticky background={false} padding="none">
+        <div class="bg-md-sys-color-surface-container rounded-lg p-4">
+          <p class="md-sys-typescale-title-small mb-2">Supporting content</p>
+          <p class="text-md-sys-color-on-surface-variant text-sm">
+            Fixed-width panel — e.g. a table of contents or contextual actions.
+          </p>
+        </div>
+      </Pane>
+    </PaneGrid>
+  </div>
+</Story>
+
+<!--
+  List-detail: the detail pane only appears from `medium` up via `visibleFrom`;
+  below that, the list pane fills the screen alone. Toggle Storybook's viewport
+  controls to see the detail pane drop out.
+-->
+<Story name="List-Detail (detail hidden on small)" asChild>
+  <div
+    class="border-md-sys-color-outline-variant relative h-[320px] overflow-hidden rounded-lg border"
+  >
+    <PaneGrid full>
+      <Pane width={320} rounded={false} background={false}>
+        <div class="p-4">
+          <p class="md-sys-typescale-title-small mb-2">List</p>
+          <p class="text-md-sys-color-on-surface-variant text-sm">Always visible.</p>
+        </div>
+      </Pane>
+      <Pane visibleFrom="medium" rounded={false}>
+        <div class="p-4">
+          <p class="md-sys-typescale-title-small mb-2">Detail</p>
+          <p class="text-md-sys-color-on-surface-variant text-sm">Visible from `medium` up only.</p>
+        </div>
+      </Pane>
+    </PaneGrid>
+  </div>
+</Story>

package/dist/components/containers/pane/PaneGrid.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import PaneGrid from './PaneGrid.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const PaneGrid: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type PaneGrid = InstanceType<typeof PaneGrid>;
+export default PaneGrid;

package/dist/components/containers/pane/PaneGrid.svelte

@@ -0,0 +1,43 @@
+<!--
+@component
+Arranges Pane children relative to one another: direction, gap, and outer
+margin/padding, each independently responsive across viewport tiers
+(small/medium/large/extraLarge). PaneGrid owns layout only — sizing, stickiness,
+resizing, and breakpoint visibility are declared per-Pane.
+
+With `full`, min-height is `100dvh` minus `--appbar-height` — see Pane.svelte's
+doc comment for how that CSS custom property gets set.
+-->
+<script lang="ts">
+  import clsx from 'clsx';
+  import { paneGrid, resolveResponsive, responsiveTables } from './theme.js';
+  import type { PaneGridProps } from './types.js';
+
+  const {
+    children,
+    direction = 'row',
+    gap = 'md',
+    padding = 'none',
+    margin = 'none',
+    full = false,
+    rounded = false,
+    wrap = false,
+    class: className,
+    ...rest
+  }: PaneGridProps = $props();
+
+  const { base } = $derived(paneGrid({ full, rounded, wrap }));
+
+  const responsiveClass = $derived(
+    clsx(
+      resolveResponsive(direction, responsiveTables.direction),
+      resolveResponsive(gap, responsiveTables.gap),
+      resolveResponsive(padding, responsiveTables.padding),
+      resolveResponsive(margin, responsiveTables.margin)
+    )
+  );
+</script>
+
+<div class={base({ class: clsx(responsiveClass, className) })} {...rest}>
+  {@render children()}
+</div>

package/dist/components/containers/pane/PaneGrid.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { PaneGridProps } from './types.js';
+/**
+ * Arranges Pane children relative to one another: direction, gap, and outer
+ * margin/padding, each independently responsive across viewport tiers
+ * (small/medium/large/extraLarge). PaneGrid owns layout only — sizing, stickiness,
+ * resizing, and breakpoint visibility are declared per-Pane.
+ *
+ * With `full`, min-height is `100dvh` minus `--appbar-height` — see Pane.svelte's
+ * doc comment for how that CSS custom property gets set.
+ */
+declare const PaneGrid: import("svelte").Component<PaneGridProps, {}, "">;
+type PaneGrid = ReturnType<typeof PaneGrid>;
+export default PaneGrid;

package/dist/components/containers/pane/PaneHandle.svelte

@@ -0,0 +1,90 @@
+<!--
+@component
+A drag divider for a PaneGrid, placed as its own child between the `Pane` it
+resizes and its neighbor. Unlike a handle absolutely-positioned inside a Pane
+(clipped by that Pane's `overflow-clip`, cramped into its own border), this
+sits in the grid's flex flow — a real sibling with room to breathe in the
+gutter. Dragging it writes to the shared resize store; any `Pane` with a
+matching `persistKey` picks the new width up reactively.
+-->
+<script lang="ts">
+  import clsx from 'clsx';
+  import { onMount } from 'svelte';
+  import { paneHandle } from './theme.js';
+  import { paneWidths } from './resizeStore.svelte.js';
+  import type { PaneHandleProps } from './types.js';
+
+  let {
+    persistKey,
+    min = 200,
+    max = 640,
+    snapPoints = [360, 412],
+    snapThreshold = 16,
+    class: className,
+    ...rest
+  }: PaneHandleProps = $props();
+
+  let dragging = $state(false);
+  let snapped = $state(false);
+
+  const { base, grip } = $derived(paneHandle({ dragging, snapped }));
+
+  const clampWidth = (next: number) => Math.min(max, Math.max(min, next));
+
+  /** Nearest snap point within `snapThreshold` of `value`, if any. */
+  const nearestSnap = (value: number): number | undefined => {
+    let closest: number | undefined;
+    let closestDist = snapThreshold;
+    for (const point of snapPoints) {
+      const dist = Math.abs(value - point);
+      if (dist <= closestDist) {
+        closest = point;
+        closestDist = dist;
+      }
+    }
+    return closest;
+  };
+
+  let dragStartX = 0;
+  let dragStartWidth = 0;
+
+  onMount(() => {
+    paneWidths.hydrate(persistKey, min);
+  });
+
+  const startDrag = (event: PointerEvent) => {
+    dragging = true;
+    dragStartX = event.clientX;
+    dragStartWidth = paneWidths.get(persistKey) ?? min;
+    (event.currentTarget as HTMLElement).setPointerCapture(event.pointerId);
+  };
+
+  const moveDrag = (event: PointerEvent) => {
+    if (!dragging) return;
+    const raw = clampWidth(dragStartWidth + (event.clientX - dragStartX));
+    const snap = nearestSnap(raw);
+    snapped = snap !== undefined;
+    paneWidths.set(persistKey, snap ?? raw);
+  };
+
+  const endDrag = () => {
+    dragging = false;
+    snapped = false;
+  };
+</script>
+
+<div
+  class={base({ class: clsx(className) })}
+  role="separator"
+  aria-orientation="vertical"
+  aria-valuenow={paneWidths.get(persistKey)}
+  aria-valuemin={min}
+  aria-valuemax={max}
+  onpointerdown={startDrag}
+  onpointermove={moveDrag}
+  onpointerup={endDrag}
+  onpointercancel={endDrag}
+  {...rest}
+>
+  <div class={grip()}></div>
+</div>

package/dist/components/containers/pane/PaneHandle.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { PaneHandleProps } from './types.js';
+/**
+ * A drag divider for a PaneGrid, placed as its own child between the `Pane` it
+ * resizes and its neighbor. Unlike a handle absolutely-positioned inside a Pane
+ * (clipped by that Pane's `overflow-clip`, cramped into its own border), this
+ * sits in the grid's flex flow — a real sibling with room to breathe in the
+ * gutter. Dragging it writes to the shared resize store; any `Pane` with a
+ * matching `persistKey` picks the new width up reactively.
+ */
+declare const PaneHandle: import("svelte").Component<PaneHandleProps, {}, "">;
+type PaneHandle = ReturnType<typeof PaneHandle>;
+export default PaneHandle;

package/dist/components/containers/pane/dragStore.svelte.d.ts

@@ -0,0 +1,16 @@
+export type DragPosition = {
+    x: number;
+    y: number;
+    width?: number;
+    height?: number;
+};
+declare function get(key: string): DragPosition | undefined;
+/** Seeds `key` from localStorage (or `fallback`) the first time it's read; a no-op after that. */
+declare function hydrate(key: string, fallback: DragPosition): DragPosition;
+declare function set(key: string, value: DragPosition): void;
+export declare const dragPositions: {
+    get: typeof get;
+    hydrate: typeof hydrate;
+    set: typeof set;
+};
+export {};

package/dist/components/containers/pane/dragStore.svelte.js

@@ -0,0 +1,38 @@
+import { SvelteMap } from 'svelte/reactivity';
+/**
+ * Shared, localStorage-backed position/size registry keyed by `persistKey`. A
+ * `DraggablePane` reads/writes its own entry here so its last dragged
+ * position and (once resized) size survive reloads without the consumer
+ * having to manage it.
+ */
+const positions = new SvelteMap();
+function get(key) {
+    return positions.get(key);
+}
+/** Seeds `key` from localStorage (or `fallback`) the first time it's read; a no-op after that. */
+function hydrate(key, fallback) {
+    if (positions.has(key))
+        return positions.get(key);
+    let initial = fallback;
+    if (typeof localStorage !== 'undefined') {
+        const stored = localStorage.getItem(key);
+        if (stored) {
+            try {
+                const parsed = JSON.parse(stored);
+                if (typeof parsed?.x === 'number' && typeof parsed?.y === 'number')
+                    initial = parsed;
+            }
+            catch {
+                // malformed stored value — fall back to `fallback`
+            }
+        }
+    }
+    positions.set(key, initial);
+    return initial;
+}
+function set(key, value) {
+    positions.set(key, value);
+    if (typeof localStorage !== 'undefined')
+        localStorage.setItem(key, JSON.stringify(value));
+}
+export const dragPositions = { get, hydrate, set };

package/dist/components/containers/pane/index.d.ts

@@ -0,0 +1,8 @@
+export * from './dragStore.svelte.js';
+export * from './resizeStore.svelte.js';
+export * from './theme.js';
+export * from './types.js';
+export { default as DraggablePane } from './DraggablePane.svelte';
+export { default as Pane } from './Pane.svelte';
+export { default as PaneGrid } from './PaneGrid.svelte';
+export { default as PaneHandle } from './PaneHandle.svelte';

package/dist/components/containers/pane/index.js

@@ -0,0 +1,11 @@
+// THIS FILE IS AUTO-GENERATED BY scripts/generate-components-index.ts - DO NOT EDIT MANUALLY
+// re-export TS/JS modules from this folder
+export * from './dragStore.svelte.js';
+export * from './resizeStore.svelte.js';
+export * from './theme.js';
+export * from './types.js';
+// default exports for components in this folder
+export { default as DraggablePane } from './DraggablePane.svelte';
+export { default as Pane } from './Pane.svelte';
+export { default as PaneGrid } from './PaneGrid.svelte';
+export { default as PaneHandle } from './PaneHandle.svelte';

package/dist/components/containers/pane/resizeStore.svelte.d.ts

@@ -0,0 +1,10 @@
+declare function get(key: string): number | undefined;
+/** Seeds `key` from localStorage (or `fallback`) the first time it's read; a no-op after that. */
+declare function hydrate(key: string, fallback: number): number;
+declare function set(key: string, value: number): void;
+export declare const paneWidths: {
+    get: typeof get;
+    hydrate: typeof hydrate;
+    set: typeof set;
+};
+export {};

package/dist/components/containers/pane/resizeStore.svelte.js

@@ -0,0 +1,30 @@
+import { SvelteMap } from 'svelte/reactivity';
+/**
+ * Shared, localStorage-backed width registry keyed by `persistKey`. A `Pane`
+ * and a `PaneHandle` that share the same `persistKey` stay in sync through
+ * this map without needing a direct parent/child relationship — the handle
+ * writes on drag, the pane reads reactively.
+ */
+const widths = new SvelteMap();
+function get(key) {
+    return widths.get(key);
+}
+/** Seeds `key` from localStorage (or `fallback`) the first time it's read; a no-op after that. */
+function hydrate(key, fallback) {
+    if (widths.has(key))
+        return widths.get(key);
+    let initial = fallback;
+    if (typeof localStorage !== 'undefined') {
+        const stored = Number(localStorage.getItem(key));
+        if (!Number.isNaN(stored) && stored > 0)
+            initial = stored;
+    }
+    widths.set(key, initial);
+    return initial;
+}
+function set(key, value) {
+    widths.set(key, value);
+    if (typeof localStorage !== 'undefined')
+        localStorage.setItem(key, String(value));
+}
+export const paneWidths = { get, hydrate, set };