@crewlethq/ui 0.32.0 → 0.34.0

package/dist/{chunk-77DRMDXR.js → chunk-HG5VF3TZ.js}

@@ -1,6 +1,6 @@
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Charts-RY4JN5FC.css';
+import './Charts-MBJG72BS.css';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useState, useRef, useCallback, useId } from 'react';
 
@@ -29,7 +29,7 @@ function Legend({ items, className }) {
       /* @__PURE__ */ jsx(
         "span",
         {
-          className: "crewlet-legend__swatch",
+          className: cx("crewlet-legend__swatch", item.shape === "line" && "crewlet-legend__swatch--line"),
           "aria-hidden": true,
           style: { "--crewlet-legend-swatch-color": item.color ?? dataColor(index) }
         }
@@ -39,6 +39,16 @@ function Legend({ items, className }) {
     ] }, item.id)) })
   );
 }
+function ChartEmpty({ children, height, align = "center", className }) {
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      className: cx("crewlet-chart-empty", align === "start" && "crewlet-chart-empty--start", className),
+      style: height === void 0 ? void 0 : { minHeight: height },
+      children
+    }
+  );
+}
 function BarList({
   data,
   layout = "stacked",
@@ -52,14 +62,15 @@ function BarList({
   const shown = capped ? data.slice(0, limit) : data;
   const top = max ?? Math.max(1, ...data.map((datum) => datum.value));
   const remaining = capped ? Math.max(0, data.length - limit) : 0;
-  if (!shown.length) return /* @__PURE__ */ jsx("p", { className: "crewlet-bar-list__empty", children: emptyLabel });
+  if (!shown.length)
+    return /* @__PURE__ */ jsx(ChartEmpty, { align: "start", className, children: emptyLabel });
   return (
     // A list, and said to be one: the markers are off, and WebKit drops the
     // list role with them. See Legend for the same note, including why the
     // redundant-role rule is silenced rather than obeyed.
     // eslint-disable-next-line jsx-a11y/no-redundant-roles
     /* @__PURE__ */ jsxs("ul", { role: "list", className: cx("crewlet-bar-list", `crewlet-bar-list--${layout}`, className), children: [
-      shown.map((datum, index) => {
+      shown.map((datum) => {
         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(
@@ -69,7 +80,7 @@ function BarList({
             "aria-hidden": true,
             style: parts.length > 0 ? { width: `${width}%` } : {
               width: `${width}%`,
-              "--crewlet-bar-list-bar-color": datum.color ?? dataColor(index)
+              "--crewlet-bar-list-bar-color": datum.color ?? DATA_COLORS[0]
             },
             children: parts.map((part) => /* @__PURE__ */ jsx(
               "span",
@@ -226,7 +237,13 @@ function useChartHover(count) {
     plotProps: { tabIndex: 0, onKeyDown, onBlur, onPointerLeave }
   };
 }
-function StackedBar({ segments, summary, format = (value) => value.toLocaleString(), className }) {
+function StackedBar({
+  segments,
+  summary,
+  format = (value) => value.toLocaleString(),
+  emptyLabel = "Nothing recorded in this window",
+  className
+}) {
   const named = useId();
   const total = segments.reduce((sum, segment) => sum + Math.max(0, segment.value), 0);
   const drawn = segments.map((segment, index) => ({ ...segment, color: segment.color ?? dataColor(index) })).filter((segment) => segment.value > 0);
@@ -239,6 +256,7 @@ function StackedBar({ segments, summary, format = (value) => value.toLocaleStrin
   const hover = useChartHover(drawn.length);
   const active = hover.active == null ? null : drawn[hover.active];
   const edges = drawn.reduce((at, segment) => [...at, at[at.length - 1] + segment.value / total], [0]);
+  if (drawn.length === 0) return /* @__PURE__ */ jsx(ChartEmpty, { className, children: emptyLabel });
   return /* @__PURE__ */ jsxs("div", { className: cx("crewlet-stacked-bar", className), children: [
     /* @__PURE__ */ jsxs("div", { className: "crewlet-chart-frame", role: "group", "aria-labelledby": named, ...hover.plotProps, children: [
       /* @__PURE__ */ jsx("div", { className: "crewlet-stacked-bar__track", "aria-hidden": true, children: drawn.map((segment, index) => /* @__PURE__ */ jsx(
@@ -273,14 +291,30 @@ function StackedBar({ segments, summary, format = (value) => value.toLocaleStrin
     /* @__PURE__ */ jsx(VisuallyHidden, { id: named, children: sentence })
   ] });
 }
-function ActivityStrip({ buckets, label, summary, className }) {
+function ActivityStrip({
+  buckets,
+  label,
+  summary,
+  reading,
+  emptyLabel = "Nothing recorded in this window",
+  className
+}) {
+  const hover = useChartHover(buckets.length);
   const peak = Math.max(1, ...buckets.map((bucket) => bucket.v));
   const total = buckets.reduce((sum, bucket) => sum + bucket.v, 0);
-  const sentence = summary ? summary({ peak, total, buckets: buckets.length }) : `${label}. ${total.toLocaleString()} in ${buckets.length} buckets, peak ${peak.toLocaleString()}.`;
-  return /* @__PURE__ */ jsx("div", { className: cx("crewlet-activity-strip", className), role: "img", "aria-label": sentence, children: buckets.map((bucket) => /* @__PURE__ */ jsx(
+  const format = reading?.format ?? ((value) => value.toLocaleString());
+  const sentence = summary ? summary({ peak, total, buckets: buckets.length }) : `${label}. ${format(total)} in ${buckets.length} buckets, peak ${format(peak)}.`;
+  if (buckets.length === 0) return /* @__PURE__ */ jsx(ChartEmpty, { className, children: emptyLabel });
+  const active = reading && hover.active != null ? buckets[hover.active] : null;
+  const strip = /* @__PURE__ */ jsx("div", { className: cx("crewlet-activity-strip", className), role: "img", "aria-label": sentence, children: buckets.map((bucket, index) => /* @__PURE__ */ jsx(
     "span",
     {
-      className: cx("crewlet-activity-strip__cell", bucket.v > 0 && "is-active"),
+      className: cx(
+        "crewlet-activity-strip__cell",
+        bucket.v > 0 && "is-active",
+        reading && hover.active === index && "is-read"
+      ),
+      onPointerEnter: reading ? () => hover.point(index) : void 0,
       style: {
         /*
          * A floor of a fifth, so a bucket with one event in it reads as a
@@ -292,6 +326,19 @@ function ActivityStrip({ buckets, label, summary, className }) {
     },
     bucket.t
   )) });
+  if (!reading) return strip;
+  return /* @__PURE__ */ jsxs("div", { className: "crewlet-chart-frame", role: "group", "aria-label": label, ...hover.plotProps, children: [
+    strip,
+    /* @__PURE__ */ jsx(
+      ChartTooltip,
+      {
+        open: active != null,
+        anchor: hover.active == null ? void 0 : { start: hover.active / buckets.length, end: (hover.active + 1) / buckets.length },
+        title: active == null ? void 0 : reading.formatTime(active.t),
+        rows: active == null ? [] : [{ id: "value", name: label, value: format(active.v) }]
+      }
+    )
+  ] });
 }
 function TimeSeries({
   series,
@@ -302,6 +349,8 @@ function TimeSeries({
   format = (value) => value.toLocaleString(),
   formatTime = (at) => new Date(at).toLocaleString(),
   summary,
+  legend = "below",
+  emptyLabel = "Nothing recorded in this window",
   className
 }) {
   const id = useId();
@@ -309,25 +358,35 @@ function TimeSeries({
   const plot = 120;
   const footer = 18;
   const head = 6;
-  const span = Math.max(1, to - from);
+  const span = to - from;
   const peaks = series.map((one) => Math.max(0, ...one.points.map((point) => point.v)));
   const peak = Math.max(1, ...peaks);
-  const x = (at) => (at - from) / span * width;
-  const y = (value) => head + (1 - value / peak) * (plot - head - footer);
+  const low = Math.min(0, ...series.flatMap((one) => one.points.map((point) => point.v)));
+  const x = (at) => span > 0 ? (at - from) / span * width : width / 2;
+  const y = (value) => head + (peak - value) / (peak - low) * (plot - head - footer);
+  const zero = y(0);
   const instants = [...new Set(series.flatMap((one) => one.points.map((point) => point.t)))].sort((a, b) => a - b);
   const hover = useChartHover(instants.length);
   const reading = hover.active == null ? null : instants[hover.active];
   const onPointerMove = (event) => {
     const box = event.currentTarget.getBoundingClientRect();
     if (box.width <= 0 || instants.length === 0) return;
-    const at = from + (event.clientX - box.left) / box.width * span;
+    const at = from + (event.clientX - box.left) / box.width * Math.max(1, span);
     let nearest = 0;
     for (let index = 1; index < instants.length; index += 1) {
       if (Math.abs(instants[index] - at) < Math.abs(instants[nearest] - at)) nearest = index;
     }
     hover.point(nearest);
   };
-  const sentence = summary ? summary({ from, to, peak, series: series.map((one, index) => ({ name: one.name, peak: peaks[index] ?? 0 })) }) : `${label}. ${formatTime(from)} to ${formatTime(to)}, peak ${format(peak)}.`;
+  const sentence = summary ? summary({ from, to, peak, series: series.map((one, index) => ({ name: one.name, peak: peaks[index] ?? 0 })) }) : `${label}. ${formatTime(from)} to ${formatTime(to)}, peak ${format(peak)}${low < 0 ? `, low ${format(low)}` : ""}.`;
+  if (instants.length === 0) {
+    return /* @__PURE__ */ jsx(ChartEmpty, { height, className, children: emptyLabel });
+  }
+  const washed = series.length === 1;
+  const colorOf = (one, index) => one.color ?? dataColor(index);
+  const dots = series.flatMap(
+    (one, index) => one.points.filter((point) => one.points.length === 1 || point.t === reading).map((point) => ({ key: `${one.id}-${point.t}`, point, color: colorOf(one, index) }))
+  );
   return /* @__PURE__ */ jsxs("figure", { className: cx("crewlet-time-series", className), children: [
     /* @__PURE__ */ jsxs("div", { className: "crewlet-chart-frame", role: "group", "aria-label": label, ...hover.plotProps, children: [
       /* @__PURE__ */ jsxs(
@@ -341,32 +400,49 @@ function TimeSeries({
           "aria-label": sentence,
           onPointerMove,
           children: [
-            [0.25, 0.5, 0.75].map((fraction) => /* @__PURE__ */ jsx(
+            [0.25, 0.5, 0.75, 1].map((fraction) => {
+              const at = y(low + (peak - low) * fraction);
+              return /* @__PURE__ */ jsx(
+                "line",
+                {
+                  className: "crewlet-chart__grid-line",
+                  x1: 0,
+                  x2: width,
+                  y1: at,
+                  y2: at,
+                  vectorEffect: "non-scaling-stroke"
+                },
+                fraction
+              );
+            }),
+            low < 0 ? /* @__PURE__ */ jsx(
               "line",
               {
                 className: "crewlet-chart__grid-line",
                 x1: 0,
                 x2: width,
-                y1: y(peak * fraction),
-                y2: y(peak * fraction)
-              },
-              fraction
-            )),
-            /* @__PURE__ */ jsx("line", { className: "crewlet-chart__axis-line", x1: 0, x2: width, y1: plot - footer, y2: plot - footer }),
+                y1: plot - footer,
+                y2: plot - footer,
+                vectorEffect: "non-scaling-stroke"
+              }
+            ) : null,
+            /* @__PURE__ */ jsx("line", { className: "crewlet-chart__axis-line", x1: 0, x2: width, y1: zero, y2: zero, vectorEffect: "non-scaling-stroke" }),
             series.map((one, index) => {
-              const color = one.color ?? dataColor(index);
+              const color = colorOf(one, index);
               const points = [...one.points].sort((a, b) => a.t - b.t);
-              if (points.length === 0) return null;
+              if (points.length < 2) return null;
               const line = points.map((point) => `${x(point.t).toFixed(2)},${y(point.v).toFixed(2)}`).join(" ");
               const first = points[0];
               const last = points[points.length - 1];
-              const area = `${x(first.t).toFixed(2)},${plot - footer} ${line} ${x(last.t).toFixed(2)},${plot - footer}`;
+              const area = `${x(first.t).toFixed(2)},${zero.toFixed(2)} ${line} ${x(last.t).toFixed(2)},${zero.toFixed(2)}`;
               return /* @__PURE__ */ jsxs("g", { children: [
-                /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: `${id}-${index}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
-                  /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: "0.22" }),
-                  /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: "0" })
-                ] }) }),
-                /* @__PURE__ */ jsx("polygon", { points: area, fill: `url(#${id}-${index})` }),
+                washed ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: `${id}-${index}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+                    /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: "0.22" }),
+                    /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: "0" })
+                  ] }) }),
+                  /* @__PURE__ */ jsx("polygon", { points: area, fill: `url(#${id}-${index})` })
+                ] }) : null,
                 /* @__PURE__ */ jsx(
                   "polyline",
                   {
@@ -392,27 +468,51 @@ function TimeSeries({
           ]
         }
       ),
+      dots.map(({ key, point, color }) => /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "crewlet-time-series__dot",
+          "aria-hidden": true,
+          style: {
+            left: `${(x(point.t) / width * 100).toFixed(3)}%`,
+            top: `${(y(point.v) / plot * 100).toFixed(3)}%`,
+            "--crewlet-time-series-dot-color": color
+          }
+        },
+        key
+      )),
       /* @__PURE__ */ jsx(
         ChartTooltip,
         {
           open: reading != null,
-          anchor: reading == null ? void 0 : { start: (reading - from) / span },
+          anchor: reading == null ? void 0 : { start: x(reading) / width },
           title: reading == null ? void 0 : formatTime(reading),
           rows: reading == null ? [] : series.flatMap((one, index) => {
             const point = one.points.find((candidate) => candidate.t === reading);
-            return point ? [{ id: one.id, name: one.name, value: format(point.v), color: one.color ?? dataColor(index) }] : [];
+            return point ? [{ id: one.id, name: one.name, value: format(point.v), color: colorOf(one, index) }] : [];
           })
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs("figcaption", { className: "crewlet-time-series__scale", children: [
+    /* @__PURE__ */ jsxs("figcaption", { className: cx("crewlet-time-series__scale", span <= 0 && "crewlet-time-series__scale--instant"), children: [
       /* @__PURE__ */ jsx("span", { children: formatTime(from) }),
-      /* @__PURE__ */ jsxs("span", { children: [
+      /* @__PURE__ */ jsxs("span", { className: "crewlet-time-series__range", children: [
         "peak ",
-        format(peak)
+        format(peak),
+        low < 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          ", low ",
+          format(low)
+        ] }) : null
       ] }),
-      /* @__PURE__ */ jsx("span", { children: formatTime(to) })
-    ] })
+      span > 0 ? /* @__PURE__ */ jsx("span", { children: formatTime(to) }) : null
+    ] }),
+    legend === "below" && series.length > 0 ? /* @__PURE__ */ jsx(
+      Legend,
+      {
+        className: "crewlet-time-series__legend",
+        items: series.map((one, index) => ({ id: one.id, label: one.name, color: colorOf(one, index), shape: "line" }))
+      }
+    ) : null
   ] });
 }
 function Sparkline({
@@ -456,23 +556,39 @@ function StackedColumns({
   height = PLOT_HEIGHT,
   minHeight = PLOT_HEIGHT,
   format = (value) => COMPACT.format(value),
+  formatScale = format,
   formatTime = (at) => new Date(at).toLocaleDateString(),
+  emptyLabel = "Nothing recorded in this window",
   summary,
   className
 }) {
   const colored = series.map((one, index) => ({ ...one, color: one.color ?? dataColor(index) }));
   const shown = colored.filter((one) => !hidden.includes(one.id));
-  const valueOf = (bucket, id) => Math.max(0, bucket.values[id] ?? 0);
-  const totals = buckets.map((bucket) => shown.reduce((sum, one) => sum + valueOf(bucket, one.id), 0));
-  const peak = Math.max(0, ...totals);
-  const { top, step } = niceScale(peak);
-  const intervals = Math.round(top / step);
+  const valueOf = (bucket, id) => bucket.values[id] ?? 0;
+  const sumOf = (bucket, sign) => shown.reduce((sum, one) => {
+    const value = valueOf(bucket, one.id);
+    return sign * value > 0 ? sum + value : sum;
+  }, 0);
+  const above = buckets.map((bucket) => sumOf(bucket, 1));
+  const below = buckets.map((bucket) => sumOf(bucket, -1));
+  const totals = buckets.map((_, index) => (above[index] ?? 0) + (below[index] ?? 0));
+  const peak = Math.max(0, ...above);
+  const trough = Math.min(0, ...below);
+  const { top, step } = niceScale(peak - trough);
+  const roof = trough < 0 ? Number((Math.ceil(peak / step - 1e-9) * step).toPrecision(12)) : top;
+  const floor = trough < 0 ? Number((Math.floor(trough / step + 1e-9) * step).toPrecision(12)) : 0;
+  const range = roof - floor;
+  const intervals = Math.round(range / step);
   const ticks = Array.from(
     { length: intervals + 1 },
-    (_, index) => Number(((intervals - index) * step).toPrecision(12))
+    (_, index) => Number((roof - index * step).toPrecision(12))
   );
+  const zero = -floor / range * 100;
   const hover = useChartHover(buckets.length);
   const active = hover.active == null ? null : buckets[hover.active];
+  if (buckets.length === 0) {
+    return /* @__PURE__ */ jsx(ChartEmpty, { height: height === "fill" ? minHeight : height, className, children: emptyLabel });
+  }
   const first = buckets[0]?.t ?? null;
   const last = buckets[buckets.length - 1]?.t ?? null;
   const centre = Math.floor((buckets.length - 1) / 2);
@@ -514,7 +630,7 @@ function StackedColumns({
           hasHead ? /* @__PURE__ */ jsx("div", { className: "crewlet-stacked-columns__heading", children: head }) : null,
           legend === "head" ? key : null
         ] }) : null,
-        /* @__PURE__ */ jsx("div", { className: "crewlet-stacked-columns__axis", "aria-hidden": true, style: { height: plotHeight }, children: ticks.map((tick) => /* @__PURE__ */ jsx("span", { className: "crewlet-stacked-columns__tick", children: format(tick) }, tick)) }),
+        /* @__PURE__ */ jsx("div", { className: "crewlet-stacked-columns__axis", "aria-hidden": true, style: { height: plotHeight }, children: ticks.map((tick) => /* @__PURE__ */ jsx("span", { className: "crewlet-stacked-columns__tick", children: formatScale(tick) }, tick)) }),
         /* @__PURE__ */ jsxs("div", { className: "crewlet-chart-frame", role: "group", "aria-label": label, ...hover.plotProps, children: [
           /* @__PURE__ */ jsxs(
             "div",
@@ -526,32 +642,41 @@ function StackedColumns({
               children: [
                 /* @__PURE__ */ jsx("div", { className: "crewlet-stacked-columns__grid", "aria-hidden": true, children: ticks.map((tick) => /* @__PURE__ */ jsx("span", { className: "crewlet-stacked-columns__grid-line" }, tick)) }),
                 buckets.map((bucket, index) => {
-                  const total = totals[index] ?? 0;
-                  const parts = shown.filter((one) => valueOf(bucket, one.id) > 0);
-                  return /* @__PURE__ */ jsx(
+                  const stack = (sign, total) => {
+                    const parts = shown.filter((one) => sign * valueOf(bucket, one.id) > 0);
+                    if (parts.length === 0) return null;
+                    return /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: cx("crewlet-stacked-columns__column", sign < 0 && "crewlet-stacked-columns__column--below"),
+                        style: {
+                          height: `${(Math.abs(total) / range * 100).toFixed(3)}%`,
+                          ...sign > 0 ? { bottom: `${zero.toFixed(3)}%` } : { top: `${(100 - zero).toFixed(3)}%` }
+                        },
+                        children: parts.map((one) => /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            className: "crewlet-stacked-columns__segment",
+                            "data-series": one.id,
+                            style: {
+                              flexGrow: Math.abs(valueOf(bucket, one.id)),
+                              "--crewlet-stacked-columns-segment-color": one.color
+                            }
+                          },
+                          one.id
+                        ))
+                      }
+                    );
+                  };
+                  return /* @__PURE__ */ jsxs(
                     "div",
                     {
                       className: cx("crewlet-stacked-columns__slot", hover.active === index && "is-active"),
                       onPointerEnter: () => hover.point(index),
-                      children: /* @__PURE__ */ jsx(
-                        "div",
-                        {
-                          className: "crewlet-stacked-columns__column",
-                          style: { height: `${(total / top * 100).toFixed(3)}%` },
-                          children: parts.map((one) => /* @__PURE__ */ jsx(
-                            "span",
-                            {
-                              className: "crewlet-stacked-columns__segment",
-                              "data-series": one.id,
-                              style: {
-                                flexGrow: valueOf(bucket, one.id),
-                                "--crewlet-stacked-columns-segment-color": one.color
-                              }
-                            },
-                            one.id
-                          ))
-                        }
-                      )
+                      children: [
+                        stack(1, above[index] ?? 0),
+                        stack(-1, below[index] ?? 0)
+                      ]
                     },
                     bucket.t
                   );
@@ -588,4 +713,4 @@ function StackedColumns({
   );
 }
 
-export { ActivityStrip, BarList, ChartTooltip, DATA_COLORS, DATA_COLOR_OTHER, Legend, Sparkline, StackedBar, StackedColumns, TimeSeries, dataColor, niceScale, useChartHover };
+export { ActivityStrip, BarList, ChartEmpty, ChartTooltip, DATA_COLORS, DATA_COLOR_OTHER, Legend, Sparkline, StackedBar, StackedColumns, TimeSeries, dataColor, niceScale, useChartHover };

package/dist/{chunk-QVE4GJAT.js → chunk-HJO4WCH6.js}

@@ -1,5 +1,5 @@
 import { cx } from './chunk-ODEQTPFM.js';
-import './Container-3TSKMGNI.css';
+import './Container-34BAKG7B.css';
 import { jsx } from 'react/jsx-runtime';
 
 var Container = ({

package/dist/{chunk-JI5AVQLA.js → chunk-HOIZ6MIS.js}

@@ -1,4 +1,4 @@
-import { Tooltip } from './chunk-QWOPX2MN.js';
+import { Tooltip } from './chunk-6ZJ3N7QI.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './FactList-G2H73NFR.css';

package/dist/{chunk-I3BSQUKN.js → chunk-HUVG2FFT.js}

@@ -1,7 +1,7 @@
 import { HeadingLevelProvider } from './chunk-PQADV6P6.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './ArtifactPanel-YFXT5O77.css';
+import './ArtifactPanel-HW3SU7CP.css';
 import { useId, useRef, useLayoutEffect, useEffect } from 'react';
 import { MinimizeGlyph, MaximizeGlyph, XGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/dist/{chunk-VS3KOOOL.js → chunk-ILAEBSLJ.js}

@@ -1,6 +1,6 @@
-import { SlideStage } from './chunk-E6CR5PEV.js';
+import { SlideStage } from './chunk-LV4APO72.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './SlideGrid-RT6QEQEE.css';
+import './SlideGrid-S4LTJ4UU.css';
 import { EyeOffGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
@@ -27,7 +27,7 @@ function SlideGrid({ sections, renderSlide, onOpen, current, className, labels }
           "data-hidden": slide.hidden ? "true" : void 0,
           onClick: () => onOpen(slide.id),
           children: [
-            /* @__PURE__ */ jsx(SlideStage, { label: name, children: renderSlide(slide.id) }),
+            /* @__PURE__ */ jsx(SlideStage, { label: name, framed: true, children: renderSlide(slide.id) }),
             /* @__PURE__ */ jsxs("span", { className: "crewlet-slide-grid__caption", children: [
               /* @__PURE__ */ jsx("span", { className: "crewlet-slide-grid__number", children: n }),
               /* @__PURE__ */ jsx("span", { className: "crewlet-slide-grid__title", children: slide.title || text.untitled }),

package/dist/{chunk-P4BOXB6E.js → chunk-IUD5VA2Z.js}

@@ -1,13 +1,12 @@
 import { isApplePlatform, Kbd } from './chunk-SMBKXWML.js';
-import { Tooltip } from './chunk-QWOPX2MN.js';
-import { SegmentedControl } from './chunk-RCQXUT5K.js';
-import { ArtifactIcon } from './chunk-4JUKWWUD.js';
-import { Menu } from './chunk-2HIOJ4YZ.js';
+import { Tooltip } from './chunk-6ZJ3N7QI.js';
+import { SegmentedControl } from './chunk-CCAXYHQS.js';
+import { ArtifactIcon } from './chunk-PLDUNXAO.js';
+import { Menu } from './chunk-3EB2AV3H.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
-import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './ArtifactBar-MLMJHWY6.css';
+import './ArtifactBar-C462VD4C.css';
 import { useId, useState, useRef, useEffect } from 'react';
 import { ChevronLeftGlyph, EllipsisGlyph, ChevronDownGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -326,7 +325,7 @@ function BarTitle({
         children: title
       }
     ) }),
-    /* @__PURE__ */ jsx(VisuallyHidden, { id: hintId, children: words.renameHint })
+    /* @__PURE__ */ jsx("span", { id: hintId, hidden: true, children: words.renameHint })
   ] });
 }
 function ArtifactVersionChip({

package/dist/{chunk-GR55WT4R.js → chunk-IYO2N5ZH.js}

@@ -1,6 +1,6 @@
 import { Composer } from './chunk-7DZDSSJS.js';
-import { Document } from './chunk-M3LUNN7F.js';
-import { PrincipalAvatar } from './chunk-4KP4RC3O.js';
+import { Document } from './chunk-TYKQ33CL.js';
+import { PrincipalAvatar } from './chunk-CI3VPIJN.js';
 import { toInstant, RelativeTime, formatExact, toISO } from './chunk-3CZ7XAVY.js';
 import { Count } from './chunk-BHHIIK3M.js';
 import { useHeadingLevel, headingTag } from './chunk-PQADV6P6.js';

package/dist/{chunk-RWA4H2TV.js → chunk-J6ON5SYE.js}

@@ -1,4 +1,4 @@
-import { SegmentedControl } from './chunk-RCQXUT5K.js';
+import { SegmentedControl } from './chunk-CCAXYHQS.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './MergeConflicts-O44ESH4T.css';

package/dist/{chunk-AMNN4WDX.js → chunk-JBUMD6DS.js}

@@ -1,6 +1,6 @@
-import { TreeGrid } from './chunk-VEB5ERRE.js';
+import { TreeGrid } from './chunk-QWNVSR6G.js';
 import { createTreeModel, treeParent } from './chunk-MY374UUD.js';
-import { OrgLabel } from './chunk-AKEZ3G5V.js';
+import { OrgLabel } from './chunk-ONQKKHON.js';
 import { AddPill } from './chunk-TROLVEZY.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-BWRGFKJP.js → chunk-K3IJQNB7.js}

@@ -1,4 +1,4 @@
-import { useLayerContainer, viewportBounds, LAYER_GAP, outsideBounds, placePopup, LAYER_REPOSITION_EVENT } from './chunk-HMPFGIWM.js';
+import { useLayerContainer, viewportBounds, LAYER_GAP, anchorGone, placePopup, LAYER_REPOSITION_EVENT } from './chunk-OMV5W53A.js';
 import { usePopupLayer, focusables } from './chunk-R25RGPUB.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Popover-QCINR7WG.css';
@@ -68,14 +68,13 @@ function Popover({
       width: rect.width,
       height: rect.height
     };
-    const whole = { x: 0, y: 0, width: host.width, height: host.height };
     const bounds = {
       x: LAYER_GAP,
       y: LAYER_GAP,
       width: host.width - 2 * LAYER_GAP,
       height: host.height - 2 * LAYER_GAP
     };
-    if (outsideBounds(local, whole)) {
+    if (anchorGone(rect, host, inHost)) {
       close("anchor-gone");
       return;
     }

package/dist/{chunk-LFNUH4GY.js → chunk-K4VP6ZKE.js}

@@ -2,7 +2,7 @@ import { Link } from './chunk-FBSEJO2C.js';
 import { Tag } from './chunk-GFV4LJHH.js';
 import { RelativeTime } from './chunk-3CZ7XAVY.js';
 import { EmptyValue } from './chunk-EUCC37WY.js';
-import { Avatar } from './chunk-5OM447RW.js';
+import { Avatar } from './chunk-PZKHBB7D.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './TableCells-3VN5N2M3.css';

package/dist/{chunk-ZR5VN5IV.js → chunk-KD2IRYCT.js}

@@ -1,6 +1,6 @@
-import { ConfirmModal } from './chunk-I3KKZ2O3.js';
 import { InlineCode } from './chunk-5CLW2CXT.js';
-import { Callout } from './chunk-SVSCLHHI.js';
+import { ConfirmModal } from './chunk-XEGZHHRH.js';
+import { Callout } from './chunk-SZZRIHGT.js';
 import './LinkInterstitial-ET4MSVSV.css';
 import { jsx, jsxs } from 'react/jsx-runtime';