@dxos/react-ui-attention 0.8.4-main.c85a9c8dae → 0.8.4-main.cb12b3f963

package/dist/lib/browser/{chunk-TAZUDNJI.mjs → chunk-XVH365AW.mjs}

@@ -1,38 +1,30 @@
-import {
-  ATTENDABLE_PATH_SEPARATOR
-} from "./chunk-PAZBZOO2.mjs";
-
 // src/attention.ts
 import { Atom } from "@effect-atom/atom-react";
-import { ComplexMap } from "@dxos/util";
-var stringKey = (key) => key.join(",");
 var AttentionManager = class {
   _registry;
-  // Each attention path is associated with an attention atom.
-  // The lookup is not a reactive object to ensure that attention for each path is subscribable independently.
-  _map = new ComplexMap(stringKey);
+  _map = /* @__PURE__ */ new Map();
   _currentAtom;
   constructor(_registry, initial = []) {
     this._registry = _registry;
-    this._currentAtom = Atom.make([]);
+    this._currentAtom = Atom.make([]).pipe(Atom.keepAlive);
     if (initial.length > 0) {
       this.update(initial);
     }
   }
   /**
-  * Atom for the currently attended element path.
+  * Atom for the currently attended element IDs.
   */
   get current() {
     return this._currentAtom;
   }
   /**
-  * Gets the currently attended element path.
+  * Gets the currently attended element IDs.
   */
   getCurrent() {
     return this._registry.get(this._currentAtom);
   }
   /**
-  * Subscribe to changes in the current attention path.
+  * Subscribe to changes in the current attention IDs.
   */
   subscribeCurrent(cb) {
     this._registry.get(this._currentAtom);
@@ -41,30 +33,30 @@ var AttentionManager = class {
     });
   }
   /**
-  * All attention paths.
+  * All tracked qualified IDs.
   */
   keys() {
     return Array.from(this._map.keys());
   }
   /**
-  * Get the attention state for a given path.
+  * Get the attention state for a given qualified ID.
   */
-  get(key) {
-    const atom = this._getAtom(key);
+  get(id) {
+    const atom = this._getAtom(id);
     return this._registry.get(atom);
   }
   /**
-  * Subscribe to changes in the attention state for a given path.
+  * Subscribe to changes in the attention state for a given qualified ID.
   */
-  subscribe(key, cb) {
-    const atom = this._getAtom(key);
+  subscribe(id, cb) {
+    const atom = this._getAtom(id);
     this._registry.get(atom);
     return this._registry.subscribe(atom, () => {
       cb(this._registry.get(atom));
     });
   }
-  _getAtom(key) {
-    const existing = this._map.get(key);
+  _getAtom(id) {
+    const existing = this._map.get(id);
     if (existing) {
       return existing;
     }
@@ -72,43 +64,70 @@ var AttentionManager = class {
       hasAttention: false,
       isAncestor: false,
       isRelated: false
-    });
-    this._map.set(key, newAtom);
+    }).pipe(Atom.keepAlive);
+    this._map.set(id, newAtom);
     return newAtom;
   }
   /**
   * Update the currently attended element.
+  * Takes the array of qualified IDs collected from the DOM; the first element is the primary attended item.
+  * Ancestry is derived from the progressive prefixes of the primary ID.
+  * Relatedness is derived from the segment ID: any tracked key whose last `/` segment matches the
+  * attended ID's segment ID is marked `isRelated`. Additionally, if the primary ID is a linked segment
+  * (starts with `~`), its immediate parent gets `isRelated` alongside `isAncestor`.
   *
   * @internal
   */
-  update(nextKey) {
-    const currentKey = this.getCurrent();
-    const currentRelatedTo = currentKey[0];
-    const nextRelatedTo = nextKey[0];
-    this._getAtom([
-      nextRelatedTo
-    ]);
-    const currentRelatedKeys = this.keys().filter((key) => key[0] === currentRelatedTo);
-    const nextRelatedKeys = this.keys().filter((key) => key[0] === nextRelatedTo && stringKey(key) !== stringKey(nextKey));
-    const prevRelatedKeys = currentRelatedKeys.filter((curr) => !nextRelatedKeys.find((next) => stringKey(curr) === stringKey(next)));
-    const currentAncestorKeys = currentKey.slice(1).map((_, i) => currentKey.slice(i + 1, currentKey.length));
-    const nextAncestorKeys = nextKey.slice(1).map((_, i) => nextKey.slice(i + 1, nextKey.length));
-    const prevAncestorKeys = currentAncestorKeys.filter((curr) => !nextAncestorKeys.find((next) => stringKey(curr) === stringKey(next)));
-    this._registry.set(this._currentAtom, nextKey);
-    prevRelatedKeys.forEach((key) => this._set(key, {}));
-    prevAncestorKeys.forEach((key) => this._set(key, {}));
-    nextRelatedKeys.forEach((key) => this._set(key, {
-      isRelated: true
-    }));
-    nextAncestorKeys.forEach((key) => this._set(key, {
-      isAncestor: true
-    }));
-    this._set(nextKey, {
-      hasAttention: true
-    });
+  update(nextIds) {
+    const primaryId = nextIds[0];
+    if (!primaryId) {
+      return;
+    }
+    const currentIds = this.getCurrent();
+    const prevPrimaryId = currentIds[0];
+    if (prevPrimaryId) {
+      const prevPrefixes = expandAttendableId(prevPrimaryId);
+      for (const prefix of prevPrefixes) {
+        this._set(prefix, {});
+      }
+      const prevSegmentId = getSegmentId(prevPrimaryId);
+      for (const key of this.keys()) {
+        if (getSegmentId(key) === prevSegmentId) {
+          this._set(key, {});
+        }
+      }
+    }
+    this._registry.set(this._currentAtom, nextIds);
+    const prefixes = expandAttendableId(primaryId);
+    const prefixSet = new Set(prefixes);
+    const linkedParent = isLinkedSegment(primaryId) ? getParentId(primaryId) : void 0;
+    for (const prefix of prefixes) {
+      if (prefix === primaryId) {
+        this._set(prefix, {
+          hasAttention: true
+        });
+      } else if (prefix === linkedParent) {
+        this._set(prefix, {
+          isAncestor: true,
+          isRelated: true
+        });
+      } else {
+        this._set(prefix, {
+          isAncestor: true
+        });
+      }
+    }
+    const segmentId = getSegmentId(primaryId);
+    for (const key of this.keys()) {
+      if (!prefixSet.has(key) && getSegmentId(key) === segmentId) {
+        this._set(key, {
+          isRelated: true
+        });
+      }
+    }
   }
-  _set(key, attention) {
-    const atom = this._getAtom(key);
+  _set(id, attention) {
+    const atom = this._getAtom(id);
     this._registry.set(atom, {
       hasAttention: attention.hasAttention ?? false,
       isAncestor: attention.isAncestor ?? false,
@@ -128,7 +147,7 @@ var getAttendables = (selector, cursor, acc = []) => {
         return getAttendables(selector, trigger, acc);
       }
     } else {
-      acc.push(...attendableId.split(ATTENDABLE_PATH_SEPARATOR));
+      acc.push(attendableId);
       return !closestAttendable.parentElement ? acc : getAttendables(selector, closestAttendable.parentElement, acc);
     }
   }
@@ -136,23 +155,46 @@ var getAttendables = (selector, cursor, acc = []) => {
     ...new Set(acc)
   ];
 };
+var LINKED_PREFIX = "~";
+var expandAttendableId = (qualifiedId) => {
+  const segments = qualifiedId.split("/");
+  return segments.map((_, index) => segments.slice(0, index + 1).join("/"));
+};
+var isLinkedSegment = (qualifiedId) => {
+  const lastSegment = qualifiedId.split("/").pop() ?? "";
+  return lastSegment.startsWith(LINKED_PREFIX);
+};
+var linkedSegment = (variant) => `${LINKED_PREFIX}${variant}`;
+var getLinkedVariant = (qualifiedId) => {
+  const lastSegment = qualifiedId.split("/").pop() ?? "";
+  return lastSegment.startsWith(LINKED_PREFIX) ? lastSegment.slice(LINKED_PREFIX.length) : lastSegment;
+};
+var getParentId = (qualifiedId) => {
+  if (!qualifiedId) {
+    return void 0;
+  }
+  const lastSlash = qualifiedId.lastIndexOf("/");
+  return lastSlash > 0 ? qualifiedId.slice(0, lastSlash) : void 0;
+};
+var getSegmentId = (qualifiedId) => {
+  return qualifiedId.split("/").pop() ?? qualifiedId;
+};
 
-// src/components/AttentionProvider.tsx
+// src/components/AttentionProvider/AttentionProvider.tsx
 import { RegistryContext } from "@effect-atom/atom-react";
 import { createContext } from "@radix-ui/react-context";
 import { Primitive } from "@radix-ui/react-primitive";
 import { Slot } from "@radix-ui/react-slot";
-import React, { forwardRef, useContext, useEffect, useMemo, useState } from "react";
+import React, { forwardRef, useCallback, useContext, useEffect, useMemo, useState } from "react";
 import { log } from "@dxos/log";
 import { useDefaultValue } from "@dxos/react-hooks";
 import { mx } from "@dxos/ui-theme";
-var __dxlog_file = "/__w/dxos/dxos/packages/ui/react-ui-attention/src/components/AttentionProvider.tsx";
+var __dxlog_file = "/__w/dxos/dxos/packages/ui/react-ui-attention/src/components/AttentionProvider/AttentionProvider.tsx";
 var ATTENTION_NAME = "Attention";
 var ATTENDABLE_ATTRIBUTE = "data-attendable-id";
 var ATTENTION_SOURCE_ATTRIBUTE = "data-w-attention-source";
 var [AttentionContextProvider, useAttentionContext] = createContext(ATTENTION_NAME, {
-  attention: void 0,
-  path: []
+  attention: void 0
 });
 var UNKNOWN_ATTENDABLE = {
   hasAttention: false,
@@ -160,32 +202,21 @@ var UNKNOWN_ATTENDABLE = {
   isRelated: false
 };
 var useAttention = (attendableId) => {
-  const { attention, path } = useAttentionContext(ATTENTION_NAME);
+  const { attention } = useAttentionContext(ATTENTION_NAME);
   const [state, setState] = useState(UNKNOWN_ATTENDABLE);
-  const key = useMemo(() => {
-    if (!attendableId) {
-      return void 0;
-    }
-    return [
-      ...attendableId.split(ATTENDABLE_PATH_SEPARATOR),
-      ...path
-    ];
-  }, [
-    attendableId,
-    path
-  ]);
   useEffect(() => {
-    if (!key || !attention) {
+    if (!attendableId || !attention) {
       setState(UNKNOWN_ATTENDABLE);
       return;
     }
-    setState(attention.get(key));
-    return attention.subscribe(key, (newState) => {
+    const currentState = attention.get(attendableId);
+    setState(currentState);
+    return attention.subscribe(attendableId, (newState) => {
       setState(newState);
     });
   }, [
     attention,
-    key
+    attendableId
   ]);
   return state;
 };
@@ -220,23 +251,14 @@ var useAttentionAttributes = (attendableId) => {
     hasAttention
   ]);
 };
-var useAttentionPath = () => {
-  const { path } = useAttentionContext(ATTENTION_NAME);
-  return path;
-};
 var RootAttentionProvider = ({ children, attention: propsAttention, onChange }) => {
   const registry = useContext(RegistryContext);
   const attention = useDefaultValue(propsAttention, () => new AttentionManager(registry));
-  const handleFocus = (event) => {
+  const handleFocus = useCallback((event) => {
     log("focus", {
       related: event.relatedTarget,
       target: event.target
-    }, {
-      F: __dxlog_file,
-      L: 130,
-      S: void 0,
-      C: (f, a) => f(...a)
-    });
+    }, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 84, S: void 0 });
     const selector = [
       "[data-attendable-id]",
       ...Array.from(document.querySelectorAll("[aria-controls]")).map((el) => `[id="${el.getAttribute("aria-controls")}"]`)
@@ -247,37 +269,25 @@ var RootAttentionProvider = ({ children, attention: propsAttention, onChange })
       attention.update(next);
       onChange?.(next);
     }
-  };
-  return /* @__PURE__ */ React.createElement(AttentionContextProvider, {
+  }, [
     attention,
-    path: []
+    onChange
+  ]);
+  return /* @__PURE__ */ React.createElement(AttentionContextProvider, {
+    attention
   }, /* @__PURE__ */ React.createElement("div", {
     role: "none",
     className: "contents",
     onFocusCapture: handleFocus
   }, children));
 };
-var AttentionProvider = ({ id, children }) => {
-  const { attention, path } = useAttentionContext(ATTENTION_NAME);
-  const nextPath = useMemo(() => [
-    id,
-    ...path
-  ], [
-    id,
-    path
-  ]);
-  return /* @__PURE__ */ React.createElement(AttentionContextProvider, {
-    attention,
-    path: nextPath
-  }, children);
-};
 var AttendableContainer = /* @__PURE__ */ forwardRef(({ id, classNames, children, asChild, ...props }, forwardedRef) => {
   const attentionAttrs = useAttentionAttributes(id);
   const Comp = asChild ? Slot : Primitive.div;
   return /* @__PURE__ */ React.createElement(Comp, {
     role: "none",
-    ...attentionAttrs,
     ...props,
+    ...attentionAttrs,
     className: mx("dx-attention-surface", props.tabIndex === 0 && "dx-focus-ring-inset-over-all", classNames),
     ref: forwardedRef
   }, children);
@@ -381,18 +391,9 @@ var SelectionManager = class {
     }));
     return newSelection;
   }
-  // TODO(burdon): Disambiguate with getSelection?
   getSelected(contextId, mode = "multi") {
     const selection = this.getSelection(contextId, mode);
-    invariant(selection?.mode === mode, "Selection mode mismatch", {
-      F: __dxlog_file2,
-      L: 134,
-      S: this,
-      A: [
-        "selection?.mode === mode",
-        "'Selection mode mismatch'"
-      ]
-    });
+    invariant(selection?.mode === mode, "Selection mode mismatch", { "~LogMeta": "~LogMeta", F: __dxlog_file2, L: 103, S: this, A: ["selection?.mode === mode", "'Selection mode mismatch'"] });
     return Match.type().pipe(Match.when({
       mode: "single"
     }, (s) => s.id), Match.when({
@@ -408,15 +409,7 @@ var SelectionManager = class {
   }
   updateSingle(contextId, id) {
     const selection = this.getSelection(contextId, "single");
-    invariant(selection?.mode === "single", "Selection mode is not single", {
-      F: __dxlog_file2,
-      L: 147,
-      S: this,
-      A: [
-        "selection?.mode === 'single'",
-        "'Selection mode is not single'"
-      ]
-    });
+    invariant(selection?.mode === "single", "Selection mode is not single", { "~LogMeta": "~LogMeta", F: __dxlog_file2, L: 120, S: this, A: ["selection?.mode === 'single'", "'Selection mode is not single'"] });
     this._registry.update(this._state, (state) => ({
       selections: {
         ...state.selections,
@@ -429,15 +422,7 @@ var SelectionManager = class {
   }
   updateMulti(contextId, ids) {
     const selection = this.getSelection(contextId, "multi");
-    invariant(selection?.mode === "multi", "Selection mode is not multi", {
-      F: __dxlog_file2,
-      L: 158,
-      S: this,
-      A: [
-        "selection?.mode === 'multi'",
-        "'Selection mode is not multi'"
-      ]
-    });
+    invariant(selection?.mode === "multi", "Selection mode is not multi", { "~LogMeta": "~LogMeta", F: __dxlog_file2, L: 133, S: this, A: ["selection?.mode === 'multi'", "'Selection mode is not multi'"] });
     this._registry.update(this._state, (state) => ({
       selections: {
         ...state.selections,
@@ -452,15 +437,7 @@ var SelectionManager = class {
   }
   updateRange(contextId, from, to) {
     const selection = this.getSelection(contextId, "range");
-    invariant(selection?.mode === "range", "Selection mode is not range", {
-      F: __dxlog_file2,
-      L: 169,
-      S: this,
-      A: [
-        "selection?.mode === 'range'",
-        "'Selection mode is not range'"
-      ]
-    });
+    invariant(selection?.mode === "range", "Selection mode is not range", { "~LogMeta": "~LogMeta", F: __dxlog_file2, L: 148, S: this, A: ["selection?.mode === 'range'", "'Selection mode is not range'"] });
     this._registry.update(this._state, (state) => ({
       selections: {
         ...state.selections,
@@ -474,15 +451,7 @@ var SelectionManager = class {
   }
   updateMultiRange(contextId, ranges) {
     const selection = this.getSelection(contextId, "multi-range");
-    invariant(selection?.mode === "multi-range", "Selection mode is not multi-range", {
-      F: __dxlog_file2,
-      L: 180,
-      S: this,
-      A: [
-        "selection?.mode === 'multi-range'",
-        "'Selection mode is not multi-range'"
-      ]
-    });
+    invariant(selection?.mode === "multi-range", "Selection mode is not multi-range", { "~LogMeta": "~LogMeta", F: __dxlog_file2, L: 162, S: this, A: ["selection?.mode === 'multi-range'", "'Selection mode is not multi-range'"] });
     this._registry.update(this._state, (state) => ({
       selections: {
         ...state.selections,
@@ -531,15 +500,7 @@ var SelectionManager = class {
   }
   toggleSelection(contextId, id) {
     const selection = this.getSelection(contextId, "multi");
-    invariant(selection?.mode === "multi", "Selection mode is not multi", {
-      F: __dxlog_file2,
-      L: 213,
-      S: this,
-      A: [
-        "selection?.mode === 'multi'",
-        "'Selection mode is not multi'"
-      ]
-    });
+    invariant(selection?.mode === "multi", "Selection mode is not multi", { "~LogMeta": "~LogMeta", F: __dxlog_file2, L: 211, S: this, A: ["selection?.mode === 'multi'", "'Selection mode is not multi'"] });
     const newIds = selection.ids.includes(id) ? selection.ids.filter((existingId) => existingId !== id) : [
       ...selection.ids,
       id
@@ -556,19 +517,19 @@ var SelectionManager = class {
   }
 };
 
-// src/components/SelectionProvider.tsx
+// src/components/SelectionProvider/SelectionProvider.tsx
 import { RegistryContext as RegistryContext2 } from "@effect-atom/atom-react";
 import { createContext as createContext2 } from "@radix-ui/react-context";
 import * as Match2 from "effect/Match";
-import React2, { useCallback, useContext as useContext2, useEffect as useEffect2, useMemo as useMemo2, useState as useState2 } from "react";
+import React2, { useCallback as useCallback2, useContext as useContext2, useEffect as useEffect2, useMemo as useMemo2, useState as useState2 } from "react";
 import { useDefaultValue as useDefaultValue2 } from "@dxos/react-hooks";
 var SELECTION_NAME = "Selection";
 var [SelectionContextProvider, useSelectionContext] = createContext2(SELECTION_NAME, {
   selection: void 0
 });
-var SelectionProvider = ({ children, selection: propsSelection }) => {
+var SelectionProvider = ({ children, selection: selectionProp }) => {
   const registry = useContext2(RegistryContext2);
-  const selection = useDefaultValue2(propsSelection, () => new SelectionManager(registry));
+  const selection = useDefaultValue2(selectionProp, () => new SelectionManager(registry));
   return /* @__PURE__ */ React2.createElement(SelectionContextProvider, {
     selection
   }, children);
@@ -610,12 +571,12 @@ var useSelected = (contextId, mode = "multi") => {
   ]);
   return state;
 };
-var useSelectionActions = (contextIds, mode = "multi") => {
+var useSelectionActions = (contextIds) => {
   const stableContextIds = useMemo2(() => contextIds, [
     JSON.stringify(contextIds)
   ]);
   const { selection } = useSelectionContext(SELECTION_NAME);
-  const singleSelect = useCallback((id) => {
+  const singleSelect = useCallback2((id) => {
     if (!selection) {
       return;
     }
@@ -626,7 +587,7 @@ var useSelectionActions = (contextIds, mode = "multi") => {
     selection,
     stableContextIds
   ]);
-  const multiSelect = useCallback((ids) => {
+  const multiSelect = useCallback2((ids) => {
     if (!selection) {
       return;
     }
@@ -637,7 +598,7 @@ var useSelectionActions = (contextIds, mode = "multi") => {
     selection,
     stableContextIds
   ]);
-  const rangeSelect = useCallback((from, to) => {
+  const rangeSelect = useCallback2((from, to) => {
     if (!selection) {
       return;
     }
@@ -648,7 +609,7 @@ var useSelectionActions = (contextIds, mode = "multi") => {
     selection,
     stableContextIds
   ]);
-  const toggle = useCallback((id) => {
+  const toggle = useCallback2((id) => {
     if (!selection) {
       return;
     }
@@ -659,7 +620,7 @@ var useSelectionActions = (contextIds, mode = "multi") => {
     selection,
     stableContextIds
   ]);
-  const clear = useCallback(() => {
+  const clear = useCallback2(() => {
     if (!selection) {
       return;
     }
@@ -682,16 +643,17 @@ var useSelectionActions = (contextIds, mode = "multi") => {
 export {
   AttentionManager,
   getAttendables,
-  ATTENTION_NAME,
-  ATTENDABLE_ATTRIBUTE,
-  ATTENTION_SOURCE_ATTRIBUTE,
+  expandAttendableId,
+  isLinkedSegment,
+  linkedSegment,
+  getLinkedVariant,
+  getParentId,
+  getSegmentId,
   useAttentionContext,
   useAttention,
   useAttended,
   useAttentionAttributes,
-  useAttentionPath,
   RootAttentionProvider,
-  AttentionProvider,
   AttendableContainer,
   SelectionSchema,
   defaultSelection,
@@ -702,4 +664,4 @@ export {
   useSelected,
   useSelectionActions
 };
-//# sourceMappingURL=chunk-TAZUDNJI.mjs.map
+//# sourceMappingURL=chunk-XVH365AW.mjs.map