@selimssevgi/cube-design-angular 0.7.1 → 0.8.0

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

@@ -1,9 +1,9 @@
 import * as i0 from "@angular/core";
 import { ChangeDetectionStrategy, Component, DestroyRef, Directive, ElementRef, ErrorHandler, Injectable, InjectionToken, Injector, PLATFORM_ID, Renderer2, TemplateRef, afterNextRender, computed, contentChild, effect, inject, input, output, runInInjectionContext, signal, untracked, viewChild } from "@angular/core";
 import { NgTemplateOutlet, isPlatformBrowser } from "@angular/common";
+import { NavigationEnd, NavigationStart, Router } from "@angular/router";
+import { Subject, catchError, map, of, tap } from "rxjs";
 import { HttpClient, HttpErrorResponse } from "@angular/common/http";
-import { catchError, map, of, tap } from "rxjs";
-import { Router } from "@angular/router";
 function sizeFor(count) {
 	let s = 1;
 	while (s * s * s < count && s < 7) s++;
@@ -2464,6 +2464,20 @@ function squareLayout(view, count, room, opts = {}) {
 		open: cols * rows - n
 	};
 }
+function squareCell(width, across) {
+	const k = Math.max(1, Math.floor(across));
+	return width > 0 ? (width - squareGap(k) * (k - 1)) / k : 0;
+}
+function squareSideAt(view, count, cell, opts = {}) {
+	const l = squareLayout(view, count, {
+		width: 1e6,
+		tall: 1e6
+	}, {
+		least: opts.least ?? 0,
+		maxSide: 1e6
+	});
+	return Math.floor(l.cols * cell + l.gap * (l.cols - 1));
+}
 var CubeSquareTile = class CubeSquareTile {
 	template = inject(TemplateRef);
 	cubeSquareTile = input(...ngDevMode ? [void 0, { debugName: "cubeSquareTile" }] : /* istanbul ignore next */ []);
@@ -2550,6 +2564,7 @@ var CubeSquare = class CubeSquare {
 	tiles = input.required(...ngDevMode ? [{ debugName: "tiles" }] : /* istanbul ignore next */ []);
 	view = input("square", ...ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []);
 	maxSide = input(880, ...ngDevMode ? [{ debugName: "maxSide" }] : /* istanbul ignore next */ []);
+	cell = input(null, ...ngDevMode ? [{ debugName: "cell" }] : /* istanbul ignore next */ []);
 	align = input("center", ...ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []);
 	listRow = input(76, ...ngDevMode ? [{ debugName: "listRow" }] : /* istanbul ignore next */ []);
 	dashed = input(false, ...ngDevMode ? [{ debugName: "dashed" }] : /* istanbul ignore next */ []);
@@ -2581,10 +2596,12 @@ var CubeSquare = class CubeSquare {
 		};
 		const least = this.least();
 		const side = Math.min(width, room.tall, this.maxSide());
+		const fewest = !this.dashed() ? 0 : least === "room" ? squareLeast(side) : least;
+		const cell = this.cell();
 		const opts = {
-			maxSide: this.maxSide(),
+			maxSide: cell && cell > 0 ? Math.min(this.maxSide(), squareSideAt(this.view(), this.tiles().length, cell, { least: fewest })) : this.maxSide(),
 			listRow: this.listRow(),
-			least: !this.dashed() ? 0 : least === "room" ? squareLeast(side) : least
+			least: fewest
 		};
 		const front = this.front();
 		if (!front) return squareLayout(this.view(), this.tiles().length, room, opts);
@@ -2831,6 +2848,13 @@ var CubeSquare = class CubeSquare {
 				isRequired: false,
 				transformFunction: null
 			},
+			cell: {
+				classPropertyName: "cell",
+				publicName: "cell",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			align: {
 				classPropertyName: "align",
 				publicName: "align",
@@ -3192,6 +3216,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		cell: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "cell",
+				required: false
+			}]
+		}],
 		align: [{
 			type: i0.Input,
 			args: [{
@@ -3369,6 +3401,7 @@ var CubeContext = class CubeContext {
 	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 */ []);
+	cell = input(null, ...ngDevMode ? [{ debugName: "cell" }] : /* istanbul ignore next */ []);
 	heldKey = input((held) => held, ...ngDevMode ? [{ debugName: "heldKey" }] : /* istanbul ignore next */ []);
 	enter = output();
 	out = output();
@@ -3491,6 +3524,13 @@ var CubeContext = class CubeContext {
 				isRequired: false,
 				transformFunction: null
 			},
+			cell: {
+				classPropertyName: "cell",
+				publicName: "cell",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			heldKey: {
 				classPropertyName: "heldKey",
 				publicName: "heldKey",
@@ -3511,6 +3551,7 @@ var CubeContext = class CubeContext {
       [tiles]="tiles()"
       [dashed]="adds()"
       [maxSide]="maxSide()"
+      [cell]="cell()"
       [keyOf]="keyOf"
       [class.cc-adds]="adds()"
     >
@@ -3605,6 +3646,7 @@ var CubeContext = class CubeContext {
 					"tiles",
 					"view",
 					"maxSide",
+					"cell",
 					"align",
 					"listRow",
 					"dashed",
@@ -3654,6 +3696,7 @@ i0.ɵɵngDeclareClassMetadata({
       [tiles]="tiles()"
       [dashed]="adds()"
       [maxSide]="maxSide()"
+      [cell]="cell()"
       [keyOf]="keyOf"
       [class.cc-adds]="adds()"
     >
@@ -3763,6 +3806,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		cell: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "cell",
+				required: false
+			}]
+		}],
 		heldKey: [{
 			type: i0.Input,
 			args: [{
@@ -3789,6 +3840,1298 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
+const CUBE_ROOM_NARROW = 640;
+var CubeRoom = class CubeRoom {
+	width = signal(0, ...ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []);
+	narrow = signal(CubeRoom.isNarrow(), ...ngDevMode ? [{ debugName: "narrow" }] : /* istanbul ignore next */ []);
+	constructor() {
+		if (typeof addEventListener !== "undefined") addEventListener("resize", () => this.narrow.set(CubeRoom.isNarrow()));
+	}
+	static isNarrow() {
+		return typeof matchMedia !== "undefined" && matchMedia(`(max-width: 639px)`).matches;
+	}
+	across() {
+		return this.narrow() ? 3 : 4;
+	}
+	cell() {
+		return squareCell(this.width(), this.across());
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: CubeRoom,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: CubeRoom,
+		providedIn: "root"
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: CubeRoom,
+	decorators: [{
+		type: Injectable,
+		args: [{ providedIn: "root" }]
+	}],
+	ctorParameters: () => []
+});
+var CubeRoomMeasure = class CubeRoomMeasure {
+	room = inject(CubeRoom);
+	el = inject(ElementRef).nativeElement;
+	seen = typeof ResizeObserver !== "undefined" ? new ResizeObserver(() => this.measure()) : null;
+	constructor() {
+		this.seen?.observe(this.el);
+		queueMicrotask(() => this.measure());
+	}
+	measure() {
+		const w = this.el.clientWidth;
+		if (w > 0) this.room.width.set(Math.min(w, 880));
+	}
+	ngOnDestroy() {
+		this.seen?.disconnect();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: CubeRoomMeasure,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.4",
+		type: CubeRoomMeasure,
+		isStandalone: true,
+		selector: "[cubeRoom]",
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: CubeRoomMeasure,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "[cubeRoom]" }]
+	}],
+	ctorParameters: () => []
+});
+const CUBE_ZOOM_OPTIONS = new InjectionToken("CUBE_ZOOM_OPTIONS", {
+	providedIn: "root",
+	factory: () => ({ keepScroll: true })
+});
+function provideCubeZoom(options) {
+	return {
+		provide: CUBE_ZOOM_OPTIONS,
+		useValue: {
+			keepScroll: true,
+			...options
+		}
+	};
+}
+const pathOf = (url) => url.split(/[?#]/)[0];
+const RESTORE_FOR_MS = 1500;
+const STILL_FRAMES = 12;
+const SCROLL_KEYS = /* @__PURE__ */ new Set([
+	"ArrowUp",
+	"ArrowDown",
+	"PageUp",
+	"PageDown",
+	"Home",
+	"End",
+	" "
+]);
+function cubeMovesThePage(e, since) {
+	if (e.timeStamp < since) return false;
+	if (e instanceof WheelEvent) return !e.ctrlKey;
+	if (e instanceof KeyboardEvent) return SCROLL_KEYS.has(e.key);
+	return true;
+}
+function cubeTrailHolds(trail, from, to) {
+	if (!trail.length) return true;
+	if (pathOf(trail.at(-1).url) === pathOf(from)) return true;
+	return trail.some((entry) => pathOf(entry.url) === pathOf(to));
+}
+var CubeZoomService = class CubeZoomService {
+	next = null;
+	trail = [];
+	scrolled = /* @__PURE__ */ new Map();
+	restore = null;
+	steppingOutTo = null;
+	options = inject(CUBE_ZOOM_OPTIONS);
+	router = inject(Router);
+	leaving = new Subject();
+	left = this.leaving.asObservable();
+	constructor() {
+		const router = this.router;
+		router.events.subscribe((e) => {
+			if (e instanceof NavigationStart) {
+				this.restore = null;
+				const out = this.steppingOutTo;
+				this.steppingOutTo = null;
+				if (e.navigationTrigger === "popstate") return;
+				if (this.next?.kind === "out" && this.options.keepScroll) {
+					const top = this.scrolled.get(e.url) ?? this.scrolled.get(pathOf(e.url));
+					if (top) this.restore = {
+						id: e.id,
+						top
+					};
+				}
+				if (router.currentNavigation()?.extras.replaceUrl) return;
+				if (out !== null && pathOf(out) === pathOf(e.url)) return;
+				if (!cubeTrailHolds(this.trail, router.url, e.url)) this.trail.length = 0;
+			}
+			if (e instanceof NavigationEnd && this.restore?.id === e.id) this.scrollBack(this.restore.top);
+		});
+	}
+	leave(url, label) {
+		this.trail.push({
+			url,
+			label
+		});
+		if (typeof window === "undefined") return;
+		const top = Math.round(window.scrollY);
+		this.scrolled.set(url, top);
+		this.scrolled.set(pathOf(url), top);
+	}
+	scrollBack(top) {
+		const restore = this.restore;
+		const until = performance.now() + RESTORE_FOR_MS;
+		let moved = false;
+		let still = 0;
+		let height = -1;
+		const since = performance.now();
+		const stop = (e) => {
+			if (cubeMovesThePage(e, since)) moved = true;
+		};
+		const events = [
+			"wheel",
+			"touchstart",
+			"keydown"
+		];
+		events.forEach((name) => window.addEventListener(name, stop, { passive: true }));
+		const done = () => {
+			events.forEach((name) => window.removeEventListener(name, stop));
+			if (this.restore === restore) this.restore = null;
+		};
+		const step = () => {
+			if (moved || this.restore !== restore || performance.now() > until) return done();
+			if (Math.abs(window.scrollY - top) >= 2) window.scrollTo(0, top);
+			const now = document.documentElement.scrollHeight;
+			still = Math.abs(window.scrollY - top) < 2 && now === height ? still + 1 : 0;
+			height = now;
+			if (still >= STILL_FRAMES) return done();
+			requestAnimationFrame(step);
+		};
+		step();
+	}
+	previous(url) {
+		const at = this.trail.findIndex((entry) => entry.url === url);
+		if (at >= 0) this.trail.splice(at);
+		return this.trail.at(-1) ?? null;
+	}
+	stepBack(to) {
+		const from = this.router.url;
+		this.steppingOutTo = this.trail.pop()?.url ?? null;
+		this.leaving.next({
+			from,
+			to: this.steppingOutTo ?? to ?? null,
+			via: "step"
+		});
+	}
+	leaveAll(inside) {
+		while (this.trail.length && inside(this.trail.at(-1).url)) this.trail.pop();
+		const from = this.router.url;
+		const to = this.trail.pop() ?? null;
+		this.steppingOutTo = to?.url ?? null;
+		this.leaving.next({
+			from,
+			to: to?.url ?? null,
+			via: "all"
+		});
+		return to;
+	}
+	into(element) {
+		const box = element?.getBoundingClientRect();
+		this.next = {
+			kind: "in",
+			origin: box ? `${box.left + box.width / 2}px ${box.top + box.height / 2}px` : null
+		};
+	}
+	outOf() {
+		this.next = {
+			kind: "out",
+			origin: null
+		};
+	}
+	take() {
+		const next = this.next;
+		this.next = null;
+		if (typeof matchMedia !== "undefined" && matchMedia("(prefers-reduced-motion: reduce)").matches) return null;
+		return next;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: CubeZoomService,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: CubeZoomService,
+		providedIn: "root"
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: CubeZoomService,
+	decorators: [{
+		type: Injectable,
+		args: [{ providedIn: "root" }]
+	}],
+	ctorParameters: () => []
+});
+var CubeZoomPinch = class CubeZoomPinch {
+	host = inject(ElementRef);
+	cubeZoomOut = output();
+	constructor() {
+		inject(CubePinch).cubePinched.subscribe((pinch) => {
+			if (pinch.way === "out") this.cubeZoomOut.emit();
+			else this.zoomInto(pinch.at);
+		});
+	}
+	zoomInto(at) {
+		const piece = at?.closest("[data-zoom]");
+		if (piece && this.host.nativeElement.contains(piece)) piece.click();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: CubeZoomPinch,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.4",
+		type: CubeZoomPinch,
+		isStandalone: true,
+		selector: "[cubeZoomPinch]",
+		outputs: { cubeZoomOut: "cubeZoomOut" },
+		hostDirectives: [{
+			directive: CubePinch,
+			inputs: [
+				"cubePinchDisabled",
+				"cubePinchDisabled",
+				"cubePinchQuietMs",
+				"cubePinchQuietMs"
+			]
+		}],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: CubeZoomPinch,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[cubeZoomPinch]",
+			hostDirectives: [{
+				directive: CubePinch,
+				inputs: ["cubePinchDisabled", "cubePinchQuietMs"]
+			}]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: { cubeZoomOut: [{
+		type: i0.Output,
+		args: ["cubeZoomOut"]
+	}] }
+});
+const CUBE_HEAD_SWIPE = 30;
+var CubeHead = class CubeHead {
+	count = input(1, ...ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []);
+	colours = input([], ...ngDevMode ? [{ debugName: "colours" }] : /* istanbul ignore next */ []);
+	art = input("stickers", ...ngDevMode ? [{ debugName: "art" }] : /* istanbul ignore next */ []);
+	whole = input(false, ...ngDevMode ? [{ debugName: "whole" }] : /* istanbul ignore next */ []);
+	hint = input(false, ...ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []);
+	width = input(100, ...ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []);
+	title = input(null, ...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
+	line = input(null, ...ngDevMode ? [{ debugName: "line" }] : /* istanbul ignore next */ []);
+	backLabel = input(null, ...ngDevMode ? [{ debugName: "backLabel" }] : /* istanbul ignore next */ []);
+	backAria = input(null, ...ngDevMode ? [{ debugName: "backAria" }] : /* istanbul ignore next */ []);
+	backDrop = input(null, ...ngDevMode ? [{ debugName: "backDrop" }] : /* istanbul ignore next */ []);
+	carrying = input(false, ...ngDevMode ? [{ debugName: "carrying" }] : /* istanbul ignore next */ []);
+	holds = input(false, ...ngDevMode ? [{ debugName: "holds" }] : /* istanbul ignore next */ []);
+	holdMs = input(520, ...ngDevMode ? [{ debugName: "holdMs" }] : /* istanbul ignore next */ []);
+	turns = input(false, ...ngDevMode ? [{ debugName: "turns" }] : /* istanbul ignore next */ []);
+	regroups = input(false, ...ngDevMode ? [{ debugName: "regroups" }] : /* istanbul ignore next */ []);
+	grew = input(false, ...ngDevMode ? [{ debugName: "grew" }] : /* istanbul ignore next */ []);
+	back = output();
+	held = output();
+	turned = output();
+	rot = signal(0, ...ngDevMode ? [{ debugName: "rot" }] : /* istanbul ignore next */ []);
+	turning = signal(false, ...ngDevMode ? [{ debugName: "turning" }] : /* istanbul ignore next */ []);
+	startX = null;
+	timers = [];
+	constructor() {
+		inject(DestroyRef).onDestroy(() => this.timers.forEach(clearTimeout));
+	}
+	start(event) {
+		this.startX = this.turns() && event.isPrimary ? event.clientX : null;
+	}
+	end(event) {
+		if (this.startX === null) return;
+		const moved = event.clientX - this.startX;
+		this.startX = null;
+		if (Math.abs(moved) >= 30) this.turn(moved < 0 ? 1 : -1);
+	}
+	key(event) {
+		if (!this.turns() || event.defaultPrevented) return;
+		if (event.target?.closest?.("input, textarea")) return;
+		if (event.key === "ArrowRight") this.turn(1);
+		if (event.key === "ArrowLeft") this.turn(-1);
+	}
+	turn(by) {
+		if (this.count() < 2 || this.turning()) return;
+		this.turning.set(true);
+		this.timers.push(setTimeout(() => {
+			if (this.regroups()) this.turned.emit(by);
+			else this.rot.update((r) => r + (by === 1 ? 1 : Math.max(1, this.colours().length) - 1));
+		}, 220));
+		this.timers.push(setTimeout(() => this.turning.set(false), 440));
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: CubeHead,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.4",
+		type: CubeHead,
+		isStandalone: true,
+		selector: "cube-head",
+		inputs: {
+			count: {
+				classPropertyName: "count",
+				publicName: "count",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			colours: {
+				classPropertyName: "colours",
+				publicName: "colours",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			art: {
+				classPropertyName: "art",
+				publicName: "art",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			whole: {
+				classPropertyName: "whole",
+				publicName: "whole",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			hint: {
+				classPropertyName: "hint",
+				publicName: "hint",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			width: {
+				classPropertyName: "width",
+				publicName: "width",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			title: {
+				classPropertyName: "title",
+				publicName: "title",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			line: {
+				classPropertyName: "line",
+				publicName: "line",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			backLabel: {
+				classPropertyName: "backLabel",
+				publicName: "backLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			backAria: {
+				classPropertyName: "backAria",
+				publicName: "backAria",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			backDrop: {
+				classPropertyName: "backDrop",
+				publicName: "backDrop",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			carrying: {
+				classPropertyName: "carrying",
+				publicName: "carrying",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			holds: {
+				classPropertyName: "holds",
+				publicName: "holds",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			holdMs: {
+				classPropertyName: "holdMs",
+				publicName: "holdMs",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			turns: {
+				classPropertyName: "turns",
+				publicName: "turns",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			regroups: {
+				classPropertyName: "regroups",
+				publicName: "regroups",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			grew: {
+				classPropertyName: "grew",
+				publicName: "grew",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			back: "back",
+			held: "held",
+			turned: "turned"
+		},
+		host: { listeners: { "document:keydown": "key($event)" } },
+		ngImport: i0,
+		template: `
+    <div class="ch-back-row">
+      @if (backLabel(); as b) {
+        <button
+          type="button"
+          class="ch-back"
+          [class.ch-drop]="!!backDrop() && carrying()"
+          [attr.data-drop]="backDrop()"
+          [attr.aria-label]="backAria() ?? b"
+          (click)="back.emit()"
+        >
+          <span class="ch-arrow" aria-hidden="true">‹</span>
+          <span class="ch-back-name">{{ b }}</span>
+        </button>
+      }
+    </div>
+    <div class="ch-cube-row">
+      <div
+        class="ch-circle"
+        [class.ch-holds]="holds()"
+        [class.ch-turns]="turns() && count() > 1"
+        [class.ch-turning]="turning()"
+        [class.ch-grew]="grew()"
+        role="img"
+        [attr.aria-label]="title() || null"
+        [attr.tabindex]="holds() ? 0 : null"
+        data-no-swipe
+        cubeHold
+        [cubeHoldDisabled]="!holds()"
+        [cubeHoldMs]="holdMs()"
+        (cubeHeld)="held.emit($event)"
+        (pointerdown)="start($event)"
+        (pointerup)="end($event)"
+        (pointercancel)="startX = null"
+      >
+        <cube-picture
+          [art]="art()"
+          [count]="count()"
+          [colours]="colours()"
+          [width]="width()"
+          [whole]="whole()"
+          [hint]="hint()"
+          [rot]="rot()"
+        />
+      </div>
+    </div>
+    @if (title() || line()) {
+      <div class="ch-text">
+        @if (title()) {
+          <h1 class="ch-title" [attr.title]="title()">{{ title() }}</h1>
+        }
+        <!-- the line's place is kept on a phone, said or not, so the head is one height on every level -->
+        <p class="ch-line">{{ line() }}</p>
+      </div>
+    }
+    <ng-content />
+  `,
+		isInline: true,
+		styles: [":host{display:contents}.ch-back-row{display:flex;min-height:40px;align-items:flex-start}.ch-back{display:flex;max-width:100%;height:40px;align-items:center;gap:4px;margin-left:-8px;padding:0 8px;border:1px dashed transparent;border-radius:8px;background:none;color:var(--cube-head-quiet, #6b7280);font:inherit;font-size:var(--cube-head-back-size, 14px);cursor:pointer}.ch-back:hover{color:var(--cube-head-ink, #111827)}.ch-arrow{font-size:18px;line-height:1}.ch-back-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ch-back.ch-drop{border-color:var(--cube-head-drop, rgb(251 191 36 / .7));color:var(--cube-head-drop-ink, rgb(252 211 77))}:host-context(.cube-carrying) .ch-back.cube-carry-over{background:var(--cube-head-drop-over, rgb(251 191 36 / .16))}.ch-cube-row{display:flex;flex-direction:column;align-items:center}.ch-circle{display:flex;align-items:center;justify-content:center;width:var(--cube-head-circle-size, 156px);height:var(--cube-head-circle-size, 156px);border-radius:999px;background:var(--cube-head-circle, #f3f4f6);box-shadow:0 0 0 1px var(--cube-head-circle-ring, #e5e7eb);touch-action:pan-y}.ch-holds{cursor:pointer}.ch-turns{cursor:grab}.ch-circle:focus-visible{outline:2px solid var(--cube-head-focus, #5f9a80);outline-offset:3px}.ch-text{text-align:center}.ch-title{margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--cube-head-ink, #111827);font-size:var(--cube-head-title-size, 24px);font-weight:700;line-height:1.33}.ch-line{max-width:34ch;height:20px;margin:0 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--cube-head-quiet, #6b7280);font-size:var(--cube-head-line-size, 14px);line-height:20px}@media(min-width:900px){.ch-title{white-space:normal;overflow-wrap:anywhere}.ch-line{height:auto;min-height:20px;white-space:normal}}.ch-turning cube-picture{animation:ch-turn .44s ease-in-out}@keyframes ch-turn{0%{transform:perspective(600px) rotateY(0)}49%{transform:perspective(600px) rotateY(84deg)}51%{transform:perspective(600px) rotateY(-84deg)}to{transform:perspective(600px) rotateY(0)}}.ch-grew cube-picture{animation:ch-grew .9s ease-out}@keyframes ch-grew{0%{transform:scale(.7);opacity:.4}60%{transform:scale(1.06);opacity:1}to{transform:none}}@media(prefers-reduced-motion:reduce){.ch-turning cube-picture,.ch-grew cube-picture{animation:none}}\n"],
+		dependencies: [{
+			kind: "component",
+			type: CubePicture,
+			selector: "cube-picture",
+			inputs: [
+				"count",
+				"colours",
+				"width",
+				"hint",
+				"whole",
+				"rot",
+				"art"
+			]
+		}, {
+			kind: "directive",
+			type: CubeHold,
+			selector: "[cubeHold]",
+			inputs: [
+				"cubeHoldDisabled",
+				"cubeHoldMs",
+				"cubeHoldSlop",
+				"cubeHoldBuzz"
+			],
+			outputs: ["cubeHeld"]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: CubeHead,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "cube-head",
+			imports: [CubePicture, CubeHold],
+			template: `
+    <div class="ch-back-row">
+      @if (backLabel(); as b) {
+        <button
+          type="button"
+          class="ch-back"
+          [class.ch-drop]="!!backDrop() && carrying()"
+          [attr.data-drop]="backDrop()"
+          [attr.aria-label]="backAria() ?? b"
+          (click)="back.emit()"
+        >
+          <span class="ch-arrow" aria-hidden="true">‹</span>
+          <span class="ch-back-name">{{ b }}</span>
+        </button>
+      }
+    </div>
+    <div class="ch-cube-row">
+      <div
+        class="ch-circle"
+        [class.ch-holds]="holds()"
+        [class.ch-turns]="turns() && count() > 1"
+        [class.ch-turning]="turning()"
+        [class.ch-grew]="grew()"
+        role="img"
+        [attr.aria-label]="title() || null"
+        [attr.tabindex]="holds() ? 0 : null"
+        data-no-swipe
+        cubeHold
+        [cubeHoldDisabled]="!holds()"
+        [cubeHoldMs]="holdMs()"
+        (cubeHeld)="held.emit($event)"
+        (pointerdown)="start($event)"
+        (pointerup)="end($event)"
+        (pointercancel)="startX = null"
+      >
+        <cube-picture
+          [art]="art()"
+          [count]="count()"
+          [colours]="colours()"
+          [width]="width()"
+          [whole]="whole()"
+          [hint]="hint()"
+          [rot]="rot()"
+        />
+      </div>
+    </div>
+    @if (title() || line()) {
+      <div class="ch-text">
+        @if (title()) {
+          <h1 class="ch-title" [attr.title]="title()">{{ title() }}</h1>
+        }
+        <!-- the line's place is kept on a phone, said or not, so the head is one height on every level -->
+        <p class="ch-line">{{ line() }}</p>
+      </div>
+    }
+    <ng-content />
+  `,
+			host: { "(document:keydown)": "key($event)" },
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			styles: [":host{display:contents}.ch-back-row{display:flex;min-height:40px;align-items:flex-start}.ch-back{display:flex;max-width:100%;height:40px;align-items:center;gap:4px;margin-left:-8px;padding:0 8px;border:1px dashed transparent;border-radius:8px;background:none;color:var(--cube-head-quiet, #6b7280);font:inherit;font-size:var(--cube-head-back-size, 14px);cursor:pointer}.ch-back:hover{color:var(--cube-head-ink, #111827)}.ch-arrow{font-size:18px;line-height:1}.ch-back-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ch-back.ch-drop{border-color:var(--cube-head-drop, rgb(251 191 36 / .7));color:var(--cube-head-drop-ink, rgb(252 211 77))}:host-context(.cube-carrying) .ch-back.cube-carry-over{background:var(--cube-head-drop-over, rgb(251 191 36 / .16))}.ch-cube-row{display:flex;flex-direction:column;align-items:center}.ch-circle{display:flex;align-items:center;justify-content:center;width:var(--cube-head-circle-size, 156px);height:var(--cube-head-circle-size, 156px);border-radius:999px;background:var(--cube-head-circle, #f3f4f6);box-shadow:0 0 0 1px var(--cube-head-circle-ring, #e5e7eb);touch-action:pan-y}.ch-holds{cursor:pointer}.ch-turns{cursor:grab}.ch-circle:focus-visible{outline:2px solid var(--cube-head-focus, #5f9a80);outline-offset:3px}.ch-text{text-align:center}.ch-title{margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--cube-head-ink, #111827);font-size:var(--cube-head-title-size, 24px);font-weight:700;line-height:1.33}.ch-line{max-width:34ch;height:20px;margin:0 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--cube-head-quiet, #6b7280);font-size:var(--cube-head-line-size, 14px);line-height:20px}@media(min-width:900px){.ch-title{white-space:normal;overflow-wrap:anywhere}.ch-line{height:auto;min-height:20px;white-space:normal}}.ch-turning cube-picture{animation:ch-turn .44s ease-in-out}@keyframes ch-turn{0%{transform:perspective(600px) rotateY(0)}49%{transform:perspective(600px) rotateY(84deg)}51%{transform:perspective(600px) rotateY(-84deg)}to{transform:perspective(600px) rotateY(0)}}.ch-grew cube-picture{animation:ch-grew .9s ease-out}@keyframes ch-grew{0%{transform:scale(.7);opacity:.4}60%{transform:scale(1.06);opacity:1}to{transform:none}}@media(prefers-reduced-motion:reduce){.ch-turning cube-picture,.ch-grew cube-picture{animation:none}}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		count: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "count",
+				required: false
+			}]
+		}],
+		colours: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "colours",
+				required: false
+			}]
+		}],
+		art: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "art",
+				required: false
+			}]
+		}],
+		whole: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "whole",
+				required: false
+			}]
+		}],
+		hint: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hint",
+				required: false
+			}]
+		}],
+		width: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "width",
+				required: false
+			}]
+		}],
+		title: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "title",
+				required: false
+			}]
+		}],
+		line: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "line",
+				required: false
+			}]
+		}],
+		backLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "backLabel",
+				required: false
+			}]
+		}],
+		backAria: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "backAria",
+				required: false
+			}]
+		}],
+		backDrop: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "backDrop",
+				required: false
+			}]
+		}],
+		carrying: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "carrying",
+				required: false
+			}]
+		}],
+		holds: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "holds",
+				required: false
+			}]
+		}],
+		holdMs: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "holdMs",
+				required: false
+			}]
+		}],
+		turns: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "turns",
+				required: false
+			}]
+		}],
+		regroups: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "regroups",
+				required: false
+			}]
+		}],
+		grew: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "grew",
+				required: false
+			}]
+		}],
+		back: [{
+			type: i0.Output,
+			args: ["back"]
+		}],
+		held: [{
+			type: i0.Output,
+			args: ["held"]
+		}],
+		turned: [{
+			type: i0.Output,
+			args: ["turned"]
+		}]
+	}
+});
+function cubeTilePicture(level, cell) {
+	return Math.round(level < 2 ? Math.min(56, Math.max(28, cell * .28)) : level < 4 ? Math.max(20, cell * .24) : cell * .6);
+}
+var CubeTile = class CubeTile {
+	name = input.required(...ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []);
+	line = input(null, ...ngDevMode ? [{ debugName: "line" }] : /* istanbul ignore next */ []);
+	says = input(true, ...ngDevMode ? [{ debugName: "says" }] : /* istanbul ignore next */ []);
+	level = input(1, ...ngDevMode ? [{ debugName: "level" }] : /* istanbul ignore next */ []);
+	cell = input(150, ...ngDevMode ? [{ debugName: "cell" }] : /* istanbul ignore next */ []);
+	count = input(1, ...ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []);
+	colours = input([], ...ngDevMode ? [{ debugName: "colours" }] : /* istanbul ignore next */ []);
+	art = input("stickers", ...ngDevMode ? [{ debugName: "art" }] : /* istanbul ignore next */ []);
+	whole = input(null, ...ngDevMode ? [{ debugName: "whole" }] : /* istanbul ignore next */ []);
+	look = input("piece", ...ngDevMode ? [{ debugName: "look" }] : /* istanbul ignore next */ []);
+	ticked = input(false, ...ngDevMode ? [{ debugName: "ticked" }] : /* istanbul ignore next */ []);
+	tick = input("✓", ...ngDevMode ? [{ debugName: "tick" }] : /* istanbul ignore next */ []);
+	tickedWord = input(null, ...ngDevMode ? [{ debugName: "tickedWord" }] : /* istanbul ignore next */ []);
+	marked = input(false, ...ngDevMode ? [{ debugName: "marked" }] : /* istanbul ignore next */ []);
+	picture = computed(() => cubeTilePicture(this.level(), this.cell()), ...ngDevMode ? [{ debugName: "picture" }] : /* istanbul ignore next */ []);
+	classes = computed(() => `ct-l${this.level()} ct-${this.look()}` + (this.ticked() ? " ct-ticked" : "") + (this.marked() ? " ct-marked" : ""), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: CubeTile,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.4",
+		type: CubeTile,
+		isStandalone: true,
+		selector: "cube-tile",
+		inputs: {
+			name: {
+				classPropertyName: "name",
+				publicName: "name",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			line: {
+				classPropertyName: "line",
+				publicName: "line",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			says: {
+				classPropertyName: "says",
+				publicName: "says",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			level: {
+				classPropertyName: "level",
+				publicName: "level",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			cell: {
+				classPropertyName: "cell",
+				publicName: "cell",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			count: {
+				classPropertyName: "count",
+				publicName: "count",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			colours: {
+				classPropertyName: "colours",
+				publicName: "colours",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			art: {
+				classPropertyName: "art",
+				publicName: "art",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			whole: {
+				classPropertyName: "whole",
+				publicName: "whole",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			look: {
+				classPropertyName: "look",
+				publicName: "look",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ticked: {
+				classPropertyName: "ticked",
+				publicName: "ticked",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			tick: {
+				classPropertyName: "tick",
+				publicName: "tick",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			tickedWord: {
+				classPropertyName: "tickedWord",
+				publicName: "tickedWord",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			marked: {
+				classPropertyName: "marked",
+				publicName: "marked",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { properties: {
+			"class": "classes()",
+			"attr.data-level": "level()"
+		} },
+		ngImport: i0,
+		template: `
+    @if (ticked() && level() < 4) {
+      <span class="ct-tick" [attr.aria-label]="tickedWord() || null">{{ tick() }}</span>
+    }
+    @if (look() !== 'own') {
+      <span class="ct-picture" [class.ct-push]="level() < 4">
+        <cube-picture
+          [art]="art()"
+          [count]="count()"
+          [colours]="colours()"
+          [width]="picture()"
+          [whole]="whole() ?? count() === 1"
+        />
+      </span>
+    }
+    @if (level() < 4 || look() === 'own') {
+      <span class="ct-name">{{ look() === 'own' ? '+ ' : '' }}{{ name() }}</span>
+    }
+    @if (line()) {
+      <span class="ct-line" [class.ct-unseen]="!(says() && level() < 3)">{{ line() }}</span>
+    }
+  `,
+		isInline: true,
+		styles: [":host{position:relative;box-sizing:border-box;display:flex;flex-direction:column;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden;border:1px solid var(--cube-tile-line, #e5e7eb);background:var(--cube-tile, #ffffff);color:var(--cube-tile-ink, #111827);text-align:left;user-select:none;-webkit-user-select:none;cursor:pointer;transition:transform .12s ease}:host(:active){transform:scale(.97)}:host(:focus-visible){outline:2px solid var(--cube-tile-accent, #5f9a80);outline-offset:2px}:host(.ct-l0){border-radius:28px;padding:24px;gap:10px}:host(.ct-l1){border-radius:20px;padding:14px;gap:6px}:host(.ct-l2){border-radius:16px;padding:8px 10px;gap:2px}:host(.ct-l3){border-radius:12px;padding:6px;gap:2px}:host(.ct-l4){border-radius:9px;padding:2px;align-items:center;justify-content:center}:host(.ct-own){align-items:center;justify-content:center;border-style:dashed;border-color:var(--cube-tile-own-line, color-mix(in srgb, #5f9a80 50%, transparent));background:transparent;color:var(--cube-tile-accent, #5f9a80)}:host(.ct-dashed){border-style:dashed;border-color:var(--cube-tile-own-line, color-mix(in srgb, #5f9a80 40%, transparent));background:transparent;color:var(--cube-tile-quiet-ink, #4b5563)}:host(.ct-pale){border-style:dashed;border-color:var(--cube-tile-pale-line, #d1d5db);background:transparent;color:var(--cube-tile-pale-ink, #9ca3af)}:host(.ct-marked){border-color:var(--cube-tile-marked, color-mix(in srgb, #5f9a80 35%, transparent))}:host(.ct-ticked){box-shadow:0 0 0 1px var(--cube-tile-accent, #5f9a80)}.ct-tick{position:absolute;top:8px;right:10px;color:var(--cube-tile-accent, #5f9a80);font-size:14px;font-weight:600}.ct-picture{flex:none}.ct-push{margin-bottom:auto}.ct-name{flex:none;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;font-weight:600;line-height:1.25}:host(.ct-own) .ct-name{font-weight:500}.ct-line{flex:none;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;color:var(--cube-tile-quiet, #6b7280);line-height:1.375}:host(.ct-pale) .ct-line{color:var(--cube-tile-pale-ink, #9ca3af)}.ct-unseen{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:host(.ct-l0) .ct-name{font-size:26px}:host(.ct-l1) .ct-name{font-size:17px}:host(.ct-l2) .ct-name{font-size:14px}:host(.ct-l3) .ct-name{font-size:12px}:host(.ct-l0) .ct-line{font-size:16px}:host(.ct-l1) .ct-line{font-size:13px}:host(.ct-l2) .ct-line{font-size:12px}\n"],
+		dependencies: [{
+			kind: "component",
+			type: CubePicture,
+			selector: "cube-picture",
+			inputs: [
+				"count",
+				"colours",
+				"width",
+				"hint",
+				"whole",
+				"rot",
+				"art"
+			]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: CubeTile,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "cube-tile",
+			imports: [CubePicture],
+			template: `
+    @if (ticked() && level() < 4) {
+      <span class="ct-tick" [attr.aria-label]="tickedWord() || null">{{ tick() }}</span>
+    }
+    @if (look() !== 'own') {
+      <span class="ct-picture" [class.ct-push]="level() < 4">
+        <cube-picture
+          [art]="art()"
+          [count]="count()"
+          [colours]="colours()"
+          [width]="picture()"
+          [whole]="whole() ?? count() === 1"
+        />
+      </span>
+    }
+    @if (level() < 4 || look() === 'own') {
+      <span class="ct-name">{{ look() === 'own' ? '+ ' : '' }}{{ name() }}</span>
+    }
+    @if (line()) {
+      <span class="ct-line" [class.ct-unseen]="!(says() && level() < 3)">{{ line() }}</span>
+    }
+  `,
+			host: {
+				"[class]": "classes()",
+				"[attr.data-level]": "level()"
+			},
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			styles: [":host{position:relative;box-sizing:border-box;display:flex;flex-direction:column;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden;border:1px solid var(--cube-tile-line, #e5e7eb);background:var(--cube-tile, #ffffff);color:var(--cube-tile-ink, #111827);text-align:left;user-select:none;-webkit-user-select:none;cursor:pointer;transition:transform .12s ease}:host(:active){transform:scale(.97)}:host(:focus-visible){outline:2px solid var(--cube-tile-accent, #5f9a80);outline-offset:2px}:host(.ct-l0){border-radius:28px;padding:24px;gap:10px}:host(.ct-l1){border-radius:20px;padding:14px;gap:6px}:host(.ct-l2){border-radius:16px;padding:8px 10px;gap:2px}:host(.ct-l3){border-radius:12px;padding:6px;gap:2px}:host(.ct-l4){border-radius:9px;padding:2px;align-items:center;justify-content:center}:host(.ct-own){align-items:center;justify-content:center;border-style:dashed;border-color:var(--cube-tile-own-line, color-mix(in srgb, #5f9a80 50%, transparent));background:transparent;color:var(--cube-tile-accent, #5f9a80)}:host(.ct-dashed){border-style:dashed;border-color:var(--cube-tile-own-line, color-mix(in srgb, #5f9a80 40%, transparent));background:transparent;color:var(--cube-tile-quiet-ink, #4b5563)}:host(.ct-pale){border-style:dashed;border-color:var(--cube-tile-pale-line, #d1d5db);background:transparent;color:var(--cube-tile-pale-ink, #9ca3af)}:host(.ct-marked){border-color:var(--cube-tile-marked, color-mix(in srgb, #5f9a80 35%, transparent))}:host(.ct-ticked){box-shadow:0 0 0 1px var(--cube-tile-accent, #5f9a80)}.ct-tick{position:absolute;top:8px;right:10px;color:var(--cube-tile-accent, #5f9a80);font-size:14px;font-weight:600}.ct-picture{flex:none}.ct-push{margin-bottom:auto}.ct-name{flex:none;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;font-weight:600;line-height:1.25}:host(.ct-own) .ct-name{font-weight:500}.ct-line{flex:none;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;color:var(--cube-tile-quiet, #6b7280);line-height:1.375}:host(.ct-pale) .ct-line{color:var(--cube-tile-pale-ink, #9ca3af)}.ct-unseen{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:host(.ct-l0) .ct-name{font-size:26px}:host(.ct-l1) .ct-name{font-size:17px}:host(.ct-l2) .ct-name{font-size:14px}:host(.ct-l3) .ct-name{font-size:12px}:host(.ct-l0) .ct-line{font-size:16px}:host(.ct-l1) .ct-line{font-size:13px}:host(.ct-l2) .ct-line{font-size:12px}\n"]
+		}]
+	}],
+	propDecorators: {
+		name: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "name",
+				required: true
+			}]
+		}],
+		line: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "line",
+				required: false
+			}]
+		}],
+		says: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "says",
+				required: false
+			}]
+		}],
+		level: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "level",
+				required: false
+			}]
+		}],
+		cell: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "cell",
+				required: false
+			}]
+		}],
+		count: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "count",
+				required: false
+			}]
+		}],
+		colours: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "colours",
+				required: false
+			}]
+		}],
+		art: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "art",
+				required: false
+			}]
+		}],
+		whole: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "whole",
+				required: false
+			}]
+		}],
+		look: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "look",
+				required: false
+			}]
+		}],
+		ticked: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ticked",
+				required: false
+			}]
+		}],
+		tick: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tick",
+				required: false
+			}]
+		}],
+		tickedWord: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tickedWord",
+				required: false
+			}]
+		}],
+		marked: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "marked",
+				required: false
+			}]
+		}]
+	}
+});
+const levelOf = (url) => url.split(/[?#]/)[0];
+var CubeQuietLine = class {
+	said = signal(null, ...ngDevMode ? [{ debugName: "said" }] : /* istanbul ignore next */ []);
+	note = computed(() => this.said()?.note ?? null, ...ngDevMode ? [{ debugName: "note" }] : /* istanbul ignore next */ []);
+	at = computed(() => this.said()?.at ?? null, ...ngDevMode ? [{ debugName: "at" }] : /* istanbul ignore next */ []);
+	say(note, at) {
+		this.said.set(note ? {
+			note,
+			at: levelOf(at)
+		} : null);
+	}
+	move(at) {
+		const s = this.said();
+		if (s) this.said.set({
+			...s,
+			at: levelOf(at)
+		});
+	}
+	clear() {
+		this.said.set(null);
+	}
+	on(url) {
+		const s = this.said();
+		return s && s.at === levelOf(url) ? s.note : null;
+	}
+};
+var CubeQuiet = class CubeQuiet {
+	note = input(null, ...ngDevMode ? [{ debugName: "note" }] : /* istanbul ignore next */ []);
+	undoWord = input(null, ...ngDevMode ? [{ debugName: "undoWord" }] : /* istanbul ignore next */ []);
+	undo = output();
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: CubeQuiet,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.4",
+		type: CubeQuiet,
+		isStandalone: true,
+		selector: "cube-quiet",
+		inputs: {
+			note: {
+				classPropertyName: "note",
+				publicName: "note",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			undoWord: {
+				classPropertyName: "undoWord",
+				publicName: "undoWord",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { undo: "undo" },
+		ngImport: i0,
+		template: `
+    @if (note(); as n) {
+      <p class="cq-line" role="status">
+        <span class="cq-says">{{ n.says }}</span>
+        @if (n.undo != null && undoWord()) {
+          <button type="button" class="cq-undo" (click)="undo.emit(n)">{{ undoWord() }}</button>
+        }
+      </p>
+    }
+  `,
+		isInline: true,
+		styles: [":host{display:block}.cq-line{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;column-gap:8px;max-width:40ch;margin:0 auto;color:var(--cube-quiet-ink, #6b7280);font-size:var(--cube-quiet-size, 14px);line-height:20px;text-align:center}.cq-says{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}@media(min-width:900px){.cq-says{-webkit-line-clamp:unset}}.cq-undo{min-height:24px;padding:0 4px;border:0;background:none;color:var(--cube-quiet-undo, #5f9a80);font:inherit;font-weight:600;cursor:pointer}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: CubeQuiet,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "cube-quiet",
+			template: `
+    @if (note(); as n) {
+      <p class="cq-line" role="status">
+        <span class="cq-says">{{ n.says }}</span>
+        @if (n.undo != null && undoWord()) {
+          <button type="button" class="cq-undo" (click)="undo.emit(n)">{{ undoWord() }}</button>
+        }
+      </p>
+    }
+  `,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			styles: [":host{display:block}.cq-line{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;column-gap:8px;max-width:40ch;margin:0 auto;color:var(--cube-quiet-ink, #6b7280);font-size:var(--cube-quiet-size, 14px);line-height:20px;text-align:center}.cq-says{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}@media(min-width:900px){.cq-says{-webkit-line-clamp:unset}}.cq-undo{min-height:24px;padding:0 4px;border:0;background:none;color:var(--cube-quiet-undo, #5f9a80);font:inherit;font-weight:600;cursor:pointer}\n"]
+		}]
+	}],
+	propDecorators: {
+		note: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "note",
+				required: false
+			}]
+		}],
+		undoWord: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "undoWord",
+				required: false
+			}]
+		}],
+		undo: [{
+			type: i0.Output,
+			args: ["undo"]
+		}]
+	}
+});
 const CUBE_LOADING_WAYS = ["fill", "turn"];
 const CUBE_LOADING_LEVELS = [
 	"page",
@@ -3962,6 +5305,7 @@ var CubeLoading = class CubeLoading {
 					"tiles",
 					"view",
 					"maxSide",
+					"cell",
 					"align",
 					"listRow",
 					"dashed",
@@ -4332,6 +5676,6 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{ providedIn: "root" }]
 	}]
 });
-export { ART_CHOICES_KEY, CONTEXT_CUBE_SOURCE, CONTEXT_CUBE_WORDS, CONTEXT_LAST_PARTS, CONTEXT_PART_ORDER, CUBE_ARTS, 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, CUBE_WHEEL_STEP, CubeArtChoices, CubeCarry, CubeContext, CubeHold, CubeIcon, CubeLoading, CubePicture, CubePinch, CubeSquare, CubeSquareTile, JUST_SAVED_MINUTES, MINE_SORT, PART_ICONS, REPORT_APP, REPORT_INCIDENTS_KEPT, REPORT_INCIDENTS_MS, REPORT_KINDS, ReportClient, ReportDiagnostics, ReportDraft, ReportErrorHandler, SQUARE_LEAST_CELL, SQUARE_LEAST_TALL, SQUARE_LIST_ROW, SQUARE_MAX_SIDE, SQUARE_ROOM_BELOW, TEXT_ORDERS, TURNING_BELOW, TURNING_NUDGE_UNTIL, TURNING_SIDES, VIEW_KEYS, addLevel, artFor, artLevel, bringLevel, bringOf, chooseArt, contextArtWidth, contextIcon, contextLevelFor, contextOf, contextSquare, cubeIconCells, directionWords, drawArt, drawCube, environmentOf, errorLine, findJustSaved, gridFor, hideLevel, insideOf, isArt, isView, loadingStickers, loadingWayFor, moveBefore, namesLevel, orderLevel, orderOf, orderParts, partsLevel, placesOf, provideReportDiagnostics, readArtChoices, refusalOf, reportContext, reportInterceptor, reportRefusal, reportRequest, routePattern, scrubbedPath, sizeFor, sortDirectionsLevel, sortItems, sortLevel, squareGap, squareLayout, squareLeast, squareLevelFor, squareTall, startsWheelGesture, stillStep, technicalLines, tellLevel, turningFront, turningRows, viewLevel, wheelWay, whereLevel, wouldLoop };
+export { ART_CHOICES_KEY, CONTEXT_CUBE_SOURCE, CONTEXT_CUBE_WORDS, CONTEXT_LAST_PARTS, CONTEXT_PART_ORDER, CUBE_ARTS, CUBE_CARRY_CLASSES, CUBE_CARRY_MOVE, CUBE_DROP_OUT, CUBE_HEAD_SWIPE, 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_ROOM_NARROW, CUBE_WHEEL_QUIET_MS, CUBE_WHEEL_STEP, CUBE_ZOOM_OPTIONS, CubeArtChoices, CubeCarry, CubeContext, CubeHead, CubeHold, CubeIcon, CubeLoading, CubePicture, CubePinch, CubeQuiet, CubeQuietLine, CubeRoom, CubeRoomMeasure, CubeSquare, CubeSquareTile, CubeTile, CubeZoomPinch, CubeZoomService, JUST_SAVED_MINUTES, MINE_SORT, PART_ICONS, REPORT_APP, REPORT_INCIDENTS_KEPT, REPORT_INCIDENTS_MS, REPORT_KINDS, ReportClient, ReportDiagnostics, ReportDraft, ReportErrorHandler, SQUARE_LEAST_CELL, SQUARE_LEAST_TALL, SQUARE_LIST_ROW, SQUARE_MAX_SIDE, SQUARE_ROOM_BELOW, TEXT_ORDERS, TURNING_BELOW, TURNING_NUDGE_UNTIL, TURNING_SIDES, VIEW_KEYS, addLevel, artFor, artLevel, bringLevel, bringOf, chooseArt, contextArtWidth, contextIcon, contextLevelFor, contextOf, contextSquare, cubeIconCells, cubeMovesThePage, cubeTilePicture, cubeTrailHolds, directionWords, drawArt, drawCube, environmentOf, errorLine, findJustSaved, gridFor, hideLevel, insideOf, isArt, isView, loadingStickers, loadingWayFor, moveBefore, namesLevel, orderLevel, orderOf, orderParts, partsLevel, placesOf, provideCubeZoom, provideReportDiagnostics, readArtChoices, refusalOf, reportContext, reportInterceptor, reportRefusal, reportRequest, routePattern, scrubbedPath, sizeFor, sortDirectionsLevel, sortItems, sortLevel, squareCell, squareGap, squareLayout, squareLeast, squareLevelFor, squareSideAt, squareTall, startsWheelGesture, stillStep, technicalLines, tellLevel, turningFront, turningRows, viewLevel, wheelWay, whereLevel, wouldLoop };
 
 //# sourceMappingURL=selimssevgi-cube-design-angular.mjs.map