@crewlethq/ui 0.6.3 → 0.7.0

package/dist/{IconButton-TVEUWK6L.css → IconButton-VYWP6SGW.css}

@@ -34,6 +34,21 @@
   outline-offset: 2px;
 }
 
+/*
+ * ONE RING, OVER THE BOUNDARY, on every square that draws one: the secondary
+ * and the soft-brand at rest, and the ghost-brand, which grows one under the
+ * pointer. A ring standing 2px off a visible border is two edges with a gap
+ * between them, which reads as a second outline rather than as focus; on the
+ * inset offset it covers the border instead, the rule every field keeps (see
+ * Input.css). The other ghosts never draw an edge, so they keep the outset
+ * ring.
+ */
+.crewlet-icon-btn--secondary:focus-visible,
+.crewlet-icon-btn--soft-brand:focus-visible,
+.crewlet-icon-btn--ghost-brand:focus-visible {
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
 .crewlet-icon-btn:disabled,
 .crewlet-icon-btn[aria-disabled='true'] {
   opacity: 0.5;

package/dist/ImageUpload/index.js

@@ -1,3 +1,3 @@
-export { ImageUpload } from '../chunk-CAIHUYXV.js';
+export { ImageUpload } from '../chunk-W4GQWFRX.js';
 import '../chunk-IA232OTU.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{ImageUpload-YCHJMUGX.css → ImageUpload-L2GE4JUM.css}

@@ -181,9 +181,13 @@
   cursor: default;
 }
 
+/* One ring, drawn OVER the badge's knockout ring rather than 2px outside it:
+   over the image the knockout is an edge of its own, and a ring standing off
+   it was two rings round one small disc. On the inset offset the focus ring
+   takes the knockout's place, which still parts the disc from the image. */
 .crewlet-image-upload__remove:focus-visible {
   outline: 2px solid var(--color-focus);
-  outline-offset: 2px;
+  outline-offset: var(--size-focus-ring-inset-offset);
 }
 
 .crewlet-image-upload__input {

package/dist/Input/index.js

@@ -1,5 +1,5 @@
-export { FormField, FormRow, FormSection, Input, InputAffix, Label, ReadOnlyField, Textarea } from '../chunk-DSUY5F4E.js';
+export { FormField, FormRow, FormSection, Input, InputAffix, Label, ReadOnlyField, Textarea } from '../chunk-ZGX2DP7F.js';
 import '../chunk-PQADV6P6.js';
-import '../chunk-4UQ7SMPK.js';
+import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Input-2PU5CPKK.css → Input-DRFNI26F.css}

@@ -74,11 +74,14 @@
  * forced-colors mode drops every box-shadow and keeps outlines: a ring drawn
  * as a shadow disappears for exactly the readers who most need one.
  *
- * It is drawn INSIDE the box, on the offset every focusable in a clipping
- * scroller takes, so it covers the boundary rather than standing outside it.
- * Two things follow: a scroller cannot clip it, and the field does not grow a
- * four-pixel halo the moment a caret lands in it, which is what a filter box
- * in a toolbar of them did to the row it sits in.
+ * It is ONE PIXEL, LAID EXACTLY ON THE BOUNDARY: the field's own hairline,
+ * drawn in the focus colour, which is how the console's fields say focus. At
+ * two pixels it was a heavy band round every box a caret landed in, and on a
+ * form of them the field being typed in read as the loudest thing on the page.
+ * Drawn on the boundary rather than outside it, a scroller cannot clip it and
+ * the field does not grow a halo the moment a caret lands in it, which is what
+ * a filter box in a toolbar of them did to the row it sits in. Every boxed
+ * field in the package rings this way (`Input.test.tsx` holds them to it).
  *
  * THE BORDER IS LEFT ALONE. Recolouring it under the ring says nothing the
  * ring has not already said, and it is what cost the error state its own
@@ -94,8 +97,8 @@
  * on a pointer press as well as on a tab.
  */
 .crewlet-input:has(.crewlet-input__control:focus-visible) {
-  outline: 2px solid var(--color-focus);
-  outline-offset: var(--size-focus-ring-inset-offset);
+  outline: 1px solid var(--color-focus);
+  outline-offset: -1px;
 }
 
 .crewlet-input.is-error {
@@ -354,8 +357,8 @@
    on the control itself: a textarea is the field, with nothing wrapped round
    it and nothing focusable inside it. */
 .crewlet-textarea:focus-visible {
-  outline: 2px solid var(--color-focus);
-  outline-offset: var(--size-focus-ring-inset-offset);
+  outline: 1px solid var(--color-focus);
+  outline-offset: -1px;
 }
 
 .crewlet-textarea.is-error {
@@ -371,10 +374,37 @@
   cursor: not-allowed;
 }
 
+/*
+ * ONE LINE THAT GROWS STARTS AT THE SINGLE-LINE FIELD'S HEIGHT. A box that
+ * grows to fit what is typed was drawn at the large control step while it held
+ * one line, so the box a list item is written in stood sixteen pixels taller
+ * than the fields above and below it. One line now stands at the medium step,
+ * the height of every single-line field, with the line centred in it as an
+ * input's is: the block padding is what that step leaves once the two border
+ * pixels and one line are paid for. Each line past the first grows it from
+ * there.
+ */
 .crewlet-textarea.is-auto-resize {
   resize: none;
   overflow: hidden;
-  min-height: var(--size-control-lg);
+  min-height: var(--size-control-md);
+  padding-block: max(
+    0px,
+    calc((var(--size-control-md) - 2px - var(--font-line-height-normal) * var(--font-size-compact)) / 2)
+  );
+}
+
+/*
+ * AND WHAT TRAILS IT SITS ON ITS FIRST LINE, centred in the band one line
+ * takes, which is exactly where an input's trailing hint sits. Pinned a spacing
+ * step from the top, it sat above the line's middle and level with nothing;
+ * on the first line it stays put as the box grows under it.
+ */
+.crewlet-textarea-shell:has(> .crewlet-textarea.is-auto-resize) > .crewlet-input__trailing {
+  top: 0;
+  display: flex;
+  align-items: center;
+  height: var(--size-control-md);
 }
 
 .crewlet-textarea::placeholder {

package/dist/Kbd/index.js

@@ -1,3 +1,3 @@
-export { Kbd, isApplePlatform, keyGlyph } from '../chunk-KJ34ZBBI.js';
+export { Kbd, isApplePlatform, keyGlyph } from '../chunk-SMBKXWML.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Kbd-JPLDVJIP.css → Kbd-MCWJTRTT.css}

@@ -42,9 +42,20 @@
  * platform prints a chord. It is a `kbd` of its own because that is what a key
  * inside a key combination is, and a user agent's `kbd` rule would otherwise
  * set its own face and size on it.
+ *
+ * AND IT TAKES NO BOX FROM ANYBODY ELSE. An application stylesheet that draws
+ * a bare `kbd` as a cap of its own (a common enough rule) reached each key in
+ * here and framed it, so one chord drew a frame round a run of framed keys.
+ * The key states every part of its box, so whatever a page says about `kbd`,
+ * a chord is one cap.
  */
 .crewlet-kbd__key {
   font: inherit;
+  color: inherit;
+  padding: 0;
+  background: none;
+  border: 0;
+  border-radius: 0;
 }
 
 /*

package/dist/ListInput/index.js

@@ -1,10 +1,10 @@
-export { ListInput } from '../chunk-PQNILU27.js';
-import '../chunk-KJ34ZBBI.js';
-import '../chunk-DSUY5F4E.js';
+export { ListInput } from '../chunk-6HXH57BL.js';
+import '../chunk-SMBKXWML.js';
+import '../chunk-ZGX2DP7F.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-RSAQOKH3.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';
-import '../chunk-4UQ7SMPK.js';
+import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Menu/index.js

@@ -1,7 +1,7 @@
-export { Menu } from '../chunk-LSJZUA5V.js';
+export { Menu } from '../chunk-LSB3EHBW.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';
-import '../chunk-4UQ7SMPK.js';
-import '../chunk-ZAO4HHXI.js';
+import '../chunk-4FQT6ZAY.js';
+import '../chunk-OG6CL3EB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Modal/index.js

@@ -1,8 +1,8 @@
-export { ConfirmModal, Modal } from '../chunk-MV2E3QZM.js';
+export { ConfirmModal, Modal } from '../chunk-BTHX2FS3.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';
-import '../chunk-4UQ7SMPK.js';
-import '../chunk-ZAO4HHXI.js';
+import '../chunk-4FQT6ZAY.js';
+import '../chunk-OG6CL3EB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/NewItemsNotice/index.js

@@ -1,4 +1,4 @@
-export { NewItemsNotice } from '../chunk-YLYOWZ4V.js';
+export { NewItemsNotice } from '../chunk-PXU6HOZB.js';
 import '../chunk-RSAQOKH3.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{NewItemsNotice-T4DSSPVV.css → NewItemsNotice-Q5ED73BQ.css}

@@ -48,9 +48,11 @@
   color: var(--color-brand-accent-ink);
 }
 
+/* One ring, over the pill's own boundary rather than 2px off it, which is two
+   edges with a gap between them: the rule every field keeps (see Input.css). */
 .crewlet-new-items:focus-visible {
   outline: 2px solid var(--color-focus);
-  outline-offset: 2px;
+  outline-offset: var(--size-focus-ring-inset-offset);
 }
 
 @media (prefers-reduced-motion: reduce) {

package/dist/OrgLabel/OrgLabel.d.ts

@@ -84,13 +84,21 @@ export type OrgLabelMark = {
      * so this moves nothing: only what is drawn inside it.
      */
     iconSize?: 'md' | 'lg' | undefined;
+    /**
+     * A DASHED RING ROUND THE GLYPH, which is how the console chart draws a
+     * person's seat: a figure inside a boundary, because a person is the
+     * one seat the engine does not run. Drawn in a node only; a row draws
+     * the glyph alone, as the console table does.
+     */
+    iconRing?: boolean | undefined;
     avatar?: undefined;
 } | {
     /**
      * A SEAT'S BADGE, with its kind as its outline: a squircle for an agent,
-     * a circle for a person, which is the one cue that tells them apart.
-     * There used to be a second, a dashed ring round a glyph for a human
-     * seat, and two cues for one fact are two things to keep agreeing.
+     * a circle for a person, for a surface that names seats by their
+     * initials. A surface drawn as the console chart draws one marks a seat
+     * with a glyph instead (the Crewlet figure for an agent, a person inside
+     * a dashed ring for a human) and takes the other branch.
      *
      * The layout sizes it and nothing here does: the approved org chart's
      * 26px badge in a node and the smallest step, 20px, in a row.
@@ -101,6 +109,7 @@ export type OrgLabelMark = {
     avatar?: OrgLabelAvatar | undefined;
     icon?: undefined;
     iconSize?: undefined;
+    iconRing?: undefined;
 };
 /** What both layouts say besides the mark, in the order they say it. */
 interface OrgLabelWords {

package/dist/OrgLabel/index.js

@@ -1,3 +1,3 @@
-export { OrgLabel } from '../chunk-WOFOMTGB.js';
+export { OrgLabel } from '../chunk-B47YUQGM.js';
 import '../chunk-IA232OTU.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{OrgLabel-CR233G34.css → OrgLabel-6WSKJQOT.css}

@@ -86,6 +86,44 @@
   fill: currentColor;
 }
 
+/*
+ * A PERSON IS A FIGURE INSIDE A DASHED RING, as the console chart draws one:
+ * the boundary says this seat is held by someone outside the system. The ring
+ * is the 24px target step and the figure inside it a step smaller than a
+ * container's glyph, which leaves the air a boundary needs to read as one: at
+ * the zone's own step the figure touched the ring on every side.
+ *
+ * THE RING IS DECORATION, drawn in the step kept for it, and the figure is the
+ * mark: the ring says how the seat is held, never what it is.
+ */
+.crewlet-org-label__icon--ring {
+  position: relative;
+}
+
+.crewlet-org-label__icon--ring::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: var(--size-target-min);
+  height: var(--size-target-min);
+  border: 1px dashed var(--color-text-muted);
+  border-radius: var(--radius-circle);
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
+
+.crewlet-org-label__icon--ring > svg {
+  width: var(--font-size-md);
+  height: var(--font-size-md);
+}
+
+/* A ROW DRAWS THE FIGURE ALONE, as the console table does: a ring on a line
+   of text is a second boundary inside the row's own. */
+.crewlet-org-label--row .crewlet-org-label__icon--ring::before {
+  content: none;
+}
+
 /* ---- The name and its caption -------------------------------------------- */
 
 /*

package/dist/OrgNode/OrgNode.d.ts

@@ -73,8 +73,9 @@ export interface OrgNodeDisclosureProps extends HTMLAttributes<HTMLDivElement> {
 export declare function OrgNodeDisclosure({ children, className, ...rest }: OrgNodeDisclosureProps): import("react").JSX.Element;
 export interface OrgNodeLeadProps {
     /**
-     * Nothing is set, so the pill is drawn as the outline of one: a unit with no
-     * lead is a fact about the organization and a blank strip says nothing.
+     * Nothing is set, so the pill is drawn as an empty slot: no ground, a dashed
+     * edge and the word in the quieter ink. A unit with no lead is a fact about
+     * the organization and a blank strip says nothing.
      */
     empty?: boolean | undefined;
     /**
@@ -97,7 +98,9 @@ export interface OrgNodeLeadProps {
  * IT STAYS DRAWN, where the controls that edit the node do not: who leads a
  * unit is a FACT ABOUT THE ORGANIZATION rather than a tool for changing it,
  * and a chart that hid it until the pointer arrived would be a chart you could
- * not read the leads off. Separated from the name above by a hairline, so the
- * node reads as a thing with a lead rather than as two lines of text.
+ * not read the leads off. A pill on a ground of its own rather than a line of
+ * text, so the node reads as a thing with a lead rather than as two lines of
+ * text; never framed while a lead is set, because the node it sits in already
+ * is, and dashed while none is, because an empty place is what it then says.
  */
 export declare function OrgNodeLead({ empty, clear, children, className }: OrgNodeLeadProps): import("react").JSX.Element;

package/dist/OrgNode/index.js

@@ -1,4 +1,4 @@
-export { OrgNodeDisclosure, OrgNodeLabel, OrgNodeLead } from '../chunk-TIWAHZZ6.js';
-import '../chunk-WOFOMTGB.js';
+export { OrgNodeDisclosure, OrgNodeLabel, OrgNodeLead } from '../chunk-VCOELPCT.js';
+import '../chunk-B47YUQGM.js';
 import '../chunk-IA232OTU.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{OrgNode-BT7T2Q2X.css → OrgNode-TCHJH5FO.css}

@@ -33,6 +33,15 @@
 
 /* ---- A unit's lead ------------------------------------------------------ */
 
+/*
+ * NO LINE OF ITS OWN. The console chart rules a hairline over this strip and
+ * frames a set lead's pill inside it, 4px in from the node's own edge: inside
+ * a card that is already framed, that is a box drawn twice, with a second line
+ * running beside the card's edge on three sides and a third across the top.
+ * A set lead is a ground instead, and a ground needs no line to divide it from
+ * the name above. Only an EMPTY slot keeps an edge, dashed (below), because
+ * the dash is what says a place is waiting rather than a frame round a value.
+ */
 .crewlet-org-node-lead {
   position: relative;
   display: flex;
@@ -41,28 +50,11 @@
   padding: 0 var(--spacing-1) var(--spacing-1);
 }
 
-/*
- * THE SEPARATOR IS INSET, like every hairline inside a node of the console
- * chart (it draws this one from 4 to `nw - 4`). Edge to edge it cut the card
- * in two and the node read as two stacked cells rather than as a card with a
- * fact along its bottom edge. Drawn rather than bordered for that reason
- * alone: a border cannot be shorter than the box it is on.
- */
-.crewlet-org-node-lead::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  right: var(--spacing-1);
-  left: var(--spacing-1);
-  height: 1px;
-  background: var(--color-border-default);
-}
-
 /*
  * A PILL RATHER THAN A LINE OF TEXT, so the lead reads as one value attached
- * to this unit rather than as a second caption. The empty state is the same
- * pill with a dashed edge and the word alone: a unit with no lead has a place
- * for one, which is what invites the reader to set it.
+ * to this unit rather than as a second caption. RAISED, on the step a chip
+ * with no boundary of its own takes (the palette suite holds it off the card
+ * on both themes), so it is found by its ground rather than by a frame.
  */
 .crewlet-org-node-lead__pill {
   display: flex;
@@ -77,32 +69,30 @@
   font-weight: var(--font-weight-medium);
   line-height: var(--font-line-height-tight);
   color: var(--color-text-secondary);
-  /*
-   * THE BOUNDARY IS THE HOVER STEP, not the resting hairline, which is what
-   * the console chart draws around this one pill and nowhere else inside a
-   * node: every other line in there is the separator step and this is a
-   * boundary around a value. At the separator's own alpha the pill was a
-   * rectangle a reader had to look for, on the one fact a unit's node states.
-   */
-  border: 1px solid var(--color-border-hover);
+  background: var(--color-surface-elevated);
   border-radius: var(--radius-sm);
 }
 
 /*
- * AND AN EMPTY ONE IS THE SAME PILL, DASHED. The console chart separates the
- * two by the DASH and by the ink, and its two boundary alphas are 0.15 and
- * 0.12, which is one step of this ramp: written as two tokens the difference
- * would be invisible beside the dash that already carries it.
+ * AND AN EMPTY ONE IS AN EMPTY SLOT: no ground, a dashed edge and the word
+ * alone in the quieter ink, as the console chart draws it. A unit with no lead
+ * has a place for one, and the dash is what says the place is waiting to be
+ * filled, which is what invites the reader to set it. It is the one edge drawn
+ * inside a node, and only while the slot is empty: a set lead is a raised
+ * ground with no edge at all. The edge is the hover step rather than the
+ * resting hairline, because at the hairline's own step the slot was a
+ * rectangle a reader had to look for.
  */
 .crewlet-org-node-lead__pill--empty {
   color: var(--color-text-tertiary);
-  border-style: dashed;
+  background: none;
+  border: 1px dashed var(--color-border-hover);
 }
 
 /*
  * A LEAD THAT CAN BE CHANGED IS STILL A LEAD. Where the pill holds a control
  * rather than a word, the control IS the pill: it fills it, carries the pill's
- * own type and ink, and draws no second boundary inside the one already there.
+ * own type and ink, and draws no boundary or ground of its own on the pill's.
  * Left at its own size, a control step inside a half-rank strip is a button
  * that overflows the node it sits in.
  *
@@ -129,6 +119,35 @@
   color: var(--color-text-primary);
 }
 
+/*
+ * WHATEVER WRAPS THE CONTROL FILLS THE PILL TOO. A menu's trigger arrives
+ * inside the menu's own anchor, and the anchor was a shrink-wrapped item of
+ * the pill's row: the control was the width of the word "Lead" in a pill as
+ * wide as the node, and a press anywhere else in the pill did nothing.
+ */
+.crewlet-org-node-lead__pill > :has(> .crewlet-btn) {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+}
+
+/*
+ * REACHED, THE WHOLE PILL LIGHTS, because the whole pill is the control. The
+ * ghost control's own hover and press grounds were a patch the size of the
+ * word inside the pill, so it paints neither, and the pill takes the row hover
+ * step over its own ground while the control is pointed at or its menu is
+ * open. Its ink still goes to full, above.
+ */
+.crewlet-org-node-lead__pill
+  .crewlet-btn:is(:hover, :active):not(:disabled):not([aria-disabled='true']) {
+  background: none;
+}
+
+.crewlet-org-node-lead__pill:has(.crewlet-btn:hover:not(:disabled):not([aria-disabled='true'])),
+.crewlet-org-node-lead__pill:has(.crewlet-btn[aria-expanded='true']) {
+  background-image: linear-gradient(var(--color-surface-hover), var(--color-surface-hover));
+}
+
 /* The name of the lead, not the chevron beside it, is what truncates. */
 .crewlet-org-node-lead__pill .crewlet-btn > span {
   overflow: hidden;
@@ -147,25 +166,42 @@
  *
  * DRAWN SMALL, HIT FULL SIZE, the rule the whole node keeps: the strip is half
  * a rank, so the target is grown past the pill's own edge into the node's
- * bottom padding, exactly as the lead's own control is. It takes its room from
- * the pill rather than overlaying the name, so the lead truncates beside it
- * instead of running under it: the console chart shifts its text 5px left for
- * the same reason, which a row of flex items does on its own.
+ * bottom padding, exactly as the lead's own control is.
+ *
+ * AND IT DOES NOT MOVE THE NAME. Taking its room from the row, it pushed the
+ * name half its own width off the pill's middle, so "Lead: Ada" sat left of
+ * centre on every unit that had one. It is drawn over the pill's right end
+ * instead, out of the row, and the lead's control keeps the same room at both
+ * of its ends while it is there: the name is centred on the whole pill and
+ * truncates before it reaches the clear, and the control is still the whole
+ * pill to press.
  */
 .crewlet-org-node-lead__clear {
-  position: relative;
+  position: absolute;
+  top: 50%;
+  right: 0;
+  z-index: 1;
   display: inline-flex;
-  flex: none;
   align-items: center;
   justify-content: center;
+  transform: translateY(-50%);
+}
+
+.crewlet-org-node-lead__pill:has(> .crewlet-org-node-lead__clear) {
+  position: relative;
+}
+
+.crewlet-org-node-lead__pill:has(> .crewlet-org-node-lead__clear)
+  .crewlet-btn:not(.crewlet-org-node-lead__clear *) {
+  padding-inline: var(--spacing-4);
 }
 
 /*
- * THE GROUND IS A STEP OFF THE CARD'S, rather than that chart's own alpha. Its
- * 0.08 of white over a dark card is a disc a reader can see; on this package's
- * LIGHT theme the step at that alpha is the card's own value, so the disc
- * would disappear on half the deployments. The step past the card is the same
- * relationship in both themes, which is what the drawing was after.
+ * THE DISC IS ITS RING. Its ground is the raised step the pill itself is
+ * drawn on, rather than that chart's own alpha (0.08 of white is the card's
+ * own value on this package's light theme, so a disc drawn by its ground
+ * would disappear on half the deployments), and so what draws it on the pill
+ * is the hairline round it.
  */
 .crewlet-org-node-lead__disc {
   position: absolute;
@@ -203,6 +239,14 @@
   color: var(--color-text-primary);
 }
 
+/* AND NOTHING ELSE FILLS EITHER: a ghost control's own hover and press grounds
+   are painted on its whole 24px target, which drew a circle twice the disc's
+   size round a 12px mark the moment it was pointed at. */
+.crewlet-org-node-lead__clear
+  :is(.crewlet-btn, .crewlet-icon-btn):is(:hover, :active):not(:disabled):not([aria-disabled='true']) {
+  background: none;
+}
+
 .crewlet-org-node-lead__clear:hover .crewlet-org-node-lead__disc {
   border-color: var(--color-border-control);
 }

package/dist/OrgTable/index.js

@@ -1,12 +1,12 @@
-export { OrgTable, OrgTableActions, OrgTableAdd, OrgTableName } from '../chunk-BNCCEER3.js';
-import '../chunk-FIFNP6PL.js';
+export { OrgTable, OrgTableActions, OrgTableAdd, OrgTableName } from '../chunk-6SIG5I72.js';
+import '../chunk-SX2DFTQV.js';
 import '../chunk-S3BCVWTU.js';
-import '../chunk-WOFOMTGB.js';
+import '../chunk-B47YUQGM.js';
 import '../chunk-53DVJCVW.js';
-import '../chunk-OM5E3TTK.js';
+import '../chunk-74WGARJE.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';
-import '../chunk-4UQ7SMPK.js';
+import '../chunk-4FQT6ZAY.js';
 import '../chunk-IA232OTU.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{OrgTable-VWMFC3TB.css → OrgTable-JZSYTUIK.css}

@@ -24,8 +24,11 @@
    */
   --crewlet-org-table-indent: var(--spacing-8);
   /* The wire arriving at a row, and what it fades to at the row's own end.
-     Rebound per hue below. */
-  --crewlet-org-table-wire: var(--color-border-control);
+     It leaves the trunk in the TRUNK'S own step, as the console table's does,
+     so the two read as one line; started brighter than the trunk, every
+     branch was a dash floating beside a trunk nobody could see. Rebound per
+     hue below. */
+  --crewlet-org-table-wire: var(--color-border-strong);
   --crewlet-org-table-wire-fade: var(--color-border-default);
   /* What a row's name and its mark are drawn in. Rebound per hue below. */
   --crewlet-org-table-ink: var(--color-text-primary);
@@ -134,8 +137,15 @@
  * follows, so the trunk is one line down the whole table rather than one per
  * level. The cell's padding is taken back and the wire element carries the
  * level instead.
+ *
+ * AND THE CELL IS THE ROW'S FULL HEIGHT, because the wire in it is. The grid
+ * centres its cells in a row taller than they are, and a trunk drawn down a
+ * centred cell stopped short of both edges of every row, so the line its
+ * segments were meant to stack into read as one dash per row. The cell still
+ * centres what it holds.
  */
 .crewlet-org-table [role='gridcell']:first-child {
+  align-self: stretch;
   padding-inline-start: var(--spacing-2);
 }
 
@@ -170,12 +180,19 @@
  * segments stack into one line. Neutral, always: it belongs to the table
  * rather than to any row, and a trunk that took each row's hue in turn would
  * be a striped line saying nothing.
+ *
+ * IN THE STRONG STEP, where the console table draws its trunk a notch above
+ * the row's ground. In the plain border step it all but vanished on the
+ * table's own ground, and the branches beside it read as loose dashes.
+ *
+ * It starts one hairline above the cell, over the grid's rule between rows,
+ * so the segments meet rather than being cut by that rule.
  */
 .crewlet-org-table__wire[data-trunk]::before {
-  inset-block: 0;
+  inset-block: -1px 0;
   inset-inline-start: 0;
   width: 2px;
-  background: var(--color-border-default);
+  background: var(--color-border-strong);
 }
 
 /* A root row's trunk starts at the row's middle: nothing hangs above the
@@ -184,6 +201,13 @@
   inset-block-start: 50%;
 }
 
+/* The last row a root shows ends the trunk at its own branch: no row below it
+   hangs off the line, and a trunk run on to the next tree or the table's edge
+   is a line to nowhere. */
+.crewlet-org-table__wire[data-last][data-trunk]::before {
+  inset-block-end: 50%;
+}
+
 /*
  * THE BRANCH: from the trunk across the gutter to the row's own mark, fading
  * as it arrives. It reaches one cell gap past the wire's own width, which is

package/dist/Popover/index.js

@@ -1,4 +1,4 @@
-export { Popover } from '../chunk-AUS5FNQE.js';
+export { Popover } from '../chunk-PDUZO35I.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Popover-WJGCF3ZQ.css → Popover-QCINR7WG.css}

@@ -40,10 +40,13 @@
   transform-origin: bottom left;
 }
 
-/* A panel that takes focus shows it on the panel, not only on what is inside. */
+/* A panel that takes focus shows it on the panel, not only on what is inside,
+   and shows it ONCE: over the panel's own boundary rather than 2px off it,
+   which is two edges with a gap between them (the rule every field keeps, see
+   Input.css). */
 .crewlet-popover:focus-visible {
   outline: 2px solid var(--color-focus);
-  outline-offset: 2px;
+  outline-offset: var(--size-focus-ring-inset-offset);
 }
 
 /* Up from under its anchor, which is where it is about to be. */