@dorsk/tsumikit 0.2.0 → 0.2.2

package/dist/components/atoms/Text.svelte

@@ -118,7 +118,14 @@
 	.fs-2xl {
 		font-size: var(--fs-2xl);
 	}
+	/* `text-overflow: ellipsis` is a no-op on an inline box, so a truncated bare
+	   <Text> (default as="span") would overrun its container instead of clipping.
+	   inline-block gives it a block formatting context so the ellipsis applies,
+	   while max-width keeps it from overflowing the parent; on block elements
+	   (as="p"/"div") these are harmless. */
 	.truncate {
+		display: inline-block;
+		max-width: 100%;
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;

package/dist/components/layouts/AutoGrid.svelte

@@ -4,13 +4,16 @@
 	// adapts to whatever space it's given (including inside a narrow column). This
 	// is the "columns just adapt to available space" layout from the AppShell
 	// demo, as a named component. `min` is the minimum column width, `gap` the
-	// gutter.
+	// 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.
 	import type { Snippet } from 'svelte';
 
 	let {
 		as = 'div',
 		min = '14rem',
 		gap = 'var(--sp-4)',
+		maxCols,
 		class: klass = '',
 		children,
 		...rest
@@ -18,13 +21,26 @@
 		as?: 'div' | 'section' | 'ul' | 'ol';
 		min?: string;
 		gap?: string;
+		maxCols?: number;
 		class?: string;
 		children?: Snippet;
 		[key: string]: unknown;
 	} = $props();
+
+	let style = $derived(
+		maxCols != null
+			? `--ag-min: ${min}; --ag-gap: ${gap}; --ag-cols: ${maxCols}; gap: ${gap}`
+			: `--ag-min: ${min}; gap: ${gap}`
+	);
 </script>
 
-<svelte:element this={as} class="autogrid-c {klass}" style="--ag-min: {min}; gap: {gap}" {...rest}>
+<svelte:element
+	this={as}
+	class="autogrid-c {klass}"
+	class:capped={maxCols != null}
+	{style}
+	{...rest}
+>
 	{@render children?.()}
 </svelte:element>
 
@@ -33,4 +49,18 @@
 		display: grid;
 		grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ag-min)), 1fr));
 	}
+
+	/* Cap at N columns: the per-column floor becomes the larger of `min` and the
+	   width each column gets when N share the row (minus the N-1 gaps), so
+	   auto-fit stops adding tracks once N fit. `min(100%, …)` keeps it from
+	   overflowing when the container is narrower than a single `min` track. */
+	.autogrid-c.capped {
+		grid-template-columns: repeat(
+			auto-fit,
+			minmax(
+				min(100%, max(var(--ag-min), (100% - (var(--ag-cols) - 1) * var(--ag-gap)) / var(--ag-cols))),
+				1fr
+			)
+		);
+	}
 </style>

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

@@ -3,6 +3,7 @@ type $$ComponentProps = {
     as?: 'div' | 'section' | 'ul' | 'ol';
     min?: string;
     gap?: string;
+    maxCols?: number;
     class?: string;
     children?: Snippet;
     [key: string]: unknown;

package/dist/components/molecules/Truncate.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+	// Character-count truncation with a hover/focus reveal of the full text.
+	// Thin wrapper over the `truncate()` helper (the truncation logic lives there
+	// and stays unit-testable) plus Tooltip (the reveal). When the text already
+	// fits, it renders as a bare inline span with no tooltip wiring at all — so
+	// you only pay for the Tooltip when something is actually hidden.
+	//
+	// For responsive, width-driven end-clipping prefer <Text truncate> (pure
+	// CSS); reach for this when you need middle/start truncation or a guaranteed
+	// max character count — e.g. addresses, hashes, long ids.
+	import { truncate, type TruncateMode } from '../../truncate';
+	import Tooltip from './Tooltip.svelte';
+
+	let {
+		text,
+		max,
+		mode = 'end',
+		ellipsis = '…',
+		tooltip = true,
+		placement = 'top'
+	}: {
+		text: string;
+		max: number;
+		mode?: TruncateMode;
+		ellipsis?: string;
+		/** Reveal the full text on hover/focus when truncated. Default true. */
+		tooltip?: boolean;
+		placement?: 'top' | 'bottom' | 'left' | 'right';
+	} = $props();
+
+	const shown = $derived(truncate(text, { max, mode, ellipsis }));
+	const isTruncated = $derived(shown !== text);
+</script>
+
+{#if isTruncated && tooltip}
+	<Tooltip text={text} {placement}>
+		{#snippet trigger()}
+			<!-- tabindex makes the shortened text reachable by keyboard so the
+			     full-text tooltip (wired by Tooltip onto the first focusable child)
+			     isn't mouse-only; the span is otherwise non-interactive. -->
+			<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+			<span class="trunc" tabindex="0">{shown}</span>
+		{/snippet}
+	</Tooltip>
+{:else}
+	<span class="trunc">{shown}</span>
+{/if}
+
+<style>
+	.trunc {
+		/* No layout of its own — it shortens the string, not the box. The cursor
+		   hint signals there's more to reveal. */
+		cursor: default;
+	}
+</style>

package/dist/components/molecules/Truncate.svelte.d.ts

@@ -0,0 +1,13 @@
+import { type TruncateMode } from '../../truncate';
+type $$ComponentProps = {
+    text: string;
+    max: number;
+    mode?: TruncateMode;
+    ellipsis?: string;
+    /** Reveal the full text on hover/focus when truncated. Default true. */
+    tooltip?: boolean;
+    placement?: 'top' | 'bottom' | 'left' | 'right';
+};
+declare const Truncate: import("svelte").Component<$$ComponentProps, {}, "">;
+type Truncate = ReturnType<typeof Truncate>;
+export default Truncate;

package/dist/index.d.ts

@@ -41,7 +41,9 @@ export { default as ThemePicker } from './components/molecules/ThemePicker.svelt
 export { default as Toaster } from './components/molecules/Toaster.svelte';
 export { default as Toggle } from './components/molecules/Toggle.svelte';
 export { default as Tooltip } from './components/molecules/Tooltip.svelte';
+export { default as Truncate } from './components/molecules/Truncate.svelte';
 export { type Column, default as DataTable } from './components/organisms/DataTable.svelte';
 export { fontScale, SCALE_LEVELS, type ScaleLevel } from './stores/fontscale.svelte';
 export { type Mode, THEMES, theme } from './stores/theme.svelte';
 export { type Toast, type ToastTone, toasts } from './stores/toast.svelte';
+export { type TruncateMode, type TruncateOptions, truncate } from './truncate';

package/dist/index.js

@@ -49,9 +49,11 @@ export { default as ThemePicker } from './components/molecules/ThemePicker.svelt
 export { default as Toaster } from './components/molecules/Toaster.svelte';
 export { default as Toggle } from './components/molecules/Toggle.svelte';
 export { default as Tooltip } from './components/molecules/Tooltip.svelte';
+export { default as Truncate } from './components/molecules/Truncate.svelte';
 // ---- organisms ----
 export { default as DataTable } from './components/organisms/DataTable.svelte';
 export { fontScale, SCALE_LEVELS } from './stores/fontscale.svelte';
 // ---- stores / actions ----
 export { THEMES, theme } from './stores/theme.svelte';
 export { toasts } from './stores/toast.svelte';
+export { truncate } from './truncate';

package/dist/truncate.d.ts

@@ -0,0 +1,15 @@
+export type TruncateMode = 'end' | 'middle' | 'start';
+export interface TruncateOptions {
+    /** Maximum number of characters in the result, ellipsis included. */
+    max: number;
+    /** Where the ellipsis goes. Default 'end'. */
+    mode?: TruncateMode;
+    /** Ellipsis string. Default '…' (one char). */
+    ellipsis?: string;
+}
+/**
+ * Shorten `value` to at most `max` characters (counting the ellipsis), or
+ * return it unchanged when it already fits. Returns the original string when
+ * `max` is too small to show any content alongside the ellipsis.
+ */
+export declare function truncate(value: string, options: TruncateOptions): string;

package/dist/truncate.js

@@ -0,0 +1,44 @@
+// Character-count truncation — a pure string helper, the counterpart to the
+// CSS single-line ellipsis on <Text truncate>. CSS can clip to the available
+// width but can't truncate in the *middle* (e.g. `0x1234…cdef` for hashes) or
+// guarantee a minimum number of visible chars; this does, working on the string
+// itself. It is layout-agnostic: it does not react to container resize or font
+// scaling — reach for <Text truncate> when you want responsive end-clipping,
+// and this when you need deterministic, content-aware shortening.
+//
+// Counting is by code point (spread into an array) so astral characters and
+// most emoji are not split mid-surrogate. It is not grapheme-cluster aware, so
+// combining marks / ZWJ sequences can still be cut; that trade-off keeps it
+// dependency-free.
+/**
+ * Shorten `value` to at most `max` characters (counting the ellipsis), or
+ * return it unchanged when it already fits. Returns the original string when
+ * `max` is too small to show any content alongside the ellipsis.
+ */
+export function truncate(value, options) {
+    const { max, mode = 'end', ellipsis = '…' } = options;
+    const chars = [...value];
+    if (chars.length <= max)
+        return value;
+    const ell = [...ellipsis];
+    const budget = max - ell.length; // chars of real content we can keep
+    // Not enough room for the ellipsis plus any content: don't produce a string
+    // that's all-ellipsis (misleading) — hand back the original and let CSS /
+    // the caller deal with overflow.
+    if (budget <= 0)
+        return value;
+    if (mode === 'start') {
+        return ellipsis + chars.slice(chars.length - budget).join('');
+    }
+    if (mode === 'middle') {
+        // Bias the extra char to the front so the start (often the more
+        // identifying part) keeps one more character on odd budgets.
+        const head = Math.ceil(budget / 2);
+        const tail = budget - head;
+        const start = chars.slice(0, head).join('');
+        const end = tail > 0 ? chars.slice(chars.length - tail).join('') : '';
+        return start + ellipsis + end;
+    }
+    // 'end'
+    return chars.slice(0, budget).join('') + ellipsis;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dorsk/tsumikit",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "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",
@@ -50,6 +50,7 @@
     "lint": "biome check .",
     "format": "biome check --write .",
     "package": "svelte-kit sync && svelte-package && publint",
+    "package:watch": "svelte-kit sync && svelte-package --watch",
     "prepublishOnly": "npm run package"
   },
   "peerDependencies": {