@dorsk/tsumikit 0.66.1 → 0.67.0

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

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/package.json

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