@things-factory/figure-ui 10.1.177 → 10.1.179

package/client/figure-released.ts

@@ -0,0 +1,6 @@
+import type { Figure } from './types.js'
+
+/** Whether a figure has ever been released: such a figure is retired, never deleted (the server refuses it too). */
+export function hasBeenReleased(figure: Pick<Figure, 'version'>): boolean {
+  return Number(figure.version) > 0
+}

package/client/graphql/index.ts

@@ -1,6 +1,6 @@
 import gql from 'graphql-tag'
 import { i18next } from '@operato/i18n'
-import { client } from '@operato/graphql'
+import { client, uploadContext, type UploadProgress } from '@operato/graphql'
 
 import { reached, refusedIn } from './reached.js'
 
@@ -57,6 +57,9 @@ const FIGURE_LIST_FIELDS = `
   tags
   state
   version
+  deprecated
+  supersededBy
+  public
   score
   triangles
   groups
@@ -77,12 +80,15 @@ export async function fetchFigureList(params: {
   limit?: number
   filters?: unknown[]
   sortings?: { name: string; desc?: boolean }[]
+  /** 'public': other domains' public figures, with their domain (LV figure-server design G2). The domain's own by default. */
+  scope?: 'own' | 'public'
 }): Promise<FigureListResult> {
+  const field = params.scope === 'public' ? 'publicFigures' : 'figures'
   const response = await client.query({
     query: gql`
       query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
-        figures(filters: $filters, pagination: $pagination, sortings: $sortings) {
-          items { ${FIGURE_LIST_FIELDS} }
+        ${field}(filters: $filters, pagination: $pagination, sortings: $sortings) {
+          items { ${FIGURE_LIST_FIELDS} ${params.scope === 'public' ? 'domain { id name subdomain }' : ''} }
           total
         }
       }
@@ -95,7 +101,7 @@ export async function fetchFigureList(params: {
     fetchPolicy: 'network-only'
   })
 
-  return unwrap<FigureListResult>(response, 'figures')
+  return unwrap<FigureListResult>(response, field)
 }
 
 /** 저작면에 필요한 전부 — `source` 를 포함한다. */
@@ -174,6 +180,38 @@ export async function updateFigure(id: string, patch: FigurePatch): Promise<Save
   return unwrap<SaveResult>(response, 'updateFigure')
 }
 
+/** Makes a released figure public to other domains, or private again (LV figure-server design G2). */
+export async function setFigurePublic(id: string, isPublic: boolean): Promise<Figure> {
+  const response = await client.mutate({
+    mutation: gql`
+      mutation ($id: String!, $public: Boolean!) {
+        setFigurePublic(id: $id, public: $public) {
+          ${FIGURE_LIST_FIELDS}
+        }
+      }
+    `,
+    variables: { id, public: isPublic }
+  })
+
+  return unwrap<Figure>(response, 'setFigurePublic')
+}
+
+/** Retires a released figure, naming the type to use instead, or brings it back. Release rows are not touched. */
+export async function setFigureDeprecation(id: string, deprecated: boolean, supersededBy?: string | null): Promise<Figure> {
+  const response = await client.mutate({
+    mutation: gql`
+      mutation ($id: String!, $deprecated: Boolean!, $supersededBy: String) {
+        setFigureDeprecation(id: $id, deprecated: $deprecated, supersededBy: $supersededBy) {
+          ${FIGURE_LIST_FIELDS}
+        }
+      }
+    `,
+    variables: { id, deprecated, supersededBy: supersededBy || null }
+  })
+
+  return unwrap<Figure>(response, 'setFigureDeprecation')
+}
+
 export async function deleteFigure(id: string): Promise<boolean> {
   const response = await client.mutate({
     mutation: gql`
@@ -211,42 +249,80 @@ export async function releaseFigure(id: string, comment?: string): Promise<Figur
   return unwrap<Figure>(response, 'releaseFigure')
 }
 
-/** A domain's figure namespace as the setting screen shows it (ADR-0114). */
-export interface FigureNamespaceState {
-  /** What new figures get; null when neither the setting nor the subdomain is a namespace. */
-  namespace: string | null
-  /** The setting as written; empty when the subdomain is used. */
-  written: string
-  subdomain: string
-  /** The domain's figures carry it: it cannot be set any more. */
-  fixed: boolean
+/** A namespace the domain owns (LV figure-server design G1): the `{namespace}` of the full name `{namespace}/{type}`. */
+export interface FigureNamespace {
+  id: string
+  name: string
+  description?: string | null
+  state: 'active' | 'suspended'
+  isDefault: boolean
 }
 
-const FIGURE_NAMESPACE_FIELDS = 'namespace written subdomain fixed'
+const FIGURE_NAMESPACE_FIELDS = 'id name description state isDefault'
 
-export async function fetchFigureNamespace(): Promise<FigureNamespaceState> {
+/** The categories the server allows, or null when a category is free text (LV figure-server design G5). */
+export async function fetchFigureCategories(): Promise<string[] | null> {
   const response = await client.query({
     query: gql`
       query {
-        figureNamespace { ${FIGURE_NAMESPACE_FIELDS} }
+        figureCategories
       }
     `,
     fetchPolicy: 'network-only'
   })
-  return unwrap<FigureNamespaceState>(response, 'figureNamespace')
+  return unwrap<string[] | null>(response, 'figureCategories') ?? null
+}
+
+/** The domain's namespaces, its default first. */
+export async function fetchFigureNamespaces(): Promise<FigureNamespace[]> {
+  const response = await client.query({
+    query: gql`
+      query {
+        figureNamespaces { ${FIGURE_NAMESPACE_FIELDS} }
+      }
+    `,
+    fetchPolicy: 'network-only'
+  })
+  return unwrap<FigureNamespace[]>(response, 'figureNamespaces') ?? []
+}
+
+/** Adds a namespace to the domain; the server says why when it refuses (not a namespace, another domain's). */
+export async function createFigureNamespace(name: string, isDefault = false): Promise<FigureNamespace> {
+  const response = await client.mutate({
+    mutation: gql`
+      mutation ($name: String!, $isDefault: Boolean) {
+        createFigureNamespace(name: $name, isDefault: $isDefault) { ${FIGURE_NAMESPACE_FIELDS} }
+      }
+    `,
+    variables: { name, isDefault }
+  })
+  return unwrap<FigureNamespace>(response, 'createFigureNamespace')
+}
+
+/** Makes one of the domain's active namespaces its default. */
+export async function setDefaultFigureNamespace(name: string): Promise<FigureNamespace> {
+  const response = await client.mutate({
+    mutation: gql`
+      mutation ($name: String!) {
+        setDefaultFigureNamespace(name: $name) { ${FIGURE_NAMESPACE_FIELDS} }
+      }
+    `,
+    variables: { name }
+  })
+  return unwrap<FigureNamespace>(response, 'setDefaultFigureNamespace')
 }
 
-/** Writes the namespace; empty takes the subdomain. The server says why when it refuses. */
-export async function setFigureNamespace(namespace: string): Promise<FigureNamespaceState> {
+/** Suspends a namespace or makes it active again. */
+export async function setFigureNamespaceState(name: string, state: 'active' | 'suspended'): Promise<FigureNamespace> {
   const response = await client.mutate({
     mutation: gql`
-      mutation ($namespace: String!) {
-        setFigureNamespace(namespace: $namespace) { ${FIGURE_NAMESPACE_FIELDS} }
+      mutation ($name: String!, $state: String!) {
+        setFigureNamespaceState(name: $name, state: $state) { ${FIGURE_NAMESPACE_FIELDS} }
       }
     `,
-    variables: { namespace }
+    variables: { name, state }
   })
-  return unwrap<FigureNamespaceState>(response, 'setFigureNamespace')
+  return unwrap<FigureNamespace>(response, 'setFigureNamespaceState')
 }
 
 /** A draft a revert kept when it wrote over it (ADR-0097 §5.6). Not a released version. */
@@ -518,7 +594,7 @@ export async function fetchRecipeGuide(name: string, lang: string): Promise<stri
  * A GLB for a mesh part (ADR-0129): the server reads it, keeps it by its hash and answers what it holds. A file a board
  * cannot draw is refused with the reason in the screen's words.
  */
-export async function uploadFigureMesh(file: File): Promise<import('../modeller/mesh-import.js').MeshUpload> {
+export async function uploadFigureMesh(file: File, onProgress: UploadProgress): Promise<import('../modeller/mesh-import.js').MeshUpload> {
   const response = await client.mutate({
     mutation: gql`
       mutation UploadFigureMesh($file: Upload!) {
@@ -529,7 +605,7 @@ export async function uploadFigureMesh(file: File): Promise<import('../modeller/
       }
     `,
     variables: { file },
-    context: { hasUpload: true }
+    context: uploadContext(onProgress)
   })
   return unwrap(response, 'uploadFigureMesh')
 }

package/client/graphql/store.ts

@@ -34,7 +34,7 @@ export const figureProductStore: FigureProductStore = {
   async save(request) {
     const response = await reached(client.mutate({
       mutation: gql`
-        mutation SaveFigure($source: String!, $id: String, $expectedSource: String, $creationId: String, $thumbnail: String, $type: String, $proposalKeys: [String!]) {
+        mutation SaveFigure($source: String!, $id: String, $expectedSource: String, $creationId: String, $thumbnail: String, $type: String, $proposalKeys: [String!], $namespace: String) {
           saveFigure(
             source: $source
             id: $id
@@ -43,6 +43,7 @@ export const figureProductStore: FigureProductStore = {
             thumbnail: $thumbnail
             type: $type
             proposalKeys: $proposalKeys
+            namespace: $namespace
           ) {
             id
             source

package/client/index.ts

@@ -2,3 +2,4 @@ export * from './types.js'
 export * from './graphql/index.js'
 export * from './figure-assistant.js'
 export * from './setting-let/figure-namespace-setting-let.js'
+export * from './modeller/property-sections.js'

package/client/modeller/editor.ts

@@ -124,6 +124,8 @@ export class FigureEditor extends LitElement {
   @property({ attribute: false }) firstSave?: (name: string) => Promise<FirstSave | undefined>
   @state() private selected = ''
   @state() private error = ''
+  /** How far the GLB being brought in has gone up (0‒1), while it does. */
+  @state() private meshProgress?: number
   /*
    * An edit that takes a face away which something stands on (ADR-0100 A8): held, with what the kernel says stands
    * there, until the author chooses where each goes -- then the same edit goes again with the remap. Shown where the
@@ -392,6 +394,7 @@ export class FigureEditor extends LitElement {
         be taken is not an error: the save goes on without it (see `thumbnail.ts`).
       */
       let type: string | undefined
+      let namespace: string | undefined
       if (!this.session.read().id && this.firstSave) {
         const answer = await this.firstSave(this.session.read().name ?? '')
         if (!answer) return
@@ -401,10 +404,11 @@ export class FigureEditor extends LitElement {
           this.changed()
         }
         type = answer.type
+        namespace = answer.namespace
       }
       const view = this.session.read()
       const thumbnail = await captureFigureThumbnail(drawableFigureParts(view.geometry ?? []), view.palette ?? {})
-      const promise = this.session.save({ thumbnail, type })
+      const promise = this.session.save({ thumbnail, type, namespace })
       this.changed()
       await promise
       this.error = ''
@@ -432,11 +436,14 @@ export class FigureEditor extends LitElement {
   private async importMesh(file: File) {
     if (!this.session) return
     let upload: Awaited<ReturnType<typeof uploadFigureMesh>>
+    this.meshProgress = 0
     try {
-      upload = await uploadFigureMesh(file)
+      upload = await uploadFigureMesh(file, fraction => (this.meshProgress = fraction))
     } catch (error) {
       this.error = this.said(error)
       return
+    } finally {
+      this.meshProgress = undefined
     }
     const choices = meshChoicesOf(upload)
     /* Only the whole file and the one node that is all of it: there is nothing to choose between. */
@@ -1710,6 +1717,7 @@ export class FigureEditor extends LitElement {
           ?locked=${unavailable}
           @add-part=${(e: CustomEvent) => this.add(e.detail.kind)}
           @import-mesh=${(e: CustomEvent) => this.importMesh(e.detail.file)}
+          .meshProgress=${this.meshProgress}
           .recipeCount=${this.templates.length}
           @open-recipe-catalog=${() => ((this.catalogOpen = true), (this.recipeError = ''))}
           @select-part=${(e: CustomEvent) => this.choose(e.detail.id)}

package/client/modeller/figure-first-save.ts

@@ -31,11 +31,12 @@ export class FigureFirstSave extends LitElement {
         font-size: var(--popup-font-size-small);
         color: var(--md-sys-color-on-surface-variant);
       }
-      div[field] input {
+      div[field] input,
+      div[field] select {
         box-sizing: border-box;
         width: 100%;
       }
-      input[type-field] {
+      [type-field] {
         font-family: var(--ui-mono, ui-monospace, monospace);
       }
     `
@@ -46,6 +47,9 @@ export class FigureFirstSave extends LitElement {
   @property() name = ''
   /** Type names already used in this domain. */
   @property({ attribute: false }) taken: string[] = []
+  /** The domain's active namespaces, its default first. Asked only when there are several (LV figure-server design G1). */
+  @property({ attribute: false }) namespaces: { name: string; isDefault: boolean }[] = []
+  @state() private namespace = ''
   @state() private refusal: { key: string; type?: string } | null = null
   /** The identifier offered, while the author has not changed it. */
   @state() private suggested = ''
@@ -105,6 +109,16 @@ export class FigureFirstSave extends LitElement {
             ? html`<div class="note">${i18next.t('figure.text.identifier-suggested')}</div>`
             : nothing}
       </div>
+      ${this.namespaces.length > 1
+        ? html`<div field>
+            <label for="namespace">${i18next.t('figure.label.namespace')}</label>
+            <select id="namespace" type-field @change=${(e: Event) => (this.namespace = (e.target as HTMLSelectElement).value)}>
+              ${this.namespaces.map(
+                namespace => html`<option value=${namespace.name} ?selected=${namespace.name === this.chosenNamespace}>${namespace.name}</option>`
+              )}
+            </select>
+          </div>`
+        : nothing}
       ${this.refusal ? html`<div class="failure" role="alert">${i18next.t(this.refusal.key, { type: this.refusal.type })}</div>` : nothing}
       <ox-popup-actions>
         <md-text-button slot="cancel" @click=${() => closePopup(this)}>${i18next.t('figure.button.cancel')}</md-text-button>
@@ -120,6 +134,12 @@ export class FigureFirstSave extends LitElement {
   private confirm = () => {
     this.refusal = firstSaveRefusalOf(this.type, this.taken)
     if (this.refusal) return
-    closePopup(this, { type: this.type, name: this.name.trim() || this.type } satisfies FirstSave)
+    const namespace = this.namespaces.length > 1 ? this.chosenNamespace : undefined
+    closePopup(this, { type: this.type, name: this.name.trim() || this.type, ...(namespace ? { namespace } : {}) } satisfies FirstSave)
+  }
+
+  /** The namespace chosen, or the domain's default until one is. */
+  private get chosenNamespace(): string {
+    return this.namespace || this.namespaces.find(namespace => namespace.isDefault)?.name || this.namespaces[0]?.name || ''
   }
 }

package/client/modeller/figure-parts.ts

@@ -1,6 +1,7 @@
 import '@material/web/icon/icon.js'
+import '@operato/input/ox-input-file.js'
 import { css, html, LitElement, nothing } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
+import { customElement, property, query } from 'lit/decorators.js'
 import { i18next, localize } from '@operato/i18n'
 import { ScrollbarStyles } from '@operato/styles'
 import { DETAIL_LEVELS, PART_LIMIT, type DetailLevel } from '@hatiolab/figure-model'
@@ -263,13 +264,38 @@ export class FigureParts extends localize(i18next)(LitElement) {
         overflow: hidden;
         text-overflow: ellipsis;
       }
-      button[shape][import] {
+      /*
+        The one file picker (ox-input-file, quiet) on that row: a GLB refused or going up is said on the spot. Its button
+        wears the tiles' words and lit hand -- the picker's own 13/600 stood louder than the shapes' heading.
+      */
+      ox-input-file[mesh-file] {
         grid-column: 1 / -1;
-        flex-direction: row;
         justify-content: center;
+        font-size: var(--ui-t-micro, 11px);
+        --ox-input-file-action-height: 26px;
+      }
+      ox-input-file[mesh-file]::part(attach) {
         gap: 6px;
-        min-height: 26px;
         padding: 0 8px;
+        font: var(--label-font, inherit);
+        font-size: var(--ui-t-micro, 11px);
+        font-weight: 400;
+        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+        border-radius: 4px;
+      }
+      ox-input-file[mesh-file]:not([disabled])::part(attach):hover {
+        color: var(--md-sys-color-on-primary-container);
+        background-color: var(--md-sys-color-primary-container);
+      }
+      ox-input-file[mesh-file][disabled]::part(attach) {
+        opacity: 0.35;
+      }
+      ox-input-file[mesh-file] md-icon {
+        --md-icon-size: 18px;
+      }
+      section[shapes].candrop {
+        outline: 1px dashed var(--md-sys-color-primary);
+        outline-offset: -1px;
       }
       /* An action in the side panel's look: icon and words in the primary colour, no pill. */
       button[recipe-catalog] {
@@ -460,12 +486,22 @@ export class FigureParts extends localize(i18next)(LitElement) {
   @property({ attribute: false }) partBudget?: { level: DetailLevel | null; used: number; limit: number | null }
   /** How many recipe templates the catalog holds; none, and the section is not drawn. */
   @property({ type: Number }) recipeCount = 0
+  /** How far the GLB being brought in has gone up (0‒1), while it does; the picker shows it. */
+  @property({ type: Number }) meshProgress?: number
+
+  /* A GLB dragged over the shapes is a part brought in: the section is where it is dropped (page standard §7-1). */
+  @query('section[shapes]') private shapes?: HTMLElement
+
+  firstUpdated() {
+    /* The drop area is drawn by the first render; the picker is told it by the next. */
+    this.requestUpdate()
+  }
 
   render() {
     const b = this.partBudget
     const full = !!b && b.limit !== null && b.used >= b.limit
     return html`
-      <section>
+      <section shapes>
         <h3>${i18next.t('figure.label.shapes')}</h3>
         <div palette>
           ${RECIPES.map(
@@ -481,28 +517,22 @@ export class FigureParts extends localize(i18next)(LitElement) {
               </button>
             `
           )}
-          <button
-            shape
-            import
-            ?disabled=${this.locked || full}
-            title=${full ? i18next.t('figure.text.part-limit-reached') : i18next.t('figure.text.import-mesh-hint')}
-            @click=${() => this.renderRoot.querySelector<HTMLInputElement>('input[mesh-file]')?.click()}
-          >
-            <md-icon>view_in_ar</md-icon>
-            <span>${i18next.t('figure.button.import-mesh')}</span>
-          </button>
-          <input
+          <ox-input-file
+            quiet
+            hide-filelist
             mesh-file
-            type="file"
             accept=".glb,model/gltf-binary"
-            hidden
-            @change=${(e: Event) => {
-              const input = e.target as HTMLInputElement
-              const file = input.files?.[0]
-              input.value = ''
+            .label=${i18next.t('figure.button.import-mesh')}
+            title=${full ? i18next.t('figure.text.part-limit-reached') : i18next.t('figure.text.import-mesh-hint')}
+            ?disabled=${this.locked || full}
+            .dropTarget=${this.shapes}
+            .progress=${this.meshProgress}
+            @change=${(e: CustomEvent) => {
+              const file = (e.detail as File[] | undefined)?.[0]
               if (file) this.ask('import-mesh', { file })
+              ;(e.currentTarget as HTMLElement & { reset(): void }).reset()
             }}
-          />
+          ><md-icon slot="icon">view_in_ar</md-icon></ox-input-file>
         </div>
         ${full ? html`<p full>${i18next.t('figure.text.part-limit-reached-short', { level: b!.level, limit: b!.limit })}</p>` : nothing}
       </section>

package/client/modeller/figure-properties.ts

@@ -12,6 +12,7 @@ import { occupancyFromParts } from './occupancy.js'
 import { tagsOf, figureFigureFacts, type Placement, type FigureFigureFacts } from './figure-facts.js'
 import { offeredMountingOf } from './mounting-part.js'
 import type { FigureRevision } from './revision.js'
+import { figurePropertySections } from './property-sections.js'
 import { SidePanelStyles } from '@things-factory/figure-viewer/dist-client/side-panel-styles.js'
 import { ScrollbarStyles } from '@operato/styles'
 
@@ -65,6 +66,8 @@ export class FigureProperties extends localize(i18next)(LitElement) {
   /** The saved row, if any. Category and tags live on it. */
   @property({ type: String }) figureId?: string
   @property({ type: String }) figureCategory?: string
+  /** The categories the server allows (LV figure-server design G5): chosen from, and fixed once set. Null: free text. */
+  @property({ attribute: false }) figureCategories?: string[] | null
   @property({ type: Array }) figureTags?: string[]
   /** The part and face picked for the mounting face, before 「이 면으로」 is pressed. */
   @state() private pickedPart?: string
@@ -127,7 +130,8 @@ export class FigureProperties extends localize(i18next)(LitElement) {
       <section>
         <h3>${i18next.t('figure.label.group-catalog')}</h3>
         ${this.renderCatalog()}
-      </section>`
+      </section>
+      ${this.renderAppSections()}`
   }
 
   private renderName(facts: FigureFigureFacts) {
@@ -226,17 +230,47 @@ export class FigureProperties extends localize(i18next)(LitElement) {
     `
   }
 
+  /** The sections an app added (G11), after the panel's own, for the figures they are for. A section that throws says so in its place. */
+  private renderAppSections() {
+    const asset = this.revision?.asset
+    if (!asset) return nothing
+    const figure = { id: this.figureId, category: this.figureCategory }
+    return figurePropertySections().map(section => {
+      try {
+        if (!section.when({ asset, figure })) return nothing
+        return html`<section data-section=${section.id}>
+          <h3>${section.title()}</h3>
+          ${section.render({ asset, figure, command: action => this.command(action) })}
+        </section>`
+      } catch (error) {
+        console.error(`[figure-ui] the property section '${section.id}' failed`, error)
+        return html`<section data-section=${section.id}>
+          <p role="alert">${i18next.t('figure.text.property-section-failed', { section: section.id, reason: (error as Error)?.message ?? String(error) })}</p>
+        </section>`
+      }
+    })
+  }
+
   private renderCatalog() {
     const saved = !!this.figureId
     return html`
       <div field>
         <label>${i18next.t('figure.label.category')}</label>
-        <input
-          .value=${this.figureCategory ?? ''}
-          ?disabled=${!saved}
-          placeholder=${i18next.t('figure.text.category-placeholder')}
-          @change=${(e: Event) => this.catalog({ category: (e.target as HTMLInputElement).value.trim() })}
-        />
+        ${this.figureCategories?.length
+          ? html`<select
+              category
+              ?disabled=${!saved || !!this.figureCategory}
+              @change=${(e: Event) => this.catalog({ category: (e.target as HTMLSelectElement).value })}
+            >
+              ${this.figureCategory ? nothing : html`<option value="" selected disabled>${i18next.t('figure.text.category-choose')}</option>`}
+              ${this.figureCategories.map(code => html`<option value=${code} ?selected=${code === this.figureCategory}>${code}</option>`)}
+            </select>`
+          : html`<input
+              .value=${this.figureCategory ?? ''}
+              ?disabled=${!saved}
+              placeholder=${i18next.t('figure.text.category-placeholder')}
+              @change=${(e: Event) => this.catalog({ category: (e.target as HTMLInputElement).value.trim() })}
+            />`}
       </div>
       <div field>
         <label>${i18next.t('figure.label.tags')}</label>

package/client/modeller/first-save.ts

@@ -69,4 +69,6 @@ export function firstSaveRefusalOf(type: string, taken: readonly string[]): { ke
 export interface FirstSave {
   type: string
   name: string
+  /** The domain's namespace to create it under, when the domain has several; its default when absent. */
+  namespace?: string
 }

package/client/modeller/product-session.ts

@@ -47,6 +47,8 @@ export interface FigureProductStore {
     thumbnail?: string
     /** The type name a new figure is created under (the first save asks for it). Not sent for an existing one. */
     type?: string
+    /** The namespace a new figure is created under, when the first save chose one. Not sent for an existing one. */
+    namespace?: string
     /** Keys of the AI proposals whose steps the source holds: the server records them with the save. */
     proposalKeys?: string[]
   }): Promise<FigureProductRecord>
@@ -280,7 +282,7 @@ export function createFigureProductSession(store: FigureProductStore) {
      * nothing about drawing. A save with no picture is a save: a tab in the background cannot draw, and the
      * source matters more than the card (see `thumbnail.ts`).
      */
-    async save({ thumbnail, type }: { thumbnail?: string; type?: string } = {}) {
+    async save({ thumbnail, type, namespace }: { thumbnail?: string; type?: string; namespace?: string } = {}) {
       const control = writable(),
         requestEpoch = epoch
       const exported = workspace.export(control)
@@ -290,7 +292,7 @@ export function createFigureProductSession(store: FigureProductStore) {
       try {
         let record: FigureProductRecord
         try {
-          record = await store.save({ id, source: exported.text, expectedSource: baseline, creationId, thumbnail, proposalKeys, ...(id || !type ? {} : { type }) })
+          record = await store.save({ id, source: exported.text, expectedSource: baseline, creationId, thumbnail, proposalKeys, ...(id || !type ? {} : { type }), ...(id || !namespace ? {} : { namespace }) })
         } catch (error) {
           /*
             A save that failed may still have landed: the answer lost on the way back (SAVE_UNREACHABLE), or a second
@@ -323,7 +325,7 @@ export function createFigureProductSession(store: FigureProductStore) {
             */
             baseline = landed.source
             unconfirmed.clear()
-            record = await store.save({ id, source: exported.text, expectedSource: baseline, creationId, thumbnail, proposalKeys, ...(id || !type ? {} : { type }) })
+            record = await store.save({ id, source: exported.text, expectedSource: baseline, creationId, thumbnail, proposalKeys, ...(id || !type ? {} : { type }), ...(id || !namespace ? {} : { namespace }) })
           } else {
             if (code === 'SAVE_UNREACHABLE') unconfirmed.set(exported.text, { thumbnail })
             throw error

package/client/modeller/property-sections.ts

@@ -0,0 +1,45 @@
+import type { TemplateResult } from 'lit'
+import type { FigureAsset, FigureAuthoringAction } from '@hatiolab/figure-model'
+
+/*
+ * Sections an app adds to the modeller's properties panel (LV figure-server design G11). The panel draws them after its
+ * own, in the order registered, for the figures they are for. A section changes the figure only by the modeller's
+ * own commands -- one step of the history each, undone like any other -- so an app's section is no second editor. The
+ * LV figure-server's CARRIER section writes the `fmsim/carrier` extension with `set-extension` (ADR-0123).
+ */
+
+/** What a section is shown, and the one way it changes the figure. */
+export interface FigurePropertySectionContext {
+  asset: FigureAsset
+  /** The figure's row: its id once saved, its category. */
+  figure: { id?: string; category?: string }
+  /** Runs one modeller command, as the panel's own fields do. */
+  command(action: FigureAuthoringAction): void
+}
+
+export interface FigurePropertySection {
+  /** Unique among sections; drawn as the section's `data-section`. */
+  id: string
+  /** The heading over the section. */
+  title(): string
+  /** Whether this figure gets the section, e.g. by its category. */
+  when(context: Omit<FigurePropertySectionContext, 'command'>): boolean
+  render(context: FigurePropertySectionContext): TemplateResult
+}
+
+const sections: FigurePropertySection[] = []
+
+/** Adds a section to the properties panel. Returns the way to take it off again. A second section of one id is refused. */
+export function registerFigurePropertySection(section: FigurePropertySection): () => void {
+  if (sections.some(known => known.id === section.id)) throw new Error(`a figure property section '${section.id}' is already registered`)
+  sections.push(section)
+  return () => {
+    const at = sections.indexOf(section)
+    if (at >= 0) sections.splice(at, 1)
+  }
+}
+
+/** The sections registered, in their order. */
+export function figurePropertySections(): readonly FigurePropertySection[] {
+  return sections
+}