@theoremjs/studio 0.0.0-stage → 0.3.2

package/types.d.ts

@@ -0,0 +1,62 @@
+import { type AuthUnauthenticatedPolicy, type CustomToolType, type HttpMethod, type StudioAuthType, type ToolAccess, type ToolLoadTier, type ToolPermission } from '@theoremjs/agents/schema';
+/** The tool types a studio draft builds. */
+export type StudioToolType = CustomToolType;
+/** Those types, in the kernel's order. `builtin` is not one a draft builds. */
+export declare const STUDIO_TOOL_TYPES: CustomToolType[];
+/** What a file or a draft is told when a tool's type is not one of those. */
+export declare const STUDIO_TOOL_TYPE_MESSAGE: string;
+/** Serializable tool facet seed — UI adds `kind` / `expanded` in the frontend. */
+export type StudioToolSpecSeed = {
+    toolName: string;
+    toolType: StudioToolType;
+    description: string;
+    category: string;
+    access: ToolAccess;
+    permission: ToolPermission;
+    loadTier: ToolLoadTier;
+    paths: string[];
+    inputJson: string;
+    outputJson: string;
+    activity?: string;
+    activityPast?: string;
+    activityFailed?: string;
+    request?: string;
+    stubOutputJson?: string;
+    /** A function tool the page answers; the studio's page answers with the stub. */
+    answeredBy?: 'page';
+    endpoint?: string;
+    method?: HttpMethod;
+    headersJson?: string;
+    pathParams?: string[];
+    queryParams?: string[];
+    bodyParam?: string;
+    serverUrl?: string;
+    mcpToolName?: string;
+    /** An agent tool's agent, by its workspace key. */
+    agentKey?: string;
+    /** An agent tool's calls in one turn of its caller; `null` or absent: no cap but max steps. */
+    maxCallsPerTurn?: number | null;
+    authType?: StudioAuthType;
+    authSlot?: string;
+    authService?: string;
+    authHeaderName?: string;
+    authHeaderPrefix?: string;
+    /** An API key's query parameter: set, the key goes in the URL and in no header. */
+    authQueryParam?: string;
+    authUnauthenticated?: AuthUnauthenticatedPolicy;
+    authScopes?: string[];
+    authClientId?: string;
+    authRedirectUri?: string;
+};
+export type StudioToolSeed = {
+    id: string;
+    data: StudioToolSpecSeed;
+};
+export type StudioInputsSpec = {
+    text: boolean;
+    attachmentsAccept: readonly string[];
+    voiceAccept: readonly string[];
+    maxFiles: number;
+    maxBytes: number;
+    maxTurnBytes: number;
+};

package/types.js

@@ -0,0 +1,6 @@
+import { TOOL_TYPES, } from '@theoremjs/agents/schema';
+/** Those types, in the kernel's order. `builtin` is not one a draft builds. */
+export const STUDIO_TOOL_TYPES = TOOL_TYPES.filter((type) => type !== 'builtin');
+const toolTypeList = STUDIO_TOOL_TYPES.join(', ').replace(/, ([^,]+)$/, ', or $1');
+/** What a file or a draft is told when a tool's type is not one of those. */
+export const STUDIO_TOOL_TYPE_MESSAGE = `Tool type must be ${toolTypeList}.`;

package/ui/acting-as-button.d.ts

@@ -0,0 +1,2 @@
+/** Who runs act as, in the chat's header: opens the People settings, where the pick is made. */
+export declare function ActingAsButton(): import("react").JSX.Element | null;

package/ui/acting-as-button.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from '@astryxdesign/core/Button';
+import { Icon } from '@astryxdesign/core/Icon';
+import { IconUser } from '@tabler/icons-react';
+import { useActingAs } from "./lib/acting-as.js";
+import { openSettings } from "./lib/studio-settings.js";
+/** Who runs act as, in the chat's header: opens the People settings, where the pick is made. */
+export function ActingAsButton() {
+    const { offer, problem, actingAs } = useActingAs();
+    if (!offer && !problem)
+        return null;
+    const place = actingAs && offer?.places.find((each) => each.id === actingAs.place);
+    return (_jsx(Button, { label: actingAs ? `As: ${actingAs.person.label} · ${place?.label ?? actingAs.place}` : 'No one', variant: "ghost", size: "sm", icon: _jsx(Icon, { icon: IconUser, size: "sm" }), tooltip: "Who this run acts as", onClick: () => {
+            openSettings('people');
+        } }));
+}

package/ui/add-provider.d.ts

@@ -0,0 +1,13 @@
+import { type StudioProvider } from '../mod.ts';
+/**
+ * Adds a provider to the project from the first of `definitions`, under the first free id, and
+ * hands it to `onAdd`, which opens its page: its id, definition, connection, and key slots are set
+ * there. `taken` are the ids the workspace already holds. Compact, it is an icon beside a picker,
+ * whose `definitions` are those that serve what picks.
+ */
+export declare function AddProviderButton({ taken, onAdd, definitions, isCompact, }: {
+    taken: readonly string[];
+    onAdd: (provider: StudioProvider) => void;
+    definitions?: readonly string[];
+    isCompact?: boolean;
+}): import("react").JSX.Element;

package/ui/add-provider.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from '@astryxdesign/core/Button';
+import { Icon } from '@astryxdesign/core/Icon';
+import { IconButton } from '@astryxdesign/core/IconButton';
+import { IconPlus } from '@tabler/icons-react';
+import { kernelDefinitions, newProvider } from "../mod.js";
+/**
+ * Adds a provider to the project from the first of `definitions`, under the first free id, and
+ * hands it to `onAdd`, which opens its page: its id, definition, connection, and key slots are set
+ * there. `taken` are the ids the workspace already holds. Compact, it is an icon beside a picker,
+ * whose `definitions` are those that serve what picks.
+ */
+export function AddProviderButton({ taken, onAdd, definitions = kernelDefinitions(), isCompact = false, }) {
+    const add = () => {
+        const [definition] = definitions;
+        if (definition)
+            onAdd(newProvider(taken, definition));
+    };
+    return isCompact ? (_jsx(IconButton, { label: "New provider", variant: "ghost", size: "sm", icon: _jsx(Icon, { icon: IconPlus, size: "sm" }), tooltip: "New provider", onClick: add })) : (_jsx(Button, { label: "Add provider", variant: "ghost", size: "sm", width: "100%", icon: _jsx(Icon, { icon: IconPlus, size: "sm" }), style: { height: 'calc(var(--size-element-sm) - 4px)' }, onClick: add }));
+}

package/ui/boot-mark.css

@@ -0,0 +1,53 @@
+/* First load: the pen waits a beat, then finishes, dot included. A page that is ready inside that
+   beat never shows the mark (boot-mark.tsx reads the delay as the answer). */
+[data-boot] .theorem-mark {
+  --mark-delay: 240ms;
+  --mark-draw: 620ms;
+  --mark-draw-late: 560ms;
+  --mark-stagger: 200ms;
+  --mark-dot-at: 780ms;
+  --mark-dot-in: 220ms;
+}
+
+[data-boot] {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  display: grid;
+  place-items: center;
+  /* Literal, matching the inline paint in boot-paint.ts. The mark sits in the shell,
+	   outside the theme scope, so a surface token here is the library default. */
+  color: #fff;
+  background: #262626;
+}
+
+/* A project being read: the mark has given way and the shell is its own surface again. Once it
+   has pulled in beside the rail, the loader is that panel, and the map draws on it. */
+[data-boot]:not([data-phase="draw"]) {
+  background: none;
+}
+
+@media (width >= 768px) {
+  html[data-shell-move] [data-boot]:not([data-phase="draw"]) {
+    inset: var(--spacing-4) var(--spacing-4) var(--spacing-4) var(--spacing-12);
+  }
+}
+
+/* The map fades out before the panel pulls in to the page. */
+[data-boot] .read-map {
+  transition: opacity var(--shell-hold-ms) ease;
+}
+
+[data-boot][data-phase="leave"] .read-map {
+  opacity: 0;
+}
+
+/* Words for a screen reader only. */
+.boot-said {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}

package/ui/boot-mark.d.ts

@@ -0,0 +1,19 @@
+import type { Reading } from './lib/read-progress.ts';
+import { type ShellShape } from './shell-motion.ts';
+export interface BootMarkProps {
+    /** The shape the shell rests in for the page on screen, read when the mark gives way. */
+    shape: () => ShellShape;
+    /** Settles when the page under the mark is on screen. Left out, the page is ready with its fonts. */
+    ready?: Promise<unknown>;
+    /**
+     * A project being read for the page. With it, the drawn mark gives way, the panel pulls in
+     * beside the rail and the read is drawn there as a map. When the map has drawn all of it, the
+     * panel pulls in to the page's shape.
+     */
+    reading?: Reading;
+}
+/**
+ * Draws inside the shell panel. The shell starts full-bleed; this only decides when that panel
+ * pulls in over the page.
+ */
+export declare function BootMark(props: BootMarkProps): import("react").JSX.Element | null;

package/ui/boot-mark.js

@@ -0,0 +1,128 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The loader: the mark draws on the full-bleed shell, then that same panel pulls in to the shape of
+ * the page it opens. The website and the studio on its own both mount this in their shell. The
+ * studio also reads a project: its panel pulls in beside the rail first and the read is drawn there
+ * as it does.
+ */
+import { useEffect, useRef, useState } from 'react';
+import { runBoot } from "./lib/boot-sequence.js";
+import { ReadMap } from "./read-map.js";
+import { bootHasPlayed, HOLD_MS as FADE_MS, prefersReducedMotion, pullShellIn, revealShell, sleep, } from "./shell-motion.js";
+import { TheoremMark } from "./theorem-mark.js";
+import './boot-mark.css';
+const DRAW_CAP_MS = 2800;
+const FONT_CAP_MS = 500;
+/** Resolves when the mark's dot has drawn in, at once with reduced motion, or after the cap. */
+function markDrawn(root, reduced) {
+    return new Promise((resolve) => {
+        if (reduced) {
+            resolve();
+            return;
+        }
+        const dot = root.querySelector('.theorem-mark-dot');
+        const cap = globalThis.setTimeout(resolve, DRAW_CAP_MS);
+        const finish = () => {
+            globalThis.clearTimeout(cap);
+            resolve();
+        };
+        if (!(dot instanceof SVGCircleElement)) {
+            finish();
+            return;
+        }
+        const finished = dot.getAnimations().some((animation) => animation.playState === 'finished');
+        if (finished) {
+            finish();
+            return;
+        }
+        const onEnd = (event) => {
+            if (event.animationName !== 'theorem-mark-dot-in')
+                return;
+            dot.removeEventListener('animationend', onEnd);
+            finish();
+        };
+        dot.addEventListener('animationend', onEnd);
+    });
+}
+/** Whether the pen has begun. Until it does, the panel is blank and there is nothing to wait out. */
+function penHasStarted(root) {
+    const pen = root.querySelector('.theorem-mark-stroke')?.getAnimations()[0];
+    const delay = pen?.effect?.getTiming().delay ?? 0;
+    return Number(pen?.currentTime ?? 0) > delay;
+}
+/** Resolves when the fonts are ready, or after the cap. */
+function fontsSettled() {
+    return Promise.race([document.fonts.ready.then(() => undefined), sleep(FONT_CAP_MS)]);
+}
+/**
+ * The mark draws in the shell only when the page is still loading. When the dot lands, or at once
+ * when the page was ready first, that same panel pulls in over the page.
+ */
+function useBootPhase({ shape, ready, reading }) {
+    const [phase, setPhase] = useState(() => (bootHasPlayed() ? 'done' : 'draw'));
+    const mapDrawn = useRef(() => { });
+    const rootRef = useRef(null);
+    const latest = useRef({ shape, ready, reading });
+    latest.current = { shape, ready, reading };
+    useEffect(() => {
+        const root = rootRef.current;
+        if (!root || bootHasPlayed())
+            return;
+        const reduced = prefersReducedMotion();
+        return runBoot({
+            reads: !reduced && Boolean(latest.current.reading),
+            reduced,
+            fadeMs: FADE_MS,
+            // A page that failed to load is still a page to show.
+            settled: Promise.all([
+                fontsSettled(),
+                Promise.resolve(latest.current.ready).catch(() => undefined),
+            ]),
+            mapDrawn: new Promise((resolve) => {
+                mapDrawn.current = resolve;
+            }),
+            markDrawn: () => markDrawn(root, reduced),
+            penHasStarted: () => penHasStarted(root),
+            pullIn: pullShellIn,
+            sleep,
+            show: setPhase,
+            reveal: () => {
+                revealShell(latest.current.shape());
+                setPhase('done');
+            },
+        });
+    }, []);
+    return { phase, rootRef, mapDrawn };
+}
+/** The rail beside the panel a loader draws in. */
+function railOf(root) {
+    return (root?.closest('.astryx-app-shell')?.querySelector('.astryx-app-shell-sidenav') ??
+        null);
+}
+/**
+ * The rail shows beside a project's read but opens nothing until the page is there: a press or a
+ * key on it would act on a page that has not loaded.
+ */
+function useRailHeld(rootRef, held) {
+    useEffect(() => {
+        const rail = held ? railOf(rootRef.current) : null;
+        if (!rail || rail.hasAttribute('inert'))
+            return;
+        rail.setAttribute('inert', '');
+        return () => {
+            rail.removeAttribute('inert');
+        };
+    }, [rootRef, held]);
+}
+/**
+ * Draws inside the shell panel. The shell starts full-bleed; this only decides when that panel
+ * pulls in over the page.
+ */
+export function BootMark(props) {
+    const { phase, rootRef, mapDrawn } = useBootPhase(props);
+    useRailHeld(rootRef, phase === 'map' || phase === 'leave');
+    if (phase === 'done')
+        return null;
+    const mapped = (phase === 'map' || phase === 'leave') && props.reading;
+    return (_jsxs("div", { ref: rootRef, "data-boot": "", "data-phase": phase, role: "status", "aria-live": "polite", "aria-label": "Loading", children: [phase === 'draw' && _jsx(TheoremMark, {}), mapped && _jsx("span", { className: "boot-said", children: "Reading your project" }), mapped && _jsx(ReadMap, { reading: mapped, onDrawn: () => mapDrawn.current() })] }));
+}

package/ui/boot-paint.d.ts

@@ -0,0 +1,8 @@
+/**
+ * The first frame, before any stylesheet has loaded: the shell is already the full-bleed panel the
+ * mark draws in. A document that shows the boot mark puts `data-boot-pending` on `<html>` and this
+ * in an inline `<style>`. Literal colours: nothing of the theme has loaded yet.
+ */
+export declare const BOOT_PAINT = "html{color-scheme:dark}html,body{margin:0;background:#000}html[data-boot-pending],html[data-boot-pending] body{background:#262626}html[data-boot-pending] .astryx-app-shell{height:100dvh}html[data-boot-pending] .astryx-app-shell-sidenav{position:absolute;inset-block:0;inset-inline-start:0;z-index:0;width:3rem}html[data-boot-pending] #astryx-app-shell-main{position:relative;z-index:1;width:100%;height:100%;max-width:none;margin:0;border-radius:0;clip-path:none;background:#262626;color:#fff}html[data-boot-pending] #astryx-app-shell-main>:not([data-boot]){visibility:hidden}html[data-boot-pending] [data-boot]{position:absolute;inset:0;z-index:2;display:grid;place-items:center;background:#262626;color:#fff}";
+/** Without scripts nothing lifts the cover, so the page shows at once. Goes in a `<noscript>` style. */
+export declare const BOOT_PAINT_NOSCRIPT = "html[data-boot-pending],html[data-boot-pending] body{background:#000}html[data-boot-pending] #astryx-app-shell-main>:not([data-boot]){visibility:visible !important}[data-boot]{display:none !important}";

package/ui/boot-paint.js

@@ -0,0 +1,8 @@
+/**
+ * The first frame, before any stylesheet has loaded: the shell is already the full-bleed panel the
+ * mark draws in. A document that shows the boot mark puts `data-boot-pending` on `<html>` and this
+ * in an inline `<style>`. Literal colours: nothing of the theme has loaded yet.
+ */
+export const BOOT_PAINT = 'html{color-scheme:dark}html,body{margin:0;background:#000}html[data-boot-pending],html[data-boot-pending] body{background:#262626}html[data-boot-pending] .astryx-app-shell{height:100dvh}html[data-boot-pending] .astryx-app-shell-sidenav{position:absolute;inset-block:0;inset-inline-start:0;z-index:0;width:3rem}html[data-boot-pending] #astryx-app-shell-main{position:relative;z-index:1;width:100%;height:100%;max-width:none;margin:0;border-radius:0;clip-path:none;background:#262626;color:#fff}html[data-boot-pending] #astryx-app-shell-main>:not([data-boot]){visibility:hidden}html[data-boot-pending] [data-boot]{position:absolute;inset:0;z-index:2;display:grid;place-items:center;background:#262626;color:#fff}';
+/** Without scripts nothing lifts the cover, so the page shows at once. Goes in a `<noscript>` style. */
+export const BOOT_PAINT_NOSCRIPT = 'html[data-boot-pending],html[data-boot-pending] body{background:#000}html[data-boot-pending] #astryx-app-shell-main>:not([data-boot]){visibility:visible !important}[data-boot]{display:none !important}';

package/ui/brand-icons.d.ts

@@ -0,0 +1,57 @@
+import type { ReactElement, SVGProps } from 'react';
+/** Gemini mark, for a provider on the Google adapter. */
+export declare function IconGemini(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
+/** Google mark, for the Google provider. */
+export declare function IconGoogle(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
+/** OpenAI mark, for a provider on the OpenAI-compatible adapter. */
+export declare function IconOpenAi(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
+/** OpenRouter mark (the current one), for the OpenRouter provider. */
+export declare function IconOpenRouter(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
+/** Cursor mark, for the editor. */
+export declare function IconCursor(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
+/** Anthropic mark, from LobeHub Icons. */
+export declare function IconAnthropic(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
+/** Mistral mark, from LobeHub Icons. */
+export declare function IconMistral(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
+/** Qwen mark, from LobeHub Icons. */
+export declare function IconQwen(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
+/** DeepSeek mark, from LobeHub Icons. */
+export declare function IconDeepSeek(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
+/** Meta mark, from LobeHub Icons. */
+export declare function IconMeta(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
+/** XAI mark, from LobeHub Icons. */
+export declare function IconXai(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
+/** Moonshot mark, from LobeHub Icons. */
+export declare function IconMoonshot(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
+/** ZAI mark, from LobeHub Icons. */
+export declare function IconZai(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
+/** Nvidia mark, from LobeHub Icons. */
+export declare function IconNvidia(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
+/** Minimax mark, from LobeHub Icons. */
+export declare function IconMinimax(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
+/** Tencent mark, from LobeHub Icons. */
+export declare function IconTencent(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
+/** ByteDance mark, from LobeHub Icons. */
+export declare function IconByteDance(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
+/** Cohere mark, from LobeHub Icons. */
+export declare function IconCohere(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
+/** XiaomiMiMo mark, from LobeHub Icons. */
+export declare function IconXiaomi(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
+/** Perplexity mark, from LobeHub Icons. */
+export declare function IconPerplexity(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
+/** Stepfun mark, from LobeHub Icons. */
+export declare function IconStepfun(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
+/** NousResearch mark, from LobeHub Icons. */
+export declare function IconNousResearch(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
+/** Poolside mark, from LobeHub Icons. */
+export declare function IconPoolside(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
+/** Liquid mark, from LobeHub Icons. */
+export declare function IconLiquid(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
+/** Sakana mark, from LobeHub Icons. */
+export declare function IconSakana(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
+/** Microsoft mark, from LobeHub Icons. */
+export declare function IconMicrosoft(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
+/** The family's mark for a model id, or undefined when the family has no mark. */
+export declare function modelFamilyMark(modelId: string): ((props: SVGProps<SVGSVGElement>) => ReactElement) | undefined;
+/** TypeSafe mark, from its vector logo, centred in a square. */
+export declare function IconTypeSafe(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;