@dorsk/tsumikit 0.2.1 → 0.2.2

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.1",
+  "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",