@theoremjs/react 0.3.0 → 0.3.1

package/ui/built/theme.css.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @generated by `astryx theme build` — do not edit manually.
+ * Source: src/ui/theorem-theme.ts
+ * Command: astryx theme build src/ui/theorem-theme.ts --out src/ui/built/theme.css
+ * CLI: @astryxdesign/cli@0.7.0
+ * Core: @astryxdesign/core@0.7.0
+ */
+
+export {};

package/ui/built/theorem.d.ts

@@ -2,12 +2,12 @@
  * @generated by `astryx theme build` — do not edit manually.
  * Source: src/ui/theorem-theme.ts
  * Command: astryx theme build src/ui/theorem-theme.ts --out src/ui/built/theme.css
- * CLI: @astryxdesign/cli@0.6.3
- * Core: @astryxdesign/core@0.6.3
+ * CLI: @astryxdesign/cli@0.7.0
+ * Core: @astryxdesign/core@0.7.0
  */
 
 /// <reference path="./theorem.variants.d.ts" />
 import type { DefinedTheme } from '@astryxdesign/core/theme';
 import type { IconRegistry } from '@astryxdesign/core/Icon';
-export declare const tablerIcons: IconRegistry;
+export declare const themeIcons: IconRegistry;
 export declare const theoremTheme: DefinedTheme;

package/ui/built/theorem.js

@@ -2,11 +2,13 @@
  * @generated by `astryx theme build` — do not edit manually.
  * Source: src/ui/theorem-theme.ts
  * Command: astryx theme build src/ui/theorem-theme.ts --out src/ui/built/theme.css
- * CLI: @astryxdesign/cli@0.6.3
- * Core: @astryxdesign/core@0.6.3
+ * CLI: @astryxdesign/cli@0.7.0
+ * Core: @astryxdesign/core@0.7.0
  */
 
+import { neutralTheme } from '@astryxdesign/theme-neutral/built';
 import { tablerIcons } from "../icons.js";
+const themeIcons = {...neutralTheme["icons"], ...tablerIcons};
 /**
  * theorem theme — built by `npx astryx theme build`
  * Import the CSS file alongside this module:
@@ -488,6 +490,12 @@ export const theoremTheme = {
     "card": {
       "base": {
         "padding": "var(--spacing-3)"
+      },
+      "variant:bubble": {
+        "backgroundColor": "var(--color-neutral)",
+        "borderRadius": "var(--radius-chat)",
+        "paddingBlock": "var(--spacing-3)",
+        "paddingInline": "var(--spacing-4)"
       }
     },
     "section": {
@@ -536,12 +544,17 @@ export const theoremTheme = {
         }
       }
     },
+    "code-block": {
+      "container:card": {
+        "borderRadius": "var(--radius-container)"
+      }
+    },
     "layout-panel": {
       "base": {
         ":where([role=\"complementary\"])": {
           "transition": "width var(--duration-medium) var(--ease-standard)"
         },
-        ":where([data-resizing] + [role=\"complementary\"])": {
+        ":where([data-resizing] + [role=\"complementary\"], [role=\"complementary\"]:has(+ [data-resizing]))": {
           "transition": "none"
         }
       }
@@ -572,6 +585,22 @@ export const theoremTheme = {
       "2xl": 1536
     },
     "rules": [
+      {
+        "when": {
+          "pointer": "coarse",
+          "width": {
+            "below": "lg"
+          }
+        },
+        "value": {
+          "typography": {
+            "scale": {
+              "base": 16,
+              "ratio": 1.1736
+            }
+          }
+        }
+      },
       {
         "when": {
           "motion": "reduce"
@@ -625,7 +654,7 @@ export const theoremTheme = {
       "ratio": 0.75
     }
   },
-  icons: tablerIcons,
+  icons: themeIcons,
 };
 
-export { tablerIcons };
+export { themeIcons };

package/ui/built/theorem.variants.d.ts

@@ -2,8 +2,8 @@
  * @generated by `astryx theme build` — do not edit manually.
  * Source: src/ui/theorem-theme.ts
  * Command: astryx theme build src/ui/theorem-theme.ts --out src/ui/built/theme.css
- * CLI: @astryxdesign/cli@0.6.3
- * Core: @astryxdesign/core@0.6.3
+ * CLI: @astryxdesign/cli@0.7.0
+ * Core: @astryxdesign/core@0.7.0
  */
 
 // Generated by astryx theme build
@@ -14,3 +14,9 @@ declare module '@astryxdesign/core/Badge' {
     'gray': true;
   }
 }
+
+declare module '@astryxdesign/core/Card' {
+  interface CardVariantMap {
+    'bubble': true;
+  }
+}

package/ui/code-language.d.ts

@@ -0,0 +1,12 @@
+import type { MarkdownAstRoot } from '@astryxdesign/core/Markdown';
+import type { MarkdownExtensionNode } from '@astryxdesign/core/Markdown/plugins';
+/** The language of untagged code, or `undefined` when the detector is unsure or the language would not be coloured. */
+export declare function detectedCodeLanguage(code: string): string | undefined;
+/** The document with its untagged fences labelled. Unsettled while streaming: the last block may be an open fence. */
+export declare function labelUntaggedCode(document: MarkdownAstRoot<MarkdownExtensionNode>, isFinal: boolean): MarkdownAstRoot<MarkdownExtensionNode>;
+/**
+ * A Markdown plugin that labels fenced code the reply left untagged, so it is coloured like a tagged
+ * fence. A fence with a language is left as written. While the reply streams, the last block is left
+ * alone: it may be a fence still open, and its language would change as it grows.
+ */
+export declare const codeLanguagePlugin: import("@astryxdesign/core/Markdown/plugins").MarkdownPluginEntry<never>;

package/ui/code-language.js

@@ -0,0 +1,50 @@
+import { createMarkdownPlugin } from '@astryxdesign/core/Markdown/plugins';
+import { detectLanguage } from '@speed-highlight/core/detect';
+/** The languages Astryx's `CodeBlock` colours, as the detector names them. A guess outside it would only add a label. */
+const COLOURED = new Set(['js', 'ts', 'py', 'bash', 'json', 'css', 'html', 'xml', 'yaml', 'md']);
+/** The language of untagged code, or `undefined` when the detector is unsure or the language would not be coloured. */
+export function detectedCodeLanguage(code) {
+    const language = detectLanguage(code);
+    return COLOURED.has(language) ? language : undefined;
+}
+function tagged(node) {
+    if (node.type === 'code') {
+        const code = node;
+        if (code.lang !== null)
+            return node;
+        const lang = detectedCodeLanguage(code.value);
+        return lang === undefined ? node : { ...code, lang };
+    }
+    if (node.children === undefined)
+        return node;
+    let changed = false;
+    const children = node.children.map((child) => {
+        const next = tagged(child);
+        if (next !== child)
+            changed = true;
+        return next;
+    });
+    return changed ? { ...node, children } : node;
+}
+/** The document with its untagged fences labelled. Unsettled while streaming: the last block may be an open fence. */
+export function labelUntaggedCode(document, isFinal) {
+    const { children } = document;
+    const settled = isFinal ? children : children.slice(0, -1);
+    const next = settled.map((child) => tagged(child));
+    if (next.every((child, index) => child === settled[index]))
+        return document;
+    return {
+        ...document,
+        children: [...next, ...children.slice(settled.length)],
+    };
+}
+/**
+ * A Markdown plugin that labels fenced code the reply left untagged, so it is coloured like a tagged
+ * fence. A fence with a language is left as written. While the reply streams, the last block is left
+ * alone: it may be a fence still open, and its language would change as it grows.
+ */
+export const codeLanguagePlugin = createMarkdownPlugin({
+    apiVersion: 1,
+    name: 'theorem-code-language',
+    transform: (document, { isFinal }) => labelUntaggedCode(document, isFinal),
+});

package/ui/disclosure-motion.js

@@ -11,10 +11,13 @@ function panelOf(trigger) {
     const id = trigger.getAttribute('aria-controls');
     if (id)
         return document.getElementById(id);
-    return trigger.closest('[role="treeitem"]')?.querySelector(':scope > [role="group"]') ?? null;
+    return (trigger.closest('[role="treeitem"]')?.querySelector(':scope > [role="group"]') ??
+        null);
 }
 function ownsMotion(panel) {
-    return getComputedStyle(panel).transitionDuration.split(',').some((d) => Number.parseFloat(d) > 0);
+    return getComputedStyle(panel)
+        .transitionDuration.split(',')
+        .some((d) => Number.parseFloat(d) > 0);
 }
 function isToggleKey(event) {
     return !(event instanceof KeyboardEvent) || event.key === 'Enter' || event.key === ' ';
@@ -73,7 +76,7 @@ function ease(panel, direction) {
     return panel.animate(frames.map((frame) => ({ ...frame, boxSizing: 'border-box', overflow: 'clip' })), {
         duration: ms(style.getPropertyValue('--duration-medium')),
         easing: style.getPropertyValue('--ease-standard').trim(),
-        // A shut panel stays shut until its unmount; an open one hands back to its natural height.
+        // why: A shut panel stays shut until its unmount; an open one hands back to its natural height.
         fill: direction === 'close' ? 'forwards' : 'none',
     });
 }
@@ -81,6 +84,46 @@ function ease(panel, direction) {
 function settled(panel) {
     return Promise.allSettled(panel.getAnimations().map((animation) => animation.finished));
 }
+/** The attribute Astryx's chat sets on its scroller while it follows new content to the bottom. */
+const FOLLOWING = 'data-astryx-chat-following';
+/** How far from its bottom a scroll up must land for Astryx's chat to stop following: past its 10px lock threshold. */
+const LET_GO = 11;
+/**
+ * Keeps a trigger the reader opened where it was while its panel grows. A
+ * chat that follows its bottom would spring past it, so the follow is let go
+ * first: a scroll up just past the chat's threshold reads as the reader's.
+ * The panel's growth then gives the room back, and the trigger ends where it
+ * was. A chat too short to scroll yet is held after each layout instead,
+ * after the follow's own frame, which also lets it go.
+ */
+function holdInPlace(trigger, panel, motion) {
+    const scroller = trigger.closest(`[${FOLLOWING}]`);
+    if (!scroller)
+        return;
+    const top = trigger.getBoundingClientRect().top;
+    const room = () => scroller.scrollHeight - scroller.clientHeight - scroller.scrollTop;
+    scroller.scrollTop -= Math.max(0, LET_GO - room());
+    let done = false;
+    void motion.then(() => setTimeout(() => (done = true), 1000));
+    const held = new ResizeObserver(() => {
+        const drift = trigger.getBoundingClientRect().top - top;
+        if (drift && scroller.hasAttribute(FOLLOWING))
+            scroller.scrollTop += drift;
+    });
+    held.observe(panel);
+    const giveBack = () => {
+        const drift = trigger.getBoundingClientRect().top - top;
+        // invariant: Never back within the threshold, or the chat would follow again.
+        if (drift > 0 && !scroller.hasAttribute(FOLLOWING)) {
+            scroller.scrollTop += Math.max(0, Math.min(drift, room() - LET_GO));
+        }
+        if (done || (drift <= 0.5 && !scroller.hasAttribute(FOLLOWING)))
+            held.disconnect();
+        else
+            requestAnimationFrame(giveBack);
+    };
+    requestAnimationFrame(giveBack);
+}
 /**
  * Eases every disclosure under `ref` open and shut. `onOpened` runs once the
  * new panel is in the DOM, with a promise for its motion finishing.
@@ -93,12 +136,12 @@ export function useDisclosureMotion(ref, onOpened) {
         const still = matchMedia('(prefers-reduced-motion: reduce)');
         const closing = new WeakSet();
         const replaying = new WeakSet();
-        // The trigger the reader just pressed to open; opens the page makes itself aren't eased or followed.
+        // why: The trigger the reader just pressed to open; opens the page makes itself aren't eased or followed.
         let opening;
         /** The trigger the reader pressed opens: note it until the toggle commits, within this event. */
         const noteOpening = (trigger) => {
             opening = trigger;
-            // A stale note must not claim a later change.
+            // why: A stale note must not claim a later change.
             setTimeout(() => {
                 if (opening === trigger)
                     opening = undefined;
@@ -109,7 +152,6 @@ export function useDisclosureMotion(ref, onOpened) {
             const panel = panelOf(trigger);
             return panel && !still.matches && !ownsMotion(panel) ? panel : undefined;
         };
-        // Capture, before the component toggles: note what the trigger was, and hold a close.
         const before = (event) => {
             if (!isToggleKey(event) || replaying.has(event))
                 return;
@@ -137,11 +179,11 @@ export function useDisclosureMotion(ref, onOpened) {
                 target.dispatchEvent(replay);
             });
         };
-        // After the component commits the toggle (a component may stop the event, so
+        // why: After the component commits the toggle (a component may stop the event, so
         // watch the attribute rather than wait for the event to bubble): ease the new panel.
         const opened = new MutationObserver(() => {
             const trigger = opening;
-            if (!trigger || trigger.getAttribute('aria-expanded') !== 'true')
+            if (trigger?.getAttribute('aria-expanded') !== 'true')
                 return;
             opening = undefined;
             const panel = panelOf(trigger);
@@ -149,7 +191,9 @@ export function useDisclosureMotion(ref, onOpened) {
                 return;
             if (!still.matches && !ownsMotion(panel))
                 ease(panel, 'open');
-            onOpened?.(trigger, panel, settled(panel));
+            const motion = settled(panel);
+            holdInPlace(trigger, panel, motion);
+            onOpened?.(trigger, panel, motion);
         });
         opened.observe(root, { subtree: true, attributeFilter: ['aria-expanded'] });
         root.addEventListener('click', before, true);

package/ui/embedding-space-gl.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Draws the embedding space with WebGL2 and nothing else: anti-aliased lines,
+ * solid dots and the query's white dot, laid over the card with premultiplied
+ * alpha so the card shows through. Dots cover whatever lies behind them, and
+ * every line stops just short of the dot it reaches; the far side of the
+ * ball draws smaller and fainter. No React here: the component owns one
+ * renderer and feeds it.
+ *
+ * @module
+ */
+import type { EmbeddingSpace, SpacePoint } from '../client/embedding-space.ts';
+import { type QueryMatch } from '../client/space-geometry.ts';
+/** What the space highlights: a query's matches, and the document under the pointer. */
+export type SpaceFocus = {
+    query: SpacePoint | null;
+    matches: readonly QueryMatch[];
+    hovered: number | null;
+};
+export type SpaceRenderer = {
+    /** Shows a new index: its clusters grow in, one after another. */
+    setSpace(space: EmbeddingSpace): void;
+    setFocus(focus: SpaceFocus): void;
+    /** The document nearest a point in CSS pixels from the canvas's corner, if one is close and facing. */
+    pick(x: number, y: number): number | null;
+    /** Turns the sphere as a drag moves, in CSS pixels. */
+    drag(dx: number, dy: number): void;
+    release(): void;
+};
+/**
+ * One renderer for one canvas. Throws {@link SpaceUnavailable} when the
+ * browser cannot draw it, so the caller shows the list instead.
+ */
+export declare function createSpaceRenderer(canvas: HTMLCanvasElement, { still }: {
+    still: boolean;
+}): SpaceRenderer & {
+    destroy(): void;
+};