@crewlethq/ui 0.6.3 → 0.8.0

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-RJM4QCGG.js → chunk-6VL4LGWC.js}

@@ -1,6 +1,6 @@
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Charts-B3YEF7R4.css';
+import './Charts-THPA5BWV.css';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useState, useRef, useCallback, useId } from 'react';
 
@@ -61,15 +61,24 @@ function BarList({
     /* @__PURE__ */ jsxs("ul", { role: "list", className: cx("crewlet-bar-list", `crewlet-bar-list--${layout}`, className), children: [
       shown.map((datum, index) => {
         const width = top > 0 && datum.value > 0 ? Math.max(1, datum.value / top * 100) : 0;
+        const parts = (datum.parts ?? []).map((part, at) => ({ ...part, color: part.color ?? dataColor(at) })).filter((part) => part.value > 0);
         const bar = width > 0 ? /* @__PURE__ */ jsx(
           "span",
           {
-            className: "crewlet-bar-list__bar",
+            className: cx("crewlet-bar-list__bar", parts.length > 0 && "crewlet-bar-list__bar--parts"),
             "aria-hidden": true,
-            style: {
+            style: parts.length > 0 ? { width: `${width}%` } : {
               width: `${width}%`,
               "--crewlet-bar-list-bar-color": datum.color ?? dataColor(index)
-            }
+            },
+            children: parts.map((part) => /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "crewlet-bar-list__part",
+                style: { flexGrow: part.value, "--crewlet-bar-list-part-color": part.color }
+              },
+              part.id
+            ))
           }
         ) : null;
         const value = /* @__PURE__ */ jsx("span", { className: "crewlet-bar-list__value", children: datum.display ?? datum.value.toLocaleString() });
@@ -98,15 +107,29 @@ function BarList({
             /* @__PURE__ */ jsx("span", { className: "crewlet-bar-list__sub", children: datum.sub })
           ] })
         ] });
-        return /* @__PURE__ */ jsx("li", { className: "crewlet-bar-list__item", children: datum.href ? /* @__PURE__ */ jsx("a", { className: "crewlet-bar-list__row crewlet-bar-list__row--pressable", href: datum.href, children: body }) : datum.onSelect ? /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            className: "crewlet-bar-list__row crewlet-bar-list__row--pressable",
-            onClick: datum.onSelect,
-            children: body
-          }
-        ) : /* @__PURE__ */ jsx("span", { className: "crewlet-bar-list__row", children: body }) }, datum.id);
+        return /* @__PURE__ */ jsxs("li", { className: "crewlet-bar-list__item", children: [
+          datum.href ? /* @__PURE__ */ jsx("a", { className: "crewlet-bar-list__row crewlet-bar-list__row--pressable", href: datum.href, children: body }) : datum.onSelect ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "crewlet-bar-list__row crewlet-bar-list__row--pressable",
+              onClick: datum.onSelect,
+              children: body
+            }
+          ) : /* @__PURE__ */ jsx("span", { className: "crewlet-bar-list__row", children: body }),
+          parts.length > 0 && /* @__PURE__ */ jsx(
+            Legend,
+            {
+              className: "crewlet-bar-list__key",
+              items: parts.map((part) => ({
+                id: part.id,
+                label: part.label,
+                color: part.color,
+                value: part.display ?? part.value.toLocaleString()
+              }))
+            }
+          )
+        ] }, datum.id);
       }),
       remaining > 0 && /* @__PURE__ */ jsx("li", { className: "crewlet-bar-list__more", children: moreLabel(remaining) })
     ] })

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-CHG7VT2M.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 { DateTimePicker } from './chunk-5I56UXBJ.js';
+import { Popover } from './chunk-PDUZO35I.js';
+import { DataTable } from './chunk-QJZ3Y6WW.js';
+import { Menu } from './chunk-LSB3EHBW.js';
+import { Kbd } from './chunk-SMBKXWML.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-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';
 

package/dist/{chunk-LSJZUA5V.js → chunk-LSB3EHBW.js}

@@ -1,7 +1,7 @@
 import { useLayerContainer, viewportBounds, LAYER_GAP, outsideBounds, placePopup, LAYER_REPOSITION_EVENT } from './chunk-7RPGY3JE.js';
 import { usePopupLayer } 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 './Menu-BT5PMFJI.css';
 import { useId, useState, useRef, useCallback, useLayoutEffect, useEffect } from 'react';

package/dist/{chunk-ERHSECG2.js → chunk-MORLKUGM.js}

@@ -1,4 +1,4 @@
-import { CopyButton } from './chunk-SVNXOK25.js';
+import { CopyButton } from './chunk-26SCUACK.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './CodeBlock-GYNJ2HI6.css';
 import { forwardRef, useRef, useState, useLayoutEffect } from 'react';

package/dist/{chunk-UWQWTGQH.js → chunk-MPXI6FM6.js}

@@ -1,10 +1,10 @@
-import { Tag } from './chunk-PAWGBSHU.js';
+import { Tag } from './chunk-LOECRMHA.js';
 import { useListbox } from './chunk-6MU7HNB4.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 { cx } from './chunk-ODEQTPFM.js';
-import './TagsInput-W4P36PRJ.css';
+import './TagsInput-P2HS5QL4.css';
 import { forwardRef, useState, useRef, useId, useImperativeHandle, useEffect, useMemo, useLayoutEffect } from 'react';
 import { CheckGlyph, ChevronLeftGlyph, ChevronRightGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';

package/dist/{chunk-DHPUMOTX.js → chunk-N5KCGFWI.js}

@@ -1,9 +1,9 @@
-import { useRoving, tabStop, tabId } from './chunk-QY7UU5ZB.js';
+import { useRoving, tabStop, tabId } from './chunk-DRHXRGB6.js';
 import { Count } from './chunk-BHHIIK3M.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Tabs-XCNPHA7B.css';
-import './SegmentedControl-X3BI3XU4.css';
+import './Tabs-BWFQSWY3.css';
+import './SegmentedControl-76HODRBT.css';
 import { useId } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -14,6 +14,8 @@ function SegmentedControl({
   value,
   onValueChange,
   size = "md",
+  layout = "pill",
+  trailing,
   className = "",
   semantics,
   panelId,
@@ -49,10 +51,11 @@ function SegmentedControl({
          * Tabs.css is bundled last), so the cards were drawn inside a pill
          * bar sized to its content, which is what the mode exists to avoid.
          */
-        !cards && "crewlet-tabs--pill",
+        !cards && layout === "pill" && "crewlet-tabs--pill",
         `crewlet-tabs--${size}`,
         "crewlet-segmented",
         cards && "crewlet-segmented--cards",
+        !cards && layout === "chips" && "crewlet-segmented--chips",
         className
       ),
       role: radio ? "radiogroup" : "tablist",
@@ -99,6 +102,7 @@ function SegmentedControl({
             option.value
           );
         }),
+        trailing ? /* @__PURE__ */ jsx("span", { className: "crewlet-segmented__trailing", children: trailing }) : null,
         hint ? /* @__PURE__ */ jsx(VisuallyHidden, { id: hintId, children: hint }) : null
       ]
     }

package/dist/{chunk-ZAO4HHXI.js → chunk-OG6CL3EB.js}

@@ -1,6 +1,6 @@
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Button-EXU36DEH.css';
+import './Button-UWKBTKYD.css';
 import { forwardRef, useId, Children, isValidElement, cloneElement } from 'react';
 import { ExternalLinkGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';

package/dist/{chunk-C5WJUZVR.js → chunk-ORNOOMVY.js}

@@ -1,5 +1,5 @@
 import { useThemePreference, useSystemTheme, resolveTheme } from './chunk-K3OWD7BJ.js';
-import { IconButton } from './chunk-4UQ7SMPK.js';
+import { IconButton } from './chunk-4FQT6ZAY.js';
 import { SunGlyph, MoonGlyph } from '@crewlethq/icons/glyphs';
 import { jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-WUVZDFHS.js → chunk-OVLJEVQS.js}

@@ -1,7 +1,7 @@
 import { useModalLayer, focusables } from './chunk-R25RGPUB.js';
-import { IconButton } from './chunk-4UQ7SMPK.js';
+import { IconButton } from './chunk-4FQT6ZAY.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './AppShell-XARELGIH.css';
+import './AppShell-CEVLW4QG.css';
 import { createContext, useContext, useId, useState, useRef, useCallback, useEffect, useLayoutEffect, useSyncExternalStore } from 'react';
 import { breakpoint } from '@crewlethq/tokens';
 import { MenuGlyph } from '@crewlethq/icons/glyphs';

package/dist/{chunk-AUS5FNQE.js → chunk-PDUZO35I.js}

@@ -1,7 +1,7 @@
 import { useLayerContainer, viewportBounds, LAYER_GAP, outsideBounds, placePopup, LAYER_REPOSITION_EVENT } from './chunk-7RPGY3JE.js';
 import { usePopupLayer, focusables } from './chunk-R25RGPUB.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Popover-WJGCF3ZQ.css';
+import './Popover-QCINR7WG.css';
 import { useId, useState, useRef, useCallback, useLayoutEffect, useEffect, cloneElement } from 'react';
 import { createPortal } from 'react-dom';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';

package/dist/{chunk-YLYOWZ4V.js → chunk-PXU6HOZB.js}

@@ -1,6 +1,6 @@
 import { useAnnouncer } from './chunk-RSAQOKH3.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './NewItemsNotice-T4DSSPVV.css';
+import './NewItemsNotice-Q5ED73BQ.css';
 import { useRef, useEffect } from 'react';
 import { jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-AGQ3YLA5.js → chunk-QJZ3Y6WW.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 { Checkbox } from './chunk-YCTMKKRA.js';
 import { useCardHeaderSlot } from './chunk-AV2DXAEL.js';
-import { Checkbox } from './chunk-UA7O3KKJ.js';
 import { useClipboard } from './chunk-5VNUYO76.js';
-import { IconButton } from './chunk-4UQ7SMPK.js';
-import { Button } from './chunk-ZAO4HHXI.js';
+import { Modal } from './chunk-BTHX2FS3.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-S7KW47IQ.js → chunk-RHHGLTXJ.js}

@@ -1,5 +1,5 @@
 import { useThemePreference, useDensityPreference } from './chunk-K3OWD7BJ.js';
-import { SegmentedControl } from './chunk-DHPUMOTX.js';
+import { SegmentedControl } from './chunk-N5KCGFWI.js';
 import { SunGlyph, MonitorGlyph, MoonGlyph } from '@crewlethq/icons/glyphs';
 import { jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-SJQ546ID.js → chunk-SEFMO2EV.js}

@@ -1,7 +1,7 @@
 import { useListbox, useOptionKeys } from './chunk-6MU7HNB4.js';
 import { useLayerContainer, viewportBounds, outsideBounds, placePopup, LAYER_GAP, LAYER_REPOSITION_EVENT } from './chunk-7RPGY3JE.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Select-E24U5LBC.css';
+import './Select-4ANVLHUY.css';
 import { forwardRef, useId, useMemo, useState, useRef, useCallback, useEffect, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { ChevronDownGlyph, CheckGlyph, SearchGlyph } from '@crewlethq/icons/glyphs';

package/dist/{chunk-KJ34ZBBI.js → chunk-SMBKXWML.js}

@@ -1,6 +1,6 @@
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Kbd-JPLDVJIP.css';
+import './Kbd-MCWJTRTT.css';
 import { Fragment } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 

package/dist/{chunk-FIFNP6PL.js → chunk-SX2DFTQV.js}

@@ -2,7 +2,7 @@ import { useTreeState, treeExpandable, treeLevel, treePosInSet, treeSetSize, tre
 import { LayerNodeBridge } from './chunk-53DVJCVW.js';
 import { LayerHost, LAYER_REPOSITION_EVENT } from './chunk-7RPGY3JE.js';
 import { focusables } from './chunk-R25RGPUB.js';
-import { IconButton } from './chunk-4UQ7SMPK.js';
+import { IconButton } from './chunk-4FQT6ZAY.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './TreeGrid-NSW7VMOX.css';

package/dist/{chunk-L6XZOCP4.js → chunk-UCYIRDND.js}

@@ -1,5 +1,5 @@
-import { Tag } from './chunk-PAWGBSHU.js';
-import './PricingCard-7EFXRSD2.css';
+import { Tag } from './chunk-LOECRMHA.js';
+import './PricingCard-HTAHG4ST.css';
 import { forwardRef } from 'react';
 import { jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-D6EVJUGU.js → chunk-UYK72NOS.js}

@@ -1,5 +1,5 @@
 import { useListbox } from './chunk-6MU7HNB4.js';
-import { Input } from './chunk-DSUY5F4E.js';
+import { Input } from './chunk-ZGX2DP7F.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Combobox-4FUVYIE7.css';
 import { forwardRef, useId, useMemo, useRef, useCallback } from 'react';

package/dist/{chunk-TIWAHZZ6.js → chunk-VCOELPCT.js}

@@ -1,6 +1,6 @@
-import { OrgLabel } from './chunk-WOFOMTGB.js';
+import { OrgLabel } from './chunk-B47YUQGM.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './OrgNode-BT7T2Q2X.css';
+import './OrgNode-TCHJH5FO.css';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 function OrgNodeLabel(props) {

package/dist/{chunk-2HY7I3NT.js → chunk-VE6LD3KM.js}

@@ -1,10 +1,10 @@
 import { LayerNodeBridge } from './chunk-53DVJCVW.js';
 import { LAYER_REPOSITION_EVENT, LayerHost } from './chunk-7RPGY3JE.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 './Canvas-Q6JETCWR.css';
+import './Canvas-YVXHMWLN.css';
 import { useId, useRef, useState, useCallback, useLayoutEffect, useImperativeHandle, useEffect } from 'react';
 import { ZoomOutGlyph, ZoomInGlyph, FullscreenGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
@@ -164,6 +164,7 @@ function Canvas({
   hint,
   largestItemWidth,
   dimmed = false,
+  ground = "plain",
   touch = true,
   labels,
   onReady,
@@ -449,6 +450,7 @@ function Canvas({
       className: cx("crewlet-canvas", className),
       ref: root,
       "data-dimmed": dimmed,
+      "data-ground": ground,
       "data-ready": ready,
       "data-animate": animate === false ? "false" : animate,
       "data-panning": panning,

package/dist/{chunk-CAIHUYXV.js → chunk-W4GQWFRX.js}

@@ -1,5 +1,5 @@
 import { avatarCorner, Avatar } from './chunk-IA232OTU.js';
-import './ImageUpload-YCHJMUGX.css';
+import './ImageUpload-L2GE4JUM.css';
 import { useRef } from 'react';
 import { CameraGlyph, XGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';

package/dist/{chunk-BWIPKSWA.js → chunk-XX2VQE55.js}

@@ -1,4 +1,4 @@
-import { Button } from './chunk-ZAO4HHXI.js';
+import { Button } from './chunk-OG6CL3EB.js';
 import './ErrorBoundary-U2PA3LY2.css';
 import { Component } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/dist/{chunk-UA7O3KKJ.js → chunk-YCTMKKRA.js}

@@ -1,5 +1,5 @@
 import { cx } from './chunk-ODEQTPFM.js';
-import './Checkbox-BOXQ747I.css';
+import './Checkbox-UE7TEPAM.css';
 import { forwardRef, useId, useRef, useCallback, useEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-DSUY5F4E.js → chunk-ZGX2DP7F.js}

@@ -1,8 +1,8 @@
 import { useHeadingLevel, headingTag, HeadingLevelProvider, nextHeadingLevel } from './chunk-PQADV6P6.js';
-import { IconButton } from './chunk-4UQ7SMPK.js';
+import { IconButton } from './chunk-4FQT6ZAY.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Input-2PU5CPKK.css';
+import './Input-DRFNI26F.css';
 import { forwardRef, useRef, useState, useImperativeHandle, useEffect, useId } from 'react';
 import { XGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';