@synnaxlabs/pluto 0.12.0

package/dist/index.js

@@ -0,0 +1,1182 @@
+import { j as jsxRuntimeExports } from "./jsx-runtime-rX5tAIG2.js";
+import { createElement, useCallback, useState, useEffect } from "react";
+import { s as Icon$1, a3 as variantColors, a4 as Aggregator, r as Text, a5 as useAggregator, a6 as useContext, a7 as useNotifications, a8 as Config, a9 as Context, aa as Dialog, ab as formatTip, ac as useConfig, ad as wrap, ae as useUniqueKey, M as MaybeEditable, I as Icon$2, g as Text$1, af as useDrop, ag as filterByType, ah as canDropOfType, ai as useDraggingState, aj as use$5, x as Provider$1, ak as Provider$2, al as Provider$3, am as Provider$4, P as Provider$8, e as DateTime } from "./Toggle-kLunfJtR.js";
+import { an, ao, D, ap, aq, au, aD, as, aE, ar, aw, a2, aB, aC, ax, at, av, ay, az, aA } from "./Toggle-kLunfJtR.js";
+import { a as Color, Z as ZERO, g as cssString, f as fromHSLA, h as toHex, C as CSS, b as box$1, i as Case, l as location, j as external$h, e as external$1$1, x as xy, T as TimeStamp, k as TimeSpan } from "./css-NTD4Xm8x.js";
+import { n } from "./css-NTD4Xm8x.js";
+import { B as ButtonTitle, A as Actions } from "./external-up1sE3F6.js";
+import { e } from "./external-up1sE3F6.js";
+import { H as Header } from "./Header-7x6367IV.js";
+import { V as VARIANTS, g as specZ, v as variantZ } from "./component-k78Jq9I7.js";
+import { h } from "./component-k78Jq9I7.js";
+import { S as Space, P as Pack } from "./Center-gEKkAkdh.js";
+import { G } from "./Center-gEKkAkdh.js";
+import { d as Picker, e as Swatch, f as Core, M as Multiple, g as Single, h as calculateDiffPercentage, i as useMultiple, j as useContext$1, k as Simple, l as useGridPosition, m as Multiple$1, n as Single$1, o as MODES, D as DEFAULT_TRIGGERS, p as MASK_MODES, q as Mask, r as PAN_DEFAULT_TRIGGERS, s as SELECT_DEFAULT_TRIGGERS, Z as ZOOM_DEFAULT_TRIGGERS, t as use$3, v as Line$1, w as LinePlot$1, V as Viewport, X as XAxis$1, Y as YAxis$1, x as axisFactory, y as selectViewportEl, z as useViewport, A as Tooltip$1, B as Measure, E as HAUL_TYPE, R as Rule, G as AliasInput, I as AliasProvider, J as SelectMultiple, K as SelectSingle, N as useActiveRange, O as useAlias, Q as useAliases, U as useContext$2, W as useName, _ as HAUL_CREATE_TYPE, $ as HAUL_DROP_TYPE, a0 as Mosaic, a1 as Bar, a2 as Drawer, a3 as useDrawer, a4 as Background, a5 as Controls$1, a6 as Diagram, a7 as FitViewControl, a8 as HandleLayout, a9 as NodeLayout, aa as NodeRenderer, ab as ToggleEditControl, ac as selectNode, ad as selectNodeBox, ae as selectNodeLayout, af as use$4, ag as useContext$3, ah as StringTD, ai as TR, aj as Table$1, ak as LabelSpec, al as REGISTRY, am as initialProps, an as corePropsZ, ao as use$6, ap as Chip, aq as Controller, ar as Indicator, as as Legend$1, at as StateProvider, au as useContext$4, av as Provider$5, aw as Provider$6, ax as Provider$7, ay as use$7, az as Tag } from "./TimeRangeChip-eDCX5pUC.js";
+import { aC as aC2, aI, aD as aD2, aE as aE2, aG, aF, aA as aA2, aB as aB2, aH, T, aK, aJ, aM, aL } from "./TimeRangeChip-eDCX5pUC.js";
+import { ag as streamChannelData, u as channelData, a_ as Table, a$ as tableStateZ } from "./table-8MFXzE4C.js";
+import { u as useTypography } from "./font-t7KoGNFX.js";
+import { e as e2 } from "./external-vXBQOmKv.js";
+import { e as e3 } from "./external-9pS8-DvV.js";
+import { e as e4 } from "./external-KxlyA74C.js";
+import { e as e5 } from "./external-QRmqSjV0.js";
+import { e as e6 } from "./external-oX1JmOFf.js";
+import { b as resetSelection, r as rename } from "./Selector-R3lL41_i.js";
+import { B as Button$1 } from "./SelectLevel-cewIWtOv.js";
+import { e as e7 } from "./external-_CtRDtih.js";
+import { e as e8 } from "./external-9RCzxzgZ.js";
+import { e as e9 } from "./external-kbDFnfuk.js";
+import { T as Text$2 } from "./external-QuVTCnGl.js";
+import { e as e10 } from "./external-QuVTCnGl.js";
+import { V } from "./Video-Vpwp5ao1.js";
+import "react-hook-form";
+import "./Item-EDdYN2NK.js";
+import { e as e11 } from "./external-2Aicsb3l.js";
+import "react-dom";
+import "zod";
+import "./useDrag-rQt5hv4R.js";
+import "./Item-owLU4Xop.js";
+import "./dimensions-guJ5PHmb.js";
+import "./Link-laNlv47N.js";
+import "./Video-w40geAFS.js";
+import "./fontString-RKvYIr5H.js";
+import "./Keyboard-mE03PKwA.js";
+const Circle = ({ variant }) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Icon$1.Circle, { color: variantColors[variant] });
+};
+const external$g = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  Aggregator,
+  Circle,
+  Text,
+  VARIANTS,
+  specZ,
+  useAggregator,
+  useContext,
+  useNotifications,
+  variantZ
+}, Symbol.toStringTag, { value: "Module" }));
+const external$f = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  Color,
+  Picker,
+  Swatch,
+  ZERO,
+  cssString,
+  fromHSLA,
+  toHex
+}, Symbol.toStringTag, { value: "Module" }));
+const external$e = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  Config,
+  Context,
+  Dialog,
+  formatTip,
+  useConfig,
+  wrap
+}, Symbol.toStringTag, { value: "Module" }));
+const external$d = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  Core,
+  Multiple,
+  Single,
+  calculateDiffPercentage,
+  useMultiple
+}, Symbol.toStringTag, { value: "Module" }));
+const DIRECTION = "y";
+const MIN_SIZE = 28;
+const COLLAPSED_THRESHOLD = 32;
+const EXPAND_THRESHOLD = 40;
+const DEFAULT_EXPAND_SIZE = 0.5;
+const Accordion = ({ data, ...props }) => {
+  const {
+    setSize,
+    props: { sizeDistribution: sizes, ref, ...resizeProps }
+  } = useMultiple({
+    direction: DIRECTION,
+    count: data.length,
+    minSize: MIN_SIZE
+  });
+  const onExpand = (index) => {
+    if (ref.current == null)
+      return;
+    const parentSize = box$1.dim(box$1.construct(ref.current), DIRECTION);
+    if (sizes[index] < EXPAND_THRESHOLD / parentSize)
+      setSize(index, data[index].initialSize ?? DEFAULT_EXPAND_SIZE);
+    else
+      setSize(index, MIN_SIZE + 1);
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Multiple,
+    {
+      empty: true,
+      className: CSS.B("accordion"),
+      sizeDistribution: sizes,
+      ref,
+      ...props,
+      ...resizeProps,
+      children: data.map((entry, i) => /* @__PURE__ */ createElement(
+        EntryC,
+        {
+          ...entry,
+          key: entry.key,
+          index: i,
+          direction: DIRECTION,
+          onExpand,
+          parent: ref,
+          size: sizes[i]
+        }
+      ))
+    }
+  );
+};
+const expandedIcon = /* @__PURE__ */ jsxRuntimeExports.jsx(Icon$1.Caret.Down, { "aria-label": "contract" });
+const collapsedIcon = /* @__PURE__ */ jsxRuntimeExports.jsx(Icon$1.Caret.Right, { "aria-label": "expand" });
+const EntryC = ({
+  index,
+  name,
+  content,
+  actions,
+  size,
+  parent,
+  onExpand
+}) => {
+  let expanded = true;
+  if (parent.current != null) {
+    const parentSize = box$1.dim(box$1.construct(parent.current), DIRECTION);
+    expanded = size * parentSize > COLLAPSED_THRESHOLD;
+  }
+  const icon = expanded ? expandedIcon : collapsedIcon;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(Header, { level: "p", className: CSS.expanded(expanded), empty: true, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(ButtonTitle, { startIcon: icon, onClick: () => onExpand(index), children: name }),
+      actions != null && /* @__PURE__ */ jsxRuntimeExports.jsx(Actions, { children: actions })
+    ] }),
+    content
+  ] });
+};
+const Accordion$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  Accordion
+}, Symbol.toStringTag, { value: "Module" }));
+const Legend = ({
+  className,
+  style,
+  onLineChange,
+  ...props
+}) => {
+  const { lines } = useContext$1("Legend");
+  useContext$1("Legend");
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Simple, { data: lines, onEntryChange: onLineChange, ...props });
+};
+const Title = ({
+  level = "h2",
+  ...props
+}) => {
+  const key = useUniqueKey();
+  const font = useTypography(level);
+  const gridStyle = useGridPosition(
+    {
+      key,
+      size: (font.lineHeight + 2) * font.baseSize,
+      loc: "top",
+      order: "first"
+    },
+    "Title"
+  );
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Space, { justify: "center", align: "center", style: gridStyle, children: /* @__PURE__ */ jsxRuntimeExports.jsx(MaybeEditable, { ...props, level }) });
+};
+const DATA = [
+  {
+    key: "x",
+    icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon$1.Arrow.Right, {})
+  },
+  {
+    key: "y",
+    icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon$1.Arrow.Down, {})
+  }
+];
+const defaultSelectDirectionButton = ({
+  key,
+  entry,
+  onClick,
+  selected
+}) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Icon$2,
+    {
+      variant: selected ? "filled" : "outlined",
+      onClick,
+      children: entry.icon
+    },
+    key
+  );
+};
+const Direction = ({
+  children = defaultSelectDirectionButton,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Button$1, { ...props, data: DATA, children });
+};
+const external$c = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  Button: Button$1,
+  Direction,
+  Multiple: Multiple$1,
+  Single: Single$1
+}, Symbol.toStringTag, { value: "Module" }));
+const Tooltip = ({ mode, triggers }) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Space, { direction: "x", align: "center", children: [
+  /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { level: "small", children: Case.capitalize(mode) }),
+  /* @__PURE__ */ jsxRuntimeExports.jsx(Text$2, { trigger: triggers[0], level: "small" })
+] });
+const MODE_ICONS = {
+  zoom: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon$1.Zoom, {}),
+  pan: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon$1.Pan, {}),
+  select: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon$1.Selection, {}),
+  zoomReset: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon$1.Expand, {}),
+  click: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon$1.Bolt, {})
+};
+const SelectMode = ({
+  triggers,
+  disable = ["zoomReset", "click"],
+  ...props
+}) => {
+  const data = Object.entries(triggers).filter(([key]) => !disable.includes(key) && MODES.includes(key)).map(([key, value]) => ({
+    key,
+    icon: MODE_ICONS[key],
+    tooltip: /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { mode: key, triggers: value })
+  })).sort((a, b) => MODES.indexOf(a.key) - MODES.indexOf(b.key));
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Button$1, { ...props, data, entryRenderKey: "icon", children: ({ title: _, entry, ...props2 }) => /* @__PURE__ */ createElement(
+    Icon$2,
+    {
+      ...props2,
+      key: entry.key,
+      variant: props2.selected ? "filled" : "text",
+      size: "medium",
+      tooltip: entry.tooltip,
+      tooltipLocation: { x: "right", y: "top" }
+    },
+    entry.icon
+  ) });
+};
+const external$b = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  DEFAULT_TRIGGERS,
+  MASK_MODES,
+  MODES,
+  Mask,
+  PAN_DEFAULT_TRIGGERS,
+  SELECT_DEFAULT_TRIGGERS,
+  SelectMode,
+  ZOOM_DEFAULT_TRIGGERS,
+  use: use$3
+}, Symbol.toStringTag, { value: "Module" }));
+const external$a = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  Legend,
+  Line: Line$1,
+  LinePlot: LinePlot$1,
+  Title,
+  Viewport,
+  XAxis: XAxis$1,
+  YAxis: YAxis$1,
+  axisFactory,
+  selectViewportEl,
+  useContext: useContext$1,
+  useGridPosition,
+  useViewport
+}, Symbol.toStringTag, { value: "Module" }));
+const canDrop = canDropOfType(HAUL_TYPE);
+const LinePlot = ({
+  lines,
+  axes,
+  showTitle = true,
+  title = "",
+  onTitleChange,
+  showLegend = true,
+  titleLevel = "h4",
+  onLineChange,
+  onRuleChange,
+  onAxisChannelDrop,
+  onAxisChange,
+  rules,
+  enableTooltip = true,
+  enableMeasure = false,
+  initialViewport = box$1.DECIMAL,
+  onViewportChange,
+  viewportTriggers,
+  ...restProps
+}) => {
+  const xAxes = axes.filter(({ location: l }) => location.isY(l));
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(LinePlot$1, { ...restProps, children: [
+    xAxes.map((a, i) => {
+      const axisLines = lines.filter((l) => l.axes.x === a.key);
+      const yAxes = axes.filter(({ location: l }) => location.isX(l));
+      const axisRules = rules == null ? void 0 : rules.filter(
+        (r) => [...yAxes.map(({ key: id }) => id), a.key].includes(r.axis)
+      );
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(
+        XAxis,
+        {
+          axis: a,
+          index: i,
+          lines: axisLines,
+          yAxes,
+          rules: axisRules,
+          onAxisChannelDrop,
+          onAxisChange
+        },
+        a.key
+      );
+    }),
+    showLegend && /* @__PURE__ */ jsxRuntimeExports.jsx(Legend, { onLineChange }),
+    showTitle && /* @__PURE__ */ jsxRuntimeExports.jsx(Title, { value: title, onChange: onTitleChange, level: titleLevel }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      Viewport,
+      {
+        initial: initialViewport,
+        onChange: onViewportChange,
+        triggers: viewportTriggers,
+        children: [
+          enableTooltip && /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip$1, {}),
+          enableMeasure && /* @__PURE__ */ jsxRuntimeExports.jsx(Measure, {})
+        ]
+      }
+    )
+  ] });
+};
+const XAxis = ({
+  yAxes,
+  lines,
+  index,
+  rules,
+  onRuleChange,
+  onAxisChannelDrop,
+  onAxisChange,
+  axis: { location: location2, key, showGrid, ...axis }
+}) => {
+  const dropProps = useDrop({
+    type: "Channel.LinePlot.XAxis",
+    canDrop,
+    onDrop: useCallback(
+      ({ items }) => {
+        const dropped = filterByType(HAUL_TYPE, items);
+        onAxisChannelDrop == null ? void 0 : onAxisChannelDrop(
+          key,
+          dropped.map(({ key: key2 }) => key2)
+        );
+        return dropped;
+      },
+      [key, onAxisChannelDrop]
+    )
+  });
+  const xRules = rules == null ? void 0 : rules.filter((r) => r.axis === key);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    XAxis$1,
+    {
+      ...axis,
+      ...dropProps,
+      location: location2,
+      showGrid: showGrid ?? index === 0,
+      className: CSS(
+        CSS.dropRegion(canDropOfType(HAUL_TYPE)(useDraggingState()))
+      ),
+      onAutoBoundsChange: (bounds) => onAxisChange == null ? void 0 : onAxisChange({ key, bounds }),
+      children: [
+        yAxes.map((a, i) => {
+          const yLines = lines.filter((l) => l.axes.y === a.key);
+          const yRules = rules == null ? void 0 : rules.filter((r) => r.axis === a.key);
+          return /* @__PURE__ */ jsxRuntimeExports.jsx(
+            YAxis,
+            {
+              axis: {
+                ...a,
+                showGrid: showGrid ?? (index === 0 && i === 0)
+              },
+              lines: yLines,
+              rules: yRules,
+              onRuleChange,
+              onAxisChannelDrop,
+              onAxisChange
+            },
+            a.key
+          );
+        }),
+        xRules == null ? void 0 : xRules.map((rule) => /* @__PURE__ */ createElement(
+          Rule,
+          {
+            aetherKey: rule.key,
+            ...rule,
+            key: rule.key,
+            onLabelChange: (value) => onRuleChange == null ? void 0 : onRuleChange({ key: rule.key, label: value }),
+            onPositionChange: (value) => onRuleChange == null ? void 0 : onRuleChange({ key: rule.key, position: value })
+          }
+        ))
+      ]
+    }
+  );
+};
+const lineKey = ({ channels: { x, y } }) => `${x ?? 0}-${y}`;
+const YAxis = ({
+  lines,
+  rules,
+  onRuleChange,
+  onAxisChannelDrop,
+  onAxisChange,
+  axis: { key, location: loc2, ...props }
+}) => {
+  const dropProps = useDrop({
+    type: "Channel.LinePlot.YAxis",
+    canDrop,
+    onDrop: useCallback(
+      ({ items }) => {
+        const dropped = filterByType(HAUL_TYPE, items);
+        onAxisChannelDrop == null ? void 0 : onAxisChannelDrop(
+          key,
+          dropped.map(({ key: key2 }) => key2)
+        );
+        return dropped;
+      },
+      [key, onAxisChannelDrop]
+    )
+  });
+  const dragging = useDraggingState();
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    YAxis$1,
+    {
+      ...props,
+      ...dropProps,
+      location: loc2,
+      className: CSS(CSS.dropRegion(canDropOfType(HAUL_TYPE)(dragging))),
+      onAutoBoundsChange: (bounds) => onAxisChange == null ? void 0 : onAxisChange({ key, bounds }),
+      children: [
+        lines.map((l) => /* @__PURE__ */ jsxRuntimeExports.jsx(Line, { line: l }, lineKey(l))),
+        rules == null ? void 0 : rules.map((r) => /* @__PURE__ */ createElement(
+          Rule,
+          {
+            aetherKey: r.key,
+            ...r,
+            key: r.key,
+            onLabelChange: (value) => onRuleChange == null ? void 0 : onRuleChange({ key: r.key, label: value }),
+            onPositionChange: (value) => onRuleChange == null ? void 0 : onRuleChange({ key: r.key, position: value })
+          }
+        ))
+      ]
+    }
+  );
+};
+const Line = ({ line }) => line.variant === "static" ? /* @__PURE__ */ jsxRuntimeExports.jsx(StaticLine, { line }) : /* @__PURE__ */ jsxRuntimeExports.jsx(DynamicLine, { line });
+const DynamicLine = ({
+  line: {
+    key,
+    timeSpan,
+    channels: { x, y },
+    ...props
+  }
+}) => {
+  const yTelem = streamChannelData({ timeSpan, channel: y });
+  const hasX = x != null && x !== 0;
+  const xTelem = streamChannelData({
+    timeSpan,
+    channel: hasX ? x : y,
+    index: !hasX
+  });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Line$1, { aetherKey: key, y: yTelem, x: xTelem, ...props });
+};
+const StaticLine = ({
+  line: {
+    timeRange,
+    key,
+    channels: { x, y },
+    ...props
+  }
+}) => {
+  const yTelem = channelData({ timeRange, channel: y });
+  const hasX = x != null && x !== 0;
+  const xTelem = channelData({
+    timeRange,
+    channel: hasX ? x : y,
+    index: !hasX
+  });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Line$1, { aetherKey: key, y: yTelem, x: xTelem, ...props });
+};
+const external$9 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  AliasInput,
+  AliasProvider,
+  LinePlot,
+  SelectMultiple,
+  SelectSingle,
+  useActiveRange,
+  useAlias,
+  useAliases,
+  useContext: useContext$2,
+  useName
+}, Symbol.toStringTag, { value: "Module" }));
+const TabNotFound = new Error("Tab not found");
+const InvalidMosaic = new Error("Invalid Mosaic");
+const insertTab = (root, tab, loc = "center", key) => {
+  var _a;
+  root = shallowCopyNode(root);
+  if (key === void 0)
+    return insertAnywhere(root, tab);
+  const node = findNodeOrAncestor(root, key);
+  if (loc === "center") {
+    (_a = node.tabs) == null ? void 0 : _a.push(tab);
+    node.selected = tab.tabKey;
+    return root;
+  }
+  if (node.tabs == null || node.tabs.length === 0)
+    return root;
+  const [insertOrder, siblingOrder, dir] = splitArrangement(loc);
+  node.direction = dir;
+  node[insertOrder] = { key: 0, tabs: [tab], selected: tab.tabKey };
+  node[siblingOrder] = { key: 0, tabs: node.tabs, selected: node.selected };
+  if (node.first == null || node.last == null)
+    throw InvalidMosaic;
+  node.first.key = node.key * 2;
+  node.last.key = node.key * 2 + 1;
+  node.tabs = void 0;
+  node.size = void 0;
+  node.selected = void 0;
+  return root;
+};
+const insertAnywhere = (root, tab) => {
+  root = shallowCopyNode(root);
+  if (root.tabs != null) {
+    root.tabs.push(tab);
+    root.selected = tab.tabKey;
+    return root;
+  }
+  if (root.first != null)
+    root.first = insertAnywhere(root.first, tab);
+  else if (root.last != null)
+    root.last = insertAnywhere(root.last, tab);
+  return root;
+};
+const autoSelectTabs = (root) => {
+  root = shallowCopyNode(root);
+  const selected = [];
+  if (root.tabs != null) {
+    root.selected = resetSelection(root.selected, root.tabs);
+    if (root.selected != null)
+      selected.push(root.selected);
+  }
+  if (root.first != null) {
+    const [f, s] = autoSelectTabs(root.first);
+    root.first = f;
+    selected.push(...s);
+  }
+  if (root.last != null) {
+    const [r, l] = autoSelectTabs(root.last);
+    root.last = r;
+    selected.push(...l);
+  }
+  return [root, selected];
+};
+const removeTab = (root, tabKey) => {
+  var _a;
+  root = shallowCopyNode(root);
+  const [, node] = findMosaicTab(root, tabKey);
+  if (node == null)
+    throw TabNotFound;
+  node.tabs = (_a = node.tabs) == null ? void 0 : _a.filter((t) => t.tabKey !== tabKey);
+  node.selected = resetSelection(node.selected, node.tabs);
+  const gced = gc(root);
+  const selected = node.selected ?? findSelected(gced);
+  return [gced, selected];
+};
+const findSelected = (root) => {
+  if (root.selected != null)
+    return root.selected;
+  if (root.first != null)
+    return findSelected(root.first);
+  if (root.last != null)
+    return findSelected(root.last);
+  return null;
+};
+const selectTab = (root, tabKey) => {
+  root = shallowCopyNode(root);
+  const [tab, entry] = findMosaicTab(root, tabKey);
+  if (tab == null || entry == null)
+    throw TabNotFound;
+  entry.selected = tabKey;
+  return root;
+};
+const moveTab = (root, tabKey, loc, to) => {
+  root = shallowCopyNode(root);
+  const [tab, entry] = findMosaicTab(root, tabKey);
+  if (tab == null || entry == null)
+    throw TabNotFound;
+  const [r2, selected] = removeTab(root, tabKey);
+  const r3 = insertTab(r2, tab, loc, to);
+  return [r3, selected];
+};
+const resizeNode = (root, key, size) => {
+  const node = findMosaicNode(root, key);
+  if (node == null)
+    throw new Error("Node not found");
+  else
+    node.size = size;
+  return root;
+};
+const renameTab = (root, tabKey, name) => {
+  root = shallowCopyNode(root);
+  const [, leaf] = findMosaicTab(root, tabKey);
+  if ((leaf == null ? void 0 : leaf.tabs) == null)
+    throw TabNotFound;
+  leaf.tabs = rename(tabKey, name, (leaf == null ? void 0 : leaf.tabs) ?? []);
+  return root;
+};
+const isEmpty = (root) => {
+  if (root.tabs != null)
+    return root.tabs.length === 0;
+  return root.first == null && root.last == null;
+};
+const findNodeOrAncestor = (root, key) => {
+  const node = findMosaicNode(root, key);
+  if (node != null)
+    return node;
+  const next = Math.floor(key / 2);
+  return next === 0 ? root : findNodeOrAncestor(root, next);
+};
+const gc = (root) => {
+  let gced = true;
+  while (gced)
+    [root, gced] = _gc(root);
+  return root;
+};
+const _gc = (node) => {
+  if (node.first == null || node.last == null)
+    return [node, false];
+  if (shouldGc(node.first))
+    return [liftUp(node.last, true), true];
+  if (shouldGc(node.last))
+    return [liftUp(node.first, false), true];
+  let [sGC, eGC] = [false, false];
+  [node.first, sGC] = _gc(node.first);
+  [node.last, eGC] = _gc(node.last);
+  return [node, sGC || eGC];
+};
+const liftUp = (node, isLast) => {
+  node.size = void 0;
+  node.key = (node.key - Number(isLast)) / 2;
+  return node;
+};
+const shouldGc = (node) => node.first == null && node.last == null && (node.tabs == null || node.tabs.length === 0);
+const findMosaicTab = (node, tabKey) => {
+  if (node.tabs != null) {
+    const tab = node.tabs.find((t) => t.tabKey === tabKey);
+    if (tab != null)
+      return [tab, node];
+  }
+  if (node.first == null || node.last == null)
+    return [void 0, void 0];
+  const [t1Tab, t2Tree] = findMosaicTab(node.first, tabKey);
+  if (t1Tab != null && t2Tree != null)
+    return [t1Tab, t2Tree];
+  const [t2Tab, t2Tree2] = findMosaicTab(node.last, tabKey);
+  return [t2Tab, t2Tree2];
+};
+const findMosaicNode = (node, key) => {
+  if (node.key === key)
+    return node;
+  if (node.first == null || node.last == null)
+    return void 0;
+  const n1 = findMosaicNode(node.first, key);
+  if (n1 != null)
+    return n1;
+  return findMosaicNode(node.last, key);
+};
+const splitArrangement = (insertPosition) => {
+  switch (insertPosition) {
+    case "top":
+      return ["first", "last", "y"];
+    case "left":
+      return ["first", "last", "x"];
+    case "bottom":
+      return ["last", "first", "y"];
+    case "right":
+      return ["last", "first", "x"];
+    case "center":
+      throw new Error("cannot split a center placed tab");
+  }
+};
+const shallowCopyNode = (node) => external$h.copy(node);
+const use$2 = ({ allowRename = false, initialTree }) => {
+  const [root, setRoot] = useState(initialTree);
+  useEffect(() => setRoot(autoSelectTabs(initialTree)[0]), [initialTree]);
+  const handleDrop = (key, tabKey, loc) => setRoot((r) => moveTab(r, tabKey, loc, key)[0]);
+  const handleClose = (tabKey) => setRoot((r) => removeTab(r, tabKey)[0]);
+  const handleSelect = (tabKey) => setRoot((r) => selectTab(r, tabKey));
+  const handleResize = (key, size) => setRoot((r) => resizeNode(r, key, size));
+  const handleRename = (tabKey, title) => setRoot((r) => renameTab(r, tabKey, title));
+  return {
+    root,
+    onDrop: handleDrop,
+    onClose: handleClose,
+    onSelect: handleSelect,
+    onResize: handleResize,
+    onRename: allowRename ? handleRename : void 0
+  };
+};
+const external$8 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  HAUL_CREATE_TYPE,
+  HAUL_DROP_TYPE,
+  Mosaic,
+  autoSelectTabs,
+  findSelected,
+  insertTab,
+  isEmpty,
+  moveTab,
+  removeTab,
+  renameTab,
+  resizeNode,
+  selectTab,
+  use: use$2
+}, Symbol.toStringTag, { value: "Module" }));
+const external$7 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  Bar,
+  Drawer,
+  useDrawer
+}, Symbol.toStringTag, { value: "Module" }));
+const Icon = {
+  Close: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "svg",
+    {
+      width: "124",
+      height: "124",
+      viewBox: "0 0 124 124",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "rect",
+          {
+            x: "26.8701",
+            y: "88.3883",
+            width: "87",
+            height: "11",
+            transform: "rotate(-45 26.8701 88.3883)",
+            fill: "#7E0508"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "rect",
+          {
+            x: "26.8701",
+            y: "34.6482",
+            width: "11",
+            height: "87",
+            transform: "rotate(-45 26.8701 34.6482)",
+            fill: "#7E0508"
+          }
+        )
+      ]
+    }
+  ),
+  Minimize: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "svg",
+    {
+      width: "87",
+      height: "11",
+      viewBox: "0 0 87 11",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx("rect", { x: "15", width: "60", height: "11", fill: "#985712" })
+    }
+  ),
+  Maximize: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "svg",
+    {
+      width: "143",
+      height: "143",
+      viewBox: "0 0 143 143",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "path",
+          {
+            d: "M108.242 32.8833C108.797 32.8817 109.247 33.3317 109.245 33.8862L109.092 87.5891C109.09 88.4786 108.014 88.9223 107.385 88.2933L53.8351 34.7432C53.2061 34.1142 53.6499 33.0387 54.5394 33.0361L108.242 32.8833Z",
+            fill: "#0B650D"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "path",
+          {
+            d: "M33.8862 109.245C33.3317 109.247 32.8818 108.797 32.8833 108.242L33.0361 54.5394C33.0387 53.6499 34.1142 53.2061 34.7432 53.8351L88.2934 107.385C88.9223 108.014 88.4786 109.09 87.5891 109.092L33.8862 109.245Z",
+            fill: "#0B650D"
+          }
+        )
+      ]
+    }
+  )
+};
+const MacOS = ({
+  disabled = [],
+  className,
+  focused = true,
+  onMinimize,
+  onMaximize,
+  onFullscreen,
+  onClose,
+  ...props
+}) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+  Space,
+  {
+    size: 1.5,
+    direction: "x",
+    className: CSS(
+      CSS.B("macos-controls"),
+      !focused && CSS.BM("macos-controls", "blurred"),
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        TrafficLight,
+        {
+          onClick: onClose,
+          className: CSS.BM("macos-control", "close"),
+          disabled: disabled.includes("close"),
+          children: Icon.Close
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        TrafficLight,
+        {
+          onClick: onMinimize,
+          className: CSS.BM("macos-control", "minimize"),
+          disabled: disabled.includes("minimize"),
+          children: Icon.Minimize
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        TrafficLight,
+        {
+          onClick: onFullscreen,
+          className: CSS.BM("macos-control", "maximize"),
+          disabled: disabled.includes("maximize"),
+          children: Icon.Maximize
+        }
+      )
+    ]
+  }
+);
+const TrafficLight = ({ className, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  "button",
+  {
+    className: CSS(CSS.B("macos-control"), className),
+    tabIndex: -1,
+    size: "",
+    ...props
+  }
+);
+const Windows = ({
+  disabled = [],
+  onMinimize,
+  onMaximize,
+  onClose,
+  // no-op on windows
+  onFullscreen: _,
+  ...props
+}) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Pack, { ...props, children: [
+  /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Button,
+    {
+      className: CSS.BM("windows-control", "minimize"),
+      onClick: onMinimize,
+      disabled: disabled.includes("minimize"),
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon$1.Subtract, {})
+    }
+  ),
+  /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Button,
+    {
+      className: CSS.BM("windows-control", "maximize"),
+      onClick: onMaximize,
+      disabled: disabled.includes("maximize"),
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon$1.Box, {})
+    }
+  ),
+  /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Button,
+    {
+      onClick: onClose,
+      className: CSS.BM("windows-control", "close"),
+      disabled: disabled.includes("close"),
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon$1.Close, {})
+    }
+  )
+] });
+const Button = ({
+  disabled = false,
+  className,
+  ...props
+}) => !disabled ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+  Icon$2,
+  {
+    className: CSS(CSS.B("windows-control"), className),
+    tabIndex: -1,
+    ...props
+  }
+) : null;
+const use$1 = (props) => external$1$1.getOS(props);
+const Variants = {
+  MacOS,
+  Windows,
+  Linux: Windows,
+  Docker: Windows
+};
+const DEFAULT_OS = "Windows";
+const Controls = ({
+  forceOS,
+  visibleIfOS,
+  ...props
+}) => {
+  const os = use$1({ force: forceOS, default: DEFAULT_OS });
+  const C = Variants[os];
+  if (visibleIfOS != null && visibleIfOS !== os)
+    return null;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(C, { ...props });
+};
+const external$6 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  Controls,
+  use: use$1
+}, Symbol.toStringTag, { value: "Module" }));
+const alignNodes = (layouts, dir = "x") => {
+  if (layouts.length === 0)
+    return [];
+  const loc = location.construct(dir);
+  const oppositeLoc = location.swap(loc);
+  layouts.sort((a, b) => box$1.loc(a.box, loc) - box$1.loc(b.box, loc));
+  layouts.forEach((layout, i) => {
+    if (i === 0)
+      return;
+    const prev = layouts[i - 1];
+    const prevRightHandle = prev.handles.find((h2) => h2.orientation === oppositeLoc);
+    const leftHandle = layout.handles.find((h2) => h2.orientation === loc);
+    if (prevRightHandle == null || leftHandle == null)
+      return;
+    const prevHandleAbsPos = prevRightHandle.absolutePosition;
+    const leftHandleAbsPos = leftHandle.absolutePosition;
+    const dist = xy.set(xy.translation(leftHandleAbsPos, prevHandleAbsPos), dir, 0);
+    const newPos = xy.translate(box$1.topLeft(layout.box), dist);
+    layout.box = box$1.construct(newPos, box$1.dims(layout.box));
+  });
+  return layouts;
+};
+const external$5 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  Background,
+  Controls: Controls$1,
+  Diagram,
+  FitViewControl,
+  HandleLayout,
+  NodeLayout,
+  NodeRenderer,
+  ToggleEditControl,
+  alignNodes,
+  selectNode,
+  selectNodeBox,
+  selectNodeLayout,
+  use: use$4,
+  useContext: useContext$3
+}, Symbol.toStringTag, { value: "Module" }));
+const use = ({
+  aetherKey,
+  ...props
+}) => use$5({
+  aetherKey,
+  type: Table.TYPE,
+  schema: tableStateZ,
+  initialState: props
+});
+const external$4 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  StringTD,
+  TR,
+  Table: Table$1,
+  use
+}, Symbol.toStringTag, { value: "Module" }));
+const external$3 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  LabelSpec,
+  REGISTRY,
+  initialProps
+}, Symbol.toStringTag, { value: "Module" }));
+const external$2 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  corePropsZ,
+  use: use$6
+}, Symbol.toStringTag, { value: "Module" }));
+const external$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  Chip,
+  Controller,
+  Indicator,
+  Legend: Legend$1,
+  StateProvider,
+  useContext: useContext$4
+}, Symbol.toStringTag, { value: "Module" }));
+const DefaultWorkerURL = "data:video/mp2t;base64,Ly8gQ29weXJpZ2h0IDIwMjMgU3lubmF4IExhYnMsIEluYy4KLy8KLy8gVXNlIG9mIHRoaXMgc29mdHdhcmUgaXMgZ292ZXJuZWQgYnkgdGhlIEJ1c2luZXNzIFNvdXJjZSBMaWNlbnNlIGluY2x1ZGVkIGluIHRoZSBmaWxlCi8vIGxpY2Vuc2VzL0JTTC50eHQuCi8vCi8vIEFzIG9mIHRoZSBDaGFuZ2UgRGF0ZSBzcGVjaWZpZWQgaW4gdGhhdCBmaWxlLCBpbiBhY2NvcmRhbmNlIHdpdGggdGhlIEJ1c2luZXNzIFNvdXJjZQovLyBMaWNlbnNlLCB1c2Ugb2YgdGhpcyBzb2Z0d2FyZSB3aWxsIGJlIGdvdmVybmVkIGJ5IHRoZSBBcGFjaGUgTGljZW5zZSwgVmVyc2lvbiAyLjAsCi8vIGluY2x1ZGVkIGluIHRoZSBmaWxlIGxpY2Vuc2VzL0FQTC50eHQuCgppbXBvcnQgeyBwbHV0byB9IGZyb20gIkAvcGx1dG8vYWV0aGVyIjsKCnBsdXRvLnJlbmRlcigpOwo=";
+const Provider = ({
+  children,
+  connParams,
+  workerEnabled = true,
+  workerURL,
+  theme,
+  toggleTheme,
+  setTheme,
+  tooltip,
+  triggers,
+  alamos,
+  haul,
+  channelAlias
+}) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Provider$1, { ...triggers, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Config, { ...tooltip, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Provider$2, { ...haul, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Provider$3, { url: workerURL ?? DefaultWorkerURL, enabled: workerEnabled, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Provider$4, { workerKey: "vis", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Provider$5, { ...alamos, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Aggregator, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Provider$6, { connParams, children: /* @__PURE__ */ jsxRuntimeExports.jsx(AliasProvider, { ...channelAlias, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Provider$7, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Provider$8,
+    {
+      theme,
+      toggleTheme,
+      setTheme,
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx(StateProvider, { children })
+    }
+  ) }) }) }) }) }) }) }) }) }) });
+};
+const Pluto = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  Provider
+}, Symbol.toStringTag, { value: "Module" }));
+const TimeRangeChip = ({ timeRange }) => {
+  const startTS = new TimeStamp(timeRange.start);
+  const startFormat = startTS.isToday ? "time" : "dateTime";
+  const endTS = new TimeStamp(timeRange.end);
+  const isOpen = endTS.equals(TimeStamp.MAX);
+  const endFormat = endTS.span(startTS) < TimeSpan.DAY ? "time" : "dateTime";
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    Space,
+    {
+      direction: "x",
+      size: "small",
+      className: CSS(CSS.B("time-range-chip")),
+      align: "center",
+      children: [
+        startTS.isToday && /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { level: "small", children: "Today" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(DateTime, { level: "small", displayTZ: "local", format: startFormat, children: startTS }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Icon$1.Arrow.Right, { color: "var(--pluto-text-color)" }),
+        isOpen ? /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { level: "small", children: "Now" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(DateTime, { level: "small", displayTZ: "local", format: endFormat, children: endTS })
+      ]
+    }
+  );
+};
+const labelColumns = [
+  {
+    key: "color",
+    name: "Color",
+    width: 50,
+    render: (v) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Icon$1.Circle,
+      {
+        style: { fontSize: 10, marginLeft: 10, marginRight: 30 },
+        color: v.entry.color
+      }
+    )
+  },
+  {
+    key: "name",
+    name: "Name"
+  }
+];
+const SelectLabels = (props) => {
+  const client = use$7();
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Multiple$1,
+    {
+      ...props,
+      searcher: client == null ? void 0 : client.labels,
+      columns: labelColumns,
+      renderTag: (v) => /* @__PURE__ */ jsxRuntimeExports.jsx(Tag, { color: v.entry.color, children: v.entry.name })
+    }
+  );
+};
+const external = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  SelectLabels,
+  TimeRangeChip
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  Accordion$1 as Accordion,
+  an as Aether,
+  e2 as Align,
+  e3 as Button,
+  CSS,
+  aC2 as Canvas,
+  external$9 as Channel,
+  external$f as Color,
+  external$1 as Control,
+  external$5 as Diagram,
+  ao as Divider,
+  D as Dropdown,
+  aI as Eraser,
+  G as Generic,
+  ap as Haul,
+  e as Header,
+  e4 as Input,
+  aD2 as Line,
+  external$a as LinePlot,
+  e5 as List,
+  aE2 as Measure,
+  e6 as Menu,
+  external$8 as Mosaic,
+  external$7 as Nav,
+  external$6 as OS,
+  aG as PID,
+  Pluto,
+  external as Ranger,
+  external$d as Resize,
+  aF as Rule,
+  external$c as Select,
+  external$g as Status,
+  aA2 as Synnax,
+  external$4 as Table,
+  external$3 as TableCell,
+  e7 as Tabs,
+  aB2 as Tag,
+  aH as Telem,
+  e8 as Text,
+  e9 as Theming,
+  external$e as Tooltip,
+  T as Tree,
+  e10 as Triggers,
+  external$2 as Value,
+  V as Video,
+  external$b as Viewport,
+  aq as Worker,
+  au as compareArrayDeps,
+  aD as componentRenderProp,
+  aK as createFilterTransform,
+  as as createHexOpacityVariants,
+  aJ as fuseFilter,
+  aE as isRenderProp,
+  n as newBEM,
+  h as state,
+  e11 as telem,
+  ar as unitProperty,
+  aw as useAsyncEffect,
+  a2 as useClickOutside,
+  aB as useCombinedRefs,
+  aC as useCombinedStateAndRef,
+  aM as useDebouncedCallback,
+  ax as useEffectCompare,
+  at as useMemoCompare,
+  av as useMemoDeepEqualProps,
+  ay as useResize,
+  az as useStateRef,
+  aA as useSyncedRef,
+  aL as useTransforms
+};
+//# sourceMappingURL=index.js.map