wizards 0.4.0 → 0.4.1

package/apps/runtime/dist/agents/studio-assistant.js

@@ -1,11 +1,12 @@
 import { anthropic } from "@ai-sdk/anthropic";
-import { cleanAssetSections, cleanLogoSections, FACT_TYPES, factKey, gradientCss, PROJECT_FILE_KINDS, PROJECT_LIMITS, parseGradient, RULE_MARKS, textStyleLine, } from "@engenty-wizards/shared/projects";
+import { cleanAssetSections, cleanLogoSections, FACT_TYPES, FONT_USES, factKey, gradientCss, PROJECT_FILE_KINDS, PROJECT_LIMITS, parseGradient, RULE_MARKS, textStyleLine, } from "@engenty-wizards/shared/projects";
 import { Agent } from "@mastra/core/agent";
 import { createTool } from "@mastra/core/tools";
 import { nanoid } from "nanoid";
 import { z } from "zod";
 import { knowsTools } from "../assistant/knows.js";
 import { PRIMER } from "../assistant/primer.js";
+import { currentFeatures } from "../features.js";
 import { attachTools, contextWindowOf, costOf, gatewayTools, textModel, usageOf, } from "../models.js";
 import { ServiceError } from "../services/errors.js";
 import { knowledgeCounts } from "../services/knowledge.js";
@@ -48,7 +49,7 @@ THE SPACE
 - Colours: two to six, the main one first, each with a name that says what it is for ("Primär", "Hintergrund", "Text"). Take them from the stylesheet's variables or its most used colours, never from photos. set_colors replaces the list: pass all colours that should remain. Colours in no section are the standard ones; the first of them is the accent. Colour sections are optional like logo sections: only for a further palette a brand guide or the person names for its own use ("Illustration – drawings and charts"), never for the standard colours. A brand's gradients (set_gradients, as CSS) only where a brand guide or the site's stylesheet has them; patterns and background fills are pictures the person uploads.
 - Logos: save the best candidate (an SVG or a large PNG rather than a favicon); a second one only if it truly differs (for dark ground, a signet). A few images that show the business (header, team, products) may be saved as assets — a handful, never everything.
 - Logo sections and rules are optional, and most spaces need neither. Logos in no section are the standard ones; the first of them is the main logo. Add a section (set_logo_sections) only for further variants that a brand guide, a brand or press page or the person says are used elsewhere: the title names the variant ("Logomark", "Wordmark"), the description says when to use it ("Small spaces: app icons, favicons"). The standard logos never go into a section; one logo, or a light and a dark one whose descriptions already tell them apart, get no sections. Rules (set_rules, for the logos, the colours or the type) are short rows, one rule each, with a sign: do ("Keep clear space of the mark's height on all sides"), dont ("Place it on photos"), important, question (something to check with the person), number (steps in order), or none for a plain note (minimum size, file formats). Only what such a source or the person states; never invent rules and never write general advice a brand guide did not say.
-- Typography: the brand's fonts (set_typography), each with what it is for ("Headings", "Body text") and the weights it uses — from the website's stylesheet (read_website lists its fonts) or a brand guide; system and generic faces are no brand fonts. A type scale (text styles: name, size, weight, line height, letter spacing) only when a brand guide gives one.
+- Typography: the brand's fonts (set_typography), each with what it is for ("Headings", "Body text") and the weights it uses — from the website's stylesheet (read_website lists its fonts) or a brand guide; system and generic faces are no brand fonts. A font's licence and what it may be used for (web, documents, print, images, video) only where a brand guide, the font's own page or the person says so; the wizards keep to it. A type scale (text styles: name, size, weight, line height, letter spacing) only when a brand guide gives one.
 - Asset sections are optional too: tabs of one kind each ("Icons", "Background images"), made with set_asset_sections only when the space holds enough assets of clearly different kinds or the person asks; a handful of pictures stay in the general tab.
 - Files the person attached are stored already; the message names them. look_at_file shows you a picture or a document's text. Give a file a description with describe_file when it has none or the person says what it is. Take facts from a document when asked.
 - Wissen (German „Wissen“) is what the wizards' steps look things up in: pages, tables and files, kept apart by typed Kategorien. Documents the person attaches are read into Wissen by themselves: say so; do not copy their text into facts unless asked. A website, a sitemap or a folder whose entries should go into Wissen is a source: where a tool proposes sources, use it (the person takes the proposal on its card); where there is none, say that sources need the Sources plugin.
@@ -125,9 +126,8 @@ async function projectState(userId, projectId) {
         // Optional parts are only there when the space has them.
         ...(p.brand.colorSections?.length
             ? {
-                colorSections: p.brand.colorSections.map(({ title, description, kind }) => ({
+                colorSections: p.brand.colorSections.map(({ title, kind }) => ({
                     title,
-                    description,
                     kind: kind ?? "colors",
                 })),
             }
@@ -136,6 +136,7 @@ async function projectState(userId, projectId) {
             ? {
                 gradients: p.brand.gradients.map((g) => ({
                     name: g.name,
+                    ...(g.description ? { description: g.description } : {}),
                     section: p.brand.colorSections?.find((s) => s.id === g.section)?.title,
                     css: gradientCss(g),
                 })),
@@ -145,6 +146,7 @@ async function projectState(userId, projectId) {
             ? {
                 patterns: p.brand.patterns.map((x) => ({
                     name: x.name,
+                    ...(x.description ? { description: x.description } : {}),
                     section: p.brand.colorSections?.find((s) => s.id === x.section)?.title,
                     tile: Boolean(x.tile),
                 })),
@@ -165,7 +167,15 @@ async function projectState(userId, projectId) {
             }
             : {}),
         ...(p.brand.fonts?.length
-            ? { fonts: p.brand.fonts.map(({ family, role, weights }) => ({ family, role, weights })) }
+            ? {
+                fonts: p.brand.fonts.map(({ family, role, weights, license, uses }) => ({
+                    family,
+                    role,
+                    weights,
+                    ...(license ? { license } : {}),
+                    ...(uses?.length ? { uses } : {}),
+                })),
+            }
             : {}),
         ...(p.brand.textStyles?.length
             ? {
@@ -188,8 +198,7 @@ async function projectState(userId, projectId) {
         })),
     };
 }
-/** The space's own tools: what fills it in. */
-function spaceTools(input, project, wrote) {
+function spaceTools(input, project, wrote, on) {
     const { signal } = input;
     const userId = input.user.id;
     const projectId = project.id;
@@ -292,7 +301,7 @@ function spaceTools(input, project, wrote) {
         }),
         set_colors: createTool({
             id: "set_colors",
-            description: "Set the brand's colours — the whole list, the main colour first. Values as #rrggbb. Optional: `sections` for a further palette of its own use (title, when to use it), and on a colour the `section` title it belongs to; colours without one are the standard ones. Without `sections` the space keeps its sections.",
+            description: "Set the brand's colours — the whole list, the main colour first. Values as #rrggbb. Optional: `sections` for a further palette of its own use (its title), and on a colour the `section` title it belongs to; colours without one are the standard ones. Without `sections` the space keeps its sections.",
             inputSchema: z.object({
                 colors: z
                     .array(z.object({
@@ -302,12 +311,15 @@ function spaceTools(input, project, wrote) {
                 }))
                     .max(PROJECT_LIMITS.colors),
                 sections: z
-                    .array(z.object({ title: z.string().min(1).max(80), description: z.string().max(400) }))
+                    .array(z.object({ title: z.string().min(1).max(80) }))
                     .max(PROJECT_LIMITS.logoSections)
                     .optional(),
             }),
             execute: ({ colors, sections }) => attempt(() => inTurn(async () => {
                 doing("set_colors");
+                if (!on.brandSections && (sections || colors.some((c) => c.section))) {
+                    throw new Error("Colour sections are not available in this studio: pass the colours without them.");
+                }
                 const p = await ownedProject(userId, projectId);
                 const groups = sections
                     ? sections.map((s) => ({
@@ -392,13 +404,22 @@ function spaceTools(input, project, wrote) {
         }),
         set_typography: createTool({
             id: "set_typography",
-            description: "Set the brand's fonts — the whole list, the main one first — each with what it is for and its weights. Optional: `textStyles`, the type scale a brand guide gives (name, font family, size px, weight, line height %, letter spacing %); without it the space keeps its text styles.",
+            description: "Set the brand's fonts — the whole list, the main one first — each with what it is for, its weights and, where a source says so, its licence and what it may be used for. Optional: `textStyles`, the type scale a brand guide gives (name, font family, size px, weight, line height %, letter spacing %); without it the space keeps its text styles.",
             inputSchema: z.object({
                 fonts: z
                     .array(z.object({
                     family: z.string().min(1).max(80),
                     role: z.string().max(200).describe("What it is for, in the person's language"),
                     weights: z.array(z.number().int().min(100).max(900)).max(9),
+                    license: z
+                        .string()
+                        .max(200)
+                        .optional()
+                        .describe("The licence, only where a source names it: 'SIL Open Font License'"),
+                    uses: z
+                        .array(z.enum(FONT_USES))
+                        .optional()
+                        .describe("All the licence allows it for, only where a source says so"),
                 }))
                     .max(PROJECT_LIMITS.fonts),
                 textStyles: z
@@ -441,15 +462,18 @@ function spaceTools(input, project, wrote) {
         }),
         set_gradients: createTool({
             id: "set_gradients",
-            description: "Optional. Set the brand's gradients, as a brand guide or the site's stylesheet gives them: each with a name and its CSS (linear-, radial- or conic-gradient with hex stops). They go into a gradients section, made when there is none with that title. Replaces the gradients of that section.",
+            description: "Optional. Set the brand's gradients, as a brand guide or the site's stylesheet gives them: each with a name, when to use it where the source says so, and its CSS (linear-, radial- or conic-gradient with hex stops). They go into a gradients section, made when there is none with that title. Replaces the gradients of that section.",
             inputSchema: z.object({
                 section: z.string().min(1).max(80).describe("The gradients section's title"),
-                description: z.string().max(400).optional().describe("When to use them"),
                 gradients: z
-                    .array(z.object({ name: z.string().min(1).max(80), css: z.string().max(1000) }))
+                    .array(z.object({
+                    name: z.string().min(1).max(80),
+                    description: z.string().max(400).optional().describe("When to use it"),
+                    css: z.string().max(1000),
+                }))
                     .max(PROJECT_LIMITS.gradients),
             }),
-            execute: ({ section, description, gradients }) => attempt(() => inTurn(async () => {
+            execute: ({ section, gradients }) => attempt(() => inTurn(async () => {
                 doing("set_gradients");
                 const p = await ownedProject(userId, projectId);
                 const sections = p.brand.colorSections ?? [];
@@ -463,16 +487,14 @@ function spaceTools(input, project, wrote) {
                 await updateProject(userId, projectId, {
                     brand: {
                         colorSections: found
-                            ? sections.map((s) => (s.id === id && description ? { ...s, description } : s))
-                            : [
-                                ...sections,
-                                { id, title: section, description: description ?? "", kind: "gradients" },
-                            ],
+                            ? sections
+                            : [...sections, { id, title: section, kind: "gradients" }],
                         gradients: [
                             ...(p.brand.gradients ?? []).filter((g) => g.section !== id),
                             ...parsed.map(({ g, read }) => ({
                                 id: nanoid(10),
                                 name: g.name,
+                                ...(g.description ? { description: g.description } : {}),
                                 section: id,
                                 ...read,
                             })),
@@ -582,6 +604,16 @@ function spaceTools(input, project, wrote) {
             },
         }),
     };
+    if (!on.brandSections) {
+        delete tools.set_logo_sections;
+        delete tools.set_gradients;
+    }
+    if (!on.brandRules) {
+        delete tools.set_rules;
+    }
+    if (!on.typography) {
+        delete tools.set_typography;
+    }
     return tools;
 }
 /** A browser tool as the model calls it: sent to the page, its answer awaited. */
@@ -673,6 +705,12 @@ export async function runStudioAssistant(input) {
     const cards = [];
     const { project } = input;
     const space = project && input.writable ? project : null;
+    const switches = await currentFeatures();
+    const brandOn = {
+        brandSections: switches.brandSections === true,
+        brandRules: switches.brandRules === true,
+        typography: switches.typography === true,
+    };
     const tools = {
         ...knowsTools({
             user: input.user,
@@ -687,7 +725,7 @@ export async function runStudioAssistant(input) {
                 input.onCard?.(card);
             },
         }),
-        ...(space ? spaceTools(input, space, wrote) : {}),
+        ...(space ? spaceTools(input, space, wrote, brandOn) : {}),
     };
     // What the tenant's plugins let the assistant do besides: a source of knowledge, say.
     if (space) {
@@ -763,6 +801,15 @@ export async function runStudioAssistant(input) {
         part === "knowledge"
             ? "The person talks to you from Wissen: they want the wizards to know something."
             : "",
+        space && !(brandOn.brandSections && brandOn.brandRules && brandOn.typography)
+            ? `Not in this studio (no tools for it; never offer it): ${[
+                brandOn.brandSections ? "" : "sections of logos and colours, gradients and patterns",
+                brandOn.brandRules ? "" : "rules for logos, colours and type",
+                brandOn.typography ? "" : "typography (fonts, type scale)",
+            ]
+                .filter(Boolean)
+                .join("; ")}.`
+            : "",
         input.message,
     ]
         .filter(Boolean)

package/apps/runtime/dist/docs/dev/plugins/reference.md

@@ -1,7 +1,7 @@
 ---
 title: Reference
 description: Every call, type, address and setting of the plugin framework on one page.
-version: 0.3.4
+version: 0.3.7
 ---
 
 ## Server half
@@ -32,7 +32,8 @@ The default export is a `WizardsPluginFactory`: `(wizards: WizardsPluginApi) =>
 | `registerRunner(runner: PluginRunner)` | [Runners](./runners.md). A door a wizard runs through; `page` runners answer at `/w/<token>/<id>` |
 | `runs` | [Runners](./runners.md#drive-a-run). `start`, `report`, `wizards`, `answerPage`, `review`, `answerAsk`, `control`, `subscribe`, `handoffUrl`, `upload`, `transcribe`: the functions behind the MCP tools, for the plugin's door |
 | `speech.conversation()` | [Runners](./runners.md#a-call). `{ provider: "openai", apiKey, model }`: the tenant's realtime speech model, for a call a plugin drives itself. Throws `503` / `no_model` while none is set up |
-| `registerSpaceContext({ block, tools? })` | [The space](./space.md). `block(space): string \| null` |
+| `registerSpaceContext({ block, tools?, steps? })` | [The space](./space.md). `block(space): string \| null`; `steps`: `agent` (default), `html` (steps that write a document or a dashboard, without the tools) |
+| `spaces.brand(space)` | [The space](./space.md#the-spaces-brand). `{ name, colors, fonts }` of the space, or `null` |
 | `registerAssistantTool(tool: PluginAssistantTool)` | [The space](./space.md#tools-of-the-space-assistant) |
 | `index.put({ space, key, title, text, link? })`, `index.remove(space, key?)` | [The space](./space.md#the-search-index) |
 | `spaceData.putCategories`, `.putPage`, `.putTable`, `.putFile`, `.putDocument`, `.list`, `.readPages`, `.files`, `.readFile`, `.remove`, `.summarize` | [The space](./space.md#knowledge-a-plugin-writes). Knowledge of a space: pages, tables and files under keys of the plugin's own, with their Kategorien; and the space's own pages and files to read |
@@ -45,7 +46,7 @@ The default export is a `WizardsPluginFactory`: `(wizards: WizardsPluginApi) =>
 | `web.fetch(url, init?)`, `web.read(url, { signal? })` | [The web](./server.md#the-web) |
 | `documents.parse({ data, name, mime }, { signal? })` | [Documents](./server.md#documents). `{ markdown, pages }` |
 | `getTenantDb(): PluginDb` | The current tenant's database, a Drizzle libSQL database |
-| `generate(request): Promise<{ text, object }>` | Asks a model of the current tenant: `prompt`, `system?`, `schema?`, `model?`, `maxOutputTokens?`, `signal?`. See [The server half](./server.md#asking-a-model) |
+| `generate(request): Promise<{ text, object }>` | Asks a model of the current tenant: `prompt`, `system?`, `schema?`, `model?`, `maxOutputTokens?`, `signal?`, `files?` (pictures and PDFs: `{ data, mediaType, name? }[]`). See [The server half](./server.md#asking-a-model) |
 | `connections.available(ids)`, `.start({ space, connector, actions })`, `.connect({ space, connector, actions, credentials })`, `.list(space)`, `.get(id)`, `.call(id, action, input)`, `.remove(id)` | [Accounts](./connections.md) |
 | `secrets.seal(value): string`, `secrets.unseal(sealed)` | [Keys of the plugin's own](./server.md#keys-of-the-plugins-own). `unseal` gives null for a value sealed on another install |
 | `registerAssistantContext({ block })` | [The space](./space.md#the-assistant-on-the-plugins-own-page). `block(space): string \| null` |
@@ -240,11 +241,13 @@ The default export is a `StudioPlugin`: `(studio: StudioPluginContext) => void`.
 | `studio.registerShareSection({ runner, component })` | [Runners](./runners.md#the-runners-part-of-the-share-dialog). The runner's own settings for a wizard (a keyword), under the share dialog's gear once it is switched on and set up. `component` gets `{ wizard: { id, title } }` |
 | `studio.registerAssistantCard({ tool, component })` | Draws a tool's result in the space assistant's chat. `component` gets `{ data, send }` |
 | `studio.registerSpaceSection({ id, group?, label, hint?, component })` | A section of a part of the space page at `/studio/space/<group>#<id>`; `group`: `info`, `knowledge` (default), `data` or `results` |
+| `studio.registerSpacePart({ id, label, icon, after?, component })` | [A part of the plugin's own](./studio.md#a-part-of-the-plugins-own) at `/studio/space/<id>`, after `info`, `knowledge` or `data` (default) in the menu |
+| `studio.useSpaceMenu(entries)` | A hook in a plugin's part: its menu, `{ id, label, icon? }[]`, each jumping to the element with that id |
 | `studio.useCrumbs(items)` | A hook: the trail in the top bar for the page shown, `{ label, to? }[]`, instead of a heading of the page's own |
 | `studio.Assistant` | Tells the studio's assistant what to say on a page of the plugin: `title?`, `hello?`, `placeholder?`, `suggestions?: { label, message?, fill? }[]`, `onChanged?`. Draws nothing |
 | `studio.useAssistantPage(page)` | A hook: what the page shows, for the assistant: `open?: { kind, id?, label }`, `selection?`, `summary?`, `fields?: { id, label, value }[]`, `compact?`, and the words of `studio.Assistant` |
 | `studio.useAssistantTool(name, { description, parameters? }, run)` | A hook: a tool the assistant runs in the page while it is shown, as `<plugin>_<name>`. `parameters`: JSON Schema; `run(args)` returns what the assistant learns |
-| `studio.useSpace()` | A hook: `{ id, name, readOnly }` of the space the studio shows, or `null` |
+| `studio.useSpace()` | A hook: `{ id, name, readOnly, brand }` of the space the studio shows, or `null`; `brand` is `{ name, colors, fonts }` |
 | `studio.i18n.register({ de, en })` | Gives `t(key, vars?)` |
 | `studio.i18n.lang()` | `"de"` or `"en"` |
 | `studio.api.get`, `.post`, `.put`, `.patch`, `.del` | The plugin's own routes |

package/apps/runtime/dist/docs/dev/plugins/server.md

@@ -1,7 +1,7 @@
 ---
 title: The server half
 description: The function a plugin exports, what it is handed, and the rules it runs under.
-version: 0.3.2
+version: 0.3.7
 ---
 
 The server half is a file whose default export is a function. The runtime calls it once when the
@@ -39,6 +39,7 @@ export default definePlugin((wizards) => {
 | `registerAssistantTool(tool)` | A tool of the space assistant | [The space](./space.md#tools-of-the-space-assistant) |
 | `registerAssistantContext(context)` | What the space assistant is told on the plugin's own page | [The space](./space.md#the-assistant-on-the-plugins-own-page) |
 | `spaceData.putPage(input)`, `putTable`, `putFile`, `putDocument`, `putCategories`, … | Knowledge of a space: pages, tables, files and Kategorien | [The space](./space.md#knowledge-a-plugin-writes) |
+| `spaces.brand(space)` | The space's look: its title, colours and fonts | [The space](./space.md#the-spaces-brand) |
 | `index.put(entry)`, `index.remove(space, key?)` | Texts in the space's search index | [The space](./space.md#the-search-index) |
 | `registerHttpRoute(route)` | A route below `/api/studio/plugins/<id>` | [Routes](./routes.md) |
 | `registerPublicRoute(route)`, `publicUrl(path)` | A route anyone may call, and its address | [Routes](./routes.md#public-routes) |
@@ -106,6 +107,7 @@ const { object } = await server.generate({
 | `model` | `classifier` (fast, cheap), `standard`, `high`, `highest` | `standard` |
 | `maxOutputTokens` | A limit on the answer | the model's |
 | `signal` | Aborts the call | two minutes |
+| `files` | Pictures (PNG, JPEG, WebP, GIF) and PDFs the model looks at with the prompt: `{ data, mediaType, name? }[]`, `data` a `Uint8Array` | none |
 
 It answers `{ text, object }`. Without a model set up it throws an error with the status `503`
 and the code `no_model`: a route that lets it through answers just that, and the studio half

package/apps/runtime/dist/docs/dev/plugins/space.md

@@ -1,7 +1,7 @@
 ---
 title: The space
 description: Knowledge a plugin writes, a block and tools for every AI step of a space, texts in its search index, tools and cards of its assistant.
-version: 0.3.2
+version: 0.3.7
 ---
 
 A space holds what all its wizards share: a title, logos, colours, facts, and Knowledge —
@@ -93,6 +93,24 @@ server.registerSpaceContext({
 - A model on the device calls no tools: Apple Intelligence on a Mac, or the phone a run is
   followed on, which answers only steps that list no tools themselves. The step then gets the
   block without the tools.
+- `steps` says which steps get it: `["agent"]` when left out. `"html"` is the steps that write a
+  document or a dashboard as HTML; they get the block without the tools, after the space's
+  brand: how the brand's elements look, say.
+
+## The space's brand
+
+`server.spaces.brand(space)` reads what Info & brand holds of the space's look, for a block, a
+page or a model call in it:
+
+```ts
+const brand = await server.spaces.brand(space.id);
+// { name: "Mira Kaffee", colors: [{ name: "Primär", value: "#7a3e1d" }, …],
+//   fonts: [{ family: "Fraunces", role: "Headings", weights: [600] }, …] }
+```
+
+- The first colour is the accent. A font's `role` is what it is for, in the person's words.
+- `null` for a space the tenant does not have. The studio half gets the same as
+  `studio.useSpace().brand`.
 
 ## The search index
 

package/apps/runtime/dist/docs/dev/plugins/studio.md

@@ -1,7 +1,7 @@
 ---
 title: The studio half
 description: Pages, icons in the app bar, sections of the settings and of the space page — written in React, built once, drawn inside the studio.
-version: 0.3.4
+version: 0.3.7
 ---
 
 The studio half is `ui/plugin.tsx`. Its default export is a function; the studio calls it after
@@ -123,7 +123,7 @@ space page, behind the house icon (Space) in the app bar, shows them in four par
 
 | Part | `group` | Holds |
 |---|---|---|
-| Info & brand | `info` | Basics, Logos, Colours, Assets, Facts |
+| Info & brand | `info` | Basics, Facts, Logos, Colours, Brand assets |
 | Knowledge | `knowledge` | Documents, pages, tables and files with their Kategorien: what every AI step looks things up in |
 | Data | `data` | What the wizards keep |
 | Results | `results` | The runs that reached their result |
@@ -157,13 +157,50 @@ studio.registerSpaceSection({
 - `id` is the section's anchor: `/studio/space/data#contacts` opens the page there, and so does
   `/studio/space#contacts`. In Knowledge a section is a page of its own:
   `/studio/space/knowledge?show=s:<id>`, where `#<id>` leads too. Ids are unique on the whole
-  page; the space's own are taken: `base`, `logos`, `colors`, `assets`, `documents`, `facts`.
-- `studio.useSpace()` is a hook: `{ id, name, readOnly }`, or `null` while there is none. A
-  component that calls it draws again when the person picks another space. `readOnly`: the
-  space came from a local install, or nothing is built on this runtime; show it, change nothing.
+  page; the space's own are taken: `base`, `facts`, `logos`, `colors`, `typography`, `assets`,
+  `documents`.
+- `studio.useSpace()` is a hook: `{ id, name, readOnly, brand }`, or `null` while there is none.
+  A component that calls it draws again when the person picks another space, or changes its
+  brand. `readOnly`: the space came from a local install, or nothing is built on this runtime;
+  show it, change nothing. `brand` is what Info & brand holds of the look: `name`, `colors`
+  (`{ name, value }`, the first is the accent) and `fonts` (`{ family, role, weights }`).
 - Every wizard belongs to a space: a [run event](./events.md) names it as
   `wizard.projectId`. Keep it with what the plugin stores to show a space's part of it.
 
+### A part of the plugin's own
+
+A plugin whose subject is as big as one of the parts adds a part of its own: an entry in the
+parts' menu, with a page at `/studio/space/<id>` that the plugin draws whole. The part's menu
+lists what the page holds; `studio.useSpaceMenu` fills it while the page is drawn.
+
+```tsx
+function Library() {
+  const space = studio.useSpace();
+  const sections = useSections(space?.id);
+  studio.useSpaceMenu(sections.map((s) => ({ id: s.id, label: s.title, icon: Component })));
+  return sections.map((s) => (
+    <Anchor key={s.id} id={s.id}>
+      <Section title={s.title}>…</Section>
+    </Anchor>
+  ));
+}
+
+studio.registerSpacePart({
+  id: "library",
+  label: () => t("title"),
+  icon: Blocks,
+  after: "info",
+  component: Library,
+});
+```
+
+- `id` is the address: `/studio/space/library`. The parts' own (`info`, `knowledge`, `data`,
+  `results`) are taken.
+- `after` is the part it follows in the menu: `info`, `knowledge` or `data` (default).
+- Each entry of `useSpaceMenu` jumps to the element with its `id` in what the part draws, and
+  the menu marks the one in view. `Anchor` and `Section` draw them as the space's own parts do.
+- The component is drawn again for another space: keep the space's data under its id.
+
 ## Words in two languages
 
 The studio speaks German and English. `studio.i18n.register` takes the plugin's words and gives

package/apps/runtime/dist/docs/dev/plugins/styling.md

@@ -1,7 +1,7 @@
 ---
 title: Styles and components
 description: The studio's components, Tailwind against the studio's theme, and why a plugin's styles never leak.
-version: 0.3.2
+version: 0.3.7
 ---
 
 A plugin's page should look like the studio. Two things make that easy: the studio's components
@@ -34,6 +34,13 @@ and its theme.
 | `LinkedText` | A sentence with its web addresses as links, named by their host | `text` |
 | `cn(...)` | Joins class names, skipping what is false | |
 | `dateText(date, withWeekday?)` | A "YYYY-MM-DD" date in the studio's language: "Wed 14 Oct 2026" | |
+| `Anchor`, `Section` | A section of the space page and the spot the menu jumps to: the heading and its hint above the card | `id` on the anchor · `title`, `hint`, `save` (how the last save went), `action` (beside the heading), `plain` (the content draws its own cards) |
+| `InlineText` | Text edited where it stands, without a field's frame | `value`, `onChange`, `placeholder`, `label`, `maxLength`, `fit` (as wide as its text) |
+| `AddMenu` | The "Add" menu of a section's heading | `entries: { label, icon, onPick }[]` |
+| `AddRow` | A quiet "+ …" row at the end of a list | `label`, `onClick` |
+| `RuleRows`, `useRuleRows(saved)` | Rules as rows, each with its sign (bullet, do, don't, to check, important, numbered) | `rules` (what the hook gives), `placeholder`, `readOnly` |
+| `useAutosave(value, save)` | Saves a value a moment after it last changed; gives the state for a section's `save` | |
+| `newId()` | A short id for something new | |
 
 ```tsx
 import { Button, Card, Chip, Label, Input } from "@engenty-wizards/web/ui";

package/apps/runtime/dist/docs/user/space.md

@@ -1,7 +1,7 @@
 ---
 title: Space
 description: What your wizards share and produce — who you are, what they look things up in, and the results of their runs.
-version: 0.3.2
+version: 0.3.7
 ---
 
 The house in the app bar, after the space's tile, opens your space: what all your wizards share,
@@ -13,7 +13,7 @@ the top leads back. On a phone the parts, a part's sections and the page take tu
 
 | Part | Sections | Used for |
 |---|---|---|
-| Info & brand | Basics, Logos, Colours, Assets, Facts | Who you are and how you look |
+| Info & brand | Basics, Facts, Logos, Colours, Brand assets | Who you are and how you look |
 | Knowledge | All, then each Kategorie, then the sections plugins add | What every AI step looks things up in |
 | Data | All data, then each wizard | Tables and pages the wizards keep |
 | Results | All results, then each wizard | The runs that reached their result |
@@ -23,10 +23,10 @@ the top leads back. On a phone the parts, a part's sections and the page take tu
 | Section | Holds | Used for |
 |---|---|---|
 | Basics | Title and "About": what you do, for whom, and the tone you write in | Texts sound like you. People who run a wizard see the title too |
+| Facts | Labelled values: address, VAT id, opening hours | Steps use them as written |
 | Logos | One or several, each with a description of what it is for | People see the main logo. The description tells a step what a variant is for |
 | Colours | Named colours, each with a note on its use | The first colour is the accent of documents, dashboards and public pages |
-| Assets | Images, graphics, videos, each with a description | AI steps place them in documents and choose by the description |
-| Facts | Labelled values: address, VAT id, opening hours | Steps use them as written |
+| Brand assets | Images, graphics, videos, sound, PDFs, fonts, Lottie and 3D files, in tabs | AI steps place pictures in documents and choose by the description |
 
 ## Knowledge
 

package/apps/runtime/dist/engine/steps.js

@@ -29,7 +29,6 @@ function today(ctx) {
         day: "numeric",
     });
 }
-const sectionTitle = (s) => s.description ? `${s.title} – ${s.description}` : s.title;
 function brandBlock(ctx) {
     const b = ctx.scope.brand;
     const parts = [
@@ -688,7 +687,7 @@ function placeableImages(step, ctx) {
         if (file) {
             out.push({
                 id: file.id,
-                label: `${p.tile ? "Pattern to tile" : "Background fill"}: ${p.name || file.name}${section ? ` (${sectionTitle(section)})` : ""}`,
+                label: `${p.tile ? "Pattern to tile" : "Background fill"}: ${p.name || file.name}${p.description ? ` – ${p.description}` : ""}${section ? ` (${section.title})` : ""}`,
             });
         }
     }
@@ -725,6 +724,8 @@ async function writeHtml(step, ctx, kind) {
         `Today is ${today(ctx)}.`,
         brandBlock(ctx),
         guide,
+        // What plugins hold for the space's look: a UI library, say.
+        ...(await spaceContextOf(ctx)).html,
         images.length
             ? `Images you can place with <img src="asset://ID">. Use those the brief asks for (a header image, a logo) and size them with CSS:\n${images.map((i) => `- asset://${i.id} — ${i.label}`).join("\n")}`
             : "",

package/apps/runtime/dist/engine/template.js

@@ -1,5 +1,5 @@
 import { allFields, isAudioValue, isLocationValue, itemsTotals, LOCALES, locationText, wizardLang, } from "@engenty-wizards/shared/definition";
-import { gradientCss, textStyleLine, } from "@engenty-wizards/shared/projects";
+import { fontLicenseWords, gradientCss, textStyleLine, } from "@engenty-wizards/shared/projects";
 import { listAsMarkdown } from "@engenty-wizards/shared/store";
 const TEMPLATE_RE = /\{\{\s*([^}]+?)\s*\}\}/g;
 function money(n, currency, locale) {
@@ -36,8 +36,8 @@ export function factLines(facts) {
     return facts.map((f) => `${f.label}: ${f.value}`).join("\n");
 }
 /**
- * The colours as a model reads them; a section's after the standard ones, with when to use them.
- * A gradients section names its gradients as CSS.
+ * The colours as a model reads them; a section's after the standard ones. A gradients section
+ * names its gradients as CSS, each with what it is for.
  */
 export function colorLine(colors, sections = [], gradients = []) {
     const line = (list) => list.map((c) => (c.name ? `${c.name} ${c.value}` : c.value)).join(", ");
@@ -45,29 +45,33 @@ export function colorLine(colors, sections = [], gradients = []) {
     return [
         line(colors.filter((c) => !known(c))),
         ...sections.map((s) => {
-            const head = s.description ? `${s.title} (${s.description})` : s.title;
             if (s.kind === "gradients") {
                 const own = gradients.filter((g) => g.section === s.id);
-                return own.length
-                    ? `${head}: ${own.map((g) => `${g.name || "gradient"} ${gradientCss(g)}`).join("; ")}`
-                    : "";
+                const one = (g) => `${g.name || "gradient"}${g.description ? ` (${g.description})` : ""} ${gradientCss(g)}`;
+                return own.length ? `${s.title}: ${own.map(one).join("; ")}` : "";
             }
             const own = colors.filter((c) => c.section === s.id);
-            return own.length ? `${head}: ${line(own)}` : "";
+            return own.length ? `${s.title}: ${line(own)}` : "";
         }),
     ]
         .filter(Boolean)
         .join(" · ");
 }
-/** The brand's type as a model reads it: its fonts, then its text styles. */
+/**
+ * The brand's type as a model reads it: its fonts with their licences, then its text styles. A
+ * licence that names its uses is binding.
+ */
 export function typeLines(fonts = [], styles = []) {
     const families = fonts.map((f) => {
         const weights = f.weights.length ? `, weights ${f.weights.join("/")}` : "";
-        return `- ${f.family}${f.role ? ` (${f.role})` : ""}${weights}`;
+        return `- ${f.family}${f.role ? ` (${f.role})` : ""}${weights}${fontLicenseWords(f)}`;
     });
     const scale = styles.map((s) => `- ${s.name}: ${textStyleLine(s, fonts)}`);
     return [
         families.length ? `Fonts:\n${families.join("\n")}` : "",
+        fonts.some((f) => f.uses?.length)
+            ? "A font's licence is binding: use a font only for what it may be used for, and set anything else in a system font."
+            : "",
         scale.length ? `Text styles:\n${scale.join("\n")}` : "",
     ]
         .filter(Boolean)

package/apps/runtime/dist/film/project.js

@@ -137,7 +137,12 @@ export async function prepareFilmFolder(step, ctx) {
                 const { data } = await projectFileContent(f.projectId, f.id);
                 const name = `patterns/${safeName(f.name.replace(/\.[^.]+$/, ""))}.${extFor(f.mime) === "bin" ? (f.name.split(".").pop() ?? "bin") : extFor(f.mime)}`;
                 await put(join(root, "brand"), name, data);
-                patterns.push({ file: name, name: p.name, tile: Boolean(p.tile) });
+                patterns.push({
+                    file: name,
+                    name: p.name,
+                    ...(p.description ? { description: p.description } : {}),
+                    tile: Boolean(p.tile),
+                });
             }
         }
         catch {
@@ -161,7 +166,7 @@ export async function prepareFilmFolder(step, ctx) {
         }
     }
     await put(join(root, "brand"), "brand.json", JSON.stringify({
-        note: "The space's brand. Colours are named by what they are for; the first is the accent. A logo's or a colour's section says when to use it; colorRules, logoRules and typeRules, where there are any, say how colours, logos and type may be used; text is set in the fonts.",
+        note: "The space's brand. Colours are named by what they are for; the first is the accent. A logo's section, a gradient's or a pattern's description says when to use it; colorRules, logoRules and typeRules, where there are any, say how colours, logos and type may be used; text is set in the fonts — a font with `uses` that leave out video is not used in a film: its text gets a system font.",
         name: b.name ?? "",
         about: b.about ?? "",
         colors: (b.colors ?? []).map((c) => {
@@ -172,6 +177,7 @@ export async function prepareFilmFolder(step, ctx) {
             ? {
                 gradients: b.gradients.map((g) => ({
                     name: g.name,
+                    ...(g.description ? { description: g.description } : {}),
                     section: b.colorSections?.find((x) => x.id === g.section)?.title,
                     css: gradientCss(g),
                 })),
@@ -182,7 +188,13 @@ export async function prepareFilmFolder(step, ctx) {
         ...(b.colorRules?.length ? { colorRules: ruleLines(b.colorRules).split("\n") } : {}),
         ...(b.fonts?.length
             ? {
-                fonts: b.fonts.map(({ family, role, weights }) => ({ family, role, weights })),
+                fonts: b.fonts.map(({ family, role, weights, license, uses }) => ({
+                    family,
+                    role,
+                    weights,
+                    ...(license ? { license } : {}),
+                    ...(uses?.length ? { uses } : {}),
+                })),
             }
             : {}),
         ...(b.textStyles?.length