@dorsk/tsumikit 0.2.6 → 0.2.8

package/dist/components/atoms/Card.svelte

@@ -3,24 +3,64 @@
 	// background/border/radius/padding from theme tokens. `tap` adds the
 	// interactive hover/active affordance for tappable list items (e.g. session
 	// rows); `as` lets it be a button/anchor when the whole surface is clickable.
+	// `padding` dials the inner spacing (none/sm/md/lg) for denser cards.
+	//
+	// `stacked` fakes a pile of cards by drawing two layers peeking out below
+	// (and optionally to the right) via pseudo-elements. `stackTone` tints those
+	// back layers with a semantic hue (e.g. `info` for a blue stack); `neutral`
+	// keeps them on the plain border colour. `stackY`/`stackX` set the per-layer
+	// vertical / horizontal offset in px (vertical spacing stays even across the
+	// 3 borders); horizontal defaults to a tiny 2px peek.
 	import type { Snippet } from 'svelte';
 
+	type Tone = 'neutral' | 'ok' | 'warn' | 'danger' | 'info';
+
 	let {
 		tap = false,
 		as = 'div',
+		padding = 'md',
+		stacked = false,
+		stackTone = 'neutral',
+		stackY = 8,
+		stackX = 2,
 		class: klass = '',
+		style = '',
 		children,
 		...rest
 	}: {
 		tap?: boolean;
 		as?: 'div' | 'button' | 'a' | 'li' | 'section' | 'form';
+		padding?: 'none' | 'sm' | 'md' | 'lg';
+		stacked?: boolean;
+		stackTone?: Tone;
+		stackY?: number;
+		stackX?: number;
 		class?: string;
+		style?: string;
 		children?: Snippet;
 		[key: string]: unknown;
 	} = $props();
+
+	let stackStyle = $derived(
+		stacked ? `--stack-y:${stackY}px;--stack-x:${stackX}px;` : ''
+	);
 </script>
 
-<svelte:element this={as} class="card {klass}" class:card-tap={tap} {...rest}>
+<svelte:element
+	this={as}
+	class="card {klass}"
+	class:pad-none={padding === 'none'}
+	class:pad-sm={padding === 'sm'}
+	class:pad-lg={padding === 'lg'}
+	class:card-tap={tap}
+	class:card-stacked={stacked}
+	class:stack-ok={stacked && stackTone === 'ok'}
+	class:stack-warn={stacked && stackTone === 'warn'}
+	class:stack-danger={stacked && stackTone === 'danger'}
+	class:stack-info={stacked && stackTone === 'info'}
+	style={`${stackStyle}${style}`}
+	{...rest}
+>
 	{@render children?.()}
 </svelte:element>
 
@@ -31,6 +71,15 @@
 		border-radius: var(--r-lg);
 		padding: var(--sp-4);
 	}
+	.pad-none {
+		padding: 0;
+	}
+	.pad-sm {
+		padding: var(--sp-2);
+	}
+	.pad-lg {
+		padding: var(--sp-6);
+	}
 	.card-tap {
 		cursor: pointer;
 		transition:
@@ -43,4 +92,59 @@
 	.card-tap:hover {
 		border-color: var(--border-strong);
 	}
+
+	/* Stacked effect — two back layers peeking out bottom-right. The front
+	   surface keeps its own background so the layers only show at the edges. */
+	.card-stacked {
+		position: relative;
+		/* Defaults; overridden inline by the stackY/stackX props. */
+		--stack-y: 8px;
+		--stack-x: 2px;
+		--stack-bg: var(--bg-elevated-2);
+		--stack-border: var(--border);
+		/* Reserve room for the two peeking layers so they aren't clipped. */
+		margin-right: calc(var(--stack-x) * 2);
+		margin-bottom: calc(var(--stack-y) * 2);
+	}
+	.card-stacked::before,
+	.card-stacked::after {
+		content: '';
+		position: absolute;
+		inset: 0;
+		border-radius: inherit;
+		/* Opaque fill so each layer fully hides the one behind it — only the
+		   bottom-right peek (and its single border line) stays visible. */
+		background: var(--stack-bg);
+		border: 1px solid var(--stack-border);
+	}
+	/* Nearest back layer — sits just under the front surface. */
+	.card-stacked::before {
+		z-index: -1;
+		transform: translate(var(--stack-x), var(--stack-y));
+	}
+	/* Furthest back layer — behind the nearest one. */
+	.card-stacked::after {
+		z-index: -2;
+		transform: translate(
+			calc(var(--stack-x) * 2),
+			calc(var(--stack-y) * 2)
+		);
+	}
+
+	.stack-ok {
+		--stack-border: color-mix(in srgb, var(--ok) 45%, transparent);
+		--stack-bg: color-mix(in srgb, var(--ok) 12%, var(--bg-elevated));
+	}
+	.stack-warn {
+		--stack-border: color-mix(in srgb, var(--warn) 45%, transparent);
+		--stack-bg: color-mix(in srgb, var(--warn) 12%, var(--bg-elevated));
+	}
+	.stack-danger {
+		--stack-border: color-mix(in srgb, var(--danger) 45%, transparent);
+		--stack-bg: color-mix(in srgb, var(--danger) 12%, var(--bg-elevated));
+	}
+	.stack-info {
+		--stack-border: color-mix(in srgb, var(--info) 45%, transparent);
+		--stack-bg: color-mix(in srgb, var(--info) 12%, var(--bg-elevated));
+	}
 </style>

package/dist/components/atoms/Card.svelte.d.ts

@@ -1,8 +1,15 @@
 import type { Snippet } from 'svelte';
+type Tone = 'neutral' | 'ok' | 'warn' | 'danger' | 'info';
 type $$ComponentProps = {
     tap?: boolean;
     as?: 'div' | 'button' | 'a' | 'li' | 'section' | 'form';
+    padding?: 'none' | 'sm' | 'md' | 'lg';
+    stacked?: boolean;
+    stackTone?: Tone;
+    stackY?: number;
+    stackX?: number;
     class?: string;
+    style?: string;
     children?: Snippet;
     [key: string]: unknown;
 };

package/dist/components/layouts/AppShell.svelte

@@ -293,14 +293,18 @@
 			touch-action: none;
 			z-index: 1;
 		}
+		/* Persistent grip hint (mirrors the Modal): a small pill centered on the
+		   handle, brightening to the accent on hover / while dragging. */
 		.shell-sidebar-resize::after {
 			content: '';
 			position: absolute;
-			top: 0;
-			bottom: 0;
-			right: 0;
-			width: 1px;
-			background: transparent;
+			top: 50%;
+			right: 1px;
+			transform: translateY(-50%);
+			width: 3px;
+			height: 28px;
+			border-radius: 999px;
+			background: var(--border-strong);
 			transition: background 0.12s var(--ease);
 		}
 		.shell-sidebar-resize:hover::after,

package/dist/components/layouts/AutoGrid.svelte

@@ -7,30 +7,65 @@
 	// gutter. `maxCols` optionally caps how many columns the grid will ever show:
 	// it raises the effective per-column minimum to the width N columns would
 	// need, so auto-fit can never pack more than N across.
+	//
+	// `max` caps each column's width: instead of growing to fill the row (the
+	// default `1fr`), columns top out at `max` and the grid left-packs them
+	// (auto-fill + justify-content:start) so a 3-item and a 4-item section both
+	// show uniform fixed-width columns rather than stretching to fill. `align`
+	// controls cross-axis alignment of items within their row; it defaults to
+	// `start` so cards don't stretch to the tallest sibling.
 	import type { Snippet } from 'svelte';
 
 	let {
 		as = 'div',
 		min = '14rem',
+		max,
 		gap = 'var(--sp-4)',
 		maxCols,
+		align = 'start',
+		justify,
 		class: klass = '',
 		children,
 		...rest
 	}: {
 		as?: 'div' | 'section' | 'ul' | 'ol';
 		min?: string;
+		/** Maximum column width. When set, columns stop growing at this width and
+		 * the grid left-packs uniform tracks instead of stretching to fill. */
+		max?: string;
 		gap?: string;
 		maxCols?: number;
+		/** Cross-axis alignment of items in their row (align-items). Defaults to `start`. */
+		align?: 'start' | 'center' | 'end' | 'stretch';
+		/** Inline (main-axis) distribution of tracks (justify-content). Defaults to
+		 * `start` when `max` is set, otherwise the grid's natural `stretch`. */
+		justify?: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch';
 		class?: string;
 		children?: Snippet;
 		[key: string]: unknown;
 	} = $props();
 
+	// Columns grow to fill (`1fr`) by default; when `max` is given they cap there.
+	let track = $derived(max != null ? max : '1fr');
+	// auto-fill keeps capped tracks from stretching to fill the row; auto-fit
+	// (the default) collapses empty tracks so columns expand to use the space.
+	let mode = $derived(max != null ? 'auto-fill' : 'auto-fit');
+	// Left-pack capped grids by default so columns don't drift to fill the row.
+	let justifyValue = $derived(justify ?? (max != null ? 'start' : null));
+
 	let style = $derived(
-		maxCols != null
-			? `--ag-min: ${min}; --ag-gap: ${gap}; --ag-cols: ${maxCols}; gap: ${gap}`
-			: `--ag-min: ${min}; gap: ${gap}`
+		[
+			`--ag-min: ${min}`,
+			`--ag-track: ${track}`,
+			`--ag-mode: ${mode}`,
+			maxCols != null ? `--ag-gap: ${gap}` : null,
+			maxCols != null ? `--ag-cols: ${maxCols}` : null,
+			`gap: ${gap}`,
+			`align-items: ${align}`,
+			justifyValue ? `justify-content: ${justifyValue}` : null
+		]
+			.filter(Boolean)
+			.join('; ')
 	);
 </script>
 
@@ -47,7 +82,7 @@
 <style>
 	.autogrid-c {
 		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ag-min)), 1fr));
+		grid-template-columns: repeat(var(--ag-mode), minmax(min(100%, var(--ag-min)), var(--ag-track)));
 	}
 
 	/* Cap at N columns: the per-column floor becomes the larger of `min` and the
@@ -56,10 +91,10 @@
 	   overflowing when the container is narrower than a single `min` track. */
 	.autogrid-c.capped {
 		grid-template-columns: repeat(
-			auto-fit,
+			var(--ag-mode),
 			minmax(
 				min(100%, max(var(--ag-min), (100% - (var(--ag-cols) - 1) * var(--ag-gap)) / var(--ag-cols))),
-				1fr
+				var(--ag-track)
 			)
 		);
 	}

package/dist/components/layouts/AutoGrid.svelte.d.ts

@@ -2,8 +2,16 @@ import type { Snippet } from 'svelte';
 type $$ComponentProps = {
     as?: 'div' | 'section' | 'ul' | 'ol';
     min?: string;
+    /** Maximum column width. When set, columns stop growing at this width and
+     * the grid left-packs uniform tracks instead of stretching to fill. */
+    max?: string;
     gap?: string;
     maxCols?: number;
+    /** Cross-axis alignment of items in their row (align-items). Defaults to `start`. */
+    align?: 'start' | 'center' | 'end' | 'stretch';
+    /** Inline (main-axis) distribution of tracks (justify-content). Defaults to
+     * `start` when `max` is set, otherwise the grid's natural `stretch`. */
+    justify?: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch';
     class?: string;
     children?: Snippet;
     [key: string]: unknown;

package/dist/components/layouts/Container.svelte

@@ -1,21 +1,27 @@
 <script lang="ts">
 	// Centered, max-width content column with token gutters that respect safe-area
 	// insets. `size` overrides the default --content-max; `pad` toggles vertical
-	// padding. Polymorphic via `as` so it can be a <main>, <section>, etc.
+	// padding. `fullWidth` releases the max-width constraint and lets the content
+	// bleed to the full viewport width even when nested inside a centered ancestor
+	// (the `margin-inline: calc(50% - 50vw)` trick), for edge-to-edge sections.
+	// Polymorphic via `as` so it can be a <main>, <section>, etc.
 	import type { Snippet } from 'svelte';
 
 	let {
 		as = 'div',
 		size,
 		pad = false,
+		fullWidth = false,
 		class: klass = '',
 		children,
 		...rest
 	}: {
 		as?: 'div' | 'main' | 'section' | 'article';
-		/** Max width (any CSS length). Defaults to --content-max. */
+		/** Max width (any CSS length). Defaults to --content-max. Ignored when `fullWidth`. */
 		size?: string;
 		pad?: boolean;
+		/** Break out to the full viewport width, ignoring `size`/--content-max. */
+		fullWidth?: boolean;
 		class?: string;
 		children?: Snippet;
 		[key: string]: unknown;
@@ -26,7 +32,8 @@
 	this={as}
 	class="container ct {klass}"
 	class:pad
-	style={size ? `max-width: ${size}` : undefined}
+	class:full={fullWidth}
+	style={!fullWidth && size ? `max-width: ${size}` : undefined}
 	{...rest}
 >
 	{@render children?.()}
@@ -37,4 +44,13 @@
 		padding-top: var(--sp-6);
 		padding-bottom: var(--sp-12);
 	}
+
+	/* Break out of any centered ancestor to span the full viewport width.
+	   `margin-inline: calc(50% - 50vw)` pulls each edge out to the viewport,
+	   keeping the element in normal flow (no transform/overflow side-effects). */
+	.ct.full {
+		max-width: none;
+		width: 100vw;
+		margin-inline: calc(50% - 50vw);
+	}
 </style>

package/dist/components/layouts/Container.svelte.d.ts

@@ -1,9 +1,11 @@
 import type { Snippet } from 'svelte';
 type $$ComponentProps = {
     as?: 'div' | 'main' | 'section' | 'article';
-    /** Max width (any CSS length). Defaults to --content-max. */
+    /** Max width (any CSS length). Defaults to --content-max. Ignored when `fullWidth`. */
     size?: string;
     pad?: boolean;
+    /** Break out to the full viewport width, ignoring `size`/--content-max. */
+    fullWidth?: boolean;
     class?: string;
     children?: Snippet;
     [key: string]: unknown;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dorsk/tsumikit",
-  "version": "0.2.6",
+  "version": "0.2.8",
   "description": "Minimal, dependency-free Svelte 5 + pure-CSS UI kit. Token-driven atoms, molecules & layouts with theming out of the box.",
   "type": "module",
   "license": "MIT",