@dxos/react-ui-attention 0.8.4-main.d05539e30a → 0.8.4-main.d9fc60f731
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/lib/browser/index.mjs +78 -1
- package/dist/lib/browser/index.mjs.map +4 -4
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/node-esm/index.mjs +78 -1
- package/dist/lib/node-esm/index.mjs.map +4 -4
- package/dist/lib/node-esm/meta.json +1 -1
- package/dist/types/src/index.d.ts +1 -0
- package/dist/types/src/index.d.ts.map +1 -1
- package/dist/types/src/useArticleKeyboardNavigation.d.ts +42 -0
- package/dist/types/src/useArticleKeyboardNavigation.d.ts.map +1 -0
- package/dist/types/src/useArticleKeyboardNavigation.test.d.ts +2 -0
- package/dist/types/src/useArticleKeyboardNavigation.test.d.ts.map +1 -0
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +16 -15
- package/src/components/AttentionGlyph/AttentionGlyph.tsx +6 -6
- package/src/index.ts +1 -0
- package/src/useArticleKeyboardNavigation.test.ts +50 -0
- package/src/useArticleKeyboardNavigation.ts +116 -0
|
@@ -29,7 +29,7 @@ import {
|
|
|
29
29
|
import React, { forwardRef, useMemo } from "react";
|
|
30
30
|
import { Icon } from "@dxos/react-ui";
|
|
31
31
|
import { mx } from "@dxos/ui-theme";
|
|
32
|
-
var attentionGlyphStyles = mx("inline-block rounded-xs w-3 h-3 bg-transparent text-accent-text transition-colors", "[[data-contains-attended=true]_&]:bg-attention-contains", "[[data-attention=true]_&]:bg-accent-
|
|
32
|
+
var attentionGlyphStyles = mx("inline-block rounded-xs w-3 h-3 bg-transparent text-accent-text transition-colors", "[[data-contains-attended=true]_&]:bg-attention-contains", "[[data-attention=true]_&]:bg-accent-bg", "[[data-attention=true]_&]:text-accent-fg", "[[aria-current][data-attention=true]_&]:bg-accent-bg", "[[aria-current][data-attention=true]_&]:text-accent-fg", '[[aria-selected="true"][data-attention=true]_&]:bg-accent-bg', '[[aria-selected="true"][data-attention=true]_&]:text-accent-fg');
|
|
33
33
|
var presenceIconStyles = mx("w-3 h-3");
|
|
34
34
|
var PresenceOne = () => {
|
|
35
35
|
return /* @__PURE__ */ React.createElement("svg", {
|
|
@@ -92,6 +92,81 @@ var AttentionGlyph = /* @__PURE__ */ forwardRef(({ presence, attended, syncing,
|
|
|
92
92
|
ref: forwardedRef
|
|
93
93
|
}, icon));
|
|
94
94
|
});
|
|
95
|
+
|
|
96
|
+
// src/useArticleKeyboardNavigation.ts
|
|
97
|
+
import { useEffect, useMemo as useMemo2 } from "react";
|
|
98
|
+
import { Keyboard } from "@dxos/keyboard";
|
|
99
|
+
var advance = ({ ids, currentId, delta }) => {
|
|
100
|
+
if (ids.length === 0) {
|
|
101
|
+
return void 0;
|
|
102
|
+
}
|
|
103
|
+
const idx = currentId ? ids.indexOf(currentId) : -1;
|
|
104
|
+
if (idx === -1) {
|
|
105
|
+
return delta === 1 ? ids[0] : ids[ids.length - 1];
|
|
106
|
+
}
|
|
107
|
+
const next = Math.max(0, Math.min(ids.length - 1, idx + delta));
|
|
108
|
+
return ids[next];
|
|
109
|
+
};
|
|
110
|
+
var useArticleKeyboardNavigation = ({ articleId, items, currentId, getId, onSelect }) => {
|
|
111
|
+
const { hasAttention } = useAttention(articleId);
|
|
112
|
+
const ids = useMemo2(() => items.map((item) => getId ? getId(item) : item.id), [
|
|
113
|
+
items,
|
|
114
|
+
getId
|
|
115
|
+
]);
|
|
116
|
+
useEffect(() => {
|
|
117
|
+
if (!hasAttention) {
|
|
118
|
+
return;
|
|
119
|
+
}
|
|
120
|
+
const context = Keyboard.singleton.getContext(articleId);
|
|
121
|
+
const prevContext = Keyboard.singleton.getCurrentContext();
|
|
122
|
+
Keyboard.singleton.setCurrentContext(articleId);
|
|
123
|
+
const nextBinding = {
|
|
124
|
+
shortcut: "j",
|
|
125
|
+
handler: () => {
|
|
126
|
+
const target = advance({
|
|
127
|
+
ids,
|
|
128
|
+
currentId,
|
|
129
|
+
delta: 1
|
|
130
|
+
});
|
|
131
|
+
if (target !== void 0) {
|
|
132
|
+
onSelect(target);
|
|
133
|
+
}
|
|
134
|
+
},
|
|
135
|
+
data: "Next item",
|
|
136
|
+
disableInput: true
|
|
137
|
+
};
|
|
138
|
+
const prevBinding = {
|
|
139
|
+
shortcut: "k",
|
|
140
|
+
handler: () => {
|
|
141
|
+
const target = advance({
|
|
142
|
+
ids,
|
|
143
|
+
currentId,
|
|
144
|
+
delta: -1
|
|
145
|
+
});
|
|
146
|
+
if (target !== void 0) {
|
|
147
|
+
onSelect(target);
|
|
148
|
+
}
|
|
149
|
+
},
|
|
150
|
+
data: "Previous item",
|
|
151
|
+
disableInput: true
|
|
152
|
+
};
|
|
153
|
+
context.bind(nextBinding);
|
|
154
|
+
context.bind(prevBinding);
|
|
155
|
+
return () => {
|
|
156
|
+
context.unbind("j");
|
|
157
|
+
context.unbind("k");
|
|
158
|
+
if (Keyboard.singleton.getCurrentContext() === articleId) {
|
|
159
|
+
Keyboard.singleton.setCurrentContext(prevContext);
|
|
160
|
+
}
|
|
161
|
+
};
|
|
162
|
+
}, [
|
|
163
|
+
articleId,
|
|
164
|
+
ids,
|
|
165
|
+
currentId,
|
|
166
|
+
onSelect,
|
|
167
|
+
hasAttention
|
|
168
|
+
]);
|
|
169
|
+
};
|
|
95
170
|
export {
|
|
96
171
|
AttendableContainer,
|
|
97
172
|
AttentionGlyph,
|
|
@@ -101,6 +176,7 @@ export {
|
|
|
101
176
|
SelectionProvider,
|
|
102
177
|
SelectionSchema,
|
|
103
178
|
Syncing,
|
|
179
|
+
advance,
|
|
104
180
|
defaultSelection,
|
|
105
181
|
expandAttendableId,
|
|
106
182
|
getAttendables,
|
|
@@ -110,6 +186,7 @@ export {
|
|
|
110
186
|
getSelectionSet,
|
|
111
187
|
isLinkedSegment,
|
|
112
188
|
linkedSegment,
|
|
189
|
+
useArticleKeyboardNavigation,
|
|
113
190
|
useAttended,
|
|
114
191
|
useAttention,
|
|
115
192
|
useAttentionAttributes,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../../src/components/AttentionGlyph/AttentionGlyph.tsx"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { type Primitive } from '@radix-ui/react-primitive';\nimport React, { type CSSProperties, type ComponentPropsWithRef, forwardRef, useMemo } from 'react';\n\nimport { Icon, type ThemedClassName } from '@dxos/react-ui';\nimport { mx } from '@dxos/ui-theme';\n\nconst attentionGlyphStyles = mx(\n 'inline-block rounded-xs w-3 h-3 bg-transparent text-accent-text transition-colors',\n '[[data-contains-attended=true]_&]:bg-attention-contains',\n '[[data-attention=true]_&]:bg-accent-
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,OAAOA,SAAyDC,YAAYC,eAAe;AAE3F,SAASC,YAAkC;AAC3C,SAASC,UAAU;AAEnB,IAAMC,uBAAuBD,GAC3B,qFACA,2DACA
|
|
6
|
-
"names": ["React", "forwardRef", "useMemo", "Icon", "mx", "attentionGlyphStyles", "presenceIconStyles", "PresenceOne", "svg", "width", "height", "viewBox", "className", "fill", "xmlns", "circle", "cx", "cy", "r", "PresenceMany", "path", "d", "Syncing", "animationProps", "animationDelay", "Date", "now", "div", "role", "icon", "size", "style", "classNames", "AttentionGlyph", "presence", "attended", "syncing", "containsAttended", "props", "forwardedRef", "data-attention", "data-contains-attended", "span", "ref"]
|
|
3
|
+
"sources": ["../../../src/components/AttentionGlyph/AttentionGlyph.tsx", "../../../src/useArticleKeyboardNavigation.ts"],
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { type Primitive } from '@radix-ui/react-primitive';\nimport React, { type CSSProperties, type ComponentPropsWithRef, forwardRef, useMemo } from 'react';\n\nimport { Icon, type ThemedClassName } from '@dxos/react-ui';\nimport { mx } from '@dxos/ui-theme';\n\nconst attentionGlyphStyles = mx(\n 'inline-block rounded-xs w-3 h-3 bg-transparent text-accent-text transition-colors',\n '[[data-contains-attended=true]_&]:bg-attention-contains',\n '[[data-attention=true]_&]:bg-accent-bg',\n '[[data-attention=true]_&]:text-accent-fg',\n '[[aria-current][data-attention=true]_&]:bg-accent-bg',\n '[[aria-current][data-attention=true]_&]:text-accent-fg',\n '[[aria-selected=\"true\"][data-attention=true]_&]:bg-accent-bg',\n '[[aria-selected=\"true\"][data-attention=true]_&]:text-accent-fg',\n);\n\nconst presenceIconStyles = mx('w-3 h-3');\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 const Syncing = () => {\n const animationProps = useMemo<CSSProperties>(\n () => ({\n // Synchronize animations.\n animationDelay: `-${Date.now() % 2_000}ms`,\n }),\n [],\n );\n\n return (\n <div role='status' className='flex items-center'>\n <Icon\n icon='ph--circle-notch--bold'\n size={3}\n style={animationProps}\n classNames='text-subdued animate-[spin_2s_linear_infinite]'\n />\n </div>\n );\n};\n\nexport type AttentionGlyphProps = {\n attended?: boolean;\n containsAttended?: boolean;\n syncing?: boolean;\n presence?: 'none' | 'one' | 'many';\n} & ThemedClassName<Omit<ComponentPropsWithRef<typeof Primitive.span>, 'children'>>;\n\nexport const AttentionGlyph = forwardRef<HTMLSpanElement, AttentionGlyphProps>(\n ({ presence, attended, syncing, containsAttended, classNames, ...props }, forwardedRef) => {\n const icon = syncing ? (\n <Syncing />\n ) : presence === 'many' ? (\n <PresenceMany />\n ) : presence === 'one' ? (\n <PresenceOne />\n ) : null;\n\n return (\n <div className='flex group' data-attention={attended} data-contains-attended={containsAttended}>\n <span role='none' {...props} className={mx(attentionGlyphStyles, classNames)} ref={forwardedRef}>\n {icon}\n </span>\n </div>\n );\n },\n);\n", "//\n// Copyright 2026 DXOS.org\n//\n\nimport { useEffect, useMemo } from 'react';\n\nimport { Keyboard } from '@dxos/keyboard';\n\nimport { useAttention } from './components';\n\n/**\n * Compute the id to select after pressing 'j' (delta = 1) or 'k' (delta = -1).\n * Clamps at the list ends — pressing 'j' on the last item keeps the last item\n * selected (vim-style), and 'k' on the first item keeps the first.\n *\n * When no current selection exists, returns the first id (for delta = 1) or the\n * last id (for delta = -1) so the user can enter the list with either key.\n */\nexport const advance = ({\n ids,\n currentId,\n delta,\n}: {\n ids: readonly string[];\n currentId: string | undefined;\n delta: 1 | -1;\n}): string | undefined => {\n if (ids.length === 0) {\n return undefined;\n }\n\n const idx = currentId ? ids.indexOf(currentId) : -1;\n if (idx === -1) {\n return delta === 1 ? ids[0] : ids[ids.length - 1];\n }\n\n const next = Math.max(0, Math.min(ids.length - 1, idx + delta));\n return ids[next];\n};\n\nexport type UseArticleKeyboardNavigationOptions<T> = {\n /** Stable id for the article (used as the keyboard context path). */\n articleId: string;\n /** Ordered list of selectable items as they appear in the article. */\n items: readonly T[];\n /** Currently-selected id, if any. */\n currentId: string | undefined;\n /** Extracts the id from an item. Defaults to `item.id`. */\n getId?: (item: T) => string;\n /** Called with the id to select when the user presses 'j' or 'k'. */\n onSelect: (id: string) => void;\n};\n\n/**\n * Wire 'j' (next) and 'k' (previous) keyboard shortcuts for an article that\n * navigates a list of items (e.g., messages, events). Bindings are scoped to\n * the article's keyboard context so they only fire while the article has attention.\n *\n * Pass the items directly; ids are derived via `getId` (defaults to `item.id`).\n * Clamps at list boundaries. Active only when the article is attended.\n */\nexport const useArticleKeyboardNavigation: {\n <T extends { id: string }>(options: UseArticleKeyboardNavigationOptions<T>): void;\n <T>(options: UseArticleKeyboardNavigationOptions<T> & { getId: (item: T) => string }): void;\n} = <T>({ articleId, items, currentId, getId, onSelect }: UseArticleKeyboardNavigationOptions<T>): void => {\n const { hasAttention } = useAttention(articleId);\n\n // `getId` is optional only when `T extends { id: string }` (enforced by the overloads above),\n // so the fallback is sound; the cast bridges the generic erased by the implementation signature.\n const ids = useMemo(() => items.map((item) => (getId ? getId(item) : (item as { id: string }).id)), [items, getId]);\n\n useEffect(() => {\n if (!hasAttention) {\n return;\n }\n\n const context = Keyboard.singleton.getContext(articleId);\n const prevContext = Keyboard.singleton.getCurrentContext();\n Keyboard.singleton.setCurrentContext(articleId);\n\n const nextBinding = {\n shortcut: 'j',\n handler: () => {\n const target = advance({ ids, currentId, delta: 1 });\n if (target !== undefined) {\n onSelect(target);\n }\n },\n data: 'Next item',\n disableInput: true,\n };\n const prevBinding = {\n shortcut: 'k',\n handler: () => {\n const target = advance({ ids, currentId, delta: -1 });\n if (target !== undefined) {\n onSelect(target);\n }\n },\n data: 'Previous item',\n disableInput: true,\n };\n\n context.bind(nextBinding);\n context.bind(prevBinding);\n\n return () => {\n context.unbind('j');\n context.unbind('k');\n // Restore the prior context if we were the ones who set it.\n if (Keyboard.singleton.getCurrentContext() === articleId) {\n Keyboard.singleton.setCurrentContext(prevContext);\n }\n };\n }, [articleId, ids, currentId, onSelect, hasAttention]);\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["React", "forwardRef", "useMemo", "Icon", "mx", "attentionGlyphStyles", "presenceIconStyles", "PresenceOne", "svg", "width", "height", "viewBox", "className", "fill", "xmlns", "circle", "cx", "cy", "r", "PresenceMany", "path", "d", "Syncing", "animationProps", "animationDelay", "Date", "now", "div", "role", "icon", "size", "style", "classNames", "AttentionGlyph", "presence", "attended", "syncing", "containsAttended", "props", "forwardedRef", "data-attention", "data-contains-attended", "span", "ref", "useEffect", "useMemo", "Keyboard", "advance", "ids", "currentId", "delta", "length", "undefined", "idx", "indexOf", "next", "Math", "max", "min", "useArticleKeyboardNavigation", "articleId", "items", "getId", "onSelect", "hasAttention", "useAttention", "useMemo", "map", "item", "id", "useEffect", "context", "Keyboard", "singleton", "getContext", "prevContext", "getCurrentContext", "setCurrentContext", "nextBinding", "shortcut", "handler", "target", "data", "disableInput", "prevBinding", "bind", "unbind"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"src/attention.ts":{"bytes":25933,"imports":[{"path":"@effect-atom/atom-react","kind":"import-statement","external":true}],"format":"esm"},"src/components/AttentionGlyph/AttentionGlyph.tsx":{"bytes":
|
|
1
|
+
{"inputs":{"src/attention.ts":{"bytes":25933,"imports":[{"path":"@effect-atom/atom-react","kind":"import-statement","external":true}],"format":"esm"},"src/components/AttentionGlyph/AttentionGlyph.tsx":{"bytes":9829,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/ui-theme","kind":"import-statement","external":true}],"format":"esm"},"src/components/AttentionGlyph/index.ts":{"bytes":394,"imports":[{"path":"src/components/AttentionGlyph/AttentionGlyph.tsx","kind":"import-statement","original":"./AttentionGlyph"}],"format":"esm"},"src/components/AttentionProvider/AttentionProvider.tsx":{"bytes":18161,"imports":[{"path":"@effect-atom/atom-react","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"@radix-ui/react-primitive","kind":"import-statement","external":true},{"path":"@radix-ui/react-slot","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/log","kind":"import-statement","external":true},{"path":"@dxos/react-hooks","kind":"import-statement","external":true},{"path":"@dxos/ui-theme","kind":"import-statement","external":true},{"path":"src/attention.ts","kind":"import-statement","original":"../../attention"}],"format":"esm"},"src/components/AttentionProvider/index.ts":{"bytes":401,"imports":[{"path":"src/components/AttentionProvider/AttentionProvider.tsx","kind":"import-statement","original":"./AttentionProvider"}],"format":"esm"},"src/selection.ts":{"bytes":27361,"imports":[{"path":"@effect-atom/atom-react","kind":"import-statement","external":true},{"path":"effect/Match","kind":"import-statement","external":true},{"path":"effect/Schema","kind":"import-statement","external":true},{"path":"@dxos/invariant","kind":"import-statement","external":true}],"format":"esm"},"src/components/SelectionProvider/SelectionProvider.tsx":{"bytes":16598,"imports":[{"path":"@effect-atom/atom-react","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"effect/Match","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-hooks","kind":"import-statement","external":true},{"path":"src/selection.ts","kind":"import-statement","original":"../../selection"}],"format":"esm"},"src/components/SelectionProvider/index.ts":{"bytes":401,"imports":[{"path":"src/components/SelectionProvider/SelectionProvider.tsx","kind":"import-statement","original":"./SelectionProvider"}],"format":"esm"},"src/components/index.ts":{"bytes":616,"imports":[{"path":"src/components/AttentionGlyph/index.ts","kind":"import-statement","original":"./AttentionGlyph"},{"path":"src/components/AttentionProvider/index.ts","kind":"import-statement","original":"./AttentionProvider"},{"path":"src/components/SelectionProvider/index.ts","kind":"import-statement","original":"./SelectionProvider"}],"format":"esm"},"src/useArticleKeyboardNavigation.ts":{"bytes":11610,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/keyboard","kind":"import-statement","external":true},{"path":"src/components/index.ts","kind":"import-statement","original":"./components"}],"format":"esm"},"src/index.ts":{"bytes":700,"imports":[{"path":"src/attention.ts","kind":"import-statement","original":"./attention"},{"path":"src/components/index.ts","kind":"import-statement","original":"./components"},{"path":"src/selection.ts","kind":"import-statement","original":"./selection"},{"path":"src/useArticleKeyboardNavigation.ts","kind":"import-statement","original":"./useArticleKeyboardNavigation"}],"format":"esm"},"src/testing/decorators/withAttention.ts":{"bytes":3505,"imports":[{"path":"@effect-atom/atom-react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"src/attention.ts","kind":"import-statement","original":"../../attention"},{"path":"src/components/index.ts","kind":"import-statement","original":"../../components"}],"format":"esm"},"src/testing/decorators/index.ts":{"bytes":389,"imports":[{"path":"src/testing/decorators/withAttention.ts","kind":"import-statement","original":"./withAttention"}],"format":"esm"},"src/testing/index.ts":{"bytes":382,"imports":[{"path":"src/testing/decorators/index.ts","kind":"import-statement","original":"./decorators"}],"format":"esm"},"src/types/index.ts":{"bytes":1067,"imports":[{"path":"src/attention.ts","kind":"import-statement","original":"../attention"},{"path":"src/selection.ts","kind":"import-statement","original":"../selection"}],"format":"esm"}},"outputs":{"dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":11039},"dist/lib/browser/index.mjs":{"imports":[{"path":"dist/lib/browser/chunk-I4VO2RQM.mjs","kind":"import-statement"},{"path":"dist/lib/browser/chunk-D2BLVJ6Z.mjs","kind":"import-statement"},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/ui-theme","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/keyboard","kind":"import-statement","external":true}],"exports":["AttendableContainer","AttentionGlyph","AttentionManager","RootAttentionProvider","SelectionManager","SelectionProvider","SelectionSchema","Syncing","advance","defaultSelection","expandAttendableId","getAttendables","getLinkedVariant","getParentId","getSegmentId","getSelectionSet","isLinkedSegment","linkedSegment","useArticleKeyboardNavigation","useAttended","useAttention","useAttentionAttributes","useAttentionContext","useSelected","useSelectionActions","useSelectionManager"],"entryPoint":"src/index.ts","inputs":{"src/index.ts":{"bytesInOutput":0},"src/components/AttentionGlyph/AttentionGlyph.tsx":{"bytesInOutput":2929},"src/useArticleKeyboardNavigation.ts":{"bytesInOutput":1896}},"bytes":5984},"dist/lib/browser/testing/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":1875},"dist/lib/browser/testing/index.mjs":{"imports":[{"path":"dist/lib/browser/chunk-I4VO2RQM.mjs","kind":"import-statement"},{"path":"dist/lib/browser/chunk-D2BLVJ6Z.mjs","kind":"import-statement"},{"path":"@effect-atom/atom-react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"exports":["withAttention"],"entryPoint":"src/testing/index.ts","inputs":{"src/testing/decorators/withAttention.ts":{"bytesInOutput":610},"src/testing/index.ts":{"bytesInOutput":0}},"bytes":863},"dist/lib/browser/chunk-I4VO2RQM.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":17646},"dist/lib/browser/chunk-I4VO2RQM.mjs":{"imports":[{"path":"dist/lib/browser/chunk-D2BLVJ6Z.mjs","kind":"import-statement"},{"path":"@effect-atom/atom-react","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"@radix-ui/react-primitive","kind":"import-statement","external":true},{"path":"@radix-ui/react-slot","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/log","kind":"import-statement","external":true},{"path":"@dxos/react-hooks","kind":"import-statement","external":true},{"path":"@dxos/ui-theme","kind":"import-statement","external":true},{"path":"@effect-atom/atom-react","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"effect/Match","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-hooks","kind":"import-statement","external":true}],"exports":["AttendableContainer","RootAttentionProvider","SelectionProvider","useAttended","useAttention","useAttentionAttributes","useAttentionContext","useSelected","useSelectionActions","useSelectionManager"],"inputs":{"src/components/AttentionProvider/AttentionProvider.tsx":{"bytesInOutput":3786},"src/components/SelectionProvider/SelectionProvider.tsx":{"bytesInOutput":3529}},"bytes":7816},"dist/lib/browser/types/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":93},"dist/lib/browser/types/index.mjs":{"imports":[{"path":"dist/lib/browser/chunk-D2BLVJ6Z.mjs","kind":"import-statement"}],"exports":["AttentionManager","SelectionManager","SelectionSchema","defaultSelection","expandAttendableId","getAttendables","getLinkedVariant","getParentId","getSegmentId","getSelectionSet","isLinkedSegment","linkedSegment"],"entryPoint":"src/types/index.ts","inputs":{"src/types/index.ts":{"bytesInOutput":0}},"bytes":536},"dist/lib/browser/chunk-D2BLVJ6Z.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":25344},"dist/lib/browser/chunk-D2BLVJ6Z.mjs":{"imports":[{"path":"@effect-atom/atom-react","kind":"import-statement","external":true},{"path":"@effect-atom/atom-react","kind":"import-statement","external":true},{"path":"effect/Match","kind":"import-statement","external":true},{"path":"effect/Schema","kind":"import-statement","external":true},{"path":"@dxos/invariant","kind":"import-statement","external":true}],"exports":["AttentionManager","SelectionManager","SelectionSchema","defaultSelection","expandAttendableId","getAttendables","getLinkedVariant","getParentId","getSegmentId","getSelectionSet","isLinkedSegment","linkedSegment"],"inputs":{"src/attention.ts":{"bytesInOutput":5433},"src/selection.ts":{"bytesInOutput":6966}},"bytes":12721}}}
|
|
@@ -30,7 +30,7 @@ import {
|
|
|
30
30
|
import React, { forwardRef, useMemo } from "react";
|
|
31
31
|
import { Icon } from "@dxos/react-ui";
|
|
32
32
|
import { mx } from "@dxos/ui-theme";
|
|
33
|
-
var attentionGlyphStyles = mx("inline-block rounded-xs w-3 h-3 bg-transparent text-accent-text transition-colors", "[[data-contains-attended=true]_&]:bg-attention-contains", "[[data-attention=true]_&]:bg-accent-
|
|
33
|
+
var attentionGlyphStyles = mx("inline-block rounded-xs w-3 h-3 bg-transparent text-accent-text transition-colors", "[[data-contains-attended=true]_&]:bg-attention-contains", "[[data-attention=true]_&]:bg-accent-bg", "[[data-attention=true]_&]:text-accent-fg", "[[aria-current][data-attention=true]_&]:bg-accent-bg", "[[aria-current][data-attention=true]_&]:text-accent-fg", '[[aria-selected="true"][data-attention=true]_&]:bg-accent-bg', '[[aria-selected="true"][data-attention=true]_&]:text-accent-fg');
|
|
34
34
|
var presenceIconStyles = mx("w-3 h-3");
|
|
35
35
|
var PresenceOne = () => {
|
|
36
36
|
return /* @__PURE__ */ React.createElement("svg", {
|
|
@@ -93,6 +93,81 @@ var AttentionGlyph = /* @__PURE__ */ forwardRef(({ presence, attended, syncing,
|
|
|
93
93
|
ref: forwardedRef
|
|
94
94
|
}, icon));
|
|
95
95
|
});
|
|
96
|
+
|
|
97
|
+
// src/useArticleKeyboardNavigation.ts
|
|
98
|
+
import { useEffect, useMemo as useMemo2 } from "react";
|
|
99
|
+
import { Keyboard } from "@dxos/keyboard";
|
|
100
|
+
var advance = ({ ids, currentId, delta }) => {
|
|
101
|
+
if (ids.length === 0) {
|
|
102
|
+
return void 0;
|
|
103
|
+
}
|
|
104
|
+
const idx = currentId ? ids.indexOf(currentId) : -1;
|
|
105
|
+
if (idx === -1) {
|
|
106
|
+
return delta === 1 ? ids[0] : ids[ids.length - 1];
|
|
107
|
+
}
|
|
108
|
+
const next = Math.max(0, Math.min(ids.length - 1, idx + delta));
|
|
109
|
+
return ids[next];
|
|
110
|
+
};
|
|
111
|
+
var useArticleKeyboardNavigation = ({ articleId, items, currentId, getId, onSelect }) => {
|
|
112
|
+
const { hasAttention } = useAttention(articleId);
|
|
113
|
+
const ids = useMemo2(() => items.map((item) => getId ? getId(item) : item.id), [
|
|
114
|
+
items,
|
|
115
|
+
getId
|
|
116
|
+
]);
|
|
117
|
+
useEffect(() => {
|
|
118
|
+
if (!hasAttention) {
|
|
119
|
+
return;
|
|
120
|
+
}
|
|
121
|
+
const context = Keyboard.singleton.getContext(articleId);
|
|
122
|
+
const prevContext = Keyboard.singleton.getCurrentContext();
|
|
123
|
+
Keyboard.singleton.setCurrentContext(articleId);
|
|
124
|
+
const nextBinding = {
|
|
125
|
+
shortcut: "j",
|
|
126
|
+
handler: () => {
|
|
127
|
+
const target = advance({
|
|
128
|
+
ids,
|
|
129
|
+
currentId,
|
|
130
|
+
delta: 1
|
|
131
|
+
});
|
|
132
|
+
if (target !== void 0) {
|
|
133
|
+
onSelect(target);
|
|
134
|
+
}
|
|
135
|
+
},
|
|
136
|
+
data: "Next item",
|
|
137
|
+
disableInput: true
|
|
138
|
+
};
|
|
139
|
+
const prevBinding = {
|
|
140
|
+
shortcut: "k",
|
|
141
|
+
handler: () => {
|
|
142
|
+
const target = advance({
|
|
143
|
+
ids,
|
|
144
|
+
currentId,
|
|
145
|
+
delta: -1
|
|
146
|
+
});
|
|
147
|
+
if (target !== void 0) {
|
|
148
|
+
onSelect(target);
|
|
149
|
+
}
|
|
150
|
+
},
|
|
151
|
+
data: "Previous item",
|
|
152
|
+
disableInput: true
|
|
153
|
+
};
|
|
154
|
+
context.bind(nextBinding);
|
|
155
|
+
context.bind(prevBinding);
|
|
156
|
+
return () => {
|
|
157
|
+
context.unbind("j");
|
|
158
|
+
context.unbind("k");
|
|
159
|
+
if (Keyboard.singleton.getCurrentContext() === articleId) {
|
|
160
|
+
Keyboard.singleton.setCurrentContext(prevContext);
|
|
161
|
+
}
|
|
162
|
+
};
|
|
163
|
+
}, [
|
|
164
|
+
articleId,
|
|
165
|
+
ids,
|
|
166
|
+
currentId,
|
|
167
|
+
onSelect,
|
|
168
|
+
hasAttention
|
|
169
|
+
]);
|
|
170
|
+
};
|
|
96
171
|
export {
|
|
97
172
|
AttendableContainer,
|
|
98
173
|
AttentionGlyph,
|
|
@@ -102,6 +177,7 @@ export {
|
|
|
102
177
|
SelectionProvider,
|
|
103
178
|
SelectionSchema,
|
|
104
179
|
Syncing,
|
|
180
|
+
advance,
|
|
105
181
|
defaultSelection,
|
|
106
182
|
expandAttendableId,
|
|
107
183
|
getAttendables,
|
|
@@ -111,6 +187,7 @@ export {
|
|
|
111
187
|
getSelectionSet,
|
|
112
188
|
isLinkedSegment,
|
|
113
189
|
linkedSegment,
|
|
190
|
+
useArticleKeyboardNavigation,
|
|
114
191
|
useAttended,
|
|
115
192
|
useAttention,
|
|
116
193
|
useAttentionAttributes,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../../src/components/AttentionGlyph/AttentionGlyph.tsx"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { type Primitive } from '@radix-ui/react-primitive';\nimport React, { type CSSProperties, type ComponentPropsWithRef, forwardRef, useMemo } from 'react';\n\nimport { Icon, type ThemedClassName } from '@dxos/react-ui';\nimport { mx } from '@dxos/ui-theme';\n\nconst attentionGlyphStyles = mx(\n 'inline-block rounded-xs w-3 h-3 bg-transparent text-accent-text transition-colors',\n '[[data-contains-attended=true]_&]:bg-attention-contains',\n '[[data-attention=true]_&]:bg-accent-
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,OAAOA,SAAyDC,YAAYC,eAAe;AAE3F,SAASC,YAAkC;AAC3C,SAASC,UAAU;AAEnB,IAAMC,uBAAuBD,GAC3B,qFACA,2DACA
|
|
6
|
-
"names": ["React", "forwardRef", "useMemo", "Icon", "mx", "attentionGlyphStyles", "presenceIconStyles", "PresenceOne", "svg", "width", "height", "viewBox", "className", "fill", "xmlns", "circle", "cx", "cy", "r", "PresenceMany", "path", "d", "Syncing", "animationProps", "animationDelay", "Date", "now", "div", "role", "icon", "size", "style", "classNames", "AttentionGlyph", "presence", "attended", "syncing", "containsAttended", "props", "forwardedRef", "data-attention", "data-contains-attended", "span", "ref"]
|
|
3
|
+
"sources": ["../../../src/components/AttentionGlyph/AttentionGlyph.tsx", "../../../src/useArticleKeyboardNavigation.ts"],
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { type Primitive } from '@radix-ui/react-primitive';\nimport React, { type CSSProperties, type ComponentPropsWithRef, forwardRef, useMemo } from 'react';\n\nimport { Icon, type ThemedClassName } from '@dxos/react-ui';\nimport { mx } from '@dxos/ui-theme';\n\nconst attentionGlyphStyles = mx(\n 'inline-block rounded-xs w-3 h-3 bg-transparent text-accent-text transition-colors',\n '[[data-contains-attended=true]_&]:bg-attention-contains',\n '[[data-attention=true]_&]:bg-accent-bg',\n '[[data-attention=true]_&]:text-accent-fg',\n '[[aria-current][data-attention=true]_&]:bg-accent-bg',\n '[[aria-current][data-attention=true]_&]:text-accent-fg',\n '[[aria-selected=\"true\"][data-attention=true]_&]:bg-accent-bg',\n '[[aria-selected=\"true\"][data-attention=true]_&]:text-accent-fg',\n);\n\nconst presenceIconStyles = mx('w-3 h-3');\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 const Syncing = () => {\n const animationProps = useMemo<CSSProperties>(\n () => ({\n // Synchronize animations.\n animationDelay: `-${Date.now() % 2_000}ms`,\n }),\n [],\n );\n\n return (\n <div role='status' className='flex items-center'>\n <Icon\n icon='ph--circle-notch--bold'\n size={3}\n style={animationProps}\n classNames='text-subdued animate-[spin_2s_linear_infinite]'\n />\n </div>\n );\n};\n\nexport type AttentionGlyphProps = {\n attended?: boolean;\n containsAttended?: boolean;\n syncing?: boolean;\n presence?: 'none' | 'one' | 'many';\n} & ThemedClassName<Omit<ComponentPropsWithRef<typeof Primitive.span>, 'children'>>;\n\nexport const AttentionGlyph = forwardRef<HTMLSpanElement, AttentionGlyphProps>(\n ({ presence, attended, syncing, containsAttended, classNames, ...props }, forwardedRef) => {\n const icon = syncing ? (\n <Syncing />\n ) : presence === 'many' ? (\n <PresenceMany />\n ) : presence === 'one' ? (\n <PresenceOne />\n ) : null;\n\n return (\n <div className='flex group' data-attention={attended} data-contains-attended={containsAttended}>\n <span role='none' {...props} className={mx(attentionGlyphStyles, classNames)} ref={forwardedRef}>\n {icon}\n </span>\n </div>\n );\n },\n);\n", "//\n// Copyright 2026 DXOS.org\n//\n\nimport { useEffect, useMemo } from 'react';\n\nimport { Keyboard } from '@dxos/keyboard';\n\nimport { useAttention } from './components';\n\n/**\n * Compute the id to select after pressing 'j' (delta = 1) or 'k' (delta = -1).\n * Clamps at the list ends — pressing 'j' on the last item keeps the last item\n * selected (vim-style), and 'k' on the first item keeps the first.\n *\n * When no current selection exists, returns the first id (for delta = 1) or the\n * last id (for delta = -1) so the user can enter the list with either key.\n */\nexport const advance = ({\n ids,\n currentId,\n delta,\n}: {\n ids: readonly string[];\n currentId: string | undefined;\n delta: 1 | -1;\n}): string | undefined => {\n if (ids.length === 0) {\n return undefined;\n }\n\n const idx = currentId ? ids.indexOf(currentId) : -1;\n if (idx === -1) {\n return delta === 1 ? ids[0] : ids[ids.length - 1];\n }\n\n const next = Math.max(0, Math.min(ids.length - 1, idx + delta));\n return ids[next];\n};\n\nexport type UseArticleKeyboardNavigationOptions<T> = {\n /** Stable id for the article (used as the keyboard context path). */\n articleId: string;\n /** Ordered list of selectable items as they appear in the article. */\n items: readonly T[];\n /** Currently-selected id, if any. */\n currentId: string | undefined;\n /** Extracts the id from an item. Defaults to `item.id`. */\n getId?: (item: T) => string;\n /** Called with the id to select when the user presses 'j' or 'k'. */\n onSelect: (id: string) => void;\n};\n\n/**\n * Wire 'j' (next) and 'k' (previous) keyboard shortcuts for an article that\n * navigates a list of items (e.g., messages, events). Bindings are scoped to\n * the article's keyboard context so they only fire while the article has attention.\n *\n * Pass the items directly; ids are derived via `getId` (defaults to `item.id`).\n * Clamps at list boundaries. Active only when the article is attended.\n */\nexport const useArticleKeyboardNavigation: {\n <T extends { id: string }>(options: UseArticleKeyboardNavigationOptions<T>): void;\n <T>(options: UseArticleKeyboardNavigationOptions<T> & { getId: (item: T) => string }): void;\n} = <T>({ articleId, items, currentId, getId, onSelect }: UseArticleKeyboardNavigationOptions<T>): void => {\n const { hasAttention } = useAttention(articleId);\n\n // `getId` is optional only when `T extends { id: string }` (enforced by the overloads above),\n // so the fallback is sound; the cast bridges the generic erased by the implementation signature.\n const ids = useMemo(() => items.map((item) => (getId ? getId(item) : (item as { id: string }).id)), [items, getId]);\n\n useEffect(() => {\n if (!hasAttention) {\n return;\n }\n\n const context = Keyboard.singleton.getContext(articleId);\n const prevContext = Keyboard.singleton.getCurrentContext();\n Keyboard.singleton.setCurrentContext(articleId);\n\n const nextBinding = {\n shortcut: 'j',\n handler: () => {\n const target = advance({ ids, currentId, delta: 1 });\n if (target !== undefined) {\n onSelect(target);\n }\n },\n data: 'Next item',\n disableInput: true,\n };\n const prevBinding = {\n shortcut: 'k',\n handler: () => {\n const target = advance({ ids, currentId, delta: -1 });\n if (target !== undefined) {\n onSelect(target);\n }\n },\n data: 'Previous item',\n disableInput: true,\n };\n\n context.bind(nextBinding);\n context.bind(prevBinding);\n\n return () => {\n context.unbind('j');\n context.unbind('k');\n // Restore the prior context if we were the ones who set it.\n if (Keyboard.singleton.getCurrentContext() === articleId) {\n Keyboard.singleton.setCurrentContext(prevContext);\n }\n };\n }, [articleId, ids, currentId, onSelect, hasAttention]);\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["React", "forwardRef", "useMemo", "Icon", "mx", "attentionGlyphStyles", "presenceIconStyles", "PresenceOne", "svg", "width", "height", "viewBox", "className", "fill", "xmlns", "circle", "cx", "cy", "r", "PresenceMany", "path", "d", "Syncing", "animationProps", "animationDelay", "Date", "now", "div", "role", "icon", "size", "style", "classNames", "AttentionGlyph", "presence", "attended", "syncing", "containsAttended", "props", "forwardedRef", "data-attention", "data-contains-attended", "span", "ref", "useEffect", "useMemo", "Keyboard", "advance", "ids", "currentId", "delta", "length", "undefined", "idx", "indexOf", "next", "Math", "max", "min", "useArticleKeyboardNavigation", "articleId", "items", "getId", "onSelect", "hasAttention", "useAttention", "useMemo", "map", "item", "id", "useEffect", "context", "Keyboard", "singleton", "getContext", "prevContext", "getCurrentContext", "setCurrentContext", "nextBinding", "shortcut", "handler", "target", "data", "disableInput", "prevBinding", "bind", "unbind"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"src/attention.ts":{"bytes":25933,"imports":[{"path":"@effect-atom/atom-react","kind":"import-statement","external":true}],"format":"esm"},"src/components/AttentionGlyph/AttentionGlyph.tsx":{"bytes":
|
|
1
|
+
{"inputs":{"src/attention.ts":{"bytes":25933,"imports":[{"path":"@effect-atom/atom-react","kind":"import-statement","external":true}],"format":"esm"},"src/components/AttentionGlyph/AttentionGlyph.tsx":{"bytes":9829,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/ui-theme","kind":"import-statement","external":true}],"format":"esm"},"src/components/AttentionGlyph/index.ts":{"bytes":394,"imports":[{"path":"src/components/AttentionGlyph/AttentionGlyph.tsx","kind":"import-statement","original":"./AttentionGlyph"}],"format":"esm"},"src/components/AttentionProvider/AttentionProvider.tsx":{"bytes":18161,"imports":[{"path":"@effect-atom/atom-react","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"@radix-ui/react-primitive","kind":"import-statement","external":true},{"path":"@radix-ui/react-slot","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/log","kind":"import-statement","external":true},{"path":"@dxos/react-hooks","kind":"import-statement","external":true},{"path":"@dxos/ui-theme","kind":"import-statement","external":true},{"path":"src/attention.ts","kind":"import-statement","original":"../../attention"}],"format":"esm"},"src/components/AttentionProvider/index.ts":{"bytes":401,"imports":[{"path":"src/components/AttentionProvider/AttentionProvider.tsx","kind":"import-statement","original":"./AttentionProvider"}],"format":"esm"},"src/selection.ts":{"bytes":27361,"imports":[{"path":"@effect-atom/atom-react","kind":"import-statement","external":true},{"path":"effect/Match","kind":"import-statement","external":true},{"path":"effect/Schema","kind":"import-statement","external":true},{"path":"@dxos/invariant","kind":"import-statement","external":true}],"format":"esm"},"src/components/SelectionProvider/SelectionProvider.tsx":{"bytes":16598,"imports":[{"path":"@effect-atom/atom-react","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"effect/Match","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-hooks","kind":"import-statement","external":true},{"path":"src/selection.ts","kind":"import-statement","original":"../../selection"}],"format":"esm"},"src/components/SelectionProvider/index.ts":{"bytes":401,"imports":[{"path":"src/components/SelectionProvider/SelectionProvider.tsx","kind":"import-statement","original":"./SelectionProvider"}],"format":"esm"},"src/components/index.ts":{"bytes":616,"imports":[{"path":"src/components/AttentionGlyph/index.ts","kind":"import-statement","original":"./AttentionGlyph"},{"path":"src/components/AttentionProvider/index.ts","kind":"import-statement","original":"./AttentionProvider"},{"path":"src/components/SelectionProvider/index.ts","kind":"import-statement","original":"./SelectionProvider"}],"format":"esm"},"src/useArticleKeyboardNavigation.ts":{"bytes":11610,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/keyboard","kind":"import-statement","external":true},{"path":"src/components/index.ts","kind":"import-statement","original":"./components"}],"format":"esm"},"src/index.ts":{"bytes":700,"imports":[{"path":"src/attention.ts","kind":"import-statement","original":"./attention"},{"path":"src/components/index.ts","kind":"import-statement","original":"./components"},{"path":"src/selection.ts","kind":"import-statement","original":"./selection"},{"path":"src/useArticleKeyboardNavigation.ts","kind":"import-statement","original":"./useArticleKeyboardNavigation"}],"format":"esm"},"src/testing/decorators/withAttention.ts":{"bytes":3505,"imports":[{"path":"@effect-atom/atom-react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"src/attention.ts","kind":"import-statement","original":"../../attention"},{"path":"src/components/index.ts","kind":"import-statement","original":"../../components"}],"format":"esm"},"src/testing/decorators/index.ts":{"bytes":389,"imports":[{"path":"src/testing/decorators/withAttention.ts","kind":"import-statement","original":"./withAttention"}],"format":"esm"},"src/testing/index.ts":{"bytes":382,"imports":[{"path":"src/testing/decorators/index.ts","kind":"import-statement","original":"./decorators"}],"format":"esm"},"src/types/index.ts":{"bytes":1067,"imports":[{"path":"src/attention.ts","kind":"import-statement","original":"../attention"},{"path":"src/selection.ts","kind":"import-statement","original":"../selection"}],"format":"esm"}},"outputs":{"dist/lib/node-esm/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":11040},"dist/lib/node-esm/index.mjs":{"imports":[{"path":"dist/lib/node-esm/chunk-ZTUVSH4P.mjs","kind":"import-statement"},{"path":"dist/lib/node-esm/chunk-6INLBC62.mjs","kind":"import-statement"},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/ui-theme","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/keyboard","kind":"import-statement","external":true}],"exports":["AttendableContainer","AttentionGlyph","AttentionManager","RootAttentionProvider","SelectionManager","SelectionProvider","SelectionSchema","Syncing","advance","defaultSelection","expandAttendableId","getAttendables","getLinkedVariant","getParentId","getSegmentId","getSelectionSet","isLinkedSegment","linkedSegment","useArticleKeyboardNavigation","useAttended","useAttention","useAttentionAttributes","useAttentionContext","useSelected","useSelectionActions","useSelectionManager"],"entryPoint":"src/index.ts","inputs":{"src/index.ts":{"bytesInOutput":0},"src/components/AttentionGlyph/AttentionGlyph.tsx":{"bytesInOutput":2929},"src/useArticleKeyboardNavigation.ts":{"bytesInOutput":1896}},"bytes":6076},"dist/lib/node-esm/testing/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":1876},"dist/lib/node-esm/testing/index.mjs":{"imports":[{"path":"dist/lib/node-esm/chunk-ZTUVSH4P.mjs","kind":"import-statement"},{"path":"dist/lib/node-esm/chunk-6INLBC62.mjs","kind":"import-statement"},{"path":"@effect-atom/atom-react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"exports":["withAttention"],"entryPoint":"src/testing/index.ts","inputs":{"src/testing/decorators/withAttention.ts":{"bytesInOutput":610},"src/testing/index.ts":{"bytesInOutput":0}},"bytes":955},"dist/lib/node-esm/chunk-ZTUVSH4P.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":17647},"dist/lib/node-esm/chunk-ZTUVSH4P.mjs":{"imports":[{"path":"dist/lib/node-esm/chunk-6INLBC62.mjs","kind":"import-statement"},{"path":"@effect-atom/atom-react","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"@radix-ui/react-primitive","kind":"import-statement","external":true},{"path":"@radix-ui/react-slot","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/log","kind":"import-statement","external":true},{"path":"@dxos/react-hooks","kind":"import-statement","external":true},{"path":"@dxos/ui-theme","kind":"import-statement","external":true},{"path":"@effect-atom/atom-react","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"effect/Match","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-hooks","kind":"import-statement","external":true}],"exports":["AttendableContainer","RootAttentionProvider","SelectionProvider","useAttended","useAttention","useAttentionAttributes","useAttentionContext","useSelected","useSelectionActions","useSelectionManager"],"inputs":{"src/components/AttentionProvider/AttentionProvider.tsx":{"bytesInOutput":3786},"src/components/SelectionProvider/SelectionProvider.tsx":{"bytesInOutput":3529}},"bytes":7908},"dist/lib/node-esm/types/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":93},"dist/lib/node-esm/types/index.mjs":{"imports":[{"path":"dist/lib/node-esm/chunk-6INLBC62.mjs","kind":"import-statement"}],"exports":["AttentionManager","SelectionManager","SelectionSchema","defaultSelection","expandAttendableId","getAttendables","getLinkedVariant","getParentId","getSegmentId","getSelectionSet","isLinkedSegment","linkedSegment"],"entryPoint":"src/types/index.ts","inputs":{"src/types/index.ts":{"bytesInOutput":0}},"bytes":628},"dist/lib/node-esm/chunk-6INLBC62.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":25346},"dist/lib/node-esm/chunk-6INLBC62.mjs":{"imports":[{"path":"@effect-atom/atom-react","kind":"import-statement","external":true},{"path":"@effect-atom/atom-react","kind":"import-statement","external":true},{"path":"effect/Match","kind":"import-statement","external":true},{"path":"effect/Schema","kind":"import-statement","external":true},{"path":"@dxos/invariant","kind":"import-statement","external":true}],"exports":["AttentionManager","SelectionManager","SelectionSchema","defaultSelection","expandAttendableId","getAttendables","getLinkedVariant","getParentId","getSegmentId","getSelectionSet","isLinkedSegment","linkedSegment"],"inputs":{"src/attention.ts":{"bytesInOutput":5433},"src/selection.ts":{"bytesInOutput":6966}},"bytes":12814}}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,gCAAgC,CAAC"}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Compute the id to select after pressing 'j' (delta = 1) or 'k' (delta = -1).
|
|
3
|
+
* Clamps at the list ends — pressing 'j' on the last item keeps the last item
|
|
4
|
+
* selected (vim-style), and 'k' on the first item keeps the first.
|
|
5
|
+
*
|
|
6
|
+
* When no current selection exists, returns the first id (for delta = 1) or the
|
|
7
|
+
* last id (for delta = -1) so the user can enter the list with either key.
|
|
8
|
+
*/
|
|
9
|
+
export declare const advance: ({ ids, currentId, delta, }: {
|
|
10
|
+
ids: readonly string[];
|
|
11
|
+
currentId: string | undefined;
|
|
12
|
+
delta: 1 | -1;
|
|
13
|
+
}) => string | undefined;
|
|
14
|
+
export type UseArticleKeyboardNavigationOptions<T> = {
|
|
15
|
+
/** Stable id for the article (used as the keyboard context path). */
|
|
16
|
+
articleId: string;
|
|
17
|
+
/** Ordered list of selectable items as they appear in the article. */
|
|
18
|
+
items: readonly T[];
|
|
19
|
+
/** Currently-selected id, if any. */
|
|
20
|
+
currentId: string | undefined;
|
|
21
|
+
/** Extracts the id from an item. Defaults to `item.id`. */
|
|
22
|
+
getId?: (item: T) => string;
|
|
23
|
+
/** Called with the id to select when the user presses 'j' or 'k'. */
|
|
24
|
+
onSelect: (id: string) => void;
|
|
25
|
+
};
|
|
26
|
+
/**
|
|
27
|
+
* Wire 'j' (next) and 'k' (previous) keyboard shortcuts for an article that
|
|
28
|
+
* navigates a list of items (e.g., messages, events). Bindings are scoped to
|
|
29
|
+
* the article's keyboard context so they only fire while the article has attention.
|
|
30
|
+
*
|
|
31
|
+
* Pass the items directly; ids are derived via `getId` (defaults to `item.id`).
|
|
32
|
+
* Clamps at list boundaries. Active only when the article is attended.
|
|
33
|
+
*/
|
|
34
|
+
export declare const useArticleKeyboardNavigation: {
|
|
35
|
+
<T extends {
|
|
36
|
+
id: string;
|
|
37
|
+
}>(options: UseArticleKeyboardNavigationOptions<T>): void;
|
|
38
|
+
<T>(options: UseArticleKeyboardNavigationOptions<T> & {
|
|
39
|
+
getId: (item: T) => string;
|
|
40
|
+
}): void;
|
|
41
|
+
};
|
|
42
|
+
//# sourceMappingURL=useArticleKeyboardNavigation.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useArticleKeyboardNavigation.d.ts","sourceRoot":"","sources":["../../../src/useArticleKeyboardNavigation.ts"],"names":[],"mappings":"AAUA;;;;;;;GAOG;AACH,eAAO,MAAM,OAAO,+BAIjB;IACD,GAAG,EAAE,SAAS,MAAM,EAAE,CAAC;IACvB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,KAAK,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;CACf,KAAG,MAAM,GAAG,SAYZ,CAAC;AAEF,MAAM,MAAM,mCAAmC,CAAC,CAAC,IAAI;IACnD,qEAAqE;IACrE,SAAS,EAAE,MAAM,CAAC;IAClB,sEAAsE;IACtE,KAAK,EAAE,SAAS,CAAC,EAAE,CAAC;IACpB,qCAAqC;IACrC,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,2DAA2D;IAC3D,KAAK,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAC5B,qEAAqE;IACrE,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,4BAA4B,EAAE;IACzC,CAAC,CAAC,SAAS;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,EAAE,OAAO,EAAE,mCAAmC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IAClF,CAAC,CAAC,EAAE,OAAO,EAAE,mCAAmC,CAAC,CAAC,CAAC,GAAG;QAAE,KAAK,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;CAoD7F,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useArticleKeyboardNavigation.test.d.ts","sourceRoot":"","sources":["../../../src/useArticleKeyboardNavigation.test.ts"],"names":[],"mappings":""}
|