@selimssevgi/cube-design-angular 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,2116 @@
+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";
+function sizeFor(count) {
+	let s = 1;
+	while (s * s * s < count && s < 7) s++;
+	return s;
+}
+const C30 = Math.cos(Math.PI / 6);
+function poly(pts, k) {
+	const cx = pts.reduce((a, q) => a + q[0], 0) / pts.length;
+	const cy = pts.reduce((a, q) => a + q[1], 0) / pts.length;
+	return pts.map(([x, y]) => `${(cx + (x - cx) * k).toFixed(1)},${(cy + (y - cy) * k).toFixed(1)}`).join(" ");
+}
+function squares(n, s, shift) {
+	const ox = n * s * C30;
+	const oy = n * s;
+	const p = (x, y, z) => [shift[0] + ox + (x - y) * C30 * s, shift[1] + oy + (x + y) * .5 * s - z * s];
+	const out = [];
+	for (let a = 0; a < n; a++) for (let b = n - 1; b >= 0; b--) out.push({
+		face: "left",
+		pts: [
+			p(a, n, b + 1),
+			p(a + 1, n, b + 1),
+			p(a + 1, n, b),
+			p(a, n, b)
+		]
+	});
+	for (let a = 0; a < n; a++) for (let b = n - 1; b >= 0; b--) out.push({
+		face: "right",
+		pts: [
+			p(n, a, b + 1),
+			p(n, a + 1, b + 1),
+			p(n, a + 1, b),
+			p(n, a, b)
+		]
+	});
+	for (let a = 0; a < n; a++) for (let b = 0; b < n; b++) out.push({
+		face: "top",
+		pts: [
+			p(a, b, n),
+			p(a + 1, b, n),
+			p(a + 1, b + 1, n),
+			p(a, b + 1, n)
+		]
+	});
+	return out;
+}
+function drawCube(count, colours, width, options = {}) {
+	const n = sizeFor(Math.max(1, count));
+	const hinted = !!options.hint && count < 9;
+	const big = hinted ? n + 1 : n;
+	const s = width / (2 * big * C30);
+	const hint = hinted ? squares(big, s, [0, 0]).map((q) => poly(q.pts, .86)) : [];
+	const shift = hinted ? [(big - n) * s * C30, (big - n) * s * 2] : [0, 0];
+	const k = colours.length ? (options.rot ?? 0) % colours.length : 0;
+	const turned = colours.slice(k).concat(colours.slice(0, k));
+	const stickers = squares(n, s, shift).map((q, i) => ({
+		face: q.face,
+		outer: poly(q.pts, 1),
+		inner: poly(q.pts, .86),
+		colour: options.whole ? colours[0] ?? null : turned[i] ?? null
+	}));
+	const height = 2 * big * s;
+	return {
+		width,
+		height: Math.round(height),
+		viewBox: `-2 -2 ${(width + 4).toFixed(1)} ${(height + 4).toFixed(1)}`,
+		hint,
+		stickers
+	};
+}
+var CubePicture = class CubePicture {
+	count = input(1, ...ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []);
+	colours = input([], ...ngDevMode ? [{ debugName: "colours" }] : /* istanbul ignore next */ []);
+	width = input(64, ...ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []);
+	hint = input(false, ...ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []);
+	whole = input(false, ...ngDevMode ? [{ debugName: "whole" }] : /* istanbul ignore next */ []);
+	rot = input(0, ...ngDevMode ? [{ debugName: "rot" }] : /* istanbul ignore next */ []);
+	drawing = computed(() => drawCube(this.count(), this.colours(), this.width(), {
+		hint: this.hint(),
+		whole: this.whole(),
+		rot: this.rot()
+	}), ...ngDevMode ? [{ debugName: "drawing" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: CubePicture,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.4",
+		type: CubePicture,
+		isStandalone: true,
+		selector: "cube-picture",
+		inputs: {
+			count: {
+				classPropertyName: "count",
+				publicName: "count",
+				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
+			},
+			hint: {
+				classPropertyName: "hint",
+				publicName: "hint",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			whole: {
+				classPropertyName: "whole",
+				publicName: "whole",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			rot: {
+				classPropertyName: "rot",
+				publicName: "rot",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		template: `
+    @let d = drawing();
+    <svg
+      [attr.viewBox]="d.viewBox"
+      [attr.width]="d.width"
+      [attr.height]="d.height"
+      aria-hidden="true"
+    >
+      @for (q of d.hint; track $index) {
+        <polygon class="hint" [attr.points]="q" />
+      }
+      @for (q of d.stickers; track $index) {
+        <polygon [attr.points]="q.outer" [attr.class]="'side ' + q.face" />
+      }
+      @for (q of d.stickers; track $index) {
+        <polygon
+          [attr.points]="q.inner"
+          [attr.class]="q.colour ? 'sticker' : 'sticker unknown'"
+          [attr.fill]="q.colour"
+        />
+      }
+    </svg>
+  `,
+		isInline: true,
+		styles: [":host{display:inline-block;line-height:0}svg{overflow:visible}.hint{fill:none;stroke:var(--cube-hint, #87938c);stroke-width:1;stroke-dasharray:3 3;opacity:var(--cube-hint-opacity, .5)}.side{stroke:var(--cube-edge, #cdd8d0);stroke-width:var(--cube-edge-width, .6)}.top{fill:var(--cube-top, #f9fbf8)}.left{fill:var(--cube-left, #e9eee9)}.right{fill:var(--cube-right, #dfe6e0)}.sticker{stroke:var(--cube-sticker-edge, rgba(31, 45, 39, .28));stroke-width:1}.unknown{fill:var(--cube-unknown, #e3e7e1);stroke:var(--cube-unknown-edge, none)}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: CubePicture,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "cube-picture",
+			template: `
+    @let d = drawing();
+    <svg
+      [attr.viewBox]="d.viewBox"
+      [attr.width]="d.width"
+      [attr.height]="d.height"
+      aria-hidden="true"
+    >
+      @for (q of d.hint; track $index) {
+        <polygon class="hint" [attr.points]="q" />
+      }
+      @for (q of d.stickers; track $index) {
+        <polygon [attr.points]="q.outer" [attr.class]="'side ' + q.face" />
+      }
+      @for (q of d.stickers; track $index) {
+        <polygon
+          [attr.points]="q.inner"
+          [attr.class]="q.colour ? 'sticker' : 'sticker unknown'"
+          [attr.fill]="q.colour"
+        />
+      }
+    </svg>
+  `,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			styles: [":host{display:inline-block;line-height:0}svg{overflow:visible}.hint{fill:none;stroke:var(--cube-hint, #87938c);stroke-width:1;stroke-dasharray:3 3;opacity:var(--cube-hint-opacity, .5)}.side{stroke:var(--cube-edge, #cdd8d0);stroke-width:var(--cube-edge-width, .6)}.top{fill:var(--cube-top, #f9fbf8)}.left{fill:var(--cube-left, #e9eee9)}.right{fill:var(--cube-right, #dfe6e0)}.sticker{stroke:var(--cube-sticker-edge, rgba(31, 45, 39, .28));stroke-width:1}.unknown{fill:var(--cube-unknown, #e3e7e1);stroke:var(--cube-unknown-edge, none)}\n"]
+		}]
+	}],
+	propDecorators: {
+		count: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "count",
+				required: false
+			}]
+		}],
+		colours: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "colours",
+				required: false
+			}]
+		}],
+		width: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "width",
+				required: false
+			}]
+		}],
+		hint: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hint",
+				required: false
+			}]
+		}],
+		whole: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "whole",
+				required: false
+			}]
+		}],
+		rot: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "rot",
+				required: false
+			}]
+		}]
+	}
+});
+const CUBE_HOLD_MS = 520;
+const CUBE_HOLD_SLOP = 10;
+var CubeHold = class CubeHold {
+	cubeHoldDisabled = input(false, ...ngDevMode ? [{ debugName: "cubeHoldDisabled" }] : /* 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();
+	element = inject(ElementRef).nativeElement;
+	timer;
+	start = null;
+	pointers = /* @__PURE__ */ new Set();
+	pressFired = false;
+	swallow = false;
+	constructor() {
+		const swallow = (e) => {
+			if (!this.swallow) return;
+			this.swallow = false;
+			e.preventDefault();
+			e.stopImmediatePropagation();
+		};
+		this.element.addEventListener("click", swallow, true);
+		inject(DestroyRef).onDestroy(() => {
+			clearTimeout(this.timer);
+			this.element.removeEventListener("click", swallow, true);
+		});
+	}
+	press(e) {
+		this.pointers.add(e.pointerId);
+		this.cancel();
+		this.pressFired = false;
+		this.swallow = false;
+		if (this.cubeHoldDisabled() || this.pointers.size > 1 || e.button > 0) return;
+		this.start = {
+			x: e.clientX,
+			y: e.clientY
+		};
+		this.timer = setTimeout(() => this.fire("press", e), this.cubeHoldMs());
+	}
+	moved(e) {
+		if (!this.start) return;
+		if (Math.hypot(e.clientX - this.start.x, e.clientY - this.start.y) > this.cubeHoldSlop()) this.cancel();
+	}
+	lift(e) {
+		this.pointers.delete(e.pointerId);
+		this.cancel();
+	}
+	menu(e) {
+		if (this.cubeHoldDisabled()) return;
+		e.preventDefault();
+		if (this.pressFired) return;
+		this.fire("menu", e);
+	}
+	fire(via, event) {
+		this.cancel();
+		if (this.cubeHoldDisabled()) return;
+		this.pressFired = via === "press";
+		this.swallow = true;
+		if (this.cubeHoldBuzz()) globalThis.navigator?.vibrate?.(12);
+		this.cubeHeld.emit({
+			via,
+			element: this.element,
+			event
+		});
+	}
+	cancel() {
+		clearTimeout(this.timer);
+		this.timer = void 0;
+		this.start = null;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: CubeHold,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.4",
+		type: CubeHold,
+		isStandalone: true,
+		selector: "[cubeHold]",
+		inputs: {
+			cubeHoldDisabled: {
+				classPropertyName: "cubeHoldDisabled",
+				publicName: "cubeHoldDisabled",
+				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" },
+		host: {
+			listeners: {
+				"pointerdown": "press($event)",
+				"pointermove": "moved($event)",
+				"pointerup": "lift($event)",
+				"pointercancel": "lift($event)",
+				"pointerleave": "lift($event)",
+				"contextmenu": "menu($event)",
+				"keydown": "pressFired = false; swallow = false"
+			},
+			properties: {
+				"style.user-select": "cubeHoldDisabled() ? null : \"none\"",
+				"style.-webkit-user-select": "cubeHoldDisabled() ? null : \"none\"",
+				"style.-webkit-touch-callout": "cubeHoldDisabled() ? null : \"none\""
+			}
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: CubeHold,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[cubeHold]",
+			host: {
+				"[style.user-select]": "cubeHoldDisabled() ? null : \"none\"",
+				"[style.-webkit-user-select]": "cubeHoldDisabled() ? null : \"none\"",
+				"[style.-webkit-touch-callout]": "cubeHoldDisabled() ? null : \"none\"",
+				"(pointerdown)": "press($event)",
+				"(pointermove)": "moved($event)",
+				"(pointerup)": "lift($event)",
+				"(pointercancel)": "lift($event)",
+				"(pointerleave)": "lift($event)",
+				"(contextmenu)": "menu($event)",
+				"(keydown)": "pressFired = false; swallow = false"
+			}
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		cubeHoldDisabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "cubeHoldDisabled",
+				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"]
+		}]
+	}
+});
+const CUBE_ICON_NAMES = [
+	"names",
+	"name",
+	"change",
+	"move",
+	"place",
+	"whose",
+	"library",
+	"mine",
+	"shown",
+	"hidden",
+	"view",
+	"sort",
+	"kept",
+	"face",
+	"added",
+	"up",
+	"down",
+	"plus",
+	"square",
+	"one",
+	"two",
+	"three",
+	"four",
+	"grid-4x5",
+	"grid-3x6"
+];
+const SHAPES = {
+	square: {
+		cols: 3,
+		rows: 3
+	},
+	one: {
+		cols: 1,
+		rows: 3
+	},
+	two: {
+		cols: 2,
+		rows: 3
+	},
+	three: {
+		cols: 3,
+		rows: 3
+	},
+	four: {
+		cols: 4,
+		rows: 3
+	},
+	"grid-4x5": {
+		cols: 4,
+		rows: 5
+	},
+	"grid-3x6": {
+		cols: 3,
+		rows: 6
+	}
+};
+function cubeIconCells(icon) {
+	const shape = SHAPES[icon];
+	if (!shape) return null;
+	const { cols, rows } = shape;
+	const gap = 1.6;
+	const size = Math.min((17 - gap * (cols - 1)) / cols, (17 - gap * (rows - 1)) / rows);
+	const w = cols * size + gap * (cols - 1);
+	const h = rows * size + gap * (rows - 1);
+	const out = [];
+	for (let r = 0; r < rows; r++) for (let c = 0; c < cols; c++) out.push({
+		x: cols === 1 ? 3.5 : 12 - w / 2 + c * (size + gap),
+		y: 12 - h / 2 + r * (size + gap),
+		w: cols === 1 ? 17 : size,
+		h: size
+	});
+	return out;
+}
+var CubeIcon = class CubeIcon {
+	icon = input.required(...ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []);
+	inUse = input(false, ...ngDevMode ? [{ debugName: "inUse" }] : /* istanbul ignore next */ []);
+	cells = computed(() => cubeIconCells(this.icon()), ...ngDevMode ? [{ debugName: "cells" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: CubeIcon,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.4",
+		type: CubeIcon,
+		isStandalone: true,
+		selector: "cube-icon",
+		inputs: {
+			icon: {
+				classPropertyName: "icon",
+				publicName: "icon",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			inUse: {
+				classPropertyName: "inUse",
+				publicName: "inUse",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { properties: { "class.in-use": "inUse()" } },
+		ngImport: i0,
+		template: `
+    <svg viewBox="0 0 24 24" aria-hidden="true">
+      @if (cells(); as cs) {
+        @for (c of cs; track $index) {
+          <rect
+            class="cell"
+            [attr.x]="c.x"
+            [attr.y]="c.y"
+            [attr.width]="c.w"
+            [attr.height]="c.h"
+            rx="0.8"
+          />
+        }
+      }
+      @switch (icon()) {
+        @case ('view') {
+          <rect x="4" y="4" width="7" height="7" rx="1.5" />
+          <rect x="13" y="4" width="7" height="7" rx="1.5" />
+          <rect x="4" y="13" width="7" height="7" rx="1.5" />
+          <rect x="13" y="13" width="7" height="7" rx="1.5" />
+        }
+        @case ('sort') {
+          <path d="M8 19V5M4.5 8.5 8 5l3.5 3.5M16 5v14M12.5 15.5 16 19l3.5-3.5" />
+        }
+        @case ('kept') {
+          <path d="M5 7h14M5 12h14M5 17h9" />
+        }
+        @case ('face') {
+          <path d="M12 3.5 20 8v8l-8 4.5L4 16V8Z" />
+          <path d="M4 8l8 4.5L20 8M12 12.5v8" />
+        }
+        @case ('added') {
+          <circle cx="12" cy="12" r="8" />
+          <path d="M12 7.5V12l3 2" />
+        }
+        @case ('up') {
+          <path d="M12 19V5M6.5 10.5 12 5l5.5 5.5" />
+        }
+        @case ('plus') {
+          <path d="M12 5v14M5 12h14" />
+        }
+        @case ('down') {
+          <path d="M12 5v14M6.5 13.5 12 19l5.5-5.5" />
+        }
+        @case ('names') {
+          <path d="M3.5 12.5 11 5h8v8l-7.5 7.5a1.5 1.5 0 0 1-2.1 0L3.5 14.6a1.5 1.5 0 0 1 0-2.1Z" />
+          <circle cx="15.2" cy="8.8" r="1.4" />
+        }
+        @case ('name') {
+          <path d="M5 18 9.5 6h1L15 18M6.6 14h6.8" />
+          <path
+            d="M17 11.5c1.6-1.2 3.5-.5 3.5 1.4V18M20.5 14.6c-2.6-.3-4 .4-4 1.8 0 1.9 2.7 2 4 .3"
+          />
+        }
+        @case ('change') {
+          <path d="M4 20h4L19 9a2.8 2.8 0 0 0-4-4L4 16v4Z" />
+          <path d="M13.5 6.5l4 4" />
+        }
+        @case ('move') {
+          <path
+            d="M4 8V6a2 2 0 0 1 2-2h4l2 2h6a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-1"
+          />
+          <path d="M2.5 13H12M9 10l3 3-3 3" />
+        }
+        @case ('place') {
+          <path
+            d="M4 8V6a2 2 0 0 1 2-2h4l2 2h6a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8Z"
+          />
+        }
+        @case ('whose') {
+          <circle cx="9" cy="8" r="3.2" />
+          <path d="M3 19c.6-3.4 3-5.2 6-5.2s5.4 1.8 6 5.2" />
+          <path d="M16 5.5a3 3 0 0 1 0 5.6M18.5 14.4c1.4.8 2.3 2.4 2.5 4.6" />
+        }
+        @case ('library') {
+          <path d="M4 5h4v15H4zM10 5h4v15h-4z" />
+          <path d="m16 6 3.6-1 3 14.4-3.6 1z" />
+        }
+        @case ('mine') {
+          <circle cx="12" cy="8" r="3.4" />
+          <path d="M5 20c.7-4 3.5-6 7-6s6.3 2 7 6" />
+        }
+        @case ('shown') {
+          <path d="M3 12s3.2-6 9-6 9 6 9 6-3.2 6-9 6-9-6-9-6Z" />
+          <circle cx="12" cy="12" r="2.6" />
+        }
+        @case ('hidden') {
+          <path d="M3 12s3.2-6 9-6c1.6 0 3 .45 4.2 1.1M21 12s-3.2 6-9 6c-1.6 0-3-.45-4.2-1.1" />
+          <path d="M4.5 19.5 19.5 4.5" />
+        }
+      }
+    </svg>
+  `,
+		isInline: true,
+		styles: [":host{display:inline-block;width:var(--cube-icon-size, 34px);height:var(--cube-icon-size, 34px);line-height:0}svg{width:100%;height:100%;fill:none;stroke:var(--cube-icon-stroke, #1f2a26);stroke-width:var(--cube-icon-stroke-width, 1.7);stroke-linecap:round;stroke-linejoin:round}.cell{fill:var(--cube-icon-stroke, #1f2a26);stroke:none;opacity:var(--cube-icon-cell-opacity, .8)}:host(.in-use) svg{stroke:var(--cube-icon-in-use, #3b5a4c)}:host(.in-use) .cell{fill:var(--cube-icon-in-use, #3b5a4c)}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: CubeIcon,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "cube-icon",
+			template: `
+    <svg viewBox="0 0 24 24" aria-hidden="true">
+      @if (cells(); as cs) {
+        @for (c of cs; track $index) {
+          <rect
+            class="cell"
+            [attr.x]="c.x"
+            [attr.y]="c.y"
+            [attr.width]="c.w"
+            [attr.height]="c.h"
+            rx="0.8"
+          />
+        }
+      }
+      @switch (icon()) {
+        @case ('view') {
+          <rect x="4" y="4" width="7" height="7" rx="1.5" />
+          <rect x="13" y="4" width="7" height="7" rx="1.5" />
+          <rect x="4" y="13" width="7" height="7" rx="1.5" />
+          <rect x="13" y="13" width="7" height="7" rx="1.5" />
+        }
+        @case ('sort') {
+          <path d="M8 19V5M4.5 8.5 8 5l3.5 3.5M16 5v14M12.5 15.5 16 19l3.5-3.5" />
+        }
+        @case ('kept') {
+          <path d="M5 7h14M5 12h14M5 17h9" />
+        }
+        @case ('face') {
+          <path d="M12 3.5 20 8v8l-8 4.5L4 16V8Z" />
+          <path d="M4 8l8 4.5L20 8M12 12.5v8" />
+        }
+        @case ('added') {
+          <circle cx="12" cy="12" r="8" />
+          <path d="M12 7.5V12l3 2" />
+        }
+        @case ('up') {
+          <path d="M12 19V5M6.5 10.5 12 5l5.5 5.5" />
+        }
+        @case ('plus') {
+          <path d="M12 5v14M5 12h14" />
+        }
+        @case ('down') {
+          <path d="M12 5v14M6.5 13.5 12 19l5.5-5.5" />
+        }
+        @case ('names') {
+          <path d="M3.5 12.5 11 5h8v8l-7.5 7.5a1.5 1.5 0 0 1-2.1 0L3.5 14.6a1.5 1.5 0 0 1 0-2.1Z" />
+          <circle cx="15.2" cy="8.8" r="1.4" />
+        }
+        @case ('name') {
+          <path d="M5 18 9.5 6h1L15 18M6.6 14h6.8" />
+          <path
+            d="M17 11.5c1.6-1.2 3.5-.5 3.5 1.4V18M20.5 14.6c-2.6-.3-4 .4-4 1.8 0 1.9 2.7 2 4 .3"
+          />
+        }
+        @case ('change') {
+          <path d="M4 20h4L19 9a2.8 2.8 0 0 0-4-4L4 16v4Z" />
+          <path d="M13.5 6.5l4 4" />
+        }
+        @case ('move') {
+          <path
+            d="M4 8V6a2 2 0 0 1 2-2h4l2 2h6a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-1"
+          />
+          <path d="M2.5 13H12M9 10l3 3-3 3" />
+        }
+        @case ('place') {
+          <path
+            d="M4 8V6a2 2 0 0 1 2-2h4l2 2h6a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8Z"
+          />
+        }
+        @case ('whose') {
+          <circle cx="9" cy="8" r="3.2" />
+          <path d="M3 19c.6-3.4 3-5.2 6-5.2s5.4 1.8 6 5.2" />
+          <path d="M16 5.5a3 3 0 0 1 0 5.6M18.5 14.4c1.4.8 2.3 2.4 2.5 4.6" />
+        }
+        @case ('library') {
+          <path d="M4 5h4v15H4zM10 5h4v15h-4z" />
+          <path d="m16 6 3.6-1 3 14.4-3.6 1z" />
+        }
+        @case ('mine') {
+          <circle cx="12" cy="8" r="3.4" />
+          <path d="M5 20c.7-4 3.5-6 7-6s6.3 2 7 6" />
+        }
+        @case ('shown') {
+          <path d="M3 12s3.2-6 9-6 9 6 9 6-3.2 6-9 6-9-6-9-6Z" />
+          <circle cx="12" cy="12" r="2.6" />
+        }
+        @case ('hidden') {
+          <path d="M3 12s3.2-6 9-6c1.6 0 3 .45 4.2 1.1M21 12s-3.2 6-9 6c-1.6 0-3-.45-4.2-1.1" />
+          <path d="M4.5 19.5 19.5 4.5" />
+        }
+      }
+    </svg>
+  `,
+			host: { "[class.in-use]": "inUse()" },
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			styles: [":host{display:inline-block;width:var(--cube-icon-size, 34px);height:var(--cube-icon-size, 34px);line-height:0}svg{width:100%;height:100%;fill:none;stroke:var(--cube-icon-stroke, #1f2a26);stroke-width:var(--cube-icon-stroke-width, 1.7);stroke-linecap:round;stroke-linejoin:round}.cell{fill:var(--cube-icon-stroke, #1f2a26);stroke:none;opacity:var(--cube-icon-cell-opacity, .8)}:host(.in-use) svg{stroke:var(--cube-icon-in-use, #3b5a4c)}:host(.in-use) .cell{fill:var(--cube-icon-in-use, #3b5a4c)}\n"]
+		}]
+	}],
+	propDecorators: {
+		icon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "icon",
+				required: true
+			}]
+		}],
+		inUse: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "inUse",
+				required: false
+			}]
+		}]
+	}
+});
+const CONTEXT_PART_ORDER = [
+	"names",
+	"change",
+	"view",
+	"sort",
+	"move",
+	"whose",
+	"hide"
+];
+function orderParts(parts) {
+	const unique = [...new Set(parts)];
+	return [...CONTEXT_PART_ORDER.filter((p) => unique.includes(p)), ...unique.filter((p) => !CONTEXT_PART_ORDER.includes(p))];
+}
+const CONTEXT_CUBE_SOURCE = new InjectionToken("CONTEXT_CUBE_SOURCE");
+const CONTEXT_CUBE_WORDS = new InjectionToken("CONTEXT_CUBE_WORDS");
+const PART_ICONS = { hide: "shown" };
+function partsLevel(parts, words, now = {}) {
+	return orderParts(parts).map((p) => ({
+		key: p,
+		title: words.parts[p]?.title ?? "",
+		line: now[p]?.line !== void 0 ? now[p]?.line : words.parts[p]?.line ?? null,
+		icon: now[p]?.icon ?? PART_ICONS[p] ?? p,
+		data: p
+	}));
+}
+const VIEW_KEYS = [
+	"square",
+	"one",
+	"two",
+	"three",
+	"four",
+	"grid-4x5",
+	"grid-3x6"
+];
+const isView = (v) => VIEW_KEYS.includes(v);
+function gridFor(view, count) {
+	const n = Math.max(1, count);
+	switch (view) {
+		case "square": {
+			const side = Math.max(1, Math.ceil(Math.sqrt(n)));
+			return {
+				cols: side,
+				rows: side
+			};
+		}
+		case "one":
+		case "two":
+		case "three":
+		case "four": {
+			const cols = {
+				one: 1,
+				two: 2,
+				three: 3,
+				four: 4
+			}[view];
+			return {
+				cols,
+				rows: Math.ceil(n / cols)
+			};
+		}
+		case "grid-4x5":
+		case "grid-3x6": {
+			const [cols, rows] = view === "grid-4x5" ? [4, 5] : [3, 6];
+			return {
+				cols,
+				rows: rows * Math.ceil(n / (cols * rows))
+			};
+		}
+	}
+}
+function sortItems(items, by, dir) {
+	const sign = dir === "down" ? -1 : 1;
+	const known = (v) => v !== null && v !== void 0 && v !== "";
+	return items.map((item, at) => ({
+		item,
+		at,
+		value: by(item)
+	})).sort((a, b) => {
+		const ka = known(a.value);
+		const kb = known(b.value);
+		if (!ka || !kb) return Number(!ka) - Number(!kb) || a.at - b.at;
+		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}`,
+		title: n.name,
+		line: words.names.line?.(n) ?? null,
+		icon: "name",
+		inUse: n.current,
+		data: { name: n }
+	}));
+	if (opts.canAdd) tiles.push({
+		key: "name:+",
+		title: words.names.another.title,
+		line: words.names.another.line ?? null,
+		icon: "plus",
+		adds: true,
+		data: { another: true }
+	});
+	return tiles;
+}
+function hideLevel(hidden, words) {
+	return [{
+		key: "hide:shown",
+		title: words.hide.shown.title,
+		line: words.hide.shown.line ?? null,
+		icon: "shown",
+		inUse: !hidden,
+		data: false
+	}, {
+		key: "hide:hidden",
+		title: words.hide.hidden.title,
+		line: words.hide.hidden.line ?? null,
+		icon: "hidden",
+		inUse: hidden,
+		data: true
+	}];
+}
+function viewLevel(now, words, views = VIEW_KEYS) {
+	return views.map((v) => ({
+		key: "view:" + v,
+		title: words.views[v]?.title ?? "",
+		line: v === now ? null : words.views[v]?.line ?? null,
+		icon: v,
+		inUse: v === now,
+		data: v
+	}));
+}
+function directionWords(option, words) {
+	return {
+		up: option.up ?? words.directions.up,
+		down: option.down ?? words.directions.down
+	};
+}
+function sortLevel(options, now, words) {
+	return options.map((o) => {
+		const inUse = now.by === o.by;
+		const directed = o.directed !== false;
+		return {
+			key: "sort:" + o.by,
+			title: o.title,
+			line: inUse && directed ? directionWords(o, words)[now.dir].title : o.line ?? null,
+			icon: o.icon,
+			inUse,
+			data: o
+		};
+	});
+}
+function sortDirectionsLevel(option, now, words) {
+	const w = directionWords(option, words);
+	return ["up", "down"].map((dir) => ({
+		key: "dir:" + dir,
+		title: w[dir].title,
+		line: w[dir].line ?? null,
+		icon: dir,
+		inUse: now.by === option.by && now.dir === dir,
+		data: dir
+	}));
+}
+const TURNING_SIDES = 4;
+function turningRows(pieces, own, cols = 3, rows = cols) {
+	const across = Math.max(1, Math.floor(cols));
+	const down = Math.max(1, Math.floor(rows));
+	const count = pieces.length + (own !== null ? 1 : 0);
+	const perRow = across * 4;
+	const rowCount = Math.max(down, Math.ceil(count / perRow));
+	const grid = Array.from({ length: rowCount }, () => Array.from({ length: 4 }, () => Array.from({ length: across }).fill(null)));
+	const front = [];
+	for (let r = 0; r < rowCount; r++) for (let c = 0; c < across; c++) front.push([r, c]);
+	const frontForPieces = own !== null ? front.slice(0, -1) : front;
+	if (own !== null) grid[rowCount - 1][0][across - 1] = own;
+	let next = 0;
+	for (const [r, c] of frontForPieces) {
+		if (next >= pieces.length) break;
+		grid[r][0][c] = pieces[next++];
+	}
+	for (let r = 0; r < rowCount && next < pieces.length; r++) for (let s = 1; s < 4 && next < pieces.length; s++) for (let c = 0; c < across && next < pieces.length; c++) grid[r][s][c] = pieces[next++];
+	return {
+		rows: grid,
+		sides: grid.map((row) => 1 + row.slice(1).filter((side) => side.some((t) => t !== null)).length)
+	};
+}
+function squareLevelFor(cell) {
+	return cell >= 280 ? 0 : cell >= 150 ? 1 : cell >= 100 ? 2 : cell >= 70 ? 3 : 4;
+}
+function squareGap(n) {
+	return n <= 2 ? 12 : n === 3 ? 10 : n === 4 ? 8 : 5;
+}
+const SQUARE_MAX_SIDE = 880;
+const SQUARE_LIST_ROW = 76;
+function squareLayout(view, count, room, opts = {}) {
+	const n = Math.max(0, count);
+	const grid = gridFor(view, n);
+	const cols = grid.cols;
+	const rows = view === "square" ? grid.rows : Math.max(1, Math.ceil(n / cols));
+	const width = Math.max(0, Math.min(view === "square" ? Math.min(room.width, room.tall) : room.width, opts.maxSide ?? 880));
+	const list = view === "one";
+	const gap = list ? 8 : squareGap(Math.max(cols, Math.min(rows, 5)));
+	const cell = Math.max(0, (width - gap * (cols - 1)) / cols);
+	const rowHeight = list ? opts.listRow ?? 76 : cell;
+	return {
+		cols,
+		rows,
+		width,
+		height: rows * rowHeight + gap * (rows - 1),
+		gap,
+		cell,
+		rowHeight,
+		level: list ? 1 : squareLevelFor(cell),
+		list,
+		open: cols * rows - n
+	};
+}
+var CubeSquareTile = class CubeSquareTile {
+	template = inject(TemplateRef);
+	cubeSquareTile = input(...ngDevMode ? [void 0, { debugName: "cubeSquareTile" }] : /* istanbul ignore next */ []);
+	static ngTemplateContextGuard(_dir, ctx) {
+		return true;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: CubeSquareTile,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.4",
+		type: CubeSquareTile,
+		isStandalone: true,
+		selector: "ng-template[cubeSquareTile]",
+		inputs: { cubeSquareTile: {
+			classPropertyName: "cubeSquareTile",
+			publicName: "cubeSquareTile",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: CubeSquareTile,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "ng-template[cubeSquareTile]" }]
+	}],
+	propDecorators: { cubeSquareTile: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "cubeSquareTile",
+			required: false
+		}]
+	}] }
+});
+function turningFront(view, across = 3) {
+	if (view === "square") return {
+		cols: across,
+		rows: across
+	};
+	if (view === "grid-4x5") return {
+		cols: 4,
+		rows: 5
+	};
+	if (view === "grid-3x6") return {
+		cols: 3,
+		rows: 6
+	};
+	return null;
+}
+const TURNING_BELOW = 640;
+const TURNING_NUDGE_UNTIL = 3;
+let turnedHere = 0;
+const readTurned = (key) => {
+	if (!key) return turnedHere;
+	try {
+		return Number(localStorage.getItem(key)) || 0;
+	} catch {
+		return turnedHere;
+	}
+};
+const noteTurned = (key) => {
+	turnedHere++;
+	if (!key) return;
+	try {
+		localStorage.setItem(key, String(readTurned(key) + 1));
+	} catch {}
+};
+const reducedMotion = () => 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 */ []);
+	maxSide = input(880, ...ngDevMode ? [{ debugName: "maxSide" }] : /* istanbul ignore next */ []);
+	listRow = input(76, ...ngDevMode ? [{ debugName: "listRow" }] : /* istanbul ignore next */ []);
+	dashed = input(false, ...ngDevMode ? [{ debugName: "dashed" }] : /* istanbul ignore next */ []);
+	keyOf = input((_, i) => i, ...ngDevMode ? [{ debugName: "keyOf" }] : /* istanbul ignore next */ []);
+	turning = input(false, ...ngDevMode ? [{ debugName: "turning" }] : /* istanbul ignore next */ []);
+	turnBelow = input(640, ...ngDevMode ? [{ debugName: "turnBelow" }] : /* istanbul ignore next */ []);
+	across = input(3, ...ngDevMode ? [{ debugName: "across" }] : /* istanbul ignore next */ []);
+	isOwn = input(null, ...ngDevMode ? [{ debugName: "isOwn" }] : /* istanbul ignore next */ []);
+	nudgeKey = input(null, ...ngDevMode ? [{ debugName: "nudgeKey" }] : /* istanbul ignore next */ []);
+	tile = contentChild(CubeSquareTile, ...ngDevMode ? [{ debugName: "tile" }] : /* istanbul ignore next */ []);
+	grid = viewChild("grid", ...ngDevMode ? [{ debugName: "grid" }] : /* istanbul ignore next */ []);
+	room = signal({
+		width: 0,
+		tall: 0
+	}, ...ngDevMode ? [{ debugName: "room" }] : /* istanbul ignore next */ []);
+	front = computed(() => {
+		if (!this.turning()) return null;
+		if ((this.room().width || 354) >= this.turnBelow()) return null;
+		const front = turningFront(this.view(), Math.max(1, Math.floor(this.across())));
+		return front && this.tiles().length > front.cols * front.rows ? front : null;
+	}, ...ngDevMode ? [{ debugName: "front" }] : /* istanbul ignore next */ []);
+	layout = computed(() => {
+		const r = this.room();
+		const width = r.width || 354;
+		const room = {
+			width,
+			tall: r.tall || width
+		};
+		const opts = {
+			maxSide: this.maxSide(),
+			listRow: this.listRow()
+		};
+		const front = this.front();
+		if (!front) return squareLayout(this.view(), this.tiles().length, room, opts);
+		const full = squareLayout(this.view(), front.cols * front.rows, room, opts);
+		const rows = this.rings()?.rows.length ?? front.rows;
+		return {
+			...full,
+			rows,
+			height: rows * full.rowHeight + full.gap * (rows - 1),
+			open: 0
+		};
+	}, ...ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []);
+	rings = computed(() => {
+		const front = this.front();
+		if (!front) return null;
+		const isOwn = this.isOwn();
+		const tiles = this.tiles();
+		const own = isOwn ? tiles.find((t) => isOwn(t)) ?? null : null;
+		return turningRows(own === null ? tiles : tiles.filter((t) => t !== own), own, front.cols, front.rows);
+	}, ...ngDevMode ? [{ debugName: "rings" }] : /* istanbul ignore next */ []);
+	indexes = computed(() => new Map(this.tiles().map((t, i) => [t, i])), ...ngDevMode ? [{ debugName: "indexes" }] : /* istanbul ignore next */ []);
+	indexOf(t) {
+		return this.indexes().get(t) ?? 0;
+	}
+	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 */ []);
+	nudging = signal(false, ...ngDevMode ? [{ debugName: "nudging" }] : /* istanbul ignore next */ []);
+	drag = null;
+	fingers = /* @__PURE__ */ new Set();
+	suppressClick = false;
+	nudged = false;
+	timers = [];
+	host = inject(ElementRef).nativeElement;
+	angle(row) {
+		return this.angles()[row] ?? 0;
+	}
+	sideOf(row) {
+		const sides = 4;
+		return (Math.round(-this.angle(row) / 90) % sides + sides) % sides;
+	}
+	filled(row) {
+		return this.rings()?.sides[row] ?? 1;
+	}
+	down(row, e) {
+		this.fingers.add(e.pointerId);
+		if (this.fingers.size > 1) {
+			this.cancelDrag();
+			return;
+		}
+		if (this.filled(row) <= 1) return;
+		this.drag = {
+			row,
+			id: e.pointerId,
+			x: e.clientX,
+			y: e.clientY,
+			base: this.angle(row),
+			moved: false
+		};
+	}
+	move(row, e) {
+		const drag = this.drag;
+		if (!drag || drag.row !== row || drag.id !== e.pointerId) return;
+		const dx = e.clientX - drag.x;
+		const dy = e.clientY - drag.y;
+		if (!drag.moved) {
+			if (Math.abs(dx) < 8 || Math.abs(dx) < Math.abs(dy)) return;
+			drag.moved = true;
+			this.dragging.set(row);
+			e.currentTarget?.setPointerCapture?.(e.pointerId);
+		}
+		const width = this.layout().width || 354;
+		this.angles.update((a) => ({
+			...a,
+			[row]: drag.base + dx / width * 90
+		}));
+	}
+	up(row, e) {
+		this.fingers.delete(e.pointerId);
+		const drag = this.drag;
+		if (!drag || drag.row !== row || drag.id !== e.pointerId) return;
+		this.drag = null;
+		if (!drag.moved) return;
+		this.dragging.set(null);
+		this.suppressClick = true;
+		setTimeout(() => this.suppressClick = false);
+		const moved = this.angle(row) - drag.base;
+		const steps = Math.abs(moved) > 12 ? Math.sign(moved) * Math.max(1, Math.round(Math.abs(moved) / 90)) : 0;
+		this.settle(row, drag.base, steps);
+	}
+	cancelDrag() {
+		const drag = this.drag;
+		this.drag = null;
+		if (!drag?.moved) return;
+		this.dragging.set(null);
+		this.angles.update((a) => ({
+			...a,
+			[drag.row]: drag.base
+		}));
+	}
+	settle(row, base, steps) {
+		const filled = this.filled(row);
+		const sideAt = (s) => (Math.round(-(base + s * 90) / 90) % 4 + 4) % 4;
+		let n = steps;
+		while (n !== 0 && sideAt(n) >= filled) n += Math.sign(n);
+		this.angles.update((a) => ({
+			...a,
+			[row]: base + n * 90
+		}));
+		if (n !== 0) noteTurned(this.nudgeKey());
+	}
+	key(row, e) {
+		if (e.key !== "ArrowRight" && e.key !== "ArrowLeft") return;
+		if (this.filled(row) <= 1) return;
+		e.preventDefault();
+		const col = this.focusedColumn(e.target);
+		this.settle(row, this.angle(row), e.key === "ArrowRight" ? -1 : 1);
+		setTimeout(() => this.focusSide(row, col));
+	}
+	focusedColumn(target) {
+		const cell = target?.closest(".cs-cell, .cs-place");
+		const side = cell?.parentElement;
+		return cell && side ? Array.from(side.children).indexOf(cell) : 0;
+	}
+	focusSide(row, col) {
+		const side = this.host.querySelector(`.cs-row[data-row="${row}"] .cs-side[data-side="${this.sideOf(row)}"]`);
+		if (!side) return;
+		const cells = Array.from(side.children);
+		const order = [cells[col], ...cells].filter(Boolean);
+		const focusable = "button, a[href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])";
+		for (const cell of order) {
+			const el = cell.matches(focusable) ? cell : cell.querySelector(focusable);
+			if (el) {
+				el.focus();
+				return;
+			}
+		}
+		side.closest(".cs-row")?.focus();
+	}
+	nudge() {
+		const rings = this.rings();
+		if (this.nudged || !rings || reducedMotion()) return;
+		if (readTurned(this.nudgeKey()) >= 3) return;
+		const rows = rings.sides.flatMap((s, i) => s > 1 ? [i] : []);
+		if (!rows.length) return;
+		this.nudged = true;
+		this.nudging.set(true);
+		const set = (row, angle) => {
+			if (this.drag || this.dragging() !== null) return;
+			this.angles.update((a) => ({
+				...a,
+				[row]: angle
+			}));
+		};
+		rows.forEach((row, i) => {
+			this.timers.push(setTimeout(() => set(row, -22), 500 + i * 180), setTimeout(() => set(row, 0), 1020 + i * 180));
+		});
+		this.timers.push(setTimeout(() => this.nudging.set(false), 1600 + rows.length * 180));
+	}
+	constructor() {
+		const host = this.host;
+		const destroy = inject(DestroyRef);
+		const swallow = (e) => {
+			if (!this.suppressClick) return;
+			e.stopPropagation();
+			e.preventDefault();
+		};
+		host.addEventListener("click", swallow, true);
+		destroy.onDestroy(() => {
+			host.removeEventListener("click", swallow, true);
+			this.timers.forEach(clearTimeout);
+		});
+		effect(() => {
+			if (this.rings()) untracked(() => this.timers.push(setTimeout(() => this.nudge())));
+		});
+		afterNextRender(() => {
+			const measure = () => this.room.set({
+				width: host.clientWidth,
+				tall: Math.max(320, window.innerHeight - 48)
+			});
+			measure();
+			const watch = typeof ResizeObserver === "function" ? new ResizeObserver(measure) : null;
+			watch?.observe(host);
+			window.addEventListener("resize", measure);
+			destroy.onDestroy(() => {
+				watch?.disconnect();
+				window.removeEventListener("resize", measure);
+			});
+		});
+		let before = 0;
+		let beforeView = null;
+		effect(() => {
+			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" }], {
+				duration: 420,
+				easing: "cubic-bezier(.2,.7,.2,1)"
+			});
+			before = cols;
+			beforeView = view;
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: CubeSquare,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.4",
+		type: CubeSquare,
+		isStandalone: true,
+		selector: "cube-square",
+		inputs: {
+			tiles: {
+				classPropertyName: "tiles",
+				publicName: "tiles",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			view: {
+				classPropertyName: "view",
+				publicName: "view",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			maxSide: {
+				classPropertyName: "maxSide",
+				publicName: "maxSide",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			listRow: {
+				classPropertyName: "listRow",
+				publicName: "listRow",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			dashed: {
+				classPropertyName: "dashed",
+				publicName: "dashed",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			keyOf: {
+				classPropertyName: "keyOf",
+				publicName: "keyOf",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			turning: {
+				classPropertyName: "turning",
+				publicName: "turning",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			turnBelow: {
+				classPropertyName: "turnBelow",
+				publicName: "turnBelow",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			across: {
+				classPropertyName: "across",
+				publicName: "across",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			isOwn: {
+				classPropertyName: "isOwn",
+				publicName: "isOwn",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			nudgeKey: {
+				classPropertyName: "nudgeKey",
+				publicName: "nudgeKey",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		queries: [{
+			propertyName: "tile",
+			first: true,
+			predicate: CubeSquareTile,
+			descendants: true,
+			isSignal: true
+		}],
+		viewQueries: [{
+			propertyName: "grid",
+			first: true,
+			predicate: ["grid"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `
+    @let sq = layout();
+    @if (rings(); as r) {
+      <div
+        class="cs-turning"
+        [class]="'cs-turning cs-l' + sq.level"
+        [class.cs-dashed]="dashed()"
+        [attr.data-level]="sq.level"
+        [style.width.px]="sq.width"
+        [style.--cs-gap.px]="sq.gap"
+      >
+        @for (row of r.rows; track ri; let ri = $index) {
+          <div
+            class="cs-row"
+            [class.cs-turns]="r.sides[ri] > 1"
+            [attr.data-row]="ri"
+            [style.height.px]="sq.rowHeight"
+            (pointerdown)="down(ri, $event)"
+            (pointermove)="move(ri, $event)"
+            (pointerup)="up(ri, $event)"
+            (pointercancel)="up(ri, $event)"
+            (keydown)="key(ri, $event)"
+          >
+            @if (r.sides[ri] > 1) {
+              <span class="cs-edge" aria-hidden="true"></span>
+            }
+            <div
+              class="cs-band"
+              [class.cs-still]="dragging() === ri || still()"
+              [class.cs-nudging]="nudging()"
+              [style.transform]="
+                'translateZ(' + -sq.width / 2 + 'px) rotateY(' + angle(ri) + 'deg)'
+              "
+            >
+              @for (side of row; track si; let si = $index) {
+                <div
+                  class="cs-side"
+                  [attr.data-side]="si"
+                  [style.grid-template-columns]="'repeat(' + sq.cols + ', minmax(0, 1fr))'"
+                  [style.transform]="
+                    'rotateY(' + si * 90 + 'deg) translateZ(' + sq.width / 2 + 'px)'
+                  "
+                  [attr.aria-hidden]="sideOf(ri) === si ? null : 'true'"
+                  [attr.inert]="sideOf(ri) === si ? null : ''"
+                >
+                  @for (t of side; track ci; let ci = $index) {
+                    @if (t !== null) {
+                      <div class="cs-cell">
+                        @if (tile(); as tpl) {
+                          <ng-container
+                            [ngTemplateOutlet]="tpl.template"
+                            [ngTemplateOutletContext]="{
+                              $implicit: t,
+                              index: indexOf(t),
+                              level: sq.level,
+                              cell: sq.cell,
+                              rowHeight: sq.rowHeight,
+                              list: false,
+                            }"
+                          />
+                        }
+                      </div>
+                    } @else if (si < r.sides[ri]) {
+                      <div class="cs-place" aria-hidden="true"></div>
+                    }
+                  }
+                </div>
+              }
+            </div>
+          </div>
+        }
+      </div>
+    } @else {
+      <div
+        #grid
+        [class]="'cs-square cs-l' + sq.level"
+        [class.cs-list]="sq.list"
+        [class.cs-dashed]="dashed()"
+        [attr.data-level]="sq.level"
+        [style.width.px]="sq.width"
+        [style.height.px]="sq.height"
+        [style.--cs-gap.px]="sq.gap"
+        [style.grid-template-columns]="'repeat(' + sq.cols + ', minmax(0, 1fr))'"
+        [style.grid-template-rows]="'repeat(' + sq.rows + ', minmax(0, 1fr))'"
+      >
+        @for (t of tiles(); track keyOf()(t, $index); let i = $index) {
+          <div class="cs-cell">
+            @if (tile(); as tpl) {
+              <ng-container
+                [ngTemplateOutlet]="tpl.template"
+                [ngTemplateOutletContext]="{
+                  $implicit: t,
+                  index: i,
+                  level: sq.level,
+                  cell: sq.cell,
+                  rowHeight: sq.rowHeight,
+                  list: sq.list,
+                }"
+              />
+            }
+          </div>
+        }
+        @for (i of openPlaces(); track i) {
+          <div class="cs-place" aria-hidden="true"></div>
+        }
+      </div>
+    }
+  `,
+		isInline: true,
+		styles: [":host{display:block}.cs-square{display:grid;gap:calc(var(--cs-gap) * var(--cube-square-gap-scale, 1));--cs-radius: var(--cube-square-radius, 20px)}.cs-cell{display:grid;min-width:0;min-height:0}.cs-place{box-sizing:border-box;border:var(--cube-square-place-width, 1.5px) solid var(--cube-square-place, color-mix(in srgb, #dae0d9 55%, transparent));border-radius:var(--cs-radius)}.cs-dashed .cs-place{border-style:dashed;border-color:var(--cube-square-place-dashed, #dae0d9)}.cs-l0{--cs-radius: 28px}.cs-l2{--cs-radius: 16px}.cs-l3{--cs-radius: 12px}.cs-l4{--cs-radius: 9px}.cs-l4 .cs-place{border-width:1px}.cs-turning{display:flex;flex-direction:column;gap:calc(var(--cs-gap) * var(--cube-square-gap-scale, 1));--cs-radius: var(--cube-square-radius, 20px)}.cs-row{position:relative;perspective:1400px;touch-action:pan-y;user-select:none;-webkit-user-select:none;outline:none}.cs-row:focus-visible{outline:2px solid var(--cube-square-focus, #5f9a80);outline-offset:3px;border-radius:var(--cs-radius)}.cs-band{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .38s cubic-bezier(.2,.8,.2,1)}.cs-band.cs-nudging{transition:transform .52s cubic-bezier(.4,0,.2,1)}.cs-band.cs-still{transition:none}.cs-side{position:absolute;inset:0;display:grid;gap:calc(var(--cs-gap) * var(--cube-square-gap-scale, 1));backface-visibility:hidden}.cs-edge{pointer-events:none;position:absolute;top:18%;bottom:18%;right:calc(-1*max(4px,var(--cs-gap) - 2px));z-index:1;width:3px;border-radius:999px;background:var(--cube-square-edge, color-mix(in srgb, #5f9a80 45%, transparent))}\n"],
+		dependencies: [{
+			kind: "directive",
+			type: NgTemplateOutlet,
+			selector: "[ngTemplateOutlet]",
+			inputs: [
+				"ngTemplateOutletContext",
+				"ngTemplateOutlet",
+				"ngTemplateOutletInjector"
+			]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: CubeSquare,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "cube-square",
+			imports: [NgTemplateOutlet],
+			template: `
+    @let sq = layout();
+    @if (rings(); as r) {
+      <div
+        class="cs-turning"
+        [class]="'cs-turning cs-l' + sq.level"
+        [class.cs-dashed]="dashed()"
+        [attr.data-level]="sq.level"
+        [style.width.px]="sq.width"
+        [style.--cs-gap.px]="sq.gap"
+      >
+        @for (row of r.rows; track ri; let ri = $index) {
+          <div
+            class="cs-row"
+            [class.cs-turns]="r.sides[ri] > 1"
+            [attr.data-row]="ri"
+            [style.height.px]="sq.rowHeight"
+            (pointerdown)="down(ri, $event)"
+            (pointermove)="move(ri, $event)"
+            (pointerup)="up(ri, $event)"
+            (pointercancel)="up(ri, $event)"
+            (keydown)="key(ri, $event)"
+          >
+            @if (r.sides[ri] > 1) {
+              <span class="cs-edge" aria-hidden="true"></span>
+            }
+            <div
+              class="cs-band"
+              [class.cs-still]="dragging() === ri || still()"
+              [class.cs-nudging]="nudging()"
+              [style.transform]="
+                'translateZ(' + -sq.width / 2 + 'px) rotateY(' + angle(ri) + 'deg)'
+              "
+            >
+              @for (side of row; track si; let si = $index) {
+                <div
+                  class="cs-side"
+                  [attr.data-side]="si"
+                  [style.grid-template-columns]="'repeat(' + sq.cols + ', minmax(0, 1fr))'"
+                  [style.transform]="
+                    'rotateY(' + si * 90 + 'deg) translateZ(' + sq.width / 2 + 'px)'
+                  "
+                  [attr.aria-hidden]="sideOf(ri) === si ? null : 'true'"
+                  [attr.inert]="sideOf(ri) === si ? null : ''"
+                >
+                  @for (t of side; track ci; let ci = $index) {
+                    @if (t !== null) {
+                      <div class="cs-cell">
+                        @if (tile(); as tpl) {
+                          <ng-container
+                            [ngTemplateOutlet]="tpl.template"
+                            [ngTemplateOutletContext]="{
+                              $implicit: t,
+                              index: indexOf(t),
+                              level: sq.level,
+                              cell: sq.cell,
+                              rowHeight: sq.rowHeight,
+                              list: false,
+                            }"
+                          />
+                        }
+                      </div>
+                    } @else if (si < r.sides[ri]) {
+                      <div class="cs-place" aria-hidden="true"></div>
+                    }
+                  }
+                </div>
+              }
+            </div>
+          </div>
+        }
+      </div>
+    } @else {
+      <div
+        #grid
+        [class]="'cs-square cs-l' + sq.level"
+        [class.cs-list]="sq.list"
+        [class.cs-dashed]="dashed()"
+        [attr.data-level]="sq.level"
+        [style.width.px]="sq.width"
+        [style.height.px]="sq.height"
+        [style.--cs-gap.px]="sq.gap"
+        [style.grid-template-columns]="'repeat(' + sq.cols + ', minmax(0, 1fr))'"
+        [style.grid-template-rows]="'repeat(' + sq.rows + ', minmax(0, 1fr))'"
+      >
+        @for (t of tiles(); track keyOf()(t, $index); let i = $index) {
+          <div class="cs-cell">
+            @if (tile(); as tpl) {
+              <ng-container
+                [ngTemplateOutlet]="tpl.template"
+                [ngTemplateOutletContext]="{
+                  $implicit: t,
+                  index: i,
+                  level: sq.level,
+                  cell: sq.cell,
+                  rowHeight: sq.rowHeight,
+                  list: sq.list,
+                }"
+              />
+            }
+          </div>
+        }
+        @for (i of openPlaces(); track i) {
+          <div class="cs-place" aria-hidden="true"></div>
+        }
+      </div>
+    }
+  `,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			styles: [":host{display:block}.cs-square{display:grid;gap:calc(var(--cs-gap) * var(--cube-square-gap-scale, 1));--cs-radius: var(--cube-square-radius, 20px)}.cs-cell{display:grid;min-width:0;min-height:0}.cs-place{box-sizing:border-box;border:var(--cube-square-place-width, 1.5px) solid var(--cube-square-place, color-mix(in srgb, #dae0d9 55%, transparent));border-radius:var(--cs-radius)}.cs-dashed .cs-place{border-style:dashed;border-color:var(--cube-square-place-dashed, #dae0d9)}.cs-l0{--cs-radius: 28px}.cs-l2{--cs-radius: 16px}.cs-l3{--cs-radius: 12px}.cs-l4{--cs-radius: 9px}.cs-l4 .cs-place{border-width:1px}.cs-turning{display:flex;flex-direction:column;gap:calc(var(--cs-gap) * var(--cube-square-gap-scale, 1));--cs-radius: var(--cube-square-radius, 20px)}.cs-row{position:relative;perspective:1400px;touch-action:pan-y;user-select:none;-webkit-user-select:none;outline:none}.cs-row:focus-visible{outline:2px solid var(--cube-square-focus, #5f9a80);outline-offset:3px;border-radius:var(--cs-radius)}.cs-band{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .38s cubic-bezier(.2,.8,.2,1)}.cs-band.cs-nudging{transition:transform .52s cubic-bezier(.4,0,.2,1)}.cs-band.cs-still{transition:none}.cs-side{position:absolute;inset:0;display:grid;gap:calc(var(--cs-gap) * var(--cube-square-gap-scale, 1));backface-visibility:hidden}.cs-edge{pointer-events:none;position:absolute;top:18%;bottom:18%;right:calc(-1*max(4px,var(--cs-gap) - 2px));z-index:1;width:3px;border-radius:999px;background:var(--cube-square-edge, color-mix(in srgb, #5f9a80 45%, transparent))}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		tiles: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tiles",
+				required: true
+			}]
+		}],
+		view: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "view",
+				required: false
+			}]
+		}],
+		maxSide: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxSide",
+				required: false
+			}]
+		}],
+		listRow: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "listRow",
+				required: false
+			}]
+		}],
+		dashed: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dashed",
+				required: false
+			}]
+		}],
+		keyOf: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "keyOf",
+				required: false
+			}]
+		}],
+		turning: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "turning",
+				required: false
+			}]
+		}],
+		turnBelow: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "turnBelow",
+				required: false
+			}]
+		}],
+		across: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "across",
+				required: false
+			}]
+		}],
+		isOwn: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "isOwn",
+				required: false
+			}]
+		}],
+		nudgeKey: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "nudgeKey",
+				required: false
+			}]
+		}],
+		tile: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => CubeSquareTile), { isSignal: true }]
+		}],
+		grid: [{
+			type: i0.ViewChild,
+			args: ["grid", { isSignal: true }]
+		}]
+	}
+});
+const contextLevelFor = squareLevelFor;
+function contextSquare(count, room, maxSide = 880) {
+	const { cols: n, rows } = gridFor("square", count);
+	const side = Math.max(0, Math.min(room, maxSide));
+	const gap = squareGap(n);
+	const cell = (side - gap * (n - 1)) / n;
+	return {
+		n,
+		side,
+		gap,
+		level: contextLevelFor(cell),
+		open: n * rows - Math.max(0, count)
+	};
+}
+function contextIcon(tile) {
+	if (CUBE_ICON_NAMES.includes(tile.icon)) return tile.icon;
+	if (tile.adds) return "plus";
+	if (tile.icon === "hide") return "shown";
+	return "face";
+}
+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 */ []);
+	enter = output();
+	out = output();
+	done = output();
+	tapped = output();
+	given = inject(CONTEXT_CUBE_SOURCE, { optional: true });
+	givenWords = inject(CONTEXT_CUBE_WORDS, { optional: true });
+	busy = signal(null, ...ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []);
+	again = signal(0, ...ngDevMode ? [{ debugName: "again" }] : /* istanbul ignore next */ []);
+	from = computed(() => {
+		const s = this.source() ?? this.given;
+		if (!s) throw new Error("cube-context: provide CONTEXT_CUBE_SOURCE or pass [source]");
+		return s;
+	}, ...ngDevMode ? [{ debugName: "from" }] : /* istanbul ignore next */ []);
+	where = computed(() => this.path().join("\0"), ...ngDevMode ? [{ debugName: "where" }] : /* istanbul ignore next */ []);
+	level = computed(() => {
+		this.again();
+		return this.from().level(this.held(), this.path());
+	}, ...ngDevMode ? [{ debugName: "level" }] : /* istanbul ignore next */ []);
+	tiles = computed(() => this.level() ?? [], ...ngDevMode ? [{ debugName: "tiles" }] : /* istanbul ignore next */ []);
+	adds = computed(() => this.tiles().some((t) => !!t.adds), ...ngDevMode ? [{ debugName: "adds" }] : /* istanbul ignore next */ []);
+	keyOf = (t) => t.key;
+	inUseWord = computed(() => (this.words() ?? this.givenWords)?.inUse ?? null, ...ngDevMode ? [{ debugName: "inUseWord" }] : /* istanbul ignore next */ []);
+	iconOf = contextIcon;
+	constructor() {
+		effect(() => {
+			if (this.level() === null) untracked(() => this.out.emit());
+		});
+		effect(() => {
+			this.where();
+			this.held();
+			untracked(() => this.busy.set(null));
+		});
+	}
+	async tap(tile, element) {
+		if (this.busy() !== null) return;
+		if (element) this.tapped.emit({
+			tile,
+			element
+		});
+		const held = this.held();
+		const path = this.path();
+		const where = this.where();
+		const here = () => this.held() === held && this.where() === where;
+		this.busy.set(tile.key);
+		try {
+			const picked = await this.from().pick(held, path, tile);
+			if (!here()) return;
+			switch (picked.kind) {
+				case "enter":
+					this.enter.emit(picked.path);
+					break;
+				case "done":
+					this.done.emit(tile);
+					break;
+				case "out": this.out.emit();
+			}
+		} finally {
+			if (here()) this.busy.set(null);
+			this.again.update((n) => n + 1);
+		}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: CubeContext,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.4",
+		type: CubeContext,
+		isStandalone: true,
+		selector: "cube-context",
+		inputs: {
+			held: {
+				classPropertyName: "held",
+				publicName: "held",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			path: {
+				classPropertyName: "path",
+				publicName: "path",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			source: {
+				classPropertyName: "source",
+				publicName: "source",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			words: {
+				classPropertyName: "words",
+				publicName: "words",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			maxSide: {
+				classPropertyName: "maxSide",
+				publicName: "maxSide",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			enter: "enter",
+			out: "out",
+			done: "done",
+			tapped: "tapped"
+		},
+		ngImport: i0,
+		template: `
+    <cube-square
+      [tiles]="tiles()"
+      [dashed]="adds()"
+      [maxSide]="maxSide()"
+      [keyOf]="keyOf"
+      [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>
+          }
+        </button>
+      </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;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;overflow-wrap:anywhere}.cc-t{font-size:17px;font-weight:700;line-height:1.2}.cc-m{font-size:13px;line-height:1.3;color:var(--cube-context-quiet, #5d6a64)}.cc-tick{font-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:26px}.cc-l0 .cc-m{font-size:16px}.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:14px}.cc-l2 .cc-m{font-size:12px}.cc-tile.cc-l3{border-radius:12px;padding:6px 4px;gap:3px}.cc-l3 .cc-t{font-size:12px}.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",
+				type: CubeIcon,
+				selector: "cube-icon",
+				inputs: ["icon", "inUse"]
+			},
+			{
+				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: CubeContext,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "cube-context",
+			imports: [
+				CubeIcon,
+				CubeSquare,
+				CubeSquareTile
+			],
+			template: `
+    <cube-square
+      [tiles]="tiles()"
+      [dashed]="adds()"
+      [maxSide]="maxSide()"
+      [keyOf]="keyOf"
+      [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>
+          }
+        </button>
+      </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;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;overflow-wrap:anywhere}.cc-t{font-size:17px;font-weight:700;line-height:1.2}.cc-m{font-size:13px;line-height:1.3;color:var(--cube-context-quiet, #5d6a64)}.cc-tick{font-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:26px}.cc-l0 .cc-m{font-size:16px}.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:14px}.cc-l2 .cc-m{font-size:12px}.cc-tile.cc-l3{border-radius:12px;padding:6px 4px;gap:3px}.cc-l3 .cc-t{font-size:12px}.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: () => [],
+	propDecorators: {
+		held: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "held",
+				required: true
+			}]
+		}],
+		path: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "path",
+				required: false
+			}]
+		}],
+		source: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "source",
+				required: false
+			}]
+		}],
+		words: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "words",
+				required: false
+			}]
+		}],
+		maxSide: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxSide",
+				required: false
+			}]
+		}],
+		enter: [{
+			type: i0.Output,
+			args: ["enter"]
+		}],
+		out: [{
+			type: i0.Output,
+			args: ["out"]
+		}],
+		done: [{
+			type: i0.Output,
+			args: ["done"]
+		}],
+		tapped: [{
+			type: i0.Output,
+			args: ["tapped"]
+		}]
+	}
+});
+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 };
+
+//# sourceMappingURL=selimssevgi-cube-design-angular.mjs.map