@selimssevgi/cube-design-angular 0.6.1 → 0.7.0

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

@@ -9,16 +9,16 @@ function sizeFor(count) {
 	while (s * s * s < count && s < 7) s++;
 	return s;
 }
-const C30 = Math.cos(Math.PI / 6);
+const C30$1 = 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 ox = n * s * C30$1;
 	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 p = (x, y, z) => [shift[0] + ox + (x - y) * C30$1 * 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",
@@ -53,9 +53,9 @@ 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 s = width / (2 * big * C30$1);
 	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 shift = hinted ? [(big - n) * s * C30$1, (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) => ({
@@ -73,6 +73,350 @@ function drawCube(count, colours, width, options = {}) {
 		stickers
 	};
 }
+const CUBE_ARTS = [
+	"stickers",
+	"blocks",
+	"glass",
+	"ribbons",
+	"dots"
+];
+const isArt = (v) => CUBE_ARTS.includes(v);
+const C30 = Math.cos(Math.PI / 6);
+const MOST = 4;
+function edgeFor(count) {
+	let n = 1;
+	while (n * n * n < count && n < MOST) n++;
+	return n;
+}
+function coloursFor(count, colours, options = {}) {
+	const n = Math.max(1, count);
+	if (options.whole) return Array(n).fill(colours[0] ?? null);
+	const k = colours.length ? (options.rot ?? 0) % colours.length : 0;
+	const turned = colours.slice(k).concat(colours.slice(0, k));
+	return Array.from({ length: n }, (_, i) => turned[i] ?? null);
+}
+function shade(colour, face) {
+	if (face === "top") return `color-mix(in srgb, ${colour} 74%, white)`;
+	if (face === "right") return `color-mix(in srgb, ${colour} 70%, black)`;
+	return colour;
+}
+const fmt = (pts) => pts.map(([x, y]) => `${x.toFixed(1)},${y.toFixed(1)}`).join(" ");
+function projector(n, s, pad = [0, 0]) {
+	const ox = pad[0] + n * s * C30;
+	const oy = pad[1];
+	return (x, y, z) => [ox + (x - y) * C30 * s, oy + n * s + (x + y) * .5 * s - z * s];
+}
+function box(p, a, b) {
+	const [x0, y0, z0] = a;
+	const [x1, y1, z1] = b;
+	return {
+		top: [
+			p(x0, y0, z1),
+			p(x1, y0, z1),
+			p(x1, y1, z1),
+			p(x0, y1, z1)
+		],
+		left: [
+			p(x0, y1, z1),
+			p(x1, y1, z1),
+			p(x1, y1, z0),
+			p(x0, y1, z0)
+		],
+		right: [
+			p(x1, y0, z1),
+			p(x1, y1, z1),
+			p(x1, y1, z0),
+			p(x1, y0, z0)
+		]
+	};
+}
+function backOf(p, n) {
+	return [
+		[
+			p(0, 0, 0),
+			p(n, 0, 0),
+			p(n, n, 0),
+			p(0, n, 0)
+		],
+		[
+			p(0, 0, n),
+			p(n, 0, n),
+			p(n, 0, 0),
+			p(0, 0, 0)
+		],
+		[
+			p(0, 0, n),
+			p(0, n, n),
+			p(0, n, 0),
+			p(0, 0, 0)
+		]
+	];
+}
+function stackOrder(n) {
+	const cells = [];
+	for (let z = 0; z < n; z++) for (let d = 0; d <= 2 * (n - 1); d++) for (let x = 0; x < n; x++) {
+		const y = d - x;
+		if (y >= 0 && y < n) cells.push([
+			x,
+			y,
+			z
+		]);
+	}
+	return cells;
+}
+const nearLast = (a, b) => a[0] + a[1] + a[2] - (b[0] + b[1] + b[2]);
+function frame(width, n, hint) {
+	const big = hint ? n + 1 : n;
+	const s = width / (2 * big * C30);
+	return {
+		s,
+		height: 2 * big * s,
+		pad: hint ? [(big - n) * s * C30, (big - n) * s * 2] : [0, 0],
+		big
+	};
+}
+function hintShapes(n, s) {
+	const b = box(projector(n + 1, s), [
+		0,
+		0,
+		0
+	], [
+		n + 1,
+		n + 1,
+		n + 1
+	]);
+	return [
+		"top",
+		"left",
+		"right"
+	].map((f) => ({
+		points: fmt(b[f]),
+		cls: "hint",
+		fill: null
+	}));
+}
+function drawing(width, height, shapes) {
+	return {
+		width,
+		height: Math.round(height),
+		viewBox: `-2 -2 ${(width + 4).toFixed(1)} ${(height + 4).toFixed(1)}`,
+		shapes
+	};
+}
+function blocks(count, colours, width, hint) {
+	const n = edgeFor(count);
+	const { s, height, pad } = frame(width, n, hint);
+	const p = projector(n, s, pad);
+	const shapes = hint ? hintShapes(n, s) : [];
+	const cells = stackOrder(n).slice(0, Math.max(1, Math.min(count, n ** 3)));
+	if (cells.length < n ** 3) {
+		const b = box(p, [
+			0,
+			0,
+			0
+		], [
+			n,
+			n,
+			n
+		]);
+		for (const f of [
+			"top",
+			"left",
+			"right"
+		]) shapes.push({
+			points: fmt(b[f]),
+			cls: "room",
+			fill: null
+		});
+	}
+	const gap = .07;
+	cells.map((c, i) => ({
+		c,
+		colour: colours[i] ?? null
+	})).sort((a, b) => nearLast(a.c, b.c)).forEach(({ c, colour }) => {
+		const b = box(p, c.map((v) => v + gap), c.map((v) => v + 1 - gap));
+		for (const f of [
+			"top",
+			"left",
+			"right"
+		]) shapes.push({
+			points: fmt(b[f]),
+			cls: colour ? `block ${f}` : `block unknown ${f}`,
+			fill: colour ? shade(colour, f) : null
+		});
+	});
+	return drawing(width, height, shapes);
+}
+function glass(count, colours, width, hint) {
+	const n = edgeFor(count);
+	const { s, height, pad } = frame(width, n, hint);
+	const p = projector(n, s, pad);
+	const shapes = hint ? hintShapes(n, s) : [];
+	for (const back of backOf(p, n)) shapes.push({
+		points: fmt(back),
+		cls: "glass-back",
+		fill: null
+	});
+	const inset = .24;
+	stackOrder(n).slice(0, Math.max(1, Math.min(count, n ** 3))).map((c, i) => ({
+		c,
+		colour: colours[i] ?? null
+	})).sort((a, b) => nearLast(a.c, b.c)).forEach(({ c, colour }) => {
+		const b = box(p, c.map((v) => v + inset), c.map((v) => v + 1 - inset));
+		for (const f of [
+			"top",
+			"left",
+			"right"
+		]) shapes.push({
+			points: fmt(b[f]),
+			cls: colour ? `block ${f}` : `block unknown ${f}`,
+			fill: colour ? shade(colour, f) : null
+		});
+	});
+	const front = box(p, [
+		0,
+		0,
+		0
+	], [
+		n,
+		n,
+		n
+	]);
+	for (const f of [
+		"top",
+		"left",
+		"right"
+	]) shapes.push({
+		points: fmt(front[f]),
+		cls: `glass ${f}`,
+		fill: null
+	});
+	return drawing(width, height, shapes);
+}
+function bandsOf(colours) {
+	const counts = /* @__PURE__ */ new Map();
+	for (const c of colours) counts.set(c, (counts.get(c) ?? 0) + 1);
+	const known = [...counts.entries()].filter(([c]) => c !== null);
+	const unknown = counts.get(null);
+	return [...known, ...unknown ? [[null, unknown]] : []].map(([colour, k]) => ({
+		colour,
+		share: k / colours.length
+	}));
+}
+function ribbons(colours, width, hint) {
+	const n = 1;
+	const { s, height, pad } = frame(width, n, hint);
+	const p = projector(n, s, pad);
+	const shapes = hint ? hintShapes(n, s) : [];
+	let x = 0;
+	const bands = bandsOf(colours);
+	bands.forEach(({ colour, share }, i) => {
+		const x1 = i === bands.length - 1 ? 1 : x + share;
+		const b = box(p, [
+			x,
+			0,
+			0
+		], [
+			x1,
+			1,
+			1
+		]);
+		for (const f of ["top", "left"]) shapes.push({
+			points: fmt(b[f]),
+			cls: colour ? `band ${f}` : `band unknown ${f}`,
+			fill: colour ? shade(colour, f) : null
+		});
+		x = x1;
+	});
+	const last = bands[bands.length - 1]?.colour ?? null;
+	const end = box(p, [
+		0,
+		0,
+		0
+	], [
+		1,
+		1,
+		1
+	]).right;
+	shapes.push({
+		points: fmt(end),
+		cls: last ? "band right" : "band unknown right",
+		fill: last ? shade(last, "right") : null
+	});
+	return drawing(width, height, shapes);
+}
+function dot(p, f, u, v, r, n) {
+	const pts = [];
+	for (let i = 0; i < 20; i++) {
+		const a = i / 20 * 2 * Math.PI;
+		const du = u + r * Math.cos(a);
+		const dv = v + r * Math.sin(a);
+		if (f === "top") pts.push(p(du, dv, n));
+		else if (f === "left") pts.push(p(du, n, n - dv));
+		else pts.push(p(n, du, n - dv));
+	}
+	return pts;
+}
+function dots(count, colours, width, hint) {
+	let m = 1;
+	while (3 * m * m < count && m < MOST) m++;
+	const n = 1;
+	const { s, height, pad } = frame(width, n, hint);
+	const p = projector(n, s, pad);
+	const shapes = hint ? hintShapes(n, s) : [];
+	const body = box(p, [
+		0,
+		0,
+		0
+	], [
+		1,
+		1,
+		1
+	]);
+	for (const f of [
+		"top",
+		"left",
+		"right"
+	]) shapes.push({
+		points: fmt(body[f]),
+		cls: `side ${f}`,
+		fill: null
+	});
+	const cell = 1 / m;
+	let i = 0;
+	for (const f of [
+		"top",
+		"left",
+		"right"
+	]) for (let a = 0; a < m; a++) for (let b = 0; b < m; b++) {
+		const pts = dot(p, f, (b + .5) * cell, (a + .5) * cell, cell * .34, n);
+		if (i < count) {
+			const colour = colours[i] ?? null;
+			shapes.push({
+				points: fmt(pts),
+				cls: colour ? `dot ${f}` : `dot unknown ${f}`,
+				fill: colour ? shade(colour, f) : null
+			});
+		} else shapes.push({
+			points: fmt(pts),
+			cls: "place",
+			fill: null
+		});
+		i++;
+	}
+	return drawing(width, height, shapes);
+}
+function drawArt(art, count, colours, width, options = {}) {
+	const n = Math.max(1, count);
+	const cs = coloursFor(n, colours, options);
+	const hint = !!options.hint && n < 9;
+	switch (art) {
+		case "blocks": return blocks(n, cs, width, hint);
+		case "glass": return glass(n, cs, width, hint);
+		case "ribbons": return ribbons(cs, width, hint);
+		case "dots": return dots(n, cs, width, hint);
+	}
+}
 var CubePicture = class CubePicture {
 	count = input(1, ...ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []);
 	colours = input([], ...ngDevMode ? [{ debugName: "colours" }] : /* istanbul ignore next */ []);
@@ -80,11 +424,20 @@ var CubePicture = class CubePicture {
 	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 */ []);
+	art = input("stickers", ...ngDevMode ? [{ debugName: "art" }] : /* 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 */ []);
+	artDrawing = computed(() => {
+		const art = this.art();
+		return drawArt(art === "stickers" ? "blocks" : art, this.count(), this.colours(), this.width(), {
+			hint: this.hint(),
+			whole: this.whole(),
+			rot: this.rot()
+		});
+	}, ...ngDevMode ? [{ debugName: "artDrawing" }] : /* istanbul ignore next */ []);
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
 		version: "22.2.4",
@@ -141,34 +494,57 @@ var CubePicture = class CubePicture {
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
+			},
+			art: {
+				classPropertyName: "art",
+				publicName: "art",
+				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>
+    @if (art() === 'stickers') {
+      @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>
+    } @else {
+      @let a = artDrawing();
+      <svg
+        class="art"
+        [attr.viewBox]="a.viewBox"
+        [attr.width]="a.width"
+        [attr.height]="a.height"
+        [attr.data-art]="art()"
+        aria-hidden="true"
+      >
+        @for (q of a.shapes; track $index) {
+          <polygon [attr.points]="q.points" [attr.class]="q.cls" [style.fill]="q.fill" />
+        }
+      </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"],
+		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)}.art polygon{stroke-linejoin:round}.art .room{fill:none;stroke:var(--cube-hint, #87938c);stroke-width:1;stroke-dasharray:3 3;opacity:var(--cube-hint-opacity, .5)}.art .block,.art .band,.art .dot{stroke:var(--cube-art-edge, rgba(31, 45, 39, .35));stroke-width:.8}.art .dot{stroke-width:.6}.art .unknown{fill:var(--cube-unknown, #e3e7e1);stroke:var(--cube-art-unknown-edge, #87938c);stroke-dasharray:2 2}.art .place{fill:none;stroke:var(--cube-art-unknown-edge, #87938c);stroke-width:.8;stroke-dasharray:2 2}.art .glass-back{fill:var(--cube-glass-back, rgba(42, 48, 45, .04));stroke:var(--cube-glass-edge, rgba(42, 48, 45, .18));stroke-width:.8}.art .glass{fill:var(--cube-glass, rgba(95, 154, 128, .06));stroke:var(--cube-glass-edge-front, rgba(42, 48, 45, .5));stroke-width:1.2}.art .glass.top{fill:var(--cube-glass-top, rgba(255, 255, 255, .35))}\n"],
 		changeDetection: i0.ChangeDetectionStrategy.OnPush
 	});
 };
@@ -182,30 +558,46 @@ i0.ɵɵngDeclareClassMetadata({
 		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>
+    @if (art() === 'stickers') {
+      @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>
+    } @else {
+      @let a = artDrawing();
+      <svg
+        class="art"
+        [attr.viewBox]="a.viewBox"
+        [attr.width]="a.width"
+        [attr.height]="a.height"
+        [attr.data-art]="art()"
+        aria-hidden="true"
+      >
+        @for (q of a.shapes; track $index) {
+          <polygon [attr.points]="q.points" [attr.class]="q.cls" [style.fill]="q.fill" />
+        }
+      </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"]
+			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)}.art polygon{stroke-linejoin:round}.art .room{fill:none;stroke:var(--cube-hint, #87938c);stroke-width:1;stroke-dasharray:3 3;opacity:var(--cube-hint-opacity, .5)}.art .block,.art .band,.art .dot{stroke:var(--cube-art-edge, rgba(31, 45, 39, .35));stroke-width:.8}.art .dot{stroke-width:.6}.art .unknown{fill:var(--cube-unknown, #e3e7e1);stroke:var(--cube-art-unknown-edge, #87938c);stroke-dasharray:2 2}.art .place{fill:none;stroke:var(--cube-art-unknown-edge, #87938c);stroke-width:.8;stroke-dasharray:2 2}.art .glass-back{fill:var(--cube-glass-back, rgba(42, 48, 45, .04));stroke:var(--cube-glass-edge, rgba(42, 48, 45, .18));stroke-width:.8}.art .glass{fill:var(--cube-glass, rgba(95, 154, 128, .06));stroke:var(--cube-glass-edge-front, rgba(42, 48, 45, .5));stroke-width:1.2}.art .glass.top{fill:var(--cube-glass-top, rgba(255, 255, 255, .35))}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -256,9 +648,93 @@ i0.ɵɵngDeclareClassMetadata({
 				alias: "rot",
 				required: false
 			}]
+		}],
+		art: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "art",
+				required: false
+			}]
 		}]
 	}
 });
+function artFor(choices, app, start = "stickers") {
+	return choices.apps?.[app] ?? choices.all ?? start;
+}
+function chooseArt(choices, app, art) {
+	if (app === null) return {
+		all: art,
+		apps: {}
+	};
+	const apps = { ...choices.apps ?? {} };
+	if (art === null) delete apps[app];
+	else apps[app] = art;
+	return {
+		all: choices.all ?? null,
+		apps
+	};
+}
+function readArtChoices(text) {
+	if (!text) return {};
+	try {
+		const raw = JSON.parse(text);
+		const apps = {};
+		for (const [k, v] of Object.entries(raw.apps ?? {})) if (isArt(v)) apps[k] = v;
+		return {
+			all: isArt(raw.all) ? raw.all : null,
+			apps
+		};
+	} catch {
+		return {};
+	}
+}
+const ART_CHOICES_KEY = "cube-design.art";
+var CubeArtChoices = class CubeArtChoices {
+	choices = signal(readArtChoices(read()), ...ngDevMode ? [{ debugName: "choices" }] : /* istanbul ignore next */ []);
+	artFor(app, start = "stickers") {
+		return artFor(this.choices(), app, start);
+	}
+	choose(app, art) {
+		const next = chooseArt(this.choices(), app, art);
+		this.choices.set(next);
+		try {
+			localStorage.setItem(ART_CHOICES_KEY, JSON.stringify(next));
+		} catch {}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: CubeArtChoices,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: CubeArtChoices,
+		providedIn: "root"
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: CubeArtChoices,
+	decorators: [{
+		type: Injectable,
+		args: [{ providedIn: "root" }]
+	}]
+});
+function read() {
+	try {
+		return typeof localStorage === "undefined" ? null : localStorage.getItem(ART_CHOICES_KEY);
+	} catch {
+		return null;
+	}
+}
 const CUBE_HOLD_MS = 520;
 const CUBE_HOLD_SLOP = 10;
 var CubeHold = class CubeHold {
@@ -1715,6 +2191,21 @@ function tellLevel(words) {
 		tile("not-known", null, w?.notKnown, "not-known")
 	];
 }
+function artLevel(now, look, words, arts = CUBE_ARTS) {
+	return arts.map((a) => ({
+		key: "art:" + a,
+		title: words.arts?.[a]?.title ?? a,
+		line: a === now ? null : words.arts?.[a]?.line ?? null,
+		icon: "art",
+		inUse: a === now,
+		data: a,
+		art: {
+			art: a,
+			count: Math.max(1, look.count),
+			colours: look.colours
+		}
+	}));
+}
 function insideOf(source, piece) {
 	const seen = /* @__PURE__ */ new Set();
 	const walk = [...source.partsOf(piece)];
@@ -2044,6 +2535,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 */ []);
+	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 */ []);
 	least = input("room", ...ngDevMode ? [{ debugName: "least" }] : /* istanbul ignore next */ []);
@@ -2324,6 +2816,13 @@ var CubeSquare = class CubeSquare {
 				isRequired: false,
 				transformFunction: null
 			},
+			align: {
+				classPropertyName: "align",
+				publicName: "align",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			listRow: {
 				classPropertyName: "listRow",
 				publicName: "listRow",
@@ -2409,6 +2908,7 @@ var CubeSquare = class CubeSquare {
       <div
         class="cs-turning"
         [class]="'cs-turning cs-l' + sq.level"
+        [class.cs-start]="align() === 'start'"
         [class.cs-dashed]="dashed()"
         [attr.data-level]="sq.level"
         [style.width.px]="sq.width"
@@ -2480,6 +2980,7 @@ var CubeSquare = class CubeSquare {
         #grid
         [class]="'cs-square cs-l' + sq.level"
         [class.cs-list]="sq.list"
+        [class.cs-start]="align() === 'start'"
         [class.cs-dashed]="dashed()"
         [attr.data-level]="sq.level"
         [style.width.px]="sq.width"
@@ -2512,7 +3013,7 @@ var CubeSquare = class CubeSquare {
     }
   `,
 		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"],
+		styles: [":host{display:block}.cs-square,.cs-turning{margin-inline:auto}.cs-square.cs-start,.cs-turning.cs-start{margin-inline:0}.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,
@@ -2542,6 +3043,7 @@ i0.ɵɵngDeclareClassMetadata({
       <div
         class="cs-turning"
         [class]="'cs-turning cs-l' + sq.level"
+        [class.cs-start]="align() === 'start'"
         [class.cs-dashed]="dashed()"
         [attr.data-level]="sq.level"
         [style.width.px]="sq.width"
@@ -2613,6 +3115,7 @@ i0.ɵɵngDeclareClassMetadata({
         #grid
         [class]="'cs-square cs-l' + sq.level"
         [class.cs-list]="sq.list"
+        [class.cs-start]="align() === 'start'"
         [class.cs-dashed]="dashed()"
         [attr.data-level]="sq.level"
         [style.width.px]="sq.width"
@@ -2645,7 +3148,7 @@ i0.ɵɵngDeclareClassMetadata({
     }
   `,
 			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"]
+			styles: [":host{display:block}.cs-square,.cs-turning{margin-inline:auto}.cs-square.cs-start,.cs-turning.cs-start{margin-inline:0}.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: () => [],
@@ -2674,6 +3177,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		align: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "align",
+				required: false
+			}]
+		}],
 		listRow: [{
 			type: i0.Input,
 			args: [{
@@ -2776,6 +3287,9 @@ function contextIcon(tile) {
 	if (tile.icon === "hide") return "shown";
 	return "face";
 }
+function contextArtWidth(level) {
+	return level <= 0 ? 72 : level <= 2 ? 30 : 22;
+}
 var ContextAttrs = class ContextAttrs {
 	ccAttrs = input(...ngDevMode ? [void 0, { debugName: "ccAttrs" }] : /* istanbul ignore next */ []);
 	el = inject(ElementRef);
@@ -2864,6 +3378,7 @@ var CubeContext = class CubeContext {
 	keyOf = (t) => t.key;
 	inUseWord = computed(() => (this.words() ?? this.givenWords)?.inUse ?? null, ...ngDevMode ? [{ debugName: "inUseWord" }] : /* istanbul ignore next */ []);
 	iconOf = contextIcon;
+	artWidth = contextArtWidth;
 	constructor() {
 		effect(() => {
 			if (this.level() === null) untracked(() => this.out.emit());
@@ -2999,7 +3514,17 @@ var CubeContext = class CubeContext {
             [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 (t.art; as a) {
+              <span class="cc-icon cc-art"
+                ><cube-picture
+                  [art]="a.art"
+                  [count]="a.count"
+                  [colours]="$any(a.colours)"
+                  [width]="artWidth(level)"
+              /></span>
+            } @else {
+              <span class="cc-icon"><cube-icon [icon]="iconOf(t)" [inUse]="!!t.inUse" /></span>
+            }
             @if (level < 4) {
               <span class="cc-t">{{ t.title }}</span>
             }
@@ -3043,6 +3568,20 @@ var CubeContext = class CubeContext {
 				selector: "cube-icon",
 				inputs: ["icon", "inUse"]
 			},
+			{
+				kind: "component",
+				type: CubePicture,
+				selector: "cube-picture",
+				inputs: [
+					"count",
+					"colours",
+					"width",
+					"hint",
+					"whole",
+					"rot",
+					"art"
+				]
+			},
 			{
 				kind: "component",
 				type: CubeSquare,
@@ -3051,6 +3590,7 @@ var CubeContext = class CubeContext {
 					"tiles",
 					"view",
 					"maxSide",
+					"align",
 					"listRow",
 					"dashed",
 					"least",
@@ -3089,6 +3629,7 @@ i0.ɵɵngDeclareClassMetadata({
 			selector: "cube-context",
 			imports: [
 				CubeIcon,
+				CubePicture,
 				CubeSquare,
 				CubeSquareTile,
 				ContextAttrs
@@ -3116,7 +3657,17 @@ i0.ɵɵngDeclareClassMetadata({
             [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 (t.art; as a) {
+              <span class="cc-icon cc-art"
+                ><cube-picture
+                  [art]="a.art"
+                  [count]="a.count"
+                  [colours]="$any(a.colours)"
+                  [width]="artWidth(level)"
+              /></span>
+            } @else {
+              <span class="cc-icon"><cube-icon [icon]="iconOf(t)" [inUse]="!!t.inUse" /></span>
+            }
             @if (level < 4) {
               <span class="cc-t">{{ t.title }}</span>
             }
@@ -3384,7 +3935,8 @@ var CubeLoading = class CubeLoading {
 					"width",
 					"hint",
 					"whole",
-					"rot"
+					"rot",
+					"art"
 				]
 			},
 			{
@@ -3395,6 +3947,7 @@ var CubeLoading = class CubeLoading {
 					"tiles",
 					"view",
 					"maxSide",
+					"align",
 					"listRow",
 					"dashed",
 					"least",
@@ -3764,6 +4317,6 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{ providedIn: "root" }]
 	}]
 });
-export { CONTEXT_CUBE_SOURCE, CONTEXT_CUBE_WORDS, CONTEXT_LAST_PARTS, CONTEXT_PART_ORDER, CUBE_CARRY_CLASSES, CUBE_CARRY_MOVE, CUBE_DROP_OUT, CUBE_HOLD_MS, CUBE_HOLD_SLOP, CUBE_ICON_NAMES, CUBE_LOADING_COLOURS, CUBE_LOADING_LEVELS, CUBE_LOADING_STEP_MS, CUBE_LOADING_STICKERS, CUBE_LOADING_WAYS, CUBE_LOADING_WIDTH, CUBE_PINCH_APART, CUBE_PINCH_TOGETHER, CUBE_WHEEL_QUIET_MS, CubeCarry, CubeContext, CubeHold, CubeIcon, CubeLoading, CubePicture, CubePinch, CubeSquare, CubeSquareTile, 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, bringLevel, bringOf, contextIcon, contextLevelFor, contextOf, contextSquare, cubeIconCells, directionWords, drawCube, environmentOf, errorLine, findJustSaved, gridFor, hideLevel, insideOf, isView, loadingStickers, loadingWayFor, moveBefore, namesLevel, orderLevel, orderOf, orderParts, partsLevel, placesOf, provideReportDiagnostics, refusalOf, reportContext, reportInterceptor, reportRefusal, reportRequest, routePattern, scrubbedPath, sizeFor, sortDirectionsLevel, sortItems, sortLevel, squareGap, squareLayout, squareLeast, squareLevelFor, squareTall, startsWheelGesture, stillStep, technicalLines, tellLevel, turningFront, turningRows, viewLevel, 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_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, 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, whereLevel, wouldLoop };
 
 //# sourceMappingURL=selimssevgi-cube-design-angular.mjs.map