@dxos/react-ui-attention 0.8.2-main.fbd8ed0 → 0.8.2-staging.42af850

package/dist/lib/node/{chunk-KMRU4W67.cjs → chunk-EGMHOB43.cjs}

@@ -26,8 +26,8 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var chunk_KMRU4W67_exports = {};
-__export(chunk_KMRU4W67_exports, {
+var chunk_EGMHOB43_exports = {};
+__export(chunk_EGMHOB43_exports, {
   ATTENABLE_ATTRIBUTE: () => ATTENABLE_ATTRIBUTE,
   ATTENDABLE_PATH_SEPARATOR: () => ATTENDABLE_PATH_SEPARATOR,
   ATTENTION_NAME: () => ATTENTION_NAME,
@@ -41,23 +41,26 @@ __export(chunk_KMRU4W67_exports, {
   SelectionManager: () => SelectionManager,
   SelectionProvider: () => SelectionProvider,
   Syncing: () => Syncing,
+  defaultSelection: () => defaultSelection,
   getAttendables: () => getAttendables,
   useAttendableAttributes: () => useAttendableAttributes,
   useAttended: () => useAttended,
   useAttention: () => useAttention,
   useAttentionContext: () => useAttentionContext,
   useAttentionPath: () => useAttentionPath,
-  useSelectedItems: () => useSelectedItems,
+  useSelected: () => useSelected,
   useSelectionActions: () => useSelectionActions
 });
-module.exports = __toCommonJS(chunk_KMRU4W67_exports);
+module.exports = __toCommonJS(chunk_EGMHOB43_exports);
 var import_signals_core = require("@preact/signals-core");
 var import_effect = require("effect");
 var import_live_object = require("@dxos/live-object");
 var import_util = require("@dxos/util");
+var import_tracking = require("@preact-signals/safe-react/tracking");
 var import_react = __toESM(require("react"));
 var import_react_ui = require("@dxos/react-ui");
 var import_react_ui_theme = require("@dxos/react-ui-theme");
+var import_tracking2 = require("@preact-signals/safe-react/tracking");
 var import_react_context = require("@radix-ui/react-context");
 var import_react_primitive = require("@radix-ui/react-primitive");
 var import_react_slot = require("@radix-ui/react-slot");
@@ -65,8 +68,12 @@ var import_react2 = __toESM(require("react"));
 var import_react_ui2 = require("@dxos/react-ui");
 var import_react_ui_theme2 = require("@dxos/react-ui-theme");
 var import_signals_core2 = require("@preact/signals-core");
+var import_effect2 = require("effect");
+var import_invariant = require("@dxos/invariant");
 var import_live_object2 = require("@dxos/live-object");
+var import_tracking3 = require("@preact-signals/safe-react/tracking");
 var import_react_context2 = require("@radix-ui/react-context");
+var import_effect3 = require("effect");
 var import_react3 = __toESM(require("react"));
 var import_react_ui3 = require("@dxos/react-ui");
 var ATTENDABLE_PATH_SEPARATOR = "~";
@@ -177,66 +184,86 @@ var getAttendables = (selector, cursor, acc = []) => {
 var attentionGlyphStyles = "inline-block rounded-sm is-3 bs-3 bg-transparent text-accentText transition-colors [[data-contains-attended=true]_&]:bg-attentionRelated [[data-attention=true]_&]:bg-accentSurface [[data-attention=true]_&]:text-accentSurfaceText [[aria-current][data-attention=true]_&]:bg-accentSurface [[aria-current][data-attention=true]_&]:text-accentSurfaceText";
 var presenceIconStyles = "is-3 bs-3 group-[[aria-current]_&:hover]/attentionGlyphButton:hidden group-[[aria-current]_&:focus]/attentionGlyphButton:hidden group-[[data-attention=true]_&:hover]/attentionGlyphButton:hidden group-[[data-attention=true]_&:focus]/attentionGlyphButton:hidden group-[[aria-current][data-attention=true]_&:hover]/attentionGlyphButton:hidden group-[[aria-current][data-attention=true]_&:focus]/attentionGlyphButton:hidden";
 var PresenceOne = () => {
-  return /* @__PURE__ */ import_react.default.createElement("svg", {
-    width: "12",
-    height: "12",
-    viewBox: "0 0 12 12",
-    className: presenceIconStyles,
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /* @__PURE__ */ import_react.default.createElement("circle", {
-    cx: "6",
-    cy: "6",
-    r: "2.5",
-    fill: "currentColor"
-  }));
+  var _effect = (0, import_tracking.useSignals)();
+  try {
+    return /* @__PURE__ */ import_react.default.createElement("svg", {
+      width: "12",
+      height: "12",
+      viewBox: "0 0 12 12",
+      className: presenceIconStyles,
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, /* @__PURE__ */ import_react.default.createElement("circle", {
+      cx: "6",
+      cy: "6",
+      r: "2.5",
+      fill: "currentColor"
+    }));
+  } finally {
+    _effect.f();
+  }
 };
 var PresenceMany = () => {
-  return /* @__PURE__ */ import_react.default.createElement("svg", {
-    width: "12",
-    height: "12",
-    viewBox: "0 0 12 12",
-    className: presenceIconStyles,
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /* @__PURE__ */ import_react.default.createElement("path", {
-    d: "M6.75 8.27311C7.38815 7.72296 7.79212 6.90866 7.79212 6C7.79212 5.09134 7.38815 4.27704 6.75 3.72689C7.06722 3.58122 7.42019 3.5 7.79212 3.5C9.17283 3.5 10.2921 4.61929 10.2921 6C10.2921 7.38071 9.17283 8.5 7.79212 8.5C7.42019 8.5 7.06723 8.41878 6.75 8.27311Z",
-    fill: "currentColor"
-  }), /* @__PURE__ */ import_react.default.createElement("circle", {
-    cx: "4.25",
-    cy: "6",
-    r: "2.5",
-    fill: "currentColor"
-  }));
+  var _effect = (0, import_tracking.useSignals)();
+  try {
+    return /* @__PURE__ */ import_react.default.createElement("svg", {
+      width: "12",
+      height: "12",
+      viewBox: "0 0 12 12",
+      className: presenceIconStyles,
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, /* @__PURE__ */ import_react.default.createElement("path", {
+      d: "M6.75 8.27311C7.38815 7.72296 7.79212 6.90866 7.79212 6C7.79212 5.09134 7.38815 4.27704 6.75 3.72689C7.06722 3.58122 7.42019 3.5 7.79212 3.5C9.17283 3.5 10.2921 4.61929 10.2921 6C10.2921 7.38071 9.17283 8.5 7.79212 8.5C7.42019 8.5 7.06723 8.41878 6.75 8.27311Z",
+      fill: "currentColor"
+    }), /* @__PURE__ */ import_react.default.createElement("circle", {
+      cx: "4.25",
+      cy: "6",
+      r: "2.5",
+      fill: "currentColor"
+    }));
+  } finally {
+    _effect.f();
+  }
 };
 var Syncing = () => {
-  const animationProps = (0, import_react.useMemo)(() => ({
-    // Synchronize animations.
-    animationDelay: `-${Date.now() % 2e3}ms`
-  }), []);
-  return /* @__PURE__ */ import_react.default.createElement("div", {
-    role: "status",
-    className: "flex items-center"
-  }, /* @__PURE__ */ import_react.default.createElement(import_react_ui.Icon, {
-    icon: "ph--circle-notch--bold",
-    size: 3,
-    style: animationProps,
-    classNames: "text-subdued animate-[spin_2s_linear_infinite]"
-  }));
+  var _effect = (0, import_tracking.useSignals)();
+  try {
+    const animationProps = (0, import_react.useMemo)(() => ({
+      // Synchronize animations.
+      animationDelay: `-${Date.now() % 2e3}ms`
+    }), []);
+    return /* @__PURE__ */ import_react.default.createElement("div", {
+      role: "status",
+      className: "flex items-center"
+    }, /* @__PURE__ */ import_react.default.createElement(import_react_ui.Icon, {
+      icon: "ph--circle-notch--bold",
+      size: 3,
+      style: animationProps,
+      classNames: "text-subdued animate-[spin_2s_linear_infinite]"
+    }));
+  } finally {
+    _effect.f();
+  }
 };
 var AttentionGlyph = /* @__PURE__ */ (0, import_react.forwardRef)(({ presence, attended, syncing, containsAttended, classNames, ...props }, forwardedRef) => {
-  const icon = syncing ? /* @__PURE__ */ import_react.default.createElement(Syncing, null) : presence === "many" ? /* @__PURE__ */ import_react.default.createElement(PresenceMany, null) : presence === "one" ? /* @__PURE__ */ import_react.default.createElement(PresenceOne, null) : null;
-  return /* @__PURE__ */ import_react.default.createElement("div", {
-    role: "none",
-    className: "flex",
-    "data-attention": attended,
-    "data-contains-attended": containsAttended
-  }, /* @__PURE__ */ import_react.default.createElement("span", {
-    role: "none",
-    ...props,
-    className: (0, import_react_ui_theme.mx)(attentionGlyphStyles, classNames),
-    ref: forwardedRef
-  }, icon));
+  var _effect = (0, import_tracking.useSignals)();
+  try {
+    const icon = syncing ? /* @__PURE__ */ import_react.default.createElement(Syncing, null) : presence === "many" ? /* @__PURE__ */ import_react.default.createElement(PresenceMany, null) : presence === "one" ? /* @__PURE__ */ import_react.default.createElement(PresenceOne, null) : null;
+    return /* @__PURE__ */ import_react.default.createElement("div", {
+      role: "none",
+      className: "flex",
+      "data-attention": attended,
+      "data-contains-attended": containsAttended
+    }, /* @__PURE__ */ import_react.default.createElement("span", {
+      role: "none",
+      ...props,
+      className: (0, import_react_ui_theme.mx)(attentionGlyphStyles, classNames),
+      ref: forwardedRef
+    }, icon));
+  } finally {
+    _effect.f();
+  }
 });
 var ATTENTION_NAME = "Attention";
 var ATTENABLE_ATTRIBUTE = "data-attendable-id";
@@ -285,53 +312,80 @@ var useAttentionPath = () => {
   return path;
 };
 var RootAttentionProvider = ({ children, attention: propsAttention, onChange }) => {
-  const attention = (0, import_react_ui2.useDefaultValue)(propsAttention, () => new AttentionManager());
-  const handleFocus = (event) => {
-    const selector = [
-      "[data-attendable-id]",
-      ...Array.from(document.querySelectorAll("[aria-controls]")).map((el) => `[id="${el.getAttribute("aria-controls")}"]`)
-    ].join(",");
-    const prev = attention.current;
-    const next = getAttendables(selector, event.target);
-    if (next.length > 0 && (prev.length !== next.length || !!prev.find((id, index) => next[index] !== id))) {
-      attention.update(next);
-      onChange?.(next);
-    }
-  };
-  return /* @__PURE__ */ import_react2.default.createElement(AttentionContextProvider, {
-    attention,
-    path: []
-  }, /* @__PURE__ */ import_react2.default.createElement("div", {
-    role: "none",
-    className: "contents",
-    onFocusCapture: handleFocus
-  }, children));
+  var _effect = (0, import_tracking2.useSignals)();
+  try {
+    const attention = (0, import_react_ui2.useDefaultValue)(propsAttention, () => new AttentionManager());
+    const handleFocus = (event) => {
+      const selector = [
+        "[data-attendable-id]",
+        ...Array.from(document.querySelectorAll("[aria-controls]")).map((el) => `[id="${el.getAttribute("aria-controls")}"]`)
+      ].join(",");
+      const prev = attention.current;
+      const next = getAttendables(selector, event.target);
+      if (next.length > 0 && (prev.length !== next.length || !!prev.find((id, index) => next[index] !== id))) {
+        attention.update(next);
+        onChange?.(next);
+      }
+    };
+    return /* @__PURE__ */ import_react2.default.createElement(AttentionContextProvider, {
+      attention,
+      path: []
+    }, /* @__PURE__ */ import_react2.default.createElement("div", {
+      role: "none",
+      className: "contents",
+      onFocusCapture: handleFocus
+    }, children));
+  } finally {
+    _effect.f();
+  }
 };
 var AttentionProvider = ({ id, children }) => {
-  const { attention, path } = useAttentionContext(ATTENTION_NAME);
-  const nextPath = (0, import_react2.useMemo)(() => [
-    id,
-    ...path
-  ], [
-    id,
-    path
-  ]);
-  return /* @__PURE__ */ import_react2.default.createElement(AttentionContextProvider, {
-    attention,
-    path: nextPath
-  }, children);
+  var _effect = (0, import_tracking2.useSignals)();
+  try {
+    const { attention, path } = useAttentionContext(ATTENTION_NAME);
+    const nextPath = (0, import_react2.useMemo)(() => [
+      id,
+      ...path
+    ], [
+      id,
+      path
+    ]);
+    return /* @__PURE__ */ import_react2.default.createElement(AttentionContextProvider, {
+      attention,
+      path: nextPath
+    }, children);
+  } finally {
+    _effect.f();
+  }
 };
 var AttendableContainer = /* @__PURE__ */ (0, import_react2.forwardRef)(({ id, classNames, children, asChild, ...props }, forwardedRef) => {
-  const attendableAttrs = useAttendableAttributes(id);
-  const Root = asChild ? import_react_slot.Slot : import_react_primitive.Primitive.div;
-  return /* @__PURE__ */ import_react2.default.createElement(Root, {
-    role: "none",
-    ...attendableAttrs,
-    ...props,
-    className: (0, import_react_ui_theme2.mx)("attention-surface", props.tabIndex === 0 && "dx-focus-ring-inset-over-all", classNames),
-    ref: forwardedRef
-  }, children);
+  var _effect = (0, import_tracking2.useSignals)();
+  try {
+    const attendableAttrs = useAttendableAttributes(id);
+    const Root = asChild ? import_react_slot.Slot : import_react_primitive.Primitive.div;
+    return /* @__PURE__ */ import_react2.default.createElement(Root, {
+      role: "none",
+      ...attendableAttrs,
+      ...props,
+      className: (0, import_react_ui_theme2.mx)("attention-surface", props.tabIndex === 0 && "dx-focus-ring-inset-over-all", classNames),
+      ref: forwardedRef
+    }, children);
+  } finally {
+    _effect.f();
+  }
 });
+var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-attention/src/selection.ts";
+var defaultSelection = import_effect2.Match.type().pipe(import_effect2.Match.when("single", () => ({
+  mode: "single"
+})), import_effect2.Match.when("multi", () => ({
+  mode: "multi",
+  ids: []
+})), import_effect2.Match.when("range", () => ({
+  mode: "range"
+})), import_effect2.Match.when("multi-range", () => ({
+  mode: "multi-range",
+  ranges: []
+})), import_effect2.Match.exhaustive);
 var SelectionManager = class {
   constructor(initial = {}) {
     this._state = (0, import_live_object2.live)({
@@ -343,34 +397,126 @@ var SelectionManager = class {
       });
     }
   }
-  get selections() {
-    return this._state.selections;
+  getSelection(contextId, mode = void 0) {
+    const selection = (0, import_signals_core2.untracked)(() => this._state.selections[contextId]);
+    if (!mode || selection) {
+      return selection;
+    }
+    return (0, import_signals_core2.untracked)(() => {
+      this._state.selections[contextId] = defaultSelection(mode);
+      return this._state.selections[contextId];
+    });
   }
-  getSelection(contextId) {
-    if (!this.selections[contextId]) {
-      (0, import_signals_core2.untracked)(() => {
-        this._state.selections[contextId] = /* @__PURE__ */ new Set();
+  getSelected(contextId, mode = "multi") {
+    const selection = this.getSelection(contextId, mode);
+    (0, import_invariant.invariant)(selection?.mode === mode, "Selection mode mismatch", {
+      F: __dxlog_file,
+      L: 70,
+      S: this,
+      A: [
+        "selection?.mode === mode",
+        "'Selection mode mismatch'"
+      ]
+    });
+    return import_effect2.Match.type().pipe(import_effect2.Match.when({
+      mode: "single"
+    }, (s) => s.id), import_effect2.Match.when({
+      mode: "multi"
+    }, (s) => s.ids), import_effect2.Match.when({
+      mode: "range"
+    }, (s) => s.from && s.to ? {
+      from: s.from,
+      to: s.to
+    } : void 0), import_effect2.Match.when({
+      mode: "multi-range"
+    }, (s) => s.ranges), import_effect2.Match.exhaustive)(selection);
+  }
+  updateSingle(contextId, id) {
+    (0, import_signals_core2.untracked)(() => {
+      const selection = this.getSelection(contextId, "single");
+      (0, import_invariant.invariant)(selection?.mode === "single", "Selection mode is not single", {
+        F: __dxlog_file,
+        L: 83,
+        S: this,
+        A: [
+          "selection?.mode === 'single'",
+          "'Selection mode is not single'"
+        ]
       });
-    }
-    return this.selections[contextId];
+      selection.id = id;
+    });
   }
-  updateSelection(contextId, selectedIds) {
+  updateMulti(contextId, ids) {
     (0, import_signals_core2.untracked)(() => {
-      this._state.selections[contextId] = selectedIds instanceof Set ? selectedIds : new Set(selectedIds);
+      const selection = this.getSelection(contextId, "multi");
+      (0, import_invariant.invariant)(selection?.mode === "multi", "Selection mode is not multi", {
+        F: __dxlog_file,
+        L: 91,
+        S: this,
+        A: [
+          "selection?.mode === 'multi'",
+          "'Selection mode is not multi'"
+        ]
+      });
+      selection.ids = ids;
+    });
+  }
+  updateRange(contextId, from, to) {
+    (0, import_signals_core2.untracked)(() => {
+      const selection = this.getSelection(contextId, "range");
+      (0, import_invariant.invariant)(selection?.mode === "range", "Selection mode is not range", {
+        F: __dxlog_file,
+        L: 99,
+        S: this,
+        A: [
+          "selection?.mode === 'range'",
+          "'Selection mode is not range'"
+        ]
+      });
+      selection.from = from;
+      selection.to = to;
+    });
+  }
+  updateMultiRange(contextId, ranges) {
+    (0, import_signals_core2.untracked)(() => {
+      const selection = this.getSelection(contextId, "multi-range");
+      (0, import_invariant.invariant)(selection?.mode === "multi-range", "Selection mode is not multi-range", {
+        F: __dxlog_file,
+        L: 108,
+        S: this,
+        A: [
+          "selection?.mode === 'multi-range'",
+          "'Selection mode is not multi-range'"
+        ]
+      });
+      selection.ranges = ranges;
     });
   }
   clearSelection(contextId) {
     (0, import_signals_core2.untracked)(() => {
-      this._state.selections[contextId] = /* @__PURE__ */ new Set();
+      const selection = this.getSelection(contextId);
+      if (selection) {
+        this._state.selections[contextId] = defaultSelection(selection.mode);
+      }
     });
   }
   toggleSelection(contextId, id) {
     (0, import_signals_core2.untracked)(() => {
-      const current = this.getSelection(contextId);
-      if (current.has(id)) {
-        current.delete(id);
+      const selection = this.getSelection(contextId, "multi");
+      (0, import_invariant.invariant)(selection?.mode === "multi", "Selection mode is not multi", {
+        F: __dxlog_file,
+        L: 125,
+        S: this,
+        A: [
+          "selection?.mode === 'multi'",
+          "'Selection mode is not multi'"
+        ]
+      });
+      if (selection.ids.includes(id)) {
+        const index = selection.ids.indexOf(id);
+        selection.ids.splice(index, 1);
       } else {
-        current.add(id);
+        selection.ids.push(id);
       }
     });
   }
@@ -380,24 +526,58 @@ var [SelectionContextProvider, useSelectionContext] = (0, import_react_context2.
   selection: new SelectionManager()
 });
 var SelectionProvider = ({ children, selection: propsSelection }) => {
-  const selection = (0, import_react_ui3.useDefaultValue)(propsSelection, () => new SelectionManager());
-  return /* @__PURE__ */ import_react3.default.createElement(SelectionContextProvider, {
-    selection
-  }, children);
+  var _effect = (0, import_tracking3.useSignals)();
+  try {
+    const selection = (0, import_react_ui3.useDefaultValue)(propsSelection, () => new SelectionManager());
+    return /* @__PURE__ */ import_react3.default.createElement(SelectionContextProvider, {
+      selection
+    }, children);
+  } finally {
+    _effect.f();
+  }
 };
-var emptySet = /* @__PURE__ */ new Set();
-var useSelectedItems = (contextId) => {
+var useSelected = (contextId, mode = "multi") => {
   const { selection } = useSelectionContext(SELECTION_NAME);
-  return contextId ? selection.getSelection(contextId) : emptySet;
+  if (contextId) {
+    return selection.getSelected(contextId, mode);
+  }
+  return import_effect3.Match.type().pipe(import_effect3.Match.when({
+    mode: "single"
+  }, (s) => s.id), import_effect3.Match.when({
+    mode: "multi"
+  }, (s) => s.ids), import_effect3.Match.when({
+    mode: "range"
+  }, (s) => s.from && s.to ? {
+    from: s.from,
+    to: s.to
+  } : void 0), import_effect3.Match.when({
+    mode: "multi-range"
+  }, (s) => s.ranges), import_effect3.Match.exhaustive)(defaultSelection(mode));
 };
-var useSelectionActions = (contextIds) => {
+var useSelectionActions = (contextIds, mode = "multi") => {
   const stableContextIds = (0, import_react3.useMemo)(() => contextIds, [
     JSON.stringify(contextIds)
   ]);
   const { selection } = useSelectionContext(SELECTION_NAME);
-  const select = (0, import_react3.useCallback)((ids) => {
+  const singleSelect = (0, import_react3.useCallback)((id) => {
+    for (const contextId of stableContextIds) {
+      selection.updateSingle(contextId, id);
+    }
+  }, [
+    selection,
+    stableContextIds
+  ]);
+  const multiSelect = (0, import_react3.useCallback)((ids) => {
+    for (const contextId of stableContextIds) {
+      selection.updateMulti(contextId, ids);
+    }
+  }, [
+    selection,
+    stableContextIds
+  ]);
+  const rangeSelect = (0, import_react3.useCallback)((from, to) => {
     for (const contextId of stableContextIds) {
-      selection.updateSelection(contextId, ids);
+      selection.updateRange(contextId, from, to);
     }
   }, [
     selection,
@@ -420,7 +600,9 @@ var useSelectionActions = (contextIds) => {
     stableContextIds
   ]);
   return {
-    select,
+    singleSelect,
+    multiSelect,
+    rangeSelect,
     toggle,
     clear
   };
@@ -440,13 +622,14 @@ var useSelectionActions = (contextIds) => {
   SelectionManager,
   SelectionProvider,
   Syncing,
+  defaultSelection,
   getAttendables,
   useAttendableAttributes,
   useAttended,
   useAttention,
   useAttentionContext,
   useAttentionPath,
-  useSelectedItems,
+  useSelected,
   useSelectionActions
 });
-//# sourceMappingURL=chunk-KMRU4W67.cjs.map
+//# sourceMappingURL=chunk-EGMHOB43.cjs.map