@crewlethq/ui 0.48.1 → 0.48.3

package/dist/styles.css

@@ -702,7 +702,7 @@
 }
 
 
-/* AppShell-5P575KYA.css */
+/* AppShell-BIUFNT3J.css */
 /*
  * The application frame: a rail on the FRAME, and the screen on a SHEET that
  * floats beside it.
@@ -1511,14 +1511,21 @@
  * half the foot's gap, to meet the row above (HitArea.css).
  *
  * IT IS THE ONE TALL ROW IN THE FOOT. Who is signed in is the row a reader
- * looks for, so it stands on the large control step (`--size-control-lg`,
- * 44px) around a medium badge (`size="md"`, 32px), where the rows above it
- * keep the compact step. The badge stands in a column of its own width
- * (`--crewlet-account-row-badge`), centred in it, so a smaller badge a caller
- * hands the row lands where a medium one would, and the column is inset from
- * the row's edge by the 6px the badge has above and below it in the 44px row.
- * A 32px badge cannot stand on the nav's 14px glyph column: centred there, its
- * ring (1.5px, 2px out) would cross the row's own edge.
+ * looks for, so it stands half a spacing step under the large control step
+ * (`--crewlet-account-row-height`, 42px) around a medium badge (`size="md"`,
+ * 32px), where the rows above it keep the compact step. At 44px it read as
+ * cramped against the foot's edges, so it gives up the half step and the
+ * space around it grows instead (`--crewlet-account-row-pad`, one step above
+ * and below, where it was none): the row is slimmer and the foot breathes
+ * more. It goes no lower than 42px because the badge's ring (1.5px, 2px out)
+ * takes 39px of it, and 42 keeps the ring 1.5px clear of the row's hover fill
+ * where 40 would leave half a pixel, which reads as the ring touching it. The
+ * badge stands in a column of its own width (`--crewlet-account-row-badge`),
+ * centred in it, so a smaller badge a caller hands the row lands where a
+ * medium one would, and the column is inset 6px from the row's start, so the
+ * badge's ring clears the row's edge on that side too. A 32px badge cannot
+ * stand on the nav's 14px glyph column: centred there, its ring (1.5px, 2px
+ * out) would cross the row's own edge.
  *
  * The name takes the body's size (`--font-size-compact`, the nav's words) and
  * both lines take the body's leading, a step a 36px row had no room for.
@@ -1533,9 +1540,17 @@
  * after the name is the half step, and the controls beside the link
  * (Settings, Preferences) are half a step apart and half a step off it.
  * Outside a rail's foot the row keeps its chevron.
+ *
+ * THE CONTROLS STAND AS TALL AS THE ROW. Beside a 42px row, the small step's
+ * 26px squares floated in the middle of it as two smaller boxes, and their
+ * hover fill ended short of the row's on both sides. They take the row's
+ * height (`--crewlet-account-row-height`) and keep the small step's width and
+ * glyph, so the fill lines up with the row's top and bottom and the words
+ * keep every pixel of their column.
  */
 .crewlet-app-shell__rail-foot .crewlet-account-row {
-  --crewlet-account-row-pad: var(--spacing-0);
+  --crewlet-account-row-pad: var(--spacing-1);
+  --crewlet-account-row-height: calc(var(--size-control-lg) - var(--spacing-1) / 2);
   --crewlet-account-row-badge: 32px;
   gap: calc(var(--spacing-1) / 2);
 }
@@ -1543,8 +1558,8 @@
 .crewlet-app-shell__rail-foot .crewlet-account-row__who {
   --crewlet-hit-area-block-start: calc(var(--crewlet-rail-foot-gap) / 2 + var(--crewlet-account-row-pad));
   gap: 0;
-  min-height: var(--size-control-lg);
-  padding-block: var(--spacing-1);
+  min-height: var(--crewlet-account-row-height);
+  padding-block: calc(var(--spacing-1) / 2);
   padding-inline: calc(var(--spacing-1) + var(--spacing-1) / 2) calc(var(--spacing-1) / 2);
 }
 
@@ -1570,6 +1585,10 @@
   gap: calc(var(--spacing-1) / 2);
 }
 
+.crewlet-app-shell__rail-foot .crewlet-account-row__actions .crewlet-icon-btn {
+  height: var(--crewlet-account-row-height);
+}
+
 /* The row as the reader's menu button: a button drawn as the link is. */
 button.crewlet-account-row__who {
   width: 100%;
@@ -32471,7 +32490,7 @@ svg.crewlet-time-window__tick {
 }
 
 
-/* TreeCanvas-L2XYONWL.css */
+/* TreeCanvas-QA3PDFTK.css */
 /*
  * A hierarchy drawn as cards on a canvas (TreeCanvas.tsx).
  *
@@ -33544,6 +33563,24 @@ svg.crewlet-time-window__tick {
   content: none;
 }
 
+/*
+ * A STRIP WITH NOTHING DRAWN IN IT IS NOT DRAWN. A node may offer the pointer
+ * no control at all (a company's root, which nobody edits from the chart) and
+ * still hold the keyboard's menu anchor, which is drawn nowhere. Revealed on
+ * hover, focus or selection, that strip painted the column's rule beside the
+ * name with nothing beside it (`node`), or a patch of the strip's ground
+ * (`card`). So a strip whose every child is keyboard-only, or that has none,
+ * keeps its box (the anchor still places its menu from it, and the name keeps
+ * the column's room so a rank still lines up) and draws neither.
+ */
+.crewlet-tree-canvas__actions:not(:has(> :not([data-keyboard-only]))) {
+  background: none;
+}
+
+.crewlet-tree-canvas__actions:not(:has(> :not([data-keyboard-only])))::before {
+  content: none;
+}
+
 /* ---------------------------------------------------------------------------
  * A NODE BEING COMPOSED: the ghost, and the form drawn inside it.
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crewlethq/ui",
-  "version": "0.48.1",
+  "version": "0.48.3",
   "description": "Crewlet shared React components built on @crewlethq/tokens and @crewlethq/icons.",
   "license": "MIT",
   "repository": {
@@ -42,8 +42,8 @@
     "clean": "rm -rf dist src/generated"
   },
   "dependencies": {
-    "@crewlethq/icons": "0.48.1",
-    "@crewlethq/tokens": "0.48.1",
+    "@crewlethq/icons": "0.48.3",
+    "@crewlethq/tokens": "0.48.3",
     "prosemirror-commands": "1.7.2",
     "prosemirror-gapcursor": "1.4.1",
     "prosemirror-history": "1.5.1",

package/dist/{chunk-ICPQIAD6.js → chunk-D7Q5MQRF.js}

@@ -3,8 +3,8 @@ import { Tooltip } from './chunk-I33UIUZD.js';
 import { Kbd } from './chunk-SMBKXWML.js';
 import { LAYER_REPOSITION_EVENT, LayerHost } from './chunk-OMV5W53A.js';
 import { Button } from './chunk-OG6CL3EB.js';
-import { returnFocus } from './chunk-NUZHC6MM.js';
 import { IconButton } from './chunk-LACA4JGC.js';
+import { returnFocus } from './chunk-NUZHC6MM.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Canvas-4QJHVLJ4.css';

package/dist/{chunk-D4EOPIFL.js → chunk-EXRRTKWT.js}

@@ -2,8 +2,8 @@ import { characterCountState, CharacterCount } from './chunk-XCUUI7E7.js';
 import { useHeadingLevel, headingTag, HeadingLevelProvider, nextHeadingLevel } from './chunk-PQADV6P6.js';
 import { announce } from './chunk-RSAQOKH3.js';
 import { isComposing } from './chunk-H5XTJ7GJ.js';
-import { useFocusModality } from './chunk-NUZHC6MM.js';
 import { IconButton } from './chunk-LACA4JGC.js';
+import { useFocusModality } from './chunk-NUZHC6MM.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Input-VDSV7VWJ.css';

package/dist/{chunk-S6J3EWDP.js → chunk-SXBJMBSV.js}

@@ -2,8 +2,8 @@ import { Tag } from './chunk-KYIAFNU7.js';
 import { useListbox } from './chunk-7KHM2FZH.js';
 import { announce } from './chunk-RSAQOKH3.js';
 import { isComposing } from './chunk-H5XTJ7GJ.js';
-import { useFocusModality } from './chunk-NUZHC6MM.js';
 import { IconButton } from './chunk-LACA4JGC.js';
+import { useFocusModality } from './chunk-NUZHC6MM.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './TagsInput-CLFHP6I2.css';
 import { forwardRef, useState, useRef, useId, useImperativeHandle, useEffect, useMemo, useLayoutEffect } from 'react';

package/dist/{chunk-3JIZ2A6K.js → chunk-TMM32U7D.js}

@@ -1,8 +1,8 @@
 import { useLayerContainer, viewportBounds, LAYER_GAP, anchorGone, placePopup, LAYER_REPOSITION_EVENT } from './chunk-OMV5W53A.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { usePopupLayer } from './chunk-H5XTJ7GJ.js';
-import { returnFocus } from './chunk-NUZHC6MM.js';
 import { IconButton } from './chunk-LACA4JGC.js';
+import { returnFocus } from './chunk-NUZHC6MM.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Menu-KEKAD3BZ.css';
 import { useId, useState, useRef, useCallback, useLayoutEffect, useEffect } from 'react';

package/dist/{chunk-K77LKW3X.js → chunk-UFXLNC2N.js}

@@ -1,8 +1,8 @@
 import { Popover } from './chunk-KHJIEPZV.js';
 import { today, CalendarGrid, shiftMonth, compareDays } from './chunk-GXQ3B46I.js';
 import { Button } from './chunk-OG6CL3EB.js';
-import { useFocusModality } from './chunk-NUZHC6MM.js';
 import { IconButton } from './chunk-LACA4JGC.js';
+import { useFocusModality } from './chunk-NUZHC6MM.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './DateTimePicker-3A7JIIVL.css';
 import { useMemo, useState, useEffect } from 'react';