@things-factory/figure-ui 10.1.70 → 10.1.71

package/client/graphql/index.ts

@@ -333,91 +333,50 @@ export async function fetchFigureVersions(id: string): Promise<FigureVersion[]>
   return unwrap<FigureVersion[]>(response, 'figureVersions') ?? []
 }
 
-/** The recipes this domain sees (ADR-0095): released ones, its own and its parent's. Each is a figure-model V3Recipe. */
-export async function fetchFigureRecipes(): Promise<Array<{ name: string; source: string }>> {
-  const response = await client.query({
-    query: gql`
-      query {
-        figureRecipes {
-          name
-          source
-        }
-      }
-    `,
-    fetchPolicy: 'network-only'
-  })
-  return unwrap<Array<{ name: string; source: string }> | null>(response, 'figureRecipes') ?? []
-}
-
-/** A recipe row as the management screen reads it: whose it is and whether it is released. */
-export interface FigureRecipeRow {
+/** A recipe template as the server gives it (ADR-0095, amended): words in the language asked, the recipe as JSON. */
+export interface RecipeTemplateRow {
   name: string
+  category: string
+  tags: string[]
+  target: 'part' | 'figure'
+  title: string
+  description: string
   source: string
-  state: 'draft' | 'released'
-  updatedAt?: string
-  domain?: { id: string; subdomain?: string }
+  hasThumbnail: boolean
 }
 
-/** Every recipe this domain sees, drafts too (ADR-0095). */
-export async function fetchFigureRecipeRows(): Promise<FigureRecipeRow[]> {
+export async function fetchRecipeTemplates(lang: string): Promise<RecipeTemplateRow[]> {
   const response = await client.query({
     query: gql`
-      query {
-        figureRecipes(all: true) {
-          name
-          source
-          state
-          updatedAt
-          domain {
-            id
-            subdomain
-          }
-        }
-      }
-    `,
-    fetchPolicy: 'network-only'
-  })
-  return unwrap<FigureRecipeRow[] | null>(response, 'figureRecipes') ?? []
-}
-
-export async function saveFigureRecipe(source: string, state: 'draft' | 'released'): Promise<FigureRecipeRow> {
-  const response = await client.mutate({
-    mutation: gql`
-      mutation ($source: String!, $state: String) {
-        saveFigureRecipe(source: $source, state: $state) {
+      query ($lang: String) {
+        figureRecipeTemplates(lang: $lang) {
           name
+          category
+          tags
+          target
+          title
+          description
           source
-          state
+          hasThumbnail
         }
       }
     `,
-    variables: { source, state }
+    variables: { lang }
   })
-  return unwrap<FigureRecipeRow>(response, 'saveFigureRecipe')
+  return unwrap<RecipeTemplateRow[] | null>(response, 'figureRecipeTemplates') ?? []
 }
 
-export async function setFigureRecipeState(name: string, state: 'draft' | 'released'): Promise<void> {
-  const response = await client.mutate({
-    mutation: gql`
-      mutation ($name: String!, $state: String!) {
-        setFigureRecipeState(name: $name, state: $state) {
-          name
+/** One template's guide in the language asked, or '' while none is written. */
+export async function fetchRecipeGuide(name: string, lang: string): Promise<string> {
+  const response = await client.query({
+    query: gql`
+      query ($name: String!, $lang: String) {
+        figureRecipeTemplate(name: $name, lang: $lang) {
+          guide
         }
       }
     `,
-    variables: { name, state }
-  })
-  unwrap(response, 'setFigureRecipeState')
-}
-
-export async function deleteFigureRecipe(name: string): Promise<void> {
-  const response = await client.mutate({
-    mutation: gql`
-      mutation ($name: String!) {
-        deleteFigureRecipe(name: $name)
-      }
-    `,
-    variables: { name }
+    variables: { name, lang }
   })
-  unwrap(response, 'deleteFigureRecipe')
+  return unwrap<{ guide?: string } | null>(response, 'figureRecipeTemplate')?.guide ?? ''
 }

package/client/modeller/figure-v3-parts.ts

@@ -1,11 +1,10 @@
 import '@material/web/icon/icon.js'
 import { css, html, LitElement, nothing } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
+import { customElement, property } from 'lit/decorators.js'
 import { i18next, localize } from '@operato/i18n'
 import { ScrollbarStyles } from '@operato/styles'
 import { PART_LIMIT } from '@hatiolab/figure-model'
-import type { V3PrimitiveCreation, V3Recipe, V3RecipeValue } from '@hatiolab/figure-model'
-import { recipeFieldOf, recipeReady, recipeValueOf, recipeWord } from './v3-recipes.js'
+import type { V3PrimitiveCreation } from '@hatiolab/figure-model'
 import type { V3BudgetLine } from './v3-maturity.js'
 import { partLabelOf } from './v3-fields.js'
 
@@ -61,7 +60,8 @@ const RECIPES: Array<{ kind: V3PaletteKind; icon: string; label: string }> = [
   { kind: 'polygon', icon: 'hexagon', label: 'figure.label.primitive-polygon' },
   { kind: 'plate', icon: 'check_box_outline_blank', label: 'figure.label.primitive-plate' },
   { kind: 'wall', icon: 'crop_portrait', label: 'figure.label.primitive-wall' },
-  { kind: 'portal', icon: 'door_front', label: 'figure.label.primitive-portal' }
+  { kind: 'portal', icon: 'door_front', label: 'figure.label.primitive-portal' },
+  { kind: 'hollow-box', icon: 'inventory_2', label: 'figure.label.primitive-hollow-box' }
 ]
 
 @customElement('figure-v3-parts')
@@ -209,83 +209,19 @@ export class FigureV3Parts extends localize(i18next)(LitElement) {
         border-radius: 6px;
         cursor: pointer;
       }
-      div[recipe-list] {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 3px;
-      }
-      button[recipe] {
-        padding: 4px 8px;
-        font: inherit;
-        font-size: 0.75rem;
-        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
-        background: none;
-        border: 1px solid var(--md-sys-color-outline-variant);
-        border-radius: 999em;
-        cursor: pointer;
-      }
-      button[recipe][on] {
-        color: var(--md-sys-color-on-secondary-container);
-        background: var(--md-sys-color-secondary-container);
-        border-color: transparent;
-      }
-      button[recipe]:disabled {
-        opacity: 0.38;
-        cursor: default;
-      }
-      div[recipe-form] {
-        display: grid;
-        gap: 6px;
-        margin-top: 8px;
-        padding: 8px;
-        border: 1px solid var(--md-sys-color-outline-variant);
-        border-radius: 8px;
-        font-size: 0.75rem;
-      }
-      /* The side pane is narrow (200 px, 160 under 860): the name above its field, not beside it. */
-      div[recipe-form] label[field] {
-        display: grid;
-        gap: 2px;
-      }
-      div[recipe-form] input[type='number'],
-      div[recipe-form] select {
-        min-width: 0;
-        font: inherit;
-      }
-      div[recipe-form] p[hint] {
-        margin: 0;
-        color: var(--md-sys-color-on-surface-variant);
-      }
-      div[recipe-form] p[error] {
-        margin: 0;
-        padding: 6px;
-        white-space: pre-wrap;
-        color: var(--md-sys-color-on-error-container);
-        background: var(--md-sys-color-error-container);
-        border-radius: 6px;
-      }
-      div[recipe-actions] {
-        display: flex;
-        gap: 6px;
-      }
-      div[recipe-actions] button {
-        white-space: nowrap;
+      button[recipe-catalog] {
         display: inline-flex;
         align-items: center;
         gap: 4px;
         padding: 4px 10px;
         font: inherit;
+        font-size: 0.75rem;
+        color: var(--md-sys-color-on-surface);
+        background: none;
         border: 1px solid var(--md-sys-color-outline-variant);
         border-radius: 999em;
-        background: none;
-        color: var(--md-sys-color-on-surface);
         cursor: pointer;
       }
-      div[recipe-actions] button[insert] {
-        border-color: transparent;
-        color: var(--md-sys-color-on-primary);
-        background: var(--md-sys-color-primary);
-      }
       button[shape]:hover:not([disabled]) {
         color: var(--md-sys-color-on-primary-container);
         background-color: var(--md-sys-color-primary-container);
@@ -442,13 +378,8 @@ export class FigureV3Parts extends localize(i18next)(LitElement) {
    * 잠긴다. 되풀이는 한 부품으로 센다. 등급을 안 정했으면 한도는 없다.
    */
   @property({ attribute: false }) partBudget?: { level: 'S' | 'M' | 'L' | null; used: number; limit: number | null }
-  /** The recipes this domain sees (ADR-0095). */
-  @property({ attribute: false }) recipes: V3Recipe[] = []
-  /** Why the last recipe put in was refused -- the kernel's sentence, as it is (ADR-0095 condition 3). */
-  @property({ type: String }) recipeError = ''
-  /** The recipe whose form is open, and the values in it. */
-  @state() private openRecipe = ''
-  @state() private recipeValues: Record<string, V3RecipeValue> = {}
+  /** How many recipe templates the catalog holds; none, and the section is not drawn. */
+  @property({ type: Number }) recipeCount = 0
 
   render() {
     const b = this.partBudget
@@ -626,70 +557,19 @@ export class FigureV3Parts extends localize(i18next)(LitElement) {
   }
 
   /**
-   * Recipes (ADR-0095): a door, a roller row -- parts made in one step, with a few numbers and choices. A recipe for a
-   * part needs one chosen; its form opens under it, and putting it in is one step of the history.
+   * Recipes (ADR-0095): the catalog of templates -- a door, a roller row -- opened over the modeller, put onto the chosen
+   * part in one step.
    */
   private renderRecipes(full: boolean) {
-    if (!this.recipes.length) return nothing
-    const language = i18next.language || 'en'
-    const open = this.recipes.find(r => r.name === this.openRecipe)
+    if (!this.recipeCount) return nothing
     return html`<section recipes>
       <h3>${i18next.t('figure.label.recipes')}</h3>
-      <div recipe-list>
-        ${this.recipes.map(recipe => {
-          const ready = recipeReady(recipe, this.selected)
-          return html`<button
-            recipe=${recipe.name}
-            ?on=${recipe.name === this.openRecipe}
-            ?disabled=${this.locked || full || !ready}
-            title=${ready ? recipeWord(recipe.description, language) : i18next.t('figure.text.recipe-needs-a-part')}
-            @click=${() => this.openFor(recipe)}
-          >
-            ${recipeWord(recipe.title, language)}
-          </button>`
-        })}
-      </div>
-      ${this.selected || !this.recipes.some(r => r.target === 'part') ? nothing : html`<p hint>${i18next.t('figure.text.recipe-needs-a-part')}</p>`}
-      ${open && recipeReady(open, this.selected) ? this.renderRecipeForm(open, language) : nothing}
+      <button recipe-catalog ?disabled=${this.locked || full} @click=${() => this.ask('open-recipe-catalog', {})}>
+        <md-icon>widgets</md-icon>${i18next.t('figure.button.open-recipe-catalog', { count: this.recipeCount })}
+      </button>
     </section>`
   }
 
-  private openFor(recipe: V3Recipe) {
-    if (this.openRecipe === recipe.name) {
-      this.openRecipe = ''
-      return
-    }
-    this.openRecipe = recipe.name
-    this.recipeValues = Object.fromEntries(recipe.params.map(p => [p.name, p.default]))
-  }
-
-  private renderRecipeForm(recipe: V3Recipe, language: string) {
-    const set = (name: string, value: V3RecipeValue) => (this.recipeValues = { ...this.recipeValues, [name]: value })
-    return html`<div recipe-form>
-      ${recipe.target === 'part' ? html`<p hint>${i18next.t('figure.text.recipe-onto', { part: this.selected })}</p>` : nothing}
-      ${recipe.params.map(param => {
-        const label = recipeWord(param.label, language) || param.name
-        const value = this.recipeValues[param.name] ?? param.default
-        if (param.kind === 'flag')
-          return html`<label toggle><input type="checkbox" .checked=${value === true} @change=${(e: Event) => set(param.name, (e.target as HTMLInputElement).checked)} />${label}</label>`
-        if (param.kind === 'choice' || param.kind === 'face')
-          return html`<label field><span>${label}</span>
-            <select @change=${(e: Event) => set(param.name, recipeValueOf(param, (e.target as HTMLSelectElement).value))}>
-              ${(param.options ?? []).map(o => html`<option value=${String(o)} ?selected=${o === value}>${String(o)}</option>`)}
-            </select></label>`
-        return html`<label field><span>${label}${param.kind === 'ratio' ? ' (%)' : ''}</span>
-          <input type="number" step="any" param=${param.name} .value=${recipeFieldOf(param, value)} @change=${(e: Event) => set(param.name, recipeValueOf(param, (e.target as HTMLInputElement).value))} /></label>`
-      })}
-      ${this.recipeError ? html`<p role="alert" error>${this.recipeError}</p>` : nothing}
-      <div recipe-actions>
-        <button act insert ?disabled=${this.locked} @click=${() => this.ask('insert-recipe', { recipe, values: this.recipeValues })}>
-          <md-icon>add</md-icon>${i18next.t('figure.button.insert-recipe')}
-        </button>
-        <button act @click=${() => (this.openRecipe = '')}>${i18next.t('figure.button.close')}</button>
-      </div>
-    </div>`
-  }
-
   /** 정본을 고치지 않는다 — 무엇을 하겠다는 것만 알린다. */
   private ask(what: string, detail: object) {
     this.dispatchEvent(new CustomEvent(what, { detail, bubbles: true, composed: true }))

package/client/modeller/figure-v3-recipe-catalog.ts

@@ -0,0 +1,348 @@
+import '@material/web/icon/icon.js'
+import '@operato/markdown'
+
+import { css, html, LitElement, nothing } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+
+import { i18next, localize } from '@operato/i18n'
+import { ScrollbarStyles } from '@operato/styles'
+import { describeV3Recipe } from '@hatiolab/figure-model'
+import type { V3Recipe, V3RecipeValue } from '@hatiolab/figure-model'
+
+import { recipeFieldOf, recipeReady, recipeValueOf, recipeWord, recipeWorkings, recipesMatching, type RecipeTemplate } from './v3-recipes.js'
+
+/**
+ * The recipe catalog (ADR-0095): the templates the product ships, by category, found by words, each told in full --
+ * what it puts in, how many parts, how they move, what each value does, and how to use it -- and put onto the chosen
+ * part in one step. The numbers and the ways of moving are worked out from the recipe (`describeV3Recipe`), so they say
+ * what it does; only the descriptions and the guide are written.
+ */
+@customElement('figure-v3-recipe-catalog')
+export class FigureV3RecipeCatalog extends localize(i18next)(LitElement) {
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        position: fixed;
+        inset: 0;
+        z-index: 20;
+        display: grid;
+        place-items: center;
+        background: color-mix(in srgb, var(--md-sys-color-scrim, #000) 32%, transparent);
+        font-size: 0.82rem;
+        color: var(--md-sys-color-on-surface);
+      }
+      div[panel] {
+        display: grid;
+        grid-template-rows: auto 1fr;
+        width: min(1100px, calc(100vw - 32px));
+        height: min(720px, calc(100vh - 32px));
+        background: var(--md-sys-color-surface);
+        border-radius: 12px;
+        overflow: hidden;
+        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
+      }
+      header {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 8px 12px;
+        border-bottom: 1px solid var(--md-sys-color-outline-variant);
+      }
+      header h2 {
+        margin: 0;
+        font-size: var(--ui-t-title, 16px);
+        flex: 1;
+      }
+      header input {
+        width: 220px;
+        padding: 4px 8px;
+        font: inherit;
+      }
+      button[close] {
+        display: inline-grid;
+        place-items: center;
+        width: 32px;
+        height: 32px;
+        border: none;
+        border-radius: 8px;
+        background: none;
+        color: var(--md-sys-color-on-surface-variant);
+        cursor: pointer;
+      }
+      div[body] {
+        display: grid;
+        grid-template-columns: 170px minmax(0, 1fr) minmax(300px, 380px);
+        min-height: 0;
+      }
+      @media (max-width: 760px) {
+        div[body] {
+          grid-template-columns: 1fr;
+          overflow: auto;
+        }
+      }
+      nav,
+      section[list],
+      section[detail] {
+        overflow: auto;
+        min-height: 0;
+        padding: 8px;
+      }
+      nav {
+        border-right: 1px solid var(--md-sys-color-outline-variant);
+      }
+      section[detail] {
+        border-left: 1px solid var(--md-sys-color-outline-variant);
+        display: grid;
+        gap: 10px;
+        align-content: start;
+      }
+      button[category] {
+        display: flex;
+        justify-content: space-between;
+        width: 100%;
+        padding: 6px 8px;
+        font: inherit;
+        color: inherit;
+        background: none;
+        border: none;
+        border-radius: 6px;
+        text-align: left;
+        cursor: pointer;
+      }
+      button[category][on],
+      button[card][on] {
+        background: var(--md-sys-color-secondary-container);
+        color: var(--md-sys-color-on-secondary-container);
+      }
+      section[list] {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
+        gap: 8px;
+        align-content: start;
+      }
+      button[card] {
+        display: grid;
+        gap: 4px;
+        padding: 8px;
+        font: inherit;
+        color: inherit;
+        text-align: left;
+        background: none;
+        border: 1px solid var(--md-sys-color-outline-variant);
+        border-radius: 8px;
+        cursor: pointer;
+      }
+      button[card] img {
+        width: 100%;
+        aspect-ratio: 4 / 3;
+        object-fit: contain;
+        background: var(--md-sys-color-surface-container);
+        border-radius: 4px;
+      }
+      button[card] small,
+      p[muted] {
+        color: var(--md-sys-color-on-surface-variant);
+      }
+      h3 {
+        margin: 0;
+        font-size: var(--ui-t-body, 14px);
+      }
+      p {
+        margin: 0;
+        line-height: 1.5;
+      }
+      ul {
+        margin: 0;
+        padding-left: 18px;
+        line-height: 1.6;
+      }
+      table {
+        border-collapse: collapse;
+        width: 100%;
+      }
+      th,
+      td {
+        text-align: left;
+        vertical-align: top;
+        padding: 3px 4px;
+        border-bottom: 1px solid var(--md-sys-color-outline-variant);
+      }
+      td small {
+        display: block;
+        color: var(--md-sys-color-on-surface-variant);
+      }
+      div[form] {
+        display: grid;
+        gap: 6px;
+        padding: 8px;
+        border: 1px solid var(--md-sys-color-outline-variant);
+        border-radius: 8px;
+      }
+      div[form] label {
+        display: grid;
+        gap: 2px;
+      }
+      div[form] label[toggle] {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+      }
+      div[form] input,
+      div[form] select {
+        font: inherit;
+        min-width: 0;
+      }
+      button[insert] {
+        justify-self: start;
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        padding: 6px 14px;
+        font: inherit;
+        white-space: nowrap;
+        color: var(--md-sys-color-on-primary);
+        background: var(--md-sys-color-primary);
+        border: none;
+        border-radius: 999em;
+        cursor: pointer;
+      }
+      button[insert]:disabled {
+        opacity: 0.38;
+        cursor: default;
+      }
+      p[role='alert'] {
+        padding: 6px;
+        white-space: pre-wrap;
+        color: var(--md-sys-color-on-error-container);
+        background: var(--md-sys-color-error-container);
+        border-radius: 6px;
+      }
+      ox-markdown {
+        display: block;
+      }
+    `
+  ]
+
+  @property({ attribute: false }) templates: RecipeTemplate[] = []
+  /** The part it would be put onto. */
+  @property({ type: String }) selected = ''
+  @property({ type: Boolean }) locked = false
+  /** Why the last one put in was refused, in the kernel's words. */
+  @property({ type: String }) error = ''
+  /** Reads a template's guide; absent, no guide is shown. */
+  @property({ attribute: false }) guideOf?: (name: string) => Promise<string>
+  /** Where a template's thumbnail is read from; absent, cards show no picture. */
+  @property({ attribute: false }) thumbnailOf?: (name: string) => string
+
+  @state() private category = ''
+  @state() private query = ''
+  @state() private chosen = ''
+  @state() private values: Record<string, V3RecipeValue> = {}
+  @state() private guide = ''
+
+  render() {
+    const language = i18next.language || 'en'
+    const categories = [...new Set(this.templates.map(t => t.category))].sort()
+    const shown = recipesMatching(this.templates, this.category, this.query)
+    const chosen = this.templates.find(t => t.name === this.chosen) ?? shown[0]
+    return html`<div panel role="dialog" aria-modal="true" aria-label=${i18next.t('figure.label.recipe-catalog')}>
+      <header>
+        <h2>${i18next.t('figure.label.recipe-catalog')}</h2>
+        <input search type="search" placeholder=${i18next.t('figure.text.recipe-search')} .value=${this.query} @input=${(e: Event) => (this.query = (e.target as HTMLInputElement).value)} />
+        <button close aria-label=${i18next.t('figure.button.close')} @click=${() => this.dispatchEvent(new CustomEvent('close-catalog', { bubbles: true, composed: true }))}>
+          <md-icon>close</md-icon>
+        </button>
+      </header>
+      <div body>
+        <nav>
+          <button category ?on=${!this.category} @click=${() => (this.category = '')}>
+            <span>${i18next.t('figure.label.recipe-all')}</span><small>${this.templates.length}</small>
+          </button>
+          ${categories.map(
+            c => html`<button category=${c} ?on=${this.category === c} @click=${() => (this.category = c)}>
+              <span>${i18next.t('figure.label.recipe-category-' + c)}</span><small>${this.templates.filter(t => t.category === c).length}</small>
+            </button>`
+          )}
+        </nav>
+        <section list>
+          ${shown.map(
+            t => html`<button card=${t.name} ?on=${t.name === chosen?.name} @click=${() => this.choose(t)}>
+              ${t.hasThumbnail && this.thumbnailOf ? html`<img alt="" loading="lazy" src=${this.thumbnailOf(t.name)} />` : nothing}
+              <b>${t.title}</b>
+              <small>${t.description}</small>
+            </button>`
+          )}
+        </section>
+        <section detail>${chosen ? this.renderDetail(chosen, language) : nothing}</section>
+      </div>
+    </div>`
+  }
+
+  private choose(t: RecipeTemplate) {
+    if (this.chosen === t.name) return
+    this.chosen = t.name
+    this.values = Object.fromEntries(t.recipe.params.map(p => [p.name, p.default]))
+    this.guide = ''
+    this.guideOf?.(t.name)
+      .then(text => this.chosen === t.name && (this.guide = text))
+      .catch(() => {})
+  }
+
+  protected willUpdate() {
+    /* The first card is chosen while nothing is, so the detail is never empty. */
+    const shown = recipesMatching(this.templates, this.category, this.query)
+    if (!this.templates.some(t => t.name === this.chosen) && shown[0]) this.choose(shown[0])
+  }
+
+  private renderDetail(t: RecipeTemplate, language: string) {
+    const d = describeV3Recipe(t.recipe)
+    const count = d.parts.min === d.parts.max ? String(d.parts.min) : `${d.parts.min}–${d.parts.max}`
+    const ready = recipeReady(t.recipe, this.selected)
+    return html`
+      <h3>${t.title}</h3>
+      <p>${t.description}</p>
+      <div>
+        <h3>${i18next.t('figure.label.recipe-adds')}</h3>
+        <ul>
+          <li parts=${count}>${i18next.t("figure.text.recipe-parts", { parts: count })}</li>
+          ${recipeWorkings(t.recipe).map(line => html`<li>${i18next.t(line.key, line.words)}</li>`)}
+          <li>${i18next.t(t.recipe.target === 'part' ? 'figure.text.recipe-onto-chosen' : 'figure.text.recipe-onto-figure')}</li>
+        </ul>
+      </div>
+      ${t.recipe.params.length ? this.renderForm(t.recipe, language) : nothing}
+      ${this.error ? html`<p role="alert">${this.error}</p>` : nothing}
+      ${ready ? nothing : html`<p muted>${i18next.t('figure.text.recipe-needs-a-part')}</p>`}
+      <button insert ?disabled=${this.locked || !ready} @click=${() => this.dispatchEvent(new CustomEvent('insert-recipe', { detail: { recipe: t.recipe, values: this.values }, bubbles: true, composed: true }))}>
+        <md-icon>add</md-icon>${this.selected && t.recipe.target === 'part' ? i18next.t('figure.button.insert-recipe-onto', { part: this.selected }) : i18next.t('figure.button.insert-recipe')}
+      </button>
+      ${this.guide ? html`<ox-markdown .src=${this.guide}></ox-markdown>` : nothing}
+    `
+  }
+
+  /** Each value: its name, what it does, and the field to set it -- a share typed as a percentage. */
+  private renderForm(recipe: V3Recipe, language: string) {
+    const set = (name: string, value: V3RecipeValue) => (this.values = { ...this.values, [name]: value })
+    return html`<div form>
+      <h3>${i18next.t('figure.label.recipe-values')}</h3>
+      ${recipe.params.map(param => {
+        const label = recipeWord(param.label, language) || param.name
+        const hint = recipeWord(param.hint, language)
+        const value = this.values[param.name] ?? param.default
+        const help = hint ? html`<small>${hint}</small>` : nothing
+        if (param.kind === 'flag')
+          return html`<label toggle><input type="checkbox" param=${param.name} .checked=${value === true} @change=${(e: Event) => set(param.name, (e.target as HTMLInputElement).checked)} />${label}</label>${help}`
+        if (param.kind === 'choice' || param.kind === 'face')
+          return html`<label><span>${label}</span>
+              <select param=${param.name} @change=${(e: Event) => set(param.name, recipeValueOf(param, (e.target as HTMLSelectElement).value))}>
+                ${(param.options ?? []).map(o => html`<option value=${String(o)} ?selected=${o === value}>${String(o)}</option>`)}
+              </select></label
+            >${help}`
+        const range = param.kind === 'ratio' ? `${recipeFieldOf(param, param.min ?? 0)}–${recipeFieldOf(param, param.max ?? 1)} %` : `${param.min ?? ''}–${param.max ?? ''} mm`
+        return html`<label><span>${label} (${range})</span>
+            <input type="number" step="any" param=${param.name} .value=${recipeFieldOf(param, value)} @change=${(e: Event) => set(param.name, recipeValueOf(param, (e.target as HTMLInputElement).value))} /></label
+          >${help}`
+      })}
+    </div>`
+  }
+}