@crewlethq/ui 0.2.0 → 0.3.0

package/dist/Canvas/geometry.d.ts

@@ -0,0 +1,249 @@
+/**
+ * The geometry of a pannable, zoomable viewport, as pure functions.
+ *
+ * WHY IT IS SEPARATE FROM THE COMPONENT. Every rule here is arithmetic a
+ * browser-free suite cannot otherwise reach: jsdom has no layout, no pointer
+ * capture and no `DOMMatrix`, so a zoom that drifted off the cursor or a fit
+ * that cropped the root would pass any component suite. Kept pure, each rule
+ * is a function of numbers with a suite of its own, and the component is left
+ * with the wiring. `placePopup` in the Layer module is the same idea for the
+ * surfaces that float over a canvas.
+ *
+ * THE MODEL. A view is `{ x, y, k }`: a world point `p` lands on screen at
+ * `p * k + (x, y)`, with the origin at the viewport's top left corner. Every
+ * function returns a new view and never mutates one.
+ *
+ * THE RULES IT KEEPS.
+ *
+ * - A ZOOM KEEPS ITS FOCUS STILL. The world point under the cursor (or the
+ *   pinch midpoint, or the viewport centre for a key) stays where it was,
+ *   including when the zoom is clamped at a limit.
+ * - CONTENT CANNOT BE LOST. A pan leaves at least a margin of the content on
+ *   screen on each axis, so nobody drags the chart away and has nothing left
+ *   to drag it back by.
+ * - A FIT NEVER ENLARGES past one to one, and when the content is too tall to
+ *   fit even at the smallest zoom it aligns to the TOP, where a tree's root
+ *   is, rather than centring the root off screen.
+ * - A REVEAL MOVES AS LITTLE AS IT CAN: nothing when the target is already in
+ *   view, otherwise just enough to bring it inside the padding.
+ */
+export interface CanvasPoint {
+    x: number;
+    y: number;
+}
+export interface CanvasSize {
+    width: number;
+    height: number;
+}
+export interface CanvasRect extends CanvasPoint, CanvasSize {
+}
+/** A world point `p` is drawn at `p * k + (x, y)`. */
+export interface CanvasView {
+    x: number;
+    y: number;
+    k: number;
+}
+/** No pan and no zoom: what a canvas shows before it has been fitted. */
+export declare const IDENTITY_VIEW: CanvasView;
+/**
+ * The smallest zoom a canvas with no content to measure will go to. At a
+ * quarter size body text is about three pixels tall: past reading, but the
+ * shape of the structure and where a card sits in it are still legible.
+ *
+ * IT IS A BACKSTOP, NOT THE FLOOR. Once the content has been measured the
+ * floor is the FIT itself ([zoomLimits]): there is nothing to see past the
+ * whole chart, and a reader who has shrunk it to a quarter of that has a
+ * screen of grey and no way to tell which way is back. It is what the console
+ * chart does, where zooming out lerps toward the fit and snaps to it.
+ */
+export declare const CANVAS_MIN_ZOOM = 0.25;
+/**
+ * The smallest a canvas's largest zoom may be, for content whose own items
+ * were never measured.
+ *
+ * THE CEILING IS NORMALLY THE CONTENT'S ([zoomLimits]): one item filling the
+ * viewport, which is the console chart's own ceiling and the answer to "let me
+ * look at THIS one". Double size was the ceiling for every chart once, which
+ * on a 180px node in a 1267px viewport is a fifth of the magnification a
+ * reader can ask for there.
+ */
+export declare const CANVAS_MAX_ZOOM = 2;
+/**
+ * The largest zoom any canvas will go to, however small its largest item.
+ *
+ * A chart whose widest card is a few dozen pixels would otherwise let a reader
+ * zoom to twenty times, where a pan of one wheel notch crosses the whole
+ * content and nothing on screen says where they are.
+ */
+export declare const CANVAS_ZOOM_CEILING = 8;
+/**
+ * How much of the viewport a region focused with [regionView] is given: the
+ * visible width is this many times the region's own.
+ *
+ * Three, because the point of easing onto a region is to say where it is as
+ * well as what it is: the region fills the middle third and its surroundings
+ * are still drawn either side of it. The console chart's own ghost is 280
+ * units wide and it eases to a visible width between 660 and 1040, which is
+ * 2.4 to 3.7 times.
+ */
+export declare const CANVAS_FOCUS_CONTEXT = 3;
+/**
+ * How much of the viewport a region a reader has to TYPE INTO is given: the
+ * visible width is one and a half times the region's own, so it takes two
+ * thirds of the pane rather than a third.
+ *
+ * A region focused because a surface is ABOUT it is being pointed at, and the
+ * point is as much where it is as what it is. A node being COMPOSED in the
+ * chart is the other thing: its card holds the form, so what is drawn there
+ * has to be read and typed into at a size a pointer can hit. Measured on this
+ * build, the builder's add form is 320 by 400 and the pane 900 by 700: at
+ * [CANVAS_FOCUS_CONTEXT] it is drawn at 0.58 of its own size, with a 24px
+ * target landing on 14 screen pixels. At this step it is drawn at 1.16.
+ */
+export declare const CANVAS_COMPOSE_CONTEXT = 1.5;
+/** A fit shows everything at no more than actual size: a small tree is not blown up. */
+export declare const CANVAS_FIT_MAX_ZOOM = 1;
+/**
+ * One zoom step, for a key press or a button: a fifth. Small enough that two
+ * presses are a deliberate change rather than a jump, large enough that going
+ * from the smallest zoom to actual size takes eight presses, not twenty.
+ */
+export declare const CANVAS_ZOOM_STEP = 1.2;
+/**
+ * Wheel zoom per pixel of wheel delta, chosen so that one notch of a mouse
+ * wheel (which browsers report as about 100 pixels) is exactly one
+ * `CANVAS_ZOOM_STEP`: a wheel notch and a key press do the same thing. A
+ * trackpad pinch reports small deltas many times a second, which this turns
+ * into a smooth zoom.
+ */
+export declare const CANVAS_WHEEL_ZOOM_PER_PIXEL: number;
+/** What a wheel "line" is in pixels, for devices that report lines. */
+export declare const CANVAS_WHEEL_LINE_PX = 16;
+/**
+ * How much content stays on screen however far it is panned: about one card
+ * edge, which is enough to see where the chart went and to grab it back.
+ */
+export declare const CANVAS_PAN_MARGIN = 48;
+/** Space kept around the content by a fit, so the outermost cards do not touch the edge. */
+export declare const CANVAS_FIT_PADDING = 24;
+/** Space kept around a revealed item, so focus never lands on a card cut by the edge. */
+export declare const CANVAS_REVEAL_PADDING = 24;
+/** How far an arrow key pans a focused viewport: roughly half a card, so a press is visible. */
+export declare const CANVAS_PAN_STEP = 64;
+/**
+ * How far a press may travel and still be a click or a tap rather than a drag.
+ * A mouse is precise; a finger rolls several pixels while it rests, and a slop
+ * sized for a mouse would turn every tap into a tiny pan.
+ */
+export declare const CANVAS_TAP_SLOP: {
+    readonly mouse: 4;
+    readonly pen: 4;
+    readonly touch: 10;
+};
+/** How far a canvas may be zoomed out and in: see [zoomLimits]. */
+export interface CanvasZoomLimits {
+    min: number;
+    max: number;
+}
+/** What a canvas allows before its content has been measured. */
+export declare const CANVAS_ZOOM_LIMITS: CanvasZoomLimits;
+/**
+ * How far this content, in this viewport, may be zoomed.
+ *
+ * THE FLOOR IS THE FIT. Everything there is to see is on screen at the fit, so
+ * zooming out past it only shrinks the chart away from the reader; the console
+ * chart refuses it outright, and this is that refusal. Before the content has
+ * been measured there is no fit to floor at, so the backstop stands.
+ *
+ * THE CEILING IS ONE ITEM FILLING THE VIEWPORT, which is what a reader asking
+ * for more zoom is asking for: to look at THIS card. `largestItem` is the
+ * width in world units of the widest one, which the chart above this knows
+ * because it measured every card; with none given the fixed ceiling stands. It
+ * never goes below that fixed ceiling and never above [CANVAS_ZOOM_CEILING].
+ */
+export declare function zoomLimits(content: CanvasRect | null, viewport: CanvasSize, largestItem?: number, padding?: number): CanvasZoomLimits;
+export declare function clampZoom(k: number, limits?: CanvasZoomLimits): number;
+/** Where a world point is drawn, in viewport coordinates. */
+export declare function toScreen(view: CanvasView, point: CanvasPoint): CanvasPoint;
+/** Which world point a viewport coordinate sits over. */
+export declare function toWorld(view: CanvasView, point: CanvasPoint): CanvasPoint;
+/** A world rectangle as it is drawn, in viewport coordinates. */
+export declare function screenRect(view: CanvasView, rect: CanvasRect): CanvasRect;
+export declare function panBy(view: CanvasView, dx: number, dy: number): CanvasView;
+/** Zoom by `factor` about `focus` (a viewport point), which stays still. */
+export declare function zoomAt(view: CanvasView, factor: number, focus: CanvasPoint, limits?: CanvasZoomLimits): CanvasView;
+/**
+ * The same view, panned no further than leaves `margin` of the content on
+ * screen on each axis. A view that already satisfies it comes back unchanged.
+ */
+export declare function clampPan(view: CanvasView, content: CanvasRect, viewport: CanvasSize, margin?: number): CanvasView;
+/** The view that shows all of `content`, centred, at no more than actual size. */
+export declare function fitView(content: CanvasRect, viewport: CanvasSize, padding?: number): CanvasView;
+/** The smallest pan that brings world rectangle `target` inside the padded viewport. */
+export declare function revealView(view: CanvasView, target: CanvasRect, viewport: CanvasSize, padding?: number): CanvasView;
+/**
+ * The view that draws world point `after` where `before` was drawn.
+ *
+ * What keeps a node still on screen when a relayout moves it in the world: a
+ * card grows, its siblings shift, and the one the operator just acted on stays
+ * under their eyes instead of jumping away.
+ */
+export declare function anchorView(view: CanvasView, before: CanvasPoint, after: CanvasPoint): CanvasView;
+/** Where a two-pointer gesture began. */
+export interface PinchStart {
+    view: CanvasView;
+    a: CanvasPoint;
+    b: CanvasPoint;
+}
+/**
+ * The view for a pinch whose pointers have moved from `start` to `a` and `b`.
+ *
+ * The spread scales the zoom, and the world point under the starting midpoint
+ * follows the current midpoint, so one gesture zooms and pans together the way
+ * every touch map does.
+ */
+export declare function pinchView(start: PinchStart, a: CanvasPoint, b: CanvasPoint, limits?: CanvasZoomLimits): CanvasView;
+/** The minimal slice of a WheelEvent these functions read. */
+export interface WheelLike {
+    deltaX: number;
+    deltaY: number;
+    /** 0 pixels, 1 lines, 2 pages. */
+    deltaMode: number;
+    shiftKey?: boolean;
+}
+/**
+ * A wheel event's movement in pixels.
+ *
+ * Normalised across delta modes, and with Shift turning a vertical wheel into
+ * a horizontal pan on platforms that do not already do that themselves.
+ */
+export declare function wheelPixels(event: WheelLike, pageHeight: number): CanvasPoint;
+/** The zoom factor for a vertical wheel movement of `dy` pixels (up zooms in). */
+export declare function wheelZoomFactor(dy: number): number;
+/** Whether a press that went from `a` to `b` has become a drag. */
+export declare function beyondSlop(a: CanvasPoint, b: CanvasPoint, pointerType: string): boolean;
+/**
+ * The view that brings one world rectangle to the middle of the viewport, with
+ * room around it.
+ *
+ * WHAT IT IS FOR: a surface that is about ONE node (a form for the child about
+ * to be added under it, say) has to be able to say WHERE that node is, and the
+ * chart is the only thing that can say it. Easing onto the region is the
+ * console chart's own answer, and it saves the view it left so the reader is
+ * put back exactly where they were when the surface closes.
+ *
+ * THE ZOOM IS THE REGION'S, NOT THE READER'S: the region is given the middle
+ * third of the viewport ([CANVAS_FOCUS_CONTEXT]), clamped to what this content
+ * allows, so a small region is enlarged and a huge one is shrunk to fit.
+ *
+ * `ceiling` is how far that may go IN, for a region that has a size of its own
+ * to respect. A node being pointed AT has none, so the default is no ceiling
+ * and a small chart's node fills the pane; a region holding a FORM was drawn
+ * at the size its controls were designed at, and enlarging it is a page zoom
+ * nobody asked for. Measured on a two-node company: the engine's add form was
+ * drawn at 233%, its 16px labels at 37px and its buttons past a finger's
+ * width, with the chart around it off screen. [CANVAS_FIT_MAX_ZOOM] is the
+ * ceiling such a caller passes, which is the same "never blown up" this
+ * module's fit already keeps.
+ */
+export declare function regionView(region: CanvasRect, viewport: CanvasSize, limits?: CanvasZoomLimits, context?: number, ceiling?: number): CanvasView;

package/dist/Canvas/index.d.ts

@@ -0,0 +1,5 @@
+import './Canvas.css';
+export { Canvas } from './Canvas.js';
+export type { CanvasHandle, CanvasLabels, CanvasProps } from './Canvas.js';
+export { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, CANVAS_FIT_PADDING, CANVAS_FOCUS_CONTEXT, CANVAS_MAX_ZOOM, CANVAS_MIN_ZOOM, CANVAS_PAN_MARGIN, CANVAS_PAN_STEP, CANVAS_REVEAL_PADDING, CANVAS_TAP_SLOP, CANVAS_WHEEL_LINE_PX, CANVAS_WHEEL_ZOOM_PER_PIXEL, CANVAS_ZOOM_CEILING, CANVAS_ZOOM_LIMITS, CANVAS_ZOOM_STEP, IDENTITY_VIEW, anchorView, beyondSlop, clampPan, clampZoom, fitView, panBy, pinchView, regionView, revealView, screenRect, toScreen, toWorld, wheelPixels, wheelZoomFactor, zoomAt, zoomLimits, } from './geometry.js';
+export type { CanvasPoint, CanvasRect, CanvasSize, CanvasView, CanvasZoomLimits, PinchStart, WheelLike, } from './geometry.js';

package/dist/Canvas/index.js

@@ -0,0 +1,8 @@
+export { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, CANVAS_FIT_PADDING, CANVAS_FOCUS_CONTEXT, CANVAS_MAX_ZOOM, CANVAS_MIN_ZOOM, CANVAS_PAN_MARGIN, CANVAS_PAN_STEP, CANVAS_REVEAL_PADDING, CANVAS_TAP_SLOP, CANVAS_WHEEL_LINE_PX, CANVAS_WHEEL_ZOOM_PER_PIXEL, CANVAS_ZOOM_CEILING, CANVAS_ZOOM_LIMITS, CANVAS_ZOOM_STEP, Canvas, IDENTITY_VIEW, anchorView, beyondSlop, clampPan, clampZoom, fitView, panBy, pinchView, regionView, revealView, screenRect, toScreen, toWorld, wheelPixels, wheelZoomFactor, zoomAt, zoomLimits } from '../chunk-CMEE37QJ.js';
+import '../chunk-53DVJCVW.js';
+import '../chunk-7RPGY3JE.js';
+import '../chunk-ITHXJHBB.js';
+import '../chunk-F27EPQ7D.js';
+import '../chunk-BZYDZBAN.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/Canvas/layerNode.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Hands a surface the element its own LayerHost provides.
+ *
+ * WHY IT EXISTS. A host keeps its element in state and publishes it through
+ * context, so the only way to reach it is from inside. A surface that draws a
+ * host over content that MOVES (a canvas that pans and zooms, a grid that
+ * scrolls sideways) has to dispatch `LAYER_REPOSITION_EVENT` on that element
+ * whenever the content moves, which is what an open menu or picker listens to
+ * in order to follow its anchor or close with it. So a component renders this
+ * inside its host and keeps what it reports.
+ *
+ * ONE COPY, imported by the canvas and by the grid. Written twice it would be
+ * two places to get the document body case wrong. It belongs here rather than
+ * in the Layer module only because this package's Layer folder has another
+ * owner; the right home for it is beside `LayerHost`, as a hook that answers
+ * with the host's own element (see the note in the package README).
+ */
+export declare function LayerNodeBridge({ onNode }: {
+    onNode: (el: HTMLElement | null) => void;
+}): null;

package/dist/Canvas-Q6JETCWR.css

@@ -0,0 +1,315 @@
+/*
+ * A bounded viewport (Canvas.tsx). It fills the box it is given and clips; the
+ * page's own scroller is never involved.
+ */
+
+.crewlet-canvas {
+  position: relative;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  /*
+   * THE PAGE'S OWN GROUND, not a panel's. A canvas is a FIELD that cards are
+   * placed on, and a card carries the panel surface: painted on the panel
+   * colour the two were the same grey, so a chart read as a sheet of cards
+   * with no space between them rather than as objects standing on a field.
+   * The frame is what says where the canvas ends.
+   */
+  background: var(--color-surface-background);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-lg);
+}
+
+.crewlet-canvas__viewport {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  cursor: grab;
+  /* Until it is tapped, one finger belongs to the page's vertical scroll. */
+  touch-action: pan-y;
+}
+
+/*
+ * The ring is drawn INSIDE the viewport's own box, because the canvas clips:
+ * an outset ring would be cut away by the border it sits under.
+ */
+.crewlet-canvas__viewport:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-canvas[data-touch-active='true'] .crewlet-canvas__viewport {
+  touch-action: none;
+}
+
+.crewlet-canvas[data-panning='true'] .crewlet-canvas__viewport {
+  cursor: grabbing;
+  user-select: none;
+}
+
+.crewlet-canvas__world {
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform-origin: 0 0;
+}
+
+/*
+ * Nothing is shown before the first fit: a chart that appears at the origin and
+ * then jumps into place reads as the page misbehaving.
+ */
+.crewlet-canvas[data-ready='false'] .crewlet-canvas__world {
+  visibility: hidden;
+}
+
+.crewlet-canvas[data-panning='true'] .crewlet-canvas__world {
+  will-change: transform;
+}
+
+/*
+ * Eased only when asked for, never while a finger or a wheel is moving it, and
+ * in one of TWO eases, because the canvas does two different things.
+ *
+ * `near` is a CORRECTION to the view the reader already has: a fit, a zoom
+ * step, the least pan that brings something into view. The emphasised
+ * decelerate at the default step, which is what an arriving surface takes
+ * everywhere in the system, so it lands rather than drifts.
+ *
+ * `travel` is the chart GOING SOMEWHERE ELSE: easing onto the node a surface
+ * is about, onto a node being composed, and back again. That is a gesture
+ * rather than a correction, and what the movement says is WHERE the place is,
+ * so cutting it short throws away the whole of what it is for. Measured
+ * against the console chart this package is drawn to match, whose own viewBox
+ * ease is 400ms of easeInOutQuad: at the near step ours was 150ms, 2.7 times
+ * faster, and the owner's words for it were that there was no zoom effect at
+ * all. Two `moderate` steps is that chart's 400 exactly, written as scale
+ * steps rather than as a number off the scale, and the in-out curve is the
+ * shape of its easing rather than the decelerate a surface lands on: a journey
+ * is read by leaving as well as by arriving.
+ *
+ * The two properties the world carries anyway are repeated in both, because a
+ * transition property is replaced rather than added to.
+ */
+.crewlet-canvas[data-animate='near'] .crewlet-canvas__world {
+  transition:
+    transform var(--motion-duration-base) var(--motion-easing-emphasized),
+    filter var(--motion-duration-slow) var(--motion-easing-default),
+    opacity var(--motion-duration-slow) var(--motion-easing-default);
+}
+
+.crewlet-canvas[data-animate='travel'] .crewlet-canvas__world {
+  transition:
+    transform calc(var(--motion-duration-moderate) * 2) var(--motion-easing-in-out),
+    filter var(--motion-duration-slow) var(--motion-easing-default),
+    opacity var(--motion-duration-slow) var(--motion-easing-default);
+}
+
+/*
+ * The untransformed overlay, under the layer host that carries the menus and
+ * pickers opened from the content. Empty space passes presses through to the
+ * viewport beneath it; each child takes its own back, because a control drawn
+ * here has to be pressable, and a note that must not swallow the drag that
+ * pans the chart turns them off on itself.
+ */
+.crewlet-canvas__overlay {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.crewlet-canvas__overlay > * {
+  pointer-events: auto;
+}
+
+/*
+ * THE CHART'S OWN CHROME, as ONE group in ONE corner: a column of bars, each a
+ * surface of its own, in the corner the caller names. The console org chart
+ * stacks its toolbar, its key hint and its chart switch exactly this way, and
+ * what is being avoided is what happened when it was not one group: the zoom
+ * bar sat in one corner of the canvas and two of its three companions sat in
+ * the page's toolbar 800px away, acting on a canvas they were nowhere near.
+ */
+.crewlet-canvas__controls {
+  position: absolute;
+  right: var(--spacing-3);
+  bottom: var(--spacing-3);
+  z-index: var(--z-index-raised);
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: var(--spacing-2);
+}
+
+/*
+ * TOP RIGHT IS A CHART'S CORNER. A tree grows downward from its root, so the
+ * bottom right is where the content ends up and the top right is the corner
+ * that stays empty; it is also the first place a reader looks after the root.
+ */
+.crewlet-canvas__controls[data-placement='top-right'] {
+  top: var(--spacing-3);
+  bottom: auto;
+}
+
+/*
+ * ONE BAR: a well at the panel radius with its controls lifted inside it. The
+ * chip step is exactly one hairline tighter than the well around it, which is
+ * what reads as sitting IN it rather than beside it, and it is the console
+ * chart's own 7px against its 10px bar.
+ */
+.crewlet-canvas__bar {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  padding: var(--spacing-1);
+  background: var(--color-surface-glass);
+  backdrop-filter: blur(var(--blur-sm));
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-xs);
+}
+
+.crewlet-canvas__bar .crewlet-icon-btn {
+  border-radius: var(--radius-chip);
+}
+
+/*
+ * A NOTE UNDER THE CONTROLS, about a key or a state the canvas is in. The
+ * bar's own surface at the smallest step, because it is one of the group's
+ * bars rather than a thing floating over the chart; inert, because it is
+ * decoration and a press meant for the chart must reach the chart.
+ *
+ * AND IT IS DRAWN ONLY WHEN IT SAYS SOMETHING. The element stays in the
+ * document while it is empty, because a live region a page INSERTS with its
+ * message already in it is a region a screen reader may never announce, where
+ * one that was there and is then filled is announced; an empty bar with a
+ * border around it is not a thing to draw, so it is not.
+ */
+.crewlet-canvas__hint {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  max-width: 16rem;
+  padding: var(--spacing-1) var(--spacing-2);
+  font-size: var(--font-size-2xs);
+  line-height: var(--font-line-height-tight);
+  color: var(--color-text-secondary);
+  text-align: right;
+  background: var(--color-surface-glass);
+  backdrop-filter: blur(var(--blur-sm));
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-xs);
+  pointer-events: none;
+}
+
+.crewlet-canvas__hint:empty {
+  display: none;
+}
+
+/*
+ * THE ZOOM READOUT, between the two steppers. It says where the view stands,
+ * which two chevrons never do, and it is the way to a number without pressing a
+ * chevron eight times.
+ *
+ * It is the SMALL CONTROL STEP tall, like the buttons either side of it, so the
+ * row of controls is one row of targets rather than two heights; and the same
+ * step wide at least, so a zoom of 25% and one of 100% do not move the buttons
+ * beside them as a reader zooms. `tabular-nums` is the other half of that: a
+ * proportional 1 is narrower than a 0, so a digit changing would otherwise
+ * shift the two characters beside it.
+ */
+.crewlet-canvas__zoom,
+.crewlet-canvas__zoom-field {
+  flex: none;
+  box-sizing: border-box;
+  /*
+   * ONE WIDTH FOR BOTH, and it is a WIDTH rather than a floor. As a floor it
+   * held the button to the step and did nothing at all to the field, whose own
+   * intrinsic size is its `size` attribute: 155px at this type, so pressing
+   * the readout made the bar 111px wider and moved every button in it out from
+   * under the pointer. The console chart's is a fixed 36px in the slot the
+   * readout used, for that reason.
+   */
+  width: var(--size-control-lg);
+  height: var(--size-control-sm);
+  padding: 0 var(--spacing-1);
+  font: inherit;
+  font-size: var(--font-size-xs);
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+  color: var(--color-text-secondary);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+}
+
+.crewlet-canvas__zoom {
+  cursor: pointer;
+  border-radius: var(--radius-chip);
+}
+
+.crewlet-canvas__zoom:hover:not(:disabled) {
+  color: var(--color-text-primary);
+  background: var(--color-surface-hover);
+}
+
+.crewlet-canvas__zoom:disabled {
+  color: var(--color-text-tertiary);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/*
+ * The field is the box it replaced the button with, so it is drawn as a box:
+ * the boundary is what says a value can be typed here, where the button's is
+ * transparent.
+ */
+.crewlet-canvas__zoom-field {
+  color: var(--color-text-primary);
+  background: var(--color-surface-inset);
+  border-color: var(--color-border-control);
+}
+
+.crewlet-canvas__zoom:focus-visible,
+.crewlet-canvas__zoom-field:focus-visible {
+  outline: 2px solid var(--color-focus);
+  /* Inset, like every ring on this canvas: the controls sit against the
+     viewport's clipping edge, where an outset ring is cut away. */
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+/*
+ * THE CONTENT PUSHED BACK, for a surface opened over the canvas about one part
+ * of it. Blurred and faded rather than covered: the chart is still there
+ * behind the decision being made about it, which is what tells a reader where
+ * the thing they are naming will go. The console chart does the same while a
+ * node is being added.
+ *
+ * ON THE WORLD, NOT THE CANVAS. A filter on the canvas would blur the controls
+ * and any note over it too, and a filter makes a containing block, which would
+ * take every menu the content opens out of its own layer.
+ */
+.crewlet-canvas[data-dimmed='true'] .crewlet-canvas__world {
+  filter: blur(var(--blur-xs));
+  opacity: 0.55;
+}
+
+.crewlet-canvas__world {
+  transition:
+    filter var(--motion-duration-slow) var(--motion-easing-default),
+    opacity var(--motion-duration-slow) var(--motion-easing-default);
+}
+
+/*
+ * A READER WHO ASKED FOR LESS is put where they are going without travelling:
+ * both eases are cancelled, so the chart ARRIVES at the node a surface is
+ * about, or at a node being composed, rather than moving there. Nothing is
+ * lost but the journey.
+ */
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-canvas[data-animate='near'] .crewlet-canvas__world,
+  .crewlet-canvas[data-animate='travel'] .crewlet-canvas__world,
+  .crewlet-canvas__world {
+    transition: none;
+  }
+}