@things-factory/figure-ui 10.1.70 → 10.1.72

package/client/pages/figure-recipe-page.ts

@@ -1,338 +0,0 @@
-import '@material/web/icon/icon.js'
-import '../modeller/figure-v3-preview.js'
-
-import { css, html, nothing } from 'lit'
-import { customElement, state } from 'lit/decorators.js'
-
-import { i18next, localize } from '@operato/i18n'
-import { PageView } from '@operato/shell'
-import { OxPrompt } from '@operato/popup'
-import { ScrollbarStyles, WorkSurfacePageStyles } from '@operato/styles'
-import { applyV3Recipe, parseV3Recipe, v3RecipeTestRoom } from '@hatiolab/figure-model'
-import type { V3Asset, V3Recipe } from '@hatiolab/figure-model'
-
-import { deleteFigureRecipe, fetchFigureRecipeRows, saveFigureRecipe, setFigureRecipeState, type FigureRecipeRow } from '../graphql/index.js'
-import { paramRangeOf, recipeFieldOf, recipeIsOwn, recipesOf, recipeWord, subdomainOf } from '../modeller/v3-recipes.js'
-
-/**
- * The recipes (ADR-0095): what each one puts in, shown put into a room at several sizes, and whose it is.
- *
- * A recipe of this domain's own can be released, taken back to draft, changed or deleted. A parent's -- the ones the
- * system domain ships -- is copied in under its name to be changed, and the copy stands in for it. Figures a recipe was
- * put into keep their parts whatever happens here.
- */
-@customElement('figure-recipe-page')
-export class FigureRecipePage extends localize(i18next)(PageView) {
-  static styles = [
-    WorkSurfacePageStyles,
-    ScrollbarStyles,
-    css`
-      :host {
-        display: grid;
-        grid-template-columns: minmax(220px, 280px) 1fr;
-        background-color: var(--md-sys-color-surface);
-        color: var(--md-sys-color-on-surface);
-        font-size: 0.85rem;
-      }
-      @container (max-width: 640px) {
-        :host {
-          grid-template-columns: 1fr;
-        }
-      }
-      nav {
-        overflow: auto;
-        border-right: 1px solid var(--md-sys-color-outline-variant);
-        padding: 8px;
-      }
-      nav p[intro] {
-        margin: 4px 4px 10px;
-        color: var(--md-sys-color-on-surface-variant);
-        line-height: 1.5;
-      }
-      button[row] {
-        display: grid;
-        gap: 2px;
-        width: 100%;
-        padding: 8px 10px;
-        text-align: left;
-        font: inherit;
-        color: inherit;
-        background: none;
-        border: none;
-        border-radius: 8px;
-        cursor: pointer;
-      }
-      button[row][on] {
-        background: var(--md-sys-color-secondary-container);
-        color: var(--md-sys-color-on-secondary-container);
-      }
-      button[row] small {
-        display: flex;
-        gap: 6px;
-        color: var(--md-sys-color-on-surface-variant);
-      }
-      span[chip] {
-        padding: 0 6px;
-        border-radius: 999em;
-        border: 1px solid var(--md-sys-color-outline-variant);
-        font-size: 0.7rem;
-      }
-      span[chip][draft] {
-        color: var(--md-sys-color-tertiary);
-        border-color: var(--md-sys-color-tertiary);
-      }
-      main {
-        overflow: auto;
-        padding: 12px 16px;
-        display: grid;
-        gap: 12px;
-        align-content: start;
-      }
-      main h2 {
-        margin: 0;
-        font-size: var(--ui-t-title, 16px);
-      }
-      main p {
-        margin: 0;
-        line-height: 1.5;
-      }
-      p[muted] {
-        color: var(--md-sys-color-on-surface-variant);
-      }
-      table {
-        border-collapse: collapse;
-        width: 100%;
-        max-width: 720px;
-      }
-      th,
-      td {
-        text-align: left;
-        padding: 4px 8px;
-        border-bottom: 1px solid var(--md-sys-color-outline-variant);
-      }
-      figure-v3-preview {
-        height: 420px;
-        border: 1px solid var(--md-sys-color-outline-variant);
-        border-radius: 8px;
-        overflow: hidden;
-      }
-      div[actions] {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 8px;
-      }
-      div[actions] button {
-        display: inline-flex;
-        align-items: center;
-        gap: 4px;
-        padding: 6px 12px;
-        font: inherit;
-        color: var(--md-sys-color-on-surface);
-        background: none;
-        border: 1px solid var(--md-sys-color-outline-variant);
-        border-radius: 999em;
-        cursor: pointer;
-      }
-      div[actions] button[primary] {
-        color: var(--md-sys-color-on-primary);
-        background: var(--md-sys-color-primary);
-        border-color: transparent;
-      }
-      div[actions] button[danger] {
-        color: var(--md-sys-color-error);
-        border-color: var(--md-sys-color-error);
-      }
-      p[role='alert'] {
-        padding: 8px;
-        white-space: pre-wrap;
-        color: var(--md-sys-color-on-error-container);
-        background: var(--md-sys-color-error-container);
-        border-radius: 8px;
-      }
-      textarea {
-        width: 100%;
-        min-height: 320px;
-        font: 0.78rem/1.4 monospace;
-        box-sizing: border-box;
-      }
-    `
-  ]
-
-  @state() private rows: FigureRecipeRow[] = []
-  @state() private chosen = ''
-  @state() private error = ''
-  @state() private editing = false
-  @state() private text = ''
-
-  get context() {
-    return { title: i18next.t('figure.title.recipes') }
-  }
-
-  async pageUpdated(_changes: Record<string, unknown>, _lifecycle: unknown, before: { active?: boolean }) {
-    if (this.active && !before?.active) await this.read()
-  }
-
-  private async read() {
-    try {
-      this.rows = await fetchFigureRecipeRows()
-      if (!this.rows.some(r => r.name === this.chosen)) this.chosen = this.rows[0]?.name ?? ''
-      this.error = ''
-    } catch (error) {
-      this.error = error instanceof Error ? error.message : String(error)
-    }
-  }
-
-  private get subdomain() {
-    return subdomainOf(location.pathname)
-  }
-
-  render() {
-    const language = i18next.language || 'en'
-    const recipes = recipesOf(this.rows)
-    const row = this.rows.find(r => r.name === this.chosen)
-    const recipe = recipes.find(r => r.name === this.chosen)
-    return html`
-      <nav>
-        <p intro>${i18next.t('figure.text.recipes-intro')}</p>
-        ${this.rows.map(one => {
-          const r = recipes.find(x => x.name === one.name)
-          return html`<button row ?on=${one.name === this.chosen} @click=${() => this.choose(one.name)}>
-            <span>${r ? recipeWord(r.title, language) : one.name}</span>
-            <small>
-              <span>${one.name}</span>
-              ${one.state === 'draft' ? html`<span chip draft>${i18next.t('figure.label.recipe-draft')}</span>` : nothing}
-              ${recipeIsOwn(one, this.subdomain) ? nothing : html`<span chip>${i18next.t('figure.label.recipe-inherited')}</span>`}
-            </small>
-          </button>`
-        })}
-      </nav>
-      <main>
-        ${this.error ? html`<p role="alert">${this.error}</p>` : nothing}
-        ${row && recipe ? this.renderRecipe(row, recipe, language) : html`<p muted>${i18next.t('figure.text.recipes-empty')}</p>`}
-      </main>
-    `
-  }
-
-  private renderRecipe(row: FigureRecipeRow, recipe: V3Recipe, language: string) {
-    const own = recipeIsOwn(row, this.subdomain)
-    return html`
-      <h2>${recipeWord(recipe.title, language)}</h2>
-      <p>${recipeWord(recipe.description, language)}</p>
-      <p muted>
-        ${i18next.t(recipe.target === 'part' ? 'figure.text.recipe-target-part' : 'figure.text.recipe-target-figure')} ·
-        ${i18next.t(own ? 'figure.text.recipe-own' : 'figure.text.recipe-inherited', { domain: row.domain?.subdomain ?? '' })}
-      </p>
-      <table>
-        <thead>
-          <tr>
-            <th>${i18next.t('figure.label.recipe-param')}</th>
-            <th>${i18next.t('figure.label.recipe-default')}</th>
-            <th>${i18next.t('figure.label.recipe-range')}</th>
-          </tr>
-        </thead>
-        <tbody>
-          ${recipe.params.map(
-            p => html`<tr>
-              <td>${recipeWord(p.label, language) || p.name}</td>
-              <td>${p.kind === 'flag' ? i18next.t(p.default ? 'figure.label.yes' : 'figure.label.no') : recipeFieldOf(p, p.default)}${p.kind === 'ratio' ? ' %' : ''}</td>
-              <td>${paramRangeOf(p)}</td>
-            </tr>`
-          )}
-        </tbody>
-      </table>
-      ${this.renderPreview(recipe)}
-      <div actions>
-        ${own
-          ? html`${row.state === 'draft'
-                ? html`<button primary @click=${() => this.setState(row.name, 'released')}>${i18next.t('figure.button.recipe-release')}</button>`
-                : html`<button @click=${() => this.setState(row.name, 'draft')}>${i18next.t('figure.button.recipe-to-draft')}</button>`}
-              <button danger @click=${() => this.deleteRecipe(row.name)}><md-icon>delete</md-icon>${i18next.t('figure.button.recipe-delete')}</button>`
-          : html`<button primary @click=${() => this.copyIn(row)}>${i18next.t('figure.button.recipe-copy-in')}</button>`}
-        <button @click=${() => this.edit(row)}><md-icon>data_object</md-icon>${i18next.t('figure.button.recipe-edit-source')}</button>
-      </div>
-      ${this.editing
-        ? html`<p muted>${i18next.t('figure.text.recipe-edit-source')}</p>
-            <textarea .value=${this.text} @input=${(e: Event) => (this.text = (e.target as HTMLTextAreaElement).value)}></textarea>
-            <div actions>
-              <button primary @click=${() => this.saveText(own ? row.state : 'draft')}>${i18next.t('figure.button.save')}</button>
-              <button @click=${() => (this.editing = false)}>${i18next.t('figure.button.close')}</button>
-            </div>`
-        : nothing}
-    `
-  }
-
-  /** The recipe put into the room it is checked in, with its defaults: what it makes, at several sizes. */
-  private renderPreview(recipe: V3Recipe) {
-    let asset: V3Asset
-    try {
-      const room = v3RecipeTestRoom()
-      asset = applyV3Recipe(room.asset, parseV3Recipe(recipe), recipe.target === 'part' ? { target: room.target } : {}).asset
-    } catch (error) {
-      return html`<p role="alert">${error instanceof Error ? error.message : String(error)}</p>`
-    }
-    return html`<p muted>${i18next.t('figure.text.recipe-preview')}</p>
-      <figure-v3-preview .asset=${asset} .context=${`recipe:${recipe.name}`}></figure-v3-preview>`
-  }
-
-  private choose(name: string) {
-    this.chosen = name
-    this.editing = false
-    this.error = ''
-  }
-
-  private edit(row: FigureRecipeRow) {
-    this.editing = !this.editing
-    try {
-      this.text = JSON.stringify(JSON.parse(row.source), null, 2)
-    } catch {
-      this.text = row.source
-    }
-  }
-
-  private async run(action: () => Promise<unknown>) {
-    try {
-      await action()
-      this.error = ''
-      await this.read()
-    } catch (error) {
-      this.error = error instanceof Error ? error.message : String(error)
-    }
-  }
-
-  private setState(name: string, state: 'draft' | 'released') {
-    return this.run(() => setFigureRecipeState(name, state))
-  }
-
-  /* The app's own prompt, as every operato screen asks -- not the browser's confirm box (user, 2026-09-24). */
-  private async deleteRecipe(name: string) {
-    const sure = await OxPrompt.open({
-      type: 'warning',
-      title: i18next.t('figure.button.recipe-delete'),
-      text: i18next.t('figure.text.recipe-delete-confirm', { name }),
-      confirmButton: { text: i18next.t('figure.button.recipe-delete') },
-      cancelButton: { text: i18next.t('figure.button.close') }
-    })
-    if (sure) await this.run(() => deleteFigureRecipe(name))
-  }
-
-  /** A parent's recipe copied into this domain as a draft, to be changed here. */
-  private copyIn(row: FigureRecipeRow) {
-    return this.run(() => saveFigureRecipe(row.source, 'draft'))
-  }
-
-  /** The source as typed: checked by the server in the test room; a new name is a new recipe. */
-  private async saveText(state: 'draft' | 'released') {
-    let name = ''
-    try {
-      name = JSON.parse(this.text).name ?? ''
-    } catch (error) {
-      this.error = error instanceof Error ? error.message : String(error)
-      return
-    }
-    await this.run(async () => {
-      await saveFigureRecipe(this.text, state)
-      this.chosen = name
-      this.editing = false
-    })
-  }
-}

package/dist-client/pages/figure-recipe-page.d.ts

@@ -1,41 +0,0 @@
-import '@material/web/icon/icon.js';
-import '../modeller/figure-v3-preview.js';
-import { PageView } from '@operato/shell';
-declare const FigureRecipePage_base: (new (...args: any[]) => import("lit").LitElement) & typeof PageView;
-/**
- * The recipes (ADR-0095): what each one puts in, shown put into a room at several sizes, and whose it is.
- *
- * A recipe of this domain's own can be released, taken back to draft, changed or deleted. A parent's -- the ones the
- * system domain ships -- is copied in under its name to be changed, and the copy stands in for it. Figures a recipe was
- * put into keep their parts whatever happens here.
- */
-export declare class FigureRecipePage extends FigureRecipePage_base {
-    static styles: import("lit").CSSResult[];
-    private rows;
-    private chosen;
-    private error;
-    private editing;
-    private text;
-    get context(): {
-        title: string;
-    };
-    pageUpdated(_changes: Record<string, unknown>, _lifecycle: unknown, before: {
-        active?: boolean;
-    }): Promise<void>;
-    private read;
-    private get subdomain();
-    render(): import("lit-html").TemplateResult<1>;
-    private renderRecipe;
-    /** The recipe put into the room it is checked in, with its defaults: what it makes, at several sizes. */
-    private renderPreview;
-    private choose;
-    private edit;
-    private run;
-    private setState;
-    private deleteRecipe;
-    /** A parent's recipe copied into this domain as a draft, to be changed here. */
-    private copyIn;
-    /** The source as typed: checked by the server in the test room; a new name is a new recipe. */
-    private saveText;
-}
-export {};