@crewlethq/ui 0.6.3 → 0.7.0

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

@@ -103,32 +103,21 @@
 }
 
 /*
- * The halo: a hairline ring OUTSIDE the card's own boundary, at the lightest
- * of the hue's three alphas. It is what says a card is toned at all from the
- * far end of a chart, where the fill is a few pixels of tint; drawn as its own
- * ring rather than a second border so it never competes with the boundary that
- * says where the card ends. Pointer-transparent, because it is drawn over the
- * gap the next card's controls reach into.
- */
-.crewlet-tree-canvas__card[data-tone]::after {
-  content: '';
-  position: absolute;
-  inset: -3px;
-  border: 1px solid var(--crewlet-tree-canvas-card-halo);
-  border-radius: var(--radius-lg);
-  pointer-events: none;
-}
-
-/*
- * The six hues, each as the four steps a toned card draws: the fill it sits
- * on, the boundary around it, the halo outside that, and the ink its name is
- * written in. The ink is published as a variable rather than applied here
- * because WHICH text is the name is the caller's to say.
+ * ONE BOUNDARY, AND NO HALO. A toned card used to carry a second hairline ring
+ * 3px outside its boundary, at the lightest of the hue's alphas, so a toned
+ * card was framed twice: two parallel lines round one node read as a double
+ * border, which is the one thing no box in this package draws. The fill and
+ * the boundary in the hue already say the card is toned from across a chart.
+ *
+ * The six hues, each as the steps a toned card draws: the fill it sits on, the
+ * boundary around it, the ink its name is written in and the accent its mark
+ * takes. The ink and the accent are published as variables rather than applied
+ * here because WHICH text is the name and which drawing the mark is are the
+ * caller's to say.
  */
 .crewlet-tree-canvas__card[data-tone='purple'] {
   --crewlet-tree-canvas-card-fill: var(--color-node-purple-fill);
   --crewlet-tree-canvas-card-line: var(--color-node-purple-line);
-  --crewlet-tree-canvas-card-halo: var(--color-node-purple-halo);
   --crewlet-tree-canvas-card-ink: var(--color-node-purple-ink);
   --crewlet-tree-canvas-card-accent: var(--color-node-purple);
 }
@@ -136,7 +125,6 @@
 .crewlet-tree-canvas__card[data-tone='cyan'] {
   --crewlet-tree-canvas-card-fill: var(--color-node-cyan-fill);
   --crewlet-tree-canvas-card-line: var(--color-node-cyan-line);
-  --crewlet-tree-canvas-card-halo: var(--color-node-cyan-halo);
   --crewlet-tree-canvas-card-ink: var(--color-node-cyan-ink);
   --crewlet-tree-canvas-card-accent: var(--color-node-cyan);
 }
@@ -144,7 +132,6 @@
 .crewlet-tree-canvas__card[data-tone='green'] {
   --crewlet-tree-canvas-card-fill: var(--color-node-green-fill);
   --crewlet-tree-canvas-card-line: var(--color-node-green-line);
-  --crewlet-tree-canvas-card-halo: var(--color-node-green-halo);
   --crewlet-tree-canvas-card-ink: var(--color-node-green-ink);
   --crewlet-tree-canvas-card-accent: var(--color-node-green);
 }
@@ -152,7 +139,6 @@
 .crewlet-tree-canvas__card[data-tone='amber'] {
   --crewlet-tree-canvas-card-fill: var(--color-node-amber-fill);
   --crewlet-tree-canvas-card-line: var(--color-node-amber-line);
-  --crewlet-tree-canvas-card-halo: var(--color-node-amber-halo);
   --crewlet-tree-canvas-card-ink: var(--color-node-amber-ink);
   --crewlet-tree-canvas-card-accent: var(--color-node-amber);
 }
@@ -160,7 +146,6 @@
 .crewlet-tree-canvas__card[data-tone='rose'] {
   --crewlet-tree-canvas-card-fill: var(--color-node-rose-fill);
   --crewlet-tree-canvas-card-line: var(--color-node-rose-line);
-  --crewlet-tree-canvas-card-halo: var(--color-node-rose-halo);
   --crewlet-tree-canvas-card-ink: var(--color-node-rose-ink);
   --crewlet-tree-canvas-card-accent: var(--color-node-rose);
 }
@@ -168,7 +153,6 @@
 .crewlet-tree-canvas__card[data-tone='blue'] {
   --crewlet-tree-canvas-card-fill: var(--color-node-blue-fill);
   --crewlet-tree-canvas-card-line: var(--color-node-blue-line);
-  --crewlet-tree-canvas-card-halo: var(--color-node-blue-halo);
   --crewlet-tree-canvas-card-ink: var(--color-node-blue-ink);
   --crewlet-tree-canvas-card-accent: var(--color-node-blue);
 }
@@ -204,18 +188,43 @@
  * canvas clips, so an outset ring is cut away on the cards nearest the frame.
  * This component hands out the tab stop, so the indicator is its to draw; left
  * to the caller it was drawn on some charts and on others not at all.
+ *
+ * A CARD'S OWN NODE RINGS THE WHOLE CARD. Where the treeitem is the card's
+ * direct child, the card's edge IS the node's edge, and a ring drawn on the
+ * treeitem did two things wrong: it stopped short of anything the card holds
+ * under the node (a unit's lead), and it stood beside the card's boundary as a
+ * second line. So the ring is drawn on the card, over its boundary, and the
+ * treeitem draws none in any state, the way a field's control leaves its ring
+ * to the field. A row deeper inside a card (`*` between the two, because a row
+ * is always inside something the caller drew) has no boundary of its own, and
+ * keeps its ring.
  */
-.crewlet-tree-canvas__card [role='treeitem']:focus-visible {
+.crewlet-tree-canvas__card * [role='treeitem']:focus-visible,
+.crewlet-tree-canvas__card:has(> [role='treeitem']:focus-visible) {
   outline: 2px solid var(--color-focus);
   outline-offset: var(--size-focus-ring-inset-offset);
 }
 
+.crewlet-tree-canvas__card > [role='treeitem'] {
+  outline: none;
+}
+
 /* The selection is where the reader is, so it takes the accent. Inset, for the
    same reason the ring is. */
 .crewlet-tree-canvas__card [role='treeitem'][aria-selected='true'] {
   box-shadow: inset 0 0 0 1px var(--color-brand-accent);
 }
 
+/* On a card's own node the selection IS the card's boundary, in the accent: an
+   inset ring beside the boundary drew two lines where one says it. */
+.crewlet-tree-canvas__card:has(> [role='treeitem'][aria-selected='true']) {
+  border-color: var(--color-brand-accent);
+}
+
+.crewlet-tree-canvas__card > [role='treeitem'][aria-selected='true'] {
+  box-shadow: none;
+}
+
 /*
  * THE POINTER'S CONTROLS, drawn over the end of the card and quiet until it is
  * reached.
@@ -360,8 +369,8 @@
  * The space around the whole chart, as a token, for the reason the gaps are
  * one. None by default: a chart of panels is read inside its own frame, and
  * the space around it is the page's. The `node` appearance takes the console
- * chart's own margin below, which is what keeps the outermost node's halo and
- * its focus ring off the canvas's clip.
+ * chart's own margin below, which is what keeps the control hanging under the
+ * outermost node off the canvas's clip.
  */
 .crewlet-tree-canvas__margin {
   width: var(--spacing-0);
@@ -635,8 +644,8 @@
  *   drawn distance is the same number either way, and the room simply moved
  *   from the card's box into the gap with the control that needs it.
  * - AROUND: `--spacing-8`, 40px against 36, and deliberately the step above
- *   rather than below: the canvas CLIPS, and the outermost node's halo and
- *   focus ring have to clear the frame.
+ *   rather than below: the canvas CLIPS, and what hangs under the outermost
+ *   node has to clear the frame.
  */
 .crewlet-tree-canvas--node .crewlet-tree-canvas__gap {
   width: var(--spacing-9);
@@ -980,6 +989,27 @@
   border-radius: 0;
 }
 
+/*
+ * AND THEY ANSWER THE POINTER WITH THEIR INK, NOT A GROUND, as the console
+ * chart's do: the edit mark turns to the accent and the trash to the critical
+ * hue, and nothing is painted under either. A cell is a whole share of the
+ * node's corner, so a ground painted over it was a square standing past the
+ * card's rounded corner, the one place on a node with no room for a square.
+ */
+.crewlet-tree-canvas--node
+  .crewlet-tree-canvas__actions
+  .crewlet-icon-btn:hover:not(:disabled):not([aria-disabled='true']) {
+  background: none;
+  border-color: transparent;
+  color: var(--color-brand-accent-ink);
+}
+
+.crewlet-tree-canvas--node
+  .crewlet-tree-canvas__actions
+  .crewlet-icon-btn--ghost-danger:hover:not(:disabled):not([aria-disabled='true']) {
+  color: var(--color-feedback-danger-ink);
+}
+
 /*
  * A CONTROL ON AN EDGE IS A DISC: a ground of its own, so the line it sits on,
  * or the card it straddles, stops at its edge rather than running through it.
@@ -1081,38 +1111,29 @@
   background-image: linear-gradient(var(--color-surface-subtle), var(--color-surface-subtle));
   border: 1px dashed var(--color-brand-accent-soft-strong);
   box-shadow: var(--shadow-md);
-  animation: crewlet-tree-canvas-ghost-card var(--motion-duration-slow) var(--motion-easing-emphasized)
-    var(--motion-duration-base) both;
-}
-
-/*
- * THE RING THAT BREATHES, outside the boundary, exactly where a toned card's
- * halo is: it is what says the card is waiting for the reader from the far
- * end of a chart, where a dashed hairline is a few pixels. It is decoration
- * over the gap the next card's controls reach into, so it takes no pointer.
- */
-.crewlet-tree-canvas__card--composing::after {
-  content: '';
-  position: absolute;
-  inset: -3px;
-  border: 1px solid var(--color-brand-accent-soft-strong);
-  border-radius: var(--radius-lg);
-  pointer-events: none;
+  /*
+   * THE BOUNDARY BREATHES, which is what says the card is waiting for the
+   * reader from the far end of a chart, where a dashed hairline is a few
+   * pixels. It used to be a second ring 3px outside the boundary that
+   * breathed instead, two lines round one card where every box in this
+   * package draws one, so the dashed boundary itself moves between the soft
+   * accent and the full one.
+   */
   animation:
-    crewlet-tree-canvas-ghost-glow var(--motion-duration-slow) var(--motion-easing-default)
-      var(--motion-duration-moderate) both,
+    crewlet-tree-canvas-ghost-card var(--motion-duration-slow) var(--motion-easing-emphasized)
+      var(--motion-duration-base) both,
     /* A BREATH RATHER THAN A TRANSITION, so it is a multiple of the scale's
        longest step (1.8s) rather than a number off it: the scale tops out at
        one UI transition, and a pulse held there would strobe. The console
-       chart's own is 2s. It starts where the fade in ends. */
+       chart's own is 2s. It starts where the card's arrival ends. */
       crewlet-tree-canvas-ghost-pulse calc(var(--motion-duration-slow) * 6)
-      var(--motion-easing-in-out)
-      calc(var(--motion-duration-moderate) + var(--motion-duration-slow)) infinite;
+      var(--motion-easing-in-out) calc(var(--motion-duration-base) + var(--motion-duration-slow))
+      infinite;
 }
 
 /*
  * THE FORM ARRIVES LAST, and from slightly above and behind: the wire, then
- * the card, then the glow, then what is inside it, which is the order a reader
+ * the card, then what is inside it, which is the order a reader
  * follows from the node they pressed to the thing they have to fill in. The
  * caller's own element, whatever it drew, because the ghost's contents are
  * entirely the caller's.
@@ -1156,24 +1177,14 @@
   }
 }
 
-@keyframes crewlet-tree-canvas-ghost-glow {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
 @keyframes crewlet-tree-canvas-ghost-pulse {
   0%,
   100% {
-    opacity: 0.5;
+    border-color: var(--color-brand-accent-soft-strong);
   }
 
   50% {
-    opacity: 1;
+    border-color: var(--color-brand-accent);
   }
 }
 
@@ -1193,8 +1204,8 @@
  * A READER WHO ASKED FOR LESS gets the ghost DRAWN, in place, at once. Nothing
  * about the add is behind the motion: the chart still makes room, the branch
  * is still dashed, the view still moves onto it and focus still lands in the
- * form. Only the arrival, the breath and the rise are dropped, and the ring
- * stays at the bright end of the pulse rather than wherever it was stopped.
+ * form. Only the arrival, the breath and the rise are dropped, and the
+ * boundary rests at the soft step it breathes from.
  */
 @media (prefers-reduced-motion: reduce) {
   /* NOT `transform` on the card itself: its transform is where the layout
@@ -1214,9 +1225,4 @@
     transform: none;
     animation: none;
   }
-
-  .crewlet-tree-canvas__card--composing::after {
-    opacity: 1;
-    animation: none;
-  }
 }

package/dist/TreeGrid/index.js

@@ -1,8 +1,8 @@
-export { TreeGrid } from '../chunk-FIFNP6PL.js';
+export { TreeGrid } from '../chunk-SX2DFTQV.js';
 import '../chunk-S3BCVWTU.js';
 import '../chunk-53DVJCVW.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/{chunk-SVNXOK25.js → chunk-26SCUACK.js}

@@ -1,6 +1,6 @@
 import { useClipboard } from './chunk-5VNUYO76.js';
-import { IconButton } from './chunk-4UQ7SMPK.js';
-import { Button } from './chunk-ZAO4HHXI.js';
+import { IconButton } from './chunk-4FQT6ZAY.js';
+import { Button } from './chunk-OG6CL3EB.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Copyable-5PNRFOLS.css';

package/dist/{chunk-4UQ7SMPK.js → chunk-4FQT6ZAY.js}

@@ -1,6 +1,6 @@
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './IconButton-TVEUWK6L.css';
+import './IconButton-VYWP6SGW.css';
 import { forwardRef, useId, Children, isValidElement, cloneElement } from 'react';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-IBYO2IJN.js → chunk-5I56UXBJ.js}

@@ -1,9 +1,9 @@
-import { Popover } from './chunk-AUS5FNQE.js';
+import { Popover } from './chunk-PDUZO35I.js';
 import { today, CalendarGrid, shiftMonth, compareDays } from './chunk-GXQ3B46I.js';
-import { IconButton } from './chunk-4UQ7SMPK.js';
-import { Button } from './chunk-ZAO4HHXI.js';
+import { IconButton } from './chunk-4FQT6ZAY.js';
+import { Button } from './chunk-OG6CL3EB.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './DateTimePicker-22VNXRWC.css';
+import './DateTimePicker-4AZBTODT.css';
 import { useMemo, useState, useEffect } from 'react';
 import { CalendarGlyph, ChevronDownGlyph, ChevronsLeftGlyph, ChevronLeftGlyph, ChevronRightGlyph, ChevronsRightGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs } from 'react/jsx-runtime';

package/dist/{chunk-ZFATEERP.js → chunk-5YLON2PW.js}

@@ -1,6 +1,6 @@
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './FilterChip-GTGLLOXE.css';
+import './FilterChip-EZ4QMW4E.css';
 import { createContext, useContext, useRef, useId, useCallback, useLayoutEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-EFYPAJT3.js → chunk-6DRDCT22.js}

@@ -1,5 +1,5 @@
 import { cx } from './chunk-ODEQTPFM.js';
-import './SearchTrigger-Z5D4AAY7.css';
+import './SearchTrigger-KIZLWBEH.css';
 import { forwardRef } from 'react';
 import { SearchGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/dist/{chunk-PQNILU27.js → chunk-6HXH57BL.js}

@@ -1,8 +1,8 @@
-import { Kbd } from './chunk-KJ34ZBBI.js';
-import { FormField, Textarea, Input } from './chunk-DSUY5F4E.js';
+import { Kbd } from './chunk-SMBKXWML.js';
+import { FormField, Textarea, Input } from './chunk-ZGX2DP7F.js';
 import { announce } from './chunk-RSAQOKH3.js';
 import { isComposing } from './chunk-R25RGPUB.js';
-import { IconButton } from './chunk-4UQ7SMPK.js';
+import { IconButton } from './chunk-4FQT6ZAY.js';
 import './ListInput-O7LJKOIG.css';
 import { useState, useRef, useLayoutEffect } from 'react';
 import { ArrowUpGlyph, ArrowDownGlyph, XGlyph, PlusGlyph } from '@crewlethq/icons/glyphs';

package/dist/{chunk-BNCCEER3.js → chunk-6SIG5I72.js}

@@ -1,10 +1,10 @@
-import { TreeGrid } from './chunk-FIFNP6PL.js';
-import { createTreeModel } from './chunk-S3BCVWTU.js';
-import { OrgLabel } from './chunk-WOFOMTGB.js';
-import { AddPill } from './chunk-OM5E3TTK.js';
-import { IconButton } from './chunk-4UQ7SMPK.js';
+import { TreeGrid } from './chunk-SX2DFTQV.js';
+import { createTreeModel, treeParent } from './chunk-S3BCVWTU.js';
+import { OrgLabel } from './chunk-B47YUQGM.js';
+import { AddPill } from './chunk-74WGARJE.js';
+import { IconButton } from './chunk-4FQT6ZAY.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './OrgTable-VWMFC3TB.css';
+import './OrgTable-JZSYTUIK.css';
 import { useMemo, useRef, useImperativeHandle, useCallback } from 'react';
 import { ChevronDownGlyph, ChevronUpGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
@@ -24,7 +24,7 @@ function OrgTable({
   ...rest
 }) {
   const text = { ...LABELS, ...labels };
-  const depths = useMemo(() => createTreeModel(rows).depth, [rows]);
+  const tree = useMemo(() => createTreeModel(rows), [rows]);
   const grid = useRef(null);
   useImperativeHandle(
     ref,
@@ -38,20 +38,22 @@ function OrgTable({
   const cell = useCallback(
     (id, column, context) => {
       if (column !== 1) return renderCell(id, column, context);
-      const depth = depths.get(id) ?? 0;
+      const depth = tree.depth.get(id) ?? 0;
+      const open = context.expandable(id) && context.expanded(id);
       return /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(
           OrgTableWire,
           {
             depth,
             tone: tone?.(id),
-            trunk: depth > 0 || context.expandable(id) && context.expanded(id)
+            trunk: depth > 0 || open,
+            last: !open && lastUnderRoot(tree, id)
           }
         ),
         renderCell(id, column, context)
       ] });
     },
-    [depths, renderCell, tone]
+    [tree, renderCell, tone]
   );
   return /* @__PURE__ */ jsxs("div", { className: cx("crewlet-org-table", className), children: [
     controls && /*
@@ -97,10 +99,18 @@ function OrgTable({
     )
   ] });
 }
+function lastUnderRoot(tree, id) {
+  for (let at = id, up = treeParent(tree, id); up !== null; at = up, up = treeParent(tree, up)) {
+    const siblings = tree.children.get(up) ?? [];
+    if (siblings[siblings.length - 1] !== at) return false;
+  }
+  return true;
+}
 function OrgTableWire({
   depth,
   tone,
-  trunk
+  trunk,
+  last
 }) {
   return /* @__PURE__ */ jsx(
     "span",
@@ -108,6 +118,7 @@ function OrgTableWire({
       className: "crewlet-org-table__wire",
       "aria-hidden": "true",
       "data-trunk": trunk ? "" : void 0,
+      "data-last": last ? "" : void 0,
       "data-root": depth === 0 ? "" : void 0,
       "data-tone": tone,
       style: { "--crewlet-org-table-depth": depth }

package/dist/{chunk-OM5E3TTK.js → chunk-74WGARJE.js}

@@ -1,6 +1,6 @@
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './AddPill-IJQYCY6C.css';
+import './AddPill-V4TQXJ53.css';
 import { useState, useId, useRef, useCallback, useEffect, Fragment } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -93,7 +93,10 @@ function AddPill({
             onClick: press,
             children: [
               /* @__PURE__ */ jsx("span", { className: "crewlet-add-pill__disc", "aria-hidden": "true" }),
-              /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsx("path", { d: "M8 3.5v9M3.5 8h9" }) })
+              /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", focusable: "false", children: [
+                /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "7" }),
+                /* @__PURE__ */ jsx("path", { d: "M8 4.5v7M4.5 8h7" })
+              ] })
             ]
           }
         ),

package/dist/{chunk-EV6IMYJ6.js → chunk-A722MUNR.js}

@@ -1,5 +1,5 @@
 import { cx } from './chunk-ODEQTPFM.js';
-import './Switch-U4OWK4CL.css';
+import './Switch-66RAQCRE.css';
 import { forwardRef, useId } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-WOFOMTGB.js → chunk-B47YUQGM.js}

@@ -1,6 +1,6 @@
 import { Avatar } from './chunk-IA232OTU.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './OrgLabel-CR233G34.css';
+import './OrgLabel-6WSKJQOT.css';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 function OrgLabel(props) {
@@ -8,7 +8,11 @@ function OrgLabel(props) {
   const zone = props.avatar === void 0 ? /* @__PURE__ */ jsx(
     "span",
     {
-      className: cx("crewlet-org-label__icon", props.iconSize === "lg" && "crewlet-org-label__icon--lg"),
+      className: cx(
+        "crewlet-org-label__icon",
+        props.iconSize === "lg" && "crewlet-org-label__icon--lg",
+        props.iconRing === true && "crewlet-org-label__icon--ring"
+      ),
       "aria-hidden": "true",
       children: props.icon
     }

package/dist/{chunk-MV2E3QZM.js → chunk-BTHX2FS3.js}

@@ -1,8 +1,8 @@
 import { HeadingLevelProvider } from './chunk-PQADV6P6.js';
 import { useLayerContainer } from './chunk-7RPGY3JE.js';
 import { focusables, useModalLayer, useBodyScrollLock } from './chunk-R25RGPUB.js';
-import { IconButton } from './chunk-4UQ7SMPK.js';
-import { Button } from './chunk-ZAO4HHXI.js';
+import { IconButton } from './chunk-4FQT6ZAY.js';
+import { Button } from './chunk-OG6CL3EB.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Modal-BNT3TDV2.css';
 import { useId, useRef, useCallback } from 'react';

package/dist/{chunk-2QLOH454.js → chunk-BXPLX7YU.js}

@@ -1,7 +1,7 @@
-import { Kbd } from './chunk-KJ34ZBBI.js';
-import { Modal } from './chunk-MV2E3QZM.js';
+import { Kbd } from './chunk-SMBKXWML.js';
+import { Modal } from './chunk-BTHX2FS3.js';
 import { useListbox } from './chunk-6MU7HNB4.js';
-import { Input } from './chunk-DSUY5F4E.js';
+import { Input } from './chunk-ZGX2DP7F.js';
 import { Count } from './chunk-BHHIIK3M.js';
 import { isComposing } from './chunk-R25RGPUB.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';

package/dist/{chunk-V34H2YCY.js → chunk-CEOXFO3E.js}

@@ -2,7 +2,7 @@ import { CardHeaderSlotContext } from './chunk-AV2DXAEL.js';
 import { Count } from './chunk-BHHIIK3M.js';
 import { useHeadingLevel, HeadingLevelProvider, nextHeadingLevel, headingTag } from './chunk-PQADV6P6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Card-GLP7SUV6.css';
+import './Card-KJOYHDTJ.css';
 import { createContext, useId, useState, isValidElement, useRef, useCallback, useMemo, Children, cloneElement, useContext, useEffect, Fragment } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 

package/dist/{chunk-KKLITCMF.js → chunk-CLPDVL46.js}

@@ -1,16 +1,16 @@
 import { Toolbar } from './chunk-PGRPNDWM.js';
 import { PageHeader } from './chunk-HOXGBLEY.js';
 import { RelativeTime } from './chunk-3CZ7XAVY.js';
-import { Kbd } from './chunk-KJ34ZBBI.js';
-import { DataTable } from './chunk-AGQ3YLA5.js';
-import { Menu } from './chunk-LSJZUA5V.js';
-import { DateTimePicker } from './chunk-IBYO2IJN.js';
-import { Popover } from './chunk-AUS5FNQE.js';
+import { Kbd } from './chunk-SMBKXWML.js';
+import { DataTable } from './chunk-CVB7O3SZ.js';
+import { Menu } from './chunk-LSB3EHBW.js';
+import { DateTimePicker } from './chunk-5I56UXBJ.js';
+import { Popover } from './chunk-PDUZO35I.js';
 import { useListbox, useOptionKeys } from './chunk-6MU7HNB4.js';
-import { Input } from './chunk-DSUY5F4E.js';
+import { Input } from './chunk-ZGX2DP7F.js';
 import { Count } from './chunk-BHHIIK3M.js';
-import { IconButton } from './chunk-4UQ7SMPK.js';
-import { Button } from './chunk-ZAO4HHXI.js';
+import { IconButton } from './chunk-4FQT6ZAY.js';
+import { Button } from './chunk-OG6CL3EB.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './DataView-N6JX464S.css';

package/dist/{chunk-AGQ3YLA5.js → chunk-CVB7O3SZ.js}

@@ -1,14 +1,14 @@
-import { Menu } from './chunk-LSJZUA5V.js';
+import { Menu } from './chunk-LSB3EHBW.js';
 import { EmptyValue } from './chunk-EUCC37WY.js';
-import { Modal } from './chunk-MV2E3QZM.js';
+import { Modal } from './chunk-BTHX2FS3.js';
 import { useCardHeaderSlot } from './chunk-AV2DXAEL.js';
-import { Checkbox } from './chunk-UA7O3KKJ.js';
+import { Checkbox } from './chunk-YCTMKKRA.js';
 import { useClipboard } from './chunk-5VNUYO76.js';
-import { IconButton } from './chunk-4UQ7SMPK.js';
-import { Button } from './chunk-ZAO4HHXI.js';
+import { IconButton } from './chunk-4FQT6ZAY.js';
+import { Button } from './chunk-OG6CL3EB.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './DataTable-OLHPF7D4.css';
+import './DataTable-WZK3V62B.css';
 import React, { useState, useCallback, useMemo, useRef, useLayoutEffect, useEffect, useId } from 'react';
 import { createPortal } from 'react-dom';
 import { CheckGlyph, CircleAlertGlyph, CopyGlyph, ChevronsLeftGlyph, ChevronLeftGlyph, ChevronRightGlyph, ChevronsRightGlyph, SettingsGlyph, GripVerticalGlyph, ChevronUpGlyph, ChevronDownGlyph, TrashGlyph, ArrowUpGlyph, ArrowDownGlyph, ChevronsUpDownGlyph, RotateCcwGlyph } from '@crewlethq/icons/glyphs';

package/dist/{chunk-QY7UU5ZB.js → chunk-DRHXRGB6.js}

@@ -1,6 +1,6 @@
 import { Count } from './chunk-BHHIIK3M.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Tabs-XCNPHA7B.css';
+import './Tabs-BWFQSWY3.css';
 import React, { useRef, useState, useLayoutEffect } from 'react';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-V2XMNLMS.js → chunk-E6UWRXNM.js}

@@ -1,6 +1,6 @@
 import { useAnnouncer } from './chunk-RSAQOKH3.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './TagGroup-APC2EFH4.css';
+import './TagGroup-BCQZD7ZD.css';
 import { useState, useRef, Children } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-NQ2HQ6P5.js → chunk-HVPC2GHY.js}

@@ -1,12 +1,12 @@
-import { Select } from './chunk-SJQ546ID.js';
-import { Popover } from './chunk-AUS5FNQE.js';
+import { Select } from './chunk-SEFMO2EV.js';
+import { Popover } from './chunk-PDUZO35I.js';
 import { today, shiftMonth, CalendarGrid, compareDays } from './chunk-GXQ3B46I.js';
-import { Input } from './chunk-DSUY5F4E.js';
+import { Input } from './chunk-ZGX2DP7F.js';
 import { isComposing } from './chunk-R25RGPUB.js';
-import { IconButton } from './chunk-4UQ7SMPK.js';
-import { Button } from './chunk-ZAO4HHXI.js';
+import { IconButton } from './chunk-4FQT6ZAY.js';
+import { Button } from './chunk-OG6CL3EB.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './TimeWindowPicker-7I7KWCMU.css';
+import './TimeWindowPicker-GBF4JDFI.css';
 import { useMemo, useState, useRef, useId, useEffect } from 'react';
 import { ClockGlyph, ChevronDownGlyph, CheckGlyph, ChevronLeftGlyph, ChevronRightGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs } from 'react/jsx-runtime';

package/dist/{chunk-FFKYL7Z3.js → chunk-L7THQMFB.js}

@@ -1,8 +1,8 @@
 import { useTreeState, useMeasuredSizes, layoutForest, treeAncestors, useLayoutAnchor, treeExpandable, layoutConnectors, treeItemAction, treeStep, treePosInSet, treeSetSize, treeLevel, placeGroups } from './chunk-S3BCVWTU.js';
-import { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, Canvas } from './chunk-2HY7I3NT.js';
+import { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, Canvas } from './chunk-VE6LD3KM.js';
 import { focusables } from './chunk-R25RGPUB.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './TreeCanvas-HVOV4SQN.css';
+import './TreeCanvas-L2XYONWL.css';
 import { useState, useRef, useMemo, useLayoutEffect, useCallback, useImperativeHandle, useId, useSyncExternalStore } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
@@ -133,6 +133,7 @@ function TreeCanvas({
   controlsBelow,
   hint,
   dimmed = false,
+  ground,
   composing = null,
   labels,
   ref,
@@ -461,6 +462,7 @@ function TreeCanvas({
           controlsBelow,
           hint,
           dimmed,
+          ground,
           largestItemWidth: widestCard,
           labels,
           children: [

package/dist/{chunk-PAWGBSHU.js → chunk-LOECRMHA.js}

@@ -1,6 +1,6 @@
 import { StatusDot } from './chunk-WIATRXEJ.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Tag-4OXGO2DU.css';
+import './Tag-4BRQS6GN.css';
 import { XGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';