@crewlethq/ui 0.4.3 → 0.5.0

package/dist/Tree/layout.d.ts

@@ -38,6 +38,14 @@
  *   which is what reads as tidy.
  * - A ZERO HEIGHT BOX STILL OCCUPIES ITS ROW, so two of them are never drawn
  *   on top of each other.
+ * - A GROUP IS ROOM THE LAYOUT KEEPS, NOT A BOX DRAWN OVER IT AFTERWARDS. A
+ *   run of siblings can be enclosed in a box (a unit's seats, say) whose
+ *   padding and header are part of every member's outline, so a neighbour
+ *   that is not a member is held `gapX` clear of the BOX rather than of the
+ *   member card, while two members of one box stay `gapX` apart from each
+ *   other. The header is reserved above the run's rank and the padding below
+ *   it, on both rank modes, so a box never reaches into the gap a connector
+ *   runs through. See [LayoutGroup].
  *
  * Coordinates come back with the forest's top left corner at the origin plus
  * `margin`, and boxes in pre-order. The outline merge costs time proportional to a subtree's
@@ -79,6 +87,10 @@ export interface LayoutGaps {
     gapY: number;
     /** Where a box's top edge sits. Unset, `per-parent`. */
     ranks?: LayoutRanks | undefined;
+    /**
+     * Runs of siblings enclosed in a box: see [LayoutGroup]. Unset, none.
+     */
+    groups?: readonly LayoutGroup[] | undefined;
     /**
      * Space kept on all four sides of the forest.
      *
@@ -90,6 +102,44 @@ export interface LayoutGaps {
      */
     margin?: number | undefined;
 }
+/** The room a group's box keeps around its members: see [LayoutGroup]. */
+export interface LayoutGroupInset {
+    /** Between the box's side and its outermost member, on each side. */
+    x: number;
+    /** Between the box's top and its members' tops: its header lives here. */
+    top: number;
+    /** Between its members' bottoms and the box's bottom. */
+    bottom: number;
+}
+/**
+ * A box drawn round a RUN OF SIBLINGS: consecutive children of one parent, or
+ * consecutive roots.
+ *
+ * WHY SIBLINGS, AND WHY CONSECUTIVE. A box is one rectangle, and a rectangle
+ * round boxes that are not next to each other in the drawing encloses
+ * whatever lies between them: a member two ranks down, or a neighbour placed
+ * between two members, would be drawn inside a group it does not belong to.
+ * A run of siblings is the one shape a tidy layout keeps together on one rank
+ * with nothing between its members, so it is the shape a box can be drawn
+ * round honestly; anything else is refused by name rather than drawn wrong.
+ * An organization's unit is such a run: the seats that report to one lead.
+ *
+ * Each group carries its own inset because a header's height is a MEASURED
+ * value (a label and whatever chip rides beside it), and two groups need not
+ * say the same amount.
+ */
+export interface LayoutGroup {
+    id: string;
+    /** The boxes it encloses, in any order. Every one is a box of the forest. */
+    members: readonly string[];
+    inset: LayoutGroupInset;
+}
+/** A group where the layout put it: its members' extent plus its inset. */
+export interface PlacedGroup extends CanvasRect {
+    id: string;
+    members: readonly string[];
+    inset: LayoutGroupInset;
+}
 /** A box where the layout put it. */
 export interface PlacedNode extends CanvasRect {
     id: string;
@@ -100,13 +150,39 @@ export interface ForestLayout {
     /** Every box, in pre-order. */
     nodes: PlacedNode[];
     byId: Map<string, PlacedNode>;
-    /** The forest's extent: always at the origin. */
+    /**
+     * Every group, in the order it was given, as the rectangle its box is drawn
+     * in. Absent from a layout built by hand with none.
+     */
+    groups?: PlacedGroup[];
+    /**
+     * The rank mode it was laid out on, which is where a connector's run goes:
+     * see [layoutConnectors]. Absent from a layout built by hand, which is then
+     * read as `per-parent`.
+     */
+    ranks?: LayoutRanks;
+    /** The forest's extent, groups included: always at the origin. */
     bounds: CanvasRect;
 }
+/**
+ * Each group's rectangle: its members' extent, plus its inset on every side.
+ *
+ * Exported because the extent is a function of where the members are DRAWN,
+ * which during a relayout is on the way to where the layout put them: a box
+ * computed once from the target would sit at the end of a journey its members
+ * are still making.
+ */
+export declare function placeGroups(byId: ReadonlyMap<string, CanvasRect>, groups: readonly Pick<LayoutGroup, 'id' | 'members' | 'inset'>[]): PlacedGroup[];
 /** Lays out a forest of measured boxes: see the module doc for the rules. */
 export declare function layoutForest(roots: readonly LayoutNode[], gaps: LayoutGaps): ForestLayout;
-/** The two shapes a connector is drawn in: see [layoutConnectors]. */
-export type TreeConnectorShape = 'step' | 'curve';
+/**
+ * The shapes a connector is drawn in: see [layoutConnectors].
+ *
+ * `elbow` (the default) and `straight` are the org chart's own pair; `step` and
+ * `curve` are the two drawings this chart had before the elbow, kept because
+ * each is a real choice a caller makes knowing what it costs.
+ */
+export type TreeConnectorShape = 'elbow' | 'straight' | 'step' | 'curve';
 /**
  * One connector: the child it arrives at, the parent it leaves, and the path.
  *
@@ -128,31 +204,30 @@ export interface TreeConnector {
  * The connector from each box to its parent, as SVG path data: down from the
  * parent's bottom centre and into the child's top centre.
  *
- * TWO SHAPES, AND THE DEFAULT IS THE STEP: down, a rounded corner, across the
- * middle of the gap, another rounded corner, and down into the child. The
- * square step and the single cubic were both tried here first.
- *
- * A SQUARE step reads correctly at any width but meets its own siblings at a
- * right angle on the shared horizontal run, so a parent with four children
- * draws one long line with four corners on it and which corner belongs to
- * which child is read by tracing.
- *
- * A single CUBIC from the parent's bottom to the child's top (`curve`) fixes
- * that when the children sit close together, and loses definition exactly
- * where a chart is widest. A subtree is as wide as everything under it, so the
- * horizontal distance between a parent and an outer child grows without bound
- * while the vertical gap stays one rank; with both control points halfway down
- * that gap, the curve spends most of its length running horizontally in the
- * middle of the gap and reads as a long flat line passing under the parent,
- * its ends two stubs nowhere near it. Measured on a three-unit company: 430
- * units across, 105 down.
- *
- * The rounded step is the shape that keeps both properties, so it is what a
- * chart gets unless it asks otherwise: the corner is where the branch turns,
- * so it sits near the CHILD rather than shared with its siblings, and the drop
- * into each child is vertical however far to the side it is. `curve` is the
- * shape of the console's own org chart, which this package is drawn to match,
- * and a caller that wants that drawing asks for it knowing the above.
+ * `elbow`, THE DEFAULT, is ORTHOGONAL: down, a quarter circle of
+ * [ELBOW_RADIUS], across the run the parent's children share, another quarter
+ * circle, and down into the child. Every straight piece of it is vertical or
+ * horizontal, so a branch reads as a line of the org chart rather than as a
+ * drawing, and the corner is where the branch turns, near the CHILD, so which
+ * corner belongs to which child is read without tracing. The corners are true
+ * circular arcs (`A`), which is what a radius is; a quadratic through the
+ * corner point is not round and bulges at the size the design draws.
+ *
+ * `straight` is one segment from the parent's bottom centre to the child's
+ * top: the drawing for a chart dense enough that the run a parent's children
+ * share would be a line with forty corners on it.
+ *
+ * `step` is the elbow with a softer [STEP_RADIUS] turn drawn in quadratics,
+ * which this chart drew before the elbow. `curve` is a single cubic from the
+ * parent's bottom to the child's top, both handles on the run: the console's
+ * own org chart draws it, and it loses definition exactly where a chart is
+ * widest, because a subtree is as wide as everything under it while the gap
+ * stays one rank, so an outer child's curve spends most of its length running
+ * flat through the gap. Measured on a three-unit company: 430 units across,
+ * 105 down.
+ *
+ * Every shape but `straight` runs across at the same height, [busOf], which
+ * keeps it clear of every group box.
  *
  * Here rather than in the component that draws them, because it is arithmetic
  * over the layout and nothing about it is React's.

package/dist/TreeCanvas/TreeCanvas.d.ts

@@ -46,6 +46,17 @@
  * still on screen. Nothing else is an input to the layout: a badge whose text
  * changes inside a slot that keeps its size lays nothing out again.
  *
+ * A RUN OF SIBLINGS CAN BE ENCLOSED IN A BOX, a unit round its seats, with a
+ * label along its top (`groups`). The box is room the layout KEEPS rather than
+ * a rectangle drawn over it afterwards: its padding and header are part of the
+ * members' outlines, so a card that is not a member is never drawn inside one
+ * and two boxes are never drawn over each other. The label rides OVER the
+ * connectors, on the box's own fill, so a branch dropping into a member passes
+ * behind the words rather than through them. The box is drawing, like the
+ * connectors, and hidden from assistive technology; what it SAYS is given to
+ * each member card as its description, which is where a reader of the tree
+ * meets it.
+ *
  * AND IT MOVES. A chart arrives rank by rank rather than all at once, and a
  * relayout TWEENS every card from where it was to where it is, connectors and
  * all, so adding a seat is visibly the same chart rearranging rather than a
@@ -107,6 +118,11 @@ export interface TreeItemProps {
     'aria-posinset': number;
     'aria-expanded': boolean | undefined;
     'aria-selected': boolean;
+    /**
+     * The label of the group box the node's card is drawn in, for the card's
+     * own node: see `TreeCanvasProps.groups`. Unset for every other node.
+     */
+    'aria-describedby': string | undefined;
     'data-tree-id': string;
     ref: (el: HTMLElement | null) => void;
     onClick: (event: MouseEvent<HTMLElement>) => void;
@@ -224,6 +240,33 @@ export interface TreeComposing {
     /** Escape inside the ghost. Cancelling is the caller's: it owns the form. */
     onCancel: () => void;
 }
+/**
+ * A box drawn round a run of sibling cards, with a label along its top: a unit
+ * round the seats in it, say. See `TreeCanvasProps.groups`.
+ */
+export interface TreeCanvasGroup {
+    /** The group's own id. Unique among the groups, and never a card's id. */
+    id: string;
+    /**
+     * What the box is called, such as "Engineering · Core". Drawn along its top
+     * in the tertiary ink, and read as the description of every member card.
+     */
+    label: string;
+    /**
+     * A short key AHEAD of the label, such as the project key chip a unit's
+     * work is filed under: "ENG Engineering · Core", as the approved org chart
+     * reads it and as a rail row's `lead` puts a project's key before its name.
+     * Drawn and described with the label.
+     */
+    lead?: ReactNode | undefined;
+    /**
+     * The CARDS it encloses: ids `cards` returns, all children of one card (or
+     * all roots) and consecutive among them. A member that is not drawn right
+     * now (inside a closed card) is left out, and a group with none drawn is not
+     * drawn at all. Anything else is refused: see [LayoutGroup].
+     */
+    memberIds: readonly string[];
+}
 export interface TreeCanvasProps {
     /** The accessible name of the chart, such as "Structure chart". */
     label: string;
@@ -268,16 +311,6 @@ export interface TreeCanvasProps {
      * the pointer would move the card somebody was aiming at out from under them.
      */
     renderUnder?: ((id: string, card: TreeCardContext) => ReactNode) | undefined;
-    /**
-     * Whether a card is drawn with the dashed edge.
-     *
-     * It is the mark a card carries when it stands for somebody outside the
-     * system: a person rather than an agent, a seat nobody holds. The BOUNDARY
-     * says it rather than a hue, so it reads to a reader who cannot separate the
-     * hue at all, and the card's frame is this component's to draw so the mark
-     * is too. Unset, every card takes the solid edge.
-     */
-    cardOutline?: ((id: string) => boolean) | undefined;
     /**
      * The hue a card is tinted with, and the connector arriving at it.
      *
@@ -317,11 +350,24 @@ export interface TreeCanvasProps {
      */
     ranks?: LayoutRanks | undefined;
     /**
-     * The shape of the connectors: a rounded step (the default) or the single
-     * cubic the console's org chart draws. See [layoutConnectors], which states
-     * what each shape costs.
+     * The shape of the connectors: `elbow` (the default), orthogonal with a
+     * small round corner; `straight`, one segment; or the two older drawings,
+     * the softer `step` and the single `curve` the console's org chart draws.
+     * See [layoutConnectors], which states what each shape costs.
      */
     connector?: TreeConnectorShape | undefined;
+    /**
+     * Boxes drawn round runs of sibling cards, each with a label along its top:
+     * see [TreeCanvasGroup]. Keep it stable, as `nodes` is: it is an input to
+     * the layout.
+     *
+     * WHAT A GROUP IS FOR. A chart's cards say who reports to whom; a group says
+     * which of them work TOGETHER, the seats of one unit under the lead they
+     * report to, which the lines alone cannot: two units under one lead are two
+     * runs of children with nothing between them. The box is laid out, not
+     * painted over the layout, so a card outside it is never drawn inside it.
+     */
+    groups?: readonly TreeCanvasGroup[] | undefined;
     /**
      * Carries out Enter (activate) or Delete and Backspace (remove) on a node.
      * Return false when the node has no such action, so the key travels on.
@@ -381,4 +427,4 @@ export interface TreeCanvasProps {
     ref?: Ref<TreeCanvasHandle> | undefined;
     className?: string | undefined;
 }
-export declare function TreeCanvas({ label, nodes, cards, cardOf, renderCard, renderUnder, cardOutline, cardTone, appearance, ranks, connector, onNodeKey, onNodeKeyDown, hasNodeMenu, selectedId, onSelect, anchorNode, overlay, controlsPlacement, controlsExtra, controlsBelow, hint, dimmed, composing, labels, ref, className, }: TreeCanvasProps): import("react").JSX.Element;
+export declare function TreeCanvas({ label, nodes, cards, cardOf, renderCard, renderUnder, cardTone, appearance, ranks, connector, groups, onNodeKey, onNodeKeyDown, hasNodeMenu, selectedId, onSelect, anchorNode, overlay, controlsPlacement, controlsExtra, controlsBelow, hint, dimmed, composing, labels, ref, className, }: TreeCanvasProps): import("react").JSX.Element;

package/dist/TreeCanvas/index.d.ts

@@ -1,3 +1,3 @@
 import './TreeCanvas.css';
 export { TreeCanvas } from './TreeCanvas.js';
-export type { TreeActionsProps, TreeCanvasHandle, TreeCanvasProps, TreeCardContext, TreeCardInput, TreeCardTone, TreeComposing, TreeItemProps, } from './TreeCanvas.js';
+export type { TreeActionsProps, TreeCanvasGroup, TreeCanvasHandle, TreeCanvasProps, TreeCardContext, TreeCardInput, TreeCardTone, TreeComposing, TreeItemProps, } from './TreeCanvas.js';

package/dist/TreeCanvas/index.js

@@ -1,10 +1,10 @@
-export { TreeCanvas } from '../chunk-7HPRF5XN.js';
-import '../chunk-NTRZGNEX.js';
-import '../chunk-CMEE37QJ.js';
+export { TreeCanvas } from '../chunk-FUF52K7E.js';
+import '../chunk-S3BCVWTU.js';
+import '../chunk-BMYPGGPV.js';
 import '../chunk-53DVJCVW.js';
 import '../chunk-7RPGY3JE.js';
-import '../chunk-ITHXJHBB.js';
-import '../chunk-F27EPQ7D.js';
-import '../chunk-BZYDZBAN.js';
+import '../chunk-R25RGPUB.js';
+import '../chunk-4UQ7SMPK.js';
+import '../chunk-ETYEBKR4.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/TreeCanvas/motion.d.ts

@@ -29,9 +29,10 @@
  * two speeds. The tween is over the layout's own numbers, so a frame is a
  * position rather than a promise about one, and the connectors are recomputed
  * from those same numbers: a line that did not travel with its cards would
- * spend the whole relayout pointing at where a card used to be.
+ * spend the whole relayout pointing at where a card used to be, and so is every
+ * group's box, which is drawn round wherever its members are this frame.
  */
-import type { ForestLayout } from '../Tree/index.js';
+import { type ForestLayout } from '../Tree/index.js';
 /** How far apart two cards are revealed, in milliseconds. */
 export declare const ENTRANCE_STEP_MS = 60;
 /** How long a relayout takes to move every card from where it was to where it is. */

package/dist/{TreeCanvas-WBNQPHC7.css → TreeCanvas-HVOV4SQN.css}

@@ -31,7 +31,10 @@
 .crewlet-tree-canvas__card,
 .crewlet-tree-canvas__links,
 .crewlet-tree-canvas__gap,
-.crewlet-tree-canvas__margin {
+.crewlet-tree-canvas__margin,
+.crewlet-tree-canvas__group,
+.crewlet-tree-canvas__group-head,
+.crewlet-tree-canvas__group-pad {
   position: absolute;
   top: 0;
   left: 0;
@@ -170,15 +173,6 @@
   --crewlet-tree-canvas-card-accent: var(--color-node-blue);
 }
 
-/*
- * A card that stands for somebody outside the system takes the dashed edge
- * every such seat wears. The BOUNDARY says it rather than a hue, so it reads
- * to somebody who cannot separate the hue at all.
- */
-.crewlet-tree-canvas__card--outline {
-  border-style: dashed;
-}
-
 /*
  * THE NODES INSIDE THE CARD. `role="treeitem"` is this component's own
  * contract, handed to the caller by `ctx.item(id)`, so the inset a node sits
@@ -338,13 +332,13 @@
 /*
  * A reveal is a state change rather than an entrance, so under reduced motion
  * it simply happens. The control is still shown and still reached the same way.
+ * The `node` appearance's own quiet controls are stopped in its own section,
+ * below the rules that start them: named here, above those rules, the stops
+ * tied with them on specificity and lost on source order.
  */
 @media (prefers-reduced-motion: reduce) {
   .crewlet-tree-canvas__actions,
-  .crewlet-tree-canvas__under,
-  .crewlet-tree-canvas--node .crewlet-tree-canvas__under > :not(.crewlet-add-pill),
-  .crewlet-tree-canvas--node .crewlet-org-node__leading,
-  .crewlet-tree-canvas--node .crewlet-org-node-lead__clear {
+  .crewlet-tree-canvas__under {
     transition: none;
   }
 }
@@ -376,6 +370,92 @@
   pointer-events: none;
 }
 
+/* ---------------------------------------------------------------------------
+ * A GROUP: a box round a run of sibling cards, with a label along its top.
+ *
+ * The approved design's unit box: a hairline on the card rung with the unit's
+ * name in the tertiary ink at 12px, and the project key chip at the end of
+ * that line. The hairline is `--color-border-default` over
+ * `--color-surface-subtle` standing on the canvas's own ground, which is the
+ * pair the palette suite already holds to a visible step (the card hairline
+ * rule); a card inside the box is the same rung and is found by its own
+ * hairline, exactly as a card on a sheet is.
+ *
+ * THE ROOM IS THE LAYOUT'S. The padding round the members is the probe below,
+ * and the room above them is the header's own measured height, so the box is
+ * never drawn over a card it does not hold and a branch is never run through
+ * it: both are reserved by `layoutForest` before anything is placed.
+ * ------------------------------------------------------------------------- */
+
+/*
+ * The room beside and below a group's members, as a token: `--spacing-3`,
+ * which is also the label's own inset, so the label starts on the line the
+ * first member's edge does.
+ */
+.crewlet-tree-canvas__group-pad {
+  width: var(--spacing-3);
+  height: var(--spacing-3);
+  visibility: hidden;
+  pointer-events: none;
+}
+
+/*
+ * THE BOX IS DASHED, as the approved org chart draws a unit: a card's own
+ * edge is solid, and a box round several cards drawn the same way read as one
+ * more, larger card. A dash says the edge is a grouping rather than a thing.
+ * It is the STRONG border step, the artboard's, because a dash spends half its
+ * length on gaps: at the plain hairline's step the edge all but disappeared
+ * against the box's own fill.
+ */
+.crewlet-tree-canvas__group {
+  box-sizing: border-box;
+  background: var(--color-surface-subtle);
+  border: 1px dashed var(--color-border-strong);
+  border-radius: var(--radius-xl);
+  pointer-events: none;
+}
+
+/*
+ * THE LABEL'S LINE, and what the room above the members is measured from: one
+ * line, at the box's width, truncated rather than wrapped, because a label
+ * that wrapped would move every rank below it.
+ */
+.crewlet-tree-canvas__group-head {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  padding: var(--spacing-2) var(--spacing-3);
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-snug);
+  color: var(--color-text-tertiary);
+  white-space: nowrap;
+  pointer-events: none;
+}
+
+/*
+ * ON THE BOX'S OWN FILL, over the branches: a branch dropping into a member
+ * passes behind the words rather than striking through them, and the fill is
+ * the box's, so nothing about the label reads as a second surface.
+ */
+.crewlet-tree-canvas__group-label,
+.crewlet-tree-canvas__group-lead {
+  background: var(--color-surface-subtle);
+}
+
+.crewlet-tree-canvas__group-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* The key AHEAD of the name, a project key chip, never cut: the name after
+   it is what gives way when the line is short. */
+.crewlet-tree-canvas__group-lead {
+  display: inline-flex;
+  flex: none;
+}
+
 /* ---------------------------------------------------------------------------
  * THE CHART ARRIVING, AND REARRANGING.
  *
@@ -392,11 +472,16 @@
  * ------------------------------------------------------------------------- */
 
 .crewlet-tree-canvas__card[data-enter='waiting'],
-.crewlet-tree-canvas__links path[data-enter='waiting'] {
+.crewlet-tree-canvas__links path[data-enter='waiting'],
+.crewlet-tree-canvas__group[data-enter='waiting'],
+.crewlet-tree-canvas__group-head[data-enter='waiting'] {
   opacity: 0;
 }
 
-.crewlet-tree-canvas__card[data-enter='shown'] {
+/* A group arrives with its first member, at the card's pace. */
+.crewlet-tree-canvas__card[data-enter='shown'],
+.crewlet-tree-canvas__group[data-enter='shown'],
+.crewlet-tree-canvas__group-head[data-enter='shown'] {
   animation: crewlet-tree-canvas-arrive var(--motion-duration-slow) var(--motion-easing-default) both;
 }
 
@@ -422,9 +507,20 @@
  * when the setting changed.
  */
 @media (prefers-reduced-motion: reduce) {
+  /* Drawn, whatever step of the entrance it had reached: a card still WAITING
+     is otherwise held at nothing. */
   .crewlet-tree-canvas__card[data-enter],
-  .crewlet-tree-canvas__links path[data-enter] {
+  .crewlet-tree-canvas__links path[data-enter],
+  .crewlet-tree-canvas__group[data-enter],
+  .crewlet-tree-canvas__group-head[data-enter] {
     opacity: 1;
+  }
+
+  /* And the entrance stopped by the selectors that start it. */
+  .crewlet-tree-canvas__card[data-enter='shown'],
+  .crewlet-tree-canvas__links path[data-enter='shown'],
+  .crewlet-tree-canvas__group[data-enter='shown'],
+  .crewlet-tree-canvas__group-head[data-enter='shown'] {
     animation: none;
   }
 }
@@ -436,10 +532,11 @@
 
 /*
  * THE CONNECTORS ARE THE CONTENT, and they take the step that is measured to
- * be resolvable. The SHAPE is `layoutConnectors`, which draws a rounded step
- * from each parent's bottom into each child's top; what is decided here is only
- * how dark it is, and that the joins are round so a corner reads as a turn
- * rather than as two lines meeting.
+ * be resolvable. The SHAPE is `layoutConnectors`, which draws an orthogonal
+ * elbow from each parent's bottom into each child's top, in SVG attributes
+ * the layout computes rather than in a style a policy has to allow; what is
+ * decided here is only how dark and how heavy it is, and that the joins are
+ * round so a corner reads as a turn rather than as two lines meeting.
  *
  * A connector is the only thing on the chart that says who reports to whom:
  * remove it and the picture is a scatter of cards. That makes it a graphical
@@ -450,11 +547,22 @@
  * boundary step, which the palette suite already holds at 3:1 on every ground,
  * measures 4.83:1 and 4.78:1. Darker than the chart this is drawn from, and
  * deliberately: there the hierarchy was a line a reader had to hunt for.
+ *
+ * THE APPROVED DESIGN DRAWS IT IN `--color-border-strong`, AND THE FLOOR WINS.
+ * The artboard's connector is the strong border step at 1.5px, and on the
+ * canvas's ground that step measures 1.45:1 in dark and 1.43:1 in light (1.40
+ * and 1.50 on a group box's card rung): a line a reader cannot make out, for
+ * the one mark that says who reports to whom. The palette suite's data-mark
+ * table holds a chart's connector to 3:1 on `--color-border-control`, so the
+ * value moves up the border family to the first step that clears it, 4.40:1
+ * and 4.04:1 (4.25 and 4.26 on the card rung). The WEIGHT is the design's:
+ * 1.5px, heavier than the hairline this used to be, so a branch between two
+ * ranks of 90px cards reads as a line of the chart rather than as a seam.
  */
 .crewlet-tree-canvas__links path {
   fill: none;
   stroke: var(--color-border-control);
-  stroke-width: 1;
+  stroke-width: 1.5;
   stroke-linecap: round;
   stroke-linejoin: round;
 }
@@ -829,6 +937,20 @@
   pointer-events: auto;
 }
 
+/*
+ * The node's quiet controls arrive as a state change too, so under reduced
+ * motion they simply appear. Stopped HERE, after the rules that start their
+ * fades: the three selectors tie with those rules on specificity, so the stop
+ * has to come later in the file to win.
+ */
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-tree-canvas--node .crewlet-tree-canvas__under > :not(.crewlet-add-pill),
+  .crewlet-tree-canvas--node .crewlet-org-node__leading,
+  .crewlet-tree-canvas--node .crewlet-org-node-lead__clear {
+    transition: none;
+  }
+}
+
 /*
  * THE BRANCHES ARE HEAVIER HERE. A node is half the height of a card, so a
  * hairline between two ranks of them is a thread; this is the console chart's
@@ -929,12 +1051,11 @@
  * chart this package is drawn to match does exactly this, and every step below
  * is its step.
  *
- * IT IS THE ONLY DASHED THING ON THE CHART THAT IS NOT A HUMAN SEAT, and the
- * two never collide: `cardOutline` marks a node of the data and this marks a
- * node that is not one yet, so no card can carry both. What tells them apart
- * is the hue and the breath: a human seat's edge is the chart's own boundary
- * step and does not move, and this one is the accent, with a ring outside it
- * that pulses for as long as the form is open.
+ * IT IS THE ONLY DASHED CARD ON THE CHART, because a dashed edge marks a
+ * place nothing fills yet and this is the one card that is not a node of the
+ * data. Every node's card is solid, a person's seat included: who holds a seat
+ * is its badge's outline, never the card's frame, which is why the chart has
+ * no second dashed card for a person to be confused with this one.
  *
  * ITS GROUND IS EVERY OTHER CARD'S. The ghost holds a real form with real
  * labels, helps and refusals in it, so it is NOT tinted: every contrast
@@ -1078,8 +1199,11 @@
 @media (prefers-reduced-motion: reduce) {
   /* NOT `transform` on the card itself: its transform is where the layout
      put it, written as an inline style, and a rule here saying `none` would
-     be a rule that only ever fires when something else drops that style. */
-  .crewlet-tree-canvas__card--composing,
+     be a rule that only ever fires when something else drops that style.
+     Named with the chart's class, as the rule that starts its arrival names
+     it: by its own class alone the stop was one class short of that rule,
+     and the arrival played for a reader who had asked for none. */
+  .crewlet-tree-canvas .crewlet-tree-canvas__card--composing,
   .crewlet-tree-canvas__links path[data-composing='true'] {
     opacity: 1;
     animation: none;

package/dist/TreeGrid/index.js

@@ -1,8 +1,8 @@
-export { TreeGrid } from '../chunk-5SDBMKUO.js';
-import '../chunk-NTRZGNEX.js';
+export { TreeGrid } from '../chunk-FIFNP6PL.js';
+import '../chunk-S3BCVWTU.js';
 import '../chunk-53DVJCVW.js';
 import '../chunk-7RPGY3JE.js';
-import '../chunk-ITHXJHBB.js';
-import '../chunk-F27EPQ7D.js';
+import '../chunk-R25RGPUB.js';
+import '../chunk-4UQ7SMPK.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{chunk-F6OE5FH3.js → chunk-2FPENTCF.js}

@@ -1,4 +1,4 @@
-import { isComposing, isModalLayerOpen } from './chunk-ITHXJHBB.js';
+import { isComposing, isModalLayerOpen } from './chunk-R25RGPUB.js';
 import { useRef, useEffect } from 'react';
 
 var TYPING_ROLES = /* @__PURE__ */ new Set(["combobox", "listbox", "textbox", "searchbox", "spinbutton"]);