@theoremjs/studio 0.0.0-stage → 0.3.2

package/ui/lib/type-icons.d.ts

@@ -0,0 +1,35 @@
+/**
+ * The icon for each type of agent, of tool, and of decision question, wherever the studio shows
+ * one: the editor's Type controls and lists, the tree, the map, and the loader's map of a project
+ * being read.
+ */
+import type { IconType } from '@astryxdesign/core/Icon';
+import { IconMcp } from '../mcp-icon.tsx';
+/** Each profile type's icon: the Type control's segments and the tree's Identity row. */
+export declare const PROFILE_TYPE_ICON: {
+    text: import("react").ForwardRefExoticComponent<import("@tabler/icons-react").IconProps & import("react").RefAttributes<SVGSVGElement>>;
+    image: import("react").ForwardRefExoticComponent<import("@tabler/icons-react").IconProps & import("react").RefAttributes<SVGSVGElement>>;
+    speech: import("react").ForwardRefExoticComponent<import("@tabler/icons-react").IconProps & import("react").RefAttributes<SVGSVGElement>>;
+    live: import("react").ForwardRefExoticComponent<import("@tabler/icons-react").IconProps & import("react").RefAttributes<SVGSVGElement>>;
+    decision: import("react").ForwardRefExoticComponent<import("@tabler/icons-react").IconProps & import("react").RefAttributes<SVGSVGElement>>;
+    embedding: import("react").ForwardRefExoticComponent<import("@tabler/icons-react").IconProps & import("react").RefAttributes<SVGSVGElement>>;
+    host: import("react").ForwardRefExoticComponent<import("@tabler/icons-react").IconProps & import("react").RefAttributes<SVGSVGElement>>;
+};
+/** The icon for a profile type, or none when the type is not one of those. */
+export declare function profileTypeIcon(type: string | undefined): IconType | undefined;
+/** Each custom tool type's icon: the Type control's segments and the tree's tool rows. */
+export declare const TOOL_TYPE_ICON: {
+    function: import("react").ForwardRefExoticComponent<import("@tabler/icons-react").IconProps & import("react").RefAttributes<SVGSVGElement>>;
+    http: import("react").ForwardRefExoticComponent<import("@tabler/icons-react").IconProps & import("react").RefAttributes<SVGSVGElement>>;
+    mcp: typeof IconMcp;
+    agent: import("react").ForwardRefExoticComponent<import("@tabler/icons-react").IconProps & import("react").RefAttributes<SVGSVGElement>>;
+};
+/** Each decision question type's icon: the Answer control's segments and the question list. */
+export declare const QUESTION_TYPE_ICON: {
+    choice: import("react").ForwardRefExoticComponent<import("@tabler/icons-react").IconProps & import("react").RefAttributes<SVGSVGElement>>;
+    score: import("react").ForwardRefExoticComponent<import("@tabler/icons-react").IconProps & import("react").RefAttributes<SVGSVGElement>>;
+    noul: import("react").ForwardRefExoticComponent<import("@tabler/icons-react").IconProps & import("react").RefAttributes<SVGSVGElement>>;
+    box: import("react").ForwardRefExoticComponent<import("@tabler/icons-react").IconProps & import("react").RefAttributes<SVGSVGElement>>;
+};
+/** The icon for a tool type, or the plain tool icon when the type is not one of those. */
+export declare function toolTypeIcon(type: string): IconType;

package/ui/lib/type-icons.js

@@ -0,0 +1,38 @@
+import { IconChartBar, IconChartScatter3d, IconGavel, IconHeadset, IconLetterT, IconListCheck, IconMathFunction, IconMessageForward, IconNumber, IconPhoto, IconServer, IconSquareDashed, IconTool, IconVolume, IconWorld, } from '@tabler/icons-react';
+import { IconMcp } from "../mcp-icon.js";
+/** Each profile type's icon: the Type control's segments and the tree's Identity row. */
+export const PROFILE_TYPE_ICON = {
+    text: IconLetterT,
+    image: IconPhoto,
+    speech: IconVolume,
+    live: IconHeadset,
+    decision: IconGavel,
+    embedding: IconChartScatter3d,
+    host: IconServer,
+};
+/** The icon for a profile type, or none when the type is not one of those. */
+export function profileTypeIcon(type) {
+    if (type !== undefined && Object.hasOwn(PROFILE_TYPE_ICON, type))
+        return PROFILE_TYPE_ICON[type];
+    return undefined;
+}
+/** Each custom tool type's icon: the Type control's segments and the tree's tool rows. */
+export const TOOL_TYPE_ICON = {
+    function: IconMathFunction,
+    http: IconWorld,
+    mcp: IconMcp,
+    agent: IconMessageForward,
+};
+/** Each decision question type's icon: the Answer control's segments and the question list. */
+export const QUESTION_TYPE_ICON = {
+    choice: IconListCheck,
+    score: IconChartBar,
+    noul: IconNumber,
+    box: IconSquareDashed,
+};
+/** The icon for a tool type, or the plain tool icon when the type is not one of those. */
+export function toolTypeIcon(type) {
+    if (Object.hasOwn(TOOL_TYPE_ICON, type))
+        return TOOL_TYPE_ICON[type];
+    return IconTool;
+}

package/ui/lib/when-idle.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Loads `modules` once the page is idle, so a panel or runner the builder opens later does not
+ * wait on the network, and nothing the first paint needs waits on them.
+ */
+export declare function warmWhenIdle(...modules: (() => Promise<unknown>)[]): void;

package/ui/lib/when-idle.js

@@ -0,0 +1,14 @@
+/**
+ * Loads `modules` once the page is idle, so a panel or runner the builder opens later does not
+ * wait on the network, and nothing the first paint needs waits on them.
+ */
+export function warmWhenIdle(...modules) {
+    const warm = () => {
+        for (const load of modules)
+            load().catch(() => { });
+    };
+    if (globalThis.requestIdleCallback)
+        globalThis.requestIdleCallback(warm);
+    else
+        globalThis.setTimeout(warm, 1);
+}

package/ui/lib/zip.d.ts

@@ -0,0 +1,5 @@
+/** The files as a .zip, each at its path. */
+export declare function zipFiles(files: readonly {
+    path: string;
+    code: string;
+}[]): Uint8Array<ArrayBuffer>;

package/ui/lib/zip.js

@@ -0,0 +1,8 @@
+import { strToU8, zipSync } from 'fflate';
+/** 1 January 1980, the earliest date a zip can hold: every export has the same bytes. */
+const ZIP_EPOCH = new Date(1980, 0, 1);
+/** The files as a .zip, each at its path. */
+export function zipFiles(files) {
+    const entries = Object.fromEntries(files.map((file) => [file.path, strToU8(file.code)]));
+    return new Uint8Array(zipSync(entries, { mtime: ZIP_EPOCH }));
+}

package/ui/map-token.css

@@ -0,0 +1,11 @@
+.map-token {
+  position: absolute;
+  translate: 0 -50%;
+  white-space: nowrap;
+}
+
+.map-line {
+  fill: none;
+  stroke: var(--color-border-emphasized);
+  stroke-width: 1.5;
+}

package/ui/map-token.d.ts

@@ -0,0 +1,17 @@
+import { type IconType } from '@astryxdesign/core/Icon';
+import { type TokenColor } from '@astryxdesign/core/Token';
+import { type HTMLAttributes, type RefObject } from 'react';
+export interface MapTokenProps extends Omit<HTMLAttributes<HTMLDivElement>, 'id' | 'color'> {
+    id: string;
+    label: string;
+    icon?: IconType | undefined;
+    /** The left side, and the middle from the top. */
+    x: number;
+    y: number;
+    color?: TokenColor | undefined;
+    description?: string | undefined;
+    onOpen?: (() => void) | undefined;
+}
+export declare function MapToken({ id, label, icon, x, y, color, description, onOpen, className, style, ...rest }: MapTokenProps): import("react").JSX.Element;
+/** Each token's width under `root`, by id, measured again whenever `drawn` changes. */
+export declare function useTokenWidths(root: RefObject<HTMLElement | null>, drawn: unknown): Record<string, number>;

package/ui/map-token.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Icon } from '@astryxdesign/core/Icon';
+import { Token } from '@astryxdesign/core/Token';
+import { useLayoutEffect, useRef, useState } from 'react';
+import './map-token.css';
+export function MapToken({ id, label, icon, x, y, color, description, onOpen, className, style, ...rest }) {
+    return (_jsx("div", { ...rest, className: className ? `map-token ${className}` : 'map-token', "data-map-token": id, style: { ...style, left: x, top: y }, children: _jsx(Token, { size: "sm", label: label, icon: icon && _jsx(Icon, { icon: icon, size: "sm" }), ...(color === undefined ? {} : { color }), ...(description === undefined ? {} : { description }), ...(onOpen === undefined ? {} : { onClick: onOpen }) }) }));
+}
+/** Not yet measured for anything. */
+const UNMEASURED = Symbol('unmeasured');
+/** Each token's width under `root`, by id, measured again whenever `drawn` changes. */
+export function useTokenWidths(root, drawn) {
+    const [widths, setWidths] = useState({});
+    const measuredFor = useRef(UNMEASURED);
+    useLayoutEffect(() => {
+        if (measuredFor.current === drawn)
+            return;
+        measuredFor.current = drawn;
+        const next = {};
+        for (const each of root.current?.querySelectorAll('[data-map-token]') ?? []) {
+            next[each.dataset.mapToken ?? ''] = each.offsetWidth;
+        }
+        setWidths((last) => Object.keys(next).length === Object.keys(last).length &&
+            Object.entries(next).every(([id, width]) => last[id] === width)
+            ? last
+            : next);
+    });
+    return widths;
+}

package/ui/mcp-icon.d.ts

@@ -0,0 +1,6 @@
+import type { SVGProps } from 'react';
+/**
+ * Model Context Protocol mark (from Simple Icons, CC0), filled in the current colour.
+ * Tabler has no MCP icon; this marks MCP tools beside Tabler's glyphs for the other types.
+ */
+export declare function IconMcp(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;

package/ui/mcp-icon.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Model Context Protocol mark (from Simple Icons, CC0), filled in the current colour.
+ * Tabler has no MCP icon; this marks MCP tools beside Tabler's glyphs for the other types.
+ */
+export function IconMcp(props) {
+    return (_jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": true, ...props, children: _jsx("path", { d: "M13.85 0a4.16 4.16 0 0 0-2.95 1.217L1.456 10.66a.835.835 0 0 0 0 1.18.835.835 0 0 0 1.18 0l9.442-9.442a2.49 2.49 0 0 1 3.541 0 2.49 2.49 0 0 1 0 3.541L8.59 12.97l-.1.1a.835.835 0 0 0 0 1.18.835.835 0 0 0 1.18 0l.1-.098 7.03-7.034a2.49 2.49 0 0 1 3.542 0l.049.05a2.49 2.49 0 0 1 0 3.54l-8.54 8.54a1.96 1.96 0 0 0 0 2.755l1.753 1.753a.835.835 0 0 0 1.18 0 .835.835 0 0 0 0-1.18l-1.753-1.753a.266.266 0 0 1 0-.394l8.54-8.54a4.185 4.185 0 0 0 0-5.9l-.05-.05a4.16 4.16 0 0 0-2.95-1.218c-.2 0-.401.02-.6.048a4.17 4.17 0 0 0-1.17-3.552A4.16 4.16 0 0 0 13.85 0m0 3.333a.84.84 0 0 0-.59.245L6.275 10.56a4.186 4.186 0 0 0 0 5.902 4.186 4.186 0 0 0 5.902 0L19.16 9.48a.835.835 0 0 0 0-1.18.835.835 0 0 0-1.18 0l-6.985 6.984a2.49 2.49 0 0 1-3.54 0 2.49 2.49 0 0 1 0-3.54l6.983-6.985a.835.835 0 0 0 0-1.18.84.84 0 0 0-.59-.245" }) }));
+}

package/ui/motion.css

@@ -0,0 +1,113 @@
+/*
+ * Every popover layer (tooltips, menus, selects, popovers) fades in and out. Astryx shows and hides
+ * them without motion, and its theme API can't declare the entry: fading in from `display: none`
+ * needs @starting-style, which only a stylesheet can hold. Leaving, the layer holds its display and
+ * top-layer place (allow-discrete) until it has faded.
+ */
+[popover] {
+  transition:
+    opacity var(--duration-fast) var(--ease-standard),
+    display var(--duration-fast) allow-discrete,
+    overlay var(--duration-fast) allow-discrete;
+}
+
+[popover]:not(:popover-open) {
+  opacity: 0;
+}
+
+@starting-style {
+  [popover]:popover-open {
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [popover] {
+    transition: none;
+  }
+}
+
+/*
+ * A trace row, a decision's answer, or a piece of a host result eases in as it
+ * mounts, each a step after the last, the way a test's rows arrive one by one.
+ * The delay is set on the item. Reduced motion shows them at once.
+ */
+.theorem-arrive {
+  min-width: 0;
+  animation: theorem-arrive var(--duration-medium) var(--ease-standard) both;
+}
+
+@keyframes theorem-arrive {
+  from {
+    opacity: 0;
+    translate: 0 0.5rem;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .theorem-arrive {
+    animation: none;
+  }
+}
+
+/*
+ * Text with no place to break (a field path in an issue, an address, a key) wraps inside its box
+ * rather than spilling over what sits beside it. A status message under a field breaks anywhere,
+ * since its box is only as wide as the field.
+ */
+body {
+  overflow-wrap: break-word;
+}
+
+.astryx-field-status,
+.astryx-banner {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+/*
+ * The files' side of a comparison closes toward its edge when it is hidden and opens again when
+ * it is shown, on the studio's standard motion. It only moves once the builder has asked: the
+ * page opens with it in place.
+ */
+.studio-saved-slot,
+.studio-edited-slot {
+  flex: 1 1 0;
+  min-width: 0;
+  height: 100%;
+}
+
+.studio-saved-slot {
+  display: flex;
+  overflow: hidden;
+}
+
+.studio-saved-slot-side {
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+.studio-saved-slot[data-moved] {
+  transition:
+    flex-grow var(--duration-medium) var(--ease-standard),
+    opacity var(--duration-medium) var(--ease-standard);
+}
+
+.studio-saved-slot[data-closed] {
+  flex-grow: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+@starting-style {
+  .studio-saved-slot[data-moved] {
+    flex-grow: 0;
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .studio-saved-slot[data-moved] {
+    transition: none;
+  }
+}

package/ui/pan.d.ts

@@ -0,0 +1,32 @@
+/**
+ * A field that pans: dragged with a mouse or a pen, scrolled with a finger or a wheel. The map and
+ * the site's showcase pan alike.
+ */
+import { type PointerEvent as ReactPointerEvent } from 'react';
+/** The box around `from` that scrolls, if one does. */
+export declare function scrollerOf(from: HTMLElement): HTMLElement | undefined;
+/** Where `field` starts inside `scroller`'s scrolled content. */
+export declare function fieldStart(field: HTMLElement, scroller: HTMLElement): {
+    left: number;
+    top: number;
+};
+/**
+ * Scroll the box around `field` to `at`, once it can: a field that is still opening has no box that
+ * scrolls yet, so it tries again each frame until the scroll lands. Returns what stops the tries.
+ */
+export declare function scrollOnce(field: HTMLElement, at: (scroller: HTMLElement) => {
+    left: number;
+    top: number;
+}): () => void;
+/** A mouse or a pen drags; a finger scrolls the field as it always does. */
+export declare const drags: (event: ReactPointerEvent) => boolean;
+/**
+ * Follow the pointer that pressed until it lifts, wherever it goes: `onMove` with how far it is
+ * from where it pressed, then `onEnd`, with whether it lifted or the press was called off.
+ */
+export declare function follow(press: ReactPointerEvent, onMove: (x: number, y: number) => void, onEnd: (lifted: boolean) => void): void;
+/** A drag that starts on the field, off anything `held` matches, pans it. */
+export declare function usePan(held: string): {
+    panning: boolean;
+    pan: (event: ReactPointerEvent<HTMLElement>) => void;
+};

package/ui/pan.js

@@ -0,0 +1,90 @@
+/**
+ * A field that pans: dragged with a mouse or a pen, scrolled with a finger or a wheel. The map and
+ * the site's showcase pan alike.
+ */
+import { useState } from 'react';
+/** The box around `from` that scrolls, if one does. */
+export function scrollerOf(from) {
+    for (let each = from.parentElement; each; each = each.parentElement) {
+        const { overflowX, overflowY } = getComputedStyle(each);
+        if (/auto|scroll/.test(`${overflowX} ${overflowY}`))
+            return each;
+    }
+    return undefined;
+}
+/** Where `field` starts inside `scroller`'s scrolled content. */
+export function fieldStart(field, scroller) {
+    const box = field.getBoundingClientRect();
+    const port = scroller.getBoundingClientRect();
+    return {
+        left: box.left - port.left + scroller.scrollLeft,
+        top: box.top - port.top + scroller.scrollTop,
+    };
+}
+/**
+ * Scroll the box around `field` to `at`, once it can: a field that is still opening has no box that
+ * scrolls yet, so it tries again each frame until the scroll lands. Returns what stops the tries.
+ */
+export function scrollOnce(field, at) {
+    let frame = 0;
+    let tries = 120;
+    const go = () => {
+        tries -= 1;
+        const scroller = scrollerOf(field);
+        if (scroller && scroller.scrollWidth > scroller.clientWidth) {
+            const { left, top } = at(scroller);
+            scroller.scrollTo({ left, top, behavior: 'instant' });
+            if (Math.abs(scroller.scrollLeft - left) < 1 && Math.abs(scroller.scrollTop - top) < 1)
+                return;
+        }
+        if (tries > 0)
+            frame = requestAnimationFrame(go);
+    };
+    go();
+    return () => {
+        cancelAnimationFrame(frame);
+    };
+}
+/** A mouse or a pen drags; a finger scrolls the field as it always does. */
+export const drags = (event) => event.button === 0 && event.pointerType !== 'touch';
+/**
+ * Follow the pointer that pressed until it lifts, wherever it goes: `onMove` with how far it is
+ * from where it pressed, then `onEnd`, with whether it lifted or the press was called off.
+ */
+export function follow(press, onMove, onEnd) {
+    const { pointerId, clientX, clientY } = press;
+    const move = (event) => {
+        if (event.pointerId === pointerId)
+            onMove(event.clientX - clientX, event.clientY - clientY);
+    };
+    const end = (event) => {
+        if (event.pointerId !== pointerId)
+            return;
+        globalThis.removeEventListener('pointermove', move);
+        globalThis.removeEventListener('pointerup', end);
+        globalThis.removeEventListener('pointercancel', end);
+        onEnd(event.type === 'pointerup');
+    };
+    globalThis.addEventListener('pointermove', move);
+    globalThis.addEventListener('pointerup', end);
+    globalThis.addEventListener('pointercancel', end);
+}
+/** A drag that starts on the field, off anything `held` matches, pans it. */
+export function usePan(held) {
+    const [panning, setPanning] = useState(false);
+    const pan = (event) => {
+        if (!drags(event) || event.target.closest(held))
+            return;
+        const scroller = scrollerOf(event.currentTarget);
+        if (!scroller)
+            return;
+        const { scrollLeft, scrollTop } = scroller;
+        setPanning(true);
+        follow(event, (x, y) => {
+            scroller.scrollTo({ left: scrollLeft - x, top: scrollTop - y, behavior: 'instant' });
+        }, () => {
+            setPanning(false);
+        });
+    };
+    return { panning, pan };
+}

package/ui/profile-editor.d.ts

@@ -0,0 +1,33 @@
+import { type Dispatch, type SetStateAction } from 'react';
+import { type StudioDraft, type StudioIssue } from '../mod.ts';
+export type SetDraft = Dispatch<SetStateAction<StudioDraft>>;
+/** A key slot, chosen from the slots the keys panel holds; each says which service its key is for. */
+export declare function SlotRow({ label, path, field, value, isRequired, given, onChange, }: {
+    label: string;
+    path: string;
+    field?: string;
+    value: string;
+    isRequired?: boolean;
+    /** The slot the model reads while this is blank: its provider's. */
+    given?: string;
+    onChange: (slot: string) => void;
+}): import("react").JSX.Element;
+/** Adds a new tool to the draft and opens it. */
+export declare function addToolSpec(draft: StudioDraft, setDraft: SetDraft, onSelect: (id: string) => void): void;
+/** A node's issues that name no field of it, over its rows. */
+export declare function IssueBanners({ issues }: {
+    issues: readonly StudioIssue[];
+}): import("react").JSX.Element | null;
+/**
+ * The editor for the tree node `selectedId`. The compile's issues for that node show on the rows
+ * of the fields they name; the rest show above it.
+ * Edits go straight to the draft; the page compiles it.
+ */
+export declare function ProfileEditor({ draft, setDraft, selectedId, onSelect, issues, }: {
+    draft: StudioDraft;
+    setDraft: SetDraft;
+    selectedId: string;
+    /** Selects another tree node: a tool, once added or picked from the list, or Tools once removed. */
+    onSelect: (id: string) => void;
+    issues: readonly StudioIssue[];
+}): import("react").JSX.Element | null;