@dorsk/tsumikit 0.66.1 → 0.67.1

package/README.md

@@ -580,10 +580,17 @@ on a phone instead of four. `tiles` forces the tile mode (`false` forces
 chips); `removeLabel` names the popover button. Both variants are in the DOM
 and the container query displays one; the hidden one is `display: none`, so
 it is neither focusable nor announced. `Composer` inherits the behaviour.
+Chips show a small thumbnail before an image's name and clip it in the middle
+(the last 12 characters stay, so look-alike screenshot names remain telling).
+`numbered` shows each file's 1-based position on the chip and the tile,
+matching `[#N]` markers written in a prompt. `onopen(index)` makes the chip name a button and adds a
+larger preview (images) plus an `openLabel` ("Open") action to the tile
+popover; Remove stays separate.
 
 ```svelte
 <AttachmentList files={attachments} onremove={(i) => (attachments = attachments.toSpliced(i, 1))} />
 <AttachmentList tiles files={[{ name: 'cover.png', size: 1024, type: 'image/png', url }]} />
+<AttachmentList numbered files={attachments} onopen={(i) => preview(attachments[i])} />
 ```
 
 ### ConversationPanel, ConversationFeed, StatusBar
@@ -845,10 +852,14 @@ glyphs (`size` stays the SVG px, emoji ×1.35).
 On `(pointer: coarse)` every icon-only/square control (and `Popover`'s default
 trigger) carries an invisible `::after` slab that extends its hit area to
 `--touch-target` (44px, WCAG 2.5.8) without moving layout; fine pointers are
-untouched. The slab grows on both block sides but only towards the inline
-*start*: inline-end overflow would count towards the scrollable overflow of
-every scroll ancestor, so a button near the right edge of an `overflow-y: auto`
-container would make it scroll sideways by a pixel or two.
+untouched. The slab is the centred target with its inline-*end* half cut off:
+44px tall, and the box plus half the deficit wide (34px for a 24px icon).
+Inline-end overflow would count towards the scrollable overflow of every scroll
+ancestor, so a button near the right edge of an `overflow-y: auto` container
+would make it scroll sideways; in a row that half lies under the next sibling's
+slab anyway. Growing the whole deficit towards the start instead would let each
+slab cover the previous sibling's centre, so taps would land one icon to the
+right.
 `hitArea="compact"` opts a dense-table row out. `Button
 collapseLabel="mobile" | "container"` hides `<span data-label>` children below
 40rem viewport / 30rem container, drops to icon padding, and names the button

package/dist/components/atoms/Button.svelte

@@ -51,7 +51,7 @@
 		// container (`container`) so the button becomes icon-only; the hidden text
 		// becomes the aria-label unless one is set.
 		collapseLabel?: 'never' | 'mobile' | 'container';
-		// Icon-only/square buttons grow a 44px hit slab on coarse pointers without
+		// Icon-only/square buttons grow a touch hit slab on coarse pointers without
 		// moving layout; `compact` opts out in dense tables.
 		hitArea?: 'auto' | 'compact';
 		// Async/busy state: shows a spinner, blocks clicks, sets aria-busy. Stays
@@ -507,12 +507,12 @@
 	}
 
 	/* Coarse pointers: icon-only and square buttons carry an invisible slab that
-	   extends the hit area to --touch-target without changing layout. Buttons
+	   extends the hit area towards --touch-target without changing layout. Buttons
 	   already at or above the target keep their own box (inset never positive).
-	   The slab grows towards the inline start only: inline-end overflow counts
-	   towards the scrollable overflow of every scroll ancestor, so a button near
-	   the right edge of an `overflow-y: auto` container would make it scroll
-	   sideways. Start-side overflow is unscrollable, so the full target survives. */
+	   The slab is the centred target with its inline-end half cut off: inline-end
+	   overflow counts towards the scrollable overflow of every scroll ancestor, and
+	   in a row that half lies under the next sibling anyway. Growing further towards
+	   the start would let each slab cover the previous sibling's centre. */
 	@media (pointer: coarse) {
 		.btn-icon:not(.hit-compact),
 		.btn-icon-inline:not(.hit-compact),
@@ -529,7 +529,7 @@
 			content: '';
 			position: absolute;
 			inset-block: min(0px, calc((100% - var(--touch-target)) / 2));
-			inset-inline-start: min(0px, calc(100% - var(--touch-target)));
+			inset-inline-start: min(0px, calc((100% - var(--touch-target)) / 2));
 			inset-inline-end: 0;
 		}
 	}

package/dist/components/molecules/AttachmentList.svelte

@@ -15,16 +15,24 @@
 	let {
 		files,
 		onremove,
+		onopen,
 		tiles = 'auto',
+		numbered = false,
 		removeLabel = 'Remove',
+		openLabel = 'Open',
 		class: klass = '',
 		style: styleProp = ''
 	}: {
 		files: (File | Attachment)[];
 		onremove?: (index: number) => void;
+		/** Makes the chip name a button and adds a preview + Open action to the tile popover. */
+		onopen?: (index: number) => void;
 		/** `auto` switches to tiles when the list is at most 30rem wide. */
 		tiles?: boolean | 'auto';
+		/** Shows each file's 1-based position, matching `[#N]` markers in a prompt. */
+		numbered?: boolean;
 		removeLabel?: string;
+		openLabel?: string;
 		class?: string;
 		style?: string;
 	} = $props();
@@ -57,6 +65,16 @@
 		for (const url of untrack(() => objectUrls).values()) URL.revokeObjectURL(url);
 	});
 
+	const TAIL = 12;
+
+	/** Chips clip the head and keep the tail, where look-alike names (macOS
+	 *  screenshots) differ. */
+	function split(name: string): [string, string] {
+		const chars = [...name];
+		if (chars.length <= TAIL + 4) return [name, ''];
+		return [chars.slice(0, -TAIL).join(''), chars.slice(-TAIL).join('')];
+	}
+
 	function thumb(f: File | Attachment): string | undefined {
 		if (!isImage(f)) return undefined;
 		return f instanceof File ? objectUrls.get(f) : f.url;
@@ -72,6 +90,11 @@
 		style={styleProp}
 	>
 		{#each files as f, i (`${f.name}-${i}`)}
+			{#snippet label(f: File | Attachment)}
+				{@const [head, tail] = split(f.name)}
+				<span class="head">{head}</span>{#if tail}<span class="tail">{tail}</span>{/if}
+				{#if f.size !== undefined}<span class="size">{fmt(f.size)}</span>{/if}
+			{/snippet}
 			{#if tiles !== true}
 				<li class="chip">
 					<Badge
@@ -82,20 +105,32 @@
 						onremove={() => onremove?.(i)}
 						title={f.name}
 					>
-						{f.name}{#if f.size !== undefined}<span class="size">{fmt(f.size)}</span>{/if}
+						{@const src = thumb(f)}
+						{#if numbered}<span class="num">{i + 1}</span>{/if}
+						{#if src}<img class="mini" {src} alt="" />{/if}
+						{#if onopen}
+							<button type="button" class="open" title={openLabel} onclick={() => onopen?.(i)}>
+								{@render label(f)}
+							</button>
+						{:else}
+							<span class="name">{@render label(f)}</span>
+						{/if}
 					</Badge>
 				</li>
 			{/if}
 			{#if tiles !== false}
 				<li class="tile">
-					<Popover label={f.name} box="lg" placement="top-start" style="--pop-trigger-pad: 0; --pop-trigger-border: var(--border-strong); --pop-trigger-bg: var(--bg)">
+					<Popover label={numbered ? `${i + 1}. ${f.name}` : f.name} box="lg" placement="top-start" style="--pop-trigger-pad: 0; --pop-trigger-border: var(--border-strong); --pop-trigger-bg: var(--bg)">
 						{#snippet trigger()}
 							{@const src = thumb(f)}
-							{#if src}
-								<img class="thumb" {src} alt="" />
-							{:else}
-								<Icon name={isImage(f) ? 'image' : 'file'} size={18} />
-							{/if}
+							<span class="face">
+								{#if src}
+									<img class="thumb" {src} alt="" />
+								{:else}
+									<Icon name={isImage(f) ? 'image' : 'file'} size={18} />
+								{/if}
+								{#if numbered}<span class="num tile-num">{i + 1}</span>{/if}
+							</span>
 						{/snippet}
 						{#snippet children({ close })}
 							<div class="detail">
@@ -118,6 +153,31 @@
 									{/if}
 								</div>
 								{#if f.size !== undefined}<Text size="xs" tone="faint">{fmt(f.size)}</Text>{/if}
+								{#if onopen}
+									{@const src = thumb(f)}
+									{#if src}
+										<button
+											type="button"
+											class="preview"
+											title={openLabel}
+											onclick={() => {
+												close();
+												onopen?.(i);
+											}}
+										>
+											<img {src} alt="" />
+										</button>
+									{/if}
+									<Button
+										size="sm"
+										onclick={() => {
+											close();
+											onopen?.(i);
+										}}
+									>
+										{openLabel}
+									</Button>
+								{/if}
 							</div>
 						{/snippet}
 					</Popover>
@@ -188,4 +248,95 @@
 	.chip :global(.action) {
 		font-size: 1.4em;
 	}
+	.chip :global(.clip) {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--sp-1);
+	}
+	.name,
+	.open {
+		display: inline-flex;
+		align-items: baseline;
+		min-width: 0;
+		white-space: nowrap;
+	}
+	.head {
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+	.tail,
+	.size {
+		flex: none;
+	}
+	.open {
+		padding: 0;
+		border: 0;
+		background: none;
+		font: inherit;
+		color: inherit;
+		cursor: pointer;
+	}
+	.open:hover {
+		text-decoration: underline;
+	}
+	.open:focus-visible {
+		outline: var(--focus-ring);
+		outline-offset: var(--focus-ring-offset);
+		border-radius: var(--r-sm);
+	}
+	.mini {
+		flex: none;
+		width: 1.25em;
+		height: 1.25em;
+		object-fit: cover;
+		border-radius: var(--r-sm);
+	}
+	.num {
+		flex: none;
+		font-size: 0.8em;
+		font-weight: 600;
+		line-height: 1;
+		color: var(--text-muted);
+	}
+	.face {
+		position: relative;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+		height: 100%;
+	}
+	.tile-num {
+		position: absolute;
+		top: -0.35em;
+		right: -0.35em;
+		min-width: 1.4em;
+		padding: 0.1em 0.3em;
+		border: 1px solid var(--border-strong);
+		border-radius: var(--r-pill);
+		background: var(--bg);
+		color: var(--text);
+		text-align: center;
+	}
+	.preview {
+		display: block;
+		padding: 0;
+		border: 1px solid var(--border);
+		border-radius: var(--r-md);
+		background: none;
+		cursor: pointer;
+		overflow: hidden;
+		line-height: 0;
+	}
+	.preview:focus-visible {
+		outline: var(--focus-ring);
+		outline-offset: var(--focus-ring-offset);
+	}
+	.preview img {
+		display: block;
+		max-width: 16rem;
+		max-height: 16rem;
+		object-fit: contain;
+	}
 </style>

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

@@ -7,9 +7,14 @@ export type Attachment = {
 type $$ComponentProps = {
     files: (File | Attachment)[];
     onremove?: (index: number) => void;
+    /** Makes the chip name a button and adds a preview + Open action to the tile popover. */
+    onopen?: (index: number) => void;
     /** `auto` switches to tiles when the list is at most 30rem wide. */
     tiles?: boolean | 'auto';
+    /** Shows each file's 1-based position, matching `[#N]` markers in a prompt. */
+    numbered?: boolean;
     removeLabel?: string;
+    openLabel?: string;
     class?: string;
     style?: string;
 };

package/dist/components/molecules/FileButton.svelte

@@ -45,7 +45,7 @@
 		control?: boolean;
 		/** Shared square box scale (`--box-xs/sm/md/lg`); implies `iconOnly`. */
 		box?: 'xs' | 'sm' | 'md' | 'lg';
-		/** Icon-only buttons grow a 44px hit slab on coarse pointers; `compact` opts out. */
+		/** Icon-only buttons grow a touch hit slab on coarse pointers; `compact` opts out. */
 		hitArea?: 'auto' | 'compact';
 		class?: string;
 	} = $props();
@@ -158,7 +158,7 @@
 			content: '';
 			position: absolute;
 			inset-block: min(0px, calc((100% - var(--touch-target)) / 2));
-			inset-inline-start: min(0px, calc(100% - var(--touch-target)));
+			inset-inline-start: min(0px, calc((100% - var(--touch-target)) / 2));
 			inset-inline-end: 0;
 		}
 	}

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

@@ -24,7 +24,7 @@ type $$ComponentProps = {
     control?: boolean;
     /** Shared square box scale (`--box-xs/sm/md/lg`); implies `iconOnly`. */
     box?: 'xs' | 'sm' | 'md' | 'lg';
-    /** Icon-only buttons grow a 44px hit slab on coarse pointers; `compact` opts out. */
+    /** Icon-only buttons grow a touch hit slab on coarse pointers; `compact` opts out. */
     hitArea?: 'auto' | 'compact';
     class?: string;
 };

package/dist/components/molecules/IconButton.svelte

@@ -34,7 +34,7 @@
 		// Exact glyph size for SVG *and* text glyphs (px number or any CSS length),
 		// no emoji multiplier. Wins over `size`.
 		glyphSize?: number | string;
-		// Opt out of the 44px coarse-pointer hit slab in dense rows.
+		// Opt out of the coarse-pointer hit slab in dense rows.
 		hitArea?: 'auto' | 'compact';
 		// Borderless, compact icon affordance (chip-remove ✕, inline edit ✎) —
 		// no square box; just a muted glyph that brightens on hover. Pair with

package/dist/components/molecules/Popover.svelte

@@ -61,7 +61,7 @@
 		/** Use the shared `--control-height` toolbar/composer contract. */
 		control?: boolean;
 		block?: boolean;
-		/** Icon-only triggers grow a 44px hit slab on coarse pointers; `compact` opts out. */
+		/** Icon-only triggers grow a touch hit slab on coarse pointers; `compact` opts out. */
 		hitArea?: 'auto' | 'compact';
 		/** Corner count indicator on the trigger, as on `Button`: hidden at
 		 *  0/undefined, capped at `countMax+`, the exact number joins `label`. */
@@ -449,10 +449,9 @@
 		padding: var(--pop-trigger-pad, 0);
 		flex: none;
 	}
-	/* Coarse pointers: icon-only triggers extend their hit area to --touch-target
-	   via an invisible slab; layout does not move. The slab grows towards the
-	   inline start only, so it never adds scrollable overflow to a scroll ancestor
-	   (see Button.svelte). */
+	/* Coarse pointers: icon-only triggers extend their hit area towards --touch-target
+	   via an invisible slab; layout does not move. Same geometry as Button.svelte:
+	   no inline-end growth, half the deficit towards the inline start. */
 	@media (pointer: coarse) {
 		.pop-trigger:not(.canonical, .hit-compact) {
 			position: relative;
@@ -461,7 +460,7 @@
 			content: '';
 			position: absolute;
 			inset-block: min(0px, calc((100% - var(--touch-target)) / 2));
-			inset-inline-start: min(0px, calc(100% - var(--touch-target)));
+			inset-inline-start: min(0px, calc((100% - var(--touch-target)) / 2));
 			inset-inline-end: 0;
 		}
 	}

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

@@ -46,7 +46,7 @@ type Own = {
     /** Use the shared `--control-height` toolbar/composer contract. */
     control?: boolean;
     block?: boolean;
-    /** Icon-only triggers grow a 44px hit slab on coarse pointers; `compact` opts out. */
+    /** Icon-only triggers grow a touch hit slab on coarse pointers; `compact` opts out. */
     hitArea?: 'auto' | 'compact';
     /** Corner count indicator on the trigger, as on `Button`: hidden at
      *  0/undefined, capped at `countMax+`, the exact number joins `label`. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dorsk/tsumikit",
-  "version": "0.66.1",
+  "version": "0.67.1",
   "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",