@things-factory/figure-ui 10.1.4 → 10.1.5

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

@@ -578,6 +578,8 @@ export class FigureModellerPage extends FigureModellerPageBase {
         ?collapse-left=${this.collapsed.left}
         ?collapse-right=${this.collapsed.right}
         @figure-rename=${(e: CustomEvent) => this.rename(e.detail.name)}
+        @figure-released=${(e: CustomEvent) => this.released(e.detail.figure)}
+        @figure-reverted=${() => this.figure?.id && this.load(this.figure.id)}
         @add-part=${(e: CustomEvent) => this.addPart(e.detail.primitive)}
         @select-part=${(e: CustomEvent) => (this.selected = e.detail.index)}
         @remove-part=${(e: CustomEvent) => this.removePart(e.detail.index)}
@@ -638,6 +640,10 @@ export class FigureModellerPage extends FigureModellerPageBase {
 
         <figure-side
           .figureName=${this.figure?.name ?? ''}
+          .figureId=${this.figure?.id ?? ''}
+          .figureState=${this.figure?.state}
+          .figureVersion=${this.figure?.version ?? 0}
+          .dirty=${this.dirty}
           .board=${this.board}
           .parts=${this.parts}
           .source=${source}
@@ -1070,6 +1076,22 @@ export class FigureModellerPage extends FigureModellerPageBase {
    * 그림만 보낸다. 정본을 건드리지 않으므로 미저장 표시도 켜지 않는다 — 열어 봤다는 것이 고쳤다는
    * 뜻이 되면 저작자가 저장할지 말지를 매번 고민한다.
    */
+  /**
+   * 발행되었다 — **정본을 든 자리가 그 사실을 받는다.**
+   *
+   * 이력 패널은 발행을 시키고 결과를 알릴 뿐, 이 페이지의 상태를 고쳐 쓰지 않는다. 판 번호와 상태가
+   * 여기서 갱신되어야 머리줄·이력 탭이 같은 것을 본다.
+   *
+   * 정본(source)은 발행이 건드리지 않으므로 다시 불러오지 않는다 — 저작 중인 화면을 되감지 않는다.
+   */
+  private released(figure: Figure): void {
+    if (!this.figure || figure?.id !== this.figure.id) {
+      return
+    }
+
+    this.figure = { ...this.figure, version: figure.version, state: figure.state, updatedAt: figure.updatedAt }
+  }
+
   private async fillThumbnail(id: string): Promise<void> {
     await this.updateComplete
 

package/client/types.ts

@@ -30,6 +30,23 @@ export interface Figure {
   version?: number
 }
 
+/**
+ * 발행된 판 하나.
+ *
+ * 저작 중 저장은 여기 오지 않는다 — 판본은 발행에서만 생긴다.
+ */
+export interface FigureVersion {
+  version: number
+  /** 발행하며 남긴 말. */
+  comment?: string
+  state?: 'draft' | 'released'
+  updatedAt?: string
+  updater?: { id: string; name: string }
+  score?: number
+  triangles?: number
+  groups?: number
+}
+
 export interface FigureListResult {
   items: Figure[]
   total: number

package/dist-client/graphql/index.d.ts

@@ -1,10 +1,19 @@
-import type { Figure, FigureFinding, FigureListResult, FigurePatch, FigureProposal, NewFigure } from '../types.js';
+import type { Figure, FigureFinding, FigureListResult, FigurePatch, FigureProposal, FigureVersion, NewFigure } from '../types.js';
+/**
+ * 목록을 가져온다.
+ *
+ * 걸러 보기·정렬·쪽 나누기를 **그대로 넘긴다.** 화면이 `search`·`state` 같은 이름을 따로 만들어
+ * filter 로 옮기던 것을 그만두었다 — 그 이름들은 격자(ox-grist)가 이미 컬럼 설정에서 만들어 주고,
+ * 중간에 한 벌 더 두면 격자가 아는 조건과 서버에 가는 조건이 어긋난다.
+ */
 export declare function fetchFigureList(params: {
     page?: number;
     limit?: number;
-    search?: string;
-    category?: string;
-    state?: string;
+    filters?: unknown[];
+    sortings?: {
+        name: string;
+        desc?: boolean;
+    }[];
 }): Promise<FigureListResult>;
 /** 저작면에 필요한 전부 — `source` 를 포함한다. */
 export declare function fetchFigure(id: string): Promise<Figure>;
@@ -39,3 +48,14 @@ export declare function proposeFigure(request: {
     palette: string[];
     image?: File;
 }): Promise<FigureProposal>;
+/**
+ * 발행한다 — 판 번호가 오르고, 그 순간이 판본으로 남는다.
+ *
+ * 이미 발행된 것을 다시 발행하면 서버가 거절한다. 고쳐서 다시 내려면 저장이 먼저이고, 저장은
+ * 발행을 푼다(초안으로 돌아온다).
+ */
+export declare function releaseFigure(id: string, comment?: string): Promise<Figure>;
+/** 옛 판을 초안으로 되살린다. 정본·속성·그림이 돌아오고 이름·설명은 그대로다. */
+export declare function revertFigureVersion(id: string, version: number): Promise<SaveResult>;
+/** 발행된 판들 — 최근 것부터 열 개. */
+export declare function fetchFigureVersions(id: string): Promise<FigureVersion[]>;

package/dist-client/graphql/index.js

@@ -33,6 +33,7 @@ const FIGURE_LIST_FIELDS = `
   description
   category
   state
+  version
   score
   triangles
   groups
@@ -41,12 +42,14 @@ const FIGURE_LIST_FIELDS = `
   updatedAt
   updater { id name }
 `;
+/**
+ * 목록을 가져온다.
+ *
+ * 걸러 보기·정렬·쪽 나누기를 **그대로 넘긴다.** 화면이 `search`·`state` 같은 이름을 따로 만들어
+ * filter 로 옮기던 것을 그만두었다 — 그 이름들은 격자(ox-grist)가 이미 컬럼 설정에서 만들어 주고,
+ * 중간에 한 벌 더 두면 격자가 아는 조건과 서버에 가는 조건이 어긋난다.
+ */
 export async function fetchFigureList(params) {
-    const filters = [];
-    if (params.category)
-        filters.push({ name: 'category', operator: 'eq', value: params.category });
-    if (params.state)
-        filters.push({ name: 'state', operator: 'eq', value: params.state });
     const response = await client.query({
         query: gql `
       query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
@@ -57,9 +60,9 @@ export async function fetchFigureList(params) {
       }
     `,
         variables: {
-            filters,
+            filters: params.filters ?? [],
             pagination: { page: params.page ?? 1, limit: params.limit ?? 30 },
-            sortings: [{ name: 'updatedAt', desc: true }]
+            sortings: params.sortings?.length ? params.sortings : [{ name: 'updatedAt', desc: true }]
         },
         fetchPolicy: 'network-only'
     });
@@ -74,7 +77,6 @@ export async function fetchFigure(id) {
           ${FIGURE_LIST_FIELDS}
           source
           properties
-          version
         }
       }
     `,
@@ -119,7 +121,7 @@ export async function updateFigure(id, patch) {
         mutation: gql `
       mutation ($id: String!, $patch: FigurePatch!) {
         updateFigure(id: $id, patch: $patch) {
-          figure { ${FIGURE_LIST_FIELDS} source version }
+          figure { ${FIGURE_LIST_FIELDS} source }
           violations { code message at }
         }
       }
@@ -170,4 +172,63 @@ export async function proposeFigure(request) {
     });
     return unwrap(response, 'proposeFigure');
 }
+/**
+ * 발행한다 — 판 번호가 오르고, 그 순간이 판본으로 남는다.
+ *
+ * 이미 발행된 것을 다시 발행하면 서버가 거절한다. 고쳐서 다시 내려면 저장이 먼저이고, 저장은
+ * 발행을 푼다(초안으로 돌아온다).
+ */
+export async function releaseFigure(id, comment) {
+    const response = await client.mutate({
+        mutation: gql `
+      mutation ReleaseFigure($id: String!, $comment: String) {
+        releaseFigure(id: $id, comment: $comment) {
+          id
+          version
+          state
+          updatedAt
+        }
+      }
+    `,
+        variables: { id, comment }
+    });
+    return unwrap(response, 'releaseFigure');
+}
+/** 옛 판을 초안으로 되살린다. 정본·속성·그림이 돌아오고 이름·설명은 그대로다. */
+export async function revertFigureVersion(id, version) {
+    const response = await client.mutate({
+        mutation: gql `
+      mutation RevertFigureVersion($id: String!, $version: Float!) {
+        revertFigureVersion(id: $id, version: $version) {
+          figure { ${FIGURE_LIST_FIELDS} source }
+          violations { code message at }
+        }
+      }
+    `,
+        variables: { id, version }
+    });
+    return unwrap(response, 'revertFigureVersion');
+}
+/** 발행된 판들 — 최근 것부터 열 개. */
+export async function fetchFigureVersions(id) {
+    const response = await client.query({
+        query: gql `
+      query FigureVersions($id: String!) {
+        figureVersions(id: $id) {
+          version
+          comment
+          state
+          updatedAt
+          updater { id name }
+          score
+          triangles
+          groups
+        }
+      }
+    `,
+        variables: { id },
+        fetchPolicy: 'network-only'
+    });
+    return unwrap(response, 'figureVersions') ?? [];
+}
 //# sourceMappingURL=index.js.map

package/dist-client/graphql/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../client/graphql/index.ts"],"names":[],"mappings":"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","sourcesContent":["import gql from 'graphql-tag'\nimport { client } from '@operato/graphql'\n\nimport type { Figure, FigureFinding, FigureListResult, FigurePatch, FigureProposal, NewFigure } from '../types.js'\n\n/**\n * 응답에서 값을 꺼낸다. **서버가 말한 사유를 그대로 올린다.**\n *\n * 전에는 `response.data.figures` 처럼 바로 꺼냈다. 서버가 오류를 돌려주면 `data` 가\n * 없으므로 `Cannot read properties of undefined (reading 'figures')` 가 났고, 화면에는\n * 그 문장이 그대로 떴다. 사용자는 자기가 무엇을 잘못했는지 알 수 없다 — 실제로 AI\n * 요청에서 그렇게 났다.\n *\n * 값이 `null` 인 것은 오류가 아니다. 지운 것을 물었을 때처럼 없는 것이 답인 경우가 있다.\n * 여기서 막는 것은 **`data` 자체가 없는 것**이다.\n */\nfunction unwrap<T>(response: { data?: Record<string, unknown>; errors?: readonly { message: string }[] }, field: string): T {\n  const said = response.errors?.[0]?.message\n  if (said) throw new Error(said)\n\n  if (!response.data) {\n    throw new Error(`서버가 ${field} 를 돌려주지 않았습니다.`)\n  }\n\n  return response.data[field] as T\n}\n\n\n/**\n * 목록에 필요한 필드만 가져온다 — `source` 는 무겁고 목록에서 쓰지 않는다.\n *\n * `score`·`triangles` 를 함께 받는 이유는 카드에 그것을 보여 주기 때문이다. 저작자가\n * 목록에서 「이 Figure 가 무거운가」를 바로 알아야 한다.\n */\nconst FIGURE_LIST_FIELDS = `\n  id\n  type\n  name\n  description\n  category\n  state\n  score\n  triangles\n  groups\n  thumbnail\n  thumbnailUpdatedAt\n  updatedAt\n  updater { id name }\n`\n\nexport async function fetchFigureList(params: {\n  page?: number\n  limit?: number\n  search?: string\n  category?: string\n  state?: string\n}): Promise<FigureListResult> {\n  const filters: { name: string; operator: string; value: unknown }[] = []\n  if (params.category) filters.push({ name: 'category', operator: 'eq', value: params.category })\n  if (params.state) filters.push({ name: 'state', operator: 'eq', value: params.state })\n\n  const response = await client.query({\n    query: gql`\n      query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {\n        figures(filters: $filters, pagination: $pagination, sortings: $sortings) {\n          items { ${FIGURE_LIST_FIELDS} }\n          total\n        }\n      }\n    `,\n    variables: {\n      filters,\n      pagination: { page: params.page ?? 1, limit: params.limit ?? 30 },\n      sortings: [{ name: 'updatedAt', desc: true }]\n    },\n    fetchPolicy: 'network-only'\n  })\n\n  return unwrap<FigureListResult>(response, 'figures')\n}\n\n/** 저작면에 필요한 전부 — `source` 를 포함한다. */\nexport async function fetchFigure(id: string): Promise<Figure> {\n  const response = await client.query({\n    query: gql`\n      query ($id: String!) {\n        figure(id: $id) {\n          ${FIGURE_LIST_FIELDS}\n          source\n          properties\n          version\n        }\n      }\n    `,\n    variables: { id },\n    fetchPolicy: 'network-only'\n  })\n\n  return unwrap<Figure>(response, 'figure')\n}\n\n/**\n * 이미 쓰이고 있는 타입 이름.\n *\n * `type` 은 만든 뒤에 고칠 수 없으므로 **만들기 전에** 알려 줘야 한다. 저장을 눌러\n * 거절당하고 나서 아는 것은 늦다.\n */\nexport async function fetchFigureTypeNames(): Promise<string[]> {\n  const response = await client.query({\n    query: gql`\n      query {\n        figureTypeNames\n      }\n    `,\n    fetchPolicy: 'network-only'\n  })\n\n  return unwrap<string[] | null>(response, 'figureTypeNames') ?? []\n}\n\nexport interface SaveResult {\n  figure: Figure\n  /** 막지 않는 발견. 저장은 됐지만 화면이 보여 줘야 한다. */\n  violations: FigureFinding[]\n}\n\nexport async function createFigure(figure: NewFigure): Promise<SaveResult> {\n  const response = await client.mutate({\n    mutation: gql`\n      mutation ($figure: NewFigure!) {\n        createFigure(figure: $figure) {\n          figure { ${FIGURE_LIST_FIELDS} source }\n          violations { code message at }\n        }\n      }\n    `,\n    variables: { figure }\n  })\n\n  return unwrap<SaveResult>(response, 'createFigure')\n}\n\nexport async function updateFigure(id: string, patch: FigurePatch): Promise<SaveResult> {\n  const response = await client.mutate({\n    mutation: gql`\n      mutation ($id: String!, $patch: FigurePatch!) {\n        updateFigure(id: $id, patch: $patch) {\n          figure { ${FIGURE_LIST_FIELDS} source version }\n          violations { code message at }\n        }\n      }\n    `,\n    variables: { id, patch }\n  })\n\n  return unwrap<SaveResult>(response, 'updateFigure')\n}\n\nexport async function deleteFigure(id: string): Promise<boolean> {\n  const response = await client.mutate({\n    mutation: gql`\n      mutation ($id: String!) {\n        deleteFigure(id: $id)\n      }\n    `,\n    variables: { id }\n  })\n\n  return unwrap<boolean>(response, 'deleteFigure')\n}\n\n/**\n * 저작 보조에게 후보를 시킨다.\n *\n * 팔레트를 **클라이언트가 보낸다.** 서버는 팔레트를 모른다 — things-scene 이 갖고\n * 있는데 그 패키지의 node 조건은 팔레트가 없는 번들로 간다. 그리는 쪽이 어떤 토큰을\n * 풀 수 있는지 아는 유일한 자리이므로 그쪽이 보낸다.\n *\n * 돌아오는 것은 **후보**다. 저장되지 않았다 — 저작자가 받아야 정본이 된다.\n */\nexport async function proposeFigure(request: {\n  prompt: string\n  base?: string\n  type?: string\n  palette: string[]\n  image?: File\n}): Promise<FigureProposal> {\n  const response = await client.mutate({\n    mutation: gql`\n      mutation ProposeFigure($request: ProposeRequest!) {\n        proposeFigure(request: $request) {\n          source\n          score\n          grade\n          triangles\n          groups\n          attempts\n          violations {\n            code\n            message\n          }\n        }\n      }\n    `,\n    variables: { request }\n  })\n\n  return unwrap<FigureProposal>(response, 'proposeFigure')\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../client/graphql/index.ts"],"names":[],"mappings":"AAAA,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AAYzC;;;;;;;;;;GAUG;AACH,SAAS,MAAM,CAAI,QAAqF,EAAE,KAAa;IACrH,MAAM,IAAI,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,OAAO,CAAA;IAC1C,IAAI,IAAI;QAAE,MAAM,IAAI,KAAK,CAAC,IAAI,CAAC,CAAA;IAE/B,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;QACnB,MAAM,IAAI,KAAK,CAAC,OAAO,KAAK,gBAAgB,CAAC,CAAA;IAC/C,CAAC;IAED,OAAO,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAM,CAAA;AAClC,CAAC;AAGD;;;;;GAKG;AACH,MAAM,kBAAkB,GAAG;;;;;;;;;;;;;;;CAe1B,CAAA;AAED;;;;;;GAMG;AACH,MAAM,CAAC,KAAK,UAAU,eAAe,CAAC,MAKrC;IACC,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;QAClC,KAAK,EAAE,GAAG,CAAA;;;oBAGM,kBAAkB;;;;KAIjC;QACD,SAAS,EAAE;YACT,OAAO,EAAE,MAAM,CAAC,OAAO,IAAI,EAAE;YAC7B,UAAU,EAAE,EAAE,IAAI,EAAE,MAAM,CAAC,IAAI,IAAI,CAAC,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,IAAI,EAAE,EAAE;YACjE,QAAQ,EAAE,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;SAC1F;QACD,WAAW,EAAE,cAAc;KAC5B,CAAC,CAAA;IAEF,OAAO,MAAM,CAAmB,QAAQ,EAAE,SAAS,CAAC,CAAA;AACtD,CAAC;AAED,qCAAqC;AACrC,MAAM,CAAC,KAAK,UAAU,WAAW,CAAC,EAAU;IAC1C,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;QAClC,KAAK,EAAE,GAAG,CAAA;;;YAGF,kBAAkB;;;;;KAKzB;QACD,SAAS,EAAE,EAAE,EAAE,EAAE;QACjB,WAAW,EAAE,cAAc;KAC5B,CAAC,CAAA;IAEF,OAAO,MAAM,CAAS,QAAQ,EAAE,QAAQ,CAAC,CAAA;AAC3C,CAAC;AAED;;;;;GAKG;AACH,MAAM,CAAC,KAAK,UAAU,oBAAoB;IACxC,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;QAClC,KAAK,EAAE,GAAG,CAAA;;;;KAIT;QACD,WAAW,EAAE,cAAc;KAC5B,CAAC,CAAA;IAEF,OAAO,MAAM,CAAkB,QAAQ,EAAE,iBAAiB,CAAC,IAAI,EAAE,CAAA;AACnE,CAAC;AAQD,MAAM,CAAC,KAAK,UAAU,YAAY,CAAC,MAAiB;IAClD,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC;QACnC,QAAQ,EAAE,GAAG,CAAA;;;qBAGI,kBAAkB;;;;KAIlC;QACD,SAAS,EAAE,EAAE,MAAM,EAAE;KACtB,CAAC,CAAA;IAEF,OAAO,MAAM,CAAa,QAAQ,EAAE,cAAc,CAAC,CAAA;AACrD,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,YAAY,CAAC,EAAU,EAAE,KAAkB;IAC/D,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC;QACnC,QAAQ,EAAE,GAAG,CAAA;;;qBAGI,kBAAkB;;;;KAIlC;QACD,SAAS,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE;KACzB,CAAC,CAAA;IAEF,OAAO,MAAM,CAAa,QAAQ,EAAE,cAAc,CAAC,CAAA;AACrD,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,YAAY,CAAC,EAAU;IAC3C,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC;QACnC,QAAQ,EAAE,GAAG,CAAA;;;;KAIZ;QACD,SAAS,EAAE,EAAE,EAAE,EAAE;KAClB,CAAC,CAAA;IAEF,OAAO,MAAM,CAAU,QAAQ,EAAE,cAAc,CAAC,CAAA;AAClD,CAAC;AAED;;;;;;;;GAQG;AACH,MAAM,CAAC,KAAK,UAAU,aAAa,CAAC,OAMnC;IACC,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC;QACnC,QAAQ,EAAE,GAAG,CAAA;;;;;;;;;;;;;;;KAeZ;QACD,SAAS,EAAE,EAAE,OAAO,EAAE;KACvB,CAAC,CAAA;IAEF,OAAO,MAAM,CAAiB,QAAQ,EAAE,eAAe,CAAC,CAAA;AAC1D,CAAC;AAED;;;;;GAKG;AACH,MAAM,CAAC,KAAK,UAAU,aAAa,CAAC,EAAU,EAAE,OAAgB;IAC9D,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC;QACnC,QAAQ,EAAE,GAAG,CAAA;;;;;;;;;KASZ;QACD,SAAS,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE;KAC3B,CAAC,CAAA;IAEF,OAAO,MAAM,CAAS,QAAQ,EAAE,eAAe,CAAC,CAAA;AAClD,CAAC;AAED,kDAAkD;AAClD,MAAM,CAAC,KAAK,UAAU,mBAAmB,CAAC,EAAU,EAAE,OAAe;IACnE,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC;QACnC,QAAQ,EAAE,GAAG,CAAA;;;qBAGI,kBAAkB;;;;KAIlC;QACD,SAAS,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE;KAC3B,CAAC,CAAA;IAEF,OAAO,MAAM,CAAa,QAAQ,EAAE,qBAAqB,CAAC,CAAA;AAC5D,CAAC;AAED,2BAA2B;AAC3B,MAAM,CAAC,KAAK,UAAU,mBAAmB,CAAC,EAAU;IAClD,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;QAClC,KAAK,EAAE,GAAG,CAAA;;;;;;;;;;;;;KAaT;QACD,SAAS,EAAE,EAAE,EAAE,EAAE;QACjB,WAAW,EAAE,cAAc;KAC5B,CAAC,CAAA;IAEF,OAAO,MAAM,CAAkB,QAAQ,EAAE,gBAAgB,CAAC,IAAI,EAAE,CAAA;AAClE,CAAC","sourcesContent":["import gql from 'graphql-tag'\nimport { client } from '@operato/graphql'\n\nimport type {\n  Figure,\n  FigureFinding,\n  FigureListResult,\n  FigurePatch,\n  FigureProposal,\n  FigureVersion,\n  NewFigure\n} from '../types.js'\n\n/**\n * 응답에서 값을 꺼낸다. **서버가 말한 사유를 그대로 올린다.**\n *\n * 전에는 `response.data.figures` 처럼 바로 꺼냈다. 서버가 오류를 돌려주면 `data` 가\n * 없으므로 `Cannot read properties of undefined (reading 'figures')` 가 났고, 화면에는\n * 그 문장이 그대로 떴다. 사용자는 자기가 무엇을 잘못했는지 알 수 없다 — 실제로 AI\n * 요청에서 그렇게 났다.\n *\n * 값이 `null` 인 것은 오류가 아니다. 지운 것을 물었을 때처럼 없는 것이 답인 경우가 있다.\n * 여기서 막는 것은 **`data` 자체가 없는 것**이다.\n */\nfunction unwrap<T>(response: { data?: Record<string, unknown>; errors?: readonly { message: string }[] }, field: string): T {\n  const said = response.errors?.[0]?.message\n  if (said) throw new Error(said)\n\n  if (!response.data) {\n    throw new Error(`서버가 ${field} 를 돌려주지 않았습니다.`)\n  }\n\n  return response.data[field] as T\n}\n\n\n/**\n * 목록에 필요한 필드만 가져온다 — `source` 는 무겁고 목록에서 쓰지 않는다.\n *\n * `score`·`triangles` 를 함께 받는 이유는 카드에 그것을 보여 주기 때문이다. 저작자가\n * 목록에서 「이 Figure 가 무거운가」를 바로 알아야 한다.\n */\nconst FIGURE_LIST_FIELDS = `\n  id\n  type\n  name\n  description\n  category\n  state\n  version\n  score\n  triangles\n  groups\n  thumbnail\n  thumbnailUpdatedAt\n  updatedAt\n  updater { id name }\n`\n\n/**\n * 목록을 가져온다.\n *\n * 걸러 보기·정렬·쪽 나누기를 **그대로 넘긴다.** 화면이 `search`·`state` 같은 이름을 따로 만들어\n * filter 로 옮기던 것을 그만두었다 — 그 이름들은 격자(ox-grist)가 이미 컬럼 설정에서 만들어 주고,\n * 중간에 한 벌 더 두면 격자가 아는 조건과 서버에 가는 조건이 어긋난다.\n */\nexport async function fetchFigureList(params: {\n  page?: number\n  limit?: number\n  filters?: unknown[]\n  sortings?: { name: string; desc?: boolean }[]\n}): Promise<FigureListResult> {\n  const response = await client.query({\n    query: gql`\n      query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {\n        figures(filters: $filters, pagination: $pagination, sortings: $sortings) {\n          items { ${FIGURE_LIST_FIELDS} }\n          total\n        }\n      }\n    `,\n    variables: {\n      filters: params.filters ?? [],\n      pagination: { page: params.page ?? 1, limit: params.limit ?? 30 },\n      sortings: params.sortings?.length ? params.sortings : [{ name: 'updatedAt', desc: true }]\n    },\n    fetchPolicy: 'network-only'\n  })\n\n  return unwrap<FigureListResult>(response, 'figures')\n}\n\n/** 저작면에 필요한 전부 — `source` 를 포함한다. */\nexport async function fetchFigure(id: string): Promise<Figure> {\n  const response = await client.query({\n    query: gql`\n      query ($id: String!) {\n        figure(id: $id) {\n          ${FIGURE_LIST_FIELDS}\n          source\n          properties\n        }\n      }\n    `,\n    variables: { id },\n    fetchPolicy: 'network-only'\n  })\n\n  return unwrap<Figure>(response, 'figure')\n}\n\n/**\n * 이미 쓰이고 있는 타입 이름.\n *\n * `type` 은 만든 뒤에 고칠 수 없으므로 **만들기 전에** 알려 줘야 한다. 저장을 눌러\n * 거절당하고 나서 아는 것은 늦다.\n */\nexport async function fetchFigureTypeNames(): Promise<string[]> {\n  const response = await client.query({\n    query: gql`\n      query {\n        figureTypeNames\n      }\n    `,\n    fetchPolicy: 'network-only'\n  })\n\n  return unwrap<string[] | null>(response, 'figureTypeNames') ?? []\n}\n\nexport interface SaveResult {\n  figure: Figure\n  /** 막지 않는 발견. 저장은 됐지만 화면이 보여 줘야 한다. */\n  violations: FigureFinding[]\n}\n\nexport async function createFigure(figure: NewFigure): Promise<SaveResult> {\n  const response = await client.mutate({\n    mutation: gql`\n      mutation ($figure: NewFigure!) {\n        createFigure(figure: $figure) {\n          figure { ${FIGURE_LIST_FIELDS} source }\n          violations { code message at }\n        }\n      }\n    `,\n    variables: { figure }\n  })\n\n  return unwrap<SaveResult>(response, 'createFigure')\n}\n\nexport async function updateFigure(id: string, patch: FigurePatch): Promise<SaveResult> {\n  const response = await client.mutate({\n    mutation: gql`\n      mutation ($id: String!, $patch: FigurePatch!) {\n        updateFigure(id: $id, patch: $patch) {\n          figure { ${FIGURE_LIST_FIELDS} source }\n          violations { code message at }\n        }\n      }\n    `,\n    variables: { id, patch }\n  })\n\n  return unwrap<SaveResult>(response, 'updateFigure')\n}\n\nexport async function deleteFigure(id: string): Promise<boolean> {\n  const response = await client.mutate({\n    mutation: gql`\n      mutation ($id: String!) {\n        deleteFigure(id: $id)\n      }\n    `,\n    variables: { id }\n  })\n\n  return unwrap<boolean>(response, 'deleteFigure')\n}\n\n/**\n * 저작 보조에게 후보를 시킨다.\n *\n * 팔레트를 **클라이언트가 보낸다.** 서버는 팔레트를 모른다 — things-scene 이 갖고\n * 있는데 그 패키지의 node 조건은 팔레트가 없는 번들로 간다. 그리는 쪽이 어떤 토큰을\n * 풀 수 있는지 아는 유일한 자리이므로 그쪽이 보낸다.\n *\n * 돌아오는 것은 **후보**다. 저장되지 않았다 — 저작자가 받아야 정본이 된다.\n */\nexport async function proposeFigure(request: {\n  prompt: string\n  base?: string\n  type?: string\n  palette: string[]\n  image?: File\n}): Promise<FigureProposal> {\n  const response = await client.mutate({\n    mutation: gql`\n      mutation ProposeFigure($request: ProposeRequest!) {\n        proposeFigure(request: $request) {\n          source\n          score\n          grade\n          triangles\n          groups\n          attempts\n          violations {\n            code\n            message\n          }\n        }\n      }\n    `,\n    variables: { request }\n  })\n\n  return unwrap<FigureProposal>(response, 'proposeFigure')\n}\n\n/**\n * 발행한다 — 판 번호가 오르고, 그 순간이 판본으로 남는다.\n *\n * 이미 발행된 것을 다시 발행하면 서버가 거절한다. 고쳐서 다시 내려면 저장이 먼저이고, 저장은\n * 발행을 푼다(초안으로 돌아온다).\n */\nexport async function releaseFigure(id: string, comment?: string): Promise<Figure> {\n  const response = await client.mutate({\n    mutation: gql`\n      mutation ReleaseFigure($id: String!, $comment: String) {\n        releaseFigure(id: $id, comment: $comment) {\n          id\n          version\n          state\n          updatedAt\n        }\n      }\n    `,\n    variables: { id, comment }\n  })\n\n  return unwrap<Figure>(response, 'releaseFigure')\n}\n\n/** 옛 판을 초안으로 되살린다. 정본·속성·그림이 돌아오고 이름·설명은 그대로다. */\nexport async function revertFigureVersion(id: string, version: number): Promise<SaveResult> {\n  const response = await client.mutate({\n    mutation: gql`\n      mutation RevertFigureVersion($id: String!, $version: Float!) {\n        revertFigureVersion(id: $id, version: $version) {\n          figure { ${FIGURE_LIST_FIELDS} source }\n          violations { code message at }\n        }\n      }\n    `,\n    variables: { id, version }\n  })\n\n  return unwrap<SaveResult>(response, 'revertFigureVersion')\n}\n\n/** 발행된 판들 — 최근 것부터 열 개. */\nexport async function fetchFigureVersions(id: string): Promise<FigureVersion[]> {\n  const response = await client.query({\n    query: gql`\n      query FigureVersions($id: String!) {\n        figureVersions(id: $id) {\n          version\n          comment\n          state\n          updatedAt\n          updater { id name }\n          score\n          triangles\n          groups\n        }\n      }\n    `,\n    variables: { id },\n    fetchPolicy: 'network-only'\n  })\n\n  return unwrap<FigureVersion[]>(response, 'figureVersions') ?? []\n}\n"]}

package/dist-client/modeller/figure-history-panel.d.ts

@@ -0,0 +1,42 @@
+import '@material/web/icon/icon.js';
+import { LitElement } from 'lit';
+declare const FigureHistoryPanel_base: (new (...args: any[]) => LitElement) & typeof LitElement;
+/**
+ * 이력 — **발행하는 자리이자, 발행된 판들을 보는 자리.**
+ *
+ * ## 왜 저장 옆이 아니라 여기인가
+ *
+ * 저장은 하루에 수십 번이고 발행은 드물다. 두 단추를 나란히 두면 저장하려다 발행을 누른다.
+ * 그리고 발행은 **소비처에게 하는 약속**이라, 무엇을 약속하는지(지금 몇 판인가 · 저장 안 한 것이
+ * 있나 · 지난 판이 무엇이었나)를 함께 보여 주는 자리에 있어야 한다.
+ *
+ * ## 저장하지 않은 것이 있으면 발행하지 않는다
+ *
+ * 발행은 **저장된 것**을 내보낸다. 화면에 고친 것이 남아 있는 채로 발행하면, 저작자가 보고 있는
+ * 것과 약속한 것이 다르다. 그래서 막고, 왜 막혔는지 적는다.
+ *
+ * ## 되돌리기는 초안으로 돌아온다
+ *
+ * 옛 판의 정본·속성·그림이 돌아오고 이름·설명은 그대로다. 되살렸다고 그 판이 다시 발행되지는
+ * 않는다 — 다시 내보내려면 발행을 한 번 더 하고, 그때 번호는 이미 쓴 다음 번호를 받는다.
+ */
+export declare class FigureHistoryPanel extends FigureHistoryPanel_base {
+    static styles: import("lit").CSSResult;
+    /** 지금 열려 있는 도형. 없으면(새로 만드는 중) 발행할 것이 없다. */
+    figureId?: string;
+    figureState?: 'draft' | 'released';
+    figureVersion: number;
+    /** 저장하지 않은 것이 있나 — 있으면 발행을 막는다. */
+    dirty: boolean;
+    private versions;
+    private busy;
+    private failure;
+    updated(changes: Map<string, unknown>): void;
+    private reload;
+    render(): import("lit-html").TemplateResult<1>;
+    private renderRelease;
+    private renderVersion;
+    private release;
+    private revert;
+}
+export {};

package/dist-client/modeller/figure-history-panel.js

@@ -0,0 +1,343 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/icon/icon.js';
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { i18next, localize } from '@operato/i18n';
+import { fetchFigureVersions, releaseFigure, revertFigureVersion } from '../graphql/index.js';
+/**
+ * 이력 — **발행하는 자리이자, 발행된 판들을 보는 자리.**
+ *
+ * ## 왜 저장 옆이 아니라 여기인가
+ *
+ * 저장은 하루에 수십 번이고 발행은 드물다. 두 단추를 나란히 두면 저장하려다 발행을 누른다.
+ * 그리고 발행은 **소비처에게 하는 약속**이라, 무엇을 약속하는지(지금 몇 판인가 · 저장 안 한 것이
+ * 있나 · 지난 판이 무엇이었나)를 함께 보여 주는 자리에 있어야 한다.
+ *
+ * ## 저장하지 않은 것이 있으면 발행하지 않는다
+ *
+ * 발행은 **저장된 것**을 내보낸다. 화면에 고친 것이 남아 있는 채로 발행하면, 저작자가 보고 있는
+ * 것과 약속한 것이 다르다. 그래서 막고, 왜 막혔는지 적는다.
+ *
+ * ## 되돌리기는 초안으로 돌아온다
+ *
+ * 옛 판의 정본·속성·그림이 돌아오고 이름·설명은 그대로다. 되살렸다고 그 판이 다시 발행되지는
+ * 않는다 — 다시 내보내려면 발행을 한 번 더 하고, 그때 번호는 이미 쓴 다음 번호를 받는다.
+ */
+let FigureHistoryPanel = class FigureHistoryPanel extends localize(i18next)(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.figureVersion = 0;
+        /** 저장하지 않은 것이 있나 — 있으면 발행을 막는다. */
+        this.dirty = false;
+        this.versions = [];
+        this.busy = false;
+        this.failure = '';
+    }
+    static { this.styles = css `
+    :host {
+      display: flex;
+      flex-direction: column;
+      min-height: 0;
+      overflow-y: auto;
+      background-color: var(--md-sys-color-surface-container-lowest);
+      color: var(--md-sys-color-on-surface);
+      font: var(--label-font, inherit);
+      font-size: 0.76rem;
+    }
+
+    :host([off]) {
+      display: none;
+    }
+
+    section {
+      padding: var(--spacing-medium, 8px) var(--spacing-large, 12px);
+      border-bottom: 1px solid var(--md-sys-color-outline-variant);
+    }
+
+    h3 {
+      margin: 0 0 6px 0;
+      font-size: var(--ui-t-micro, 11px);
+      font-weight: 700;
+      letter-spacing: 0.04em;
+      text-transform: uppercase;
+      color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+    }
+
+    /* 지금 무엇인가 — 발행을 누르기 전에 읽는 한 줄 */
+    div[now] {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      margin-bottom: 8px;
+    }
+
+    span[state] {
+      padding: 2px 8px;
+      border-radius: 10px;
+      font-size: 0.7rem;
+      font-weight: 700;
+      color: var(--md-sys-color-on-secondary-container);
+      background-color: var(--md-sys-color-secondary-container);
+    }
+
+    span[state][released] {
+      color: var(--md-sys-color-on-primary);
+      background-color: var(--md-sys-color-primary);
+    }
+
+    span[ver] {
+      font-family: var(--mono-font, monospace);
+      color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+    }
+
+    input,
+    button {
+      font: var(--input-field-font, inherit);
+      font-size: 0.76rem;
+    }
+
+    input[note] {
+      width: 100%;
+      box-sizing: border-box;
+      padding: 5px 8px;
+      color: var(--md-sys-color-on-surface);
+      background-color: var(--md-sys-color-surface-container-lowest);
+      border: 1px solid var(--md-sys-color-outline-variant);
+      border-radius: 6px;
+    }
+
+    button[release] {
+      width: 100%;
+      margin-top: 6px;
+      padding: 6px 0;
+      font-weight: 700;
+      color: var(--ui-on-accent, #fff);
+      background-color: var(--md-sys-color-primary);
+      border: 0;
+      border-radius: 6px;
+      cursor: pointer;
+    }
+
+    button[release][disabled] {
+      opacity: 0.45;
+      cursor: default;
+    }
+
+    /* 왜 못 누르는지 — 눌러 보고 알게 하지 않는다 */
+    p[why] {
+      margin: 6px 0 0 0;
+      font-size: 0.7rem;
+      line-height: 1.5;
+      color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+    }
+
+    p[failed] {
+      margin: 6px 0 0 0;
+      font-size: 0.7rem;
+      line-height: 1.5;
+      color: var(--md-sys-color-error);
+    }
+
+    ul {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+
+    li {
+      display: grid;
+      grid-template-columns: auto 1fr auto;
+      gap: 4px 8px;
+      align-items: baseline;
+      padding: 7px 0;
+      border-bottom: 1px dashed var(--md-sys-color-outline-variant);
+    }
+
+    li:last-child {
+      border-bottom: 0;
+    }
+
+    li span[no] {
+      font-family: var(--mono-font, monospace);
+      font-weight: 700;
+    }
+
+    li span[when] {
+      grid-column: 2 / 4;
+      font-size: 0.7rem;
+      color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+    }
+
+    li span[comment] {
+      grid-column: 1 / 4;
+      line-height: 1.5;
+    }
+
+    li button[revert] {
+      padding: 2px 8px;
+      color: var(--md-sys-color-on-surface);
+      background: none;
+      border: 1px solid var(--md-sys-color-outline-variant);
+      border-radius: 6px;
+      cursor: pointer;
+    }
+
+    li button[revert]:hover {
+      color: var(--md-sys-color-on-primary-container);
+      background-color: var(--md-sys-color-primary-container);
+      border-color: transparent;
+    }
+
+    p[quiet] {
+      margin: 0;
+      line-height: 1.6;
+      color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+    }
+  `; }
+    updated(changes) {
+        if (changes.has('figureId') || changes.has('figureVersion')) {
+            void this.reload();
+        }
+    }
+    async reload() {
+        if (!this.figureId) {
+            this.versions = [];
+            return;
+        }
+        try {
+            this.versions = await fetchFigureVersions(this.figureId);
+            this.failure = '';
+        }
+        catch (e) {
+            this.failure = e.message;
+        }
+    }
+    render() {
+        return html `
+      <section>
+        <h3>${i18next.t('label.release')}</h3>
+        ${this.figureId ? this.renderRelease() : html `<p quiet>${i18next.t('text.save-the-figure-before-releasing')}</p>`}
+      </section>
+
+      <section>
+        <h3>${i18next.t('label.released-versions')}</h3>
+        ${this.versions.length
+            ? html `<ul>
+              ${this.versions.map(version => this.renderVersion(version))}
+            </ul>`
+            : html `<p quiet>${i18next.t('text.nothing-released-yet')}</p>`}
+      </section>
+    `;
+    }
+    renderRelease() {
+        const released = this.figureState === 'released';
+        /* 막는 이유는 하나씩 말한다. 「발행할 수 없습니다」로 뭉치면 무엇을 하면 되는지 모른다. */
+        const why = this.dirty
+            ? i18next.t('text.release-needs-a-save-first')
+            : released
+                ? i18next.t('text.already-released-edit-to-release-again')
+                : '';
+        return html `
+      <div now>
+        <span state ?released=${released}>${i18next.t(released ? 'label.released' : 'label.draft')}</span>
+        <span ver>${i18next.t('text.version-number', { version: this.figureVersion ?? 0 })}</span>
+      </div>
+
+      <input note placeholder=${i18next.t('text.what-changed-in-this-release')} ?disabled=${!!why || this.busy} />
+
+      <button release ?disabled=${!!why || this.busy} @click=${() => this.release()}>
+        ${this.busy ? i18next.t('text.releasing') : i18next.t('button.release')}
+      </button>
+
+      ${why ? html `<p why>${why}</p>` : nothing}
+      ${this.failure ? html `<p failed>${this.failure}</p>` : nothing}
+    `;
+    }
+    renderVersion(version) {
+        return html `
+      <li>
+        <span no>${i18next.t('text.version-number', { version: version.version })}</span>
+        <span when>
+          ${version.updatedAt ? new Date(version.updatedAt).toLocaleString() : ''}
+          ${version.updater?.name ? ` · ${version.updater.name}` : ''}
+        </span>
+        <button revert ?disabled=${this.busy} @click=${() => this.revert(version.version)}>
+          ${i18next.t('button.revert')}
+        </button>
+        ${version.comment ? html `<span comment>${version.comment}</span>` : nothing}
+      </li>
+    `;
+    }
+    async release() {
+        const input = this.renderRoot.querySelector('input[note]');
+        const comment = input?.value?.trim();
+        this.busy = true;
+        this.failure = '';
+        try {
+            const figure = await releaseFigure(this.figureId, comment || undefined);
+            if (input)
+                input.value = '';
+            /* 정본을 든 자리가 갱신한다 — 여기서 페이지 상태를 고쳐 쓰지 않는다. */
+            this.dispatchEvent(new CustomEvent('figure-released', { detail: { figure }, bubbles: true, composed: true }));
+            await this.reload();
+        }
+        catch (e) {
+            this.failure = e.message;
+        }
+        finally {
+            this.busy = false;
+        }
+    }
+    async revert(version) {
+        /* 되돌아갈 수 없는 조작은 아니지만(판본은 남는다), 지금 화면의 것이 덮인다 — 이름으로 확인한다. */
+        if (!confirm(i18next.t('text.revert-to-version-confirm', { version }))) {
+            return;
+        }
+        this.busy = true;
+        this.failure = '';
+        try {
+            const result = await revertFigureVersion(this.figureId, version);
+            this.dispatchEvent(new CustomEvent('figure-reverted', { detail: result, bubbles: true, composed: true }));
+            await this.reload();
+        }
+        catch (e) {
+            this.failure = e.message;
+        }
+        finally {
+            this.busy = false;
+        }
+    }
+};
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], FigureHistoryPanel.prototype, "figureId", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], FigureHistoryPanel.prototype, "figureState", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Object)
+], FigureHistoryPanel.prototype, "figureVersion", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], FigureHistoryPanel.prototype, "dirty", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], FigureHistoryPanel.prototype, "versions", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureHistoryPanel.prototype, "busy", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureHistoryPanel.prototype, "failure", void 0);
+FigureHistoryPanel = __decorate([
+    customElement('figure-history-panel')
+], FigureHistoryPanel);
+export { FigureHistoryPanel };
+//# sourceMappingURL=figure-history-panel.js.map