@theoremjs/studio 0.3.4-next.429.g04f32ef → 0.3.4-next.431.ge13f488

package/ui/studio-screen.d.ts

@@ -1,4 +1,4 @@
-import { type FilesMerge, type SharedEntry, type StudioDraft, type StudioWorkspace } from '../mod.ts';
+import { type FilesMerge, type SharedEntry, type StudioDraft, type StudioRunsOn, type StudioWorkspace } from '../mod.ts';
 import { type Dispatch, type SetStateAction } from 'react';
 import { type ProjectFiles, type ProjectSession } from './lib/studio-project.ts';
 import { type RestoredStudio } from './lib/studio-session.ts';
@@ -54,13 +54,14 @@ declare function useStudioWorkspace(start: RestoredStudio, project: ProjectSessi
 };
 export type StudioWorkspaceState = ReturnType<typeof useStudioWorkspace>;
 /**
- * The studio's tree for a workspace, open on its `selected` node, where nothing changes anything:
- * a picture of the studio for a page that is not the studio, such as a home page. It writes no
- * storage and reports nothing.
+ * The studio's editor for a workspace, open on its `selected` node: the toolbar, with the issue
+ * count, over the inspector, with each issue on its row. Nothing on it changes anything: a picture
+ * of the studio for a page that is not the studio, such as a home page. It writes no storage and
+ * reports nothing. `on` is where the page's studio runs, so the issues are the ones it would show.
  */
-export declare function StudioTreePreview({ workspace, kernelVersion, }: {
+export declare function StudioEditorPreview({ workspace, on, }: {
     workspace: StudioWorkspace;
-    kernelVersion: string;
+    on: StudioRunsOn;
 }): import("react").JSX.Element;
 /** The studio, opened on `opened`, with what the page showing it provides. */
 export declare function StudioScreen({ opened, host }: {

package/ui/studio-screen.js

@@ -1523,38 +1523,36 @@ const TreeColumn = memo(function TreeColumn({ tree, draft, onAddAgent, listRef,
     return (_jsx(Section, { variant: "transparent", width: TREE_WIDTH, height: "100%", padding: 4, dividers: ['end'], children: _jsxs(VStack, { gap: 4, height: "100%", children: [_jsxs(HStack, { gap: 2, vAlign: "start", children: [_jsx(StackItem, { size: "fill", children: _jsxs(VStack, { gap: 1, children: [_jsx(Heading, { level: 3, children: "theorem studio" }), _jsx(Text, { type: "supporting", color: "secondary", children: `${project ? `${project.name} · ` : ''}@theoremjs/agents ${kernelVersion}` })] }) }), _jsx(SheetButton, { label: "Close sections", icon: IconX, sheet: null, setSheet: setSheet })] }), _jsx(StackItem, { size: "fill", children: _jsx(WorkspaceTreeLists, { tree: tree, draft: draft, onAddAgent: onAddAgent, listRef: listRef }) })] }) }));
 });
 /**
- * The studio's tree for a workspace, open on its `selected` node, where nothing changes anything:
- * a picture of the studio for a page that is not the studio, such as a home page. It writes no
- * storage and reports nothing.
+ * The studio's editor for a workspace, open on its `selected` node: the toolbar, with the issue
+ * count, over the inspector, with each issue on its row. Nothing on it changes anything: a picture
+ * of the studio for a page that is not the studio, such as a home page. It writes no storage and
+ * reports nothing. `on` is where the page's studio runs, so the issues are the ones it would show.
  */
-export function StudioTreePreview({ workspace, kernelVersion, }) {
-    const listRef = useRef(null);
-    const selectedId = workspace.selected;
-    const at = workspaceNodeRef(workspace, selectedId);
+export function StudioEditorPreview({ workspace, on, }) {
+    const selected = workspace.selected;
+    const at = workspaceNodeRef(workspace, selected);
     const focus = at && 'agent' in at ? at.agent : (workspace.agents[0]?.key ?? '');
     const draft = libraryDraft(workspace, focus) ?? createBlankDraft();
+    const compiled = useMemo(() => compileWorkspace(workspace, on), [workspace, on]);
+    const editing = innerNodeId(selected, focus) ?? 'identity';
     const still = () => { };
-    const tree = {
-        workspace,
-        focus,
-        selectedId,
-        list: 'agents',
-        ownsProviders: false,
-        setList: still,
-        onSelect: still,
-        update: still,
-        setDraft: still,
-        reset: () => undefined,
-        keys: null,
+    const view = {
+        keysOpen: false,
+        setKeysOpen: still,
+        editorView: 'editor',
+        setEditorView: still,
+        mapOpen: false,
+        setMapOpen: still,
+        settingsOpen: false,
+        open: still,
     };
-    return (_jsx(StudioHostContext.Provider, { value: { kernelVersion }, children: _jsx(TreeColumn, { tree: tree, draft: draft, onAddAgent: still, listRef: listRef, setSheet: still }) }));
+    return (_jsxs(VStack, { height: "100%", children: [_jsx(EditorToolbar, { heading: editorTitle(draft, editing), compiled: compiled, selected: selected, view: view, onIssue: still, getCode: null, project: null, setSheet: still }), _jsx(StackItem, { size: "fill", children: _jsx(RunsOn.Provider, { value: on, children: _jsx(ProfileEditor, { draft: draft, setDraft: still, selectedId: editing, onSelect: still, issues: editorIssuesOf(compiled, focus) }) }) })] }));
 }
 /**
  * The issue count, which goes to the next issue after the selected node and shows it there. Hidden
  * with none. It counts every issue, so what blocks a run or Save always has a way to it.
  */
-function IssueToken({ compile, selected, onIssue, }) {
-    const { compiled } = compile;
+function IssueToken({ compiled, selected, onIssue, }) {
     if (compiled.ok)
         return null;
     const issues = issuesLabel(compiled.issues.length);
@@ -1625,8 +1623,8 @@ function useDiscardAll({ store, filesChanged }) {
     }, [store, filesChanged, toast]);
 }
 /** The editor column's header: its title, the next issue, what to start from, Get code, and the view toggle. */
-function EditorToolbar({ heading, compile, selected, view, onIssue, project, getCode, setSheet, }) {
-    return (_jsx(Section, { variant: "transparent", padding: 3, dividers: ['bottom'], children: _jsxs(HStack, { gap: 1, vAlign: "center", children: [_jsx(SheetButton, { label: "Sections", icon: IconMenu2, sheet: "tree", setSheet: setSheet }), _jsx(StackItem, { size: "fill", children: heading && (_jsx("span", { title: heading, children: _jsx(Heading, { level: 4, maxLines: 1, children: heading }) })) }), _jsx(StackItem, { size: "static", children: _jsxs(HStack, { gap: 1, vAlign: "center", children: [_jsx(IssueToken, { compile: compile, selected: selected, onIssue: onIssue }), project] }) }), getCode, _jsx(ViewToggleButton, { view: view }), _jsx(SheetButton, { label: "Preview", icon: IconPlayerPlay, sheet: "preview", setSheet: setSheet })] }) }));
+function EditorToolbar({ heading, compiled, selected, view, onIssue, project, getCode, setSheet, }) {
+    return (_jsx(Section, { variant: "transparent", padding: 3, dividers: ['bottom'], children: _jsxs(HStack, { gap: 1, vAlign: "center", children: [_jsx(SheetButton, { label: "Sections", icon: IconMenu2, sheet: "tree", setSheet: setSheet }), _jsx(StackItem, { size: "fill", children: heading && (_jsx("span", { title: heading, children: _jsx(Heading, { level: 4, maxLines: 1, children: heading }) })) }), _jsx(StackItem, { size: "static", children: _jsxs(HStack, { gap: 1, vAlign: "center", children: [_jsx(IssueToken, { compiled: compiled, selected: selected, onIssue: onIssue }), project] }) }), getCode, _jsx(ViewToggleButton, { view: view }), _jsx(SheetButton, { label: "Preview", icon: IconPlayerPlay, sheet: "preview", setSheet: setSheet })] }) }));
 }
 /** Opens the Keys page, above the providers list, in the same form as Add provider. */
 function ManageKeysButton({ keys }) {
@@ -2145,7 +2143,7 @@ function EditorColumn({ heading, state, connection, view, compile, selected, edi
     }, [state.origins, state.workspace, selected, openOrigin]);
     const whole = rowOrigins?.scope.section;
     const said = over ? undefined : (whole ?? rowOrigins?.scope.partly);
-    return (_jsxs(VStack, { height: "100%", children: [_jsx(EditorToolbar, { heading: heading, compile: compile, selected: selected, view: view, onIssue: goToIssue, getCode: _jsx(ExportMenu, { store: state.store, compile: compile, copy: copy }), project: project && (_jsxs(_Fragment, { children: [state.conflict && (_jsx(Token, { label: conflictsLabel(state.conflict.merge.conflicts.length), color: "orange", description: "Choose between studio edits and source code", onClick: () => {
+    return (_jsxs(VStack, { height: "100%", children: [_jsx(EditorToolbar, { heading: heading, compiled: compile.compiled, selected: selected, view: view, onIssue: goToIssue, getCode: _jsx(ExportMenu, { store: state.store, compile: compile, copy: copy }), project: project && (_jsxs(_Fragment, { children: [state.conflict && (_jsx(Token, { label: conflictsLabel(state.conflict.merge.conflicts.length), color: "orange", description: "Choose between studio edits and source code", onClick: () => {
                                 state.showConflict(true);
                             } })), _jsx(ProjectTokens, { project: project, unloaded: state.files?.unloaded })] })), setSheet: setSheet }), shared && (_jsx(SharedLine, { entry: shared, workspace: state.workspace, selected: selected, onOpen: project
                     ? () => {