@selimssevgi/cube-design-angular 0.6.0 → 0.6.2

package/CHANGELOG.md

@@ -4,7 +4,15 @@
 
 nothing yet.
 
-## 0.6.0 (proposed, 4 november 2026: the report kit, so mosaic, cubes and anlat let anyone tell us something)
+## 0.6.2 (4 november 2026: a held square stands in the middle)
+
+- **`align` on `<cube-square>`**, `'center'` by default: a square narrower than its place (held to the window's height so it is seen whole, or to `maxSide`) stands in the middle of it, its spare width shared on both sides. before, it stood at the start and left the spare width empty on the right: selim saw it on mosaic's todarch at 1280 × 860, a 4 × 4 (eight tiles, `least: 'room'`) held to 756 px in an 812 px column. `align: 'start'` keeps the old place. the turning rows' band is centred the same way. an app changes nothing.
+
+## 0.6.1 (4 november 2026: an empty square is seen whole on a short desktop window)
+
+- **the square counts what stands above it.** `<cube-square>` held the square view to the window's height less a fixed 48 px, so under mosaic's top bar and head an empty piece's 5 × 5 (`least`) ran below a short desktop window. the room's `tall` is now the window's height less where the square starts on the page and 16 px below, never less than 320: the pure `squareTall(windowHeight, top, { below, least })`, `SQUARE_ROOM_BELOW` (16) and `SQUARE_LEAST_TALL` (320). it is measured again when the page above it changes (a head's line arriving). an app changes nothing; a square low on a page is smaller than before, and `least` follows it (3 × 3 or 4 × 4 where the window is short).
+
+## 0.6.0 (4 november 2026: the report kit, so mosaic, cubes and anlat let anyone tell us something)
 
 - **telling us**, the report kit (`ReportKind`, `REPORT_KINDS`, `ReportBuild`, `ReportApp`, `REPORT_APP`, `ReportDiagnostics`, `ReportErrorHandler`, `reportInterceptor`, `provideReportDiagnostics`, `REPORT_INCIDENTS_KEPT`, `REPORT_INCIDENTS_MS`, `scrubbedPath`, `errorLine`, `ReportContext`, `reportContext`, `contextOf`, `routePattern`, `environmentOf`, `technicalLines`, `ReportDraft`, `findJustSaved`, `JUST_SAVED_MINUTES`, `SavedReportLike`, `ReportClient`, `ReportInput`, `ReportRequest`, `SavedReport`, `reportRequest`, `reportRefusal`): mosaic's feedback capture made headless (lang-app-fe `core/feedback`), so every cube app gathers the same and sends it to the backend's `POST /feedback`, the one door every signed-in account may use, into the owner's todarch (the study *feedback in every cube app*, step B). it gathers the app, the app's own words for the screen, the route pattern, the page's address without its query or fragment, the environment, the held piece's key, the build and device and, for a bug, the last 5 errors and failed requests of 10 minutes; never a heading or a name a person wrote. the draft is kept on the phone; sending again is never twice (the backend answers the same words from the same reporter within 15 minutes with the same report; `justSaved` looks first where the account may read the reports); a refusal says why in the backend's words (`reportRefusal`); and `undo`. a report may be not known yet (`kind: null`, no `type`, no kind placed). no words, no sheet.
 - **tell**, the last part of every context cube (selim's decision of 4 november 2026): `ContextPartKey` has `tell`, `CONTEXT_PART_ORDER` ends with it and `orderParts` keeps it last, after the parts an app adds (`CONTEXT_LAST_PARTS`). `tellLevel(words)` (`TellData`) gives its four pieces, something broke, make it better, an idea and not known yet, in `ContextWords.tell` (`TellWords`); a tap ends the journey and the app opens its own sheet. `<cube-icon>` draws `tell`, `bug`, `improvement`, `idea` and `not-known`. an app that does not add tell sees no change.

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

@@ -1920,6 +1920,12 @@ function squareLevelFor(cell) {
 function squareGap(n) {
 	return n <= 2 ? 12 : n === 3 ? 10 : n === 4 ? 8 : 5;
 }
+const SQUARE_ROOM_BELOW = 16;
+const SQUARE_LEAST_TALL = 320;
+function squareTall(windowHeight, top, opts = {}) {
+	const { below = 16, least = 320 } = opts;
+	return Math.max(least, Math.floor(windowHeight - (top > 0 ? top : 0) - below));
+}
 const SQUARE_MAX_SIDE = 880;
 const SQUARE_LIST_ROW = 76;
 const SQUARE_LEAST_CELL = 200;
@@ -2038,6 +2044,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 */ []);
@@ -2249,13 +2256,19 @@ var CubeSquare = class CubeSquare {
 			if (this.rings()) untracked(() => this.timers.push(setTimeout(() => this.nudge())));
 		});
 		afterNextRender(() => {
-			const measure = () => this.room.set({
-				width: host.clientWidth,
-				tall: Math.max(320, window.innerHeight - 48)
-			});
+			const measure = () => {
+				const top = host.getBoundingClientRect().top + window.scrollY;
+				const next = {
+					width: host.clientWidth,
+					tall: squareTall(window.innerHeight, top)
+				};
+				const now = this.room();
+				if (now.width !== next.width || now.tall !== next.tall) this.room.set(next);
+			};
 			measure();
 			const watch = typeof ResizeObserver === "function" ? new ResizeObserver(measure) : null;
 			watch?.observe(host);
+			watch?.observe(document.body);
 			window.addEventListener("resize", measure);
 			destroy.onDestroy(() => {
 				watch?.disconnect();
@@ -2312,6 +2325,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",
@@ -2397,6 +2417,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"
@@ -2468,6 +2489,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"
@@ -2500,7 +2522,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,
@@ -2530,6 +2552,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"
@@ -2601,6 +2624,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"
@@ -2633,7 +2657,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: () => [],
@@ -2662,6 +2686,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		align: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "align",
+				required: false
+			}]
+		}],
 		listRow: [{
 			type: i0.Input,
 			args: [{
@@ -3039,6 +3071,7 @@ var CubeContext = class CubeContext {
 					"tiles",
 					"view",
 					"maxSide",
+					"align",
 					"listRow",
 					"dashed",
 					"least",
@@ -3383,6 +3416,7 @@ var CubeLoading = class CubeLoading {
 					"tiles",
 					"view",
 					"maxSide",
+					"align",
 					"listRow",
 					"dashed",
 					"least",
@@ -3752,6 +3786,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_LIST_ROW, SQUARE_MAX_SIDE, 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, startsWheelGesture, stillStep, technicalLines, tellLevel, turningFront, turningRows, viewLevel, whereLevel, wouldLoop };
+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 };
 
 //# sourceMappingURL=selimssevgi-cube-design-angular.mjs.map