@ahrowe/ui 0.29.0 → 0.29.1

package/dist/types/common/themeProvider/theme.types.d.ts

@@ -128,6 +128,36 @@ export interface ThemeVariables {
     '--option-picker-padding'?: string;
     /** Track (unfilled) background colour. Falls back to --background-accent. */
     '--progress-bar-track-color'?: string;
+    /** Canvas behind the plan. Falls back to --background. */
+    '--plan-canvas-background'?: string;
+    /** Grid lines, drawn at low opacity. Falls back to --text-color. */
+    '--plan-grid-color'?: string;
+    /** The storey below, traced under the current one. Falls back to --text-dark. */
+    '--plan-underlay-color'?: string;
+    /** Room floor. Falls back to --background-accent. */
+    '--plan-room-fill'?: string;
+    /** Room floor under the pointer. Falls back to --background-accent-light. */
+    '--plan-room-fill-hover'?: string;
+    /** Edge of the walls bounding a selected room. Falls back to --primary-color. */
+    '--plan-room-edge-selected'?: string;
+    /** Body of those same walls. Falls back to --primary-lighter. */
+    '--plan-room-edge-selected-fill'?: string;
+    /** Wall body. Falls back to --text-color mixed 58% into the canvas. */
+    '--plan-wall-fill'?: string;
+    /** Wall edge, its caps and the jamb faces. Falls back to --text-color mixed 38% in. */
+    '--plan-wall-outline'?: string;
+    /** Wall corner treatment, any `stroke-linejoin` value. Falls back to `round`. */
+    '--plan-wall-join'?: string;
+    /** How far a mitred corner may run, when --plan-wall-join is `miter`. Falls back to `4`. */
+    '--plan-wall-miter-limit'?: string;
+    /** Door leaf and swing arc. Falls back to --text-dark. */
+    '--plan-door-color'?: string;
+    /** Window pane line. Falls back to --info-color. */
+    '--plan-window-color'?: string;
+    /** RoomDrawer's snap construction lines. Falls back to --info-color. */
+    '--plan-guide-color'?: string;
+    /** RoomDrawer's ruler. Falls back to --primary-color. */
+    '--plan-measure-color'?: string;
     [key: string]: string | undefined;
 }
 export interface Theme {

package/dist/types/common/utils/activationKey.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+/**
+ * Whether a keydown is a click-equivalent activation of the element the handler sits on.
+ *
+ * The target check is the important half: keydown bubbles, so without it a Space typed into a
+ * nested input activates the container and, once the container calls `preventDefault()`, never
+ * reaches the input at all.
+ */
+export declare function isSelfActivation(event: React.KeyboardEvent): boolean;

package/docs/Flip.md

@@ -67,7 +67,7 @@ import { Tilt, Flip } from '@ahrowe/ui';
 
 **Motion:** the flip always animates over `flipDuration`, whether triggered by a click, a controlled prop change, or the ref API. Under `prefers-reduced-motion: reduce`, it flips instantly instead. `onFlipEnd` fires once the flip settles on its new face — after the transition completes normally, or synchronously under reduced motion, since no transition runs to wait for.
 
-**Keyboard accessibility:** when `flipOnClick` is set, the root gets `role="button"`, `tabIndex={0}`, and `aria-pressed` reflecting the current flip state, and Enter/Space both toggle the flip the same way a click does. None of this is applied when `flipOnClick` is `false`, since the element isn't interactive.
+**Keyboard accessibility:** when `flipOnClick` is set, the root gets `role="button"`, `tabIndex={0}`, and `aria-pressed` reflecting the current flip state, and Enter/Space both toggle the flip the same way a click does, as long as the key was pressed on the root itself so a nested input or button keeps its own keys. None of this is applied when `flipOnClick` is `false`, since the element isn't interactive.
 
 **Key props:**
 

package/docs/RoomDrawer.md

@@ -323,26 +323,34 @@ ref.current?.loadJson(await file.text());
 
 ## Theming
 
-All colours come from theme variables. These control the plan itself, and each falls back to a general theme colour when unset:
+All colours come from theme variables. These control the plan itself, and each falls back to a general theme colour when unset. They are declared on `ThemeVariables`, so a `Theme` gets them with autocomplete:
 
 | Variable | Falls back to |
 |----------|---------------|
 | `--plan-canvas-background` | `var(--background)` |
 | `--plan-grid-color` | `var(--text-color)` at low opacity |
+| `--plan-underlay-color` | `var(--text-dark)` at low opacity |
 | `--plan-room-fill` | `var(--background-accent)` |
 | `--plan-room-fill-hover` | `var(--background-accent-light)` |
 | `--plan-room-edge-selected` / `--plan-room-edge-selected-fill` | `var(--primary-color)` / `var(--primary-lighter)` |
-| `--plan-wall-fill` | `var(--text-dark)` |
-| `--plan-wall-outline` | `var(--text-color)` |
+| `--plan-wall-fill` | `var(--text-color)` mixed 58% into the canvas |
+| `--plan-wall-outline` | `var(--text-color)` mixed 38% into the canvas |
+| `--plan-wall-join` | `round` (see below) |
 | `--plan-wall-miter-limit` | `4` (see below) |
 | `--plan-door-color` | `var(--text-dark)` |
 | `--plan-window-color` | `var(--info-color)` |
+| `--plan-guide-color` | `var(--info-color)` |
+| `--plan-measure-color` | `var(--primary-color)` |
 
-**`--plan-wall-miter-limit`** is how sharp a corner may get before it is cut flat rather than run to a point. A mitred join extends to `1 / sin(angle / 2)` times the wall thickness, so it grows without bound as the angle closes: at 10 degrees that is eleven times the wall's own thickness, which reads as a spike fired out of the corner. The default of `4` keeps a true mitred point down to about 29 degrees and caps it at twice the wall's own thickness; sharper than that the corner is cut flat instead. Acute rooms bottom out around 45 degrees in practice and anything under 30 is not a room, so the corners that keep their point are the ones a building actually has. Raise it if you are drawing something genuinely needle-shaped and want the point kept. It governs the corners at a junction too, on the rare occasion one needs filling: where three or more walls meet, the corners between them are normally closed already, except when every wall at the node points into the same half-plane.
+**Walls are drawn as mass, not as ink.** Both wall tones are mixed towards the canvas rather than set to the text colour, so a wall reads as a solid body sitting on the floor and its edge as a soft rim rather than a drafted hairline. The pair must stay two distinct values: the outline pass is only visible where the fill pass does not cover it. The jamb faces at an opening take the *body* tone, since at a doorway they are the only thing standing in for the wall.
+
+**`--plan-wall-join`** is the corner treatment, `round` by default: the outer corners of the building come out softened, and an acute corner cannot throw a mitre spike out of the junction at all. Set it to `miter` for the drafting corner, and `--plan-wall-miter-limit` then governs how far that spike may run. The selection highlight always uses whichever join the walls use, because it is drawn over the same geometry and a different join would leave crescents of wall showing round the corners.
+
+**`--plan-wall-miter-limit`** applies when `--plan-wall-join` is `miter`. It is how sharp a corner may get before it is cut flat rather than run to a point. A mitred join extends to `1 / sin(angle / 2)` times the wall thickness, so it grows without bound as the angle closes: at 10 degrees that is eleven times the wall's own thickness, which reads as a spike fired out of the corner. The default of `4` keeps a true mitred point down to about 29 degrees and caps it at twice the wall's own thickness; sharper than that the corner is cut flat instead. Acute rooms bottom out around 45 degrees in practice and anything under 30 is not a room, so the corners that keep their point are the ones a building actually has. Raise it if you are drawing something genuinely needle-shaped and want the point kept. It governs the corners at a junction too, on the rare occasion one needs filling: where three or more walls meet, the corners between them are normally closed already, except when every wall at the node points into the same half-plane.
 
 **Hover tints the room's floor; selection colours the walls that bound it.** They answer different questions, so they get different channels and can be read at the same time without being confused. Hover is fleeting and asks *which room is under the pointer*, where a faint fill is instant and unambiguous — a wall is not, being shared between the rooms on either side of it. Selection is state you then work inside, where a wash over the room would bury its doors and its label.
 
-The selection highlight is built from **the same geometry as the walls themselves** and drawn in the same two passes, so it inherits their mitred corners and their gaps at openings: a door in the boundary stays a doorway rather than being painted over, and the wall keeps a crisp edge instead of turning into a flat slab. Where two selected rooms share a wall it is drawn once, so it never comes out twice as strong as its neighbours. The room fill carries `data-state="selected" | "hovered"` if you want to style either state further.
+The selection highlight is built from **the same geometry as the walls themselves** and drawn in the same two passes, so it inherits their corners and their gaps at openings: a door in the boundary stays a doorway rather than being painted over, and the wall keeps a crisp edge instead of turning into a flat slab. Where two selected rooms share a wall it is drawn once, so it never comes out twice as strong as its neighbours. The room fill carries `data-state="selected" | "hovered"` if you want to style either state further.
 
 ## Accessibility
 

package/docs/RoomViewer.md

@@ -54,6 +54,10 @@ A plan holds a stack of storeys and the viewer shows one at a time, with a tab p
 
 Drag to pan, wheel or pinch to zoom, and the controls in the corner zoom and fit. The plan fits itself to the viewport on mount, and refits when the floor or the canvas size changes — **until the viewer pans or zooms**, after which the view is theirs and the component stops moving it. `pannable={false}` freezes it.
 
+## Theming the plan
+
+Walls are drawn as mass rather than as ink: the body is `var(--text-color)` mixed 58% into the canvas, its edge the same colour at 38%, and the corners are rounded. Override with `--plan-wall-fill`, `--plan-wall-outline` and `--plan-wall-join: miter`. The full list of plan variables is in [RoomDrawer.md](RoomDrawer.md#theming), and both components read the same ones.
+
 ## Key props
 
 | Prop | Type | Description |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ahrowe/ui",
-  "version": "0.29.0",
+  "version": "0.29.1",
   "description": "A React UI component library with theming, CSS Modules, and TypeScript support",
   "keywords": [
     "components",