@ixfx/components 0.8.6 → 0.8.8

package/dist/{interaction-B9AAlsFO.js → interaction-BskmlA9t.js}

@@ -1,3 +1,3 @@
 import "./tickled-controller-Dh1Uh_vG.js";
 import "./tickled-styles-BrAHEj1q.js";
-import "./list-item-animation-DuiwgN3l.js";
+import "./list-item-animation-BUoEKi5s.js";

package/dist/list-drag-types-kpaXz2pZ.d.ts

@@ -0,0 +1,42 @@
+//#region src/interaction/list-drag-types.d.ts
+interface ListDragEntry<T> {
+  readonly key: string;
+  readonly index: number;
+  readonly item: T | Element;
+  readonly element?: Element;
+}
+type ListDragSource = `grid-list` | `detail-list` | `vertical-list` | `data-grid`;
+interface ListDragPreviewContext<T> {
+  readonly source: ListDragSource;
+  readonly origin: ListDragEntry<T>;
+  readonly selected: ReadonlyArray<ListDragEntry<T>>;
+  readonly metrics: {
+    readonly itemSize?: number;
+    readonly captionStyle?: string;
+    readonly captionHeight?: number;
+    readonly rowHeight?: number;
+  };
+  readonly hostStyle: CSSStyleDeclaration;
+}
+interface ListDragPreview {
+  readonly element: HTMLElement;
+  readonly hotspot?: Readonly<{
+    x: number;
+    y: number;
+  }>;
+  readonly canvas?: HTMLCanvasElement;
+  readonly dispose?: () => void;
+}
+type ListDragPreviewRenderer<T> = (context: ListDragPreviewContext<T>) => ListDragPreview;
+interface ListNativeDragStartDetail<T = unknown> {
+  readonly key: string;
+  readonly index: number;
+  readonly item: T | Element;
+  readonly selectedKeys: readonly string[];
+  readonly selected: ReadonlyArray<ListDragEntry<T>>;
+  readonly preview?: ListDragPreview;
+}
+type ListNativeDragStartEvent<T = unknown> = CustomEvent<ListNativeDragStartDetail<T>>;
+//#endregion
+export { ListDragSource as a, ListDragPreviewRenderer as i, ListDragPreview as n, ListNativeDragStartDetail as o, ListDragPreviewContext as r, ListNativeDragStartEvent as s, ListDragEntry as t };
+//# sourceMappingURL=list-drag-types-kpaXz2pZ.d.ts.map

package/dist/list-drag-types-kpaXz2pZ.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-drag-types-kpaXz2pZ.d.ts","names":[],"sources":["../src/interaction/list-drag-types.ts"],"mappings":";UAAiB,cAAc;WACpB;WACA;WACA,MAAM,IAAI;WACV,UAAU;;KAGT;UAEK,uBAAuB;WAC7B,QAAQ;WACR,QAAQ,cAAc;WACtB,UAAU,cAAc,cAAc;WACtC;aACE;aACA;aACA;aACA;;WAEF,WAAW;;UAGL;WACN,SAAS;WACT,UAAU;IAAW;IAAW;;WAChC,SAAS;WACT;;KAGC,wBAAwB,MAAM,SAAS,uBAAuB,OAAO;UAEhE,0BAA0B;WAChC;WACA;WACA,MAAM,IAAI;WACV;WACA,UAAU,cAAc,cAAc;WACtC,UAAU;;KAGT,yBAAyB,eAAe,YAAY,0BAA0B"}

package/dist/{list-item-animation-DuiwgN3l.js → list-item-animation-BUoEKi5s.js}

@@ -88,25 +88,44 @@ function animateListItemIn(el, options = {}) {
 		easing
 	});
 }
+function outResult(finished, animation) {
+	return Object.assign(finished, { animation });
+}
 /**
-* Collapse + fade `el` out. Resolves once the animation finishes (or straight
-* away under reduced motion); the caller detaches the element after. The final
-* collapsed state is held (`fill: forwards`) so there's no flash back to full
-* size in the gap before removal.
+* Start the collapse + fade-out animation for `el` and return the handle.
+* Returns `undefined` when no animation was started (reduced motion or zero
+* size). The caller owns the handle and must `cancel()` it if the removal is
+* reversed — a retained `fill: forwards` frame otherwise keeps overriding the
+* element's ordinary CSS indefinitely.
 */
-function animateListItemOut(el, options = {}) {
-	if (prefersReducedMotion()) return Promise.resolve();
+function startListItemOutAnimation(el, options = {}) {
+	if (prefersReducedMotion()) return void 0;
 	const { axis = `block`, easing = `ease` } = options;
 	const duration = resolveDuration(el, options.duration);
 	const size = measure(el, axis);
-	if (size <= 0) return Promise.resolve();
+	if (size <= 0) return void 0;
 	return el.animate([fullFrame(size, axis), collapsedFrame(axis)], {
 		duration,
 		easing,
 		fill: `forwards`
-	}).finished.then(() => void 0, () => void 0);
+	});
+}
+/**
+* Collapse + fade `el` out. Resolves once the animation finishes (or straight
+* away under reduced motion); the caller detaches the element after. The final
+* collapsed state is held (`fill: forwards`) so there's no flash back to full
+* size in the gap before removal.
+*
+* The returned promise carries an `.animation` handle. If the removal is
+* reversed (the same key becomes visible again), cancel that handle so its
+* filled final frame stops overriding the reused element's style.
+*/
+function animateListItemOut(el, options = {}) {
+	const animation = startListItemOutAnimation(el, options);
+	if (!animation) return outResult(Promise.resolve(), void 0);
+	return outResult(animation.finished.then(() => void 0, () => void 0), animation);
 }
 //#endregion
-export { prefersReducedMotion as a, listItemFadeKeyframes as i, animateListItemIn as n, animateListItemOut as r, LIST_ITEM_MOTION_MS as t };
+export { prefersReducedMotion as a, listItemFadeKeyframes as i, animateListItemIn as n, startListItemOutAnimation as o, animateListItemOut as r, LIST_ITEM_MOTION_MS as t };
 
-//# sourceMappingURL=list-item-animation-DuiwgN3l.js.map
+//# sourceMappingURL=list-item-animation-BUoEKi5s.js.map

package/dist/list-item-animation-BUoEKi5s.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-item-animation-BUoEKi5s.js","names":[],"sources":["../src/interaction/list-item-animation.ts"],"sourcesContent":["import { css } from 'lit';\n\n/**\n * Shared insertion / removal animation for the list & tree components.\n *\n * Two flavours, because the components split into two layout families:\n *\n * - **Flow layouts** (`ixfx-vertical-list`, `ixfx-detail-list`, `ixfx-tree-*`) —\n *   rows sit in normal flow, so a new row can collapse in from zero height and a\n *   leaving row can collapse back to zero, and the rows around it slide to make\n *   or close the gap for free. Use {@link animateListItemIn} /\n *   {@link animateListItemOut} (Web Animations API, exact measured sizes).\n *\n * - **Virtualised layouts** (`ixfx-grid-list`, `ixfx-data-grid`) — rows are\n *   absolutely positioned (`transform` / `top`), so collapsing a row's box moves\n *   nothing. Those components instead fade the entering / leaving row with the\n *   {@link listItemFadeKeyframes} keyframes and slide the survivors by\n *   transitioning their position for a short window after the change.\n *\n * Everything here is a no-op under `prefers-reduced-motion: reduce`.\n */\n\n/** Default duration (ms) for both flavours; overridable per call / per component. */\nexport const LIST_ITEM_MOTION_MS = 200;\n\nexport function prefersReducedMotion(): boolean {\n  return (\n    typeof window !== `undefined`\n    && typeof window.matchMedia === `function`\n    && window.matchMedia(`(prefers-reduced-motion: reduce)`).matches\n  );\n}\n\n/**\n * Opacity keyframes for the virtualised components. Each one adds its own\n * one-line rule binding `.<row>.ixfx-item-entering` / `.ixfx-item-leaving` to\n * these, plus a `prefers-reduced-motion` guard on its own selectors.\n */\nexport const listItemFadeKeyframes = css`\n  @keyframes ixfx-list-item-in {\n    from { opacity: 0; }\n    to { opacity: 1; }\n  }\n  @keyframes ixfx-list-item-out {\n    from { opacity: 1; }\n    to { opacity: 0; }\n  }\n`;\n\nexport interface ListItemMotionOptions {\n  /**\n   * Animation duration in ms. When omitted, the element's\n   * `--ixfx-list-item-move-duration` custom property is used if set (accepts\n   * `ms` or `s`), otherwise {@link LIST_ITEM_MOTION_MS}.\n   */\n  duration?: number;\n  /** Which axis collapses — `block` (height, default) or `inline` (width). */\n  axis?: `block` | `inline`;\n  easing?: string;\n}\n\nfunction measure(el: HTMLElement, axis: `block` | `inline`): number {\n  const rect = el.getBoundingClientRect();\n  return axis === `inline` ? rect.width : rect.height;\n}\n\nfunction resolveDuration(el: HTMLElement, explicit?: number): number {\n  if (explicit !== undefined)\n    return explicit;\n  const raw = getComputedStyle(el).getPropertyValue(`--ixfx-list-item-move-duration`).trim();\n  if (raw) {\n    const n = Number.parseFloat(raw);\n    if (!Number.isNaN(n))\n      return raw.endsWith(`ms`) ? n : raw.endsWith(`s`) ? n * 1000 : n;\n  }\n  return LIST_ITEM_MOTION_MS;\n}\n\nfunction collapsedFrame(axis: `block` | `inline`): Keyframe {\n  const prop = axis === `inline` ? `width` : `height`;\n  const minProp = axis === `inline` ? `minWidth` : `minHeight`;\n  return { [prop]: `0px`, [minProp]: `0px`, opacity: 0, overflow: `hidden` };\n}\n\nfunction fullFrame(size: number, axis: `block` | `inline`): Keyframe {\n  const prop = axis === `inline` ? `width` : `height`;\n  const minProp = axis === `inline` ? `minWidth` : `minHeight`;\n  return { [prop]: `${size}px`, [minProp]: `0px`, opacity: 1, overflow: `hidden` };\n}\n\n/**\n * Collapse + fade `el` in from nothing to its natural size. Call it just after\n * the element has been inserted (it must already be laid out at full size so it\n * can be measured). No-op under reduced motion.\n */\nexport function animateListItemIn(el: HTMLElement, options: ListItemMotionOptions = {}): Animation | undefined {\n  if (prefersReducedMotion())\n    return undefined;\n  const { axis = `block`, easing = `ease` } = options;\n  const duration = resolveDuration(el, options.duration);\n  const size = measure(el, axis);\n  if (size <= 0)\n    return undefined;\n  return el.animate([collapsedFrame(axis), fullFrame(size, axis)], { duration, easing });\n}\n\n/**\n * Result of {@link animateListItemOut}: a promise that resolves once the\n * animation finishes, carrying the underlying `Animation` handle (if any) so\n * callers can `cancel()` superseded work. Awaiting / `.then()` behaves like\n * the previous `Promise<void>` return type.\n */\nexport type ListItemOutResult = Promise<void> & {\n  /** The running collapse animation, or `undefined` under reduced motion / zero size. */\n  animation: Animation | undefined;\n};\n\nfunction outResult(finished: Promise<void>, animation: Animation | undefined): ListItemOutResult {\n  return Object.assign(finished, { animation });\n}\n\n/**\n * Start the collapse + fade-out animation for `el` and return the handle.\n * Returns `undefined` when no animation was started (reduced motion or zero\n * size). The caller owns the handle and must `cancel()` it if the removal is\n * reversed — a retained `fill: forwards` frame otherwise keeps overriding the\n * element's ordinary CSS indefinitely.\n */\nexport function startListItemOutAnimation(el: HTMLElement, options: ListItemMotionOptions = {}): Animation | undefined {\n  if (prefersReducedMotion())\n    return undefined;\n  const { axis = `block`, easing = `ease` } = options;\n  const duration = resolveDuration(el, options.duration);\n  const size = measure(el, axis);\n  if (size <= 0)\n    return undefined;\n  return el.animate([fullFrame(size, axis), collapsedFrame(axis)], {\n    duration,\n    easing,\n    fill: `forwards`,\n  });\n}\n\n/**\n * Collapse + fade `el` out. Resolves once the animation finishes (or straight\n * away under reduced motion); the caller detaches the element after. The final\n * collapsed state is held (`fill: forwards`) so there's no flash back to full\n * size in the gap before removal.\n *\n * The returned promise carries an `.animation` handle. If the removal is\n * reversed (the same key becomes visible again), cancel that handle so its\n * filled final frame stops overriding the reused element's style.\n */\nexport function animateListItemOut(el: HTMLElement, options: ListItemMotionOptions = {}): ListItemOutResult {\n  const animation = startListItemOutAnimation(el, options);\n  if (!animation)\n    return outResult(Promise.resolve(), undefined);\n  const finished = animation.finished.then(() => undefined, () => undefined);\n  return outResult(finished, animation);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAuBA,MAAa,sBAAsB;AAEnC,SAAgB,uBAAgC;CAC9C,OACE,OAAO,WAAW,eACf,OAAO,OAAO,eAAe,cAC7B,OAAO,WAAW,kCAAkC,CAAC,CAAC;AAE7D;;;;;;AAOA,MAAa,wBAAwB,GAAG;;;;;;;;;;AAuBxC,SAAS,QAAQ,IAAiB,MAAkC;CAClE,MAAM,OAAO,GAAG,sBAAsB;CACtC,OAAO,SAAS,WAAW,KAAK,QAAQ,KAAK;AAC/C;AAEA,SAAS,gBAAgB,IAAiB,UAA2B;CACnE,IAAI,aAAa,KAAA,GACf,OAAO;CACT,MAAM,MAAM,iBAAiB,EAAE,CAAC,CAAC,iBAAiB,gCAAgC,CAAC,CAAC,KAAK;CACzF,IAAI,KAAK;EACP,MAAM,IAAI,OAAO,WAAW,GAAG;EAC/B,IAAI,CAAC,OAAO,MAAM,CAAC,GACjB,OAAO,IAAI,SAAS,IAAI,IAAI,IAAI,IAAI,SAAS,GAAG,IAAI,IAAI,MAAO;CACnE;CACA,OAAA;AACF;AAEA,SAAS,eAAe,MAAoC;CAC1D,MAAM,OAAO,SAAS,WAAW,UAAU;CAC3C,MAAM,UAAU,SAAS,WAAW,aAAa;CACjD,OAAO;GAAG,OAAO;GAAQ,UAAU;EAAO,SAAS;EAAG,UAAU;CAAS;AAC3E;AAEA,SAAS,UAAU,MAAc,MAAoC;CACnE,MAAM,OAAO,SAAS,WAAW,UAAU;CAC3C,MAAM,UAAU,SAAS,WAAW,aAAa;CACjD,OAAO;GAAG,OAAO,GAAG,KAAK;GAAM,UAAU;EAAO,SAAS;EAAG,UAAU;CAAS;AACjF;;;;;;AAOA,SAAgB,kBAAkB,IAAiB,UAAiC,CAAC,GAA0B;CAC7G,IAAI,qBAAqB,GACvB,OAAO,KAAA;CACT,MAAM,EAAE,OAAO,SAAS,SAAS,WAAW;CAC5C,MAAM,WAAW,gBAAgB,IAAI,QAAQ,QAAQ;CACrD,MAAM,OAAO,QAAQ,IAAI,IAAI;CAC7B,IAAI,QAAQ,GACV,OAAO,KAAA;CACT,OAAO,GAAG,QAAQ,CAAC,eAAe,IAAI,GAAG,UAAU,MAAM,IAAI,CAAC,GAAG;EAAE;EAAU;CAAO,CAAC;AACvF;AAaA,SAAS,UAAU,UAAyB,WAAqD;CAC/F,OAAO,OAAO,OAAO,UAAU,EAAE,UAAU,CAAC;AAC9C;;;;;;;;AASA,SAAgB,0BAA0B,IAAiB,UAAiC,CAAC,GAA0B;CACrH,IAAI,qBAAqB,GACvB,OAAO,KAAA;CACT,MAAM,EAAE,OAAO,SAAS,SAAS,WAAW;CAC5C,MAAM,WAAW,gBAAgB,IAAI,QAAQ,QAAQ;CACrD,MAAM,OAAO,QAAQ,IAAI,IAAI;CAC7B,IAAI,QAAQ,GACV,OAAO,KAAA;CACT,OAAO,GAAG,QAAQ,CAAC,UAAU,MAAM,IAAI,GAAG,eAAe,IAAI,CAAC,GAAG;EAC/D;EACA;EACA,MAAM;CACR,CAAC;AACH;;;;;;;;;;;AAYA,SAAgB,mBAAmB,IAAiB,UAAiC,CAAC,GAAsB;CAC1G,MAAM,YAAY,0BAA0B,IAAI,OAAO;CACvD,IAAI,CAAC,WACH,OAAO,UAAU,QAAQ,QAAQ,GAAG,KAAA,CAAS;CAE/C,OAAO,UADU,UAAU,SAAS,WAAW,KAAA,SAAiB,KAAA,CACxC,GAAG,SAAS;AACtC"}

package/dist/list-native-drag-controller-DrY3qeJM.js

@@ -0,0 +1,555 @@
+//#region src/interaction/list-drag-preview-default.ts
+const CARD_DEFAULT = 72;
+const CARD_MIN = 48;
+const CARD_MAX = 96;
+const LIST_WIDTH = 220;
+const LIST_MAX_ROWS = 5;
+const MAX_CANVAS_DIM = 1024;
+function cssVar(style, name, fallback) {
+	try {
+		return style.getPropertyValue(name)?.trim() || fallback;
+	} catch {
+		return fallback;
+	}
+}
+function fontOf(style) {
+	try {
+		const font = style.font?.trim();
+		if (font) return font;
+	} catch {}
+	return `12px system-ui, sans-serif`;
+}
+/** Caption for a drag entry — element labels win, then string items, then common object fields, then the key. */
+function captionForEntry(entry) {
+	const el = entry.element ?? (entry.item instanceof Element ? entry.item : void 0);
+	if (el) {
+		const labelled = el.getAttribute(`data-label`) ?? el.querySelector(`[data-grid-list-caption]`)?.textContent?.trim() ?? el.getAttribute(`data-search-label`) ?? el.querySelector(`.cell`)?.textContent?.trim();
+		if (labelled) return labelled.slice(0, 80);
+		const text = el.textContent?.trim();
+		if (text) return text.slice(0, 80);
+	}
+	const item = entry.item;
+	if (typeof item === `string` && item.length > 0) return item.slice(0, 80);
+	if (item !== null && typeof item === `object` && !(item instanceof Element)) {
+		const record = item;
+		for (const field of [
+			`label`,
+			`name`,
+			`title`,
+			`text`
+		]) {
+			const value = record[field];
+			if (typeof value === `string` && value.length > 0) return value.slice(0, 80);
+		}
+	}
+	return entry.key;
+}
+function glyphFor(caption) {
+	const first = caption.trim().at(0);
+	return first ? first.toLocaleUpperCase() : `?`;
+}
+/** A decoded `<img>` ready for `drawImage`, if the entry's element has one. */
+function decodedImage(entry) {
+	const scope = entry.element ?? (entry.item instanceof Element ? entry.item : void 0);
+	if (!scope || typeof scope.querySelector !== `function`) return void 0;
+	if (scope instanceof HTMLImageElement) {
+		if (scope.complete && scope.naturalWidth > 0) return scope;
+		return;
+	}
+	try {
+		const img = scope.querySelector(`img`);
+		if (img instanceof HTMLImageElement && img.complete && img.naturalWidth > 0) return img;
+	} catch {}
+}
+function cardSize(metrics) {
+	if (metrics.itemSize !== void 0 && Number.isFinite(metrics.itemSize)) return Math.max(CARD_MIN, Math.min(CARD_MAX, Math.round(metrics.itemSize)));
+	return CARD_DEFAULT;
+}
+function rowHeight(metrics) {
+	const raw = metrics.rowHeight;
+	if (raw !== void 0 && Number.isFinite(raw)) return Math.max(24, Math.min(36, Math.round(raw)));
+	return 28;
+}
+function thumbCell(doc, caption, img, size) {
+	const well = doc.createElement(`div`);
+	well.setAttribute(`data-thumb`, ``);
+	well.style.cssText = `width:${size}px;height:${size}px;border-radius:4px;overflow:hidden;background:var(--surface-5, rgba(128,128,128,0.25));flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:${Math.round(size * .4)}px;font-weight:600;`;
+	if (img) try {
+		const clone = img.cloneNode(true);
+		clone.style.cssText = `width:100%;height:100%;object-fit:cover;`;
+		clone.removeAttribute(`id`);
+		well.appendChild(clone);
+	} catch {
+		well.textContent = glyphFor(caption);
+	}
+	else well.textContent = glyphFor(caption);
+	return well;
+}
+function buildCardsElement(ctx, captions, images) {
+	const doc = document;
+	const size = cardSize(ctx.metrics);
+	const gap = 6;
+	const pad = 8;
+	const root = doc.createElement(`div`);
+	root.setAttribute(`data-preview`, `cards`);
+	root.setAttribute(`part`, `drag-preview`);
+	root.style.cssText = `position:fixed;top:-9999px;left:-9999px;display:flex;flex-direction:row;gap:${gap}px;padding:${pad}px;background:var(--surface-4, #333);color:var(--surface-4-text, #fff);border:1px solid var(--border-subtle, #555);border-radius:var(--radius-m, 8px);box-shadow:0 4px 16px rgba(0,0,0,0.3);font-family:system-ui,sans-serif;font-size:11px;max-width:320px;z-index:999999;pointer-events:none;`;
+	const n = ctx.selected.length;
+	for (let i = 0; i < n; i++) {
+		const card = doc.createElement(`div`);
+		card.setAttribute(`data-card`, ``);
+		card.style.cssText = `display:flex;flex-direction:column;gap:4px;align-items:center;width:${size}px;`;
+		card.appendChild(thumbCell(doc, captions[i], images[i], Math.round(size * .72)));
+		const label = doc.createElement(`span`);
+		label.setAttribute(`data-caption`, ``);
+		label.style.cssText = `max-width:${size}px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:0.9;`;
+		label.textContent = captions[i];
+		card.appendChild(label);
+		root.appendChild(card);
+	}
+	return root;
+}
+function buildListElement(ctx, captions, images) {
+	const doc = document;
+	const rh = rowHeight(ctx.metrics);
+	const thumb = Math.round(rh * .78);
+	const root = doc.createElement(`div`);
+	root.setAttribute(`data-preview`, `list`);
+	root.setAttribute(`part`, `drag-preview`);
+	root.style.cssText = `position:fixed;top:-9999px;left:-9999px;display:flex;flex-direction:column;gap:4px;padding:8px;background:var(--surface-4, #333);color:var(--surface-4-text, #fff);border:1px solid var(--border-subtle, #555);border-radius:var(--radius-m, 8px);box-shadow:0 4px 16px rgba(0,0,0,0.3);font-family:system-ui,sans-serif;font-size:12px;width:${LIST_WIDTH}px;max-width:${LIST_WIDTH}px;z-index:999999;pointer-events:none;`;
+	const header = doc.createElement(`div`);
+	header.setAttribute(`data-header`, ``);
+	header.style.cssText = `font-weight:600;padding-bottom:4px;border-bottom:1px solid var(--border-subtle, #555);margin-bottom:4px;`;
+	header.textContent = `${ctx.selected.length} items`;
+	root.appendChild(header);
+	for (let i = 0; i < Math.min(LIST_MAX_ROWS, captions.length); i++) {
+		const row = doc.createElement(`div`);
+		row.setAttribute(`data-row`, ``);
+		row.style.cssText = `display:flex;align-items:center;gap:6px;height:${rh}px;overflow:hidden;`;
+		row.appendChild(thumbCell(doc, captions[i], images[i], thumb));
+		const label = doc.createElement(`span`);
+		label.setAttribute(`data-caption`, ``);
+		label.style.cssText = `flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;`;
+		label.textContent = captions[i];
+		row.appendChild(label);
+		root.appendChild(row);
+	}
+	if (captions.length > LIST_MAX_ROWS) {
+		const more = doc.createElement(`div`);
+		more.setAttribute(`data-more`, ``);
+		more.style.cssText = `opacity:0.6;text-align:center;`;
+		more.textContent = `+${captions.length - LIST_MAX_ROWS} more`;
+		root.appendChild(more);
+	}
+	return root;
+}
+function paletteOf(style) {
+	const bg = cssVar(style, `--surface-4`, `#333333`);
+	const fg = cssVar(style, `--surface-4-text`, `#ffffff`);
+	const subtle = cssVar(style, `--border-subtle`, `#555555`);
+	const accent = cssVar(style, `--accent`, `#4da3ff`);
+	const radiusRaw = cssVar(style, `--radius-m`, `8`);
+	return {
+		bg,
+		fg,
+		subtle,
+		accent,
+		radius: Number.parseFloat(radiusRaw) || 8,
+		font: fontOf(style)
+	};
+}
+function fitCanvas(canvas, cssW, cssH) {
+	let scale = Math.max(1, Math.min(3, typeof devicePixelRatio === `number` && devicePixelRatio > 0 ? devicePixelRatio : 1));
+	const maxScaleW = MAX_CANVAS_DIM / Math.max(1, cssW);
+	const maxScaleH = MAX_CANVAS_DIM / Math.max(1, cssH);
+	scale = Math.min(scale, maxScaleW, maxScaleH);
+	canvas.width = Math.max(1, Math.round(cssW * scale));
+	canvas.height = Math.max(1, Math.round(cssH * scale));
+	canvas.style.width = `${cssW}px`;
+	canvas.style.height = `${cssH}px`;
+	return {
+		scale,
+		dpr: scale
+	};
+}
+function roundRectPath(context, x, y, w, h, r) {
+	const radius = Math.max(0, Math.min(r, w / 2, h / 2));
+	if (typeof context.roundRect === `function`) {
+		context.beginPath();
+		context.roundRect(x, y, w, h, radius);
+		return;
+	}
+	context.beginPath();
+	context.moveTo(x + radius, y);
+	context.arcTo(x + w, y, x + w, y + h, radius);
+	context.arcTo(x + w, y + h, x, y + h, radius);
+	context.arcTo(x, y + h, x, y, radius);
+	context.arcTo(x, y, x + w, y, radius);
+	context.closePath();
+}
+function paintCards(context, scale, palette, captions, images, size, cssW, cssH) {
+	context.save();
+	context.scale(scale, scale);
+	roundRectPath(context, 0, 0, cssW, cssH, palette.radius);
+	context.fillStyle = palette.bg;
+	context.fill();
+	context.strokeStyle = palette.subtle;
+	context.lineWidth = 1;
+	context.stroke();
+	context.clip();
+	const gap = 6;
+	const pad = 8;
+	const wellSize = Math.round(size * .72);
+	context.font = palette.font;
+	context.textBaseline = `middle`;
+	for (let i = 0; i < captions.length; i++) {
+		const x = pad + i * (size + gap);
+		const wellX = x + (size - wellSize) / 2;
+		const wellY = pad;
+		roundRectPath(context, wellX, wellY, wellSize, wellSize, 4);
+		context.fillStyle = palette.subtle;
+		context.globalAlpha = .35;
+		context.fill();
+		context.globalAlpha = 1;
+		const img = images[i];
+		if (img) try {
+			context.save();
+			context.clip();
+			context.drawImage(img, wellX, wellY, wellSize, wellSize);
+			context.restore();
+		} catch {}
+		else {
+			context.fillStyle = palette.fg;
+			context.globalAlpha = .9;
+			context.font = `600 ${Math.round(wellSize * .4)}px system-ui, sans-serif`;
+			context.textAlign = `center`;
+			context.fillText(glyphFor(captions[i]), wellX + wellSize / 2, wellY + wellSize / 2 + 1);
+			context.globalAlpha = 1;
+			context.textAlign = `left`;
+			context.font = palette.font;
+		}
+		context.fillStyle = palette.fg;
+		context.globalAlpha = .9;
+		context.font = palette.font;
+		const label = captions[i].length > 12 ? `${captions[i].slice(0, 11)}…` : captions[i];
+		const textWidth = context.measureText(label).width;
+		context.fillText(label, x + (size - Math.min(size, textWidth)) / 2, wellY + wellSize + 10, size);
+		context.globalAlpha = 1;
+	}
+	context.restore();
+}
+function paintList(context, scale, palette, captions, images, rh, cssW, cssH) {
+	context.save();
+	context.scale(scale, scale);
+	roundRectPath(context, 0, 0, cssW, cssH, palette.radius);
+	context.fillStyle = palette.bg;
+	context.fill();
+	context.strokeStyle = palette.subtle;
+	context.lineWidth = 1;
+	context.stroke();
+	context.clip();
+	const pad = 8;
+	context.fillStyle = palette.fg;
+	context.font = `600 ${palette.font}`;
+	context.textBaseline = `middle`;
+	context.fillText(`${captions.length} items`, pad, 16, cssW - 16);
+	context.strokeStyle = palette.subtle;
+	context.beginPath();
+	context.moveTo(pad, 28);
+	context.lineTo(cssW - pad, 28);
+	context.stroke();
+	const thumb = Math.round(rh * .78);
+	const rows = Math.min(LIST_MAX_ROWS, captions.length);
+	context.font = palette.font;
+	for (let i = 0; i < rows; i++) {
+		const y = 32 + i * rh;
+		roundRectPath(context, pad, y + (rh - thumb) / 2, thumb, thumb, 4);
+		context.fillStyle = palette.subtle;
+		context.globalAlpha = .35;
+		context.fill();
+		context.globalAlpha = 1;
+		const img = images[i];
+		if (img) try {
+			context.save();
+			context.clip();
+			context.drawImage(img, pad, y + (rh - thumb) / 2, thumb, thumb);
+			context.restore();
+		} catch {}
+		else {
+			context.fillStyle = palette.fg;
+			context.font = `600 ${Math.round(thumb * .45)}px system-ui, sans-serif`;
+			context.textAlign = `center`;
+			context.fillText(glyphFor(captions[i]), pad + thumb / 2, y + rh / 2 + 1);
+			context.textAlign = `left`;
+			context.font = palette.font;
+		}
+		context.fillStyle = palette.fg;
+		context.globalAlpha = .92;
+		const maxText = cssW - 16 - thumb - 6;
+		context.fillText(captions[i], pad + thumb + 6, y + rh / 2 + 1, Math.max(8, maxText));
+		context.globalAlpha = 1;
+	}
+	if (captions.length > LIST_MAX_ROWS) {
+		context.fillStyle = palette.fg;
+		context.globalAlpha = .6;
+		context.textAlign = `center`;
+		context.fillText(`+${captions.length - LIST_MAX_ROWS} more`, cssW / 2, cssH - pad - 6, cssW - 16);
+		context.textAlign = `left`;
+		context.globalAlpha = 1;
+	}
+	context.restore();
+}
+/**
+* Uniform built-in HTML+canvas drag preview for all four list components.
+*
+* - ≤5 selected → a row of small cards (thumbnail well + caption).
+* - >5 selected → a compact list (`N items` header, up to 5 rows, `+N more`).
+*
+* Always returns an offscreen `element` for `DataTransfer.setDragImage()` and,
+* when a 2D context is available, a DPR-aware painted `canvas` for native
+* hosts. Colours track the active theme via `ctx.hostStyle` CSS variables.
+*/
+function createDefaultListDragPreview(ctx) {
+	const entries = ctx.selected;
+	const captions = entries.map((entry) => captionForEntry(entry));
+	const images = entries.map((entry) => decodedImage(entry));
+	const isCards = entries.length <= 5;
+	let element;
+	let cssW;
+	let cssH;
+	if (isCards) {
+		const size = cardSize(ctx.metrics);
+		cssW = entries.length * size + Math.max(0, entries.length - 1) * 6 + 16;
+		cssH = Math.round(size * .72) + 22 + 16;
+		element = buildCardsElement(ctx, captions, images);
+	} else {
+		const rh = rowHeight(ctx.metrics);
+		const rows = Math.min(LIST_MAX_ROWS, entries.length);
+		const more = entries.length > LIST_MAX_ROWS ? 18 : 0;
+		cssW = 236;
+		cssH = 40 + rows * rh + more;
+		element = buildListElement(ctx, captions, images);
+	}
+	let canvas;
+	try {
+		const candidate = document.createElement(`canvas`);
+		const paint = candidate.getContext(`2d`);
+		if (paint) {
+			const { scale } = fitCanvas(candidate, cssW, cssH);
+			const palette = paletteOf(ctx.hostStyle);
+			if (isCards) paintCards(paint, scale, palette, captions, images, cardSize(ctx.metrics), cssW, cssH);
+			else paintList(paint, scale, palette, captions, images, rowHeight(ctx.metrics), cssW, cssH);
+			canvas = candidate;
+		}
+	} catch {
+		canvas = void 0;
+	}
+	return {
+		element,
+		hotspot: {
+			x: 16,
+			y: 16
+		},
+		...canvas ? { canvas } : {},
+		dispose: () => {}
+	};
+}
+//#endregion
+//#region src/interaction/list-native-drag-controller.ts
+/**
+* Shared native item/row drag-out for list components.
+*
+* Owns capture-phase `dragstart` / `dragend` listeners on the host and its
+* render root, a `MutationObserver` that keeps light-DOM / slotted item `draggable`
+* attributes in sync, and a single post-dispatch disposal on
+* `requestAnimationFrame`. All DOM / selection knowledge lives in the host
+* config callbacks.
+*/
+var ListNativeDragController = class {
+	#host;
+	#config;
+	#dragging = false;
+	#boundRoot;
+	#boundHost = false;
+	#seenDragStarts = /* @__PURE__ */ new WeakSet();
+	#observer;
+	constructor(host, config) {
+		this.#host = host;
+		this.#config = config;
+		host.addController(this);
+	}
+	get isDragging() {
+		return this.#dragging;
+	}
+	/** `"true"` when enabled, else `"false"` — for shadow-row template bindings. */
+	get draggableAttr() {
+		try {
+			return this.#config.isEnabled() ? `true` : `false`;
+		} catch {
+			return `false`;
+		}
+	}
+	/** Re-run the light-DOM `draggable` sync (e.g. after `itemsDraggable` flips). */
+	refreshDraggable() {
+		try {
+			this.#config.syncLightDomDraggable?.();
+		} catch {}
+	}
+	hostConnected() {
+		this.#bind();
+		this.#observer ??= new MutationObserver(() => this.refreshDraggable());
+		try {
+			this.#observer.observe(this.#host, {
+				childList: true,
+				subtree: true
+			});
+		} catch {}
+		this.refreshDraggable();
+	}
+	hostDisconnected() {
+		this.#unbind();
+		try {
+			this.#observer?.disconnect();
+		} catch {}
+		this.#dragging = false;
+	}
+	#renderRoot() {
+		return this.#host.renderRoot ?? this.#host;
+	}
+	#bind() {
+		const root = this.#renderRoot();
+		if (root !== this.#boundRoot) {
+			this.#unbind();
+			this.#boundRoot = root;
+			root.addEventListener(`dragstart`, this.#onDragStart, { capture: true });
+			root.addEventListener(`dragend`, this.#onDragEnd, { capture: true });
+		}
+		if (!this.#boundHost) {
+			this.#boundHost = true;
+			this.#host.addEventListener(`dragstart`, this.#onDragStart, { capture: true });
+			this.#host.addEventListener(`dragend`, this.#onDragEnd, { capture: true });
+		}
+	}
+	#unbind() {
+		this.#boundRoot?.removeEventListener(`dragstart`, this.#onDragStart, { capture: true });
+		this.#boundRoot?.removeEventListener(`dragend`, this.#onDragEnd, { capture: true });
+		this.#boundRoot = void 0;
+		if (this.#boundHost) {
+			this.#boundHost = false;
+			this.#host.removeEventListener(`dragstart`, this.#onDragStart, { capture: true });
+			this.#host.removeEventListener(`dragend`, this.#onDragEnd, { capture: true });
+		}
+	}
+	#onDragStart = (event) => {
+		if (!(event instanceof DragEvent)) return;
+		if (this.#seenDragStarts.has(event)) return;
+		this.#seenDragStarts.add(event);
+		let enabled = false;
+		try {
+			enabled = this.#config.isEnabled();
+		} catch {
+			return;
+		}
+		if (!enabled) return;
+		let originKey;
+		try {
+			originKey = this.#config.resolveEventToKey(event.target);
+		} catch {
+			return;
+		}
+		if (!originKey) return;
+		let prepared;
+		try {
+			prepared = this.#config.prepareSelection(originKey);
+		} catch {
+			return;
+		}
+		if (!prepared || prepared.selected.length === 0) return;
+		const { origin, selected } = prepared;
+		let hostStyle;
+		try {
+			hostStyle = getComputedStyle(this.#host);
+		} catch {
+			hostStyle = document.createElement(`div`).style;
+		}
+		let metrics = {};
+		try {
+			metrics = this.#config.getMetrics() ?? {};
+		} catch {
+			metrics = {};
+		}
+		const context = {
+			source: this.#config.source,
+			origin,
+			selected,
+			metrics,
+			hostStyle
+		};
+		let renderer;
+		try {
+			renderer = this.#config.getRenderer();
+		} catch {
+			renderer = void 0;
+		}
+		let preview;
+		try {
+			preview = renderer ? renderer(context) : createDefaultListDragPreview(context);
+		} catch {
+			preview = createDefaultListDragPreview(context);
+		}
+		try {
+			document.body.appendChild(preview.element);
+		} catch {}
+		const detail = {
+			key: origin.key,
+			index: origin.index,
+			item: origin.item,
+			selectedKeys: selected.map((entry) => entry.key),
+			selected,
+			preview
+		};
+		let notCancelled = true;
+		try {
+			notCancelled = this.#config.dispatch(detail);
+		} catch {
+			notCancelled = true;
+		}
+		if (notCancelled) {
+			const hotspot = preview.hotspot ?? {
+				x: 16,
+				y: 16
+			};
+			try {
+				event.dataTransfer?.setDragImage(preview.element, hotspot.x, hotspot.y);
+			} catch {}
+		} else try {
+			event.preventDefault();
+		} catch {}
+		this.#dragging = true;
+		try {
+			this.#config.onActiveChange(true, origin.key);
+		} catch {}
+		requestAnimationFrame(() => {
+			try {
+				preview.element.remove();
+			} catch {}
+			try {
+				preview.dispose?.();
+			} catch {}
+		});
+	};
+	#onDragEnd = () => {
+		if (!this.#dragging) return;
+		this.#dragging = false;
+		try {
+			this.#config.onActiveChange(false);
+		} catch {}
+		try {
+			this.#config.onEnd();
+		} catch {}
+	};
+};
+//#endregion
+export { captionForEntry as n, createDefaultListDragPreview as r, ListNativeDragController as t };
+
+//# sourceMappingURL=list-native-drag-controller-DrY3qeJM.js.map