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

package/CHANGELOG.md

@@ -0,0 +1,6 @@
+# changelog
+
+## 0.1.0
+
+- `drawCube`, `sizeFor` and their types: the isometric cube of small cubes, moved from cubes (`core/drawing/cube-drawing.ts`), the same file mosaic copied.
+- `cube-picture` (`CubePicture`): the cube picture, its look from css variables; `tokens/light.css` (cubes, anlat) and `tokens/dark.css` (mosaic) set them.

package/README.md

@@ -1,3 +1,65 @@
-# Temporary Holding Version
+# @selimssevgi/cube-design-angular
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+cube design in angular. cube design is a way of looking where a piece sits on several groupings at
+once and every piece can open as a cube of its own (https://cube-design.selimssevgi.com). this
+package holds the pieces of it that anlat, mosaic and cubes found the same answer for, so a
+solution found in one app is used by all.
+
+it holds only what has settled. what is still being discovered stays in each app until two apps use
+it and its cube design decision is kept; then it moves in here.
+
+## install
+
+```shell
+npm install @selimssevgi/cube-design-angular@0.1.0 --save-exact
+```
+
+pin the exact version: a new version changes nothing in an app until that app takes it in its own
+PR. it needs angular 22.
+
+## the cube picture
+
+```ts
+import { CubePicture } from '@selimssevgi/cube-design-angular';
+
+@Component({
+  imports: [CubePicture],
+  template: `<cube-picture [count]="8" [colours]="colours()" [width]="96" [hint]="true" />`,
+})
+```
+
+| input     | what it is                                                                    |
+| --------- | ----------------------------------------------------------------------------- |
+| `count`   | how many pieces; the cube is the smallest n × n × n that holds them (up to 7) |
+| `colours` | the stickers' colours in order; `null` is a sticker not known yet, drawn pale |
+| `width`   | the width in pixels (64)                                                      |
+| `hint`    | while small, the bigger cube it can grow into, faint and dashed               |
+| `whole`   | one colour on every sticker, as a value is drawn                              |
+| `rot`     | how many times it was turned; shifts the colours round                        |
+
+its look comes from css variables, so each app keeps its own dialect. without any it draws in the
+light dialect. add one of the two files to the app's global styles (`angular.json` › `styles`):
+
+```json
+"styles": ["node_modules/@selimssevgi/cube-design-angular/tokens/dark.css", "src/styles.css"]
+```
+
+or set the variables yourself: `--cube-top`, `--cube-left`, `--cube-right`, `--cube-edge`,
+`--cube-edge-width`, `--cube-sticker-edge`, `--cube-unknown`, `--cube-unknown-edge`, `--cube-hint`,
+`--cube-hint-opacity`. a dark mode is the same variables set again under
+`@media (prefers-color-scheme: dark)`.
+
+## the drawing alone
+
+`drawCube(count, colours, width, { hint, whole, rot })` returns the polygons as svg points, and
+`sizeFor(count)` the side of the smallest cube that holds `count`. they are plain functions, for a
+canvas or a picture of your own.
+
+## rules this package keeps
+
+- no words: it never says anything to a person. every line comes from the app, in the app's language.
+- no tailwind classes: tailwind only builds the classes it finds in an app's own code, so they would
+  do nothing here. plain css and variables.
+- the code's words (cube, piece, kind, value, placement); each app keeps its own on screen.
+
+what changed in each version is in `CHANGELOG.md`.

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

@@ -0,0 +1,260 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, input } from "@angular/core";
+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
+			}]
+		}]
+	}
+});
+export { CubePicture, drawCube, sizeFor };
+
+//# sourceMappingURL=selimssevgi-cube-design-angular.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"selimssevgi-cube-design-angular.mjs","names":[],"sources":["../../../projects/cube-design-angular/src/lib/drawing/cube-drawing.ts","../../../projects/cube-design-angular/src/lib/cube-picture/cube-picture.ts"],"sourcesContent":["/**\n * drawing a cube of small cubes in isometric view: the left, right and top faces, each split into\n * n × n stickers. a sticker is coloured by a piece, or pale while nothing is known for it.\n *\n * the same projection anlat, mosaic and cubes drew by hand before this package (cube design,\n * `07-visual.md`). pure functions, no angular: they can be used anywhere.\n */\n\n/** The side of the smallest cube that holds this many pieces, up to 7 × 7 × 7. */\nexport function sizeFor(count: number): number {\n  let s = 1;\n  while (s * s * s < count && s < 7) s++;\n  return s;\n}\n\nexport type Face = 'top' | 'left' | 'right';\n\nexport interface Sticker {\n  face: Face;\n  /** The sticker's square, as SVG points. */\n  outer: string;\n  /** The coloured inset inside it. */\n  inner: string;\n  colour: string | null;\n}\n\nexport interface Drawing {\n  width: number;\n  height: number;\n  viewBox: string;\n  /** The faint bigger cube it can grow into, as dashed outlines. */\n  hint: string[];\n  stickers: Sticker[];\n}\n\nexport interface DrawOptions {\n  /** Show the next size as a faint cube behind (only while it is small). */\n  hint?: boolean;\n  /** A value: one colour on every sticker. */\n  whole?: boolean;\n  /** How many times it has been turned: shifts the colours round the stickers. */\n  rot?: number;\n}\n\nconst C30 = Math.cos(Math.PI / 6);\ntype Point = [number, number];\n\nfunction poly(pts: Point[], k: number): string {\n  const cx = pts.reduce((a, q) => a + q[0], 0) / pts.length;\n  const cy = pts.reduce((a, q) => a + q[1], 0) / pts.length;\n  return pts\n    .map(([x, y]) => `${(cx + (x - cx) * k).toFixed(1)},${(cy + (y - cy) * k).toFixed(1)}`)\n    .join(' ');\n}\n\nfunction squares(n: number, s: number, shift: Point): { face: Face; pts: Point[] }[] {\n  const ox = n * s * C30;\n  const oy = n * s;\n  const p = (x: number, y: number, z: number): Point => [\n    shift[0] + ox + (x - y) * C30 * s,\n    shift[1] + oy + (x + y) * 0.5 * s - z * s,\n  ];\n  const out: { face: Face; pts: Point[] }[] = [];\n  for (let a = 0; a < n; a++)\n    for (let b = n - 1; b >= 0; b--)\n      out.push({\n        face: 'left',\n        pts: [p(a, n, b + 1), p(a + 1, n, b + 1), p(a + 1, n, b), p(a, n, b)],\n      });\n  for (let a = 0; a < n; a++)\n    for (let b = n - 1; b >= 0; b--)\n      out.push({\n        face: 'right',\n        pts: [p(n, a, b + 1), p(n, a + 1, b + 1), p(n, a + 1, b), p(n, a, b)],\n      });\n  for (let a = 0; a < n; a++)\n    for (let b = 0; b < n; b++)\n      out.push({\n        face: 'top',\n        pts: [p(a, b, n), p(a + 1, b, n), p(a + 1, b + 1, n), p(a, b + 1, n)],\n      });\n  return out;\n}\n\n/** A cube for `count` pieces, `width` wide, coloured by `colours` in sticker order. */\nexport function drawCube(\n  count: number,\n  colours: (string | null)[],\n  width: number,\n  options: DrawOptions = {},\n): Drawing {\n  const n = sizeFor(Math.max(1, count));\n  const hinted = !!options.hint && count < 9;\n  const big = hinted ? n + 1 : n;\n  const s = width / (2 * big * C30);\n  const hint = hinted ? squares(big, s, [0, 0]).map((q) => poly(q.pts, 0.86)) : [];\n  const shift: Point = hinted ? [(big - n) * s * C30, (big - n) * s * 2] : [0, 0];\n  const k = colours.length ? (options.rot ?? 0) % colours.length : 0;\n  const turned = colours.slice(k).concat(colours.slice(0, k));\n  const stickers = squares(n, s, shift).map((q, i) => ({\n    face: q.face,\n    outer: poly(q.pts, 1),\n    inner: poly(q.pts, 0.86),\n    colour: options.whole ? (colours[0] ?? null) : (turned[i] ?? null),\n  }));\n  const height = 2 * big * s;\n  return {\n    width,\n    height: Math.round(height),\n    viewBox: `-2 -2 ${(width + 4).toFixed(1)} ${(height + 4).toFixed(1)}`,\n    hint,\n    stickers,\n  };\n}\n","import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { drawCube } from '../drawing/cube-drawing';\n\n/**\n * a cube of small cubes, one per piece: coloured where something is known, pale where not.\n *\n * its look comes from css variables, so each app keeps its own dialect (the light one of cubes and\n * anlat, the dark one of mosaic). every variable has a light fallback, so it draws without any;\n * `tokens/light.css` and `tokens/dark.css` set them all.\n */\n@Component({\n  selector: 'cube-picture',\n  template: `\n    @let d = drawing();\n    <svg\n      [attr.viewBox]=\"d.viewBox\"\n      [attr.width]=\"d.width\"\n      [attr.height]=\"d.height\"\n      aria-hidden=\"true\"\n    >\n      @for (q of d.hint; track $index) {\n        <polygon class=\"hint\" [attr.points]=\"q\" />\n      }\n      @for (q of d.stickers; track $index) {\n        <polygon [attr.points]=\"q.outer\" [attr.class]=\"'side ' + q.face\" />\n      }\n      @for (q of d.stickers; track $index) {\n        <polygon\n          [attr.points]=\"q.inner\"\n          [attr.class]=\"q.colour ? 'sticker' : 'sticker unknown'\"\n          [attr.fill]=\"q.colour\"\n        />\n      }\n    </svg>\n  `,\n  styles: `\n    :host {\n      display: inline-block;\n      line-height: 0;\n    }\n    svg {\n      overflow: visible;\n    }\n    .hint {\n      fill: none;\n      stroke: var(--cube-hint, #87938c);\n      stroke-width: 1;\n      stroke-dasharray: 3 3;\n      opacity: var(--cube-hint-opacity, 0.5);\n    }\n    .side {\n      stroke: var(--cube-edge, #cdd8d0);\n      stroke-width: var(--cube-edge-width, 0.6);\n    }\n    .top {\n      fill: var(--cube-top, #f9fbf8);\n    }\n    .left {\n      fill: var(--cube-left, #e9eee9);\n    }\n    .right {\n      fill: var(--cube-right, #dfe6e0);\n    }\n    .sticker {\n      stroke: var(--cube-sticker-edge, rgba(31, 45, 39, 0.28));\n      stroke-width: 1;\n    }\n    .unknown {\n      fill: var(--cube-unknown, #e3e7e1);\n      stroke: var(--cube-unknown-edge, none);\n    }\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CubePicture {\n  /** how many pieces: the cube is the smallest n × n × n that holds them. */\n  readonly count = input(1);\n  /** the stickers' colours in order; null is a sticker not known yet. */\n  readonly colours = input<(string | null)[]>([]);\n  /** the width in pixels. */\n  readonly width = input(64);\n  /** show the bigger cube it can grow into, faintly, while it is small. */\n  readonly hint = input(false);\n  /** one colour on every sticker (a value). */\n  readonly whole = input(false);\n  /** how many times it was turned: shifts the colours round the stickers. */\n  readonly rot = input(0);\n\n  protected readonly drawing = computed(() =>\n    drawCube(this.count(), this.colours(), this.width(), {\n      hint: this.hint(),\n      whole: this.whole(),\n      rot: this.rot(),\n    }),\n  );\n}\n"],"mappings":";;AASA,SAAgB,QAAQ,OAAa;CACnC,IAAI,IAAI;CACR,OAAO,IAAI,IAAI,IAAI,SAAS,IAAI,GAAG;CACnC,OAAO;AACT;AA+BA,MAAM,MAAM,KAAK,IAAI,KAAK,KAAK,CAAC;AAGhC,SAAS,KAAK,KAAc,GAAS;CACnC,MAAM,KAAK,IAAI,QAAQ,GAAG,MAAM,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI;CACnD,MAAM,KAAK,IAAI,QAAQ,GAAG,MAAM,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI;CACnD,OAAO,IACJ,KAAK,CAAC,GAAG,OAAO,IAAI,MAAM,IAAI,MAAM,EAAA,CAAG,QAAQ,CAAC,EAAC,IAAK,MAAM,IAAI,MAAM,EAAA,CAAG,QAAQ,CAAC,GAAG,CAAC,CACtF,KAAK,GAAG;AACb;AAEA,SAAS,QAAQ,GAAW,GAAW,OAAY;CACjD,MAAM,KAAK,IAAI,IAAI;CACnB,MAAM,KAAK,IAAI;CACf,MAAM,KAAK,GAAW,GAAW,MAAqB,CACpD,MAAM,KAAK,MAAM,IAAI,KAAK,MAAM,GAChC,MAAM,KAAK,MAAM,IAAI,KAAK,KAAM,IAAI,IAAI,CACzC;CACD,MAAM,MAAsC,CAAA;CAC5C,KAAK,IAAI,IAAI,GAAG,IAAI,GAAG,KACrB,KAAK,IAAI,IAAI,IAAI,GAAG,KAAK,GAAG,KAC1B,IAAI,KAAK;EACP,MAAM;EACN,KAAK;GAAC,EAAE,GAAG,GAAG,IAAI,CAAC;GAAG,EAAE,IAAI,GAAG,GAAG,IAAI,CAAC;GAAG,EAAE,IAAI,GAAG,GAAG,CAAC;GAAG,EAAE,GAAG,GAAG,CAAC;EAAC;CACrE,CAAA;CACL,KAAK,IAAI,IAAI,GAAG,IAAI,GAAG,KACrB,KAAK,IAAI,IAAI,IAAI,GAAG,KAAK,GAAG,KAC1B,IAAI,KAAK;EACP,MAAM;EACN,KAAK;GAAC,EAAE,GAAG,GAAG,IAAI,CAAC;GAAG,EAAE,GAAG,IAAI,GAAG,IAAI,CAAC;GAAG,EAAE,GAAG,IAAI,GAAG,CAAC;GAAG,EAAE,GAAG,GAAG,CAAC;EAAC;CACrE,CAAA;CACL,KAAK,IAAI,IAAI,GAAG,IAAI,GAAG,KACrB,KAAK,IAAI,IAAI,GAAG,IAAI,GAAG,KACrB,IAAI,KAAK;EACP,MAAM;EACN,KAAK;GAAC,EAAE,GAAG,GAAG,CAAC;GAAG,EAAE,IAAI,GAAG,GAAG,CAAC;GAAG,EAAE,IAAI,GAAG,IAAI,GAAG,CAAC;GAAG,EAAE,GAAG,IAAI,GAAG,CAAC;EAAC;CACrE,CAAA;CACL,OAAO;AACT;AAGA,SAAgB,SACd,OACA,SACA,OACA,UAAuB,CAAA,GAAE;CAEzB,MAAM,IAAI,QAAQ,KAAK,IAAI,GAAG,KAAK,CAAC;CACpC,MAAM,SAAS,CAAC,CAAC,QAAQ,QAAQ,QAAQ;CACzC,MAAM,MAAM,SAAS,IAAI,IAAI;CAC7B,MAAM,IAAI,SAAS,IAAI,MAAM;CAC7B,MAAM,OAAO,SAAS,QAAQ,KAAK,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,MAAM,KAAK,EAAE,KAAK,GAAI,CAAC,IAAI,CAAA;CAC9E,MAAM,QAAe,SAAS,EAAE,MAAM,KAAK,IAAI,MAAM,MAAM,KAAK,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC;CAC9E,MAAM,IAAI,QAAQ,UAAU,QAAQ,OAAO,KAAK,QAAQ,SAAS;CACjE,MAAM,SAAS,QAAQ,MAAM,CAAC,CAAC,CAAC,OAAO,QAAQ,MAAM,GAAG,CAAC,CAAC;CAC1D,MAAM,WAAW,QAAQ,GAAG,GAAG,KAAK,CAAC,CAAC,KAAK,GAAG,OAAO;EACnD,MAAM,EAAE;EACR,OAAO,KAAK,EAAE,KAAK,CAAC;EACpB,OAAO,KAAK,EAAE,KAAK,GAAI;EACvB,QAAQ,QAAQ,QAAS,QAAQ,MAAM,OAAS,OAAO,MAAM;CAC9D,EAAC;CACF,MAAM,SAAS,IAAI,MAAM;CACzB,OAAO;EACL;EACA,QAAQ,KAAK,MAAM,MAAM;EACzB,SAAS,UAAU,QAAQ,EAAA,CAAG,QAAQ,CAAC,EAAC,IAAK,SAAS,EAAA,CAAG,QAAQ,CAAC;EAClE;EACA;CACD;AACH;ACvCA,IAAa,cAAb,MAAa,YAAW;CAEb,QAAQ,MAAM,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAEhB,UAAU,MAAyB,CAAA,GAAG,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAEtC,QAAQ,MAAM,IAAG,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAEjB,OAAO,MAAM,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAEnB,QAAQ,MAAM,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAEpB,MAAM,MAAM,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,MAAA,CAAA,+BAAA,CAAA,CAAA;CAEJ,UAAU,eAC3B,SAAS,KAAK,MAAK,GAAI,KAAK,QAAO,GAAI,KAAK,MAAK,GAAI;EACnD,MAAM,KAAK,KAAI;EACf,OAAO,KAAK,MAAK;EACjB,KAAK,KAAK,IAAG;CACd,CAAA,GACF,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CApBU,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAW,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAX,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAW,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,KAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,UAAA;EAAA,UA9DZ;;;;;;;;;;;;;;;;;;;;;;;EAsBT,UAAA;EAAA,QAAA,CAAA,0hBAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAwCU,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAW,YAAA,CAAA;EAhEvB,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAc,UACd;;;;;;;;;;;;;;;;;;;;;;;GAsBT,iBAsCgB,wBAAwB;GAAM,QAAA,CAAA,0hBAAA;EAAA,CAAA"}

package/package.json

@@ -1,6 +1,38 @@
 {
   "name": "@selimssevgi/cube-design-angular",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "description": "cube design in angular: the pieces anlat, mosaic and cubes share, starting with the isometric cube picture.",
+  "keywords": [
+    "angular",
+    "cube design",
+    "cube"
+  ],
+  "author": "selim sevgi (https://selimssevgi.com)",
+  "license": "MIT",
+  "homepage": "https://cube-design.selimssevgi.com",
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@angular/common": "^22.2.0",
+    "@angular/core": "^22.2.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": [
+    "*.css"
+  ],
+  "module": "fesm2022/selimssevgi-cube-design-angular.mjs",
+  "typings": "types/selimssevgi-cube-design-angular.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/selimssevgi-cube-design-angular.d.ts",
+      "default": "./fesm2022/selimssevgi-cube-design-angular.mjs"
+    }
+  },
+  "type": "module"
 }

package/tokens/dark.css

@@ -0,0 +1,16 @@
+/*
+ * cube design's dark dialect (mosaic; cube design `07-visual.md`): black plastic with one light
+ * source. import it once in an app's global styles, or set the same variables yourself.
+ */
+:root {
+  --cube-top: #374151;
+  --cube-left: #1f2937;
+  --cube-right: #111827;
+  --cube-edge: #030712;
+  --cube-edge-width: 0.8;
+  --cube-sticker-edge: rgba(3, 7, 18, 0.35);
+  --cube-unknown: rgba(156, 163, 175, 0.1);
+  --cube-unknown-edge: #4b5563;
+  --cube-hint: #4b5563;
+  --cube-hint-opacity: 0.6;
+}

package/tokens/light.css

@@ -0,0 +1,16 @@
+/*
+ * cube design's light dialect (cubes, anlat; cube design `07-visual.md`): import it once in an
+ * app's global styles, or set the same variables yourself.
+ */
+:root {
+  --cube-top: #f9fbf8;
+  --cube-left: #e9eee9;
+  --cube-right: #dfe6e0;
+  --cube-edge: #cdd8d0;
+  --cube-edge-width: 0.6;
+  --cube-sticker-edge: rgba(31, 45, 39, 0.28);
+  --cube-unknown: #e3e7e1;
+  --cube-unknown-edge: none;
+  --cube-hint: #87938c;
+  --cube-hint-opacity: 0.5;
+}

package/types/selimssevgi-cube-design-angular.d.ts

@@ -0,0 +1,92 @@
+import * as i0 from "@angular/core";
+/**
+ * drawing a cube of small cubes in isometric view: the left, right and top faces, each split into
+ * n × n stickers. a sticker is coloured by a piece, or pale while nothing is known for it.
+ *
+ * the same projection anlat, mosaic and cubes drew by hand before this package (cube design,
+ * `07-visual.md`). pure functions, no angular: they can be used anywhere.
+ */
+/** The side of the smallest cube that holds this many pieces, up to 7 × 7 × 7. */
+export declare function sizeFor(count: number): number;
+export type Face = 'top' | 'left' | 'right';
+export interface Sticker {
+  face: Face;
+  /** The sticker's square, as SVG points. */
+  outer: string;
+  /** The coloured inset inside it. */
+  inner: string;
+  colour: string | null;
+}
+export interface Drawing {
+  width: number;
+  height: number;
+  viewBox: string;
+  /** The faint bigger cube it can grow into, as dashed outlines. */
+  hint: string[];
+  stickers: Sticker[];
+}
+export interface DrawOptions {
+  /** Show the next size as a faint cube behind (only while it is small). */
+  hint?: boolean;
+  /** A value: one colour on every sticker. */
+  whole?: boolean;
+  /** How many times it has been turned: shifts the colours round the stickers. */
+  rot?: number;
+}
+/** A cube for `count` pieces, `width` wide, coloured by `colours` in sticker order. */
+export declare function drawCube(count: number, colours: (string | null)[], width: number, options?: DrawOptions): Drawing;
+/**
+ * a cube of small cubes, one per piece: coloured where something is known, pale where not.
+ *
+ * its look comes from css variables, so each app keeps its own dialect (the light one of cubes and
+ * anlat, the dark one of mosaic). every variable has a light fallback, so it draws without any;
+ * `tokens/light.css` and `tokens/dark.css` set them all.
+ */
+export declare class CubePicture {
+  /** how many pieces: the cube is the smallest n × n × n that holds them. */
+  readonly count: import("@angular/core").InputSignal<number>;
+  /** the stickers' colours in order; null is a sticker not known yet. */
+  readonly colours: import("@angular/core").InputSignal<(string | null)[]>;
+  /** the width in pixels. */
+  readonly width: import("@angular/core").InputSignal<number>;
+  /** show the bigger cube it can grow into, faintly, while it is small. */
+  readonly hint: import("@angular/core").InputSignal<boolean>;
+  /** one colour on every sticker (a value). */
+  readonly whole: import("@angular/core").InputSignal<boolean>;
+  /** how many times it was turned: shifts the colours round the stickers. */
+  readonly rot: import("@angular/core").InputSignal<number>;
+  protected readonly drawing: import("@angular/core").Signal<import("@selimssevgi/cube-design-angular").Drawing>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<CubePicture, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<CubePicture, "cube-picture", never, {
+    "count": {
+      "alias": "count";
+      "required": false;
+      "isSignal": true;
+    };
+    "colours": {
+      "alias": "colours";
+      "required": false;
+      "isSignal": true;
+    };
+    "width": {
+      "alias": "width";
+      "required": false;
+      "isSignal": true;
+    };
+    "hint": {
+      "alias": "hint";
+      "required": false;
+      "isSignal": true;
+    };
+    "whole": {
+      "alias": "whole";
+      "required": false;
+      "isSignal": true;
+    };
+    "rot": {
+      "alias": "rot";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}