@mosetta/editor 0.0.32 → 0.0.34

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @mosetta/editor
 
+## 0.0.34
+
+- A new page starts from the site's page preset: the prefab `pagePreset` — the blocks every page of
+  the site begins with, and an `outlet` block where the page's own go. The preset is copied into the
+  page; a site without one starts its pages in the frame of its home page. "Create a page" and the
+  content API's `createPage` (with `preset: true`) both do it. The page preset may hold prefabs.
+
+## 0.0.33
+
+- The assistant's chat lets the person choose the model it works with, among the ones the platform
+  offers (a larger one writes blocks that look better, and costs more); the choice is kept in this
+  browser.
+
 ## 0.0.32
 
 - Built with the framework 0.0.12, whose `@mosetta/react` ships the guide to writing tiles — a new

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mosetta/editor",
-  "version": "0.0.32",
+  "version": "0.0.34",
   "license": "MIT",
   "description": "mosetta visual editor tile palette: block picker, page tree, inspector, isolated draft preview and the content API behind them.",
   "repository": {
@@ -14,15 +14,15 @@
   "dependencies": {
     "react": "*",
     "react-dom": "*",
-    "@mosetta/core": "0.0.12",
-    "@mosetta/di": "0.0.12",
-    "@mosetta/stores": "0.0.12",
     "@mosetta/content": "0.0.12",
+    "@mosetta/di": "0.0.12",
+    "@mosetta/core": "0.0.12",
     "@mosetta/react": "0.0.12",
-    "@mosetta/settings": "0.0.12",
-    "@mosetta/server-action": "0.0.12",
     "@mosetta/runtime": "0.0.12",
-    "@mosetta/ui": "0.0.12"
+    "@mosetta/stores": "0.0.12",
+    "@mosetta/settings": "0.0.12",
+    "@mosetta/ui": "0.0.12",
+    "@mosetta/server-action": "0.0.12"
   },
   "devDependencies": {
     "@types/react": "*",

package/tiles/content/content.server.ts

@@ -42,6 +42,8 @@ import type { ZodType } from 'zod';
 import { projectNamespaceOf, unitOf } from '@mosetta/content';
 import type { IContentTransport } from '@mosetta/content';
 import { CONFIG_PATH } from '@mosetta/content/paths';
+import { homeFrameOf, PAGE_PRESET, startedPage } from './pagePreset';
+import type { TPageStart } from './pagePreset';
 import { blockSchemas, settingsIssueLine, treeSettingsIssues } from '@mosetta/settings/check';
 import type { ICatalogSettingsEntry } from '@mosetta/settings/check';
 import {
@@ -194,11 +196,14 @@ function pageReferences(page: IPageDoc): string[] {
 /**
  * A tree's references checked the way each kind exists: a module against the catalog; a live
  * PREFAB is content (the project's) or the distribution's and never in the catalog — a missing one
- * renders the node's children without it. Inside a prefab a prefab is refused: one level only.
+ * renders the node's children without it. Inside a prefab a prefab is refused: one level only —
+ * except in the site's page preset, which is never placed but copied into a new page, its prefabs
+ * becoming the page's own (pagePreset.ts).
  */
-function referenceIssues(refs: readonly string[], known: ReadonlySet<string>, kind: ContentKind): string[] {
+function referenceIssues(refs: readonly string[], known: ReadonlySet<string>, kind: ContentKind, name: string): string[] {
+  const holdsPrefabs = kind === 'pages' || name === PAGE_PRESET;
   return refs.flatMap((ref) => {
-    if (unitOf(ref) !== null) return kind === 'prefabs' ? [`a prefab cannot hold a prefab: ${ref}`] : [];
+    if (unitOf(ref) !== null) return holdsPrefabs ? [] : [`a prefab cannot hold a prefab: ${ref}`];
     return known.has(ref) ? [] : [`unknown tile reference: ${ref}`];
   });
 }
@@ -325,20 +330,43 @@ class LoadPageDraftAction extends ContentAction<TDraftInput, { draft: ILoadedDra
   }
 }
 
-type TPageInput = { name: string; page: IPageDoc } & IKindInput;
+type TPageInput = { name: string; page: IPageDoc; preset?: boolean } & IKindInput;
 
 @DiServerAction(createPageToken)
-class CreatePageAction extends ContentAction<TPageInput, { draftId: string }> {
+class CreatePageAction extends ContentAction<TPageInput, { draftId: string; started?: TPageStart }> {
   constructor(@DiInject(CONTENT_REPOSITORY_TOKEN) private readonly content: ContentRepository) {
     super();
   }
 
   protected inputSchema(builder: ICreateSchema['builder'], s: ContentSchemas) {
-    return builder.object({ name: s.entityName, page: s.pageDoc, kind: s.contentKind.optional() }) as unknown as ZodType<TPageInput>;
+    return builder.object({ name: s.entityName, page: s.pageDoc, preset: builder.boolean().optional(), kind: s.contentKind.optional() }) as unknown as ZodType<TPageInput>;
   }
 
-  protected async run({ name, page, kind = 'pages' }: TPageInput) {
-    return { draftId: await this.content.create(kind, name, storedFormOf(kind, page), kind === 'prefabs' ? 'unit' : undefined) };
+  // with `preset`, a page starts as the site's pages do (pagePreset.ts): its blocks go into the
+  // site's page preset, or into its home page's frame
+  protected async run({ name, page, preset = false, kind = 'pages' }: TPageInput) {
+    const start = preset && kind === 'pages' ? await this.startOf() : null;
+    const placed = start ? startedPage(start.blocks, page.children ?? []) : null;
+    const made = placed?.started ? { ...page, children: placed.children } : page;
+    const draftId = await this.content.create(kind, name, storedFormOf(kind, made), kind === 'prefabs' ? 'unit' : undefined);
+    return { draftId, ...(placed?.started ? { started: start!.from } : {}) };
+  }
+
+  /** what a new page of this site starts with: its preset, else its home page's frame; null — neither */
+  private async startOf(): Promise<{ from: TPageStart; blocks: IBlueprintNodeDoc[] } | null> {
+    const published = async (kind: ContentKind, name: string): Promise<IPageDoc | null> => {
+      try {
+        return editedFormOf(kind, (await this.content.load<unknown>(kind, name)).doc);
+      } catch (e) {
+        if (e instanceof ContentError) return null;
+        throw e;
+      }
+    };
+    const preset = await published('prefabs', PAGE_PRESET);
+    if (preset) return { from: 'pagePreset', blocks: preset.children ?? [] };
+    const home = await published('pages', 'home');
+    const frame = home ? homeFrameOf(home.children ?? []) : [];
+    return frame.length ? { from: 'home', blocks: frame } : null;
   }
 }
 
@@ -367,7 +395,7 @@ class SavePageDraftAction extends ContentAction<TSaveInput, { warnings: string[]
   // NOT soft: a page whose seq does not follow the stored draft's comes back as CONFLICT.
   protected async run({ name, draftId, page, kind = 'pages' }: TSaveInput) {
     const known = await this.catalog.knownReferences();
-    const warnings = referenceIssues(pageReferences(page), known, kind);
+    const warnings = referenceIssues(pageReferences(page), known, kind, name);
     await this.content.saveDraft(kind, name, draftId, storedFormOf(kind, page));
     return { warnings };
   }
@@ -450,7 +478,7 @@ class PublishPageAction extends ContentAction<TPublishInput, { live: number }> {
     const known = new Set(descriptors.map((d) => d.id));
     const edited = editedFormOf(kind, doc);
     const refs = pageReferences(edited);
-    issues.push(...referenceIssues(refs, known, kind));
+    issues.push(...referenceIssues(refs, known, kind, name));
     issues.push(...treeSettingsIssues(edited, blockSchemas(descriptors as readonly ICatalogSettingsEntry[])).map(settingsIssueLine));
 
     if (kind === 'pages') {

package/tiles/content/contentCommon.ts

@@ -63,9 +63,13 @@ export const loadPageDraftToken = new ServerActionToken<
   ContentActionResult<{ draft: ILoadedDraft<IPageDoc> }>
 >({ actionName: 'loadPageDraft', serverModuleName: 'content', tags: ['pages'] });
 
+/**
+ * A new page or prefab. With `preset`, a page starts as the site's pages do: its blocks inside the
+ * site's page preset (or its home page's frame) — `started` says which, when either was used.
+ */
 export const createPageToken = new ServerActionToken<
-  { name: string; page: IPageDoc } & IKindInput,
-  ContentActionResult<{ draftId: string }>
+  { name: string; page: IPageDoc; preset?: boolean } & IKindInput,
+  ContentActionResult<{ draftId: string; started?: 'pagePreset' | 'home' }>
 >({ actionName: 'createPage', serverModuleName: 'content', invalidates: ['pages'] });
 
 export const savePageDraftToken = new ServerActionToken<

package/tiles/content/pagePreset.ts

@@ -0,0 +1,81 @@
+// A NEW PAGE STARTS FROM THE SITE'S PAGE PRESET: the prefab `pagePreset` — the blocks every new page
+// of the site begins with (its theme, its translations, a sign-in wrapper, whatever the site wants
+// on all of its pages), and an OUTLET block where the page's own blocks go. A site without one starts
+// its pages in the frame of its home page: the prefabs that page is built in, one inside the other.
+// The preset is COPIED into the page, not referenced: changing it changes the pages made after,
+// never the ones made before. One rule for every way a page is made — the editor's Create, the
+// assistant's create_page — so no author has to remember what a page of this site needs.
+import type { IBlueprintNodeDoc } from '@mosetta/content';
+import { isOutletReference, unitOf } from '@mosetta/content/units';
+
+/** the prefab a site names its page preset by */
+export const PAGE_PRESET = 'pagePreset';
+
+/** where a new page's start came from: the site's preset, or its home page's frame */
+export type TPageStart = 'pagePreset' | 'home';
+
+type TNode = IBlueprintNodeDoc;
+
+const idsIn = (nodes: readonly TNode[]): string[] => nodes.flatMap((node) => [node.id, ...idsIn(node.children ?? [])]);
+
+/**
+ * The frame of a home page: its blocks while they are one prefab inside another, outermost first,
+ * each without the page's own blocks — none when the page's blocks are not one prefab.
+ */
+export function homeFrameOf(home: readonly TNode[]): TNode[] {
+  const chain: TNode[] = [];
+  for (let level = home; level.length === 1 && unitOf(level[0].reference); level = level[0].children ?? []) chain.push(level[0]);
+  return chain.reduceRight<TNode[]>((inner, { children: _children, ...node }) => [{ ...node, children: inner }], []);
+}
+
+/** the first outlet of a tree in document order, as the path of child indexes leading to it */
+function outletPath(nodes: readonly TNode[]): number[] | null {
+  for (let i = 0; i < nodes.length; i++) {
+    if (isOutletReference(nodes[i].reference)) return [i];
+    const below = outletPath(nodes[i].children ?? []);
+    if (below) return [i, ...below];
+  }
+  return null;
+}
+
+/** the tree with the node at `path` replaced by `content` */
+function replacedAt(nodes: readonly TNode[], path: readonly number[], content: readonly TNode[]): TNode[] {
+  const [at, ...rest] = path;
+  if (!rest.length) return [...nodes.slice(0, at), ...content, ...nodes.slice(at + 1)];
+  return nodes.map((node, i) => (i === at ? { ...node, children: replacedAt(node.children ?? [], rest, content) } : node));
+}
+
+/** the tree with `content` added to its innermost block while the blocks are one inside another */
+function appendedInside(nodes: readonly TNode[], content: readonly TNode[]): TNode[] {
+  if (nodes.length !== 1) return [...nodes, ...content];
+  const [only] = nodes;
+  const children = only.children ?? [];
+  return [{ ...only, children: children.length === 1 ? appendedInside(children, content) : [...children, ...content] }];
+}
+
+/** the start's blocks renamed where the page's own blocks already have an id: the page's ids stay */
+function withFreeIds(nodes: readonly TNode[], taken: Set<string>): TNode[] {
+  return nodes.map((node) => {
+    let id = node.id;
+    if (taken.has(id)) {
+      let n = 1;
+      while (taken.has(`${node.id}-preset${n > 1 ? n : ''}`)) n++;
+      id = `${node.id}-preset${n > 1 ? n : ''}`;
+    }
+    taken.add(id);
+    return { ...node, id, children: withFreeIds(node.children ?? [], taken) };
+  });
+}
+
+/**
+ * A new page's blocks: the start's (a copy) with the page's own `content` in its outlet — or, with
+ * no outlet, inside its innermost block. Content that already begins with a prefab of the start's
+ * (its author built the frame) is taken as it is; so is everything when the start is empty.
+ */
+export function startedPage(start: readonly TNode[], content: readonly TNode[]): { children: TNode[]; started: boolean } {
+  const startPrefabs = new Set(start.map((node) => node.reference).filter((reference) => unitOf(reference)));
+  if (!start.length || content.some((node) => startPrefabs.has(node.reference))) return { children: [...content], started: false };
+  const copy = withFreeIds(structuredClone(start), new Set(idsIn(content)));
+  const path = outletPath(copy);
+  return { children: path ? replacedAt(copy, path, content) : appendedInside(copy, content), started: true };
+}

package/tiles/pagesPanel/pagesPanel.component.tsx

@@ -1216,7 +1216,8 @@ function CreateModal({ routes, own, onClose, onJump, onCreated }: ICreateModalPr
   const submit = (): void => {
     if (!name || create.isLoading()) return;
     createdRef.current = name;
-    create.start!({ name, page: { id: name, reference: rootId, pattern: byName ? PREFAB_CANVAS_PATTERN : trimmed, children: [] }, kind });
+    // a page starts as the site's pages do — in its page preset (or its home page's frame)
+    create.start!({ name, page: { id: name, reference: rootId, pattern: byName ? PREFAB_CANVAS_PATTERN : trimmed, children: [] }, kind, ...(byName ? {} : { preset: true }) });
   };
 
   return (

package/tiles/workbench/assistant.css

@@ -68,6 +68,21 @@
   font-variant-numeric: tabular-nums;
 }
 
+.assistant__model {
+  max-width: 11em;
+  padding: 2px 4px;
+  border: 1px solid var(--wb-border, #e4e4e7);
+  border-radius: 6px;
+  background: #ffffff;
+  color: var(--wb-ink, #18181b);
+  font: inherit;
+  font-size: 0.85em;
+}
+
+.assistant__model:disabled {
+  opacity: 0.5;
+}
+
 .assistant__head-button {
   padding: 3px 8px;
   border: 1px solid transparent;

package/tiles/workbench/assistant.tsx

@@ -28,6 +28,7 @@ import {
   EMPTY_CHAT,
   IChatState,
   IDraftTouched,
+  modelLabel,
   nodeOfCall,
   TChatItem,
   touchedNodes,
@@ -48,6 +49,23 @@ function readChat(): IChatState {
   return EMPTY_CHAT;
 }
 
+/** the model the person chose, kept for this browser — one the platform no longer offers is forgotten */
+const MODEL_KEY = 'mosetta-assistant-model';
+
+function readModel(): string | null {
+  try {
+    return window.localStorage.getItem(MODEL_KEY);
+  } catch {
+    return null;
+  }
+}
+
+function writeModel(model: string): void {
+  try {
+    window.localStorage.setItem(MODEL_KEY, model);
+  } catch { /* storage denied: the choice lives for the page only */ }
+}
+
 function writeChat(state: IChatState): void {
   try {
     window.sessionStorage.setItem(storageKey(), JSON.stringify(state));
@@ -232,6 +250,10 @@ export function AssistantPanel({ placement, transcription, onClose, onWorking }:
   const draftRef = useRef(draft);
   draftRef.current = draft;
   const [working, setWorking] = useState(false);
+  // the models the platform offers, its own first; the one chosen goes with every message
+  const [models, setModels] = useState<readonly string[]>([]);
+  const [chosen, setChosen] = useState<string | null>(readModel);
+  const model = chosen && models.includes(chosen) ? chosen : models[0] ?? null;
   // over Home and the lists the island folds to its input when the person wants the page back
   const [folded, setFolded] = useState(false);
   const abort = useRef<AbortController | null>(null);
@@ -239,6 +261,19 @@ export function AssistantPanel({ placement, transcription, onClose, onWorking }:
   const input = useRef<HTMLTextAreaElement>(null);
   const dictation = useDictation(setDraft, () => draftRef.current, transcription);
   useEffect(() => writeChat(chat), [chat]);
+  useEffect(() => {
+    let live = true;
+    fetch(ASSISTANT_PATH, { headers: { accept: 'application/json' } })
+      .then((res) => (res.ok ? res.json() as Promise<{ models?: unknown }> : null))
+      .then((answer) => {
+        const listed = Array.isArray(answer?.models) ? answer.models.filter((m): m is string => typeof m === 'string') : [];
+        if (live) setModels(listed);
+      })
+      .catch(() => undefined);
+    return () => {
+      live = false;
+    };
+  }, []);
   useEffect(() => {
     list.current?.scrollTo({ top: list.current.scrollHeight });
   }, [chat.items, folded]);
@@ -353,7 +388,7 @@ export function AssistantPanel({ placement, transcription, onClose, onWorking }:
       const res = await fetch(ASSISTANT_PATH, {
         method: 'POST',
         headers: { 'content-type': 'application/json', accept: 'text/event-stream' },
-        body: JSON.stringify({ history: chat.history, input: { text: message, context: contextNow() } }),
+        body: JSON.stringify({ history: chat.history, input: { text: message, context: contextNow(), ...(model && model !== models[0] ? { model } : {}) } }),
         signal: controller.signal,
       });
       if (!res.ok || !res.body) {
@@ -389,7 +424,7 @@ export function AssistantPanel({ placement, transcription, onClose, onWorking }:
         di.getByToken(SERVER_DATA_MANAGER).invalidate(['pages']);
       }
     }
-  }, [chat, di, dictation, openDraft, reload, sessionsOn, working]);
+  }, [chat, di, dictation, model, models, openDraft, reload, sessionsOn, working]);
 
   const startOver = (): void => {
     if (working) return;
@@ -404,6 +439,23 @@ export function AssistantPanel({ placement, transcription, onClose, onWorking }:
            data-working={working || undefined}>
       <div className="assistant__head">
         <span className="assistant__title">Assistant</span>
+        {models.length > 1 && model ? (
+          <select className="assistant__model"
+                  data-test-id="assistant-model"
+                  aria-label="The model the assistant works with"
+                  data-tooltip="The model the assistant works with — a larger one does better and costs more"
+                  value={model}
+                  disabled={working}
+                  onChange={(e) => {
+                    setChosen(e.target.value);
+                    writeModel(e.target.value);
+                  }}>
+            {models.map((m) => (
+              <option key={m}
+                      value={m}>{modelLabel(m)}</option>
+            ))}
+          </select>
+        ) : null}
         {chat.cost > 0 ? <span className="assistant__cost"
                                data-tooltip="What this conversation has cost">${chat.cost.toFixed(3)}</span> : null}
         <button type="button"

package/tiles/workbench/assistantChat.ts

@@ -163,3 +163,9 @@ export function nodeOfCall(name: string, args: unknown): string | null {
   }
   return null;
 }
+
+/** a model as the person reads it: `anthropic/claude-opus-5.5` → `Claude Opus 5.5` */
+export function modelLabel(id: string): string {
+  return id.slice(id.indexOf('/') + 1).split('-').filter(Boolean)
+    .map((word) => (word === 'gpt' ? 'GPT' : `${word[0].toUpperCase()}${word.slice(1)}`)).join(' ');
+}