@dxos/react-ui-attention 0.8.4-main.b97322e → 0.8.4-main.bcb3aa67d6

package/dist/lib/browser/chunk-4SEURHOL.mjs

@@ -0,0 +1,721 @@
+// src/attention.ts
+import { Atom } from "@effect-atom/atom-react";
+var AttentionManager = class {
+  _registry;
+  _map = /* @__PURE__ */ new Map();
+  _currentAtom;
+  constructor(_registry, initial = []) {
+    this._registry = _registry;
+    this._currentAtom = Atom.make([]).pipe(Atom.keepAlive);
+    if (initial.length > 0) {
+      this.update(initial);
+    }
+  }
+  /**
+  * Atom for the currently attended element IDs.
+  */
+  get current() {
+    return this._currentAtom;
+  }
+  /**
+  * Gets the currently attended element IDs.
+  */
+  getCurrent() {
+    return this._registry.get(this._currentAtom);
+  }
+  /**
+  * Subscribe to changes in the current attention IDs.
+  */
+  subscribeCurrent(cb) {
+    this._registry.get(this._currentAtom);
+    return this._registry.subscribe(this._currentAtom, () => {
+      cb(this._registry.get(this._currentAtom));
+    });
+  }
+  /**
+  * All tracked qualified IDs.
+  */
+  keys() {
+    return Array.from(this._map.keys());
+  }
+  /**
+  * Get the attention state for a given qualified ID.
+  */
+  get(id) {
+    const atom = this._getAtom(id);
+    return this._registry.get(atom);
+  }
+  /**
+  * Subscribe to changes in the attention state for a given qualified ID.
+  */
+  subscribe(id, cb) {
+    const atom = this._getAtom(id);
+    this._registry.get(atom);
+    return this._registry.subscribe(atom, () => {
+      cb(this._registry.get(atom));
+    });
+  }
+  _getAtom(id) {
+    const existing = this._map.get(id);
+    if (existing) {
+      return existing;
+    }
+    const newAtom = Atom.make({
+      hasAttention: false,
+      isAncestor: false,
+      isRelated: false
+    }).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(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(id, attention) {
+    const atom = this._getAtom(id);
+    this._registry.set(atom, {
+      hasAttention: attention.hasAttention ?? false,
+      isAncestor: attention.isAncestor ?? false,
+      isRelated: attention.isRelated ?? false
+    });
+  }
+};
+var getAttendables = (selector, cursor, acc = []) => {
+  const closestAttendable = cursor.closest(selector);
+  if (closestAttendable) {
+    const attendableId = closestAttendable.getAttribute("data-attendable-id");
+    if (!attendableId) {
+      const trigger = document.querySelector(`[aria-controls="${closestAttendable.getAttribute("id")}"]`);
+      if (!trigger) {
+        return acc;
+      } else {
+        return getAttendables(selector, trigger, acc);
+      }
+    } else {
+      acc.push(attendableId);
+      return !closestAttendable.parentElement ? acc : getAttendables(selector, closestAttendable.parentElement, acc);
+    }
+  }
+  return [
+    ...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
+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 { 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 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
+});
+var UNKNOWN_ATTENDABLE = {
+  hasAttention: false,
+  isAncestor: false,
+  isRelated: false
+};
+var useAttention = (attendableId) => {
+  const { attention } = useAttentionContext(ATTENTION_NAME);
+  const [state, setState] = useState(UNKNOWN_ATTENDABLE);
+  useEffect(() => {
+    if (!attendableId || !attention) {
+      setState(UNKNOWN_ATTENDABLE);
+      return;
+    }
+    const currentState = attention.get(attendableId);
+    setState(currentState);
+    return attention.subscribe(attendableId, (newState) => {
+      setState(newState);
+    });
+  }, [
+    attention,
+    attendableId
+  ]);
+  return state;
+};
+var useAttended = () => {
+  const { attention } = useAttentionContext(ATTENTION_NAME);
+  const [current, setCurrent] = useState([]);
+  useEffect(() => {
+    if (!attention) {
+      return;
+    }
+    setCurrent(attention.getCurrent());
+    return attention.subscribeCurrent((newCurrent) => {
+      setCurrent(newCurrent);
+    });
+  }, [
+    attention
+  ]);
+  return current;
+};
+var useAttentionAttributes = (attendableId) => {
+  const { hasAttention } = useAttention(attendableId);
+  return useMemo(() => {
+    const attributes = {
+      [ATTENDABLE_ATTRIBUTE]: attendableId
+    };
+    if (hasAttention) {
+      attributes[ATTENTION_SOURCE_ATTRIBUTE] = "true";
+    }
+    return attributes;
+  }, [
+    attendableId,
+    hasAttention
+  ]);
+};
+var RootAttentionProvider = ({ children, attention: propsAttention, onChange }) => {
+  const registry = useContext(RegistryContext);
+  const attention = useDefaultValue(propsAttention, () => new AttentionManager(registry));
+  const handleFocus = (event) => {
+    log("focus", {
+      related: event.relatedTarget,
+      target: event.target
+    }, {
+      F: __dxlog_file,
+      L: 115,
+      S: void 0,
+      C: (f, a) => f(...a)
+    });
+    const selector = [
+      "[data-attendable-id]",
+      ...Array.from(document.querySelectorAll("[aria-controls]")).map((el) => `[id="${el.getAttribute("aria-controls")}"]`)
+    ].join(",");
+    const prev = attention.getCurrent();
+    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__ */ React.createElement(AttentionContextProvider, {
+    attention
+  }, /* @__PURE__ */ React.createElement("div", {
+    role: "none",
+    className: "contents",
+    onFocusCapture: handleFocus
+  }, 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",
+    ...props,
+    ...attentionAttrs,
+    className: mx("dx-attention-surface", props.tabIndex === 0 && "dx-focus-ring-inset-over-all", classNames),
+    ref: forwardedRef
+  }, children);
+});
+
+// src/selection.ts
+import { Atom as Atom2 } from "@effect-atom/atom-react";
+import * as Match from "effect/Match";
+import * as Schema from "effect/Schema";
+import { invariant } from "@dxos/invariant";
+var __dxlog_file2 = "/__w/dxos/dxos/packages/ui/react-ui-attention/src/selection.ts";
+var SelectionSchema = Schema.Union(Schema.Struct({
+  mode: Schema.Literal("single"),
+  id: Schema.optional(Schema.String)
+}).pipe(Schema.mutable), Schema.Struct({
+  mode: Schema.Literal("multi"),
+  ids: Schema.Array(Schema.String).pipe(Schema.mutable)
+}).pipe(Schema.mutable), Schema.Struct({
+  mode: Schema.Literal("range"),
+  from: Schema.optional(Schema.String),
+  to: Schema.optional(Schema.String)
+}).pipe(Schema.mutable), Schema.Struct({
+  mode: Schema.Literal("multi-range"),
+  ranges: Schema.Array(Schema.Struct({
+    from: Schema.String,
+    to: Schema.String
+  })).pipe(Schema.mutable)
+}).pipe(Schema.mutable)).pipe(Schema.mutable);
+var defaultSelection = Match.type().pipe(Match.withReturnType(), Match.when("single", () => ({
+  mode: "single"
+})), Match.when("multi", () => ({
+  mode: "multi",
+  ids: []
+})), Match.when("range", () => ({
+  mode: "range"
+})), Match.when("multi-range", () => ({
+  mode: "multi-range",
+  ranges: []
+})), Match.exhaustive);
+var getSelectionSet = (selectionManager, contextId) => {
+  const ids = new Set(contextId ? [
+    contextId
+  ] : []);
+  for (const context of selectionManager.getSelectionContexts()) {
+    const selection = selectionManager.getSelection(context);
+    if (selection?.mode === "multi") {
+      for (const id of selection.ids) {
+        ids.add(id);
+      }
+    }
+  }
+  return ids;
+};
+var SelectionManager = class {
+  _registry;
+  _state;
+  constructor(_registry, initial = {}) {
+    this._registry = _registry;
+    this._state = Atom2.make({
+      selections: {
+        ...initial
+      }
+    });
+  }
+  /**
+  * Get the state atom for reactive access in the graph system.
+  */
+  get state() {
+    return this._state;
+  }
+  /**
+  * Gets the current state.
+  */
+  getState() {
+    return this._registry.get(this._state);
+  }
+  /**
+  * Subscribe to changes in the selection state.
+  */
+  subscribe(cb) {
+    this._registry.get(this._state);
+    return this._registry.subscribe(this._state, () => {
+      cb(this._registry.get(this._state));
+    });
+  }
+  getSelectionContexts() {
+    return Object.keys(this._registry.get(this._state).selections);
+  }
+  getSelection(contextId, mode = void 0) {
+    const state = this._registry.get(this._state);
+    const selection = state.selections[contextId];
+    if (!mode || selection) {
+      return selection;
+    }
+    const newSelection = defaultSelection(mode);
+    this._registry.update(this._state, (state2) => ({
+      selections: {
+        ...state2.selections,
+        [contextId]: newSelection
+      }
+    }));
+    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'"
+      ]
+    });
+    return Match.type().pipe(Match.when({
+      mode: "single"
+    }, (s) => s.id), Match.when({
+      mode: "multi"
+    }, (s) => s.ids), Match.when({
+      mode: "range"
+    }, (s) => s.from && s.to ? {
+      from: s.from,
+      to: s.to
+    } : void 0), Match.when({
+      mode: "multi-range"
+    }, (s) => s.ranges), Match.exhaustive)(selection);
+  }
+  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'"
+      ]
+    });
+    this._registry.update(this._state, (state) => ({
+      selections: {
+        ...state.selections,
+        [contextId]: {
+          ...selection,
+          id
+        }
+      }
+    }));
+  }
+  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'"
+      ]
+    });
+    this._registry.update(this._state, (state) => ({
+      selections: {
+        ...state.selections,
+        [contextId]: {
+          ...selection,
+          ids: [
+            ...ids
+          ]
+        }
+      }
+    }));
+  }
+  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'"
+      ]
+    });
+    this._registry.update(this._state, (state) => ({
+      selections: {
+        ...state.selections,
+        [contextId]: {
+          ...selection,
+          from,
+          to
+        }
+      }
+    }));
+  }
+  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'"
+      ]
+    });
+    this._registry.update(this._state, (state) => ({
+      selections: {
+        ...state.selections,
+        [contextId]: {
+          ...selection,
+          ranges: [
+            ...ranges
+          ]
+        }
+      }
+    }));
+  }
+  clearSelection(contextId) {
+    const selection = this.getSelection(contextId);
+    if (!selection) {
+      return;
+    }
+    const clearedSelection = Match.type().pipe(Match.when({
+      mode: "single"
+    }, (s) => ({
+      ...s,
+      id: void 0
+    })), Match.when({
+      mode: "multi"
+    }, (s) => ({
+      ...s,
+      ids: []
+    })), Match.when({
+      mode: "range"
+    }, (s) => ({
+      ...s,
+      from: void 0,
+      to: void 0
+    })), Match.when({
+      mode: "multi-range"
+    }, (s) => ({
+      ...s,
+      ranges: []
+    })), Match.exhaustive)(selection);
+    this._registry.update(this._state, (state) => ({
+      selections: {
+        ...state.selections,
+        [contextId]: clearedSelection
+      }
+    }));
+  }
+  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'"
+      ]
+    });
+    const newIds = selection.ids.includes(id) ? selection.ids.filter((existingId) => existingId !== id) : [
+      ...selection.ids,
+      id
+    ];
+    this._registry.update(this._state, (state) => ({
+      selections: {
+        ...state.selections,
+        [contextId]: {
+          ...selection,
+          ids: newIds
+        }
+      }
+    }));
+  }
+};
+
+// src/components/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 { 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 }) => {
+  const registry = useContext2(RegistryContext2);
+  const selection = useDefaultValue2(propsSelection, () => new SelectionManager(registry));
+  return /* @__PURE__ */ React2.createElement(SelectionContextProvider, {
+    selection
+  }, children);
+};
+var useSelectionManager = () => {
+  const { selection } = useSelectionContext(SELECTION_NAME);
+  return selection;
+};
+var getDefaultResult = (mode) => {
+  return Match2.type().pipe(Match2.when({
+    mode: "single"
+  }, (selection) => selection.id), Match2.when({
+    mode: "multi"
+  }, (selection) => selection.ids), Match2.when({
+    mode: "range"
+  }, (selection) => selection.from && selection.to ? {
+    from: selection.from,
+    to: selection.to
+  } : void 0), Match2.when({
+    mode: "multi-range"
+  }, (selection) => selection.ranges), Match2.exhaustive)(defaultSelection(mode));
+};
+var useSelected = (contextId, mode = "multi") => {
+  const { selection } = useSelectionContext(SELECTION_NAME);
+  const [state, setState] = useState2(() => contextId && selection ? selection.getSelected(contextId, mode) : getDefaultResult(mode));
+  useEffect2(() => {
+    if (!contextId || !selection) {
+      setState(getDefaultResult(mode));
+      return;
+    }
+    setState(selection.getSelected(contextId, mode));
+    return selection.subscribe(() => {
+      setState(selection.getSelected(contextId, mode));
+    });
+  }, [
+    selection,
+    contextId,
+    mode
+  ]);
+  return state;
+};
+var useSelectionActions = (contextIds, mode = "multi") => {
+  const stableContextIds = useMemo2(() => contextIds, [
+    JSON.stringify(contextIds)
+  ]);
+  const { selection } = useSelectionContext(SELECTION_NAME);
+  const singleSelect = useCallback((id) => {
+    if (!selection) {
+      return;
+    }
+    for (const contextId of stableContextIds) {
+      selection.updateSingle(contextId, id);
+    }
+  }, [
+    selection,
+    stableContextIds
+  ]);
+  const multiSelect = useCallback((ids) => {
+    if (!selection) {
+      return;
+    }
+    for (const contextId of stableContextIds) {
+      selection.updateMulti(contextId, ids);
+    }
+  }, [
+    selection,
+    stableContextIds
+  ]);
+  const rangeSelect = useCallback((from, to) => {
+    if (!selection) {
+      return;
+    }
+    for (const contextId of stableContextIds) {
+      selection.updateRange(contextId, from, to);
+    }
+  }, [
+    selection,
+    stableContextIds
+  ]);
+  const toggle = useCallback((id) => {
+    if (!selection) {
+      return;
+    }
+    for (const contextId of stableContextIds) {
+      selection.toggleSelection(contextId, id);
+    }
+  }, [
+    selection,
+    stableContextIds
+  ]);
+  const clear = useCallback(() => {
+    if (!selection) {
+      return;
+    }
+    for (const contextId of stableContextIds) {
+      selection.clearSelection(contextId);
+    }
+  }, [
+    selection,
+    stableContextIds
+  ]);
+  return {
+    singleSelect,
+    multiSelect,
+    rangeSelect,
+    toggle,
+    clear
+  };
+};
+
+export {
+  AttentionManager,
+  getAttendables,
+  expandAttendableId,
+  isLinkedSegment,
+  linkedSegment,
+  getLinkedVariant,
+  getParentId,
+  getSegmentId,
+  ATTENTION_NAME,
+  ATTENDABLE_ATTRIBUTE,
+  ATTENTION_SOURCE_ATTRIBUTE,
+  useAttentionContext,
+  useAttention,
+  useAttended,
+  useAttentionAttributes,
+  RootAttentionProvider,
+  AttendableContainer,
+  SelectionSchema,
+  defaultSelection,
+  getSelectionSet,
+  SelectionManager,
+  SelectionProvider,
+  useSelectionManager,
+  useSelected,
+  useSelectionActions
+};
+//# sourceMappingURL=chunk-4SEURHOL.mjs.map