@selimssevgi/cube-design-angular 0.6.2 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@selimssevgi/cube-design-angular",
-  "version": "0.6.2",
+  "version": "0.7.0",
   "description": "cube design in angular: the pieces anlat, mosaic and cubes share, starting with the isometric cube picture.",
   "keywords": [
     "angular",

package/tokens/dark.css

@@ -1,5 +1,5 @@
 /*
- * cube design's dark dialect (mosaic; cube design `04-screens.md`): black plastic with one light
+ * cube design's dark dialect (mosaic; cube design `applications/screens/screens.md`): black plastic with one light
  * source. import it once in an app's global styles, or set the same variables yourself.
  */
 :root {
@@ -49,4 +49,12 @@
   /* something on its way (<cube-loading>) */
   --cube-loading-place: rgba(156, 163, 175, 0.1);
   --cube-loading-gap: 12px;
+  /* the cube's art (cube-picture's art): its edges, what is not known yet, the glass */
+  --cube-art-edge: rgba(3, 7, 18, 0.45);
+  --cube-art-unknown-edge: #4b5563;
+  --cube-glass-back: rgba(148, 163, 184, 0.06);
+  --cube-glass-edge: rgba(203, 213, 225, 0.22);
+  --cube-glass: rgba(186, 230, 253, 0.07);
+  --cube-glass-edge-front: rgba(226, 232, 240, 0.6);
+  --cube-glass-top: rgba(224, 242, 254, 0.12);
 }

package/tokens/light.css

@@ -1,5 +1,5 @@
 /*
- * cube design's light dialect (cubes, anlat; cube design `04-screens.md`): import it once in an
+ * cube design's light dialect (cubes, anlat; cube design `applications/screens/screens.md`): import it once in an
  * app's global styles, or set the same variables yourself.
  */
 :root {
@@ -49,4 +49,12 @@
   /* something on its way (<cube-loading>) */
   --cube-loading-place: #e3e7e1;
   --cube-loading-gap: 12px;
+  /* the cube's art (cube-picture's art): its edges, what is not known yet, the glass */
+  --cube-art-edge: rgba(31, 45, 39, 0.35);
+  --cube-art-unknown-edge: #87938c;
+  --cube-glass-back: rgba(42, 48, 45, 0.04);
+  --cube-glass-edge: rgba(42, 48, 45, 0.18);
+  --cube-glass: rgba(95, 154, 128, 0.06);
+  --cube-glass-edge-front: rgba(42, 48, 45, 0.5);
+  --cube-glass-top: rgba(255, 255, 255, 0.35);
 }

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

@@ -8,7 +8,7 @@ import { Observable } from "rxjs";
  * 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,
- * `04-screens.md`). pure functions, no angular: they can be used anywhere.
+ * `applications/screens/screens.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;
@@ -39,9 +39,56 @@ export interface DrawOptions {
 }
 /** 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;
+/**
+ * the cube's art: other ways to draw the same look as the picture's stickers (cube design,
+ * `applications/screens/decisions.md`, 7 november 2026: "all of them are options… users can select
+ * for one, user can select for all of them"). found in mosaic's todarch head (lang-app-fe #231) and
+ * moved in here so every app can offer them. every art draws the same look: one small cube per
+ * piece, its colour, not known yet pale or dashed, and the bigger cube it can grow into dashed; only
+ * the drawing differs. pure functions, no angular.
+ *
+ * - `stickers`: a cube with a sticker per small cube on its outer sides (`drawCube`, the first one).
+ * - `blocks`: solid coloured blocks with gaps between them, stacked from the bottom; while it is not
+ *   full, the whole it grows into is dashed around it.
+ * - `glass`: a glass cube with the small cubes floating inside it.
+ * - `ribbons`: a smooth cube wrapped in bands, one per colour, as wide as its share.
+ * - `dots`: a dark cube with a round dot per small cube on its sides, the places left dashed.
+ */
+type CubeArt = 'stickers' | 'blocks' | 'glass' | 'ribbons' | 'dots';
+/** every art, in the order they are offered: stickers (the first one) first. */
+export declare const CUBE_ARTS: readonly CubeArt[];
+/** whether a value read back (from storage, a link) is one of the arts. */
+export declare const isArt: (v: unknown) => v is CubeArt;
+/** an art `drawArt` draws: every one but stickers, which is `drawCube`. */
+type DrawnArt = Exclude<CubeArt, 'stickers'>;
+/** one shape of an art: its points, its class (how it looks) and a fill when it has a colour. */
+interface ArtShape {
+  points: string;
+  cls: string;
+  fill: string | null;
+}
+interface ArtDrawing {
+  width: number;
+  height: number;
+  viewBox: string;
+  shapes: ArtShape[];
+}
+interface ArtOptions {
+  /** Turned this many colours on (a swipe on the head). */
+  rot?: number;
+  /** One colour on everything (a value, complete in itself). */
+  whole?: boolean;
+  /** The cube could grow: its next size dashed around it. */
+  hint?: boolean;
+}
+/** draws a look the `art` way (any but `stickers`, which is `drawCube`). */
+export declare function drawArt(art: DrawnArt, count: number, colours: readonly (string | null)[], width: number, options?: ArtOptions): ArtDrawing;
 /**
  * a cube of small cubes, one per piece: coloured where something is known, pale where not.
  *
+ * `art` says how it is drawn (`cube-art.ts`): stickers on its sides (the first one), or blocks,
+ * glass, ribbons or dots. every art draws the same look; only the drawing differs.
+ *
  * 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.
@@ -59,7 +106,10 @@ export declare class CubePicture {
   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>;
+  /** how it is drawn: stickers (the first one), blocks, glass, ribbons or dots. */
+  readonly art: import("@angular/core").InputSignal<CubeArt>;
   protected readonly drawing: import("@angular/core").Signal<import("@selimssevgi/cube-design-angular").Drawing>;
+  protected readonly artDrawing: import("@angular/core").Signal<import("@selimssevgi/cube-design-angular").ArtDrawing>;
   static ɵfac: i0.ɵɵFactoryDeclaration<CubePicture, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<CubePicture, "cube-picture", never, {
     "count": {
@@ -92,8 +142,45 @@ export declare class CubePicture {
       "required": false;
       "isSignal": true;
     };
+    "art": {
+      "alias": "art";
+      "required": false;
+      "isSignal": true;
+    };
   }, {}, never, never, true, never>;
 }
+/** what i chose: one art for every app, and one for some apps. none chosen: each app's own. */
+export interface ArtChoices {
+  /** for every app; null or missing when i chose none. */
+  all?: CubeArt | null;
+  /** for one app, by the app's own key; it wins over `all`. */
+  apps?: Readonly<Record<string, CubeArt>>;
+}
+/** the art an app draws: the one i chose for it, else the one i chose for all, else its own. */
+export declare function artFor(choices: ArtChoices, app: string, start?: CubeArt): CubeArt;
+/**
+ * choosing an art. for one app (`app` given) it keeps it for that app only. for every app
+ * (`app` null) it becomes the art of all, and what i chose for one app before gives way to it.
+ * `null` as the art forgets the choice: the app (or every app) goes back to its own.
+ */
+export declare function chooseArt(choices: ArtChoices, app: string | null, art: CubeArt | null): ArtChoices;
+/** reads choices kept as text, keeping only what is still an art. */
+export declare function readArtChoices(text: string | null): ArtChoices;
+/** where the choices are kept on the phone. */
+export declare const ART_CHOICES_KEY = "cube-design.art";
+/**
+ * the arts i chose, kept on this phone (localStorage, `ART_CHOICES_KEY`). a phone that keeps
+ * nothing starts again from each app's own art.
+ */
+export declare class CubeArtChoices {
+  readonly choices: import("@angular/core").WritableSignal<ArtChoices>;
+  /** the art `app` draws now, starting from `start` when i chose none. */
+  artFor(app: string, start?: CubeArt): CubeArt;
+  /** chooses `art` for `app`, or for every app when `app` is null; null forgets. */
+  choose(app: string | null, art: CubeArt | null): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<CubeArtChoices, never>;
+  static ɵprov: i0.ɵɵInjectableDeclaration<any>;
+}
 /** what a hold reports: how it came, on which element, and the event that ended it. */
 export interface CubeHeld {
   /** `press`: a finger, pen or the main mouse button stayed put; `menu`: a contextmenu event. */
@@ -709,6 +796,17 @@ export interface ContextTile<D = unknown> {
    * names are set; a null value leaves one out. none by default (0.4.0, from mosaic's home).
    */
   attrs?: Readonly<Record<string, string | null>> | null;
+  /**
+   * draws the tile's cube in place of its icon: the look it stands for, drawn with that art (the
+   * arts of the cube on top, `artLevel`, 0.7.0). none by default.
+   */
+  art?: ContextArt | null;
+}
+/** the cube an art tile draws: how, and the look (how many small cubes, their colours). */
+export interface ContextArt {
+  art: CubeArt;
+  count: number;
+  colours: readonly (string | null)[];
 }
 /** where in the context cube one is: [] is its top (its parts), ['names'] a part, ['sort', by] deeper. */
 export type ContextPath = readonly string[];
@@ -776,6 +874,8 @@ export interface ContextWords {
    * (the person says it without choosing). an app without them shows tell with empty titles.
    */
   tell?: TellWords;
+  /** each art's title and line (`artLevel`); the art's key and no line without. */
+  arts?: Partial<Record<CubeArt, ContextWord>>;
 }
 /** the words of tell's level, one for each kind of report and one for not known yet. */
 export interface TellWords {
@@ -934,6 +1034,15 @@ export type TellData = ReportKind | null;
  * it with `ReportClient`. no kind is in use: nothing has been told yet.
  */
 export declare function tellLevel(words: ContextWords): ContextTile<TellData>[];
+/**
+ * the cube's art: every way to draw the cube on top, each tile drawing the cube i am looking at
+ * (`look`) that way, the one in use first in place of its line. the app adds it where it fits (the
+ * cube on top's view, in mosaic); a tap is the app's to keep (`CubeArtChoices`). 0.7.0.
+ */
+export declare function artLevel(now: CubeArt, look: {
+  count: number;
+  colours: readonly (string | null)[];
+}, words: ContextWords, arts?: readonly CubeArt[]): ContextTile<CubeArt>[];
 /** how close a square's places are: from one big tile (0) to only its icon or small cube (4). */
 export type SquareLevel = 0 | 1 | 2 | 3 | 4;
 /** cubes' steps (`levelFor`), by a cell's side in px: a tile says less as the square fills. */
@@ -1244,6 +1353,8 @@ export declare function contextSquare(count: number, room: number, maxSide?: num
  * package does not have).
  */
 export declare function contextIcon(tile: Pick<ContextTile, 'icon' | 'adds'>): CubeIconName;
+/** how wide an art tile draws its cube at each closeness of the square (its icon's room). */
+export declare function contextArtWidth(level: number): number;
 /** a tapped tile and the element it is drawn in. */
 export interface ContextTapped {
   tile: ContextTile;
@@ -1303,6 +1414,7 @@ export declare class CubeContext {
   protected readonly keyOf: (t: ContextTile) => string;
   protected readonly inUseWord: import("@angular/core").Signal<string | null>;
   protected readonly iconOf: typeof contextIcon;
+  protected readonly artWidth: typeof contextArtWidth;
   constructor();
   /** the › of a tile with a way inside: walks into its path, without asking the source. */
   protected zoomInto(tile: ContextTile, element?: HTMLElement): void;
@@ -1369,7 +1481,7 @@ export declare function turningRows<T>(pieces: readonly T[], own: T | null, cols
 /**
  * something on its way, the cube design way: the cube picture's pale stickers take colour (a page,
  * a cube) or its colours turn round the stickers (a piece: a tile, a button saving). picked by selim
- * on 3 november 2026 (cube design's `08-decisions.md`, the study `studies/loading-pieces.md`), in
+ * on 3 november 2026 (cube design's `record/decisions-until-2026-11-05.md`, the study `studies/loading-pieces.md`), in
  * place of grey pulsing cards and primeng's ring. it says no word: the app's own line is projected.
  */
 /**
@@ -1656,4 +1768,5 @@ export declare class ReportClient {
   undo(id: string): Observable<void>;
   static ɵfac: i0.ɵɵFactoryDeclaration<ReportClient, never>;
   static ɵprov: i0.ɵɵInjectableDeclaration<any>;
-}
+}
+export type { ArtDrawing, ArtOptions, ArtShape, CubeArt, DrawnArt };