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

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

@@ -0,0 +1,750 @@
+import * as i0 from "@angular/core";
+import { InjectionToken, TemplateRef } 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>;
+}
+/** 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. */
+  via: 'press' | 'menu';
+  /** the element holding the directive. */
+  element: HTMLElement;
+  /** the pointerdown that was held, or the contextmenu. */
+  event: Event;
+}
+/** how long a press is held before it is a hold (cubes' value; each app may set its own). */
+export declare const CUBE_HOLD_MS = 520;
+/** how far a finger may move while pressing before it is a drag, in pixels. */
+export declare const CUBE_HOLD_SLOP = 10;
+/**
+ * pressing and holding a piece (principle 31): a long press, a right click or the menu key raise
+ * one `cubeHeld`. a second finger (a pinch) or a drag never does, and the click that follows a hold
+ * is swallowed so the piece does not also open. what a hold opens is the app's.
+ *
+ * it only reports: it never stops or prevents the pointer events, so a swipe or a pinch on the same
+ * element keeps working.
+ */
+export declare class CubeHold {
+  /** no hold at all: the listeners do nothing and the browser's own menu stays. */
+  readonly cubeHoldDisabled: import("@angular/core").InputSignal<boolean>;
+  /** how long a press is held before it is a hold, in milliseconds. */
+  readonly cubeHoldMs: import("@angular/core").InputSignal<number>;
+  /** how far the press may move before it is a drag instead, in pixels. */
+  readonly cubeHoldSlop: import("@angular/core").InputSignal<number>;
+  /** a short buzz (`navigator.vibrate(12)`) when it holds, where the device can. */
+  readonly cubeHoldBuzz: import("@angular/core").InputSignal<boolean>;
+  /** the piece was held. */
+  readonly cubeHeld: import("@angular/core").OutputEmitterRef<CubeHeld>;
+  private readonly element;
+  private timer;
+  /** where the press started; null while nothing may become a hold. */
+  private start;
+  /** the pointers down on the element: two or more are a pinch. */
+  private readonly pointers;
+  /** this press already held, so the phone's own contextmenu after it is not a second hold. */
+  protected pressFired: boolean;
+  /** a hold swallows the one click that follows it. */
+  protected swallow: boolean;
+  constructor();
+  protected press(e: PointerEvent): void;
+  protected moved(e: PointerEvent): void;
+  protected lift(e: PointerEvent): void;
+  /** a right click, a phone's own long press, the menu key or shift+f10. */
+  protected menu(e: Event): void;
+  private fire;
+  private cancel;
+  static ɵfac: i0.ɵɵFactoryDeclaration<CubeHold, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<CubeHold, "[cubeHold]", never, {
+    "cubeHoldDisabled": {
+      "alias": "cubeHoldDisabled";
+      "required": false;
+      "isSignal": true;
+    };
+    "cubeHoldMs": {
+      "alias": "cubeHoldMs";
+      "required": false;
+      "isSignal": true;
+    };
+    "cubeHoldSlop": {
+      "alias": "cubeHoldSlop";
+      "required": false;
+      "isSignal": true;
+    };
+    "cubeHoldBuzz": {
+      "alias": "cubeHoldBuzz";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "cubeHeld": "cubeHeld";
+  }, never, never, true, never>;
+}
+/** the views a cube can be shown in, each drawn as its own shape. */
+export type CubeIconView = 'square' | 'one' | 'two' | 'three' | 'four' | 'grid-4x5' | 'grid-3x6';
+/** what a tile of a cube the app keeps is about (a context cube's parts and their choices). */
+export type CubeIconName = 'names' | 'name' | 'change' | 'move' | 'place' | 'whose' | 'library' | 'mine' | 'shown' | 'hidden' | 'view' | 'sort' | 'kept' | 'face' | 'added' | 'up' | 'down' | 'plus' | CubeIconView;
+/** every icon, in the order above. */
+export declare const CUBE_ICON_NAMES: readonly CubeIconName[];
+export interface CubeIconCell {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}
+/**
+ * the cells a view's icon draws in its 24 × 24 box, or null when the icon is not a view. one across
+ * is a list, so its cells are rows.
+ */
+export declare function cubeIconCells(icon: CubeIconName): CubeIconCell[] | null;
+/**
+ * an icon on a tile of a cube the app keeps (a context cube and its parts), in place of a small
+ * cube: such cubes hold no pieces, so their tiles show what they are about.
+ *
+ * its look comes from css variables (`--cube-icon-*`), each with a light fallback; `tokens/light.css`
+ * and `tokens/dark.css` set them all. it says nothing: the tile's words come from the app.
+ */
+export declare class CubeIcon {
+  /** what the tile is about. */
+  readonly icon: import("@angular/core").InputSignal<CubeIconName>;
+  /** the one in use among its siblings: drawn in the in-use colour. */
+  readonly inUse: import("@angular/core").InputSignal<boolean>;
+  protected readonly cells: import("@angular/core").Signal<CubeIconCell[] | null>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<CubeIcon, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<CubeIcon, "cube-icon", never, {
+    "icon": {
+      "alias": "icon";
+      "required": true;
+      "isSignal": true;
+    };
+    "inUse": {
+      "alias": "inUse";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
+/** the ways a cube's square can be laid out: the square first (cubes decision 23), then the rest. */
+export type ViewKey = 'square' | 'one' | 'two' | 'three' | 'four' | 'grid-4x5' | 'grid-3x6';
+/** every view, in the order they are offered. */
+export declare const VIEW_KEYS: readonly ViewKey[];
+export declare const isView: (v: unknown) => v is ViewKey;
+/** columns and rows of a layout holding this many; every row is full, open places outlined. */
+export interface Grid {
+  cols: number;
+  rows: number;
+}
+export declare function gridFor(view: ViewKey, count: number): Grid;
+/** up is the face's own order (a to z, oldest first, its first colour first); down the other way. */
+export type Direction = 'up' | 'down';
+/** what an item is sorted by: text, a number, or nothing found (not known yet). */
+export type SortValue = string | number | null | undefined;
+/**
+ * items in the order a sort asks for. `by` reads what each item is sorted by; text is compared as
+ * a person reads it, numbers as numbers. an item with nothing found is not known yet and comes last
+ * in both directions (empty is the point, never hidden). ties keep the items' own order.
+ */
+export declare function sortItems<T>(items: readonly T[], by: (item: T) => SortValue, dir: Direction): T[];
+/**
+ * the parts a context cube can have. the seven are the ones cubes found; an app may add its own,
+ * any string, and they come after the known ones.
+ */
+export type ContextPartKey = 'names' | 'change' | 'view' | 'sort' | 'move' | 'whose' | 'hide' | (string & {});
+/** cubes' rows: how it is called (names, change), how it is shown (view, sort), what i do with it. */
+export declare const CONTEXT_PART_ORDER: readonly ContextPartKey[];
+/** the parts in their rows; parts an app added come last, in the order it gave them. twice is once. */
+export declare function orderParts(parts: readonly ContextPartKey[]): ContextPartKey[];
+/** one tile of a level. its title and line always come from the app. */
+export interface ContextTile<D = unknown> {
+  /** unique among its level. */
+  key: string;
+  title: string;
+  line?: string | null;
+  /** the icon's name: a part, a view key, a direction, or one of the app's. */
+  icon: string;
+  /** the one in use among its siblings (the name in use, shown or hidden, the view). */
+  inUse?: boolean;
+  /** drawn quietly: something that can be read but not used. */
+  pale?: boolean;
+  /** the plus: keeps something new beside the others, always last. */
+  adds?: boolean;
+  /** what the tile stands for, for the app's own `pick`. */
+  data?: D;
+}
+/** where in the context cube one is: [] is its top (its parts), ['names'] a part, ['sort', by] deeper. */
+export type ContextPath = readonly string[];
+/** what a pick does: walk into a deeper level, end the journey, step one level out, or nothing. */
+export type ContextPick = {
+  kind: 'enter';
+  path: string[];
+} | {
+  kind: 'done';
+} | {
+  kind: 'out';
+} | {
+  kind: 'stay';
+};
+/** what an app gives for its own held type `T`: a piece, a cube, a to-do, a level. */
+export interface ContextCubeSource<T = unknown> {
+  /** the parts this held thing has, in any order (`orderParts` puts them in rows). */
+  parts(held: T): ContextPartKey[];
+  /** the tiles of one level, or null when that path does not exist for it. */
+  level(held: T, path: ContextPath): ContextTile[] | null;
+  /** a tile was tapped at that path. */
+  pick(held: T, path: ContextPath, tile: ContextTile): ContextPick | Promise<ContextPick>;
+}
+/** a title and its line, in the app's language. */
+export interface ContextWord {
+  title: string;
+  line?: string | null;
+}
+/** a name a piece has had, as the names level lists it. */
+export interface ContextName {
+  name: string;
+  /** the one in use. */
+  current: boolean;
+  /** the day it was given, as the app keeps it. */
+  on?: string | null;
+  /** whose hands gave it. */
+  by?: string | null;
+  /** whether it was ever in use, or only kept beside. */
+  used?: boolean;
+}
+/** every word the context cube shows. the package ships none. */
+export interface ContextWords {
+  /** each part's title and line; a part with no word has an empty title. */
+  parts: Partial<Record<ContextPartKey, ContextWord>>;
+  /** each view's name. */
+  views: Partial<Record<ViewKey, ContextWord>>;
+  /** the two directions of a sort, when a sort option has none of its own. */
+  directions: Record<Direction, ContextWord>;
+  /** the two pieces of hide. */
+  hide: {
+    shown: ContextWord;
+    hidden: ContextWord;
+  };
+  /** the plus among the names, and the line under each name (its day and hands). */
+  names: {
+    another: ContextWord;
+    line?: (name: ContextName) => string | null;
+  };
+  /** said on the one in use, when the app wants it said. */
+  inUse?: string;
+}
+/** the app's source of context cubes. */
+export declare const CONTEXT_CUBE_SOURCE: InjectionToken<ContextCubeSource<any>>;
+/** the app's words for the context cube. */
+export declare const CONTEXT_CUBE_WORDS: InjectionToken<ContextWords>;
+/** what the top level shows of a part now: the view in use, the name, shown or hidden. */
+export interface PartNow {
+  line?: string | null;
+  icon?: string;
+}
+/**
+ * the icon a part's tile shows when the app gives none of what it holds now. most parts are drawn
+ * by their own name; hide has no icon of its own and shows shown (the eye), since a piece is in
+ * sight until it is hidden. an app passes `now.hide.icon` (`shown` or `hidden`) to say which.
+ */
+export declare const PART_ICONS: Partial<Record<ContextPartKey, string>>;
+/** the top of a context cube: its parts in rows, each with its word and, when given, what it holds now. */
+export declare function partsLevel(parts: readonly ContextPartKey[], words: ContextWords, now?: Partial<Record<ContextPartKey, PartNow>>): ContextTile<ContextPartKey>[];
+/** what a names tile holds: a name, or the plus. */
+export type NamesData = {
+  name: ContextName;
+} | {
+  another: true;
+};
+/**
+ * every name it has had: the one in use first, then the rest newest first (the names come oldest
+ * first, as they were given). when the app allows it, a plus keeps a new one beside it without
+ * using it.
+ */
+export declare function namesLevel(names: readonly ContextName[], words: ContextWords, opts?: {
+  canAdd?: boolean;
+}): ContextTile<NamesData>[];
+/** hide: a cube of two pieces, shown and hidden, one in use; `data` is whether it hides. */
+export declare function hideLevel(hidden: boolean, words: ContextWords): ContextTile<boolean>[];
+/**
+ * view: every way to lay the cube out, its icon its own shape. the one in use says so in place of
+ * its line, so both fit a small tile.
+ */
+export declare function viewLevel(now: ViewKey, words: ContextWords, views?: readonly ViewKey[]): ContextTile<ViewKey>[];
+/** what a cube can be sorted by, given by the app: as kept, names, when added, each face. */
+export interface SortOption {
+  /** the app's own key: `kept`, `names`, `added`, a face's id. */
+  by: string;
+  title: string;
+  line?: string | null;
+  icon: string;
+  /** false for an order with no two ways (as kept): picking it uses it at once. */
+  directed?: boolean;
+  /** this option's two directions in its own words (a to z, oldest first, small first). */
+  up?: ContextWord;
+  down?: ContextWord;
+}
+/** a sort in use. */
+export interface SortNow {
+  by: string;
+  dir: Direction;
+}
+/** the two directions of an option, in its own words or else the app's general ones. */
+export declare function directionWords(option: SortOption, words: ContextWords): Record<Direction, ContextWord>;
+/**
+ * sort: the options, the one in use marked; a directed option in use says its direction in place
+ * of its line. picking a directed option walks into its two directions (`sortDirectionsLevel`).
+ */
+export declare function sortLevel(options: readonly SortOption[], now: SortNow, words: ContextWords): ContextTile<SortOption>[];
+/**
+ * inside one sort option: its two directions, up first. whatever direction, an item with nothing
+ * found is not known yet and comes last (`sortItems`); the words say so in their lines.
+ */
+export declare function sortDirectionsLevel(option: SortOption, now: SortNow, words: ContextWords): ContextTile<Direction>[];
+/** 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. */
+export declare function squareLevelFor(cell: number): SquareLevel;
+/** places still open keep their outline; the fuller the square, the closer its places. */
+export declare function squareGap(n: number): number;
+/** the room a square may take: the width it is given, and the window's height for the square. */
+export interface SquareRoom {
+  width: number;
+  /** the window's height less a head (48 px); only the square view is held to it, so it is seen whole. */
+  tall: number;
+}
+/** one square laid out: its columns and rows, its size, and how much each tile says. */
+export interface SquareLayout {
+  cols: number;
+  rows: number;
+  /** the square's width and height, in px. */
+  width: number;
+  height: number;
+  gap: number;
+  /** a cell's width, in px. */
+  cell: number;
+  /** a row's height: the cell, or a list row's own height in one across. */
+  rowHeight: number;
+  level: SquareLevel;
+  /** one across is a list: each row as tall as a tile with its name and line, not a square. */
+  list: boolean;
+  /** places not filled, outlined; they only ever finish the last row. */
+  open: number;
+}
+/** the largest side a square takes on a wide screen, in px (cubes', mosaic's). */
+export declare const SQUARE_MAX_SIDE = 880;
+/** a row's height in one across, the list (cubes'). */
+export declare const SQUARE_LIST_ROW = 76;
+/**
+ * how this many tiles are laid out in a view, in this much room. the square view is the smallest
+ * n × n that holds them, as wide as the room and the window's height allow; the other views are as
+ * long as they need and scroll. open places only finish the last row, so a view never draws a whole
+ * empty row (decision of 2026-11-01): three pieces in 4 × 5 are one row of four. the square keeps
+ * its own rule, its size coming from the pieces.
+ */
+export declare function squareLayout(view: ViewKey, count: number, room: SquareRoom, opts?: {
+  maxSide?: number;
+  listRow?: number;
+}): SquareLayout;
+/** what a tile's template is given. */
+export interface CubeSquareTileContext<T> {
+  /** the tile, as the app gave it. */
+  $implicit: T;
+  index: number;
+  /** how much it says (0 everything … 4 only its icon or small cube). */
+  level: SquareLevel;
+  /** its cell's width and height, in px, for a picture sized to it. */
+  cell: number;
+  rowHeight: number;
+  /** one across: a list row, not a square cell. */
+  list: boolean;
+}
+/**
+ * `<ng-template cubeSquareTile let-tile let-level="level">`: how the app draws one tile inside a
+ * `<cube-square>`. the square only places it; the template fills its cell.
+ */
+export declare class CubeSquareTile<T> {
+  readonly template: TemplateRef<CubeSquareTileContext<T>>;
+  /** the tiles' type, for the template's checks: `[cubeSquareTile]="tiles()"`. */
+  readonly cubeSquareTile: import("@angular/core").InputSignal<"" | readonly T[] | undefined>;
+  static ngTemplateContextGuard<T>(_dir: CubeSquareTile<T>, ctx: unknown): ctx is CubeSquareTileContext<T>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<CubeSquareTile<any>, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<CubeSquareTile<any>, "ng-template[cubeSquareTile]", never, {
+    "cubeSquareTile": {
+      "alias": "cubeSquareTile";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
+/** the front a view keeps when its rows turn: the square's `across` × `across`, a fixed grid's page. */
+export declare function turningFront(view: ViewKey, across?: number): {
+  cols: number;
+  rows: number;
+} | null;
+/** narrower than this (a phone), a full square turns its rows, when `turning` is on. */
+export declare const TURNING_BELOW = 640;
+/** turns after which a row with more stops nudging when the square opens. */
+export declare const TURNING_NUDGE_UNTIL = 3;
+/**
+ * `<cube-square [tiles] [view]>`: the tiles an app gives, laid out as a complete square or another
+ * view, each drawn by the app's `cubeSquareTile` template and told its level. it measures its own
+ * width (up to the window's height for the square, at most `maxSide`), outlines its open places and
+ * zooms a step when it has to hold more. it says no word and draws no tile. its look is css
+ * variables (`--cube-square-*`), set in both token files.
+ */
+export declare class CubeSquare<T> {
+  /** the tiles, in the order they are placed. */
+  readonly tiles: import("@angular/core").InputSignal<readonly T[]>;
+  /** how they are laid out: the square (the default), one to four across, 4 × 5, 3 × 6. */
+  readonly view: import("@angular/core").InputSignal<ViewKey>;
+  /** the largest side the square takes on a wide screen, in px. */
+  readonly maxSide: import("@angular/core").InputSignal<number>;
+  /** a row's height in one across, in px. */
+  readonly listRow: import("@angular/core").InputSignal<number>;
+  /** open places dashed, where something could come (a cube of mine, a level with a plus). */
+  readonly dashed: import("@angular/core").InputSignal<boolean>;
+  /** what keeps a tile the same tile across changes, so it is not drawn anew; its place by default. */
+  readonly keyOf: import("@angular/core").InputSignal<(tile: T, index: number) => unknown>;
+  /**
+   * turning rows (selim: row rotation, first in mosaic's todarch cube), off unless the app turns
+   * them on: on a phone, a square or fixed grid holding more than its front keeps its size, and each
+   * row becomes a band of four sides that a finger (or the arrow keys on a focused row) turns, bringing
+   * in the pieces past the front (`turningRows`).
+   */
+  readonly turning: import("@angular/core").InputSignal<boolean>;
+  /** rows turn only on a screen narrower than this, in px; a wide screen shows the whole square. */
+  readonly turnBelow: import("@angular/core").InputSignal<number>;
+  /** the square's front when its rows turn: `across` × `across` (3 × 3). */
+  readonly across: import("@angular/core").InputSignal<number>;
+  /** which tile is my own box: it keeps the front's last place while the rows turn. */
+  readonly isOwn: import("@angular/core").InputSignal<((tile: T) => boolean) | null>;
+  /** where the turns are counted on this phone (localStorage), so the nudge stops after a few. */
+  readonly nudgeKey: import("@angular/core").InputSignal<string | null>;
+  protected readonly tile: import("@angular/core").Signal<CubeSquareTile<T> | undefined>;
+  private readonly grid;
+  /** the host's width and the window's height, followed as either changes. */
+  private readonly room;
+  /** the layout now: columns, rows, size, gap, level and open places. */
+  /** the front kept while the rows turn, or null when they do not (off, a wide screen, all fit). */
+  readonly front: import("@angular/core").Signal<{
+    cols: number;
+    rows: number;
+  } | null>;
+  /** the layout now: columns, rows, size, gap, level and open places. */
+  readonly layout: import("@angular/core").Signal<SquareLayout>;
+  /** the turning rows: rows × four sides × cols, and how many sides of each hold something. */
+  protected readonly rings: import("@angular/core").Signal<import("@selimssevgi/cube-design-angular").TurningRows<T> | null>;
+  private readonly indexes;
+  protected indexOf(t: T): number;
+  protected readonly openPlaces: import("@angular/core").Signal<number[]>;
+  /** each row's turn in degrees, and the row a finger is turning now. */
+  private readonly angles;
+  protected readonly dragging: import("@angular/core").WritableSignal<number | null>;
+  /** turns that should not animate (reduced motion). */
+  protected readonly still: import("@angular/core").WritableSignal<boolean>;
+  protected readonly nudging: import("@angular/core").WritableSignal<boolean>;
+  private drag;
+  /** fingers on the square now: a second one is a pinch, never a turn. */
+  private readonly fingers;
+  private suppressClick;
+  private nudged;
+  private readonly timers;
+  private readonly host;
+  protected angle(row: number): number;
+  /** the side of a row facing me (0 to 3). */
+  protected sideOf(row: number): number;
+  private filled;
+  protected down(row: number, e: PointerEvent): void;
+  protected move(row: number, e: PointerEvent): void;
+  protected up(row: number, e: PointerEvent): void;
+  private cancelDrag;
+  /** turns a row `steps` sides from `base`, passing the sides with nothing on them. */
+  private settle;
+  /** the arrow keys on a focused row turn it, so a keyboard reaches every piece too. */
+  protected key(row: number, e: KeyboardEvent): void;
+  private focusedColumn;
+  /** after a turn by the keys, focus goes to the same place on the side now facing me. */
+  private focusSide;
+  /** the nudge: rows with more turn a little and back, one after another, until i turned a few. */
+  private nudge;
+  constructor();
+  static ɵfac: i0.ɵɵFactoryDeclaration<CubeSquare<any>, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<CubeSquare<any>, "cube-square", never, {
+    "tiles": {
+      "alias": "tiles";
+      "required": true;
+      "isSignal": true;
+    };
+    "view": {
+      "alias": "view";
+      "required": false;
+      "isSignal": true;
+    };
+    "maxSide": {
+      "alias": "maxSide";
+      "required": false;
+      "isSignal": true;
+    };
+    "listRow": {
+      "alias": "listRow";
+      "required": false;
+      "isSignal": true;
+    };
+    "dashed": {
+      "alias": "dashed";
+      "required": false;
+      "isSignal": true;
+    };
+    "keyOf": {
+      "alias": "keyOf";
+      "required": false;
+      "isSignal": true;
+    };
+    "turning": {
+      "alias": "turning";
+      "required": false;
+      "isSignal": true;
+    };
+    "turnBelow": {
+      "alias": "turnBelow";
+      "required": false;
+      "isSignal": true;
+    };
+    "across": {
+      "alias": "across";
+      "required": false;
+      "isSignal": true;
+    };
+    "isOwn": {
+      "alias": "isOwn";
+      "required": false;
+      "isSignal": true;
+    };
+    "nudgeKey": {
+      "alias": "nudgeKey";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, ["tile"], never, true, never>;
+}
+/** how close a square's places are: from one big tile (0) to only its icon (4). */
+export type ContextLevel = SquareLevel;
+/** cubes' steps, now the square's (`squareLevelFor`); kept under its first name. */
+export declare const contextLevelFor: (cell: number) => ContextLevel;
+/** a level's square: n × n places, how far apart, and how much each tile says. */
+export interface ContextSquare {
+  /** places on a side. */
+  n: number;
+  /** the square's side, in px. */
+  side: number;
+  gap: number;
+  level: ContextLevel;
+  /** the places not filled, outlined so the square stays whole. */
+  open: number;
+}
+/**
+ * the square for this many tiles in this much room: the smallest n × n that holds them all
+ * (`gridFor('square', count)`), as wide as the room, at most `maxSide`.
+ */
+export declare function contextSquare(count: number, room: number, maxSide?: number): ContextSquare;
+/**
+ * the icon a tile is drawn with: its own when `cube-icon` draws it, shown for `hide` (it has no icon
+ * of its own), the plus for a tile that adds, and else a face (an app's own part with an icon the
+ * package does not have).
+ */
+export declare function contextIcon(tile: Pick<ContextTile, 'icon' | 'adds'>): CubeIconName;
+/** a tapped tile and the element it is drawn in. */
+export interface ContextTapped {
+  tile: ContextTile;
+  element: HTMLElement;
+}
+/**
+ * `<cube-context [held] [path]>`: one level of the held thing's context cube, as a complete square
+ * of icon tiles. a tap asks the source's `pick`, and the answer comes out as `enter` (a deeper
+ * path), `done` (the journey ends: a name, a view, shown or hidden was used) or `out` (one level
+ * up); `stay` redraws the level where it is. a level the source does not have (null) is `out` too.
+ *
+ * the source and the words come from `CONTEXT_CUBE_SOURCE` and `CONTEXT_CUBE_WORDS`, or from the
+ * `source` and `words` inputs when one screen holds a different one. its look is css variables
+ * (`--cube-context-*`, `--cube-icon-*`), set in both token files.
+ */
+export declare class CubeContext {
+  /** what was held: a piece, a cube, a to-do, a level, as the app's source knows it. */
+  readonly held: import("@angular/core").InputSignal<unknown>;
+  /** where in its context cube: [] is its top (the parts), ['names'] a part, ['sort', by] deeper. */
+  readonly path: import("@angular/core").InputSignal<ContextPath>;
+  /** a source for this screen alone; else `CONTEXT_CUBE_SOURCE`. */
+  readonly source: import("@angular/core").InputSignal<ContextCubeSource<any> | null>;
+  /** words for this screen alone; else `CONTEXT_CUBE_WORDS`. */
+  readonly words: import("@angular/core").InputSignal<ContextWords | null>;
+  /** the largest side the square takes on a wide screen, in px. */
+  readonly maxSide: import("@angular/core").InputSignal<number>;
+  /** walk into a deeper level: the app puts this path in its own route. */
+  readonly enter: import("@angular/core").OutputEmitterRef<string[]>;
+  /** step one level out (or out of the context cube, from its top). */
+  readonly out: import("@angular/core").OutputEmitterRef<void>;
+  /** the journey ends: the tile that was used. */
+  readonly done: import("@angular/core").OutputEmitterRef<ContextTile<unknown>>;
+  /**
+   * a tile was tapped, before the source answers: the tile and its element, so the app can grow the
+   * next level (or whatever the pick opens) out of the tile, as it zooms into any other piece.
+   */
+  readonly tapped: import("@angular/core").OutputEmitterRef<ContextTapped>;
+  private readonly given;
+  private readonly givenWords;
+  /** the tile whose pick is still being answered; every tile waits meanwhile. */
+  protected readonly busy: import("@angular/core").WritableSignal<string | null>;
+  /** bumped after a pick, so a source that keeps its data outside signals is read again. */
+  private readonly again;
+  private readonly from;
+  /** the path as one key, so the same path given anew is the same level. */
+  private readonly where;
+  private readonly level;
+  protected readonly tiles: import("@angular/core").Signal<ContextTile<unknown>[]>;
+  protected readonly adds: import("@angular/core").Signal<boolean>;
+  /** a tile stays the same tile across levels by its key. */
+  protected readonly keyOf: (t: ContextTile) => string;
+  protected readonly inUseWord: import("@angular/core").Signal<string | null>;
+  protected readonly iconOf: typeof contextIcon;
+  constructor();
+  protected tap(tile: ContextTile, element?: HTMLElement): Promise<void>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<CubeContext, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<CubeContext, "cube-context", never, {
+    "held": {
+      "alias": "held";
+      "required": true;
+      "isSignal": true;
+    };
+    "path": {
+      "alias": "path";
+      "required": false;
+      "isSignal": true;
+    };
+    "source": {
+      "alias": "source";
+      "required": false;
+      "isSignal": true;
+    };
+    "words": {
+      "alias": "words";
+      "required": false;
+      "isSignal": true;
+    };
+    "maxSide": {
+      "alias": "maxSide";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "enter": "enter";
+    "out": "out";
+    "done": "done";
+    "tapped": "tapped";
+  }, never, never, true, never>;
+}
+/**
+ * turning rows (selim: row rotation), first tried in mosaic's todarch cube: a square of more
+ * pieces than its front holds keeps its front full and turns its rows like the layers of a puzzle
+ * cube. each row is a band of four sides; the pieces past the front fill the first row's other
+ * sides, then the second row's, and so on, so the open places gather at the very end and a row
+ * with nothing behind its front does not turn.
+ *
+ * this is only the layout, pure and without angular: which piece sits on which side of which row.
+ * the front is cols × rows (3 × 3 as mosaic draws it, 4 × 5 and 3 × 6 for cubes' fixed grids).
+ * when four sides a row are still not enough, rows are added below, as mosaic does.
+ */
+export interface TurningRows<T> {
+  /** rows × 4 sides × cols places; null is an open place. side 0 is the front. */
+  rows: (T | null)[][][];
+  /** how many sides of each row hold something (1: only its front, it does not turn). */
+  sides: number[];
+}
+/** the sides of one row: its front and the three behind it. */
+export declare const TURNING_SIDES = 4;
+export declare function turningRows<T>(pieces: readonly T[], own: T | null, cols?: number, rows?: number): TurningRows<T>;