bearminion 1.0.1 → 1.2.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # bearminion
 
+## 1.2.0
+
+### Minor Changes
+
+- 4c3f823: Rich text has inline code: text between backticks is stored as `` `code` ``, rendered as `<code>`, and toggled with a new Code button in the on-page format bar. Nothing inside code is parsed as markdown. List items under `points` are edited as rich text in the sidebar.
+- 19c1e5a: Section tab controls follow the section's schema instead of guessing from values:
+  
+  - Any string enum inside a section's props (such as a list item's `icon`) is a choice in the sidebar instead of a free text box. A new `icons` option on `defineSection` draws the choices of a field as an icon grid: `icons: { 'steps[].icon': { terminal: 'M4 5h16…', … } }`, SVG path data on a 24 × 24 grid, one per choice.
+  - A new `showWhen` option on `defineSection` hides props the section's options make unused, such as `{ poster: { kind: 'video' } }`. A list matches any of its values, and `variant`, `tone` and `motion` count as options. Hidden props keep their value in the file.
+  - Variant, tone and choice options with up to four choices are segmented controls instead of selects.
+  - An image prop that is missing from the content now offers an image slot whatever it is called. It used to be a text box unless the prop was named `image` or `logo`, so a missing `poster` could not be set.
+  
+  `defineSection` checks `icons` and `showWhen` against the schema and options and throws on a mistake. `GET /schema` serves `fieldChoices`, `fieldIcons`, `fieldImages` and `showWhen`.
+
+### Patch Changes
+
+- 9261888: The live preview now runs the scripts of a section type that was not on the page before, so a section added from the picker works before you save (a copy button, a looping video). A sidebar value that has no text of its own on the page, such as a video link or a section option, now updates the preview as you change it instead of after a save.
+
+## 1.1.0
+
+### Minor Changes
+
+- 8a97a6c: Released together with `create-bearminion`, which now shares this version number. No changes to the package.
+
 ## 1.0.1
 
 ### Patch Changes

package/README.md

@@ -13,19 +13,19 @@
   <a href="https://github.com/langehelp-software/bearminion/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-MIT-169717" alt="MIT license" /></a>
 </p>
 
-This package is the engine behind BearMinion. You don't install it on its own: create a site from the template and it comes included.
+This package is the engine behind BearMinion. You don't install it on its own: [`npm create bearminion`](https://www.npmjs.com/package/create-bearminion) makes a site with it included.
 
 ## Quick start
 
 You need [Node.js](https://nodejs.org) 22.12 or newer.
 
 ```bash
-npm create astro@latest -- --template langehelp-software/bearminion/templates/default my-site
+npm create bearminion@latest my-site
 cd my-site
 npm run dev
 ```
 
-Open the address it prints, press **Ctrl+E** (**Cmd+E** on a Mac), click any text to change it, and press **Ctrl/Cmd+S** to save. Push the folder to GitHub and import it in Vercel, Netlify or Cloudflare Pages to put it online.
+It asks for the site's name and web address. Open the address `npm run dev` prints, press **Ctrl+E** (**Cmd+E** on a Mac), click any text to change it, and press **Ctrl/Cmd+S** to save. Push the folder to GitHub and import it in Vercel, Netlify or Cloudflare Pages to put it online.
 
 <p align="center">
   <img src="https://raw.githubusercontent.com/langehelp-software/bearminion/main/.github/assets/editor.png" alt="The BearMinion editor: a section toolbar on the hero, a heading being edited, and the Pages tab in the sidebar" width="100%" />
@@ -33,8 +33,8 @@ Open the address it prints, press **Ctrl+E** (**Cmd+E** on a Mac), click any tex
 
 ## What you can change
 
-- **Text** right on the page, with bold, italic, links and lists
-- **Sections**: ten ready-made types, each with three layouts, added from a visual picker
+- **Text** right on the page, with bold, italic, code, links and lists
+- **Sections**: thirteen ready-made types, each with three layouts, added from a visual picker
 - **Pages, menus and footer**, with titles and descriptions for search and sharing
 - **Images**: upload, choose how they fill their frame and which part stays in view
 - **Colors**: pick three, and the editor builds a full light and dark palette that stays readable

package/dist/astro.d.ts

@@ -1,5 +1,5 @@
-import { Dt as ContentMigrator, M as SiteDefinition, N as SiteOf, g as SectionRegistry, h as ContentModel, t as Page, u as SectionOf } from "./page-DgQlGree.js";
-import { a as StoreKeyError, c as createFileStore, i as FileStoreOptions, n as EditorContext, o as StoreOperation, r as ContentStore, s as UploadStore, t as BearminionOptions } from "./options-CxRzVfhi.js";
+import { M as SiteDefinition, N as SiteOf, g as SectionRegistry, h as ContentModel, jt as ContentMigrator, t as Page, u as SectionOf } from "./page-dUWFHv9j.js";
+import { a as StoreKeyError, c as createFileStore, i as FileStoreOptions, n as EditorContext, o as StoreOperation, r as ContentStore, s as UploadStore, t as BearminionOptions } from "./options-CLrSA8kL.js";
 import { AstroIntegration } from "astro";
 //#region src/integration.d.ts
 interface BearminionIntegration extends AstroIntegration {

package/dist/astro.js

@@ -1,6 +1,6 @@
-import { a as ContentReadError, o as ContentValidationError, r as loadThemePreview, t as PreviewUnavailableError } from "./preview-C9MHO88K.js";
+import { a as imageFields, c as ContentReadError, l as ContentValidationError, r as loadThemePreview, t as PreviewUnavailableError } from "./preview-BqrZLvQ6.js";
+import { t as defaultTheme } from "./theme-q19C8cIc.js";
 import { i as isSystemPage, n as createPageSchema$1, r as createTolerantPageSchema, s as withoutOrphanSections, u as isOrphanSection } from "./page-C0l3CIuz.js";
-import { t as defaultTheme } from "./theme-DZkec408.js";
 import { a as DEFAULT_UPLOADS_DIR, i as DEFAULT_CONTENT_DIR, n as createMigrator, r as API_PREFIX, t as SCHEMA_VERSION_KEY } from "./migrate-B56wxCiC.js";
 import { a as JSON_BODY_LIMIT, c as isInside, d as resolveDir, f as resolveInside, i as IMAGE_BYTE_LIMIT, l as isLocalRequest, n as contentReloadPlugin, o as MULTIPART_BODY_LIMIT, r as dropEarlyReloadAfterSave, s as asDirectory, u as readSlug } from "./reload-COk8Nncw.js";
 import { S as isAssetPath, b as describeSiteRef, c as projectId, v as assetRefs, y as describePageRef } from "./draft-store-1Y4-sn45.js";
@@ -657,6 +657,10 @@ async function getSchema(context) {
 	const sectionOptions = {};
 	const optionalContent = {};
 	const contentCounts = { ...context.site.counts };
+	const fieldChoices = {};
+	const fieldIcons = {};
+	const showWhen = {};
+	const fieldImages = {};
 	for (const definition of Object.values(context.sections)) {
 		const type = definition.type;
 		sectionDefaults[type] = definition.defaults;
@@ -666,6 +670,11 @@ async function getSchema(context) {
 		sectionOptions[type] = definition.options;
 		optionalContent[type] = definition.optional;
 		if (Object.keys(definition.counts).length > 0) contentCounts[type] = { ...definition.counts };
+		if (Object.keys(definition.choices).length > 0) fieldChoices[type] = definition.choices;
+		if (Object.keys(definition.icons).length > 0) fieldIcons[type] = definition.icons;
+		if (Object.keys(definition.showWhen).length > 0) showWhen[type] = definition.showWhen;
+		const images = imageFields(definition.schema);
+		if (images.length > 0) fieldImages[type] = images;
 	}
 	return json(200, {
 		sectionOptions,
@@ -674,6 +683,10 @@ async function getSchema(context) {
 		theme: context.theme,
 		contentCounts,
 		optionalContent,
+		fieldChoices,
+		fieldIcons,
+		fieldImages,
+		showWhen,
 		sectionDefaults,
 		sectionLabels,
 		sectionDescriptions,

package/dist/content.d.ts

@@ -1,4 +1,4 @@
-import { h as ContentModel, t as Page, u as SectionOf } from "./page-DgQlGree.js";
+import { h as ContentModel, t as Page, u as SectionOf } from "./page-dUWFHv9j.js";
 import { z } from "zod";
 //#region src/content.d.ts
 export interface ContentCollectionsOptions {

package/dist/index.d.ts

@@ -1,6 +1,6 @@
-import { $ as textMarkSchema, A as Site, At as SCHEMA_VERSION_KEY, B as themeColorsSchema, C as DEFAULT_MAX_FOOTER_COLUMNS, Ct as toneOption, D as FooterConfig, Dt as ContentMigrator, E as FooterColumn, Et as ContentMigration, F as SiteWith, G as MAX_NAV_DEPTH, H as ButtonStyle, I as Theme, J as Tone, K as RichText, L as brandLogoSchema, M as SiteDefinition, N as SiteOf, O as Header, Ot as ContentVersioning, P as SiteSeo, Q as richTextSchema, R as defineSite, S as BRAND_LOGO_HEIGHT, St as themeModes, T as Footer, Tt as variantOption, U as Image, V as themeSchema, W as Link, X as imageSchema, Y as htmlIdSchema, Z as linkSchema, _ as ThemeConfig, _t as NumberOption, a as isSystemPage, at as SectionDefinition, b as defaultTheme, bt as buttonStyles, c as BaseSection, ct as WireRect, d as anchorSchema, dt as wireKinds, et as textSchema, f as createSectionSchema, ft as wireframeIssues, g as SectionRegistry, gt as EnumOption, h as ContentModel, ht as CountRule, i as createPageSchema, it as SectionConfig, j as SiteConfig, jt as createMigrator, k as HeaderConfig, kt as DocumentKind, l as PropsOf, lt as Wireframe, m as API_PREFIX, mt as BooleanOption, n as SYSTEM_PAGES, nt as trackingIdSchema, o as seoSchema, ot as defineSection, p as sectionIdSchema, pt as OptionalContent, q as Text, r as Seo, rt as withEmphasis, s as withoutOrphanSections, st as WireKind, t as Page, tt as toneSchema, u as SectionOf, ut as defineWireframe, v as ThemeDefinition, vt as Option, w as DEFAULT_MAX_HEADER_ACTIONS, wt as tones, x as defineTheme, xt as motionOption, y as ThemeFont, yt as StringOption, z as siteSeoSchema } from "./page-DgQlGree.js";
+import { $ as textMarkSchema, A as Site, At as ContentMigration, B as themeColorsSchema, C as DEFAULT_MAX_FOOTER_COLUMNS, Ct as toneOption, D as FooterConfig, Dt as FieldIcons, E as FooterColumn, Et as FieldChoices, F as SiteWith, Ft as createMigrator, G as MAX_NAV_DEPTH, H as ButtonStyle, I as Theme, J as Tone, K as RichText, L as brandLogoSchema, M as SiteDefinition, Mt as ContentVersioning, N as SiteOf, Nt as DocumentKind, O as Header, Ot as ShowCondition, P as SiteSeo, Pt as SCHEMA_VERSION_KEY, Q as richTextSchema, R as defineSite, S as BRAND_LOGO_HEIGHT, St as themeModes, T as Footer, Tt as variantOption, U as Image, V as themeSchema, W as Link, X as imageSchema, Y as htmlIdSchema, Z as linkSchema, _ as ThemeConfig, _t as NumberOption, a as isSystemPage, at as SectionDefinition, b as defaultTheme, bt as buttonStyles, c as BaseSection, ct as WireRect, d as anchorSchema, dt as wireKinds, et as textSchema, f as createSectionSchema, ft as wireframeIssues, g as SectionRegistry, gt as EnumOption, h as ContentModel, ht as CountRule, i as createPageSchema, it as SectionConfig, j as SiteConfig, jt as ContentMigrator, k as HeaderConfig, kt as ShowWhen, l as PropsOf, lt as Wireframe, m as API_PREFIX, mt as BooleanOption, n as SYSTEM_PAGES, nt as trackingIdSchema, o as seoSchema, ot as defineSection, p as sectionIdSchema, pt as OptionalContent, q as Text, r as Seo, rt as withEmphasis, s as withoutOrphanSections, st as WireKind, t as Page, tt as toneSchema, u as SectionOf, ut as defineWireframe, v as ThemeDefinition, vt as Option, w as DEFAULT_MAX_HEADER_ACTIONS, wt as tones, x as defineTheme, xt as motionOption, y as ThemeFont, yt as StringOption, z as siteSeoSchema } from "./page-dUWFHv9j.js";
 import { _ as renderMarkedHtml, a as WeightMark, f as markClass, g as reconcileMarks, i as TextRun, l as fontMarks, m as marksFromEmphasis, o as applyTextMark, r as TextMark, t as FontMark, v as splitMarkedText, y as weightMarks } from "./marks-BzLa48Y9.js";
-import "./options-CxRzVfhi.js";
+import "./options-CLrSA8kL.js";
 //#region src/errors.d.ts
 /** One schema problem, addressed by a dot path such as `sections.0.props.heading`. */
 interface ContentIssue {
@@ -224,4 +224,4 @@ interface ContrastCheck {
 /** Text pairs a visitor reads: text on its background, label on the accent fill, link on its background. */
 export declare function contrastChecks(colors: ThemeColors | undefined): ContrastCheck[];
 //#endregion
-export { API_PREFIX, type ApiIssue, type ApiProblem, BRAND_LOGO_HEIGHT, type BaseSection, type BooleanOption, type ButtonStyle, type ChangedFile, type CommitRequest, type CommitResult, type ContentIssue, type ContentMigration, type ContentMigrator, type ContentModel, type ContentVersioning, type ContrastCheck, type CountRule, type CreatePageRequest, DEFAULT_MAX_FOOTER_COLUMNS, DEFAULT_MAX_HEADER_ACTIONS, type DocumentKind, type EnumOption, type FontMark, type Footer, type FooterColumn, type FooterConfig, type GitInfo, type Header, type HeaderConfig, type HistoryEntry, type Image, type ImageFit, type ImagePosition, type Link, MAX_NAV_DEPTH, type NumberOption, type Option, type OptionalContent, type Page, type PageListItem, type PropsOf, type RichText, SCHEMA_VERSION_KEY, SYSTEM_PAGES, type SaveRequest, type SaveResponse, type SectionConfig, type SectionDefinition, type SectionOf, type SectionRegistry, type Seo, type Site, type SiteConfig, type SiteDefinition, type SiteOf, type SitePreview, type SitePreviewHtml, type SiteSeo, type SiteWith, type StringOption, type Text, type TextMark, type TextRun, type Theme, type ThemeColors, type ThemeConfig, type ThemeDefinition, type ThemeFont, type ThemePreview, type Tone, type UploadedImage, type WeightMark, type WireKind, type WireRect, type Wireframe, anchorSchema, applyTextMark, brandLogoSchema, buttonStyles, createMigrator, createPageSchema, createSectionSchema, defaultTheme, defineSection, defineSite, defineTheme, defineWireframe, fontMarks, htmlIdSchema, imageSchema, isSystemPage, linkSchema, markClass, marksFromEmphasis, motionOption, reconcileMarks, renderMarkedHtml, richTextSchema, sectionIdSchema, seoSchema, siteSeoSchema, splitMarkedText, textMarkSchema, textSchema, themeColorsSchema, themeModes, themeSchema, toneOption, toneSchema, tones, trackingIdSchema, variantOption, weightMarks, wireKinds, wireframeIssues, withEmphasis, withoutOrphanSections };
+export { API_PREFIX, type ApiIssue, type ApiProblem, BRAND_LOGO_HEIGHT, type BaseSection, type BooleanOption, type ButtonStyle, type ChangedFile, type CommitRequest, type CommitResult, type ContentIssue, type ContentMigration, type ContentMigrator, type ContentModel, type ContentVersioning, type ContrastCheck, type CountRule, type CreatePageRequest, DEFAULT_MAX_FOOTER_COLUMNS, DEFAULT_MAX_HEADER_ACTIONS, type DocumentKind, type EnumOption, type FieldChoices, type FieldIcons, type FontMark, type Footer, type FooterColumn, type FooterConfig, type GitInfo, type Header, type HeaderConfig, type HistoryEntry, type Image, type ImageFit, type ImagePosition, type Link, MAX_NAV_DEPTH, type NumberOption, type Option, type OptionalContent, type Page, type PageListItem, type PropsOf, type RichText, SCHEMA_VERSION_KEY, SYSTEM_PAGES, type SaveRequest, type SaveResponse, type SectionConfig, type SectionDefinition, type SectionOf, type SectionRegistry, type Seo, type ShowCondition, type ShowWhen, type Site, type SiteConfig, type SiteDefinition, type SiteOf, type SitePreview, type SitePreviewHtml, type SiteSeo, type SiteWith, type StringOption, type Text, type TextMark, type TextRun, type Theme, type ThemeColors, type ThemeConfig, type ThemeDefinition, type ThemeFont, type ThemePreview, type Tone, type UploadedImage, type WeightMark, type WireKind, type WireRect, type Wireframe, anchorSchema, applyTextMark, brandLogoSchema, buttonStyles, createMigrator, createPageSchema, createSectionSchema, defaultTheme, defineSection, defineSite, defineTheme, defineWireframe, fontMarks, htmlIdSchema, imageSchema, isSystemPage, linkSchema, markClass, marksFromEmphasis, motionOption, reconcileMarks, renderMarkedHtml, richTextSchema, sectionIdSchema, seoSchema, siteSeoSchema, splitMarkedText, textMarkSchema, textSchema, themeColorsSchema, themeModes, themeSchema, toneOption, toneSchema, tones, trackingIdSchema, variantOption, weightMarks, wireKinds, wireframeIssues, withEmphasis, withoutOrphanSections };

package/dist/index.js

@@ -1,7 +1,7 @@
-import { a as ContentReadError, i as ContentError, n as defineThemePreview, o as ContentValidationError, s as formatContentIssues } from "./preview-C9MHO88K.js";
+import { c as ContentReadError, i as enumFields, l as ContentValidationError, n as defineThemePreview, o as schemaProps, s as ContentError, u as formatContentIssues } from "./preview-BqrZLvQ6.js";
+import { n as defineTheme, t as defaultTheme } from "./theme-q19C8cIc.js";
 import { C as withEmphasis, D as IMAGE_POSITIONS, E as IMAGE_FITS, F as tones, I as variantOption, M as motionOption, N as themeModes, O as isImageFit, P as toneOption, S as trackingIdSchema, T as DEFAULT_IMAGE_POSITION, _ as linkSchema, a as seoSchema, b as textSchema, c as anchorSchema, d as sectionIdSchema, f as walkLinkIds, g as imageSchema, h as htmlIdSchema, i as isSystemPage, j as buttonStyles, k as isImagePosition, l as createSectionSchema, m as addMarkIssues, n as createPageSchema, p as MAX_NAV_DEPTH, s as withoutOrphanSections, t as SYSTEM_PAGES, v as richTextSchema, w as DEFAULT_IMAGE_FIT, x as toneSchema, y as textMarkSchema } from "./page-C0l3CIuz.js";
 import { applyTextMark, fontMarks, markClass, marksFromEmphasis, reconcileMarks, renderMarkedHtml, splitMarkedText, weightMarks } from "./marks.js";
-import { n as defineTheme, t as defaultTheme } from "./theme-DZkec408.js";
 import { n as createMigrator, r as API_PREFIX, t as SCHEMA_VERSION_KEY } from "./migrate-B56wxCiC.js";
 import { a as contrastRatio, c as hasThemeColors, d as tokenToHex, i as contrastChecks, l as hexToToken, n as HEX_COLOR, o as derivePalette, s as hasOverrides, u as themeCss } from "./theme-colors-BneXpLYG.js";
 import { z } from "zod";
@@ -79,6 +79,17 @@ function defineSection(config) {
 	if (!config.variants.includes(config.defaultVariant)) throw new Error(`Section "${config.type}": the default variant "${config.defaultVariant}" is not one of its variants.`);
 	const wireIssues = wireframeIssues(config.wireframe);
 	if (wireIssues.length > 0) throw new Error(`Invalid wireframe for section "${config.type}":\n${wireIssues.join("\n")}`);
+	const options = [
+		variantOption(config.variants, config.defaultVariant),
+		toneOption,
+		motionOption,
+		...config.options ?? []
+	];
+	const choices = enumFields(config.schema);
+	const icons = config.icons ?? {};
+	const showWhen = config.showWhen ?? {};
+	const ruleIssues = [...iconIssues(icons, choices), ...showWhenIssues(showWhen, options, schemaProps(config.schema))];
+	if (ruleIssues.length > 0) throw new Error(`Invalid field rules for section "${config.type}":\n${ruleIssues.map((issue) => `  - ${issue}`).join("\n")}`);
 	return Object.freeze({
 		type: config.type,
 		label: config.label,
@@ -87,18 +98,59 @@ function defineSection(config) {
 		defaults: parsed.data,
 		variants: config.variants,
 		defaultVariant: config.defaultVariant,
-		options: Object.freeze([
-			variantOption(config.variants, config.defaultVariant),
-			toneOption,
-			motionOption,
-			...config.options ?? []
-		]),
+		options: Object.freeze(options),
 		optional: config.optional,
 		counts: config.counts ?? {},
 		wireframe: config.wireframe,
+		choices,
+		icons,
+		showWhen,
 		refine: config.refine
 	});
 }
+function iconIssues(icons, choices) {
+	const issues = [];
+	for (const [key, byChoice] of Object.entries(icons)) {
+		const values = choices[key];
+		if (!values) {
+			issues.push(`icons.${key}: no field "${key}" with fixed choices in the schema`);
+			continue;
+		}
+		for (const value of values) if (typeof byChoice[value] !== "string" || byChoice[value] === "") issues.push(`icons.${key}: no icon for "${value}"`);
+		for (const value of Object.keys(byChoice)) if (!values.includes(value)) issues.push(`icons.${key}: "${value}" is not one of its choices`);
+	}
+	return issues;
+}
+function showWhenIssues(showWhen, options, props) {
+	const issues = [];
+	const optionNames = new Set(options.map((option) => option.name));
+	for (const [prop, rule] of Object.entries(showWhen)) {
+		if (!props.includes(prop)) issues.push(`showWhen.${prop}: no prop "${prop}" in the schema`);
+		if (optionNames.has(prop)) issues.push(`showWhen.${prop}: "${prop}" is an option; showWhen applies to content props`);
+		for (const [name, condition] of Object.entries(rule)) {
+			const option = options.find((item) => item.name === name);
+			if (!option) {
+				issues.push(`showWhen.${prop}.${name}: no option "${name}"`);
+				continue;
+			}
+			if (option.type === "boolean") {
+				if (typeof condition !== "boolean") issues.push(`showWhen.${prop}.${name}: "${name}" is on or off, so use true or false`);
+				continue;
+			}
+			if (option.type !== "enum") {
+				issues.push(`showWhen.${prop}.${name}: only choice and on/off options can show or hide a prop`);
+				continue;
+			}
+			const wanted = typeof condition === "string" ? [condition] : Array.isArray(condition) ? condition : null;
+			if (wanted === null || wanted.length === 0) {
+				issues.push(`showWhen.${prop}.${name}: use one of ${option.choices.join(", ")}, or a list of them`);
+				continue;
+			}
+			for (const value of wanted) if (!option.choices.includes(value)) issues.push(`showWhen.${prop}.${name}: "${value}" is not one of ${option.choices.join(", ")}`);
+		}
+	}
+	return issues;
+}
 //#endregion
 //#region src/site.ts
 const hexColor = z.string().regex(HEX_COLOR, "Use a #rrggbb color.");

package/dist/{options-CxRzVfhi.d.ts → options-CLrSA8kL.d.ts}

@@ -1,4 +1,4 @@
-import { Dt as ContentMigrator, M as SiteDefinition, g as SectionRegistry, h as ContentModel, v as ThemeDefinition } from "./page-DgQlGree.js";
+import { M as SiteDefinition, g as SectionRegistry, h as ContentModel, jt as ContentMigrator, v as ThemeDefinition } from "./page-dUWFHv9j.js";
 //#region src/images.d.ts
 type ImageKind = 'png' | 'jpeg' | 'webp' | 'gif' | 'avif';
 interface SavedImage {

package/dist/{page-DgQlGree.d.ts → page-dUWFHv9j.d.ts}

@@ -36,6 +36,22 @@ interface ContentMigrator {
 }
 declare function createMigrator(versioning?: ContentVersioning): ContentMigrator;
 //#endregion
+//#region src/field-rules.d.ts
+/**
+ * Field rules a section declares beside its schema, in a form the editor overlay can read without zod.
+ *
+ * - Field keys name a place in `props` the same way for every item of a list: `steps[].icon`, `badge.tag`.
+ * - `showWhen` keeps a prop out of the sidebar unless the section's options have the given values.
+ */
+/** A choice an option must have, or a list of choices any of which will do. */
+type ShowCondition = string | boolean | readonly string[];
+/** Prop name → option name → the value(s) that show it. Every option listed must match. */
+type ShowWhen = Readonly<Record<string, Readonly<Record<string, ShowCondition>>>>;
+/** Field key → fixed choices, derived from the schema's enums. */
+type FieldChoices = Readonly<Record<string, readonly string[]>>;
+/** Field key → choice → SVG path data on a 24 × 24 grid, drawn as a stroke. */
+type FieldIcons = Readonly<Record<string, Readonly<Record<string, string>>>>;
+//#endregion
 //#region src/section-options.d.ts
 /**
  * Design-system option catalog.
@@ -154,6 +170,9 @@ declare function defineWireframe(wireframe: Wireframe): Wireframe;
  * - `optional` names the props an author may drop.
  * - `counts` holds item-count rules per array prop.
  * - `wireframe` is the thumbnail in the Add section picker.
+ * - `choices` lists every string enum in `props` (derived from the schema); the sidebar offers them as choices.
+ * - `icons` draws those choices as icons in the sidebar's picker.
+ * - `showWhen` hides props in the sidebar while the section's options make them unused.
  */
 interface SectionDefinition<TType extends string = string, TSchema extends z.ZodType = z.ZodType, TVariant extends string = string> {
   readonly type: TType;
@@ -168,6 +187,9 @@ interface SectionDefinition<TType extends string = string, TSchema extends z.Zod
   readonly optional: OptionalContent;
   readonly counts: Readonly<Record<string, CountRule>>;
   readonly wireframe: Wireframe;
+  readonly choices: FieldChoices;
+  readonly icons: FieldIcons;
+  readonly showWhen: ShowWhen;
   /** Cross-field rules the schema cannot express, such as a variant that needs an exact item count. */
   refine?(section: {
     variant: TVariant;
@@ -187,6 +209,17 @@ interface SectionConfig<TType extends string, TSchema extends z.ZodType, TVarian
   optional: OptionalContent;
   counts?: Readonly<Record<string, CountRule>>;
   wireframe: Wireframe;
+  /**
+   * Icons for a fixed-choice field, shown in the sidebar's picker instead of the choice names alone. Keyed by field
+   * (`steps[].icon`, list items as `[]`), then by choice: SVG path data on a 24 × 24 grid, drawn as a 1.8 stroke.
+   * Every choice of the field needs one.
+   */
+  icons?: FieldIcons;
+  /**
+   * Props the sidebar shows only while options have these values, such as `{ poster: { kind: 'video' } }`. A list
+   * means any of its values; `variant`, `tone` and `motion` count as options. A hidden prop keeps its value in the file.
+   */
+  showWhen?: ShowWhen;
   refine?(section: {
     variant: TVariants[number];
     props: z.infer<TSchema>;
@@ -238,10 +271,10 @@ declare const textMarkSchema: z.ZodObject<{
   start: z.ZodNumber;
   end: z.ZodNumber;
   weight: z.ZodOptional<z.ZodEnum<{
+    bold: "bold";
     regular: "regular";
     medium: "medium";
     semibold: "semibold";
-    bold: "bold";
   }>>;
   italic: z.ZodOptional<z.ZodBoolean>;
   font: z.ZodOptional<z.ZodEnum<{
@@ -282,10 +315,10 @@ declare function withEmphasis<T extends z.ZodRawShape>(shape: T): z.ZodPipe<z.Zo
     start: z.ZodNumber;
     end: z.ZodNumber;
     weight: z.ZodOptional<z.ZodEnum<{
+      bold: "bold";
       regular: "regular";
       medium: "medium";
       semibold: "semibold";
-      bold: "bold";
     }>>;
     italic: z.ZodOptional<z.ZodBoolean>;
     font: z.ZodOptional<z.ZodEnum<{
@@ -300,10 +333,10 @@ declare function withEmphasis<T extends z.ZodRawShape>(shape: T): z.ZodPipe<z.Zo
     start: z.ZodNumber;
     end: z.ZodNumber;
     weight: z.ZodOptional<z.ZodEnum<{
+      bold: "bold";
       regular: "regular";
       medium: "medium";
       semibold: "semibold";
-      bold: "bold";
     }>>;
     italic: z.ZodOptional<z.ZodBoolean>;
     font: z.ZodOptional<z.ZodEnum<{
@@ -320,10 +353,10 @@ declare function withEmphasis<T extends z.ZodRawShape>(shape: T): z.ZodPipe<z.Zo
     start: z.ZodNumber;
     end: z.ZodNumber;
     weight: z.ZodOptional<z.ZodEnum<{
+      bold: "bold";
       regular: "regular";
       medium: "medium";
       semibold: "semibold";
-      bold: "bold";
     }>>;
     italic: z.ZodOptional<z.ZodBoolean>;
     font: z.ZodOptional<z.ZodEnum<{
@@ -553,10 +586,10 @@ declare function createSiteSchema(header: HeaderParts, footer: FooterParts): z.Z
     start: z.ZodNumber;
     end: z.ZodNumber;
     weight: z.ZodOptional<z.ZodEnum<{
+      bold: "bold";
       regular: "regular";
       medium: "medium";
       semibold: "semibold";
-      bold: "bold";
     }>>;
     italic: z.ZodOptional<z.ZodBoolean>;
     font: z.ZodOptional<z.ZodEnum<{
@@ -769,7 +802,7 @@ declare function createSiteSchema(header: HeaderParts, footer: FooterParts): z.Z
   nameMarks: {
     start: number;
     end: number;
-    weight?: "regular" | "medium" | "semibold" | "bold" | undefined;
+    weight?: "bold" | "regular" | "medium" | "semibold" | undefined;
     italic?: boolean | undefined;
     font?: "sans" | "serif" | "mono" | undefined;
   }[] | undefined;
@@ -1010,7 +1043,7 @@ declare function createSiteSchema(header: HeaderParts, footer: FooterParts): z.Z
   nameMarks?: {
     start: number;
     end: number;
-    weight?: "regular" | "medium" | "semibold" | "bold" | undefined;
+    weight?: "bold" | "regular" | "medium" | "semibold" | undefined;
     italic?: boolean | undefined;
     font?: "sans" | "serif" | "mono" | undefined;
   }[] | undefined;
@@ -1224,4 +1257,4 @@ declare function withoutOrphanSections<TPage extends {
   sections: readonly unknown[];
 }>(page: TPage, registry: SectionRegistry): TPage;
 //#endregion
-export { textMarkSchema as $, Site as A, SCHEMA_VERSION_KEY as At, themeColorsSchema as B, DEFAULT_MAX_FOOTER_COLUMNS as C, toneOption as Ct, FooterConfig as D, ContentMigrator as Dt, FooterColumn as E, ContentMigration as Et, SiteWith as F, MAX_NAV_DEPTH as G, ButtonStyle as H, Theme as I, Tone as J, RichText as K, brandLogoSchema as L, SiteDefinition as M, SiteOf as N, Header as O, ContentVersioning as Ot, SiteSeo as P, richTextSchema as Q, defineSite as R, BRAND_LOGO_HEIGHT as S, themeModes as St, Footer as T, variantOption as Tt, Image as U, themeSchema as V, Link as W, imageSchema as X, htmlIdSchema as Y, linkSchema as Z, ThemeConfig as _, NumberOption as _t, isSystemPage as a, SectionDefinition as at, defaultTheme as b, buttonStyles as bt, BaseSection as c, WireRect as ct, anchorSchema as d, wireKinds as dt, textSchema as et, createSectionSchema as f, wireframeIssues as ft, SectionRegistry as g, EnumOption as gt, ContentModel as h, CountRule as ht, createPageSchema as i, SectionConfig as it, SiteConfig as j, createMigrator as jt, HeaderConfig as k, DocumentKind as kt, PropsOf as l, Wireframe as lt, API_PREFIX as m, BooleanOption as mt, SYSTEM_PAGES as n, trackingIdSchema as nt, seoSchema as o, defineSection as ot, sectionIdSchema as p, OptionalContent as pt, Text as q, Seo as r, withEmphasis as rt, withoutOrphanSections as s, WireKind as st, Page as t, toneSchema as tt, SectionOf as u, defineWireframe as ut, ThemeDefinition as v, Option as vt, DEFAULT_MAX_HEADER_ACTIONS as w, tones as wt, defineTheme as x, motionOption as xt, ThemeFont as y, StringOption as yt, siteSeoSchema as z };
+export { textMarkSchema as $, Site as A, ContentMigration as At, themeColorsSchema as B, DEFAULT_MAX_FOOTER_COLUMNS as C, toneOption as Ct, FooterConfig as D, FieldIcons as Dt, FooterColumn as E, FieldChoices as Et, SiteWith as F, createMigrator as Ft, MAX_NAV_DEPTH as G, ButtonStyle as H, Theme as I, Tone as J, RichText as K, brandLogoSchema as L, SiteDefinition as M, ContentVersioning as Mt, SiteOf as N, DocumentKind as Nt, Header as O, ShowCondition as Ot, SiteSeo as P, SCHEMA_VERSION_KEY as Pt, richTextSchema as Q, defineSite as R, BRAND_LOGO_HEIGHT as S, themeModes as St, Footer as T, variantOption as Tt, Image as U, themeSchema as V, Link as W, imageSchema as X, htmlIdSchema as Y, linkSchema as Z, ThemeConfig as _, NumberOption as _t, isSystemPage as a, SectionDefinition as at, defaultTheme as b, buttonStyles as bt, BaseSection as c, WireRect as ct, anchorSchema as d, wireKinds as dt, textSchema as et, createSectionSchema as f, wireframeIssues as ft, SectionRegistry as g, EnumOption as gt, ContentModel as h, CountRule as ht, createPageSchema as i, SectionConfig as it, SiteConfig as j, ContentMigrator as jt, HeaderConfig as k, ShowWhen as kt, PropsOf as l, Wireframe as lt, API_PREFIX as m, BooleanOption as mt, SYSTEM_PAGES as n, trackingIdSchema as nt, seoSchema as o, defineSection as ot, sectionIdSchema as p, OptionalContent as pt, Text as q, Seo as r, withEmphasis as rt, withoutOrphanSections as s, WireKind as st, Page as t, toneSchema as tt, SectionOf as u, defineWireframe as ut, ThemeDefinition as v, Option as vt, DEFAULT_MAX_HEADER_ACTIONS as w, tones as wt, defineTheme as x, motionOption as xt, ThemeFont as y, StringOption as yt, siteSeoSchema as z };

package/dist/preview-BqrZLvQ6.js

@@ -0,0 +1,125 @@
+import { r as fieldKey } from "./theme-q19C8cIc.js";
+//#region src/errors.ts
+function formatContentIssues(issues) {
+	return issues.map((issue) => {
+		return `  - ${issue.path.length > 0 ? issue.path.map(String).join(".") : "(root)"}: ${issue.message}`;
+	}).join("\n");
+}
+/** Base error for content that cannot be loaded. `filePath` is the file or directory involved. */
+var ContentError = class extends Error {
+	filePath;
+	constructor(filePath, message) {
+		super(message);
+		this.name = new.target.name;
+		this.filePath = filePath;
+	}
+};
+/** `site.json` or a page file failed schema validation. */
+var ContentValidationError = class extends ContentError {
+	issues;
+	constructor(filePath, issues) {
+		super(filePath, `Invalid content in ${filePath}:\n${formatContentIssues(issues)}`);
+		this.issues = issues;
+	}
+};
+/** A content file or directory is missing, unreadable, or not valid JSON. */
+var ContentReadError = class extends ContentError {};
+//#endregion
+//#region src/section-fields.ts
+const WRAPPERS = /* @__PURE__ */ new Set([
+	"optional",
+	"nullable",
+	"default",
+	"prefault",
+	"readonly",
+	"catch",
+	"nonoptional"
+]);
+function defOf(schema) {
+	return schema._zod.def;
+}
+/** Strips optional, default, transforms and the like down to the schema that holds the data. */
+function unwrap(schema) {
+	let current = schema;
+	for (let depth = 0; depth < 16; depth++) {
+		const def = defOf(current);
+		if (def.type === "pipe" && def.in) current = def.in;
+		else if (WRAPPERS.has(def.type) && def.innerType) current = def.innerType;
+		else return current;
+	}
+	return current;
+}
+/** Top-level prop names of a section schema. Empty when `props` is not an object. */
+function schemaProps(schema) {
+	const def = defOf(unwrap(schema));
+	return def.type === "object" && def.shape ? Object.keys(def.shape) : [];
+}
+/**
+* Every string enum inside a section's props, by field key (`kind`, `steps[].icon`).
+* The sidebar offers these as choices instead of a free text box.
+*/
+function enumFields(schema) {
+	const found = {};
+	const visit = (node, path) => {
+		const def = defOf(unwrap(node));
+		if (def.type === "enum" && def.entries) {
+			const values = Object.values(def.entries);
+			if (path !== "" && values.every((value) => typeof value === "string")) found[fieldKey(path)] = values;
+			return;
+		}
+		if (def.type === "array" && def.element) visit(def.element, `${path}.0`);
+		else if (def.type === "object" && def.shape) for (const [key, child] of Object.entries(def.shape)) visit(child, path === "" ? key : `${path}.${key}`);
+	};
+	visit(schema, "");
+	return found;
+}
+/**
+* Every image inside a section's props (an object with `src` and `alt`), by field key (`poster`, `items[].image`).
+* The sidebar offers an image slot for these even while the prop is missing, whatever the prop is called.
+*/
+function imageFields(schema) {
+	const found = [];
+	const visit = (node, path) => {
+		const def = defOf(unwrap(node));
+		if (def.type === "array" && def.element) visit(def.element, `${path}.0`);
+		else if (def.type === "object" && def.shape) {
+			if (path !== "" && "src" in def.shape && "alt" in def.shape) {
+				found.push(fieldKey(path));
+				return;
+			}
+			for (const [key, child] of Object.entries(def.shape)) visit(child, path === "" ? key : `${path}.${key}`);
+		}
+	};
+	visit(schema, "");
+	return found;
+}
+//#endregion
+//#region src/preview.ts
+/**
+* Declare a theme's preview renderer. Default-export it from the module named by `previewModule`
+* (default `/src/lib/render-preview.ts`). The model type ties the inputs to your section registry and site:
+*
+* ```ts
+* export default defineThemePreview<typeof contentModel>({
+*   async page({ sections, motion }) { ... },
+*   async site({ site, pathname }) { ... },
+* })
+* ```
+*/
+function defineThemePreview(preview) {
+	if (typeof preview?.page !== "function") throw new TypeError("defineThemePreview needs a `page` function.");
+	if (preview.site !== void 0 && typeof preview.site !== "function") throw new TypeError("defineThemePreview: `site` must be a function when given.");
+	return preview;
+}
+/** The theme has no renderer for this preview. The API answers 501 instead of 500. */
+var PreviewUnavailableError = class extends Error {};
+/** Load the preview module through the Vite SSR runner and check it default-exports a preview. */
+async function loadThemePreview(environment, previewModule) {
+	const runner = environment.runner;
+	if (!runner?.import) throw new PreviewUnavailableError("The SSR dev environment cannot render a preview.");
+	const preview = (await runner.import(previewModule))?.default;
+	if (!preview || typeof preview.page !== "function") throw new Error(`${previewModule} must default-export defineThemePreview({ page, site? }).`);
+	return preview;
+}
+//#endregion
+export { imageFields as a, ContentReadError as c, enumFields as i, ContentValidationError as l, defineThemePreview as n, schemaProps as o, loadThemePreview as r, ContentError as s, PreviewUnavailableError as t, formatContentIssues as u };

package/dist/rich-text.d.ts

@@ -1,6 +1,6 @@
 //#region src/rich-text.d.ts
 /**
- * The subset the editor toolbar writes: paragraphs, line breaks, bold, italic,
+ * The subset the editor toolbar writes: paragraphs, line breaks, bold, italic, inline code (backticks),
  * links, and bulleted or numbered lists. Headings and images are not supported.
  * Stored as markdown. Rendered as a fixed set of tags, with text escaped.
  *

package/dist/rich-text.js

@@ -1,6 +1,6 @@
 //#region src/rich-text.ts
 /**
-* The subset the editor toolbar writes: paragraphs, line breaks, bold, italic,
+* The subset the editor toolbar writes: paragraphs, line breaks, bold, italic, inline code (backticks),
 * links, and bulleted or numbered lists. Headings and images are not supported.
 * Stored as markdown. Rendered as a fixed set of tags, with text escaped.
 *
@@ -55,6 +55,14 @@ function renderInline(source) {
 	let index = 0;
 	let html = "";
 	while (index < source.length) {
+		if (source[index] === "`") {
+			const end = source.indexOf("`", index + 1);
+			if (end > index + 1) {
+				html += `<code>${escapeHtml(source.slice(index + 1, end))}</code>`;
+				index = end + 1;
+				continue;
+			}
+		}
 		if (source.startsWith("***", index)) {
 			const end = source.indexOf("***", index + 3);
 			if (end !== -1) {
@@ -230,6 +238,7 @@ function blockOf(name) {
 function markOf(name, style) {
 	if (name === "strong" || name === "b") return "strong";
 	if (name === "em" || name === "i") return "em";
+	if (name === "code" || name === "kbd" || name === "samp") return "code";
 	if (name === "a") return "link";
 	if (name === "span") {
 		if (/font-weight\s*:\s*(?:bold|[7-9]00)/i.test(style)) return "strong";
@@ -277,6 +286,10 @@ function listItemText(node) {
 }
 function serializeInline(node) {
 	if (node.mark === "text") return node.text ?? "";
+	if (node.mark === "code") {
+		const text = plainText(node).replace(/`/g, "").replace(/\n+/g, " ");
+		return text.trim() === "" ? text : `\`${text}\``;
+	}
 	if (node.mark === "ul" || node.mark === "ol") return serializeList(node);
 	if (node.mark === "li" || node.mark === "block" || node.mark === "root") return serializeFlow(node.children);
 	const inner = node.children.map((child) => serializeInline(child)).join("");
@@ -290,6 +303,10 @@ function serializeInline(node) {
 	}
 	return inner;
 }
+function plainText(node) {
+	if (node.mark === "text") return node.text ?? "";
+	return node.children.map((child) => plainText(child)).join("");
+}
 function cleanup(value) {
 	return value.replace(/\u00a0/g, " ").replace(/[ \t]+\n/g, "\n").replace(/\n{3,}/g, "\n\n").trim();
 }

package/dist/theme-q19C8cIc.js

@@ -0,0 +1,58 @@
+import { F as tones, N as themeModes, j as buttonStyles } from "./page-C0l3CIuz.js";
+import { fontMarks } from "./marks.js";
+//#region src/field-rules.ts
+/**
+* Field key of a path below a section's `props`: list indexes become `[]`.
+* `steps.2.icon` → `steps[].icon`, `badge.tag` → `badge.tag`.
+*/
+function fieldKey(propPath) {
+	return propPath.split(".").filter((part) => part !== "").reduce((key, part) => /^\d+$/.test(part) ? `${key}[]` : key === "" ? part : `${key}.${part}`, "");
+}
+/** Field key of a full draft path such as `sections.3.props.steps.0.icon`, or null when it is not inside a section's props. */
+function sectionFieldKey(path) {
+	const match = /^sections\.\d+\.props\.(.+)$/.exec(path);
+	return match?.[1] ? fieldKey(match[1]) : null;
+}
+/** True when every option named in the prop's rule has one of its values. A prop without a rule is always shown. */
+function isPropShown(showWhen, prop, readOption) {
+	const rule = showWhen?.[prop];
+	if (!rule) return true;
+	return Object.entries(rule).every(([option, condition]) => matches(condition, readOption(option)));
+}
+function matches(condition, value) {
+	if (typeof condition === "boolean") return value === condition;
+	if (typeof condition === "string") return value === condition;
+	return typeof value === "string" && condition.includes(value);
+}
+//#endregion
+//#region src/theme.ts
+const SYSTEM_FONTS = {
+	sans: {
+		label: "Sans",
+		family: "ui-sans-serif, system-ui, sans-serif"
+	},
+	serif: {
+		label: "Serif",
+		family: "ui-serif, Georgia, serif"
+	},
+	mono: {
+		label: "Mono",
+		family: "ui-monospace, SFMono-Regular, Menlo, monospace"
+	}
+};
+/** What a theme tells the editor about itself. Pass the result as `theme` in the content model. */
+function defineTheme(config = {}) {
+	return {
+		fonts: Object.fromEntries(fontMarks.map((slot) => [slot, {
+			...SYSTEM_FONTS[slot],
+			...config.fonts?.[slot]
+		}])),
+		tones,
+		modes: themeModes,
+		buttonStyles
+	};
+}
+/** Used when the content model has no `theme`. */
+const defaultTheme = defineTheme();
+//#endregion
+export { sectionFieldKey as a, isPropShown as i, defineTheme as n, fieldKey as r, defaultTheme as t };