@things-factory/board-ui 10.1.40 → 10.1.42

package/dist-client/board-list/board-thumb.d.ts

@@ -0,0 +1,33 @@
+import '@material/web/icon/icon.js';
+import { LitElement } from 'lit';
+declare const BoardThumb_base: (new (...args: any[]) => LitElement) & typeof LitElement;
+/**
+ * A board card's image cell - the picture itself, plus the draft marker.
+ *
+ * ## Why a component
+ *
+ * The catalog draws in ox-grist's CARD mode. The grid treats the thumbnail as one column, drawn by
+ * that column's `record.renderer` - and a renderer's output lands inside `ox-card-field`'s own
+ * shadow root, several shadow boundaries below this page's stylesheet, so inline `style=""` is the
+ * only way to reach it directly. That still works for a plain image and a badge, but this stays a
+ * component (rather than folding back into an inline renderer) because the border-bottom seam
+ * against the info area below wants the same shadow-scoped styling.
+ *
+ * ## Why info and favorite do *not* live here
+ *
+ * They did, briefly, overlaid on the image the way figure-ui's figure-thumb.ts overlays its own
+ * (2026-09-23). Reverted the same day: a figure's picture is a neutral rendered part, closer to a
+ * plan drawing than a screen - text and icons laid over it read fine. A board's picture is the
+ * actual dashboard, often already dense with its own labels and numbers; icons on top of that
+ * compete with content the catalog exists to let a person recognize at a glance. Board's info and
+ * favorite are gutter buttons instead (board-list-page.ts / play-list-page.ts), in the information
+ * area below the picture, not on it.
+ */
+export declare class BoardThumb extends BoardThumb_base {
+    static styles: import("lit").CSSResult;
+    board: any;
+    badge?: string;
+    render(): import("lit-html").TemplateResult<1>;
+    private renderBadge;
+}
+export {};

package/dist-client/board-list/board-thumb.js

@@ -0,0 +1,119 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/icon/icon.js';
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { i18next, localize } from '@operato/i18n';
+/**
+ * A board card's image cell - the picture itself, plus the draft marker.
+ *
+ * ## Why a component
+ *
+ * The catalog draws in ox-grist's CARD mode. The grid treats the thumbnail as one column, drawn by
+ * that column's `record.renderer` - and a renderer's output lands inside `ox-card-field`'s own
+ * shadow root, several shadow boundaries below this page's stylesheet, so inline `style=""` is the
+ * only way to reach it directly. That still works for a plain image and a badge, but this stays a
+ * component (rather than folding back into an inline renderer) because the border-bottom seam
+ * against the info area below wants the same shadow-scoped styling.
+ *
+ * ## Why info and favorite do *not* live here
+ *
+ * They did, briefly, overlaid on the image the way figure-ui's figure-thumb.ts overlays its own
+ * (2026-09-23). Reverted the same day: a figure's picture is a neutral rendered part, closer to a
+ * plan drawing than a screen - text and icons laid over it read fine. A board's picture is the
+ * actual dashboard, often already dense with its own labels and numbers; icons on top of that
+ * compete with content the catalog exists to let a person recognize at a glance. Board's info and
+ * favorite are gutter buttons instead (board-list-page.ts / play-list-page.ts), in the information
+ * area below the picture, not on it.
+ */
+let BoardThumb = class BoardThumb extends localize(i18next)(LitElement) {
+    static { this.styles = css `
+    :host {
+      position: relative;
+      display: block;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+      /* The name/gutters area below has no border of its own (record-card.ts's [content] is plain
+       * margin) - without this the image bleeds straight into it with no seam. */
+      border-bottom: 1px solid var(--md-sys-color-outline-variant);
+      box-sizing: border-box;
+    }
+
+    img {
+      display: block;
+      width: 100%;
+      height: 100%;
+      /*
+        contain, not cover. Boards are not one shape - a wide dashboard, a portrait barcode label,
+        a small popup - and cover cropped each one differently, so no two cards framed their
+        picture alike and the grid never settled. contain shows the whole board on the neutral plate
+        (--data-card-thumbnail-background) the way figure-list-page shows a whole figure, so every
+        card reads as "a picture in a frame" and the row lines up.
+      */
+      object-fit: contain;
+    }
+
+    div[empty] {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      color: var(--md-sys-color-outline);
+    }
+    div[empty] md-icon {
+      --md-icon-size: 28px;
+    }
+
+    /* Draft marker - only draft ever says anything, same reasoning as figure-thumb.ts's span[draft]. */
+    span[draft] {
+      position: absolute;
+      top: 6px;
+      left: 6px;
+      padding: 1px 7px;
+      font: var(--label-font, inherit);
+      font-size: 0.68rem;
+      line-height: 1.5;
+      color: var(--md-sys-color-on-secondary-container);
+      background-color: var(--md-sys-color-secondary-container);
+      border-radius: 4px;
+    }
+  `; }
+    render() {
+        const board = this.board;
+        if (!board) {
+            return html ``;
+        }
+        return html `
+      ${board.thumbnail
+            ? html `<img src=${board.thumbnail} alt=${board.name || ''} loading="lazy" />`
+            : html `
+            <div empty>
+              <md-icon>dashboard</md-icon>
+            </div>
+          `}
+      ${this.renderBadge(board)}
+    `;
+    }
+    renderBadge(board) {
+        const text = this.badge !== undefined
+            ? this.badge
+            : board.state === 'released'
+                ? ''
+                : i18next.t('label.draft', { defaultValue: 'Draft' });
+        return text ? html `<span draft>${text}</span>` : '';
+    }
+};
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], BoardThumb.prototype, "board", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], BoardThumb.prototype, "badge", void 0);
+BoardThumb = __decorate([
+    customElement('board-thumb')
+], BoardThumb);
+export { BoardThumb };
+//# sourceMappingURL=board-thumb.js.map

package/dist-client/board-list/board-thumb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"board-thumb.js","sourceRoot":"","sources":["../../client/board-list/board-thumb.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAEjD;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEI,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;aACpD,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDlB,AApDY,CAoDZ;IAOD,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAA;QACxB,IAAI,CAAC,KAAK,EAAE,CAAC;YACX,OAAO,IAAI,CAAA,EAAE,CAAA;QACf,CAAC;QAED,OAAO,IAAI,CAAA;QACP,KAAK,CAAC,SAAS;YACf,CAAC,CAAC,IAAI,CAAA,YAAY,KAAK,CAAC,SAAS,QAAQ,KAAK,CAAC,IAAI,IAAI,EAAE,oBAAoB;YAC7E,CAAC,CAAC,IAAI,CAAA;;;;WAIH;QACH,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;KAC1B,CAAA;IACH,CAAC;IAEO,WAAW,CAAC,KAAU;QAC5B,MAAM,IAAI,GACR,IAAI,CAAC,KAAK,KAAK,SAAS;YACtB,CAAC,CAAC,IAAI,CAAC,KAAK;YACZ,CAAC,CAAC,KAAK,CAAC,KAAK,KAAK,UAAU;gBAC1B,CAAC,CAAC,EAAE;gBACJ,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa,EAAE,EAAE,YAAY,EAAE,OAAO,EAAE,CAAC,CAAA;QAE3D,OAAO,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,eAAe,IAAI,SAAS,CAAC,CAAC,CAAC,EAAE,CAAA;IACrD,CAAC;;AAhC2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;yCAAY;AAGX;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;yCAAe;AA1D/B,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CAwFtB","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\n\n/**\n * A board card's image cell - the picture itself, plus the draft marker.\n *\n * ## Why a component\n *\n * The catalog draws in ox-grist's CARD mode. The grid treats the thumbnail as one column, drawn by\n * that column's `record.renderer` - and a renderer's output lands inside `ox-card-field`'s own\n * shadow root, several shadow boundaries below this page's stylesheet, so inline `style=\"\"` is the\n * only way to reach it directly. That still works for a plain image and a badge, but this stays a\n * component (rather than folding back into an inline renderer) because the border-bottom seam\n * against the info area below wants the same shadow-scoped styling.\n *\n * ## Why info and favorite do *not* live here\n *\n * They did, briefly, overlaid on the image the way figure-ui's figure-thumb.ts overlays its own\n * (2026-09-23). Reverted the same day: a figure's picture is a neutral rendered part, closer to a\n * plan drawing than a screen - text and icons laid over it read fine. A board's picture is the\n * actual dashboard, often already dense with its own labels and numbers; icons on top of that\n * compete with content the catalog exists to let a person recognize at a glance. Board's info and\n * favorite are gutter buttons instead (board-list-page.ts / play-list-page.ts), in the information\n * area below the picture, not on it.\n */\n@customElement('board-thumb')\nexport class BoardThumb extends localize(i18next)(LitElement) {\n  static styles = css`\n    :host {\n      position: relative;\n      display: block;\n      width: 100%;\n      height: 100%;\n      overflow: hidden;\n      /* The name/gutters area below has no border of its own (record-card.ts's [content] is plain\n       * margin) - without this the image bleeds straight into it with no seam. */\n      border-bottom: 1px solid var(--md-sys-color-outline-variant);\n      box-sizing: border-box;\n    }\n\n    img {\n      display: block;\n      width: 100%;\n      height: 100%;\n      /*\n        contain, not cover. Boards are not one shape - a wide dashboard, a portrait barcode label,\n        a small popup - and cover cropped each one differently, so no two cards framed their\n        picture alike and the grid never settled. contain shows the whole board on the neutral plate\n        (--data-card-thumbnail-background) the way figure-list-page shows a whole figure, so every\n        card reads as \"a picture in a frame\" and the row lines up.\n      */\n      object-fit: contain;\n    }\n\n    div[empty] {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 100%;\n      height: 100%;\n      color: var(--md-sys-color-outline);\n    }\n    div[empty] md-icon {\n      --md-icon-size: 28px;\n    }\n\n    /* Draft marker - only draft ever says anything, same reasoning as figure-thumb.ts's span[draft]. */\n    span[draft] {\n      position: absolute;\n      top: 6px;\n      left: 6px;\n      padding: 1px 7px;\n      font: var(--label-font, inherit);\n      font-size: 0.68rem;\n      line-height: 1.5;\n      color: var(--md-sys-color-on-secondary-container);\n      background-color: var(--md-sys-color-secondary-container);\n      border-radius: 4px;\n    }\n  `\n\n  @property({ type: Object }) board!: any\n  /* Overrides the marker text. Unset means \"the draft rule\"; an empty string means no marker at\n   * all - a template has no draft/released state, so board-template-list-page.ts passes ''. */\n  @property({ type: String }) badge?: string\n\n  render() {\n    const board = this.board\n    if (!board) {\n      return html``\n    }\n\n    return html`\n      ${board.thumbnail\n        ? html`<img src=${board.thumbnail} alt=${board.name || ''} loading=\"lazy\" />`\n        : html`\n            <div empty>\n              <md-icon>dashboard</md-icon>\n            </div>\n          `}\n      ${this.renderBadge(board)}\n    `\n  }\n\n  private renderBadge(board: any) {\n    const text =\n      this.badge !== undefined\n        ? this.badge\n        : board.state === 'released'\n          ? ''\n          : i18next.t('label.draft', { defaultValue: 'Draft' })\n\n    return text ? html`<span draft>${text}</span>` : ''\n  }\n}\n"]}

package/dist-client/graphql/favorite-board.js

@@ -11,6 +11,9 @@ export async function fetchFavoriteBoardList(listParam = {}) {
             name
             description
             thumbnail
+            state
+            type
+            version
             createdAt
             updatedAt
           }

package/dist-client/graphql/favorite-board.js.map

@@ -1 +1 @@
-{"version":3,"file":"favorite-board.js","sourceRoot":"","sources":["../../client/graphql/favorite-board.ts"],"names":[],"mappings":"AAAA,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAA;AAElD,MAAM,CAAC,KAAK,UAAU,sBAAsB,CAAC,SAAS,GAAG,EAAE;IACzD,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;QAClC,KAAK,EAAE,GAAG,CAAA;;yBAEW,UAAU,CAAC,SAAS,CAAC,SAAS,CAAC;;;;;;;;;;;;KAYnD;KACF,CAAC,CAAA;IAEF,OAAO,QAAQ,CAAC,IAAI,CAAA;AACtB,CAAC","sourcesContent":["import gql from 'graphql-tag'\nimport { client } from '@operato/graphql'\nimport { gqlBuilder } from '@things-factory/utils'\n\nexport async function fetchFavoriteBoardList(listParam = {}) {\n  const response = await client.query({\n    query: gql`\n      {\n        favoriteBoards(${gqlBuilder.buildArgs(listParam)}) {\n          items {\n            id\n            name\n            description\n            thumbnail\n            createdAt\n            updatedAt\n          }\n          total\n        }\n      }\n    `\n  })\n\n  return response.data\n}\n"]}
+{"version":3,"file":"favorite-board.js","sourceRoot":"","sources":["../../client/graphql/favorite-board.ts"],"names":[],"mappings":"AAAA,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAA;AAElD,MAAM,CAAC,KAAK,UAAU,sBAAsB,CAAC,SAAS,GAAG,EAAE;IACzD,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;QAClC,KAAK,EAAE,GAAG,CAAA;;yBAEW,UAAU,CAAC,SAAS,CAAC,SAAS,CAAC;;;;;;;;;;;;;;;KAenD;KACF,CAAC,CAAA;IAEF,OAAO,QAAQ,CAAC,IAAI,CAAA;AACtB,CAAC","sourcesContent":["import gql from 'graphql-tag'\nimport { client } from '@operato/graphql'\nimport { gqlBuilder } from '@things-factory/utils'\n\nexport async function fetchFavoriteBoardList(listParam = {}) {\n  const response = await client.query({\n    query: gql`\n      {\n        favoriteBoards(${gqlBuilder.buildArgs(listParam)}) {\n          items {\n            id\n            name\n            description\n            thumbnail\n            state\n            type\n            version\n            createdAt\n            updatedAt\n          }\n          total\n        }\n      }\n    `\n  })\n\n  return response.data\n}\n"]}

package/dist-client/graphql/my-board.js

@@ -11,6 +11,9 @@ export async function fetchMyBoardList(listParam = {}) {
             name
             description
             thumbnail
+            state
+            type
+            version
             createdAt
             updatedAt
           }

package/dist-client/graphql/my-board.js.map

@@ -1 +1 @@
-{"version":3,"file":"my-board.js","sourceRoot":"","sources":["../../client/graphql/my-board.ts"],"names":[],"mappings":"AAAA,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAA;AAElD,MAAM,CAAC,KAAK,UAAU,gBAAgB,CAAC,SAAS,GAAG,EAAE;IACnD,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;QAClC,KAAK,EAAE,GAAG,CAAA;;4BAEc,UAAU,CAAC,SAAS,CAAC,SAAS,CAAC;;;;;;;;;;;;KAYtD;KACF,CAAC,CAAA;IAEF,OAAO,QAAQ,CAAC,IAAI,CAAA;AACtB,CAAC","sourcesContent":["import gql from 'graphql-tag'\nimport { client } from '@operato/graphql'\nimport { gqlBuilder } from '@things-factory/utils'\n\nexport async function fetchMyBoardList(listParam = {}) {\n  const response = await client.query({\n    query: gql`\n      {\n        boardsCreatedByMe(${gqlBuilder.buildArgs(listParam)}) {\n          items {\n            id\n            name\n            description\n            thumbnail\n            createdAt\n            updatedAt\n          }\n          total\n        }\n      }\n    `\n  })\n\n  return response.data\n}\n"]}
+{"version":3,"file":"my-board.js","sourceRoot":"","sources":["../../client/graphql/my-board.ts"],"names":[],"mappings":"AAAA,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAA;AAElD,MAAM,CAAC,KAAK,UAAU,gBAAgB,CAAC,SAAS,GAAG,EAAE;IACnD,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;QAClC,KAAK,EAAE,GAAG,CAAA;;4BAEc,UAAU,CAAC,SAAS,CAAC,SAAS,CAAC;;;;;;;;;;;;;;;KAetD;KACF,CAAC,CAAA;IAEF,OAAO,QAAQ,CAAC,IAAI,CAAA;AACtB,CAAC","sourcesContent":["import gql from 'graphql-tag'\nimport { client } from '@operato/graphql'\nimport { gqlBuilder } from '@things-factory/utils'\n\nexport async function fetchMyBoardList(listParam = {}) {\n  const response = await client.query({\n    query: gql`\n      {\n        boardsCreatedByMe(${gqlBuilder.buildArgs(listParam)}) {\n          items {\n            id\n            name\n            description\n            thumbnail\n            state\n            type\n            version\n            createdAt\n            updatedAt\n          }\n          total\n        }\n      }\n    `\n  })\n\n  return response.data\n}\n"]}

package/dist-client/graphql/play-group.js

@@ -31,6 +31,8 @@ export async function fetchPlayGroup(groupId) {
             description
             model
             thumbnail
+            state
+            version
             createdAt
             creator {
               id

package/dist-client/graphql/play-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"play-group.js","sourceRoot":"","sources":["../../client/graphql/play-group.ts"],"names":[],"mappings":"AAAA,OAAO,GAAG,MAAM,aAAa,CAAA;AAE7B,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AAEzC,MAAM,CAAC,KAAK,UAAU,kBAAkB;IACtC,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;QAClC,KAAK,EAAE,GAAG,CAAA;;;;;;;;;;;KAWT;KACF,CAAC,CAAA;IAEF,OAAO,QAAQ,CAAC,IAAI,CAAA;AACtB,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,cAAc,CAAC,OAAO;IAC1C,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;QAClC,KAAK,EAAE,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmCT;QACD,SAAS,EAAE;YACT,EAAE,EAAE,OAAO;SACZ;KACF,CAAC,CAAA;IAEF,OAAO,QAAQ,CAAC,IAAI,CAAA;AACtB,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,eAAe,CAAC,KAAK;IACzC,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,KAAK,CAAA;IAEnC,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC;QACnC,QAAQ,EAAE,GAAG,CAAA;;;;;;;;;;KAUZ;QACD,SAAS,EAAE;YACT,SAAS,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE;SACjC;KACF,CAAC,CAAA;IAEF,OAAO,QAAQ,CAAC,IAAI,CAAA;AACtB,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,eAAe,CAAC,KAAK;IACzC,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,KAAK,CAAA;IAEvC,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC;QACnC,QAAQ,EAAE,GAAG,CAAA;;;;;;;;;;KAUZ;QACD,SAAS,EAAE;YACT,EAAE;YACF,KAAK,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE;SAC7B;KACF,CAAC,CAAA;IAEF,OAAO,QAAQ,CAAC,IAAI,CAAA;AACtB,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,eAAe,CAAC,EAAE;IACtC,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC;QACnC,QAAQ,EAAE,GAAG,CAAA;;;;KAIZ;QACD,SAAS,EAAE;YACT,EAAE;SACH;KACF,CAAC,CAAA;IACF,OAAO,QAAQ,CAAC,IAAI,CAAA;AACtB,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,aAAa,CAAC,OAAO,EAAE,KAAK;IAChD,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,KAAK,CAAA;IAEvC,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC;QACnC,QAAQ,EAAE,GAAG,CAAA;;;;;;;;;;;;;;;;;KAiBZ;QACD,SAAS,EAAE;YACT,EAAE;YACF,QAAQ,EAAE,CAAC,OAAO,CAAC;SACpB;KACF,CAAC,CAAA;IAEF,OAAO,QAAQ,CAAC,IAAI,CAAA;AACtB,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,cAAc,CAAC,OAAO,EAAE,OAAO;IACnD,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC;QACnC,QAAQ,EAAE,GAAG,CAAA;;;;;;;;;;;;;;;;;KAiBZ;QACD,SAAS,EAAE;YACT,EAAE,EAAE,OAAO;YACX,QAAQ,EAAE,CAAC,OAAO,CAAC;SACpB;KACF,CAAC,CAAA;IAEF,OAAO,QAAQ,CAAC,IAAI,CAAA;AACtB,CAAC","sourcesContent":["import gql from 'graphql-tag'\n\nimport { client } from '@operato/graphql'\n\nexport async function fetchPlayGroupList() {\n  const response = await client.query({\n    query: gql`\n      {\n        playGroups {\n          items {\n            id\n            name\n            description\n          }\n          total\n        }\n      }\n    `\n  })\n\n  return response.data\n}\n\nexport async function fetchPlayGroup(groupId) {\n  const response = await client.query({\n    query: gql`\n      query FetchPlayGroup($id: String!) {\n        playGroup(id: $id) {\n          id\n          name\n          description\n          boards {\n            id\n            name\n            description\n            model\n            thumbnail\n            createdAt\n            creator {\n              id\n              name\n            }\n            updatedAt\n            updater {\n              id\n              name\n            }\n          }\n          createdAt\n          creator {\n            id\n            name\n          }\n          updatedAt\n          updater {\n            id\n            name\n          }\n        }\n      }\n    `,\n    variables: {\n      id: groupId\n    }\n  })\n\n  return response.data\n}\n\nexport async function createPlayGroup(group) {\n  const { name, description } = group\n\n  const response = await client.mutate({\n    mutation: gql`\n      mutation CreatePlayGroup($playGroup: NewPlayGroup!) {\n        createPlayGroup(playGroup: $playGroup) {\n          id\n          name\n          description\n          createdAt\n          updatedAt\n        }\n      }\n    `,\n    variables: {\n      playGroup: { name, description }\n    }\n  })\n\n  return response.data\n}\n\nexport async function updatePlayGroup(group) {\n  const { id, name, description } = group\n\n  const response = await client.mutate({\n    mutation: gql`\n      mutation UpdatePlayGroup($id: String!, $patch: PlayGroupPatch!) {\n        updatePlayGroup(id: $id, patch: $patch) {\n          id\n          name\n          description\n          createdAt\n          updatedAt\n        }\n      }\n    `,\n    variables: {\n      id,\n      patch: { name, description }\n    }\n  })\n\n  return response.data\n}\n\nexport async function deletePlayGroup(id) {\n  const response = await client.mutate({\n    mutation: gql`\n      mutation ($id: String!) {\n        deletePlayGroup(id: $id)\n      }\n    `,\n    variables: {\n      id\n    }\n  })\n  return response.data\n}\n\nexport async function joinPlayGroup(boardId, group) {\n  const { id, name, description } = group\n\n  const response = await client.mutate({\n    mutation: gql`\n      mutation JoinPlayGroup($id: String!, $boardIds: [String!]!) {\n        joinPlayGroup(id: $id, boardIds: $boardIds) {\n          id\n          name\n          description\n          boards {\n            id\n            name\n            description\n            createdAt\n            updatedAt\n          }\n          createdAt\n          updatedAt\n        }\n      }\n    `,\n    variables: {\n      id,\n      boardIds: [boardId]\n    }\n  })\n\n  return response.data\n}\n\nexport async function leavePlayGroup(boardId, groupId) {\n  const response = await client.mutate({\n    mutation: gql`\n      mutation ($id: String!, $boardIds: [String]!) {\n        leavePlayGroup(id: $id, boardIds: $boardIds) {\n          id\n          name\n          description\n          boards {\n            id\n            name\n            description\n            createdAt\n            updatedAt\n          }\n          createdAt\n          updatedAt\n        }\n      }\n    `,\n    variables: {\n      id: groupId,\n      boardIds: [boardId]\n    }\n  })\n\n  return response.data\n}\n"]}
+{"version":3,"file":"play-group.js","sourceRoot":"","sources":["../../client/graphql/play-group.ts"],"names":[],"mappings":"AAAA,OAAO,GAAG,MAAM,aAAa,CAAA;AAE7B,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AAEzC,MAAM,CAAC,KAAK,UAAU,kBAAkB;IACtC,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;QAClC,KAAK,EAAE,GAAG,CAAA;;;;;;;;;;;KAWT;KACF,CAAC,CAAA;IAEF,OAAO,QAAQ,CAAC,IAAI,CAAA;AACtB,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,cAAc,CAAC,OAAO;IAC1C,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;QAClC,KAAK,EAAE,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqCT;QACD,SAAS,EAAE;YACT,EAAE,EAAE,OAAO;SACZ;KACF,CAAC,CAAA;IAEF,OAAO,QAAQ,CAAC,IAAI,CAAA;AACtB,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,eAAe,CAAC,KAAK;IACzC,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,KAAK,CAAA;IAEnC,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC;QACnC,QAAQ,EAAE,GAAG,CAAA;;;;;;;;;;KAUZ;QACD,SAAS,EAAE;YACT,SAAS,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE;SACjC;KACF,CAAC,CAAA;IAEF,OAAO,QAAQ,CAAC,IAAI,CAAA;AACtB,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,eAAe,CAAC,KAAK;IACzC,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,KAAK,CAAA;IAEvC,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC;QACnC,QAAQ,EAAE,GAAG,CAAA;;;;;;;;;;KAUZ;QACD,SAAS,EAAE;YACT,EAAE;YACF,KAAK,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE;SAC7B;KACF,CAAC,CAAA;IAEF,OAAO,QAAQ,CAAC,IAAI,CAAA;AACtB,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,eAAe,CAAC,EAAE;IACtC,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC;QACnC,QAAQ,EAAE,GAAG,CAAA;;;;KAIZ;QACD,SAAS,EAAE;YACT,EAAE;SACH;KACF,CAAC,CAAA;IACF,OAAO,QAAQ,CAAC,IAAI,CAAA;AACtB,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,aAAa,CAAC,OAAO,EAAE,KAAK;IAChD,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,KAAK,CAAA;IAEvC,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC;QACnC,QAAQ,EAAE,GAAG,CAAA;;;;;;;;;;;;;;;;;KAiBZ;QACD,SAAS,EAAE;YACT,EAAE;YACF,QAAQ,EAAE,CAAC,OAAO,CAAC;SACpB;KACF,CAAC,CAAA;IAEF,OAAO,QAAQ,CAAC,IAAI,CAAA;AACtB,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,cAAc,CAAC,OAAO,EAAE,OAAO;IACnD,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC;QACnC,QAAQ,EAAE,GAAG,CAAA;;;;;;;;;;;;;;;;;KAiBZ;QACD,SAAS,EAAE;YACT,EAAE,EAAE,OAAO;YACX,QAAQ,EAAE,CAAC,OAAO,CAAC;SACpB;KACF,CAAC,CAAA;IAEF,OAAO,QAAQ,CAAC,IAAI,CAAA;AACtB,CAAC","sourcesContent":["import gql from 'graphql-tag'\n\nimport { client } from '@operato/graphql'\n\nexport async function fetchPlayGroupList() {\n  const response = await client.query({\n    query: gql`\n      {\n        playGroups {\n          items {\n            id\n            name\n            description\n          }\n          total\n        }\n      }\n    `\n  })\n\n  return response.data\n}\n\nexport async function fetchPlayGroup(groupId) {\n  const response = await client.query({\n    query: gql`\n      query FetchPlayGroup($id: String!) {\n        playGroup(id: $id) {\n          id\n          name\n          description\n          boards {\n            id\n            name\n            description\n            model\n            thumbnail\n            state\n            version\n            createdAt\n            creator {\n              id\n              name\n            }\n            updatedAt\n            updater {\n              id\n              name\n            }\n          }\n          createdAt\n          creator {\n            id\n            name\n          }\n          updatedAt\n          updater {\n            id\n            name\n          }\n        }\n      }\n    `,\n    variables: {\n      id: groupId\n    }\n  })\n\n  return response.data\n}\n\nexport async function createPlayGroup(group) {\n  const { name, description } = group\n\n  const response = await client.mutate({\n    mutation: gql`\n      mutation CreatePlayGroup($playGroup: NewPlayGroup!) {\n        createPlayGroup(playGroup: $playGroup) {\n          id\n          name\n          description\n          createdAt\n          updatedAt\n        }\n      }\n    `,\n    variables: {\n      playGroup: { name, description }\n    }\n  })\n\n  return response.data\n}\n\nexport async function updatePlayGroup(group) {\n  const { id, name, description } = group\n\n  const response = await client.mutate({\n    mutation: gql`\n      mutation UpdatePlayGroup($id: String!, $patch: PlayGroupPatch!) {\n        updatePlayGroup(id: $id, patch: $patch) {\n          id\n          name\n          description\n          createdAt\n          updatedAt\n        }\n      }\n    `,\n    variables: {\n      id,\n      patch: { name, description }\n    }\n  })\n\n  return response.data\n}\n\nexport async function deletePlayGroup(id) {\n  const response = await client.mutate({\n    mutation: gql`\n      mutation ($id: String!) {\n        deletePlayGroup(id: $id)\n      }\n    `,\n    variables: {\n      id\n    }\n  })\n  return response.data\n}\n\nexport async function joinPlayGroup(boardId, group) {\n  const { id, name, description } = group\n\n  const response = await client.mutate({\n    mutation: gql`\n      mutation JoinPlayGroup($id: String!, $boardIds: [String!]!) {\n        joinPlayGroup(id: $id, boardIds: $boardIds) {\n          id\n          name\n          description\n          boards {\n            id\n            name\n            description\n            createdAt\n            updatedAt\n          }\n          createdAt\n          updatedAt\n        }\n      }\n    `,\n    variables: {\n      id,\n      boardIds: [boardId]\n    }\n  })\n\n  return response.data\n}\n\nexport async function leavePlayGroup(boardId, groupId) {\n  const response = await client.mutate({\n    mutation: gql`\n      mutation ($id: String!, $boardIds: [String]!) {\n        leavePlayGroup(id: $id, boardIds: $boardIds) {\n          id\n          name\n          description\n          boards {\n            id\n            name\n            description\n            createdAt\n            updatedAt\n          }\n          createdAt\n          updatedAt\n        }\n      }\n    `,\n    variables: {\n      id: groupId,\n      boardIds: [boardId]\n    }\n  })\n\n  return response.data\n}\n"]}

package/dist-client/index.d.ts

@@ -2,6 +2,7 @@ export * from './pages/board-viewer-page.js';
 export * from './pages/board-player-page.js';
 export * from './pages/board-modeller-page.js';
 export * from './setting-let/board-view-setting-let.js';
+export * from './setting-let/board-modeller-setting-let.js';
 export * from './apptools/favorite-tool.js';
 export * from './graphql/index.js';
 export * from './viewparts/index.js';

package/dist-client/index.js

@@ -4,6 +4,7 @@ export * from './pages/board-modeller-page.js';
 /* AI 패치/액션의 things-scene in-place 적용기 — 순수 함수. 자체 모델러 셸을 가진 호스트
  * (예: operato-twin 의 트윈 모델러)가 같은 적용 규칙을 쓰도록 공개한다(중복 구현 금지). */
 export * from './setting-let/board-view-setting-let.js';
+export * from './setting-let/board-modeller-setting-let.js';
 export * from './apptools/favorite-tool.js';
 export * from './graphql/index.js';
 export * from './viewparts/index.js';

package/dist-client/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../client/index.ts"],"names":[],"mappings":"AACA,cAAc,8BAA8B,CAAA;AAC5C,cAAc,8BAA8B,CAAA;AAC5C,cAAc,gCAAgC,CAAA;AAC9C;+DAC+D;AAE/D,cAAc,yCAAyC,CAAA;AACvD,cAAc,6BAA6B,CAAA;AAC3C,cAAc,oBAAoB,CAAA;AAClC,cAAc,sBAAsB,CAAA","sourcesContent":["\nexport * from './pages/board-viewer-page.js'\nexport * from './pages/board-player-page.js'\nexport * from './pages/board-modeller-page.js'\n/* AI 패치/액션의 things-scene in-place 적용기 — 순수 함수. 자체 모델러 셸을 가진 호스트\n * (예: operato-twin 의 트윈 모델러)가 같은 적용 규칙을 쓰도록 공개한다(중복 구현 금지). */\n\nexport * from './setting-let/board-view-setting-let.js'\nexport * from './apptools/favorite-tool.js'\nexport * from './graphql/index.js'\nexport * from './viewparts/index.js'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../client/index.ts"],"names":[],"mappings":"AACA,cAAc,8BAA8B,CAAA;AAC5C,cAAc,8BAA8B,CAAA;AAC5C,cAAc,gCAAgC,CAAA;AAC9C;+DAC+D;AAE/D,cAAc,yCAAyC,CAAA;AACvD,cAAc,6CAA6C,CAAA;AAC3D,cAAc,6BAA6B,CAAA;AAC3C,cAAc,oBAAoB,CAAA;AAClC,cAAc,sBAAsB,CAAA","sourcesContent":["\nexport * from './pages/board-viewer-page.js'\nexport * from './pages/board-player-page.js'\nexport * from './pages/board-modeller-page.js'\n/* AI 패치/액션의 things-scene in-place 적용기 — 순수 함수. 자체 모델러 셸을 가진 호스트\n * (예: operato-twin 의 트윈 모델러)가 같은 적용 규칙을 쓰도록 공개한다(중복 구현 금지). */\n\nexport * from './setting-let/board-view-setting-let.js'\nexport * from './setting-let/board-modeller-setting-let.js'\nexport * from './apptools/favorite-tool.js'\nexport * from './graphql/index.js'\nexport * from './viewparts/index.js'\n"]}

package/dist-client/pages/board-list-page.d.ts

@@ -1,70 +1,62 @@
+import '@operato/data-grist';
+import '@material/web/icon/icon.js';
+import '@material/web/button/text-button.js';
+import '../board-list/board-thumb.js';
 import '../viewparts/board-info.js';
 import '../viewparts/group-info.js';
-import '../board-list/board-tile-list.js';
-import '../board-list/group-bar.js';
+import { FetchOption } from '@operato/data-grist';
 import { PageView } from '@operato/shell';
 declare const BoardListPageBase: typeof PageView;
 export declare class BoardListPage extends BoardListPageBase {
     static styles: import("lit").CSSResult[];
-    groupId?: string;
     groups: any[];
-    boards: any[];
     favorites: any[];
-    showMainBoardOnly: boolean;
+    gristConfig: any;
     searchText: string;
-    scrollTargetEl: HTMLElement;
-    private _page;
-    private _total;
-    private page?;
-    private _lastFetchTime?;
-    private _updatedBoardIds;
+    private creatable;
+    private currentGroupId;
+    private grist;
     get context(): {
-        title: {
-            icon: string;
-            text: string;
-        };
+        title: string;
         search: {
+            placeholder: string;
             handler: (search: any) => void;
             value: string;
         };
         board_topmenu: boolean;
     };
-    _infiniteScrollOptions: any;
-    constructor();
     render(): import("lit-html").TemplateResult<1>;
+    pageInitialized(): Promise<void>;
+    fetchHandler({ page, limit, filters }: FetchOption): Promise<{
+        total: any;
+        records: any;
+    }>;
     refresh(): Promise<void>;
-    showAllBoardType(e: any): void;
-    getBoards({ page, limit }?: {
+    getBoards({ page, limit, groupId, types, states }?: {
         page?: number | undefined;
-        limit?: any;
+        limit?: number | undefined;
+        groupId?: string | undefined;
+        types?: string[] | undefined;
+        states?: string[] | undefined;
     }): Promise<any>;
     /**
      * favor/mywork 같이 "search text + pagination"만 받는 간단한 리스트 조회 공용 헬퍼.
      * 그룹/타입 필터 등 복합 조건을 쓰는 일반 목록(getBoards)과 구분해 중복 제거.
      */
     private _fetchSimpleBoardList;
-    getFavoriteBoards({ page, limit }?: {
+    getFavoriteBoards({ page, limit, types, states }?: {
         page?: number | undefined;
-        limit?: any;
-    }): Promise<any[]>;
-    getMyBoards({ page, limit }?: {
+        limit?: number | undefined;
+        types?: string[] | undefined;
+        states?: string[] | undefined;
+    }): Promise<any>;
+    getMyBoards({ page, limit, types, states }?: {
         page?: number | undefined;
-        limit?: any;
-    }): Promise<any[]>;
+        limit?: number | undefined;
+        types?: string[] | undefined;
+        states?: string[] | undefined;
+    }): Promise<any>;
     refreshBoards(): Promise<void>;
-    /**
-     * 컨텐츠가 스크롤 영역을 채우지 못하면 다음 페이지를 자동 로드한다.
-     */
-    private _filling;
-    private fillViewport;
-    /**
-     * 기존 목록을 유지하면서 변경된 보드만 갱신한다.
-     * 스크롤 위치가 보존된다.
-     */
-    incrementalRefresh(): Promise<void>;
-    appendBoards(): Promise<void>;
-    scrollAction(): Promise<void>;
-    pageInitialized(): Promise<void>;
     pageUpdated(changes: any, lifecycle: any): Promise<void>;
     private _unsubscribe?;
     connectedCallback(): void;
@@ -81,9 +73,9 @@ export declare class BoardListPage extends BoardListPageBase {
         files: any;
         overwrite: any;
     }): Promise<void>;
-    onReorderBoards({ boardIds, movedId }: {
-        boardIds: any;
-        movedId: any;
+    onReorderBoards({ ids, movedId }: {
+        ids: string[];
+        movedId: string;
     }): Promise<void>;
     onCreateBoard(board: any): Promise<void>;
     onCloneBoard({ id, name, description, targetSubdomain, targetGroupId }: {
@@ -114,6 +106,11 @@ export declare class BoardListPage extends BoardListPageBase {
         description: any;
         visibility: any;
     }): Promise<void>;
+    toggleFavorite(board: any): Promise<void>;
+    /** Replaces one record in the grist in place, so only that card re-renders. */
+    private patchRecord;
+    removeFavorite(boardId: any): Promise<void>;
+    addFavorite(boardId: any): Promise<void>;
     refreshFavorites(): Promise<void>;
 }
 export {};