@dxos/react-ui-attention 0.5.9-main.17d92ec

package/LICENSE

@@ -0,0 +1,8 @@
+MIT License
+Copyright (c) 2024 DXOS
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,3 @@
+# @dxos/react-ui-attention
+
+Layout and signifier components to facilitate multitasking.

package/dist/lib/browser/index.mjs

@@ -0,0 +1,131 @@
+// packages/ui/react-ui-attention/src/components/AttentionGlyph.tsx
+import { Minus } from "@phosphor-icons/react";
+import React, { forwardRef } from "react";
+import { focusRing, mx } from "@dxos/react-ui-theme";
+var attentionGlyphStyles = "inline-block rounded-sm is-3 bs-3 bg-transparent fg-accent transition-colors [[aria-current]_&]:surface-unAccent [[aria-current]_&]:fg-inverse [[data-attention=true]_&]:surface-accent [[data-attention=true]_&]:fg-inverse [[aria-current][data-attention=true]_&]:surface-accent [[aria-current][data-attention=true]_&]:fg-inverse";
+var closeIconStyles = "hidden is-3 bs-3 group-[[aria-current]_&:hover]/attentionGlyphButton:block group-[[aria-current]_&:focus]/attentionGlyphButton:block group-[[data-attention=true]_&:hover]/attentionGlyphButton:block group-[[data-attention=true]_&:focus]/attentionGlyphButton:block group-[[aria-current][data-attention=true]_&:hover]/attentionGlyphButton:block group-[[aria-current][data-attention=true]_&:focus]/attentionGlyphButton:block";
+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__ */ React.createElement("svg", {
+    width: "12",
+    height: "12",
+    viewBox: "0 0 12 12",
+    className: presenceIconStyles,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /* @__PURE__ */ React.createElement("circle", {
+    cx: "6",
+    cy: "6",
+    r: "2.5",
+    fill: "currentColor"
+  }));
+};
+var PresenceMany = () => {
+  return /* @__PURE__ */ React.createElement("svg", {
+    width: "12",
+    height: "12",
+    viewBox: "0 0 12 12",
+    className: presenceIconStyles,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /* @__PURE__ */ React.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__ */ React.createElement("circle", {
+    cx: "4.25",
+    cy: "6",
+    r: "2.5",
+    fill: "currentColor"
+  }));
+};
+var AttentionGlyph = /* @__PURE__ */ forwardRef(({ presence, classNames, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React.createElement("span", {
+    role: "none",
+    ...props,
+    className: mx(attentionGlyphStyles, classNames),
+    ref: forwardedRef
+  }, presence === "many" && /* @__PURE__ */ React.createElement(PresenceMany, null), presence === "one" && /* @__PURE__ */ React.createElement(PresenceOne, null));
+});
+var AttentionGlyphCloseButton = /* @__PURE__ */ forwardRef(({ presence, classNames, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React.createElement("button", {
+    ...props,
+    className: mx(attentionGlyphStyles, focusRing, "group/attentionGlyphButton pointer-events-none [[aria-current]_&]:pointer-events-auto [[data-attention=true]_&]:pointer-events-auto [[aria-current][data-attention=true]_&]:pointer-events-auto", classNames),
+    ref: forwardedRef
+  }, presence === "many" && /* @__PURE__ */ React.createElement(PresenceMany, null), presence === "one" && /* @__PURE__ */ React.createElement(PresenceOne, null), /* @__PURE__ */ React.createElement(Minus, {
+    weight: "bold",
+    className: closeIconStyles
+  }));
+});
+
+// packages/ui/react-ui-attention/src/components/AttentionProvider.tsx
+import { createContext } from "@radix-ui/react-context";
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import React2 from "react";
+var ATTENTION_NAME = "Attention";
+var [AttentionContextProvider, useAttentionContext] = createContext(ATTENTION_NAME, {
+  attended: /* @__PURE__ */ new Set()
+});
+var useHasAttention = (attendableId) => {
+  const { attended } = useAttentionContext(ATTENTION_NAME);
+  return attendableId ? attended.has(attendableId) : false;
+};
+var useAttendable = (attendableId) => {
+  return {
+    "data-attendable-id": attendableId
+  };
+};
+var getAttendables = (selector, cursor, acc = []) => {
+  const closestAttendable = cursor.closest(selector);
+  if (!closestAttendable) {
+    return acc;
+  } else {
+    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);
+    }
+  }
+};
+var AttentionProvider = ({ children, attended: propsAttended, defaultAttended, onChangeAttend }) => {
+  const [attended = /* @__PURE__ */ new Set(), setAttended] = useControllableState({
+    prop: propsAttended,
+    defaultProp: defaultAttended,
+    onChange: onChangeAttend
+  });
+  const handleFocus = (event) => {
+    const selector = [
+      "[data-attendable-id]",
+      ...Array.from(document.querySelectorAll("[aria-controls]")).map((el) => `[id="${el.getAttribute("aria-controls")}"]`)
+    ].join(",");
+    const nextAttended = new Set(getAttendables(selector, event.target));
+    const [prev, next] = [
+      Array.from(attended),
+      Array.from(nextAttended)
+    ];
+    (prev.length !== next.length || !!prev.find((id, index) => next[index] !== id)) && setAttended(nextAttended);
+  };
+  return /* @__PURE__ */ React2.createElement(AttentionContextProvider, {
+    attended
+  }, /* @__PURE__ */ React2.createElement("div", {
+    role: "none",
+    className: "contents",
+    onFocusCapture: handleFocus
+  }, children));
+};
+export {
+  ATTENTION_NAME,
+  AttentionGlyph,
+  AttentionGlyphCloseButton,
+  AttentionProvider,
+  useAttendable,
+  useAttentionContext,
+  useHasAttention
+};
+//# sourceMappingURL=index.mjs.map

package/dist/lib/browser/index.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/AttentionGlyph.tsx", "../../../src/components/AttentionProvider.tsx"],
+  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { Minus } from '@phosphor-icons/react';\nimport { type Primitive } from '@radix-ui/react-primitive';\nimport React, { type ComponentPropsWithRef, forwardRef } from 'react';\n\nimport { type ThemedClassName } from '@dxos/react-ui';\nimport { focusRing, mx } from '@dxos/react-ui-theme';\n\nconst attentionGlyphStyles =\n  'inline-block rounded-sm is-3 bs-3 bg-transparent fg-accent transition-colors [[aria-current]_&]:surface-unAccent [[aria-current]_&]:fg-inverse [[data-attention=true]_&]:surface-accent [[data-attention=true]_&]:fg-inverse [[aria-current][data-attention=true]_&]:surface-accent [[aria-current][data-attention=true]_&]:fg-inverse';\n\nconst closeIconStyles =\n  'hidden is-3 bs-3 group-[[aria-current]_&:hover]/attentionGlyphButton:block group-[[aria-current]_&:focus]/attentionGlyphButton:block group-[[data-attention=true]_&:hover]/attentionGlyphButton:block group-[[data-attention=true]_&:focus]/attentionGlyphButton:block group-[[aria-current][data-attention=true]_&:hover]/attentionGlyphButton:block group-[[aria-current][data-attention=true]_&:focus]/attentionGlyphButton:block';\n\nconst presenceIconStyles =\n  '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';\n\nconst PresenceOne = () => {\n  return (\n    <svg\n      width='12'\n      height='12'\n      viewBox='0 0 12 12'\n      className={presenceIconStyles}\n      fill='none'\n      xmlns='http://www.w3.org/2000/svg'\n    >\n      <circle cx='6' cy='6' r='2.5' fill='currentColor' />\n    </svg>\n  );\n};\n\nconst PresenceMany = () => {\n  return (\n    <svg\n      width='12'\n      height='12'\n      viewBox='0 0 12 12'\n      className={presenceIconStyles}\n      fill='none'\n      xmlns='http://www.w3.org/2000/svg'\n    >\n      <path\n        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'\n        fill='currentColor'\n      />\n      <circle cx='4.25' cy='6' r='2.5' fill='currentColor' />\n    </svg>\n  );\n};\n\nexport type AttentionGlyphProps = {\n  presence?: 'none' | 'one' | 'many';\n} & ThemedClassName<Omit<ComponentPropsWithRef<typeof Primitive.span>, 'children'>>;\n\nexport const AttentionGlyph = forwardRef<HTMLSpanElement, AttentionGlyphProps>(\n  ({ presence, classNames, ...props }, forwardedRef) => {\n    return (\n      <span role='none' {...props} className={mx(attentionGlyphStyles, classNames)} ref={forwardedRef}>\n        {presence === 'many' && <PresenceMany />}\n        {presence === 'one' && <PresenceOne />}\n      </span>\n    );\n  },\n);\n\nexport const AttentionGlyphCloseButton = forwardRef<HTMLButtonElement, AttentionGlyphProps>(\n  ({ presence, classNames, ...props }, forwardedRef) => {\n    return (\n      <button\n        {...props}\n        className={mx(\n          attentionGlyphStyles,\n          focusRing,\n          'group/attentionGlyphButton pointer-events-none [[aria-current]_&]:pointer-events-auto [[data-attention=true]_&]:pointer-events-auto [[aria-current][data-attention=true]_&]:pointer-events-auto',\n          classNames,\n        )}\n        ref={forwardedRef}\n      >\n        {presence === 'many' && <PresenceMany />}\n        {presence === 'one' && <PresenceOne />}\n        <Minus weight='bold' className={closeIconStyles} />\n      </button>\n    );\n  },\n);\n", "//\n// Copyright 2024 DXOS.org\n//\n\n// NOTE(thure): The following unused imports quell TS2742 (“likely not portable”).\n\n// eslint-disable-next-line unused-imports/no-unused-imports\nimport { createContext, type Scope, type CreateScope } from '@radix-ui/react-context';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\n// eslint-disable-next-line unused-imports/no-unused-imports\nimport React, { ComponentProps, type FocusEvent, type HTMLAttributes, type PropsWithChildren, useState } from 'react';\n\nconst ATTENTION_NAME = 'Attention';\n\ntype AttentionContextValue = {\n  attended: Set<string>;\n};\n\nconst [AttentionContextProvider, useAttentionContext] = createContext<AttentionContextValue>(ATTENTION_NAME, {\n  attended: new Set(),\n});\n\nconst useHasAttention = (attendableId?: string) => {\n  const { attended } = useAttentionContext(ATTENTION_NAME);\n  return attendableId ? attended.has(attendableId) : false;\n};\n\n/**\n * Computes HTML element attributes to apply so the attention system can detect changes\n * @param attendableId\n */\nconst useAttendable = (attendableId?: string) => {\n  return { 'data-attendable-id': attendableId };\n};\n\n/**\n * Accumulates all attendable id’s between the element provided and the root, inclusive.\n */\nconst getAttendables = (selector: string, cursor: Element, acc: string[] = []): string[] => {\n  // Find the closest element with `data-attendable-id`, if any; start from cursor and move up the DOM tree.\n  const closestAttendable = cursor.closest(selector);\n  if (!closestAttendable) {\n    return acc;\n  } else {\n    const attendableId = closestAttendable.getAttribute('data-attendable-id');\n    if (!attendableId) {\n      // this has an id of an aria-controls elsewhere on the page, move cursor to that trigger\n      const trigger = document.querySelector(`[aria-controls=\"${closestAttendable.getAttribute('id')}\"]`);\n      if (!trigger) {\n        return acc;\n      } else {\n        return getAttendables(selector, trigger, acc);\n      }\n    } else {\n      acc.push(attendableId);\n      // (attempt tail recursion)\n      return !closestAttendable.parentElement ? acc : getAttendables(selector, closestAttendable.parentElement, acc);\n    }\n  }\n};\n\nconst AttentionProvider = ({\n  children,\n  attended: propsAttended,\n  defaultAttended,\n  onChangeAttend,\n}: PropsWithChildren<\n  Partial<{\n    attended: Set<string>;\n    onChangeAttend: (nextAttended: Set<string>) => void;\n    defaultAttended: Set<string>;\n  }>\n>) => {\n  const [attended = new Set(), setAttended] = useControllableState<Set<string>>({\n    prop: propsAttended,\n    defaultProp: defaultAttended,\n    onChange: onChangeAttend,\n  });\n  const handleFocus = (event: FocusEvent) => {\n    const selector = [\n      '[data-attendable-id]',\n      ...Array.from(document.querySelectorAll('[aria-controls]')).map(\n        (el) => `[id=\"${el.getAttribute('aria-controls')}\"]`,\n      ),\n    ].join(',');\n    const nextAttended = new Set(getAttendables(selector, event.target));\n    const [prev, next] = [Array.from(attended), Array.from(nextAttended)];\n    // Only update state if the result is different.\n    (prev.length !== next.length || !!prev.find((id, index) => next[index] !== id)) && setAttended(nextAttended);\n  };\n  return (\n    <AttentionContextProvider attended={attended}>\n      <div role='none' className='contents' onFocusCapture={handleFocus}>\n        {children}\n      </div>\n    </AttentionContextProvider>\n  );\n};\n\nexport { AttentionProvider, useAttentionContext, useHasAttention, useAttendable, ATTENTION_NAME };\n\nexport type { AttentionContextValue };\n"],
+  "mappings": "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",
+  "names": ["Minus", "React", "forwardRef", "focusRing", "mx", "attentionGlyphStyles", "closeIconStyles", "presenceIconStyles", "PresenceOne", "svg", "width", "height", "viewBox", "className", "fill", "xmlns", "circle", "cx", "cy", "r", "PresenceMany", "path", "d", "AttentionGlyph", "forwardRef", "presence", "classNames", "props", "forwardedRef", "span", "role", "mx", "ref", "AttentionGlyphCloseButton", "button", "focusRing", "Minus", "weight", "createContext", "useControllableState", "React", "ATTENTION_NAME", "AttentionContextProvider", "useAttentionContext", "createContext", "attended", "Set", "useHasAttention", "attendableId", "has", "useAttendable", "getAttendables", "selector", "cursor", "acc", "closestAttendable", "closest", "getAttribute", "trigger", "document", "querySelector", "push", "parentElement", "AttentionProvider", "children", "propsAttended", "defaultAttended", "onChangeAttend", "setAttended", "useControllableState", "prop", "defaultProp", "onChange", "handleFocus", "event", "Array", "from", "querySelectorAll", "map", "el", "join", "nextAttended", "target", "prev", "next", "length", "find", "id", "index", "React", "div", "role", "className", "onFocusCapture"]
+}

package/dist/lib/browser/meta.json

@@ -0,0 +1 @@
+{"inputs":{"packages/ui/react-ui-attention/src/components/AttentionGlyph.tsx":{"bytes":11245,"imports":[{"path":"@phosphor-icons/react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-attention/src/components/AttentionProvider.tsx":{"bytes":11903,"imports":[{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-attention/src/components/index.ts":{"bytes":644,"imports":[{"path":"packages/ui/react-ui-attention/src/components/AttentionGlyph.tsx","kind":"import-statement","original":"./AttentionGlyph"},{"path":"packages/ui/react-ui-attention/src/components/AttentionProvider.tsx","kind":"import-statement","original":"./AttentionProvider"}],"format":"esm"},"packages/ui/react-ui-attention/src/index.ts":{"bytes":508,"imports":[{"path":"packages/ui/react-ui-attention/src/components/index.ts","kind":"import-statement","original":"./components"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-attention/dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":11629},"packages/ui/react-ui-attention/dist/lib/browser/index.mjs":{"imports":[{"path":"@phosphor-icons/react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"exports":["ATTENTION_NAME","AttentionGlyph","AttentionGlyphCloseButton","AttentionProvider","useAttendable","useAttentionContext","useHasAttention"],"entryPoint":"packages/ui/react-ui-attention/src/index.ts","inputs":{"packages/ui/react-ui-attention/src/components/AttentionGlyph.tsx":{"bytesInOutput":3642},"packages/ui/react-ui-attention/src/components/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-attention/src/components/AttentionProvider.tsx":{"bytesInOutput":2289},"packages/ui/react-ui-attention/src/index.ts":{"bytesInOutput":0}},"bytes":6262}}}

package/dist/types/src/components/AttentionGlyph.d.ts

@@ -0,0 +1,9 @@
+import { type Primitive } from '@radix-ui/react-primitive';
+import React, { type ComponentPropsWithRef } from 'react';
+import { type ThemedClassName } from '@dxos/react-ui';
+export type AttentionGlyphProps = {
+    presence?: 'none' | 'one' | 'many';
+} & ThemedClassName<Omit<ComponentPropsWithRef<typeof Primitive.span>, 'children'>>;
+export declare const AttentionGlyph: React.ForwardRefExoticComponent<Pick<AttentionGlyphProps, "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "asChild" | "presence" | "classNames"> & React.RefAttributes<HTMLSpanElement>>;
+export declare const AttentionGlyphCloseButton: React.ForwardRefExoticComponent<Pick<AttentionGlyphProps, "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "asChild" | "presence" | "classNames"> & React.RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=AttentionGlyph.d.ts.map

package/dist/types/src/components/AttentionGlyph.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AttentionGlyph.d.ts","sourceRoot":"","sources":["../../../../src/components/AttentionGlyph.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,KAAK,EAAE,EAAE,KAAK,qBAAqB,EAAc,MAAM,OAAO,CAAC;AAEtE,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AA8CtD,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,MAAM,CAAC;CACpC,GAAG,eAAe,CAAC,IAAI,CAAC,qBAAqB,CAAC,OAAO,SAAS,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC;AAEpF,eAAO,MAAM,cAAc,smJAS1B,CAAC;AAEF,eAAO,MAAM,yBAAyB,wmJAmBrC,CAAC"}

package/dist/types/src/components/AttentionGlyph.stories.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+import '@dxosTheme';
+type StorybookAttentionGlyphProps = {
+    current?: boolean;
+    attention?: boolean;
+};
+declare const _default: {
+    title: string;
+    component: ({ current, attention }: StorybookAttentionGlyphProps) => JSX.Element;
+    decorators: import("@storybook/react/*").Decorator[];
+};
+export default _default;
+export declare const Default: {
+    args: {};
+};
+export declare const Current: {
+    args: {
+        current: boolean;
+    };
+};
+export declare const Attention: {
+    args: {
+        current: boolean;
+        attention: boolean;
+    };
+};
+//# sourceMappingURL=AttentionGlyph.stories.d.ts.map

package/dist/types/src/components/AttentionGlyph.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AttentionGlyph.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/AttentionGlyph.stories.tsx"],"names":[],"mappings":";AAIA,OAAO,YAAY,CAAC;AAQpB,KAAK,4BAA4B,GAAG;IAClC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;;;;;;AAsBF,wBAIE;AAEF,eAAO,MAAM,OAAO;;CAEnB,CAAC;AACF,eAAO,MAAM,OAAO;;;;CAEnB,CAAC;AACF,eAAO,MAAM,SAAS;;;;;CAErB,CAAC"}

package/dist/types/src/components/AttentionProvider.d.ts

@@ -0,0 +1,22 @@
+import { type PropsWithChildren } from 'react';
+declare const ATTENTION_NAME = "Attention";
+type AttentionContextValue = {
+    attended: Set<string>;
+};
+declare const useAttentionContext: (consumerName: string) => AttentionContextValue;
+declare const useHasAttention: (attendableId?: string) => boolean;
+/**
+ * Computes HTML element attributes to apply so the attention system can detect changes
+ * @param attendableId
+ */
+declare const useAttendable: (attendableId?: string) => {
+    'data-attendable-id': string | undefined;
+};
+declare const AttentionProvider: ({ children, attended: propsAttended, defaultAttended, onChangeAttend, }: PropsWithChildren<Partial<{
+    attended: Set<string>;
+    onChangeAttend: (nextAttended: Set<string>) => void;
+    defaultAttended: Set<string>;
+}>>) => JSX.Element;
+export { AttentionProvider, useAttentionContext, useHasAttention, useAttendable, ATTENTION_NAME };
+export type { AttentionContextValue };
+//# sourceMappingURL=AttentionProvider.d.ts.map

package/dist/types/src/components/AttentionProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AttentionProvider.d.ts","sourceRoot":"","sources":["../../../../src/components/AttentionProvider.tsx"],"names":[],"mappings":"AAUA,OAAc,EAAwD,KAAK,iBAAiB,EAAY,MAAM,OAAO,CAAC;AAEtH,QAAA,MAAM,cAAc,cAAc,CAAC;AAEnC,KAAK,qBAAqB,GAAG;IAC3B,QAAQ,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;CACvB,CAAC;AAEF,QAAA,MAAiC,mBAAmB,iDAElD,CAAC;AAEH,QAAA,MAAM,eAAe,kBAAmB,MAAM,YAG7C,CAAC;AAEF;;;GAGG;AACH,QAAA,MAAM,aAAa,kBAAmB,MAAM;;CAE3C,CAAC;AA4BF,QAAA,MAAM,iBAAiB,4EAKpB,kBACD,QAAQ;IACN,QAAQ,EAAE,IAAI,MAAM,CAAC,CAAC;IACtB,cAAc,EAAE,CAAC,YAAY,EAAE,IAAI,MAAM,CAAC,KAAK,IAAI,CAAC;IACpD,eAAe,EAAE,IAAI,MAAM,CAAC,CAAC;CAC9B,CAAC,CACH,gBAyBA,CAAC;AAEF,OAAO,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,eAAe,EAAE,aAAa,EAAE,cAAc,EAAE,CAAC;AAElG,YAAY,EAAE,qBAAqB,EAAE,CAAC"}

package/dist/types/src/components/index.d.ts

@@ -0,0 +1,3 @@
+export * from './AttentionGlyph';
+export * from './AttentionProvider';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAIA,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC"}

package/dist/types/src/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,cAAc,cAAc,CAAC"}

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@dxos/react-ui-attention",
+  "version": "0.5.9-main.17d92ec",
+  "description": "Signifier components and providers for attention system.",
+  "homepage": "https://dxos.org",
+  "bugs": "https://github.com/dxos/dxos/issues",
+  "license": "MIT",
+  "author": "DXOS.org",
+  "main": "dist/lib/node/index.cjs",
+  "browser": {
+    "./dist/lib/node/index.cjs": "./dist/lib/browser/index.mjs"
+  },
+  "types": "dist/types/src/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "dependencies": {
+    "@radix-ui/primitive": "^1.0.0",
+    "@radix-ui/react-compose-refs": "^1.0.0",
+    "@radix-ui/react-context": "^1.0.0",
+    "@radix-ui/react-menu": "^2.0.6",
+    "@radix-ui/react-primitive": "^1.0.2",
+    "@radix-ui/react-slot": "^1.0.1",
+    "@radix-ui/react-use-controllable-state": "^1.0.0",
+    "@dxos/react-ui": "0.5.9-main.17d92ec",
+    "@dxos/react-ui-theme": "0.5.9-main.17d92ec",
+    "@dxos/util": "0.5.9-main.17d92ec"
+  },
+  "devDependencies": {
+    "@phosphor-icons/react": "^2.1.5",
+    "@types/react": "^18.0.21",
+    "@types/react-dom": "^18.0.6",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "vite": "^5.2.9",
+    "@dxos/random": "0.5.9-main.17d92ec",
+    "@dxos/app-graph": "0.5.9-main.17d92ec",
+    "@dxos/storybook-utils": "0.5.9-main.17d92ec"
+  },
+  "peerDependencies": {
+    "@phosphor-icons/react": "^2.1.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/components/AttentionGlyph.stories.tsx

@@ -0,0 +1,52 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import '@dxosTheme';
+
+import React from 'react';
+
+import { withTheme } from '@dxos/storybook-utils';
+
+import { AttentionGlyph } from './AttentionGlyph';
+
+type StorybookAttentionGlyphProps = {
+  current?: boolean;
+  attention?: boolean;
+};
+
+const StorybookAttentionGlyph = ({ current, attention }: StorybookAttentionGlyphProps) => {
+  const itemAttrs = {
+    ...(current && { 'aria-current': 'page' as const }),
+    ...(attention && { 'data-attention': 'true' }),
+  };
+  return (
+    <ul className='flex gap-2 mbe-2'>
+      <li {...itemAttrs}>
+        <AttentionGlyph presence='none' />
+      </li>
+      <li {...itemAttrs}>
+        <AttentionGlyph presence='one' />
+      </li>
+      <li {...itemAttrs}>
+        <AttentionGlyph presence='many' />
+      </li>
+    </ul>
+  );
+};
+
+export default {
+  title: 'react-ui-deck/AttentionGlyph',
+  component: StorybookAttentionGlyph,
+  decorators: [withTheme],
+};
+
+export const Default = {
+  args: {},
+};
+export const Current = {
+  args: { current: true },
+};
+export const Attention = {
+  args: { current: true, attention: true },
+};

package/src/components/AttentionGlyph.tsx

@@ -0,0 +1,89 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { Minus } from '@phosphor-icons/react';
+import { type Primitive } from '@radix-ui/react-primitive';
+import React, { type ComponentPropsWithRef, forwardRef } from 'react';
+
+import { type ThemedClassName } from '@dxos/react-ui';
+import { focusRing, mx } from '@dxos/react-ui-theme';
+
+const attentionGlyphStyles =
+  'inline-block rounded-sm is-3 bs-3 bg-transparent fg-accent transition-colors [[aria-current]_&]:surface-unAccent [[aria-current]_&]:fg-inverse [[data-attention=true]_&]:surface-accent [[data-attention=true]_&]:fg-inverse [[aria-current][data-attention=true]_&]:surface-accent [[aria-current][data-attention=true]_&]:fg-inverse';
+
+const closeIconStyles =
+  'hidden is-3 bs-3 group-[[aria-current]_&:hover]/attentionGlyphButton:block group-[[aria-current]_&:focus]/attentionGlyphButton:block group-[[data-attention=true]_&:hover]/attentionGlyphButton:block group-[[data-attention=true]_&:focus]/attentionGlyphButton:block group-[[aria-current][data-attention=true]_&:hover]/attentionGlyphButton:block group-[[aria-current][data-attention=true]_&:focus]/attentionGlyphButton:block';
+
+const 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';
+
+const PresenceOne = () => {
+  return (
+    <svg
+      width='12'
+      height='12'
+      viewBox='0 0 12 12'
+      className={presenceIconStyles}
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <circle cx='6' cy='6' r='2.5' fill='currentColor' />
+    </svg>
+  );
+};
+
+const PresenceMany = () => {
+  return (
+    <svg
+      width='12'
+      height='12'
+      viewBox='0 0 12 12'
+      className={presenceIconStyles}
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <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'
+      />
+      <circle cx='4.25' cy='6' r='2.5' fill='currentColor' />
+    </svg>
+  );
+};
+
+export type AttentionGlyphProps = {
+  presence?: 'none' | 'one' | 'many';
+} & ThemedClassName<Omit<ComponentPropsWithRef<typeof Primitive.span>, 'children'>>;
+
+export const AttentionGlyph = forwardRef<HTMLSpanElement, AttentionGlyphProps>(
+  ({ presence, classNames, ...props }, forwardedRef) => {
+    return (
+      <span role='none' {...props} className={mx(attentionGlyphStyles, classNames)} ref={forwardedRef}>
+        {presence === 'many' && <PresenceMany />}
+        {presence === 'one' && <PresenceOne />}
+      </span>
+    );
+  },
+);
+
+export const AttentionGlyphCloseButton = forwardRef<HTMLButtonElement, AttentionGlyphProps>(
+  ({ presence, classNames, ...props }, forwardedRef) => {
+    return (
+      <button
+        {...props}
+        className={mx(
+          attentionGlyphStyles,
+          focusRing,
+          'group/attentionGlyphButton pointer-events-none [[aria-current]_&]:pointer-events-auto [[data-attention=true]_&]:pointer-events-auto [[aria-current][data-attention=true]_&]:pointer-events-auto',
+          classNames,
+        )}
+        ref={forwardedRef}
+      >
+        {presence === 'many' && <PresenceMany />}
+        {presence === 'one' && <PresenceOne />}
+        <Minus weight='bold' className={closeIconStyles} />
+      </button>
+    );
+  },
+);

package/src/components/AttentionProvider.tsx

@@ -0,0 +1,102 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+// NOTE(thure): The following unused imports quell TS2742 (“likely not portable”).
+
+// eslint-disable-next-line unused-imports/no-unused-imports
+import { createContext, type Scope, type CreateScope } from '@radix-ui/react-context';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+// eslint-disable-next-line unused-imports/no-unused-imports
+import React, { ComponentProps, type FocusEvent, type HTMLAttributes, type PropsWithChildren, useState } from 'react';
+
+const ATTENTION_NAME = 'Attention';
+
+type AttentionContextValue = {
+  attended: Set<string>;
+};
+
+const [AttentionContextProvider, useAttentionContext] = createContext<AttentionContextValue>(ATTENTION_NAME, {
+  attended: new Set(),
+});
+
+const useHasAttention = (attendableId?: string) => {
+  const { attended } = useAttentionContext(ATTENTION_NAME);
+  return attendableId ? attended.has(attendableId) : false;
+};
+
+/**
+ * Computes HTML element attributes to apply so the attention system can detect changes
+ * @param attendableId
+ */
+const useAttendable = (attendableId?: string) => {
+  return { 'data-attendable-id': attendableId };
+};
+
+/**
+ * Accumulates all attendable id’s between the element provided and the root, inclusive.
+ */
+const getAttendables = (selector: string, cursor: Element, acc: string[] = []): string[] => {
+  // Find the closest element with `data-attendable-id`, if any; start from cursor and move up the DOM tree.
+  const closestAttendable = cursor.closest(selector);
+  if (!closestAttendable) {
+    return acc;
+  } else {
+    const attendableId = closestAttendable.getAttribute('data-attendable-id');
+    if (!attendableId) {
+      // this has an id of an aria-controls elsewhere on the page, move cursor to that trigger
+      const trigger = document.querySelector(`[aria-controls="${closestAttendable.getAttribute('id')}"]`);
+      if (!trigger) {
+        return acc;
+      } else {
+        return getAttendables(selector, trigger, acc);
+      }
+    } else {
+      acc.push(attendableId);
+      // (attempt tail recursion)
+      return !closestAttendable.parentElement ? acc : getAttendables(selector, closestAttendable.parentElement, acc);
+    }
+  }
+};
+
+const AttentionProvider = ({
+  children,
+  attended: propsAttended,
+  defaultAttended,
+  onChangeAttend,
+}: PropsWithChildren<
+  Partial<{
+    attended: Set<string>;
+    onChangeAttend: (nextAttended: Set<string>) => void;
+    defaultAttended: Set<string>;
+  }>
+>) => {
+  const [attended = new Set(), setAttended] = useControllableState<Set<string>>({
+    prop: propsAttended,
+    defaultProp: defaultAttended,
+    onChange: onChangeAttend,
+  });
+  const handleFocus = (event: FocusEvent) => {
+    const selector = [
+      '[data-attendable-id]',
+      ...Array.from(document.querySelectorAll('[aria-controls]')).map(
+        (el) => `[id="${el.getAttribute('aria-controls')}"]`,
+      ),
+    ].join(',');
+    const nextAttended = new Set(getAttendables(selector, event.target));
+    const [prev, next] = [Array.from(attended), Array.from(nextAttended)];
+    // Only update state if the result is different.
+    (prev.length !== next.length || !!prev.find((id, index) => next[index] !== id)) && setAttended(nextAttended);
+  };
+  return (
+    <AttentionContextProvider attended={attended}>
+      <div role='none' className='contents' onFocusCapture={handleFocus}>
+        {children}
+      </div>
+    </AttentionContextProvider>
+  );
+};
+
+export { AttentionProvider, useAttentionContext, useHasAttention, useAttendable, ATTENTION_NAME };
+
+export type { AttentionContextValue };

package/src/components/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './AttentionGlyph';
+export * from './AttentionProvider';

package/src/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './components';