@things-factory/figure-ui 10.1.69 → 10.1.71

package/dist-client/modeller/figure-v3-recipe-catalog.js

@@ -0,0 +1,382 @@
+import { __decorate, __metadata } from "tslib";
+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 { recipeFieldOf, recipeReady, recipeValueOf, recipeWord, recipeWorkings, recipesMatching } 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.
+ */
+let FigureV3RecipeCatalog = class FigureV3RecipeCatalog extends localize(i18next)(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.templates = [];
+        /** The part it would be put onto. */
+        this.selected = '';
+        this.locked = false;
+        /** Why the last one put in was refused, in the kernel's words. */
+        this.error = '';
+        this.category = '';
+        this.query = '';
+        this.chosen = '';
+        this.values = {};
+        this.guide = '';
+    }
+    static { this.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;
+      }
+    `
+    ]; }
+    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) => (this.query = e.target.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>`;
+    }
+    choose(t) {
+        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(() => { });
+    }
+    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]);
+    }
+    renderDetail(t, language) {
+        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. */
+    renderForm(recipe, language) {
+        const set = (name, value) => (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) => set(param.name, e.target.checked)} />${label}</label>${help}`;
+            if (param.kind === 'choice' || param.kind === 'face')
+                return html `<label><span>${label}</span>
+              <select param=${param.name} @change=${(e) => set(param.name, recipeValueOf(param, e.target.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) => set(param.name, recipeValueOf(param, e.target.value))} /></label
+          >${help}`;
+        })}
+    </div>`;
+    }
+};
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Array)
+], FigureV3RecipeCatalog.prototype, "templates", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], FigureV3RecipeCatalog.prototype, "selected", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], FigureV3RecipeCatalog.prototype, "locked", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], FigureV3RecipeCatalog.prototype, "error", void 0);
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Function)
+], FigureV3RecipeCatalog.prototype, "guideOf", void 0);
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Function)
+], FigureV3RecipeCatalog.prototype, "thumbnailOf", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureV3RecipeCatalog.prototype, "category", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureV3RecipeCatalog.prototype, "query", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureV3RecipeCatalog.prototype, "chosen", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureV3RecipeCatalog.prototype, "values", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureV3RecipeCatalog.prototype, "guide", void 0);
+FigureV3RecipeCatalog = __decorate([
+    customElement('figure-v3-recipe-catalog')
+], FigureV3RecipeCatalog);
+export { FigureV3RecipeCatalog };
+//# sourceMappingURL=figure-v3-recipe-catalog.js.map

package/dist-client/modeller/figure-v3-recipe-catalog.js.map

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

package/dist-client/modeller/v3-editor.d.ts

@@ -1,6 +1,7 @@
 import { LitElement, type PropertyValues } from 'lit';
 import '@operato/layout';
-import type { V3Recipe } from '@hatiolab/figure-model';
+import type { RecipeTemplate } from './v3-recipes.js';
+import './figure-v3-recipe-catalog.js';
 import type { V3ProductSession } from './v3-product-session.js';
 import './v3-canvas.js';
 import './figure-v3-parts.js';
@@ -17,8 +18,12 @@ import type { FirstSave } from './v3-first-save.js';
 export declare class FigureV3Editor extends LitElement {
     static styles: import("lit").CSSResult[];
     session?: V3ProductSession;
-    /** The recipes this domain sees (ADR-0095), given by the page. */
-    recipes: V3Recipe[];
+    /** The recipe templates (ADR-0095), read by the page from the server. */
+    templates: RecipeTemplate[];
+    /** Reads a template's guide; given by the page. */
+    guideOf?: (name: string) => Promise<string>;
+    thumbnailOf?: (name: string) => string;
+    private catalogOpen;
     /** Why the last recipe was refused, in the kernel's words. */
     private recipeError;
     revision: number;

package/dist-client/modeller/v3-editor.js

@@ -6,6 +6,7 @@ import '@operato/layout';
 import { customElement, property, state } from 'lit/decorators.js';
 import { live } from 'lit/directives/live.js';
 import { PART_LIMIT, parseV3Recipe, resolveV3Recipe, v3PartCountOf, v3RecipeIdFor } from '@hatiolab/figure-model';
+import './figure-v3-recipe-catalog.js';
 import { captureV3Thumbnail } from './v3-thumbnail.js';
 import { drawableV3Parts } from './v3-renderer.js';
 import './v3-canvas.js';
@@ -35,8 +36,9 @@ import { liveOverSession, NOTHING_LIVE, scrubbed, scrubStep } from './v3-live.js
 let FigureV3Editor = class FigureV3Editor extends LitElement {
     constructor() {
         super(...arguments);
-        /** The recipes this domain sees (ADR-0095), given by the page. */
-        this.recipes = [];
+        /** The recipe templates (ADR-0095), read by the page from the server. */
+        this.templates = [];
+        this.catalogOpen = false;
         /** Why the last recipe was refused, in the kernel's words. */
         this.recipeError = '';
         this.revision = 0;
@@ -529,6 +531,7 @@ let FigureV3Editor = class FigureV3Editor extends LitElement {
             const steps = resolveV3Recipe(checked, { id, ...(checked.target === 'part' ? { target: this.selected } : {}), values });
             this.session.applyRecipe(steps);
             this.recipeError = '';
+            this.catalogOpen = false;
             this.error = '';
             this.changed();
         }
@@ -1005,6 +1008,9 @@ let FigureV3Editor = class FigureV3Editor extends LitElement {
         const repeat = repeatOf(this.selected, geometry);
         if (!asset || !repeat || repeat.index)
             return nothing;
+        /* The row is set on its part; what hangs from that part is copied with it and has no row of its own. */
+        if (!asset.document.model.nodes.some(n => n.id === `${this.selected}.repeat`))
+            return nothing;
         const model = asset.document.model;
         const layout = model.nodes.find(n => n.id === `${this.selected}.layout`);
         const axis = model.nodes.find(n => n.id === `${this.selected}.repeat`)?.params?.axis ?? '?';
@@ -1160,6 +1166,18 @@ let FigureV3Editor = class FigureV3Editor extends LitElement {
           </div>`
             : null}
       ${this.notice ? html `<div role="status" class="notice">${this.notice}</div>` : null}
+      ${this.catalogOpen
+            ? html `<figure-v3-recipe-catalog
+            .templates=${this.templates}
+            .selected=${this.selected}
+            .error=${this.recipeError}
+            .guideOf=${this.guideOf}
+            .thumbnailOf=${this.thumbnailOf}
+            ?locked=${unavailable}
+              @insert-recipe=${(e) => this.insertRecipe(e.detail.recipe, e.detail.values)}
+              @close-catalog=${() => (this.catalogOpen = false)}
+          ></figure-v3-recipe-catalog>`
+            : null}
       <ox-three-pane>
         <figure-v3-parts
           slot="start"
@@ -1171,9 +1189,8 @@ let FigureV3Editor = class FigureV3Editor extends LitElement {
           .selected=${this.selected}
           ?locked=${unavailable}
           @add-part=${(e) => this.add(e.detail.kind)}
-          .recipes=${this.recipes}
-          .recipeError=${this.recipeError}
-          @insert-recipe=${(e) => this.insertRecipe(e.detail.recipe, e.detail.values)}
+          .recipeCount=${this.templates.length}
+          @open-recipe-catalog=${() => ((this.catalogOpen = true), (this.recipeError = ''))}
           @select-part=${(e) => this.choose(e.detail.id)}
           @toggle-part-hidden=${(e) => this.toggleHiddenPart(e.detail.id)}
           @set-all-parts-hidden=${(e) => (this.hiddenParts = e.detail.hidden ? new Set(view.geometry.map(g => ownerOf(g.id))) : new Set())}
@@ -1327,7 +1344,19 @@ __decorate([
 __decorate([
     property({ attribute: false }),
     __metadata("design:type", Array)
-], FigureV3Editor.prototype, "recipes", void 0);
+], FigureV3Editor.prototype, "templates", void 0);
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Function)
+], FigureV3Editor.prototype, "guideOf", void 0);
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Function)
+], FigureV3Editor.prototype, "thumbnailOf", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureV3Editor.prototype, "catalogOpen", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)