@selimssevgi/cube-design-angular 0.2.1 → 0.4.0

package/fesm2022/selimssevgi-cube-design-angular.mjs

@@ -1,6 +1,6 @@
 import * as i0 from "@angular/core";
-import { ChangeDetectionStrategy, Component, DestroyRef, Directive, ElementRef, InjectionToken, TemplateRef, afterNextRender, computed, contentChild, effect, inject, input, output, signal, untracked, viewChild } from "@angular/core";
-import { NgTemplateOutlet } from "@angular/common";
+import { ChangeDetectionStrategy, Component, DestroyRef, Directive, ElementRef, InjectionToken, PLATFORM_ID, Renderer2, TemplateRef, afterNextRender, computed, contentChild, effect, inject, input, output, signal, untracked, viewChild } from "@angular/core";
+import { NgTemplateOutlet, isPlatformBrowser } from "@angular/common";
 function sizeFor(count) {
 	let s = 1;
 	while (s * s * s < count && s < 7) s++;
@@ -453,6 +453,633 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
+const CUBE_PINCH_APART = 1.25;
+const CUBE_PINCH_TOGETHER = .8;
+const CUBE_WHEEL_QUIET_MS = 250;
+function startsWheelGesture(lastAt, now, quietMs = 250) {
+	return now - lastAt >= quietMs;
+}
+const stream = {
+	wheelAt: -Infinity,
+	gestureAt: -Infinity,
+	heard: null,
+	heardAfter: -Infinity,
+	ownedUntil: -Infinity
+};
+let listening = false;
+function listenToThePage(quietMs) {
+	const w = globalThis.window;
+	if (listening || !w?.addEventListener) return;
+	listening = true;
+	w.addEventListener("wheel", (e) => {
+		if (!e.ctrlKey) return;
+		const now = performance.now();
+		stream.heard = e;
+		stream.heardAfter = stream.wheelAt;
+		stream.wheelAt = now;
+		if (now - stream.heardAfter < quietMs && now < stream.ownedUntil + quietMs) {
+			stream.ownedUntil = now;
+			e.preventDefault();
+		}
+	}, {
+		capture: true,
+		passive: false
+	});
+}
+var CubePinch = class CubePinch {
+	cubePinchDisabled = input(false, ...ngDevMode ? [{ debugName: "cubePinchDisabled" }] : /* istanbul ignore next */ []);
+	cubePinchQuietMs = input(250, ...ngDevMode ? [{ debugName: "cubePinchQuietMs" }] : /* istanbul ignore next */ []);
+	cubePinched = output();
+	constructor() {
+		listenToThePage(250);
+	}
+	pointers = /* @__PURE__ */ new Map();
+	pinch = null;
+	down(e) {
+		if (this.cubePinchDisabled()) return;
+		this.pointers.set(e.pointerId, {
+			x: e.clientX,
+			y: e.clientY
+		});
+		if (this.pointers.size !== 2) {
+			this.pinch = null;
+			return;
+		}
+		const [a, b] = [...this.pointers.values()];
+		this.pinch = {
+			distance: Math.max(1, Math.hypot(a.x - b.x, a.y - b.y)),
+			at: pointAt((a.x + b.x) / 2, (a.y + b.y) / 2)
+		};
+	}
+	move(e) {
+		if (this.pointers.has(e.pointerId)) this.pointers.set(e.pointerId, {
+			x: e.clientX,
+			y: e.clientY
+		});
+	}
+	up(e) {
+		if (this.pinch && this.pointers.size === 2 && this.pointers.has(e.pointerId)) {
+			this.pointers.set(e.pointerId, {
+				x: e.clientX,
+				y: e.clientY
+			});
+			const [a, b] = [...this.pointers.values()];
+			const ratio = Math.hypot(a.x - b.x, a.y - b.y) / this.pinch.distance;
+			const at = this.pinch.at;
+			this.pinch = null;
+			if (ratio > 1.25) this.emit("in", at, "touch", e);
+			else if (ratio < .8) this.emit("out", at, "touch", e);
+		}
+		this.pointers.delete(e.pointerId);
+	}
+	cancel(e) {
+		this.pinch = null;
+		this.pointers.delete(e.pointerId);
+	}
+	wheel(e) {
+		if (this.cubePinchDisabled() || !e.ctrlKey) return;
+		e.preventDefault();
+		const now = performance.now();
+		const starts = startsWheelGesture(stream.heard === e ? stream.heardAfter : stream.wheelAt, now, this.cubePinchQuietMs());
+		stream.wheelAt = now;
+		stream.ownedUntil = now;
+		if (!starts || e.deltaY === 0) return;
+		if (e.deltaY < 0) this.emit("in", pointAt(e.clientX, e.clientY), "wheel", e);
+		else this.emit("out", pointAt(e.clientX, e.clientY), "wheel", e);
+	}
+	gestureStart(e) {
+		if (this.cubePinchDisabled()) return;
+		e.preventDefault();
+	}
+	gestureChange(e) {
+		if (this.cubePinchDisabled()) return;
+		e.preventDefault();
+	}
+	gestureEnd(e) {
+		if (this.cubePinchDisabled()) return;
+		e.preventDefault();
+		const now = performance.now();
+		if (!startsWheelGesture(stream.wheelAt, now, this.cubePinchQuietMs())) return;
+		if (!startsWheelGesture(stream.gestureAt, now, this.cubePinchQuietMs())) return;
+		const g = e;
+		const scale = g.scale ?? 1;
+		const at = g.clientX === void 0 || g.clientY === void 0 ? null : pointAt(g.clientX, g.clientY);
+		if (scale > 1.25) this.emit("in", at, "gesture", e);
+		else if (scale < .8) this.emit("out", at, "gesture", e);
+		else return;
+		stream.gestureAt = now;
+	}
+	emit(way, at, via, event) {
+		this.cubePinched.emit({
+			way,
+			at,
+			via,
+			event
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: CubePinch,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.4",
+		type: CubePinch,
+		isStandalone: true,
+		selector: "[cubePinch]",
+		inputs: {
+			cubePinchDisabled: {
+				classPropertyName: "cubePinchDisabled",
+				publicName: "cubePinchDisabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			cubePinchQuietMs: {
+				classPropertyName: "cubePinchQuietMs",
+				publicName: "cubePinchQuietMs",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { cubePinched: "cubePinched" },
+		host: { listeners: {
+			"pointerdown": "down($event)",
+			"pointermove": "move($event)",
+			"pointerup": "up($event)",
+			"pointercancel": "cancel($event)",
+			"wheel": "wheel($event)",
+			"gesturestart": "gestureStart($event)",
+			"gesturechange": "gestureChange($event)",
+			"gestureend": "gestureEnd($event)"
+		} },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: CubePinch,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[cubePinch]",
+			host: {
+				"(pointerdown)": "down($event)",
+				"(pointermove)": "move($event)",
+				"(pointerup)": "up($event)",
+				"(pointercancel)": "cancel($event)",
+				"(wheel)": "wheel($event)",
+				"(gesturestart)": "gestureStart($event)",
+				"(gesturechange)": "gestureChange($event)",
+				"(gestureend)": "gestureEnd($event)"
+			}
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		cubePinchDisabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "cubePinchDisabled",
+				required: false
+			}]
+		}],
+		cubePinchQuietMs: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "cubePinchQuietMs",
+				required: false
+			}]
+		}],
+		cubePinched: [{
+			type: i0.Output,
+			args: ["cubePinched"]
+		}]
+	}
+});
+const pointAt = (x, y) => globalThis.document?.elementFromPoint?.(x, y) ?? null;
+const CUBE_DROP_OUT = "out";
+const CUBE_CARRY_MOVE = 12;
+const CUBE_CARRY_CLASSES = {
+	carrying: "cube-carrying",
+	lifted: "cube-carry-lifted",
+	ghost: "cube-carry-ghost",
+	over: "cube-carry-over"
+};
+const TOUCH_ECHO_MS = 800;
+var CubeCarry = class CubeCarry {
+	cubeCarry = input(null, ...ngDevMode ? [{ debugName: "cubeCarry" }] : /* istanbul ignore next */ []);
+	cubeCarryDisabled = input(false, ...ngDevMode ? [{ debugName: "cubeCarryDisabled" }] : /* istanbul ignore next */ []);
+	cubeHoldMs = input(520, ...ngDevMode ? [{ debugName: "cubeHoldMs" }] : /* istanbul ignore next */ []);
+	cubeHoldSlop = input(10, ...ngDevMode ? [{ debugName: "cubeHoldSlop" }] : /* istanbul ignore next */ []);
+	cubeHoldBuzz = input(true, ...ngDevMode ? [{ debugName: "cubeHoldBuzz" }] : /* istanbul ignore next */ []);
+	cubeHeld = output();
+	cubeLifted = output();
+	cubeCarriedOver = output();
+	cubeDropped = output();
+	cubeCarryEnd = output();
+	element = inject(ElementRef).nativeElement;
+	press = null;
+	lastTouch = 0;
+	swallow = false;
+	doc = this.element.ownerDocument;
+	listening = [];
+	constructor() {
+		const swallow = (e) => {
+			if (!this.swallow) return;
+			this.swallow = false;
+			e.preventDefault();
+			e.stopImmediatePropagation();
+		};
+		this.element.addEventListener("click", swallow, true);
+		inject(DestroyRef).onDestroy(() => {
+			this.cancel();
+			this.element.removeEventListener("click", swallow, true);
+		});
+	}
+	get carrying() {
+		return !!this.press?.lifted;
+	}
+	touchStart(e) {
+		this.lastTouch = Date.now();
+		if (this.cubeCarryDisabled()) return;
+		if (e.touches.length !== 1) {
+			this.cancel();
+			return;
+		}
+		const t = e.touches[0];
+		this.begin(t.clientX, t.clientY, true, e);
+	}
+	mouseDown(e) {
+		if (this.cubeCarryDisabled() || e.button !== 0) return;
+		if (Date.now() - this.lastTouch < TOUCH_ECHO_MS) return;
+		this.begin(e.clientX, e.clientY, false, e);
+	}
+	menu(e) {
+		if (this.cubeCarryDisabled()) return;
+		e.preventDefault();
+		if (Date.now() - this.lastTouch < TOUCH_ECHO_MS || this.press) return;
+		this.fireHeld("menu", e);
+	}
+	noDrag(e) {
+		if (!this.cubeCarryDisabled()) e.preventDefault();
+	}
+	begin(x, y, touch, event) {
+		this.cancel();
+		this.swallow = false;
+		const p = {
+			x,
+			y,
+			touch,
+			event,
+			lifted: false,
+			moved: false,
+			scrolled: false,
+			dx: 0,
+			dy: 0,
+			target: null
+		};
+		this.press = p;
+		p.timer = setTimeout(() => this.lift(), this.cubeHoldMs());
+		if (touch) {
+			this.listen("touchmove", (ev) => this.touchMove(ev), { passive: false });
+			this.listen("touchend", (ev) => this.touchEnd(ev), { passive: false });
+			this.listen("touchcancel", () => this.cancel(), {});
+			this.listen("touchstart", (ev) => ev.touches.length > 1 && this.cancel(), { passive: true });
+		} else {
+			this.listen("mousemove", (ev) => this.moveTo(ev.clientX, ev.clientY), {});
+			this.listen("mouseup", () => this.end(), {});
+		}
+		this.listen("keydown", (ev) => {
+			if (ev.key !== "Escape" || !this.press) return;
+			if (this.press.lifted) ev.stopPropagation();
+			this.cancel();
+		}, { capture: true });
+	}
+	touchMove(e) {
+		if (!this.press) return;
+		if (e.touches.length > 1) {
+			this.cancel();
+			return;
+		}
+		if (this.press.lifted && e.cancelable) e.preventDefault();
+		const t = e.touches[0];
+		if (t) this.moveTo(t.clientX, t.clientY);
+	}
+	touchEnd(e) {
+		if (!this.press || e.touches.length > 0) return;
+		if (this.press.lifted && e.cancelable) e.preventDefault();
+		this.end();
+	}
+	lift() {
+		const p = this.press;
+		if (!p) return;
+		p.timer = void 0;
+		const piece = this.cubeCarry();
+		if (!piece) {
+			this.forget();
+			this.fireHeld("press", p.event);
+			return;
+		}
+		p.lifted = true;
+		this.swallow = true;
+		if (this.cubeHoldBuzz()) globalThis.navigator?.vibrate?.(12);
+		const r = this.element.getBoundingClientRect();
+		const ghost = this.element.cloneNode(true);
+		ghost.removeAttribute("data-drop");
+		ghost.removeAttribute("id");
+		ghost.querySelectorAll("[id],[data-drop]").forEach((el) => {
+			el.removeAttribute("id");
+			el.removeAttribute("data-drop");
+		});
+		ghost.classList.add(CUBE_CARRY_CLASSES.ghost);
+		ghost.setAttribute("aria-hidden", "true");
+		Object.assign(ghost.style, {
+			position: "fixed",
+			zIndex: "var(--cube-carry-ghost-z, 1000)",
+			pointerEvents: "none",
+			margin: "0",
+			boxSizing: "border-box",
+			width: r.width + "px",
+			height: r.height + "px",
+			left: r.left + "px",
+			top: r.top + "px",
+			transform: "var(--cube-carry-ghost-transform, scale(1.08) rotate(-2deg))",
+			boxShadow: "var(--cube-carry-ghost-shadow, 0 14px 32px rgb(0 0 0 / 0.28))",
+			opacity: "var(--cube-carry-ghost-opacity, 0.95)"
+		});
+		p.dx = p.x - r.left;
+		p.dy = p.y - r.top;
+		p.ghost = ghost;
+		this.doc.body.appendChild(ghost);
+		this.element.classList.add(CUBE_CARRY_CLASSES.lifted);
+		p.opacity = this.element.style.opacity;
+		this.element.style.opacity = "var(--cube-carry-lifted-opacity, 0.3)";
+		this.doc.body.classList.add(CUBE_CARRY_CLASSES.carrying);
+		this.cubeLifted.emit({
+			piece,
+			element: this.element,
+			ghost
+		});
+	}
+	moveTo(x, y) {
+		const p = this.press;
+		if (!p) return;
+		if (!p.lifted) {
+			if (Math.hypot(x - p.x, y - p.y) > this.cubeHoldSlop()) {
+				clearTimeout(p.timer);
+				p.timer = void 0;
+				p.scrolled = true;
+			}
+			return;
+		}
+		if (!p.ghost) return;
+		if (Math.hypot(x - p.x, y - p.y) > 12) p.moved = true;
+		p.ghost.style.left = x - p.dx + "px";
+		p.ghost.style.top = y - p.dy + "px";
+		let target = (this.doc.elementFromPoint?.(x, y) ?? null)?.closest("[data-drop]") ?? null;
+		if (target && (target === this.element || this.element.contains(target))) target = null;
+		if (target !== p.target) {
+			p.target?.classList.remove(CUBE_CARRY_CLASSES.over);
+			p.target = target;
+			target?.classList.add(CUBE_CARRY_CLASSES.over);
+			this.cubeCarriedOver.emit({
+				piece: this.cubeCarry() ?? "",
+				onto: target?.dataset["drop"] ?? null,
+				target
+			});
+		}
+	}
+	end() {
+		const p = this.press;
+		if (!p) return;
+		this.forget();
+		if (!p.lifted) return;
+		const piece = this.cubeCarry() ?? "";
+		this.clean(p);
+		if (!p.moved) {
+			this.fireHeld("press", p.event, false);
+			this.cubeCarryEnd.emit("held");
+			return;
+		}
+		if (!p.target) {
+			this.cubeCarryEnd.emit("nowhere");
+			return;
+		}
+		this.cubeDropped.emit({
+			piece,
+			onto: p.target.dataset["drop"] ?? "",
+			target: p.target
+		});
+		this.cubeCarryEnd.emit("dropped");
+	}
+	cancel() {
+		const p = this.press;
+		if (!p) return;
+		this.forget();
+		if (p.lifted) {
+			this.clean(p);
+			this.cubeCarryEnd.emit("cancelled");
+		}
+	}
+	clean(p) {
+		p.ghost?.remove();
+		p.target?.classList.remove(CUBE_CARRY_CLASSES.over);
+		this.element.classList.remove(CUBE_CARRY_CLASSES.lifted);
+		if (p.opacity !== void 0) this.element.style.opacity = p.opacity;
+		this.doc.body.classList.remove(CUBE_CARRY_CLASSES.carrying);
+	}
+	forget() {
+		if (this.press) clearTimeout(this.press.timer);
+		this.press = null;
+		for (const [type, fn, opts] of this.listening.splice(0)) this.doc.removeEventListener(type, fn, opts);
+	}
+	listen(type, fn, opts) {
+		this.doc.addEventListener(type, fn, opts);
+		this.listening.push([
+			type,
+			fn,
+			opts
+		]);
+	}
+	fireHeld(via, event, buzz = true) {
+		this.swallow = true;
+		if (buzz && this.cubeHoldBuzz()) globalThis.navigator?.vibrate?.(12);
+		this.cubeHeld.emit({
+			via,
+			element: this.element,
+			event
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: CubeCarry,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.4",
+		type: CubeCarry,
+		isStandalone: true,
+		selector: "[cubeCarry]",
+		inputs: {
+			cubeCarry: {
+				classPropertyName: "cubeCarry",
+				publicName: "cubeCarry",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			cubeCarryDisabled: {
+				classPropertyName: "cubeCarryDisabled",
+				publicName: "cubeCarryDisabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			cubeHoldMs: {
+				classPropertyName: "cubeHoldMs",
+				publicName: "cubeHoldMs",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			cubeHoldSlop: {
+				classPropertyName: "cubeHoldSlop",
+				publicName: "cubeHoldSlop",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			cubeHoldBuzz: {
+				classPropertyName: "cubeHoldBuzz",
+				publicName: "cubeHoldBuzz",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			cubeHeld: "cubeHeld",
+			cubeLifted: "cubeLifted",
+			cubeCarriedOver: "cubeCarriedOver",
+			cubeDropped: "cubeDropped",
+			cubeCarryEnd: "cubeCarryEnd"
+		},
+		host: {
+			listeners: {
+				"touchstart": "touchStart($event)",
+				"mousedown": "mouseDown($event)",
+				"contextmenu": "menu($event)",
+				"dragstart": "noDrag($event)",
+				"keydown": "swallow = false"
+			},
+			properties: {
+				"style.user-select": "cubeCarryDisabled() ? null : \"none\"",
+				"style.-webkit-user-select": "cubeCarryDisabled() ? null : \"none\"",
+				"style.-webkit-touch-callout": "cubeCarryDisabled() ? null : \"none\""
+			}
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: CubeCarry,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[cubeCarry]",
+			host: {
+				"[style.user-select]": "cubeCarryDisabled() ? null : \"none\"",
+				"[style.-webkit-user-select]": "cubeCarryDisabled() ? null : \"none\"",
+				"[style.-webkit-touch-callout]": "cubeCarryDisabled() ? null : \"none\"",
+				"(touchstart)": "touchStart($event)",
+				"(mousedown)": "mouseDown($event)",
+				"(contextmenu)": "menu($event)",
+				"(dragstart)": "noDrag($event)",
+				"(keydown)": "swallow = false"
+			}
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		cubeCarry: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "cubeCarry",
+				required: false
+			}]
+		}],
+		cubeCarryDisabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "cubeCarryDisabled",
+				required: false
+			}]
+		}],
+		cubeHoldMs: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "cubeHoldMs",
+				required: false
+			}]
+		}],
+		cubeHoldSlop: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "cubeHoldSlop",
+				required: false
+			}]
+		}],
+		cubeHoldBuzz: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "cubeHoldBuzz",
+				required: false
+			}]
+		}],
+		cubeHeld: [{
+			type: i0.Output,
+			args: ["cubeHeld"]
+		}],
+		cubeLifted: [{
+			type: i0.Output,
+			args: ["cubeLifted"]
+		}],
+		cubeCarriedOver: [{
+			type: i0.Output,
+			args: ["cubeCarriedOver"]
+		}],
+		cubeDropped: [{
+			type: i0.Output,
+			args: ["cubeDropped"]
+		}],
+		cubeCarryEnd: [{
+			type: i0.Output,
+			args: ["cubeCarryEnd"]
+		}]
+	}
+});
 const CUBE_ICON_NAMES = [
 	"names",
 	"name",
@@ -793,6 +1420,7 @@ const CONTEXT_PART_ORDER = [
 	"view",
 	"sort",
 	"move",
+	"where",
 	"whose",
 	"hide"
 ];
@@ -802,7 +1430,10 @@ function orderParts(parts) {
 }
 const CONTEXT_CUBE_SOURCE = new InjectionToken("CONTEXT_CUBE_SOURCE");
 const CONTEXT_CUBE_WORDS = new InjectionToken("CONTEXT_CUBE_WORDS");
-const PART_ICONS = { hide: "shown" };
+const PART_ICONS = {
+	hide: "shown",
+	where: "place"
+};
 function partsLevel(parts, words, now = {}) {
 	return orderParts(parts).map((p) => ({
 		key: p,
@@ -857,9 +1488,12 @@ function gridFor(view, count) {
 		}
 	}
 }
-function sortItems(items, by, dir) {
+const TEXT_ORDERS = ["natural", "plain"];
+function sortItems(items, by, dir, text = "natural") {
 	const sign = dir === "down" ? -1 : 1;
-	const known = (v) => v !== null && v !== void 0 && v !== "";
+	const known = (v) => v !== null && v !== void 0 && v !== "" && !(typeof v === "number" && Number.isNaN(v));
+	const collator = new Intl.Collator(void 0, { numeric: text === "natural" });
+	const compare = (a, b) => typeof a === "number" && typeof b === "number" ? a - b : collator.compare(String(a), String(b));
 	return items.map((item, at) => ({
 		item,
 		at,
@@ -871,10 +1505,6 @@ function sortItems(items, by, dir) {
 		return sign * compare(a.value, b.value) || a.at - b.at;
 	}).map((x) => x.item);
 }
-function compare(a, b) {
-	if (typeof a === "number" && typeof b === "number") return a - b;
-	return String(a).localeCompare(String(b));
-}
 function namesLevel(names, words, opts = {}) {
 	const tiles = [...names.filter((n) => n.current), ...names.filter((n) => !n.current).reverse()].map((n, i) => ({
 		key: `name:${i}:${n.name}`,
@@ -952,6 +1582,122 @@ function sortDirectionsLevel(option, now, words) {
 		data: dir
 	}));
 }
+function insideOf(source, piece) {
+	const seen = /* @__PURE__ */ new Set();
+	const walk = [...source.partsOf(piece)];
+	while (walk.length) {
+		const p = walk.pop();
+		if (p === piece || seen.has(p)) continue;
+		seen.add(p);
+		walk.push(...source.partsOf(p));
+	}
+	return seen;
+}
+function wouldLoop(source, piece, place) {
+	return piece === place || insideOf(source, piece).has(place);
+}
+function refusalOf(source, piece, place) {
+	if (source.placesOf(piece).includes(place)) return null;
+	if (wouldLoop(source, piece, place)) return "inside-itself";
+	return source.refuses?.(piece, place) ?? null;
+}
+function placesOf(source, held, opts = {}) {
+	const at = opts.at ?? source.top;
+	const inside = insideOf(source, held);
+	const where = new Set(source.placesOf(held));
+	const given = source.givenPlaceOf?.(held) ?? null;
+	const hidden = (id) => !!source.hidden?.(id);
+	const shown = (place) => source.partsOf(place).filter((p) => !hidden(p));
+	const refused = (place) => refusalOf(source, held, place);
+	const usable = (q) => q !== held && !inside.has(q) && (where.has(q) || !refused(q));
+	const reached = /* @__PURE__ */ new Map();
+	const reaches = (q, trail = /* @__PURE__ */ new Set()) => {
+		if (reached.has(q)) return reached.get(q);
+		if (trail.has(q)) return false;
+		trail.add(q);
+		const r = shown(q).some((p) => p !== held && !inside.has(p) && (usable(p) || reaches(p, trail)));
+		reached.set(q, r);
+		return r;
+	};
+	const place = (key, isAt, deeper) => {
+		const stands = where.has(key);
+		const holds = shown(key).filter((p) => p !== held);
+		const tap = stands ? "take-out" : "stand";
+		return {
+			key,
+			title: source.nameOf(key),
+			at: isAt,
+			top: key === source.top,
+			in: stands,
+			last: stands && where.size === 1,
+			given: given === key,
+			self: false,
+			inside: false,
+			tap,
+			refused: stands ? given === key ? "given-place" : where.size === 1 ? "last-place" : null : refused(key),
+			holds,
+			empty: holds.length === 0,
+			deeper
+		};
+	};
+	const pale = (key, self) => {
+		const holds = shown(key).filter((p) => p !== held);
+		return {
+			key,
+			title: source.nameOf(key),
+			at: false,
+			top: key === source.top,
+			in: false,
+			last: false,
+			given: false,
+			self,
+			inside: !self,
+			tap: null,
+			refused: "inside-itself",
+			holds,
+			empty: holds.length === 0,
+			deeper: false
+		};
+	};
+	if (opts.flat) {
+		const out = [];
+		const seen = /* @__PURE__ */ new Set();
+		const queue = [at];
+		while (queue.length) {
+			const q = queue.shift();
+			if (seen.has(q) || q === held || inside.has(q)) continue;
+			seen.add(q);
+			if (usable(q) || q === at && q === source.top) out.push(place(q, q === at, false));
+			queue.push(...shown(q));
+		}
+		return out;
+	}
+	const out = [];
+	if (at !== held && !inside.has(at) && (usable(at) || at === source.top)) out.push(place(at, true, false));
+	for (const p of shown(at)) {
+		if (p === at) continue;
+		if (p === held || inside.has(p)) {
+			out.push(pale(p, p === held));
+			continue;
+		}
+		const deeper = reaches(p);
+		if (usable(p) || deeper) out.push(place(p, false, deeper));
+	}
+	return out;
+}
+function whereLevel(places, words = {}, opts = {}) {
+	const pathOf = opts.pathOf ?? ((p) => ["where", p.key]);
+	return places.map((p) => ({
+		key: "where:" + p.key,
+		title: words.title?.(p) ?? p.title,
+		line: words.line?.(p) ?? null,
+		icon: "place",
+		inUse: p.in,
+		pale: p.tap === null || !p.in && p.refused !== null,
+		zoom: p.deeper ? pathOf(p) : null,
+		data: p
+	}));
+}
 const TURNING_SIDES = 4;
 function turningRows(pieces, own, cols = 3, rows = cols) {
 	const across = Math.max(1, Math.floor(cols));
@@ -1087,7 +1833,7 @@ const noteTurned = (key) => {
 		localStorage.setItem(key, String(readTurned(key) + 1));
 	} catch {}
 };
-const reducedMotion = () => typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+const reducedMotion$1 = () => typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
 var CubeSquare = class CubeSquare {
 	tiles = input.required(...ngDevMode ? [{ debugName: "tiles" }] : /* istanbul ignore next */ []);
 	view = input("square", ...ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []);
@@ -1149,7 +1895,7 @@ var CubeSquare = class CubeSquare {
 	openPlaces = computed(() => Array.from({ length: this.layout().open }, (_, i) => i), ...ngDevMode ? [{ debugName: "openPlaces" }] : /* istanbul ignore next */ []);
 	angles = signal({}, ...ngDevMode ? [{ debugName: "angles" }] : /* istanbul ignore next */ []);
 	dragging = signal(null, ...ngDevMode ? [{ debugName: "dragging" }] : /* istanbul ignore next */ []);
-	still = signal(reducedMotion(), ...ngDevMode ? [{ debugName: "still" }] : /* istanbul ignore next */ []);
+	still = signal(reducedMotion$1(), ...ngDevMode ? [{ debugName: "still" }] : /* istanbul ignore next */ []);
 	nudging = signal(false, ...ngDevMode ? [{ debugName: "nudging" }] : /* istanbul ignore next */ []);
 	drag = null;
 	fingers = /* @__PURE__ */ new Set();
@@ -1264,7 +2010,7 @@ var CubeSquare = class CubeSquare {
 	}
 	nudge() {
 		const rings = this.rings();
-		if (this.nudged || !rings || reducedMotion()) return;
+		if (this.nudged || !rings || reducedMotion$1()) return;
 		if (readTurned(this.nudgeKey()) >= 3) return;
 		const rows = rings.sides.flatMap((s, i) => s > 1 ? [i] : []);
 		if (!rows.length) return;
@@ -1318,7 +2064,7 @@ var CubeSquare = class CubeSquare {
 			const { cols, list } = this.layout();
 			const view = this.view();
 			const el = this.grid()?.nativeElement;
-			if (el && before && cols !== before && view === beforeView && !list && !reducedMotion() && typeof el.animate === "function") el.animate([{ transform: `scale(${cols / before})` }, { transform: "none" }], {
+			if (el && before && cols !== before && view === beforeView && !list && !reducedMotion$1() && typeof el.animate === "function") el.animate([{ transform: `scale(${cols / before})` }, { transform: "none" }], {
 				duration: 420,
 				easing: "cubic-bezier(.2,.7,.2,1)"
 			});
@@ -1799,12 +2545,71 @@ function contextIcon(tile) {
 	if (tile.icon === "hide") return "shown";
 	return "face";
 }
+var ContextAttrs = class ContextAttrs {
+	ccAttrs = input(...ngDevMode ? [void 0, { debugName: "ccAttrs" }] : /* istanbul ignore next */ []);
+	el = inject(ElementRef);
+	renderer = inject(Renderer2);
+	set = [];
+	constructor() {
+		effect(() => {
+			const attrs = this.ccAttrs() ?? {};
+			const node = this.el.nativeElement;
+			const next = Object.keys(attrs).filter((k) => k.startsWith("data-") && attrs[k] != null);
+			for (const k of this.set) if (!next.includes(k)) this.renderer.removeAttribute(node, k);
+			for (const k of next) this.renderer.setAttribute(node, k, attrs[k]);
+			this.set = next;
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: ContextAttrs,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.4",
+		type: ContextAttrs,
+		isStandalone: true,
+		selector: "[ccAttrs]",
+		inputs: { ccAttrs: {
+			classPropertyName: "ccAttrs",
+			publicName: "ccAttrs",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: ContextAttrs,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "[ccAttrs]" }]
+	}],
+	ctorParameters: () => [],
+	propDecorators: { ccAttrs: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "ccAttrs",
+			required: false
+		}]
+	}] }
+});
 var CubeContext = class CubeContext {
 	held = input.required(...ngDevMode ? [{ debugName: "held" }] : /* istanbul ignore next */ []);
 	path = input([], ...ngDevMode ? [{ debugName: "path" }] : /* istanbul ignore next */ []);
 	source = input(null, ...ngDevMode ? [{ debugName: "source" }] : /* istanbul ignore next */ []);
 	words = input(null, ...ngDevMode ? [{ debugName: "words" }] : /* istanbul ignore next */ []);
 	maxSide = input(880, ...ngDevMode ? [{ debugName: "maxSide" }] : /* istanbul ignore next */ []);
+	heldKey = input((held) => held, ...ngDevMode ? [{ debugName: "heldKey" }] : /* istanbul ignore next */ []);
 	enter = output();
 	out = output();
 	done = output();
@@ -1838,6 +2643,14 @@ var CubeContext = class CubeContext {
 			untracked(() => this.busy.set(null));
 		});
 	}
+	zoomInto(tile, element) {
+		if (this.busy() !== null || !tile.zoom?.length) return;
+		if (element) this.tapped.emit({
+			tile,
+			element
+		});
+		this.enter.emit([...tile.zoom]);
+	}
 	async tap(tile, element) {
 		if (this.busy() !== null) return;
 		if (element) this.tapped.emit({
@@ -1847,7 +2660,8 @@ var CubeContext = class CubeContext {
 		const held = this.held();
 		const path = this.path();
 		const where = this.where();
-		const here = () => this.held() === held && this.where() === where;
+		const key = this.heldKey();
+		const here = () => key(this.held()) === key(held) && this.where() === where;
 		this.busy.set(tile.key);
 		try {
 			const picked = await this.from().pick(held, path, tile);
@@ -1915,6 +2729,13 @@ var CubeContext = class CubeContext {
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
+			},
+			heldKey: {
+				classPropertyName: "heldKey",
+				publicName: "heldKey",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
 			}
 		},
 		outputs: {
@@ -1933,35 +2754,57 @@ var CubeContext = class CubeContext {
       [class.cc-adds]="adds()"
     >
       <ng-template [cubeSquareTile]="tiles()" let-t let-level="level">
-        <button
-          type="button"
-          [class]="'cc-tile cc-l' + level"
-          [class.cc-in-use]="!!t.inUse"
-          [class.cc-pale]="!!t.pale"
-          [class.cc-adds]="!!t.adds"
-          [class.cc-busy]="busy() === t.key"
-          [disabled]="busy() !== null"
-          [attr.aria-label]="level >= 4 ? t.title : null"
-          [attr.aria-current]="t.inUse ? 'true' : null"
-          [attr.title]="level >= 3 ? t.title : null"
-          (click)="tap(t, $any($event.currentTarget))"
-        >
-          <span class="cc-icon"><cube-icon [icon]="iconOf(t)" [inUse]="!!t.inUse" /></span>
-          @if (level < 4) {
-            <span class="cc-t">{{ t.title }}</span>
-          }
-          @if (t.line && level < 3) {
-            <span class="cc-m">{{ t.line }}</span>
-          }
-          @if (t.inUse && inUseWord() && level < 3) {
-            <span class="cc-tick">{{ inUseWord() }}</span>
+        <div class="cc-cell" [ccAttrs]="t.attrs">
+          <button
+            type="button"
+            [class]="'cc-tile cc-l' + level"
+            [class.cc-in-use]="!!t.inUse"
+            [class.cc-pale]="!!t.pale"
+            [class.cc-adds]="!!t.adds"
+            [class.cc-busy]="busy() === t.key"
+            [disabled]="busy() !== null"
+            [attr.aria-label]="level >= 4 ? t.title : null"
+            [attr.aria-current]="t.inUse ? 'true' : null"
+            [attr.title]="level >= 3 ? t.title : null"
+            (click)="tap(t, $any($event.currentTarget))"
+          >
+            <span class="cc-icon"><cube-icon [icon]="iconOf(t)" [inUse]="!!t.inUse" /></span>
+            @if (level < 4) {
+              <span class="cc-t">{{ t.title }}</span>
+            }
+            @if (t.line && level < 3) {
+              <span class="cc-m">{{ t.line }}</span>
+            }
+            @if (t.inUse && inUseWord() && level < 3) {
+              <span class="cc-tick">{{ inUseWord() }}</span>
+            }
+          </button>
+          @if (t.zoom?.length) {
+            <button
+              type="button"
+              class="cc-go"
+              [disabled]="busy() !== null"
+              [attr.aria-label]="t.zoomLabel || t.title"
+              (click)="zoomInto(t, $any($event.currentTarget))"
+            >
+              <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
+                <path
+                  d="M6 3l5 5-5 5"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+            </button>
           }
-        </button>
+        </div>
       </ng-template>
     </cube-square>
   `,
 		isInline: true,
-		styles: [":host{display:block;font:inherit;color:var(--cube-context-ink, #1f2a26);--cube-square-place: color-mix(in srgb, var(--cube-context-line, #dae0d9) 55%, transparent);--cube-square-place-dashed: var(--cube-context-line, #dae0d9);--cube-square-radius: var(--cube-context-radius, 20px)}.cc-tile{all:unset;cursor:pointer;box-sizing:border-box;min-width:0;min-height:0;height:100%;overflow:hidden;display:grid;justify-items:center;align-content:center;gap:6px;padding:14px 10px 12px;text-align:center;background:var(--cube-context-tile, #ffffff);border:1px solid var(--cube-context-line, #dae0d9);border-radius:var(--cube-context-radius, 20px);user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;transition:transform .16s}.cc-tile:active:not(:disabled){transform:scale(.97)}.cc-tile:focus-visible{outline:3px solid var(--cube-context-focus, #5f9a80);outline-offset:2px}.cc-tile.cc-in-use{border:2px solid var(--cube-context-in-use, #3b5a4c)}.cc-tile.cc-pale{background:transparent;border:2px dashed var(--cube-context-line, #dae0d9);color:var(--cube-context-quiet, #5d6a64)}.cc-tile.cc-adds{border:2px solid var(--cube-context-adds, #c8693f)}.cc-tile.cc-busy{opacity:.6;cursor:progress}.cc-tile:disabled:not(.cc-busy){cursor:default}.cc-icon{display:grid;place-items:center;line-height:0}.cc-tile.cc-adds .cc-icon{width:52px;height:52px;border-radius:50%;background:var(--cube-context-adds-bg, #f3e3d6);--cube-icon-stroke: var(--cube-context-adds-ink, #7a4a2b);--cube-icon-size: 26px}.cc-t,.cc-m{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}.cc-t{-webkit-line-clamp:var(--cube-context-title-lines, 2);line-clamp:var(--cube-context-title-lines, 2)}.cc-m{-webkit-line-clamp:var(--cube-context-line-lines, 2);line-clamp:var(--cube-context-line-lines, 2)}.cc-t{font-size:var(--cube-context-title-size, 17px);font-weight:700;line-height:1.2}.cc-m{font-size:var(--cube-context-line-size, 13px);line-height:1.3;color:var(--cube-context-quiet, #5d6a64)}.cc-tick{font-size:var(--cube-context-line-size, 13px);font-weight:800;color:var(--cube-context-in-use, #3b5a4c)}.cc-tile.cc-l0{border-radius:28px;padding:24px;gap:10px}.cc-l0 .cc-t{font-size:calc(var(--cube-context-title-size, 17px) * 26 / 17)}.cc-l0 .cc-m{font-size:calc(var(--cube-context-line-size, 13px) * 16 / 13)}.cc-l0 .cc-icon{--cube-icon-size: 64px}.cc-tile.cc-l0.cc-adds .cc-icon{width:96px;height:96px;--cube-icon-size: 40px}.cc-tile.cc-l2{border-radius:16px;padding:10px 6px;gap:5px}.cc-l2 .cc-t{font-size:calc(var(--cube-context-title-size, 17px) * 14 / 17)}.cc-l2 .cc-m{font-size:calc(var(--cube-context-line-size, 13px) * 12 / 13)}.cc-tile.cc-l3{border-radius:12px;padding:6px 4px;gap:3px}.cc-l3 .cc-t{font-size:calc(var(--cube-context-title-size, 17px) * 12 / 17)}.cc-tile.cc-l4{border-radius:9px;padding:2px;gap:0}.cc-l3 .cc-icon,.cc-l4 .cc-icon{--cube-icon-size: 24px}.cc-tile.cc-l3.cc-adds .cc-icon,.cc-tile.cc-l4.cc-adds .cc-icon{width:30px;height:30px;--cube-icon-size: 18px}\n"],
+		styles: [":host{display:block;font:inherit;color:var(--cube-context-ink, #1f2a26);--cube-square-place: color-mix(in srgb, var(--cube-context-line, #dae0d9) 55%, transparent);--cube-square-place-dashed: var(--cube-context-line, #dae0d9);--cube-square-radius: var(--cube-context-radius, 20px)}.cc-cell{position:relative;height:100%;min-width:0;min-height:0;display:grid}.cc-go{all:unset;cursor:pointer;position:absolute;top:6px;right:6px;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;color:var(--cube-context-ink, #1f2a26);background:var( --cube-context-go, color-mix(in srgb, var(--cube-context-line, #dae0d9) 60%, transparent) )}.cc-go:focus-visible{outline:3px solid var(--cube-context-focus, #5f9a80);outline-offset:2px}.cc-go:disabled{cursor:default}.cc-tile{all:unset;cursor:pointer;box-sizing:border-box;min-width:0;min-height:0;height:100%;overflow:hidden;display:grid;justify-items:center;align-content:center;gap:6px;padding:14px 10px 12px;text-align:center;background:var(--cube-context-tile, #ffffff);border:1px solid var(--cube-context-line, #dae0d9);border-radius:var(--cube-context-radius, 20px);user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;transition:transform .16s}.cc-tile:active:not(:disabled){transform:scale(.97)}.cc-tile:focus-visible{outline:3px solid var(--cube-context-focus, #5f9a80);outline-offset:2px}.cc-tile.cc-in-use{border:2px solid var(--cube-context-in-use, #3b5a4c)}.cc-tile.cc-pale{background:transparent;border:2px dashed var(--cube-context-line, #dae0d9);color:var(--cube-context-quiet, #5d6a64)}.cc-tile.cc-adds{border:2px solid var(--cube-context-adds, #c8693f)}.cc-tile.cc-busy{opacity:.6;cursor:progress}.cc-tile:disabled:not(.cc-busy){cursor:default}.cc-icon{display:grid;place-items:center;line-height:0}.cc-tile.cc-adds .cc-icon{width:52px;height:52px;border-radius:50%;background:var(--cube-context-adds-bg, #f3e3d6);--cube-icon-stroke: var(--cube-context-adds-ink, #7a4a2b);--cube-icon-size: 26px}.cc-t,.cc-m{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}.cc-t{-webkit-line-clamp:var(--cube-context-title-lines, 2);line-clamp:var(--cube-context-title-lines, 2)}.cc-m{-webkit-line-clamp:var(--cube-context-line-lines, 2);line-clamp:var(--cube-context-line-lines, 2)}.cc-t{font-size:var(--cube-context-title-size, 17px);font-weight:700;line-height:1.2}.cc-m{font-size:var(--cube-context-line-size, 13px);line-height:1.3;color:var(--cube-context-quiet, #5d6a64)}.cc-tick{font-size:var(--cube-context-line-size, 13px);font-weight:800;color:var(--cube-context-in-use, #3b5a4c)}.cc-tile.cc-l0{border-radius:28px;padding:24px;gap:10px}.cc-l0 .cc-t{font-size:calc(var(--cube-context-title-size, 17px) * 26 / 17)}.cc-l0 .cc-m{font-size:calc(var(--cube-context-line-size, 13px) * 16 / 13)}.cc-l0 .cc-icon{--cube-icon-size: 64px}.cc-tile.cc-l0.cc-adds .cc-icon{width:96px;height:96px;--cube-icon-size: 40px}.cc-tile.cc-l2{border-radius:16px;padding:10px 6px;gap:5px}.cc-l2 .cc-t{font-size:calc(var(--cube-context-title-size, 17px) * 14 / 17)}.cc-l2 .cc-m{font-size:calc(var(--cube-context-line-size, 13px) * 12 / 13)}.cc-tile.cc-l3{border-radius:12px;padding:6px 4px;gap:3px}.cc-l3 .cc-t{font-size:calc(var(--cube-context-title-size, 17px) * 12 / 17)}.cc-tile.cc-l4{border-radius:9px;padding:2px;gap:0}.cc-l3 .cc-icon,.cc-l4 .cc-icon{--cube-icon-size: 24px}.cc-tile.cc-l3.cc-adds .cc-icon,.cc-tile.cc-l4.cc-adds .cc-icon{width:30px;height:30px;--cube-icon-size: 18px}\n"],
 		dependencies: [
 			{
 				kind: "component",
@@ -1992,6 +2835,12 @@ var CubeContext = class CubeContext {
 				type: CubeSquareTile,
 				selector: "ng-template[cubeSquareTile]",
 				inputs: ["cubeSquareTile"]
+			},
+			{
+				kind: "directive",
+				type: ContextAttrs,
+				selector: "[ccAttrs]",
+				inputs: ["ccAttrs"]
 			}
 		],
 		changeDetection: i0.ChangeDetectionStrategy.OnPush
@@ -2009,7 +2858,8 @@ i0.ɵɵngDeclareClassMetadata({
 			imports: [
 				CubeIcon,
 				CubeSquare,
-				CubeSquareTile
+				CubeSquareTile,
+				ContextAttrs
 			],
 			template: `
     <cube-square
@@ -2020,35 +2870,57 @@ i0.ɵɵngDeclareClassMetadata({
       [class.cc-adds]="adds()"
     >
       <ng-template [cubeSquareTile]="tiles()" let-t let-level="level">
-        <button
-          type="button"
-          [class]="'cc-tile cc-l' + level"
-          [class.cc-in-use]="!!t.inUse"
-          [class.cc-pale]="!!t.pale"
-          [class.cc-adds]="!!t.adds"
-          [class.cc-busy]="busy() === t.key"
-          [disabled]="busy() !== null"
-          [attr.aria-label]="level >= 4 ? t.title : null"
-          [attr.aria-current]="t.inUse ? 'true' : null"
-          [attr.title]="level >= 3 ? t.title : null"
-          (click)="tap(t, $any($event.currentTarget))"
-        >
-          <span class="cc-icon"><cube-icon [icon]="iconOf(t)" [inUse]="!!t.inUse" /></span>
-          @if (level < 4) {
-            <span class="cc-t">{{ t.title }}</span>
-          }
-          @if (t.line && level < 3) {
-            <span class="cc-m">{{ t.line }}</span>
-          }
-          @if (t.inUse && inUseWord() && level < 3) {
-            <span class="cc-tick">{{ inUseWord() }}</span>
+        <div class="cc-cell" [ccAttrs]="t.attrs">
+          <button
+            type="button"
+            [class]="'cc-tile cc-l' + level"
+            [class.cc-in-use]="!!t.inUse"
+            [class.cc-pale]="!!t.pale"
+            [class.cc-adds]="!!t.adds"
+            [class.cc-busy]="busy() === t.key"
+            [disabled]="busy() !== null"
+            [attr.aria-label]="level >= 4 ? t.title : null"
+            [attr.aria-current]="t.inUse ? 'true' : null"
+            [attr.title]="level >= 3 ? t.title : null"
+            (click)="tap(t, $any($event.currentTarget))"
+          >
+            <span class="cc-icon"><cube-icon [icon]="iconOf(t)" [inUse]="!!t.inUse" /></span>
+            @if (level < 4) {
+              <span class="cc-t">{{ t.title }}</span>
+            }
+            @if (t.line && level < 3) {
+              <span class="cc-m">{{ t.line }}</span>
+            }
+            @if (t.inUse && inUseWord() && level < 3) {
+              <span class="cc-tick">{{ inUseWord() }}</span>
+            }
+          </button>
+          @if (t.zoom?.length) {
+            <button
+              type="button"
+              class="cc-go"
+              [disabled]="busy() !== null"
+              [attr.aria-label]="t.zoomLabel || t.title"
+              (click)="zoomInto(t, $any($event.currentTarget))"
+            >
+              <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
+                <path
+                  d="M6 3l5 5-5 5"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+            </button>
           }
-        </button>
+        </div>
       </ng-template>
     </cube-square>
   `,
 			changeDetection: ChangeDetectionStrategy.OnPush,
-			styles: [":host{display:block;font:inherit;color:var(--cube-context-ink, #1f2a26);--cube-square-place: color-mix(in srgb, var(--cube-context-line, #dae0d9) 55%, transparent);--cube-square-place-dashed: var(--cube-context-line, #dae0d9);--cube-square-radius: var(--cube-context-radius, 20px)}.cc-tile{all:unset;cursor:pointer;box-sizing:border-box;min-width:0;min-height:0;height:100%;overflow:hidden;display:grid;justify-items:center;align-content:center;gap:6px;padding:14px 10px 12px;text-align:center;background:var(--cube-context-tile, #ffffff);border:1px solid var(--cube-context-line, #dae0d9);border-radius:var(--cube-context-radius, 20px);user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;transition:transform .16s}.cc-tile:active:not(:disabled){transform:scale(.97)}.cc-tile:focus-visible{outline:3px solid var(--cube-context-focus, #5f9a80);outline-offset:2px}.cc-tile.cc-in-use{border:2px solid var(--cube-context-in-use, #3b5a4c)}.cc-tile.cc-pale{background:transparent;border:2px dashed var(--cube-context-line, #dae0d9);color:var(--cube-context-quiet, #5d6a64)}.cc-tile.cc-adds{border:2px solid var(--cube-context-adds, #c8693f)}.cc-tile.cc-busy{opacity:.6;cursor:progress}.cc-tile:disabled:not(.cc-busy){cursor:default}.cc-icon{display:grid;place-items:center;line-height:0}.cc-tile.cc-adds .cc-icon{width:52px;height:52px;border-radius:50%;background:var(--cube-context-adds-bg, #f3e3d6);--cube-icon-stroke: var(--cube-context-adds-ink, #7a4a2b);--cube-icon-size: 26px}.cc-t,.cc-m{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}.cc-t{-webkit-line-clamp:var(--cube-context-title-lines, 2);line-clamp:var(--cube-context-title-lines, 2)}.cc-m{-webkit-line-clamp:var(--cube-context-line-lines, 2);line-clamp:var(--cube-context-line-lines, 2)}.cc-t{font-size:var(--cube-context-title-size, 17px);font-weight:700;line-height:1.2}.cc-m{font-size:var(--cube-context-line-size, 13px);line-height:1.3;color:var(--cube-context-quiet, #5d6a64)}.cc-tick{font-size:var(--cube-context-line-size, 13px);font-weight:800;color:var(--cube-context-in-use, #3b5a4c)}.cc-tile.cc-l0{border-radius:28px;padding:24px;gap:10px}.cc-l0 .cc-t{font-size:calc(var(--cube-context-title-size, 17px) * 26 / 17)}.cc-l0 .cc-m{font-size:calc(var(--cube-context-line-size, 13px) * 16 / 13)}.cc-l0 .cc-icon{--cube-icon-size: 64px}.cc-tile.cc-l0.cc-adds .cc-icon{width:96px;height:96px;--cube-icon-size: 40px}.cc-tile.cc-l2{border-radius:16px;padding:10px 6px;gap:5px}.cc-l2 .cc-t{font-size:calc(var(--cube-context-title-size, 17px) * 14 / 17)}.cc-l2 .cc-m{font-size:calc(var(--cube-context-line-size, 13px) * 12 / 13)}.cc-tile.cc-l3{border-radius:12px;padding:6px 4px;gap:3px}.cc-l3 .cc-t{font-size:calc(var(--cube-context-title-size, 17px) * 12 / 17)}.cc-tile.cc-l4{border-radius:9px;padding:2px;gap:0}.cc-l3 .cc-icon,.cc-l4 .cc-icon{--cube-icon-size: 24px}.cc-tile.cc-l3.cc-adds .cc-icon,.cc-tile.cc-l4.cc-adds .cc-icon{width:30px;height:30px;--cube-icon-size: 18px}\n"]
+			styles: [":host{display:block;font:inherit;color:var(--cube-context-ink, #1f2a26);--cube-square-place: color-mix(in srgb, var(--cube-context-line, #dae0d9) 55%, transparent);--cube-square-place-dashed: var(--cube-context-line, #dae0d9);--cube-square-radius: var(--cube-context-radius, 20px)}.cc-cell{position:relative;height:100%;min-width:0;min-height:0;display:grid}.cc-go{all:unset;cursor:pointer;position:absolute;top:6px;right:6px;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;color:var(--cube-context-ink, #1f2a26);background:var( --cube-context-go, color-mix(in srgb, var(--cube-context-line, #dae0d9) 60%, transparent) )}.cc-go:focus-visible{outline:3px solid var(--cube-context-focus, #5f9a80);outline-offset:2px}.cc-go:disabled{cursor:default}.cc-tile{all:unset;cursor:pointer;box-sizing:border-box;min-width:0;min-height:0;height:100%;overflow:hidden;display:grid;justify-items:center;align-content:center;gap:6px;padding:14px 10px 12px;text-align:center;background:var(--cube-context-tile, #ffffff);border:1px solid var(--cube-context-line, #dae0d9);border-radius:var(--cube-context-radius, 20px);user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;transition:transform .16s}.cc-tile:active:not(:disabled){transform:scale(.97)}.cc-tile:focus-visible{outline:3px solid var(--cube-context-focus, #5f9a80);outline-offset:2px}.cc-tile.cc-in-use{border:2px solid var(--cube-context-in-use, #3b5a4c)}.cc-tile.cc-pale{background:transparent;border:2px dashed var(--cube-context-line, #dae0d9);color:var(--cube-context-quiet, #5d6a64)}.cc-tile.cc-adds{border:2px solid var(--cube-context-adds, #c8693f)}.cc-tile.cc-busy{opacity:.6;cursor:progress}.cc-tile:disabled:not(.cc-busy){cursor:default}.cc-icon{display:grid;place-items:center;line-height:0}.cc-tile.cc-adds .cc-icon{width:52px;height:52px;border-radius:50%;background:var(--cube-context-adds-bg, #f3e3d6);--cube-icon-stroke: var(--cube-context-adds-ink, #7a4a2b);--cube-icon-size: 26px}.cc-t,.cc-m{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}.cc-t{-webkit-line-clamp:var(--cube-context-title-lines, 2);line-clamp:var(--cube-context-title-lines, 2)}.cc-m{-webkit-line-clamp:var(--cube-context-line-lines, 2);line-clamp:var(--cube-context-line-lines, 2)}.cc-t{font-size:var(--cube-context-title-size, 17px);font-weight:700;line-height:1.2}.cc-m{font-size:var(--cube-context-line-size, 13px);line-height:1.3;color:var(--cube-context-quiet, #5d6a64)}.cc-tick{font-size:var(--cube-context-line-size, 13px);font-weight:800;color:var(--cube-context-in-use, #3b5a4c)}.cc-tile.cc-l0{border-radius:28px;padding:24px;gap:10px}.cc-l0 .cc-t{font-size:calc(var(--cube-context-title-size, 17px) * 26 / 17)}.cc-l0 .cc-m{font-size:calc(var(--cube-context-line-size, 13px) * 16 / 13)}.cc-l0 .cc-icon{--cube-icon-size: 64px}.cc-tile.cc-l0.cc-adds .cc-icon{width:96px;height:96px;--cube-icon-size: 40px}.cc-tile.cc-l2{border-radius:16px;padding:10px 6px;gap:5px}.cc-l2 .cc-t{font-size:calc(var(--cube-context-title-size, 17px) * 14 / 17)}.cc-l2 .cc-m{font-size:calc(var(--cube-context-line-size, 13px) * 12 / 13)}.cc-tile.cc-l3{border-radius:12px;padding:6px 4px;gap:3px}.cc-l3 .cc-t{font-size:calc(var(--cube-context-title-size, 17px) * 12 / 17)}.cc-tile.cc-l4{border-radius:9px;padding:2px;gap:0}.cc-l3 .cc-icon,.cc-l4 .cc-icon{--cube-icon-size: 24px}.cc-tile.cc-l3.cc-adds .cc-icon,.cc-tile.cc-l4.cc-adds .cc-icon{width:30px;height:30px;--cube-icon-size: 18px}\n"]
 		}]
 	}],
 	ctorParameters: () => [],
@@ -2093,6 +2965,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		heldKey: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "heldKey",
+				required: false
+			}]
+		}],
 		enter: [{
 			type: i0.Output,
 			args: ["enter"]
@@ -2111,6 +2991,287 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-export { CONTEXT_CUBE_SOURCE, CONTEXT_CUBE_WORDS, CONTEXT_PART_ORDER, CUBE_HOLD_MS, CUBE_HOLD_SLOP, CUBE_ICON_NAMES, CubeContext, CubeHold, CubeIcon, CubePicture, CubeSquare, CubeSquareTile, PART_ICONS, SQUARE_LIST_ROW, SQUARE_MAX_SIDE, TURNING_BELOW, TURNING_NUDGE_UNTIL, TURNING_SIDES, VIEW_KEYS, contextIcon, contextLevelFor, contextSquare, cubeIconCells, directionWords, drawCube, gridFor, hideLevel, isView, namesLevel, orderParts, partsLevel, sizeFor, sortDirectionsLevel, sortItems, sortLevel, squareGap, squareLayout, squareLevelFor, turningFront, turningRows, viewLevel };
+const CUBE_LOADING_WAYS = ["fill", "turn"];
+const CUBE_LOADING_LEVELS = [
+	"page",
+	"cube",
+	"piece"
+];
+function loadingWayFor(level) {
+	return level === "piece" ? "turn" : "fill";
+}
+const CUBE_LOADING_STEP_MS = {
+	fill: 150,
+	turn: 180
+};
+const CUBE_LOADING_WIDTH = {
+	page: 96,
+	cube: 64,
+	piece: 20
+};
+const CUBE_LOADING_COLOURS = [
+	"#5f9a80",
+	"#c8693f",
+	"#e0b44c",
+	"#4f7cac",
+	"#9b6bb3"
+];
+const CUBE_LOADING_STICKERS = 12;
+function loadingStickers(way, step, palette = CUBE_LOADING_COLOURS, stickers = 12) {
+	const n = Math.max(1, Math.floor(stickers));
+	const s = Math.max(0, Math.floor(step));
+	const colour = (i) => palette.length ? palette[i % palette.length] : null;
+	if (way === "fill") {
+		const k = s % (n + 1);
+		return Array.from({ length: n }, (_, i) => i < k ? colour(i) : null);
+	}
+	const base = Array.from({ length: n }, (_, i) => i % 3 === 0 ? colour(i / 3) : null);
+	return Array.from({ length: n }, (_, i) => base[((i - s) % n + n) % n]);
+}
+function stillStep(way, stickers = 12) {
+	return way === "fill" ? Math.floor(stickers / 2) : 0;
+}
+const reducedMotion = () => typeof matchMedia === "function" ? matchMedia("(prefers-reduced-motion: reduce)") : null;
+var CubeLoading = class CubeLoading {
+	level = input("page", ...ngDevMode ? [{ debugName: "level" }] : /* istanbul ignore next */ []);
+	way = input(null, ...ngDevMode ? [{ debugName: "way" }] : /* istanbul ignore next */ []);
+	count = input(9, ...ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []);
+	failed = input(false, ...ngDevMode ? [{ debugName: "failed" }] : /* istanbul ignore next */ []);
+	colours = input(CUBE_LOADING_COLOURS, ...ngDevMode ? [{ debugName: "colours" }] : /* istanbul ignore next */ []);
+	width = input(null, ...ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []);
+	wayInUse = computed(() => this.way() ?? loadingWayFor(this.level()), ...ngDevMode ? [{ debugName: "wayInUse" }] : /* istanbul ignore next */ []);
+	widthInUse = computed(() => this.width() ?? CUBE_LOADING_WIDTH[this.level()], ...ngDevMode ? [{ debugName: "widthInUse" }] : /* istanbul ignore next */ []);
+	places = computed(() => Array.from({ length: Math.max(0, Math.floor(this.count())) }, (_, i) => i), ...ngDevMode ? [{ debugName: "places" }] : /* istanbul ignore next */ []);
+	step = signal(0, ...ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []);
+	still = signal(reducedMotion()?.matches ?? false, ...ngDevMode ? [{ debugName: "still" }] : /* istanbul ignore next */ []);
+	stickers = computed(() => {
+		if (this.failed()) return [];
+		const way = this.wayInUse();
+		return loadingStickers(way, this.still() ? stillStep(way) : this.step(), this.colours());
+	}, ...ngDevMode ? [{ debugName: "stickers" }] : /* istanbul ignore next */ []);
+	constructor() {
+		if (!isPlatformBrowser(inject(PLATFORM_ID))) return;
+		const mq = reducedMotion();
+		const change = (e) => this.still.set(e.matches);
+		mq?.addEventListener?.("change", change);
+		inject(DestroyRef).onDestroy(() => mq?.removeEventListener?.("change", change));
+		effect((onCleanup) => {
+			if (this.failed() || this.still()) return;
+			const timer = setInterval(() => this.step.update((s) => s + 1), CUBE_LOADING_STEP_MS[this.wayInUse()]);
+			onCleanup(() => clearInterval(timer));
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: CubeLoading,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.4",
+		type: CubeLoading,
+		isStandalone: true,
+		selector: "cube-loading",
+		inputs: {
+			level: {
+				classPropertyName: "level",
+				publicName: "level",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			way: {
+				classPropertyName: "way",
+				publicName: "way",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			count: {
+				classPropertyName: "count",
+				publicName: "count",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			failed: {
+				classPropertyName: "failed",
+				publicName: "failed",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			colours: {
+				classPropertyName: "colours",
+				publicName: "colours",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			width: {
+				classPropertyName: "width",
+				publicName: "width",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { properties: {
+			"class": "'cl-' + level()",
+			"class.cl-failed": "failed()",
+			"attr.aria-busy": "failed() ? \"false\" : \"true\"",
+			"attr.data-way": "wayInUse()"
+		} },
+		ngImport: i0,
+		template: `
+    <span class="cl-cube">
+      <cube-picture [count]="8" [colours]="stickers()" [width]="widthInUse()" />
+    </span>
+    <span class="cl-line" role="status" aria-live="polite"><ng-content /></span>
+    @if (failed()) {
+      <span class="cl-retry"><ng-content select="[cubeLoadingRetry]" /></span>
+    } @else if (level() === 'page' && places().length) {
+      <cube-square class="cl-square" [tiles]="places()">
+        <ng-template [cubeSquareTile]="places()"><span class="cl-place"></span></ng-template>
+      </cube-square>
+    }
+  `,
+		isInline: true,
+		styles: [":host{display:flex;flex-direction:column;align-items:center;gap:var(--cube-loading-gap, 12px);text-align:center;color:var(--cube-loading-line, inherit)}:host(.cl-page){width:100%}:host(.cl-piece){display:inline-flex;flex-direction:row;gap:.5em;vertical-align:middle}.cl-cube{display:inline-flex;line-height:0}.cl-line:empty,.cl-retry:empty{display:none}.cl-square{display:block;width:100%;margin-top:var(--cube-loading-gap, 12px)}.cl-place{display:block;width:100%;height:100%;box-sizing:border-box;border-radius:var(--cs-radius, var(--cube-square-radius, 20px));background:var(--cube-loading-place, var(--cube-unknown, #e3e7e1))}\n"],
+		dependencies: [
+			{
+				kind: "component",
+				type: CubePicture,
+				selector: "cube-picture",
+				inputs: [
+					"count",
+					"colours",
+					"width",
+					"hint",
+					"whole",
+					"rot"
+				]
+			},
+			{
+				kind: "component",
+				type: CubeSquare,
+				selector: "cube-square",
+				inputs: [
+					"tiles",
+					"view",
+					"maxSide",
+					"listRow",
+					"dashed",
+					"keyOf",
+					"turning",
+					"turnBelow",
+					"across",
+					"isOwn",
+					"nudgeKey"
+				]
+			},
+			{
+				kind: "directive",
+				type: CubeSquareTile,
+				selector: "ng-template[cubeSquareTile]",
+				inputs: ["cubeSquareTile"]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: CubeLoading,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "cube-loading",
+			imports: [
+				CubePicture,
+				CubeSquare,
+				CubeSquareTile
+			],
+			host: {
+				"[class]": "'cl-' + level()",
+				"[class.cl-failed]": "failed()",
+				"[attr.aria-busy]": "failed() ? \"false\" : \"true\"",
+				"[attr.data-way]": "wayInUse()"
+			},
+			template: `
+    <span class="cl-cube">
+      <cube-picture [count]="8" [colours]="stickers()" [width]="widthInUse()" />
+    </span>
+    <span class="cl-line" role="status" aria-live="polite"><ng-content /></span>
+    @if (failed()) {
+      <span class="cl-retry"><ng-content select="[cubeLoadingRetry]" /></span>
+    } @else if (level() === 'page' && places().length) {
+      <cube-square class="cl-square" [tiles]="places()">
+        <ng-template [cubeSquareTile]="places()"><span class="cl-place"></span></ng-template>
+      </cube-square>
+    }
+  `,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			styles: [":host{display:flex;flex-direction:column;align-items:center;gap:var(--cube-loading-gap, 12px);text-align:center;color:var(--cube-loading-line, inherit)}:host(.cl-page){width:100%}:host(.cl-piece){display:inline-flex;flex-direction:row;gap:.5em;vertical-align:middle}.cl-cube{display:inline-flex;line-height:0}.cl-line:empty,.cl-retry:empty{display:none}.cl-square{display:block;width:100%;margin-top:var(--cube-loading-gap, 12px)}.cl-place{display:block;width:100%;height:100%;box-sizing:border-box;border-radius:var(--cs-radius, var(--cube-square-radius, 20px));background:var(--cube-loading-place, var(--cube-unknown, #e3e7e1))}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		level: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "level",
+				required: false
+			}]
+		}],
+		way: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "way",
+				required: false
+			}]
+		}],
+		count: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "count",
+				required: false
+			}]
+		}],
+		failed: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "failed",
+				required: false
+			}]
+		}],
+		colours: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "colours",
+				required: false
+			}]
+		}],
+		width: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "width",
+				required: false
+			}]
+		}]
+	}
+});
+export { CONTEXT_CUBE_SOURCE, CONTEXT_CUBE_WORDS, CONTEXT_PART_ORDER, CUBE_CARRY_CLASSES, CUBE_CARRY_MOVE, CUBE_DROP_OUT, CUBE_HOLD_MS, CUBE_HOLD_SLOP, CUBE_ICON_NAMES, CUBE_LOADING_COLOURS, CUBE_LOADING_LEVELS, CUBE_LOADING_STEP_MS, CUBE_LOADING_STICKERS, CUBE_LOADING_WAYS, CUBE_LOADING_WIDTH, CUBE_PINCH_APART, CUBE_PINCH_TOGETHER, CUBE_WHEEL_QUIET_MS, CubeCarry, CubeContext, CubeHold, CubeIcon, CubeLoading, CubePicture, CubePinch, CubeSquare, CubeSquareTile, PART_ICONS, SQUARE_LIST_ROW, SQUARE_MAX_SIDE, TEXT_ORDERS, TURNING_BELOW, TURNING_NUDGE_UNTIL, TURNING_SIDES, VIEW_KEYS, contextIcon, contextLevelFor, contextSquare, cubeIconCells, directionWords, drawCube, gridFor, hideLevel, insideOf, isView, loadingStickers, loadingWayFor, namesLevel, orderParts, partsLevel, placesOf, refusalOf, sizeFor, sortDirectionsLevel, sortItems, sortLevel, squareGap, squareLayout, squareLevelFor, startsWheelGesture, stillStep, turningFront, turningRows, viewLevel, whereLevel, wouldLoop };
 
 //# sourceMappingURL=selimssevgi-cube-design-angular.mjs.map