@operato/data-grist 10.13.0 → 10.16.0

package/dist/src/data-card/data-card.d.ts

@@ -1,17 +1,15 @@
 import '@material/web/icon/icon.js';
-import '../empty-note.js';
+import '@material/web/button/text-button.js';
+import '@operato/list-state/ox-empty-note.js';
 import './record-card.js';
 import { PropertyValues } from 'lit';
 import { DataManipulator } from '../data-manipulator.js';
+import { GridEmptyNote } from '../empty-note-render.js';
 export declare class DataCard extends DataManipulator {
     static styles: import("lit").CSSResult[];
     empty?: boolean;
     /** 비었을 때 무슨 말을 하나 — 판단은 data-grist 가 하고 여기서는 그리기만 한다. */
-    emptyNote?: {
-        icon?: string;
-        title: string;
-        description?: string;
-    };
+    emptyNote?: GridEmptyNote;
     private _records;
     private isTop;
     private _total;

package/dist/src/data-card/data-card.js

@@ -1,10 +1,12 @@
 import { __decorate } from "tslib";
 import '@material/web/icon/icon.js';
-import '../empty-note.js';
+import '@material/web/button/text-button.js';
+import '@operato/list-state/ox-empty-note.js';
 import './record-card.js';
-import { css, html, nothing } from 'lit';
+import { css, html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { DataManipulator } from '../data-manipulator.js';
+import { renderEmptyNote } from '../empty-note-render.js';
 let DataCard = class DataCard extends DataManipulator {
     constructor() {
         super(...arguments);
@@ -44,7 +46,6 @@ let DataCard = class DataCard extends DataManipulator {
         }
     }
     render() {
-        var _a, _b, _c, _d, _e, _f;
         var { classifier } = this.config.rows;
         var records = this._records || [];
         if (this.config && this.config.rows.appendable) {
@@ -66,13 +67,7 @@ let DataCard = class DataCard extends DataManipulator {
           ></ox-record-card>
         `;
         })}
-      ${this.empty
-            ? html `<ox-empty-note
-            icon=${(_b = (_a = this.emptyNote) === null || _a === void 0 ? void 0 : _a.icon) !== null && _b !== void 0 ? _b : nothing}
-            title=${(_d = (_c = this.emptyNote) === null || _c === void 0 ? void 0 : _c.title) !== null && _d !== void 0 ? _d : ''}
-            description=${(_f = (_e = this.emptyNote) === null || _e === void 0 ? void 0 : _e.description) !== null && _f !== void 0 ? _f : nothing}
-          ></ox-empty-note>`
-            : html ``}
+      ${this.empty ? renderEmptyNote(this.emptyNote) : html ``}
       ${this.isTop
             ? html ``
             : html ` <md-icon id="upward" @click=${(e) => this.gotoTop(e)}>arrow_upward</md-icon> `}

package/dist/src/data-card/data-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-card.js","sourceRoot":"","sources":["../../../src/data-card/data-card.ts"],"names":[],"mappings":"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","sourcesContent":["import i18next from 'i18next'\nimport '@material/web/icon/icon.js'\nimport '../empty-note.js'\nimport './record-card.js'\n\nimport { PropertyValues, css, html, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { DataManipulator } from '../data-manipulator.js'\nimport { GristRecord } from '../types.js'\n\n@customElement('ox-card')\nexport class DataCard extends DataManipulator {\n  static styles = [\n    css`\n      :host {\n        overflow-y: auto;\n        padding: var(--spacing-medium);\n\n        display: grid;\n        /*\n          카드 한 장의 최소 폭. 화면마다 실리는 것이 다르므로 값을 밖에서 정할 수 있어야 한다 —\n          그림이 주인공인 목록(자산 카탈로그)은 좁게 여러 장을, 글이 많은 목록은 넓게 몇 장을 놓는다.\n          기본값은 지금까지의 값 그대로다.\n        */\n        grid-template-columns: repeat(auto-fill, minmax(var(--data-card-min-width, 300px), 1fr));\n        grid-template-rows: min-content;\n        grid-gap: var(--spacing-large);\n      }\n\n      [selected-row] {\n        background-color: var(--grid-record-selected-background-color);\n      }\n\n      /*\n        ── 맨 위로 가는 단추 ──────────────────────────────────────────────────\n        자리를 먹지 않는다(absolute). 기준 상자는 ox-grist 의 host 인데(그쪽이 position: relative),\n        그래서 **목록과 함께 스크롤되지 않고** 상자에 붙어 있다.\n\n        고친 것 둘.\n\n          1. 위가 아니라 **아래**다. 오른쪽 위는 머리말·검색·필터가 있는 자리여서 단추가 그것들과\n             겹쳤다. 맨 위로 보내는 단추는 사람이 아래에 있을 때만 나오므로 손이 있는 쪽에 둔다.\n          2. rgba(255,255,255,0.7) 이 박혀 있었다 — 어두운 테마에서 흰 알약이 떠 있고, 아이콘은\n             --icon-size-large 라 알약보다 커 보였다. 테마 토큰으로 그리고 크기를 정한다.\n      */\n      #upward {\n        --md-icon-size: 20px;\n        position: absolute;\n        bottom: var(--data-card-fab-position-vertical, var(--spacing-large));\n        right: var(--data-card-fab-position-horizontal, var(--spacing-large));\n        display: grid;\n        place-items: center;\n        width: 36px;\n        height: 36px;\n        box-sizing: border-box;\n        color: var(--data-card-fab-color, var(--md-sys-color-on-surface-variant));\n        background-color: var(--data-card-fab-background-color, var(--md-sys-color-surface-container-high));\n        /* 떠 있는 단추의 모서리는 알약이다 — 담는 면(6px)이 아니라 그 자신의 격을 따른다 */\n        border-radius: var(--md-sys-shape-corner-full, 50%);\n        border: 1px solid var(--md-sys-color-outline-variant);\n        box-shadow: var(--data-card-fab-shadow, 0 1px 3px rgba(0, 0, 0, 0.18));\n        cursor: pointer;\n        z-index: 9;\n      }\n\n      #upward:hover {\n        color: var(--md-sys-color-on-secondary-container);\n        background-color: var(--md-sys-color-secondary-container);\n      }\n\n      slot {\n        width: 100%;\n      }\n\n      ox-empty-note {\n        display: block;\n        position: absolute;\n        left: 50%;\n        top: 50%;\n        transform: translate(-50%, -50%);\n      }\n\n      [card][emphasized-row],\n      [card][emphasized-row][focused] {\n        background-color: var(--grid-record-emphasized-background-color);\n        color: var(--grid-record-emphasized-color);\n      }\n\n      @media screen and (max-width: 460px) {\n        #setting {\n          grid-template-columns: 1fr;\n          grid-template-rows: 1fr 1fr;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Boolean }) empty?: boolean\n\n  /** 비었을 때 무슨 말을 하나 — 판단은 data-grist 가 하고 여기서는 그리기만 한다. */\n  @property({ type: Object }) emptyNote?: { icon?: string; title: string; description?: string }\n\n  @state() private _records: GristRecord[] = []\n  @state() private isTop: boolean = false\n\n  private _total: number = 0\n  private _limit: number = 20\n  private _page: number = 1\n\n  firstUpdated(changes: PropertyValues<this>) {\n    this.isTop = true\n\n    /* infinite scrolling */\n    this.addEventListener('scroll', e => {\n      const totalScrollHeight = this.scrollHeight\n      const screenHeight = this.offsetHeight\n      const currentScrollTop = this.scrollTop\n\n      if (totalScrollHeight <= screenHeight + currentScrollTop + 1) {\n        /* 마지막 페이지까지 계속 페이지를 증가시킨다. */\n        var lastPage = Math.ceil(this._total / this._limit)\n\n        if (this._page < lastPage) {\n          this.dispatchEvent(new CustomEvent('attach-page', { bubbles: true, composed: true }))\n        }\n      }\n\n      this.isTop = this.scrollTop == 0\n    })\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('config')) {\n      this._records = []\n      this._page = 1\n    }\n\n    if (changes.has('data')) {\n      this._records = this.data.records\n      this._total = this.data.total || 0\n      this._limit = this.data.limit || 20\n      this._page = this.data.page || 0\n    }\n  }\n\n  render() {\n    var { classifier } = this.config.rows\n    var records = this._records || []\n\n    if (this.config && this.config.rows.appendable) {\n      records = [...records, { __dirty__: '+' }]\n    }\n\n    return html`\n      ${records.map((record, rowIndex) => {\n        var { emphasized } = classifier.call(null, record, rowIndex) || {}\n\n        return html`\n          <ox-record-card\n            .config=${this.config}\n            .data=${this.data}\n            .record=${record}\n            .rowIndex=${rowIndex}\n            .emphasized=${emphasized}\n            ?selected-row=${record['__selected__']}\n            ?dirty=${record['__dirty__']}\n            card\n          ></ox-record-card>\n        `\n      })}\n      ${this.empty\n        ? html`<ox-empty-note\n            icon=${this.emptyNote?.icon ?? nothing}\n            title=${this.emptyNote?.title ?? ''}\n            description=${this.emptyNote?.description ?? nothing}\n          ></ox-empty-note>`\n        : html``}\n      ${this.isTop\n        ? html``\n        : html` <md-icon id=\"upward\" @click=${(e: Event) => this.gotoTop(e)}>arrow_upward</md-icon> `}\n    `\n  }\n\n  gotoTop(e: Event) {\n    this.scrollTop = 0\n\n    e.stopPropagation()\n  }\n\n  get pullToRefreshTarget() {\n    return this\n  }\n}\n"]}
+{"version":3,"file":"data-card.js","sourceRoot":"","sources":["../../../src/data-card/data-card.ts"],"names":[],"mappings":"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","sourcesContent":["import i18next from 'i18next'\nimport '@material/web/icon/icon.js'\nimport '@material/web/button/text-button.js'\nimport '@operato/list-state/ox-empty-note.js'\nimport './record-card.js'\n\nimport { PropertyValues, css, html, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { DataManipulator } from '../data-manipulator.js'\nimport { GristRecord } from '../types.js'\nimport { GridEmptyNote, renderEmptyNote } from '../empty-note-render.js'\n\n@customElement('ox-card')\nexport class DataCard extends DataManipulator {\n  static styles = [\n    css`\n      :host {\n        overflow-y: auto;\n        padding: var(--spacing-medium);\n\n        display: grid;\n        /*\n          카드 한 장의 최소 폭. 화면마다 실리는 것이 다르므로 값을 밖에서 정할 수 있어야 한다 —\n          그림이 주인공인 목록(자산 카탈로그)은 좁게 여러 장을, 글이 많은 목록은 넓게 몇 장을 놓는다.\n          기본값은 지금까지의 값 그대로다.\n        */\n        grid-template-columns: repeat(auto-fill, minmax(var(--data-card-min-width, 300px), 1fr));\n        grid-template-rows: min-content;\n        grid-gap: var(--spacing-large);\n      }\n\n      [selected-row] {\n        background-color: var(--grid-record-selected-background-color);\n      }\n\n      /*\n        ── 맨 위로 가는 단추 ──────────────────────────────────────────────────\n        자리를 먹지 않는다(absolute). 기준 상자는 ox-grist 의 host 인데(그쪽이 position: relative),\n        그래서 **목록과 함께 스크롤되지 않고** 상자에 붙어 있다.\n\n        고친 것 둘.\n\n          1. 위가 아니라 **아래**다. 오른쪽 위는 머리말·검색·필터가 있는 자리여서 단추가 그것들과\n             겹쳤다. 맨 위로 보내는 단추는 사람이 아래에 있을 때만 나오므로 손이 있는 쪽에 둔다.\n          2. rgba(255,255,255,0.7) 이 박혀 있었다 — 어두운 테마에서 흰 알약이 떠 있고, 아이콘은\n             --icon-size-large 라 알약보다 커 보였다. 테마 토큰으로 그리고 크기를 정한다.\n      */\n      #upward {\n        --md-icon-size: 20px;\n        position: absolute;\n        bottom: var(--data-card-fab-position-vertical, var(--spacing-large));\n        right: var(--data-card-fab-position-horizontal, var(--spacing-large));\n        display: grid;\n        place-items: center;\n        width: 36px;\n        height: 36px;\n        box-sizing: border-box;\n        color: var(--data-card-fab-color, var(--md-sys-color-on-surface-variant));\n        background-color: var(--data-card-fab-background-color, var(--md-sys-color-surface-container-high));\n        /* 떠 있는 단추의 모서리는 알약이다 — 담는 면(6px)이 아니라 그 자신의 격을 따른다 */\n        border-radius: var(--md-sys-shape-corner-full, 50%);\n        border: 1px solid var(--md-sys-color-outline-variant);\n        box-shadow: var(--data-card-fab-shadow, 0 1px 3px rgba(0, 0, 0, 0.18));\n        cursor: pointer;\n        z-index: 9;\n      }\n\n      #upward:hover {\n        color: var(--md-sys-color-on-secondary-container);\n        background-color: var(--md-sys-color-secondary-container);\n      }\n\n      slot {\n        width: 100%;\n      }\n\n      ox-empty-note {\n        display: block;\n        position: absolute;\n        left: 50%;\n        top: 50%;\n        transform: translate(-50%, -50%);\n      }\n\n      [card][emphasized-row],\n      [card][emphasized-row][focused] {\n        background-color: var(--grid-record-emphasized-background-color);\n        color: var(--grid-record-emphasized-color);\n      }\n\n      @media screen and (max-width: 460px) {\n        #setting {\n          grid-template-columns: 1fr;\n          grid-template-rows: 1fr 1fr;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Boolean }) empty?: boolean\n\n  /** 비었을 때 무슨 말을 하나 — 판단은 data-grist 가 하고 여기서는 그리기만 한다. */\n  @property({ type: Object }) emptyNote?: GridEmptyNote\n\n  @state() private _records: GristRecord[] = []\n  @state() private isTop: boolean = false\n\n  private _total: number = 0\n  private _limit: number = 20\n  private _page: number = 1\n\n  firstUpdated(changes: PropertyValues<this>) {\n    this.isTop = true\n\n    /* infinite scrolling */\n    this.addEventListener('scroll', e => {\n      const totalScrollHeight = this.scrollHeight\n      const screenHeight = this.offsetHeight\n      const currentScrollTop = this.scrollTop\n\n      if (totalScrollHeight <= screenHeight + currentScrollTop + 1) {\n        /* 마지막 페이지까지 계속 페이지를 증가시킨다. */\n        var lastPage = Math.ceil(this._total / this._limit)\n\n        if (this._page < lastPage) {\n          this.dispatchEvent(new CustomEvent('attach-page', { bubbles: true, composed: true }))\n        }\n      }\n\n      this.isTop = this.scrollTop == 0\n    })\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('config')) {\n      this._records = []\n      this._page = 1\n    }\n\n    if (changes.has('data')) {\n      this._records = this.data.records\n      this._total = this.data.total || 0\n      this._limit = this.data.limit || 20\n      this._page = this.data.page || 0\n    }\n  }\n\n  render() {\n    var { classifier } = this.config.rows\n    var records = this._records || []\n\n    if (this.config && this.config.rows.appendable) {\n      records = [...records, { __dirty__: '+' }]\n    }\n\n    return html`\n      ${records.map((record, rowIndex) => {\n        var { emphasized } = classifier.call(null, record, rowIndex) || {}\n\n        return html`\n          <ox-record-card\n            .config=${this.config}\n            .data=${this.data}\n            .record=${record}\n            .rowIndex=${rowIndex}\n            .emphasized=${emphasized}\n            ?selected-row=${record['__selected__']}\n            ?dirty=${record['__dirty__']}\n            card\n          ></ox-record-card>\n        `\n      })}\n      ${this.empty ? renderEmptyNote(this.emptyNote) : html``}\n      ${this.isTop\n        ? html``\n        : html` <md-icon id=\"upward\" @click=${(e: Event) => this.gotoTop(e)}>arrow_upward</md-icon> `}\n    `\n  }\n\n  gotoTop(e: Event) {\n    this.scrollTop = 0\n\n    e.stopPropagation()\n  }\n\n  get pullToRefreshTarget() {\n    return this\n  }\n}\n"]}

package/dist/src/data-consumer.d.ts

@@ -7,4 +7,8 @@ export interface DataConsumer extends EventTarget {
     fetchHandler?: FetchHandler;
     showSpinner(): void;
     hideSpinner(): void;
+    /** The fetch threw. Without this the grid kept its old rows or showed "nothing", and said nothing. */
+    fetchFailed?(error: unknown): void;
+    /** The fetch answered. Clears a previous failure. */
+    fetchSucceeded?(): void;
 }

package/dist/src/data-consumer.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-consumer.js","sourceRoot":"","sources":["../../src/data-consumer.ts"],"names":[],"mappings":"","sourcesContent":["import { FetchHandler, GristData } from './types.js'\n\nexport interface DataConsumer extends EventTarget {\n  data: any\n  _data: GristData\n  mode: 'GRID' | 'LIST' | 'CARD' | 'REPORT'\n  checkDirties(): void\n  fetchHandler?: FetchHandler\n  showSpinner(): void\n  hideSpinner(): void\n}\n"]}
+{"version":3,"file":"data-consumer.js","sourceRoot":"","sources":["../../src/data-consumer.ts"],"names":[],"mappings":"","sourcesContent":["import { FetchHandler, GristData } from './types.js'\n\nexport interface DataConsumer extends EventTarget {\n  data: any\n  _data: GristData\n  mode: 'GRID' | 'LIST' | 'CARD' | 'REPORT'\n  checkDirties(): void\n  fetchHandler?: FetchHandler\n  showSpinner(): void\n  hideSpinner(): void\n  /** The fetch threw. Without this the grid kept its old rows or showed \"nothing\", and said nothing. */\n  fetchFailed?(error: unknown): void\n  /** The fetch answered. Clears a previous failure. */\n  fetchSucceeded?(): void\n}\n"]}

package/dist/src/data-grid/data-grid-field.js

@@ -4,6 +4,7 @@ import i18next from 'i18next';
 import { css, html, LitElement } from 'lit';
 // import { guard } from 'lit/directives/guard.js'
 import { customElement, property } from 'lit/decorators.js';
+import { actionHeight } from '@operato/styles/action-heights.js';
 import { TooltipReactiveController } from '@operato/utils';
 import { ZERO_COLUMN } from '../configure/zero-config.js';
 import { editorOpensPopup } from '../editors/registry.js';
@@ -598,8 +599,8 @@ DataGridField.styles = [
         display: inline-flex;
         align-items: center;
         justify-content: center;
-        width: 26px;
-        height: 26px;
+        width: ${actionHeight('--cell-action-height')};
+        height: ${actionHeight('--cell-action-height')};
         flex: none;
         /*
          * 누를 자리는 26px 로 두되 **줄 높이는 밀지 않는다.**
@@ -610,8 +611,8 @@ DataGridField.styles = [
          * 그렇다고 26px 아래로 줄이면 손가락으로 못 누른다(가로세로 24px 이 최소다). 그래서 상자는 26px
          * 로 두고 위아래 3px 씩을 여백에서 되돌려, 자리는 20px 만 차지하게 한다 — 글자 한 줄과 같다.
          */
-        margin-top: -3px;
-        margin-bottom: -3px;
+        margin-top: calc((20px - ${actionHeight('--cell-action-height')}) / 2);
+        margin-bottom: calc((20px - ${actionHeight('--cell-action-height')}) / 2);
         border: none;
         border-radius: 50%;
         background: transparent;

package/dist/src/data-grid/data-grid-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-grid-field.js","sourceRoot":"","sources":["../../../src/data-grid/data-grid-field.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport i18next from 'i18next'\nimport { css, html, LitElement, PropertyValues, TemplateResult } from 'lit'\n// import { guard } from 'lit/directives/guard.js'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { TooltipReactiveController } from '@operato/utils'\n\nimport { ZERO_COLUMN } from '../configure/zero-config.js'\nimport { editorOpensPopup } from '../editors/registry.js'\nimport { ColumnConfig, GristRecord } from '../types.js'\n\nconst DEFAULT_TEXT_ALIGN = 'left'\n\n@customElement('ox-grid-field')\nexport class DataGridField extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n\n        align-items: center;\n        justify-content: var(--data-grid-field-justify-content, flex-start);\n        position: relative;\n\n        white-space: nowrap;\n        background-color: var(--grid-record-background-color);\n        padding: var(--grid-record-padding);\n        border: 1px solid transparent;\n        border-width: 1px 0;\n        border-bottom: var(--grid-record-border-bottom);\n\n        font-size: var(--grid-record-wide-fontsize);\n        min-height: 30px;\n        box-sizing: border-box;\n      }\n\n      /*\n       * ── 팝업으로 고치는 칸에는 **표식이 있다** ──────────────────────────────\n       *\n       * 그런 칸은 글자 칸과 똑같이 생겼다. 열어 보기 전에는 고칠 수 있는지도, 어떻게 고치는지도\n       * 모른다 — 「실제 더블클릭을 하기 전에는 모르는 막막함」(사용자, 2026-09-05).\n       *\n       * **마우스를 올렸을 때 보인다.** 늘 보이게 두었더니 한 화면에 54개가 깔려 표가 시끄러웠다\n       * (2026-09-05 · 사용자 판단). 값을 읽으러 온 눈에 장치가 줄마다 끼어든다.\n       *\n       * **손가락 화면에서는 늘 보인다.** 거기엔 올리는 동작이 없어서 감추면 길이 아예 없어진다.\n       * 그 화면들은 표가 성기므로 늘 보여도 시끄럽지 않다.\n       *\n       * ── 네모와 펜을 쓴다 ─────────────────────────────────────────────────\n       * 처음에 삼각형(arrow_drop_down)을 썼다. 참조 칸만 생각한 선택이었다 — 「목록에서 고른다」.\n       *\n       * 그런데 이 표식은 **팝업으로 여는 편집기 전부**에 붙는다. JSON · 코드 · 권한 편집기도\n       * 그렇고, 거기서 삼각형은 거짓말이다. 고를 목록이 없다.\n       *\n       * ── 모양이 **어디서 고치는지**를 말한다 ────────────────────────────────\n       *\n       *   edit          칸 안에서 고친다\n       *   edit_square   팝업이 열린다\n       *\n       * 표식이 있으면 고칠 수 있는 칸이고, 없으면 못 고치는 칸이다. **읽기 전용에는 붙지 않는다.**\n       *\n       * 처음에 삼각형(arrow_drop_down)을 썼다 — 참조 칸만 생각한 선택이었다. 이 표식은 JSON ·\n       * 코드 · 권한 편집기에도 붙고, 거기서 삼각형은 고를 목록이 있다는 거짓말이 된다.\n       *\n       * 누를 자리는 22px 이다. 33px 줄에서 더블클릭을 겨누는 것보다 한 번 누르는 편이 쉽다.\n       */\n      /* 마우스 화면 — 칸에 올렸을 때만. 자리는 늘 잡아 두므로 글자가 밀리지 않는다. */\n      @media (pointer: fine) {\n        [popup-hint] {\n          opacity: 0;\n          transition: opacity 0.12s ease;\n        }\n\n        :host(:hover) [popup-hint] {\n          opacity: 1;\n        }\n      }\n\n      /*\n       * 손가락 화면 — **고른 칸에만 보인다.**\n       *\n       * 올리는 동작이 없으니 호버로는 아무것도 못 보여 준다. 그렇다고 늘 보이게 두면 좁은\n       * 화면이 표식으로 뒤덮인다 — 시끄러우면 정작 필요한 표식도 안 보인다.\n       *\n       * 고른 칸 하나에만 두면 둘 다 풀린다. 두드려 고르는 것이 그 화면의 첫 동작이므로,\n       * 고르는 순간 「이 칸은 이렇게 고친다」가 나타난다.\n       */\n      @media (pointer: coarse) {\n        [popup-hint] {\n          display: none;\n        }\n\n        :host([focused]) [popup-hint] {\n          display: flex;\n        }\n      }\n\n      /*\n       * ── 표식은 늘 **칸의 끝**에 있다. 정렬을 따라가지 않는다 (2026-09-05) ──────\n       *\n       *   찾는 데 드는 값이 커진다   정렬은 열마다 다르다(이름은 왼쪽, 수량은 오른쪽). 표식이\n       *                             그것을 따라가면 자리가 열마다 달라져 눈이 매번 찾아야 한다.\n       *                             끝에 고정하면 규칙이 하나다 — 「손잡이는 칸 끝에 있다」\n       *   남의 칸처럼 보인다         오른쪽 정렬 칸의 값 **앞**에 표식을 두면 왼쪽 칸의 값 뒤에\n       *                             붙어 보인다. 어느 칸의 손잡이인지 흐려진다\n       *\n       * ── **값이 없는 쪽**에 붙는다 ──────────────────────────────────────\n       * 왼쪽으로 붙인 칸의 빈자리는 오른쪽이고, 오른쪽으로 붙인 칸(수량 · 금액)의 빈자리는\n       * 왼쪽이다. 정렬의 반대쪽에 두면 표식이 값 위에 얹히는 일 자체가 없어진다.\n       *\n       * 자리를 비워 두는 방법도 해 봤다 — 칸의 오른쪽을 24px 늘 비우는 것. 되돌렸다.\n       * **자료가 먼저다**(사용자, 2026-09-05): 마우스를 올렸을 때만 보이는 안내 때문에 고칠 수\n       * 있는 열 전부가 영구히 좁아지는 것은 값을 잘못 매긴 거래다.\n       *\n       * 가운데 정렬 칸은 양쪽이 다 비므로 끝에 둔다.\n       */\n      [popup-hint] {\n        position: absolute;\n        inset-inline-end: 2px;\n        top: 50%;\n        transform: translateY(-50%);\n\n        --md-icon-size: 16px;\n        font-size: 16px;\n        width: 16px;\n        height: 16px;\n        padding: 3px;\n        border-radius: 50%;\n\n        /*\n         * ── 채우지 않는다 (2026-09-05) ──────────────────────────────────\n         * md-icon 이 물려주는 값은 FILL 1 이라 글리프가 통짜로 나온다. 두 가지가 어긋난다.\n         *\n         *   뜻    채운 글리프는 「지금 그 상태다」를 말한다(고른 것 · 켠 것). 이 표식이 말하는\n         *         것은 상태가 아니라 **누르면 할 수 있는 일**이다. 그건 윤곽선의 몫이다\n         *   밀도  표는 글자밭이다. 같은 16px 에서 채운 글리프는 잉크가 몇 곱절이라 값보다\n         *         먼저 눈에 들어온다. 안내가 자료보다 진해서는 안 된다\n         *\n         * edit_square 는 특히 그렇다 — 채우면 네모가 덩어리가 되어 「종이 위의 연필」이라는\n         * 그림이 뭉개진다. 진하기는 색으로 조절한다(아래 :hover).\n         */\n        /*\n         * 굵기는 한 단 올린다. 16px 에서 400 짜리 윤곽선은 획이 배경에 묻는다 — 채움을 뺀 만큼\n         * 획으로 되받는다. 잉크가 늘지 않으면서 형태는 또렷해진다.\n         */\n        font-variation-settings:\n          'FILL' 0,\n          'wght' 500,\n          'opsz' 20;\n\n        /*\n         * ── 값 **위에 그려지되, 값보다 앞서지 않는다** ──────────────────\n         * 자리가 겹치면 표식이 위에 얹힌다. 그래도 이것은 거들어 주는 것이지 읽을 것이 아니다 —\n         * 본문 색으로 두었더니 값과 같은 무게가 되어 눈이 먼저 표식으로 갔다(사용자, 2026-09-05).\n         * 한 단 낮춰 라벨 색으로 둔다. 손이 표식 위에 오면 그때 본문 색이 된다.\n         */\n        color: var(--ui-muted, #57676f);\n        cursor: pointer;\n\n        transition:\n          background-color 0.12s ease,\n          color 0.12s ease;\n      }\n\n      /* 오른쪽으로 붙인 칸 — 값이 오른쪽 끝에 있으므로 표식은 왼쪽의 빈자리로 간다. */\n      :host([mark-start]) [popup-hint] {\n        inset-inline-end: auto;\n        inset-inline-start: 2px;\n      }\n\n      [popup-hint]:hover {\n        color: var(--ui-ink, #17272f);\n        background-color: var(--ui-hover, color-mix(in srgb, currentColor 12%, transparent));\n      }\n\n      :host([multiline]) {\n        white-space: pre-line;\n      }\n\n      /*\n       * ── 칸이 쓸 수 있는 용어 (2026-08-31) ──────────────────────────────────\n       * 렌더러가 그린 것은 이 부품의 shadow DOM 안에 들어간다. 그래서 **화면의 CSS 가 닿지 않는다.**\n       * 두 줄 칸이나 상태 알약을 그리려던 화면들이 그 벽에 막혀, 값에 인라인 style 을 박거나 칸마다\n       * 부품을 새로 만들었다.\n       *\n       * 목록이면 어디서나 같은 것을 필요로 하므로 여기서 준다. 이름은 뜻으로 짓는다 —\n       * 「늦었다」가 아니라 「심각하다(crit)」다. 늦은 것은 이 표의 일이 아니고 화면의 일이다.\n       *\n       *   .sub    둘째 줄. 「1,200 EA」 아래의 「BOLT-8」처럼 딸린 사실\n       *   .mono   고정폭. 번호·시각·수량처럼 자릿수를 비교하는 값\n       *   .none   값이 없음. 빈 칸으로 두면 「아직 안 읽었다」와 구별되지 않는다\n       *   .pill   알약. good·warn·crit·info 로 뜻을 준다\n       *   .crit · .warn · .good   글자 강조\n       *\n       * 값은 --ui-* 토큰에서 오고 폴백을 둔다 — 테마가 없어도 무너지지 않는다.\n       */\n      :host([twoline]) {\n        display: block;\n        white-space: normal;\n        line-height: 1.35;\n      }\n\n      .sub {\n        display: block;\n        margin-top: 2px;\n        font-size: var(--ui-t-small, 11.5px);\n        color: var(--ui-faint, #8a959c);\n      }\n\n      .mono {\n        font-family: var(--ui-mono, ui-monospace, Menlo, monospace);\n        font-variant-numeric: tabular-nums;\n      }\n\n      /*\n       * 그 줄이 무엇인지 가리키는 값 — 작업지시 번호, 설비 이름처럼. 두 줄 칸의 첫 줄이 이것이고\n       * 둘째 줄(.sub)이 딸린 사실이다. 굵기만 올린다. 고정폭은 쓰지 않는다 — 자릿수를 세로로 견줄\n       * 값이 아니고, 같은 글자 수에도 폭이 넓어져 옆 칸을 밀어낸다.\n       */\n      .id {\n        font-weight: 620;\n      }\n\n      .none {\n        color: var(--ui-faint, #8a959c);\n      }\n\n      .crit {\n        color: var(--ui-crit, #c93f30);\n        font-weight: 640;\n      }\n\n      .warn {\n        color: var(--ui-warn, #9f5e02);\n        font-weight: 640;\n      }\n\n      .good {\n        color: var(--ui-good, #297d39);\n        font-weight: 640;\n      }\n\n      /*\n       * 값과 표식을 한 줄에 담는 영역이다. **간격과 높이를 여기서 정한다.**\n       *\n       * 처음에는 :not(.pill) + .pill { margin-left } 로 띄우려 했는데 안 걸렸다. 렌더러가 값을\n       * 텍스트 노드로 내므로 알약의 앞 형제가 **요소가 아니고**, CSS 형제 선택자는 텍스트 노드를 보지\n       * 못한다. 알약이 첫 요소이기도 해서 :first-child 로도 가려지지 않는다(실측 확인).\n       *\n       * 높이도 같은 자리에서 잡는다. baseline 으로 두면 14px 글자와 11.5px 알약의 기준선을 맞추느라\n       * 알약이 내려앉는다.\n       */\n      /* 값이 있지만 눈에 걸릴 것은 아닌 것 — 「보통」 같은 기본값. .none(값 없음)과 구별한다. */\n      .quiet {\n        color: var(--ui-muted, #57676f);\n      }\n\n      /*\n       * 별 같은 작은 기호를 글자 크기로 맞춘다. md-icon 의 기본은 24px 이라 줄 높이를 밀어낸다.\n       * 색은 물려받는다 — 개수가 크기를 말하고 색은 담는 쪽이 정한다.\n       */\n      .star {\n        --md-icon-size: 15px;\n        font-size: 15px;\n        width: 15px;\n        height: 15px;\n        color: inherit;\n      }\n\n      /* 별처럼 여럿이 붙는 기호는 사이를 좁게 둔다. 단어 사이의 6px 은 여기서 너무 넓다. */\n      .line:has(.star) {\n        gap: 1px;\n      }\n\n      /*\n       * 셀 안의 아이콘 버튼. 그 줄에 하는 동작(들어가기 · 열기)을 담는다.\n       *\n       * 셀의 클릭 경로를 타지 않고 스스로 받으려는 렌더러가 쓴다. 그 경로에는 동작이 견딜 수 없는 관문이\n       * 둘 있다.\n       *\n       *   data-grid-body-click-handler.ts   if (this.editTarget) return\n       *   data-grid-body-click-handler.ts   (e.target).closest(\"ox-grid-field\")\n       *\n       * 앞은 다른 칸이 편집 중이면 첫 누름을 먹고, 뒤는 셀 경계를 스치면 칸을 못 찾는다. 진짜 button 을\n       * 그리면 둘을 다 피하고 키보드로도 닿는다.\n       *\n       * 이 규칙이 여기 있는 이유: 렌더러의 결과는 이 셀의 그림자 안에 그려지므로 **페이지의 스타일이\n       * 닿지 않는다.** 셀 안의 어휘는 셀이 갖는다.\n       *\n       * host 자식으로 적은 이유: 이 파일 아래의 host 자식 button 규칙이 채운 버튼을 그리고, 특이도가\n       * 같으면 **뒤에 오는 쪽이 이긴다.** 그것 없이 두면 이 버튼이 채운 버튼의 모양으로 나왔다\n       * (어두운 바탕 · 흰 글자, 실측 rgb(38, 46, 56)).\n       *\n       * 둘의 뜻이 다르다. 채운 버튼은 **실행하는 동작**이고, 이 버튼은 **이동**이다. 그래서 평소에는\n       * 흐리고 배경이 없다.\n       *\n       * 배경은 **칸을 채우지 않고 동그라미로** 그린다. 칸을 다 채우면 「이 셀이 골라졌다」로 읽힌다 —\n       * 표에서 채워진 사각형은 선택의 뜻이다. 동그라미는 버튼의 뜻이다.\n       */\n      :host > button.icon {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        width: 26px;\n        height: 26px;\n        flex: none;\n        /*\n         * 누를 자리는 26px 로 두되 **줄 높이는 밀지 않는다.**\n         *\n         * 이 버튼이 들어간 칸 하나 때문에 표의 모든 줄이 46px 이 됐다(글자만 있는 줄은 38px). 스무 줄이면\n         * 240px 을 잃는다. [확인함] grid-template-rows: 46px 34px\n         *\n         * 그렇다고 26px 아래로 줄이면 손가락으로 못 누른다(가로세로 24px 이 최소다). 그래서 상자는 26px\n         * 로 두고 위아래 3px 씩을 여백에서 되돌려, 자리는 20px 만 차지하게 한다 — 글자 한 줄과 같다.\n         */\n        margin-top: -3px;\n        margin-bottom: -3px;\n        border: none;\n        border-radius: 50%;\n        background: transparent;\n        padding: 0;\n        color: var(--ui-faint, #8a959c);\n        cursor: pointer;\n        transition:\n          background-color 0.12s ease,\n          color 0.12s ease;\n      }\n\n      :host > button.icon:hover {\n        background-color: var(--ui-hover, color-mix(in srgb, currentColor 12%, transparent));\n        color: var(--ui-ink, #17272f);\n      }\n\n      :host > button.icon:active {\n        background-color: var(--ui-active, color-mix(in srgb, currentColor 22%, transparent));\n      }\n\n      /* 키보드로 온 초점만 테를 보인다. 선택해서 온 초점에는 보이지 않는다. */\n      :host > button.icon:focus-visible {\n        outline: 2px solid var(--ui-accent, #00727e);\n        outline-offset: -2px;\n      }\n\n      /*\n       * 값을 함께 담는 버튼. 「4 ›」처럼 숫자와 화살이 나란히 놓인다.\n       *\n       * 아이콘만으로는 그 줄에 무엇이 있는지 말하지 못한다. 값이 뜻을 나르고 화살이 「누를 수 있다」를\n       * 말한다. 그래서 동그라미가 아니라 알약 모양이다.\n       */\n      :host > button.icon.wide {\n        width: auto;\n        min-width: 44px;\n        gap: 0;\n        padding: 0 2px 0 7px;\n        border-radius: 999px;\n        font: inherit;\n        font-size: var(--grid-record-wide-fontsize);\n        font-variant-numeric: tabular-nums;\n      }\n\n      :host > button.icon.wide md-icon {\n        --md-icon-size: 16px;\n        font-size: 16px;\n        width: 16px;\n        height: 16px;\n      }\n\n      :host > button.icon md-icon {\n        --md-icon-size: 18px;\n        font-size: 18px;\n        width: 18px;\n        height: 18px;\n      }\n\n      .line {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n        min-width: 0;\n      }\n\n      /* 값이 길면 값이 줄고 표식은 그대로 남는다 — 표식이 먼저 잘리면 읽을 수 없다. */\n      .line > :first-child {\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      }\n\n      /* 표식 — 상태 같은 짧은 값에 두른다. 점이 색을 나르고 글자가 뜻을 나른다. */\n      .pill {\n        display: inline-flex;\n        align-items: center;\n        gap: 5px;\n        padding: 1px 8px;\n        border: 1px solid var(--ui-line, #d5dce0);\n        border-radius: 999px;\n        font-size: var(--ui-t-small, 11.5px);\n        font-weight: 400;\n        color: var(--ui-muted, #57676f);\n        white-space: nowrap;\n      }\n\n      /*\n       * 색만으로 뜻을 전하지 않는다 — 알약 안의 글자가 함께 말한다. 점은 거드는 것이다.\n       *\n       * align-self: center 가 필요하다. 알약은 flex 이고 점은 그 안의 항목인데, 높이를 6px 로\n       * 주어도 교차축에서 늘어나 **6×11.5 짜리 세로 타원**이 됐다(원이 아니라 길쭉했다).\n       * .pill 의 align-items: center 는 부모 쪽 값이라 이 항목의 stretch 를 막지 못한다.\n       */\n      .pill .dot {\n        align-self: center;\n        width: 6px;\n        height: 6px;\n        /*\n         * 이 파일 아래에 span, pre 의 min-height: 1em 이 있다. 값이 빈 칸에서도 줄 높이를\n         * 유지하려는 규칙인데, 점도 span 이라 거기 걸려 **높이가 1em(11.5px)까지 늘어났다** —\n         * 그래서 6px 을 줘도 6×11.5 세로 타원이 됐다. 여기서 되돌린다.\n         */\n        min-height: 0;\n        border-radius: 50%;\n        background: currentColor;\n        flex: none;\n      }\n\n      .pill.good {\n        color: var(--ui-good, #297d39);\n        border-color: color-mix(in srgb, var(--ui-good, #297d39) 40%, transparent);\n        font-weight: 400;\n      }\n\n      .pill.info {\n        color: var(--ui-accent, #00727e);\n        border-color: color-mix(in srgb, var(--ui-accent, #00727e) 40%, transparent);\n        font-weight: 400;\n      }\n\n      .pill.warn {\n        color: var(--ui-warn, #9f5e02);\n        border-color: color-mix(in srgb, var(--ui-warn, #9f5e02) 40%, transparent);\n        font-weight: 400;\n      }\n\n      .pill.crit {\n        color: var(--ui-crit, #c93f30);\n        border-color: color-mix(in srgb, var(--ui-crit, #c93f30) 40%, transparent);\n        font-weight: 400;\n      }\n\n      .pill.quiet {\n        color: var(--ui-faint, #8a959c);\n      }\n\n      :host([gutter]) {\n        padding: var(--grid-gutter-padding);\n        text-align: center;\n      }\n\n      :host([gutter]) * {\n        cursor: default;\n        overflow: hidden;\n      }\n\n      :host([editing]) {\n        border-top: var(--grid-record-editing-border);\n        border-bottom: var(--grid-record-editing-border);\n      }\n\n      /*\n       * 초점이 갔다고 **줄을 나누는 선을 바꾸지 않는다.**\n       *\n       * 전에는 여기서 --grid-record-border-bottom 을 초점 표식 값으로 덮어썼다. 그래서 표식을\n       * 감추려고 그 토큰을 none 이나 투명으로 두면 **그 셀만 줄 선이 사라졌다.** 한 토큰이 「초점\n       * 표식」과 「줄을 나누는 선」 두 가지를 겸하고 있었던 것이다.\n       *\n       * 초점 표식은 outline 이 그린다(data-grid-body-style.ts). 줄 선은 줄 선으로 남는다.\n       */\n\n      :host([dirty])::after {\n        content: '';\n        position: absolute;\n        right: 0;\n        top: 0;\n\n        width: 0px;\n        height: 0px;\n        border-top: 9px solid red;\n        border-left: 9px solid transparent;\n      }\n\n      span,\n      pre {\n        display: block;\n        text-overflow: ellipsis;\n        overflow: hidden;\n        min-height: 1em;\n      }\n\n      :host([multiline]) span,\n      :host([multiline]) pre {\n        text-overflow: initial;\n        overflow: visible;\n        white-space: pre-line;\n        word-break: break-word;\n        overflow-wrap: anywhere;\n      }\n\n      * {\n        margin: 0;\n        text-align: var(--data-grid-field-text-align);\n      }\n\n      *[center] {\n        flex: none;\n        margin: 0 auto;\n      }\n\n      :host > button {\n        display: flex;\n        gap: var(--spacing-small);\n        border: 0;\n        align-items: center;\n        padding: var(--spacing-small);\n\n        color: var(--md-sys-color-on-primary);\n        background-color: var(--md-sys-color-primary);\n        border-radius: var(--data-card-item-btn-border-radius, var(--md-sys-shape-corner-tiny));\n\n        font-size: 0.8rem;\n        line-height: 0.8rem;\n\n        md-icon {\n          border: 0;\n          padding: 0;\n          background-color: unset;\n        }\n      }\n\n      :host([danger]) > button {\n        color: var(--md-sys-color-on-primary);\n        background-color: var(--md-sys-color-error);\n        border-color: var(--md-sys-color-error);\n      }\n\n      :host([danger]) > button:hover {\n        color: var(--md-sys-color-on-secondary);\n        background-color: var(--md-sys-color-secondary);\n        border-color: var(--md-sys-color-secondary);\n      }\n    `\n  ]\n\n  @property({ type: String, attribute: true }) align = DEFAULT_TEXT_ALIGN\n  @property({ type: Object }) record: GristRecord = {}\n  @property({ type: Object }) column: ColumnConfig = ZERO_COLUMN\n  @property({ type: Number }) rowIndex = 0\n  @property({ type: Number }) columnIndex = 0\n  @property({ type: Boolean }) editing = false\n  @property({ type: Boolean, reflect: true }) multiline = false\n  @property({ type: Object }) value = {}\n  @property({ type: String }) valueWith: string | null = null\n  @property({ attribute: false }) emphasized: any = false\n  @property({ type: String, attribute: true }) fixed?: string\n  @property({ type: String }) type?: string\n  @property({ type: Boolean }) isWorking: boolean = false\n\n  /* check in tree의 변화에 대응하기 위함임. 만일, record control 오브젝트로 통일되면 대체될 것임. */\n  @property({ type: String }) checked?: string\n\n  private _editCancelled?: boolean\n  private _onFieldChange: (e: Event) => void = e => {}\n  private _onKeydownInEditingMode: (e: KeyboardEvent) => void = e => {}\n\n  private tooltipController?: TooltipReactiveController = new TooltipReactiveController(this)\n\n  render(): TemplateResult {\n    if (!this.column) {\n      return html``\n    }\n\n    var { value, column, record, rowIndex } = this\n    var { renderer, editor } = column.record\n\n    return html`\n      ${this.editing\n        ? editor?.call(this, value, column, record, rowIndex, this)\n        : renderer?.call(this, value, column, record, rowIndex, this)}\n      <!--\n        **편집 중에도 표식을 남긴다.**\n\n        칸을 누르면 편집 상태가 되고, 그때는 렌더러 대신 편집기가 그려진다. 표식을 !editing 으로\n        묶어 두었더니 **칸에 들어간 순간 사라졌다** — 들어간 사람에게 여는 길이 없어지는 셈이고,\n        다시 더블클릭이나 Enter 를 짐작해야 한다. 그 짐작을 없애려고 만든 표식이다.\n\n        팝업 편집기에만 붙으므로(opensPopup) 글자를 치는 편집기를 가릴 일은 없다.\n      -->\n      <!--\n        ── 칸 안에서 고치는 중에는 표식을 걷는다 ────────────────────────────────\n        입력칸이 이미 그 자리에 있다. 펜을 겹쳐 두면 글자를 가리고, 고치는 중인 사람에게\n        「고칠 수 있다」를 다시 말할 이유도 없다.\n\n        팝업 쪽은 남긴다 — 편집 상태에 들어가도 팝업은 아직 안 열렸고, 그 표식이 여는 길이다.\n      -->\n      ${this.editMark && !(this.editing && this.editMark === 'inline')\n        ? html`<md-icon\n            popup-hint\n            ?inline=${this.editMark === 'inline'}\n            title=${i18next.t('text.grid-open-editor', { defaultValue: 'press to edit' })}\n            @pointerdown=${async (e: Event) => {\n              /*\n               * **click 이 아니라 pointerdown 이다.**\n               *\n               * 이 표에서는 click 이벤트가 나지 않는다 — 몸통이 pointer 단계에서 기본 동작을\n               * 막는다. document 에 capture 로 click 을 걸어 두고 표식을 선택해 봐도 한 번도\n               * 울리지 않았다(2026-09-05 계측).\n               */\n              e.stopPropagation()\n              e.preventDefault()\n\n              /*\n               * ── 포커스는 여기서 변경하지 않는다 ──────────────────────────────\n               *\n               * 팝업이 닫히면 오버레이가 **열릴 때 포커스가 있던 자리**로 돌려준다. 그런데 위에서\n               * preventDefault 를 하므로 브라우저가 이 칸으로 포커스를 옮겨 주지 않고, 그래서\n               * 팝업을 닫으면 엉뚱한 곳으로 간다(페이지 검색창이었다).\n               *\n               * 두 가지를 해 봤고 **둘 다 팝업이 안 열리게 만들었다.**\n               *\n               *   focus-change 이벤트      몸통이 그 갱신에서 editTarget 을 지운다(shouldUpdate)\n               *   ime-buffer 에 직접 focus  같은 결과\n               *\n               * 이 표는 포커스를 ime-buffer 라는 숨은 입력칸에 담아 두고, 편집 상태를 그 갱신\n               * 주기에 얹고 있다. 그 둘이 얽혀 있어서 밖에서 포커스를 옮기면 편집이 취소된다.\n               *\n               * 표의 포커스 모델을 손대야 풀리는 문제라 여기서 우회하지 않는다.\n               * [확인함] 2026-09-05 · 두 방법 모두 팝업이 안 열림\n               */\n\n              this.dispatchEvent(\n                new CustomEvent('start-edit', {\n                  bubbles: true,\n                  composed: true,\n                  detail: { row: this.rowIndex, column: this.columnIndex }\n                })\n              )\n\n              /*\n               * 칸 안에서 고치는 편집기는 여기서 끝난다 — 편집이 열리면 그 자리에 입력칸이 뜬다.\n               * 팝업 편집기는 한 걸음 더 필요하다.\n               */\n              if (this.editMark !== 'popup') {\n                return\n              }\n\n              /*\n               * ── 편집을 열고, **그다음** 더블클릭을 편집기에 보낸다 ──────────────\n               *\n               * 사람이 더블클릭할 때의 순서를 계측해 보면 이렇다.\n               *\n               *   startEditTarget   첫 클릭이 편집을 연다 → 편집기가 그려진다\n               *   dblclick          그다음에 도착해 **이미 있는 편집기**가 받아 팝업을 연다\n               *\n               * 편집기마다 여는 메서드 이름이 달라서 부품이 직접 부를 수는 없다. 사람이 하던\n               * 동작을 같은 순서로 보내면 경로가 하나로 남는다.\n               */\n              for (let i = 0; i < 5 && !this.editing; i++) {\n                await new Promise(resolve => requestAnimationFrame(resolve))\n              }\n\n              await this.updateComplete\n\n              /*\n               * Both events, in the order a browser sends them.\n               *\n               * The editors split on which one they open from, and sending only `dblclick`\n               * reached two of the eight:\n               *\n               *   _onclick     json5 · code · resource-code · privilege · json · resource-id\n               *   _ondblclick  resource-object · resource-object-legacy\n               *\n               * Those last two define `_onclick` as a no-op, so nothing opens twice.\n               * [확인함] 2026-09-07 · 사용자 보고 — 코드 편집기가 아이콘으로 안 열렸다\n               */\n              const editor = this.renderRoot.firstElementChild as HTMLElement | null\n              editor?.dispatchEvent(new MouseEvent('click', { bubbles: true, composed: true }))\n              editor?.dispatchEvent(new MouseEvent('dblclick', { bubbles: true, composed: true }))\n            }}\n            >${this.editMark === 'popup' ? 'edit_square' : 'edit'}</md-icon\n          >`\n        : ''}\n    `\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('editing')) {\n      if (this.editing) {\n        this._onKeydownInEditingMode = ((e: KeyboardEvent) => {\n          if (e.key === 'Esc' || e.key === 'Escape') {\n            /* 편집 취소 */\n            this._editCancelled = true\n          }\n        }).bind(this)\n\n        this._onFieldChange = ((e: Event) => {\n          this._editCancelled && e.stopPropagation()\n        }).bind(this)\n\n        delete this._editCancelled\n        this.addEventListener('field-change', this._onFieldChange)\n        this.addEventListener('keydown', this._onKeydownInEditingMode)\n      } else {\n        this.removeEventListener('field-change', this._onFieldChange)\n        this.removeEventListener('keydown', this._onKeydownInEditingMode)\n      }\n    }\n\n    if (changes.has('column')) {\n      /*\n       * 정렬은 **넣을 때만이 아니라 되돌릴 때도** 손대야 한다.\n       *\n       * 이 요소는 재사용된다. 전에는 기본값이 아닐 때만 인라인 값을 넣고 지우지 않았다. 그래서 한 번\n       * 오른쪽 정렬 칸을 그린 셀이 다음에 왼쪽 정렬 칸을 그려도 오른쪽에 남았다.\n       *\n       * [확인함] 품질 화면 「판단」 칸에서 머리글은 x=380(왼쪽)인데 값은 x=452(flex-end)였다. 숫자 칸을\n       * 오른쪽으로 바꾼 뒤 드러났다 — 오른쪽 정렬 칸이 드물던 동안은 눈에 안 띄었다. 2026-09-02\n       */\n      var align = this.column.record.align || DEFAULT_TEXT_ALIGN\n\n      if (align == DEFAULT_TEXT_ALIGN) {\n        this.style.removeProperty('--data-grid-field-justify-content')\n        this.style.removeProperty('--data-grid-field-text-align')\n      } else {\n        let justify = 'center'\n        switch (align) {\n          case 'right':\n            justify = 'flex-end'\n            break\n        }\n        this.style.setProperty('--data-grid-field-justify-content', justify)\n        this.style.setProperty('--data-grid-field-text-align', align)\n      }\n\n      /* 표식은 값의 반대쪽 빈자리에 선다 — 위 :host([mark-start]) 주석 참고. */\n      this.toggleAttribute('mark-start', align === 'right')\n\n      const { danger } = this.column\n      if (danger) {\n        this.setAttribute('danger', '')\n      } else {\n        this.removeAttribute('danger')\n      }\n    }\n\n    if (changes.has('fixed')) {\n      if (this.fixed) {\n        this.style.left = this.fixed + 'px'\n      } else {\n        this.style.left = 'unset'\n      }\n    }\n\n    let disabled = this.column.record.disabled || false\n    if (typeof disabled === 'function') {\n      disabled = disabled.call(this, this.record[this.column.name], this.column, this.record, this.rowIndex, this)\n    }\n\n    if (!!disabled) {\n      // 비황성화 여부 표시\n      this.setAttribute('disabled', '')\n    } else {\n      // 비황성화 여부 제거\n      this.removeAttribute('disabled')\n    }\n\n    const emphasized =\n      /*\n       * classifier 는 없을 수 있다. 열 빌더가 채워 주지만 손으로 만든 열에는 없고, 그때 여기서\n       * 던진다. 갱신 중에 나는 예외라 화면이 오류보고없이 멈춘다.\n       *\n       * [확인함] 2026-09-05 · wtr 에서 Cannot read properties of undefined (reading 'call')\n       *          팝업 표식을 넣어 칸이 전보다 자주 갱신되면서 드러났다. 원래 있던 자리다.\n       */\n      this.column.record.classifier?.call(this, this.record, this.rowIndex)?.emphasized || this.emphasized\n\n    if (!!emphasized) {\n      this.setAttribute('emphasized-row', '')\n\n      if (Symbol.iterator in Object(emphasized)) {\n        const [backgroundColor, foregroundColor] = emphasized as string[]\n        backgroundColor && this.style.setProperty('--grid-record-emphasized-background-color', backgroundColor)\n        foregroundColor && this.style.setProperty('--grid-record-emphasized-color', foregroundColor)\n      }\n    } else {\n      this.removeAttribute('emphasized-row')\n    }\n  }\n\n  /**\n   * 이 칸에 **팝업 표식**을 붙이나 — 팝업으로 고쳐지고, 지금 고칠 수 있을 때만.\n   *\n   * 고칠 수 있는지는 열이 함수로 정할 수도 있다(줄마다 다른 경우). 그때는 몸통이 편집을 열 때\n   * 하는 것과 같은 방식으로 물어본다. 표식은 있는데 선택해도 안 열리면 그것이 더 나쁘다.\n   */\n  get opensPopup(): boolean {\n    return this.editMark === 'popup'\n  }\n\n  /**\n   * 이 칸을 **고칠 수 있나, 그리고 어디서 고치나.**\n   *\n   *   popup    팝업이 열린다 — 네모와 펜\n   *   inline   칸 안에서 고친다 — 펜\n   *   null     못 고친다 — 표식 없음\n   *\n   * 표식이 있으면 고칠 수 있는 칸이고, 모양이 어디서 고치는지를 말한다.\n   *\n   * 고칠 수 있는지는 열이 함수로 정할 수도 있다(줄마다 다른 경우). 그때는 몸통이 편집을 열 때\n   * 하는 것과 같은 방식으로 물어본다. 표식은 있는데 선택해도 안 열리면 그것이 더 나쁘다.\n   */\n  get editMark(): 'popup' | 'inline' | null {\n    const column = this.column\n\n    if (!column) {\n      return null\n    }\n\n    /* 거터에는 붙이지 않는다 — 순번과 고르기 칸은 고치는 자리가 아니다. */\n    if (column.type === 'gutter') {\n      return null\n    }\n\n    /*\n     * 표 오른쪽의 **빈 채움 열**에도 붙이지 않는다. 남는 자리를 메우는 20px 짜리 빈 열이라\n     * 이름도 타입도 없다 — 고칠 것이 없는데 표식만 떴다.\n     *\n     * [확인함] 2026-09-05 · 인원 화면 맨 끝 칸 · { type: '', name: '', label: false } · 폭 20\n     */\n    if (!column.name) {\n      return null\n    }\n\n    let { editable } = column.record || ({} as any)\n\n    if (typeof editable === 'function') {\n      editable = editable.call(this, this.value, column, this.record, this.rowIndex, this)\n    }\n\n    /*\n     * **밝히지 않은 열에는 붙이지 않는다.**\n     *\n     * 표 전체가 고칠 수 있는지를 판단하는 자리가 같은 기준을 쓴다.\n     *\n     *   [읽었음] data-grid.ts · editableGrid = columns.some(c => !!c.record?.editable)\n     *\n     * 참일 때만 고칠 수 있는 열로 본다. 선언하지 않은 열까지 세면 **고르기만 하는 표**에도\n     * 표식이 깔린다 — 참조 팝업의 목록이 그랬다(2026-09-05). 그 표의 칸은 고르는 자리이지\n     * 고치는 자리가 아니다.\n     */\n    if (!editable) {\n      return null\n    }\n\n    /*\n     * 편집기를 **함수로 직접 준 열**은 타입으로 판단할 수 없다. 그리기를 다른 렌더러로 하려고\n     * 타입을 바꾼 열이 그렇다 — 관계를 여럿 다는 칸이 `ops-list` 로 그려지면서 편집은 참조\n     * 팝업으로 한다(ops-master 의 reference-list).\n     *\n     * 그런 열은 `record.opensPopup` 으로 스스로 밝힌다. 밝히지 않으면 타입으로 본다.\n     *\n     *   [확인함] 2026-09-05 · 보유 자격 · 타입 ops-list · 팝업으로 열리는데 표식이 inline 이었다\n     */\n    const declared = (column.record as any)?.opensPopup\n\n    if (typeof declared === 'boolean') {\n      return declared ? 'popup' : 'inline'\n    }\n\n    return editorOpensPopup(column.type) ? 'popup' : 'inline'\n  }\n\n  get editableOnClick() {\n    const renderer = this.renderRoot.firstElementChild as HTMLElement\n    //@ts-ignore\n    return renderer && 'editableOnClick' in renderer ? renderer.editableOnClick : true\n  }\n}\n"]}
+{"version":3,"file":"data-grid-field.js","sourceRoot":"","sources":["../../../src/data-grid/data-grid-field.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport i18next from 'i18next'\nimport { css, html, LitElement, PropertyValues, TemplateResult } from 'lit'\n// import { guard } from 'lit/directives/guard.js'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { actionHeight } from '@operato/styles/action-heights.js'\nimport { TooltipReactiveController } from '@operato/utils'\n\nimport { ZERO_COLUMN } from '../configure/zero-config.js'\nimport { editorOpensPopup } from '../editors/registry.js'\nimport { ColumnConfig, GristRecord } from '../types.js'\n\nconst DEFAULT_TEXT_ALIGN = 'left'\n\n@customElement('ox-grid-field')\nexport class DataGridField extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n\n        align-items: center;\n        justify-content: var(--data-grid-field-justify-content, flex-start);\n        position: relative;\n\n        white-space: nowrap;\n        background-color: var(--grid-record-background-color);\n        padding: var(--grid-record-padding);\n        border: 1px solid transparent;\n        border-width: 1px 0;\n        border-bottom: var(--grid-record-border-bottom);\n\n        font-size: var(--grid-record-wide-fontsize);\n        min-height: 30px;\n        box-sizing: border-box;\n      }\n\n      /*\n       * ── 팝업으로 고치는 칸에는 **표식이 있다** ──────────────────────────────\n       *\n       * 그런 칸은 글자 칸과 똑같이 생겼다. 열어 보기 전에는 고칠 수 있는지도, 어떻게 고치는지도\n       * 모른다 — 「실제 더블클릭을 하기 전에는 모르는 막막함」(사용자, 2026-09-05).\n       *\n       * **마우스를 올렸을 때 보인다.** 늘 보이게 두었더니 한 화면에 54개가 깔려 표가 시끄러웠다\n       * (2026-09-05 · 사용자 판단). 값을 읽으러 온 눈에 장치가 줄마다 끼어든다.\n       *\n       * **손가락 화면에서는 늘 보인다.** 거기엔 올리는 동작이 없어서 감추면 길이 아예 없어진다.\n       * 그 화면들은 표가 성기므로 늘 보여도 시끄럽지 않다.\n       *\n       * ── 네모와 펜을 쓴다 ─────────────────────────────────────────────────\n       * 처음에 삼각형(arrow_drop_down)을 썼다. 참조 칸만 생각한 선택이었다 — 「목록에서 고른다」.\n       *\n       * 그런데 이 표식은 **팝업으로 여는 편집기 전부**에 붙는다. JSON · 코드 · 권한 편집기도\n       * 그렇고, 거기서 삼각형은 거짓말이다. 고를 목록이 없다.\n       *\n       * ── 모양이 **어디서 고치는지**를 말한다 ────────────────────────────────\n       *\n       *   edit          칸 안에서 고친다\n       *   edit_square   팝업이 열린다\n       *\n       * 표식이 있으면 고칠 수 있는 칸이고, 없으면 못 고치는 칸이다. **읽기 전용에는 붙지 않는다.**\n       *\n       * 처음에 삼각형(arrow_drop_down)을 썼다 — 참조 칸만 생각한 선택이었다. 이 표식은 JSON ·\n       * 코드 · 권한 편집기에도 붙고, 거기서 삼각형은 고를 목록이 있다는 거짓말이 된다.\n       *\n       * 누를 자리는 22px 이다. 33px 줄에서 더블클릭을 겨누는 것보다 한 번 누르는 편이 쉽다.\n       */\n      /* 마우스 화면 — 칸에 올렸을 때만. 자리는 늘 잡아 두므로 글자가 밀리지 않는다. */\n      @media (pointer: fine) {\n        [popup-hint] {\n          opacity: 0;\n          transition: opacity 0.12s ease;\n        }\n\n        :host(:hover) [popup-hint] {\n          opacity: 1;\n        }\n      }\n\n      /*\n       * 손가락 화면 — **고른 칸에만 보인다.**\n       *\n       * 올리는 동작이 없으니 호버로는 아무것도 못 보여 준다. 그렇다고 늘 보이게 두면 좁은\n       * 화면이 표식으로 뒤덮인다 — 시끄러우면 정작 필요한 표식도 안 보인다.\n       *\n       * 고른 칸 하나에만 두면 둘 다 풀린다. 두드려 고르는 것이 그 화면의 첫 동작이므로,\n       * 고르는 순간 「이 칸은 이렇게 고친다」가 나타난다.\n       */\n      @media (pointer: coarse) {\n        [popup-hint] {\n          display: none;\n        }\n\n        :host([focused]) [popup-hint] {\n          display: flex;\n        }\n      }\n\n      /*\n       * ── 표식은 늘 **칸의 끝**에 있다. 정렬을 따라가지 않는다 (2026-09-05) ──────\n       *\n       *   찾는 데 드는 값이 커진다   정렬은 열마다 다르다(이름은 왼쪽, 수량은 오른쪽). 표식이\n       *                             그것을 따라가면 자리가 열마다 달라져 눈이 매번 찾아야 한다.\n       *                             끝에 고정하면 규칙이 하나다 — 「손잡이는 칸 끝에 있다」\n       *   남의 칸처럼 보인다         오른쪽 정렬 칸의 값 **앞**에 표식을 두면 왼쪽 칸의 값 뒤에\n       *                             붙어 보인다. 어느 칸의 손잡이인지 흐려진다\n       *\n       * ── **값이 없는 쪽**에 붙는다 ──────────────────────────────────────\n       * 왼쪽으로 붙인 칸의 빈자리는 오른쪽이고, 오른쪽으로 붙인 칸(수량 · 금액)의 빈자리는\n       * 왼쪽이다. 정렬의 반대쪽에 두면 표식이 값 위에 얹히는 일 자체가 없어진다.\n       *\n       * 자리를 비워 두는 방법도 해 봤다 — 칸의 오른쪽을 24px 늘 비우는 것. 되돌렸다.\n       * **자료가 먼저다**(사용자, 2026-09-05): 마우스를 올렸을 때만 보이는 안내 때문에 고칠 수\n       * 있는 열 전부가 영구히 좁아지는 것은 값을 잘못 매긴 거래다.\n       *\n       * 가운데 정렬 칸은 양쪽이 다 비므로 끝에 둔다.\n       */\n      [popup-hint] {\n        position: absolute;\n        inset-inline-end: 2px;\n        top: 50%;\n        transform: translateY(-50%);\n\n        --md-icon-size: 16px;\n        font-size: 16px;\n        width: 16px;\n        height: 16px;\n        padding: 3px;\n        border-radius: 50%;\n\n        /*\n         * ── 채우지 않는다 (2026-09-05) ──────────────────────────────────\n         * md-icon 이 물려주는 값은 FILL 1 이라 글리프가 통짜로 나온다. 두 가지가 어긋난다.\n         *\n         *   뜻    채운 글리프는 「지금 그 상태다」를 말한다(고른 것 · 켠 것). 이 표식이 말하는\n         *         것은 상태가 아니라 **누르면 할 수 있는 일**이다. 그건 윤곽선의 몫이다\n         *   밀도  표는 글자밭이다. 같은 16px 에서 채운 글리프는 잉크가 몇 곱절이라 값보다\n         *         먼저 눈에 들어온다. 안내가 자료보다 진해서는 안 된다\n         *\n         * edit_square 는 특히 그렇다 — 채우면 네모가 덩어리가 되어 「종이 위의 연필」이라는\n         * 그림이 뭉개진다. 진하기는 색으로 조절한다(아래 :hover).\n         */\n        /*\n         * 굵기는 한 단 올린다. 16px 에서 400 짜리 윤곽선은 획이 배경에 묻는다 — 채움을 뺀 만큼\n         * 획으로 되받는다. 잉크가 늘지 않으면서 형태는 또렷해진다.\n         */\n        font-variation-settings:\n          'FILL' 0,\n          'wght' 500,\n          'opsz' 20;\n\n        /*\n         * ── 값 **위에 그려지되, 값보다 앞서지 않는다** ──────────────────\n         * 자리가 겹치면 표식이 위에 얹힌다. 그래도 이것은 거들어 주는 것이지 읽을 것이 아니다 —\n         * 본문 색으로 두었더니 값과 같은 무게가 되어 눈이 먼저 표식으로 갔다(사용자, 2026-09-05).\n         * 한 단 낮춰 라벨 색으로 둔다. 손이 표식 위에 오면 그때 본문 색이 된다.\n         */\n        color: var(--ui-muted, #57676f);\n        cursor: pointer;\n\n        transition:\n          background-color 0.12s ease,\n          color 0.12s ease;\n      }\n\n      /* 오른쪽으로 붙인 칸 — 값이 오른쪽 끝에 있으므로 표식은 왼쪽의 빈자리로 간다. */\n      :host([mark-start]) [popup-hint] {\n        inset-inline-end: auto;\n        inset-inline-start: 2px;\n      }\n\n      [popup-hint]:hover {\n        color: var(--ui-ink, #17272f);\n        background-color: var(--ui-hover, color-mix(in srgb, currentColor 12%, transparent));\n      }\n\n      :host([multiline]) {\n        white-space: pre-line;\n      }\n\n      /*\n       * ── 칸이 쓸 수 있는 용어 (2026-08-31) ──────────────────────────────────\n       * 렌더러가 그린 것은 이 부품의 shadow DOM 안에 들어간다. 그래서 **화면의 CSS 가 닿지 않는다.**\n       * 두 줄 칸이나 상태 알약을 그리려던 화면들이 그 벽에 막혀, 값에 인라인 style 을 박거나 칸마다\n       * 부품을 새로 만들었다.\n       *\n       * 목록이면 어디서나 같은 것을 필요로 하므로 여기서 준다. 이름은 뜻으로 짓는다 —\n       * 「늦었다」가 아니라 「심각하다(crit)」다. 늦은 것은 이 표의 일이 아니고 화면의 일이다.\n       *\n       *   .sub    둘째 줄. 「1,200 EA」 아래의 「BOLT-8」처럼 딸린 사실\n       *   .mono   고정폭. 번호·시각·수량처럼 자릿수를 비교하는 값\n       *   .none   값이 없음. 빈 칸으로 두면 「아직 안 읽었다」와 구별되지 않는다\n       *   .pill   알약. good·warn·crit·info 로 뜻을 준다\n       *   .crit · .warn · .good   글자 강조\n       *\n       * 값은 --ui-* 토큰에서 오고 폴백을 둔다 — 테마가 없어도 무너지지 않는다.\n       */\n      :host([twoline]) {\n        display: block;\n        white-space: normal;\n        line-height: 1.35;\n      }\n\n      .sub {\n        display: block;\n        margin-top: 2px;\n        font-size: var(--ui-t-small, 11.5px);\n        color: var(--ui-faint, #8a959c);\n      }\n\n      .mono {\n        font-family: var(--ui-mono, ui-monospace, Menlo, monospace);\n        font-variant-numeric: tabular-nums;\n      }\n\n      /*\n       * 그 줄이 무엇인지 가리키는 값 — 작업지시 번호, 설비 이름처럼. 두 줄 칸의 첫 줄이 이것이고\n       * 둘째 줄(.sub)이 딸린 사실이다. 굵기만 올린다. 고정폭은 쓰지 않는다 — 자릿수를 세로로 견줄\n       * 값이 아니고, 같은 글자 수에도 폭이 넓어져 옆 칸을 밀어낸다.\n       */\n      .id {\n        font-weight: 620;\n      }\n\n      .none {\n        color: var(--ui-faint, #8a959c);\n      }\n\n      .crit {\n        color: var(--ui-crit, #c93f30);\n        font-weight: 640;\n      }\n\n      .warn {\n        color: var(--ui-warn, #9f5e02);\n        font-weight: 640;\n      }\n\n      .good {\n        color: var(--ui-good, #297d39);\n        font-weight: 640;\n      }\n\n      /*\n       * 값과 표식을 한 줄에 담는 영역이다. **간격과 높이를 여기서 정한다.**\n       *\n       * 처음에는 :not(.pill) + .pill { margin-left } 로 띄우려 했는데 안 걸렸다. 렌더러가 값을\n       * 텍스트 노드로 내므로 알약의 앞 형제가 **요소가 아니고**, CSS 형제 선택자는 텍스트 노드를 보지\n       * 못한다. 알약이 첫 요소이기도 해서 :first-child 로도 가려지지 않는다(실측 확인).\n       *\n       * 높이도 같은 자리에서 잡는다. baseline 으로 두면 14px 글자와 11.5px 알약의 기준선을 맞추느라\n       * 알약이 내려앉는다.\n       */\n      /* 값이 있지만 눈에 걸릴 것은 아닌 것 — 「보통」 같은 기본값. .none(값 없음)과 구별한다. */\n      .quiet {\n        color: var(--ui-muted, #57676f);\n      }\n\n      /*\n       * 별 같은 작은 기호를 글자 크기로 맞춘다. md-icon 의 기본은 24px 이라 줄 높이를 밀어낸다.\n       * 색은 물려받는다 — 개수가 크기를 말하고 색은 담는 쪽이 정한다.\n       */\n      .star {\n        --md-icon-size: 15px;\n        font-size: 15px;\n        width: 15px;\n        height: 15px;\n        color: inherit;\n      }\n\n      /* 별처럼 여럿이 붙는 기호는 사이를 좁게 둔다. 단어 사이의 6px 은 여기서 너무 넓다. */\n      .line:has(.star) {\n        gap: 1px;\n      }\n\n      /*\n       * 셀 안의 아이콘 버튼. 그 줄에 하는 동작(들어가기 · 열기)을 담는다.\n       *\n       * 셀의 클릭 경로를 타지 않고 스스로 받으려는 렌더러가 쓴다. 그 경로에는 동작이 견딜 수 없는 관문이\n       * 둘 있다.\n       *\n       *   data-grid-body-click-handler.ts   if (this.editTarget) return\n       *   data-grid-body-click-handler.ts   (e.target).closest(\"ox-grid-field\")\n       *\n       * 앞은 다른 칸이 편집 중이면 첫 누름을 먹고, 뒤는 셀 경계를 스치면 칸을 못 찾는다. 진짜 button 을\n       * 그리면 둘을 다 피하고 키보드로도 닿는다.\n       *\n       * 이 규칙이 여기 있는 이유: 렌더러의 결과는 이 셀의 그림자 안에 그려지므로 **페이지의 스타일이\n       * 닿지 않는다.** 셀 안의 어휘는 셀이 갖는다.\n       *\n       * host 자식으로 적은 이유: 이 파일 아래의 host 자식 button 규칙이 채운 버튼을 그리고, 특이도가\n       * 같으면 **뒤에 오는 쪽이 이긴다.** 그것 없이 두면 이 버튼이 채운 버튼의 모양으로 나왔다\n       * (어두운 바탕 · 흰 글자, 실측 rgb(38, 46, 56)).\n       *\n       * 둘의 뜻이 다르다. 채운 버튼은 **실행하는 동작**이고, 이 버튼은 **이동**이다. 그래서 평소에는\n       * 흐리고 배경이 없다.\n       *\n       * 배경은 **칸을 채우지 않고 동그라미로** 그린다. 칸을 다 채우면 「이 셀이 골라졌다」로 읽힌다 —\n       * 표에서 채워진 사각형은 선택의 뜻이다. 동그라미는 버튼의 뜻이다.\n       */\n      :host > button.icon {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        width: ${actionHeight('--cell-action-height')};\n        height: ${actionHeight('--cell-action-height')};\n        flex: none;\n        /*\n         * 누를 자리는 26px 로 두되 **줄 높이는 밀지 않는다.**\n         *\n         * 이 버튼이 들어간 칸 하나 때문에 표의 모든 줄이 46px 이 됐다(글자만 있는 줄은 38px). 스무 줄이면\n         * 240px 을 잃는다. [확인함] grid-template-rows: 46px 34px\n         *\n         * 그렇다고 26px 아래로 줄이면 손가락으로 못 누른다(가로세로 24px 이 최소다). 그래서 상자는 26px\n         * 로 두고 위아래 3px 씩을 여백에서 되돌려, 자리는 20px 만 차지하게 한다 — 글자 한 줄과 같다.\n         */\n        margin-top: calc((20px - ${actionHeight('--cell-action-height')}) / 2);\n        margin-bottom: calc((20px - ${actionHeight('--cell-action-height')}) / 2);\n        border: none;\n        border-radius: 50%;\n        background: transparent;\n        padding: 0;\n        color: var(--ui-faint, #8a959c);\n        cursor: pointer;\n        transition:\n          background-color 0.12s ease,\n          color 0.12s ease;\n      }\n\n      :host > button.icon:hover {\n        background-color: var(--ui-hover, color-mix(in srgb, currentColor 12%, transparent));\n        color: var(--ui-ink, #17272f);\n      }\n\n      :host > button.icon:active {\n        background-color: var(--ui-active, color-mix(in srgb, currentColor 22%, transparent));\n      }\n\n      /* 키보드로 온 초점만 테를 보인다. 선택해서 온 초점에는 보이지 않는다. */\n      :host > button.icon:focus-visible {\n        outline: 2px solid var(--ui-accent, #00727e);\n        outline-offset: -2px;\n      }\n\n      /*\n       * 값을 함께 담는 버튼. 「4 ›」처럼 숫자와 화살이 나란히 놓인다.\n       *\n       * 아이콘만으로는 그 줄에 무엇이 있는지 말하지 못한다. 값이 뜻을 나르고 화살이 「누를 수 있다」를\n       * 말한다. 그래서 동그라미가 아니라 알약 모양이다.\n       */\n      :host > button.icon.wide {\n        width: auto;\n        min-width: 44px;\n        gap: 0;\n        padding: 0 2px 0 7px;\n        border-radius: 999px;\n        font: inherit;\n        font-size: var(--grid-record-wide-fontsize);\n        font-variant-numeric: tabular-nums;\n      }\n\n      :host > button.icon.wide md-icon {\n        --md-icon-size: 16px;\n        font-size: 16px;\n        width: 16px;\n        height: 16px;\n      }\n\n      :host > button.icon md-icon {\n        --md-icon-size: 18px;\n        font-size: 18px;\n        width: 18px;\n        height: 18px;\n      }\n\n      .line {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n        min-width: 0;\n      }\n\n      /* 값이 길면 값이 줄고 표식은 그대로 남는다 — 표식이 먼저 잘리면 읽을 수 없다. */\n      .line > :first-child {\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      }\n\n      /* 표식 — 상태 같은 짧은 값에 두른다. 점이 색을 나르고 글자가 뜻을 나른다. */\n      .pill {\n        display: inline-flex;\n        align-items: center;\n        gap: 5px;\n        padding: 1px 8px;\n        border: 1px solid var(--ui-line, #d5dce0);\n        border-radius: 999px;\n        font-size: var(--ui-t-small, 11.5px);\n        font-weight: 400;\n        color: var(--ui-muted, #57676f);\n        white-space: nowrap;\n      }\n\n      /*\n       * 색만으로 뜻을 전하지 않는다 — 알약 안의 글자가 함께 말한다. 점은 거드는 것이다.\n       *\n       * align-self: center 가 필요하다. 알약은 flex 이고 점은 그 안의 항목인데, 높이를 6px 로\n       * 주어도 교차축에서 늘어나 **6×11.5 짜리 세로 타원**이 됐다(원이 아니라 길쭉했다).\n       * .pill 의 align-items: center 는 부모 쪽 값이라 이 항목의 stretch 를 막지 못한다.\n       */\n      .pill .dot {\n        align-self: center;\n        width: 6px;\n        height: 6px;\n        /*\n         * 이 파일 아래에 span, pre 의 min-height: 1em 이 있다. 값이 빈 칸에서도 줄 높이를\n         * 유지하려는 규칙인데, 점도 span 이라 거기 걸려 **높이가 1em(11.5px)까지 늘어났다** —\n         * 그래서 6px 을 줘도 6×11.5 세로 타원이 됐다. 여기서 되돌린다.\n         */\n        min-height: 0;\n        border-radius: 50%;\n        background: currentColor;\n        flex: none;\n      }\n\n      .pill.good {\n        color: var(--ui-good, #297d39);\n        border-color: color-mix(in srgb, var(--ui-good, #297d39) 40%, transparent);\n        font-weight: 400;\n      }\n\n      .pill.info {\n        color: var(--ui-accent, #00727e);\n        border-color: color-mix(in srgb, var(--ui-accent, #00727e) 40%, transparent);\n        font-weight: 400;\n      }\n\n      .pill.warn {\n        color: var(--ui-warn, #9f5e02);\n        border-color: color-mix(in srgb, var(--ui-warn, #9f5e02) 40%, transparent);\n        font-weight: 400;\n      }\n\n      .pill.crit {\n        color: var(--ui-crit, #c93f30);\n        border-color: color-mix(in srgb, var(--ui-crit, #c93f30) 40%, transparent);\n        font-weight: 400;\n      }\n\n      .pill.quiet {\n        color: var(--ui-faint, #8a959c);\n      }\n\n      :host([gutter]) {\n        padding: var(--grid-gutter-padding);\n        text-align: center;\n      }\n\n      :host([gutter]) * {\n        cursor: default;\n        overflow: hidden;\n      }\n\n      :host([editing]) {\n        border-top: var(--grid-record-editing-border);\n        border-bottom: var(--grid-record-editing-border);\n      }\n\n      /*\n       * 초점이 갔다고 **줄을 나누는 선을 바꾸지 않는다.**\n       *\n       * 전에는 여기서 --grid-record-border-bottom 을 초점 표식 값으로 덮어썼다. 그래서 표식을\n       * 감추려고 그 토큰을 none 이나 투명으로 두면 **그 셀만 줄 선이 사라졌다.** 한 토큰이 「초점\n       * 표식」과 「줄을 나누는 선」 두 가지를 겸하고 있었던 것이다.\n       *\n       * 초점 표식은 outline 이 그린다(data-grid-body-style.ts). 줄 선은 줄 선으로 남는다.\n       */\n\n      :host([dirty])::after {\n        content: '';\n        position: absolute;\n        right: 0;\n        top: 0;\n\n        width: 0px;\n        height: 0px;\n        border-top: 9px solid red;\n        border-left: 9px solid transparent;\n      }\n\n      span,\n      pre {\n        display: block;\n        text-overflow: ellipsis;\n        overflow: hidden;\n        min-height: 1em;\n      }\n\n      :host([multiline]) span,\n      :host([multiline]) pre {\n        text-overflow: initial;\n        overflow: visible;\n        white-space: pre-line;\n        word-break: break-word;\n        overflow-wrap: anywhere;\n      }\n\n      * {\n        margin: 0;\n        text-align: var(--data-grid-field-text-align);\n      }\n\n      *[center] {\n        flex: none;\n        margin: 0 auto;\n      }\n\n      :host > button {\n        display: flex;\n        gap: var(--spacing-small);\n        border: 0;\n        align-items: center;\n        padding: var(--spacing-small);\n\n        color: var(--md-sys-color-on-primary);\n        background-color: var(--md-sys-color-primary);\n        border-radius: var(--data-card-item-btn-border-radius, var(--md-sys-shape-corner-tiny));\n\n        font-size: 0.8rem;\n        line-height: 0.8rem;\n\n        md-icon {\n          border: 0;\n          padding: 0;\n          background-color: unset;\n        }\n      }\n\n      :host([danger]) > button {\n        color: var(--md-sys-color-on-primary);\n        background-color: var(--md-sys-color-error);\n        border-color: var(--md-sys-color-error);\n      }\n\n      :host([danger]) > button:hover {\n        color: var(--md-sys-color-on-secondary);\n        background-color: var(--md-sys-color-secondary);\n        border-color: var(--md-sys-color-secondary);\n      }\n    `\n  ]\n\n  @property({ type: String, attribute: true }) align = DEFAULT_TEXT_ALIGN\n  @property({ type: Object }) record: GristRecord = {}\n  @property({ type: Object }) column: ColumnConfig = ZERO_COLUMN\n  @property({ type: Number }) rowIndex = 0\n  @property({ type: Number }) columnIndex = 0\n  @property({ type: Boolean }) editing = false\n  @property({ type: Boolean, reflect: true }) multiline = false\n  @property({ type: Object }) value = {}\n  @property({ type: String }) valueWith: string | null = null\n  @property({ attribute: false }) emphasized: any = false\n  @property({ type: String, attribute: true }) fixed?: string\n  @property({ type: String }) type?: string\n  @property({ type: Boolean }) isWorking: boolean = false\n\n  /* check in tree의 변화에 대응하기 위함임. 만일, record control 오브젝트로 통일되면 대체될 것임. */\n  @property({ type: String }) checked?: string\n\n  private _editCancelled?: boolean\n  private _onFieldChange: (e: Event) => void = e => {}\n  private _onKeydownInEditingMode: (e: KeyboardEvent) => void = e => {}\n\n  private tooltipController?: TooltipReactiveController = new TooltipReactiveController(this)\n\n  render(): TemplateResult {\n    if (!this.column) {\n      return html``\n    }\n\n    var { value, column, record, rowIndex } = this\n    var { renderer, editor } = column.record\n\n    return html`\n      ${this.editing\n        ? editor?.call(this, value, column, record, rowIndex, this)\n        : renderer?.call(this, value, column, record, rowIndex, this)}\n      <!--\n        **편집 중에도 표식을 남긴다.**\n\n        칸을 누르면 편집 상태가 되고, 그때는 렌더러 대신 편집기가 그려진다. 표식을 !editing 으로\n        묶어 두었더니 **칸에 들어간 순간 사라졌다** — 들어간 사람에게 여는 길이 없어지는 셈이고,\n        다시 더블클릭이나 Enter 를 짐작해야 한다. 그 짐작을 없애려고 만든 표식이다.\n\n        팝업 편집기에만 붙으므로(opensPopup) 글자를 치는 편집기를 가릴 일은 없다.\n      -->\n      <!--\n        ── 칸 안에서 고치는 중에는 표식을 걷는다 ────────────────────────────────\n        입력칸이 이미 그 자리에 있다. 펜을 겹쳐 두면 글자를 가리고, 고치는 중인 사람에게\n        「고칠 수 있다」를 다시 말할 이유도 없다.\n\n        팝업 쪽은 남긴다 — 편집 상태에 들어가도 팝업은 아직 안 열렸고, 그 표식이 여는 길이다.\n      -->\n      ${this.editMark && !(this.editing && this.editMark === 'inline')\n        ? html`<md-icon\n            popup-hint\n            ?inline=${this.editMark === 'inline'}\n            title=${i18next.t('text.grid-open-editor', { defaultValue: 'press to edit' })}\n            @pointerdown=${async (e: Event) => {\n              /*\n               * **click 이 아니라 pointerdown 이다.**\n               *\n               * 이 표에서는 click 이벤트가 나지 않는다 — 몸통이 pointer 단계에서 기본 동작을\n               * 막는다. document 에 capture 로 click 을 걸어 두고 표식을 선택해 봐도 한 번도\n               * 울리지 않았다(2026-09-05 계측).\n               */\n              e.stopPropagation()\n              e.preventDefault()\n\n              /*\n               * ── 포커스는 여기서 변경하지 않는다 ──────────────────────────────\n               *\n               * 팝업이 닫히면 오버레이가 **열릴 때 포커스가 있던 자리**로 돌려준다. 그런데 위에서\n               * preventDefault 를 하므로 브라우저가 이 칸으로 포커스를 옮겨 주지 않고, 그래서\n               * 팝업을 닫으면 엉뚱한 곳으로 간다(페이지 검색창이었다).\n               *\n               * 두 가지를 해 봤고 **둘 다 팝업이 안 열리게 만들었다.**\n               *\n               *   focus-change 이벤트      몸통이 그 갱신에서 editTarget 을 지운다(shouldUpdate)\n               *   ime-buffer 에 직접 focus  같은 결과\n               *\n               * 이 표는 포커스를 ime-buffer 라는 숨은 입력칸에 담아 두고, 편집 상태를 그 갱신\n               * 주기에 얹고 있다. 그 둘이 얽혀 있어서 밖에서 포커스를 옮기면 편집이 취소된다.\n               *\n               * 표의 포커스 모델을 손대야 풀리는 문제라 여기서 우회하지 않는다.\n               * [확인함] 2026-09-05 · 두 방법 모두 팝업이 안 열림\n               */\n\n              this.dispatchEvent(\n                new CustomEvent('start-edit', {\n                  bubbles: true,\n                  composed: true,\n                  detail: { row: this.rowIndex, column: this.columnIndex }\n                })\n              )\n\n              /*\n               * 칸 안에서 고치는 편집기는 여기서 끝난다 — 편집이 열리면 그 자리에 입력칸이 뜬다.\n               * 팝업 편집기는 한 걸음 더 필요하다.\n               */\n              if (this.editMark !== 'popup') {\n                return\n              }\n\n              /*\n               * ── 편집을 열고, **그다음** 더블클릭을 편집기에 보낸다 ──────────────\n               *\n               * 사람이 더블클릭할 때의 순서를 계측해 보면 이렇다.\n               *\n               *   startEditTarget   첫 클릭이 편집을 연다 → 편집기가 그려진다\n               *   dblclick          그다음에 도착해 **이미 있는 편집기**가 받아 팝업을 연다\n               *\n               * 편집기마다 여는 메서드 이름이 달라서 부품이 직접 부를 수는 없다. 사람이 하던\n               * 동작을 같은 순서로 보내면 경로가 하나로 남는다.\n               */\n              for (let i = 0; i < 5 && !this.editing; i++) {\n                await new Promise(resolve => requestAnimationFrame(resolve))\n              }\n\n              await this.updateComplete\n\n              /*\n               * Both events, in the order a browser sends them.\n               *\n               * The editors split on which one they open from, and sending only `dblclick`\n               * reached two of the eight:\n               *\n               *   _onclick     json5 · code · resource-code · privilege · json · resource-id\n               *   _ondblclick  resource-object · resource-object-legacy\n               *\n               * Those last two define `_onclick` as a no-op, so nothing opens twice.\n               * [확인함] 2026-09-07 · 사용자 보고 — 코드 편집기가 아이콘으로 안 열렸다\n               */\n              const editor = this.renderRoot.firstElementChild as HTMLElement | null\n              editor?.dispatchEvent(new MouseEvent('click', { bubbles: true, composed: true }))\n              editor?.dispatchEvent(new MouseEvent('dblclick', { bubbles: true, composed: true }))\n            }}\n            >${this.editMark === 'popup' ? 'edit_square' : 'edit'}</md-icon\n          >`\n        : ''}\n    `\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('editing')) {\n      if (this.editing) {\n        this._onKeydownInEditingMode = ((e: KeyboardEvent) => {\n          if (e.key === 'Esc' || e.key === 'Escape') {\n            /* 편집 취소 */\n            this._editCancelled = true\n          }\n        }).bind(this)\n\n        this._onFieldChange = ((e: Event) => {\n          this._editCancelled && e.stopPropagation()\n        }).bind(this)\n\n        delete this._editCancelled\n        this.addEventListener('field-change', this._onFieldChange)\n        this.addEventListener('keydown', this._onKeydownInEditingMode)\n      } else {\n        this.removeEventListener('field-change', this._onFieldChange)\n        this.removeEventListener('keydown', this._onKeydownInEditingMode)\n      }\n    }\n\n    if (changes.has('column')) {\n      /*\n       * 정렬은 **넣을 때만이 아니라 되돌릴 때도** 손대야 한다.\n       *\n       * 이 요소는 재사용된다. 전에는 기본값이 아닐 때만 인라인 값을 넣고 지우지 않았다. 그래서 한 번\n       * 오른쪽 정렬 칸을 그린 셀이 다음에 왼쪽 정렬 칸을 그려도 오른쪽에 남았다.\n       *\n       * [확인함] 품질 화면 「판단」 칸에서 머리글은 x=380(왼쪽)인데 값은 x=452(flex-end)였다. 숫자 칸을\n       * 오른쪽으로 바꾼 뒤 드러났다 — 오른쪽 정렬 칸이 드물던 동안은 눈에 안 띄었다. 2026-09-02\n       */\n      var align = this.column.record.align || DEFAULT_TEXT_ALIGN\n\n      if (align == DEFAULT_TEXT_ALIGN) {\n        this.style.removeProperty('--data-grid-field-justify-content')\n        this.style.removeProperty('--data-grid-field-text-align')\n      } else {\n        let justify = 'center'\n        switch (align) {\n          case 'right':\n            justify = 'flex-end'\n            break\n        }\n        this.style.setProperty('--data-grid-field-justify-content', justify)\n        this.style.setProperty('--data-grid-field-text-align', align)\n      }\n\n      /* 표식은 값의 반대쪽 빈자리에 선다 — 위 :host([mark-start]) 주석 참고. */\n      this.toggleAttribute('mark-start', align === 'right')\n\n      const { danger } = this.column\n      if (danger) {\n        this.setAttribute('danger', '')\n      } else {\n        this.removeAttribute('danger')\n      }\n    }\n\n    if (changes.has('fixed')) {\n      if (this.fixed) {\n        this.style.left = this.fixed + 'px'\n      } else {\n        this.style.left = 'unset'\n      }\n    }\n\n    let disabled = this.column.record.disabled || false\n    if (typeof disabled === 'function') {\n      disabled = disabled.call(this, this.record[this.column.name], this.column, this.record, this.rowIndex, this)\n    }\n\n    if (!!disabled) {\n      // 비황성화 여부 표시\n      this.setAttribute('disabled', '')\n    } else {\n      // 비황성화 여부 제거\n      this.removeAttribute('disabled')\n    }\n\n    const emphasized =\n      /*\n       * classifier 는 없을 수 있다. 열 빌더가 채워 주지만 손으로 만든 열에는 없고, 그때 여기서\n       * 던진다. 갱신 중에 나는 예외라 화면이 오류보고없이 멈춘다.\n       *\n       * [확인함] 2026-09-05 · wtr 에서 Cannot read properties of undefined (reading 'call')\n       *          팝업 표식을 넣어 칸이 전보다 자주 갱신되면서 드러났다. 원래 있던 자리다.\n       */\n      this.column.record.classifier?.call(this, this.record, this.rowIndex)?.emphasized || this.emphasized\n\n    if (!!emphasized) {\n      this.setAttribute('emphasized-row', '')\n\n      if (Symbol.iterator in Object(emphasized)) {\n        const [backgroundColor, foregroundColor] = emphasized as string[]\n        backgroundColor && this.style.setProperty('--grid-record-emphasized-background-color', backgroundColor)\n        foregroundColor && this.style.setProperty('--grid-record-emphasized-color', foregroundColor)\n      }\n    } else {\n      this.removeAttribute('emphasized-row')\n    }\n  }\n\n  /**\n   * 이 칸에 **팝업 표식**을 붙이나 — 팝업으로 고쳐지고, 지금 고칠 수 있을 때만.\n   *\n   * 고칠 수 있는지는 열이 함수로 정할 수도 있다(줄마다 다른 경우). 그때는 몸통이 편집을 열 때\n   * 하는 것과 같은 방식으로 물어본다. 표식은 있는데 선택해도 안 열리면 그것이 더 나쁘다.\n   */\n  get opensPopup(): boolean {\n    return this.editMark === 'popup'\n  }\n\n  /**\n   * 이 칸을 **고칠 수 있나, 그리고 어디서 고치나.**\n   *\n   *   popup    팝업이 열린다 — 네모와 펜\n   *   inline   칸 안에서 고친다 — 펜\n   *   null     못 고친다 — 표식 없음\n   *\n   * 표식이 있으면 고칠 수 있는 칸이고, 모양이 어디서 고치는지를 말한다.\n   *\n   * 고칠 수 있는지는 열이 함수로 정할 수도 있다(줄마다 다른 경우). 그때는 몸통이 편집을 열 때\n   * 하는 것과 같은 방식으로 물어본다. 표식은 있는데 선택해도 안 열리면 그것이 더 나쁘다.\n   */\n  get editMark(): 'popup' | 'inline' | null {\n    const column = this.column\n\n    if (!column) {\n      return null\n    }\n\n    /* 거터에는 붙이지 않는다 — 순번과 고르기 칸은 고치는 자리가 아니다. */\n    if (column.type === 'gutter') {\n      return null\n    }\n\n    /*\n     * 표 오른쪽의 **빈 채움 열**에도 붙이지 않는다. 남는 자리를 메우는 20px 짜리 빈 열이라\n     * 이름도 타입도 없다 — 고칠 것이 없는데 표식만 떴다.\n     *\n     * [확인함] 2026-09-05 · 인원 화면 맨 끝 칸 · { type: '', name: '', label: false } · 폭 20\n     */\n    if (!column.name) {\n      return null\n    }\n\n    let { editable } = column.record || ({} as any)\n\n    if (typeof editable === 'function') {\n      editable = editable.call(this, this.value, column, this.record, this.rowIndex, this)\n    }\n\n    /*\n     * **밝히지 않은 열에는 붙이지 않는다.**\n     *\n     * 표 전체가 고칠 수 있는지를 판단하는 자리가 같은 기준을 쓴다.\n     *\n     *   [읽었음] data-grid.ts · editableGrid = columns.some(c => !!c.record?.editable)\n     *\n     * 참일 때만 고칠 수 있는 열로 본다. 선언하지 않은 열까지 세면 **고르기만 하는 표**에도\n     * 표식이 깔린다 — 참조 팝업의 목록이 그랬다(2026-09-05). 그 표의 칸은 고르는 자리이지\n     * 고치는 자리가 아니다.\n     */\n    if (!editable) {\n      return null\n    }\n\n    /*\n     * 편집기를 **함수로 직접 준 열**은 타입으로 판단할 수 없다. 그리기를 다른 렌더러로 하려고\n     * 타입을 바꾼 열이 그렇다 — 관계를 여럿 다는 칸이 `ops-list` 로 그려지면서 편집은 참조\n     * 팝업으로 한다(ops-master 의 reference-list).\n     *\n     * 그런 열은 `record.opensPopup` 으로 스스로 밝힌다. 밝히지 않으면 타입으로 본다.\n     *\n     *   [확인함] 2026-09-05 · 보유 자격 · 타입 ops-list · 팝업으로 열리는데 표식이 inline 이었다\n     */\n    const declared = (column.record as any)?.opensPopup\n\n    if (typeof declared === 'boolean') {\n      return declared ? 'popup' : 'inline'\n    }\n\n    return editorOpensPopup(column.type) ? 'popup' : 'inline'\n  }\n\n  get editableOnClick() {\n    const renderer = this.renderRoot.firstElementChild as HTMLElement\n    //@ts-ignore\n    return renderer && 'editableOnClick' in renderer ? renderer.editableOnClick : true\n  }\n}\n"]}

package/dist/src/data-grid/data-grid.d.ts

@@ -1,10 +1,12 @@
-import '../empty-note.js';
+import '@material/web/button/text-button.js';
+import '@operato/list-state/ox-empty-note.js';
 import './data-grid-header.js';
 import './data-grid-body.js';
 import './data-grid-footer.js';
 import { LitElement, PropertyValues } from 'lit';
 import { DataManipulator } from '../data-manipulator.js';
 import { ColumnConfig, GristRecord } from '../types.js';
+import { GridEmptyNote } from '../empty-note-render.js';
 import { DataGridHeader } from './data-grid-header.js';
 /**
  * DataGrid
@@ -17,11 +19,7 @@ export declare class DataGrid extends DataManipulator {
     };
     empty?: boolean;
     /** 비었을 때 무슨 말을 하나 — 판단은 data-grist 가 하고 여기서는 그리기만 한다. */
-    emptyNote?: {
-        icon?: string;
-        title: string;
-        description?: string;
-    };
+    emptyNote?: GridEmptyNote;
     /**
      * 이 표에 고칠 수 있는 열이 하나라도 있는지. **겉모습이 이것으로 달라진다.**
      *

package/dist/src/data-grid/data-grid.js

@@ -1,14 +1,16 @@
 import { __decorate } from "tslib";
-import '../empty-note.js';
+import '@material/web/button/text-button.js';
+import '@operato/list-state/ox-empty-note.js';
 import './data-grid-header.js';
 import './data-grid-body.js';
 import './data-grid-footer.js';
-import { css, html, nothing } from 'lit';
+import { css, html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
 import { ScrollbarStyles } from '@operato/styles';
 import { DataManipulator } from '../data-manipulator.js';
+import { renderEmptyNote } from '../empty-note-render.js';
 /**
  * DataGrid
  */
@@ -157,7 +159,7 @@ let DataGrid = class DataGrid extends DataManipulator {
         this.style.setProperty('--grid-template-print-columns', widths.replace(/px/gi, 'fr'));
     }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _b;
         var { pagination = {}, columns = [], filters } = this.config;
         var paginatable = !pagination.infinite;
         var data = this.data;
@@ -218,13 +220,7 @@ let DataGrid = class DataGrid extends DataManipulator {
         .fixedLefts=${this.fixedLefts}
         .ariaRowIndexBase=${headerRows + (page - 1) * limit + 1}
       >
-        ${this.empty
-            ? html `<ox-empty-note
-              icon=${(_d = (_c = this.emptyNote) === null || _c === void 0 ? void 0 : _c.icon) !== null && _d !== void 0 ? _d : nothing}
-              title=${(_f = (_e = this.emptyNote) === null || _e === void 0 ? void 0 : _e.title) !== null && _f !== void 0 ? _f : ''}
-              description=${(_h = (_g = this.emptyNote) === null || _g === void 0 ? void 0 : _g.description) !== null && _h !== void 0 ? _h : nothing}
-            ></ox-empty-note>`
-            : html ``}
+        ${this.empty ? renderEmptyNote(this.emptyNote) : html ``}
       </ox-grid-body>
       </div>
 

package/dist/src/data-grid/data-grid.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-grid.js","sourceRoot":"","sources":["../../../src/data-grid/data-grid.ts"],"names":[],"mappings":"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","sourcesContent":["import i18next from 'i18next'\nimport '../empty-note.js'\nimport './data-grid-header.js'\nimport './data-grid-body.js'\nimport './data-grid-footer.js'\n\nimport { css, html, LitElement, PropertyValues, nothing} from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { DataManipulator } from '../data-manipulator.js'\nimport { ColumnConfig, GristRecord, PaginationConfig } from '../types.js'\n// import { supportsPassive } from '../utils/index.js'\nimport { DataGridHeader } from './data-grid-header.js'\n\n/**\n * DataGrid\n */\n@customElement('ox-grid')\nexport class DataGrid extends DataManipulator {\n  static styles = [\n    MDTypeScaleStyles,\n    ScrollbarStyles,\n    css`\n      /*\n       * ── 고치는 표만 셀을 겨눈다 ─────────────────────────────────────────\n       *\n       * 셀 하나를 가리키는 점선과 열 폭 조절 손잡이는 **고칠 셀을 겨누는 장치**다. 기본 겉모습에서는\n       * 둘을 두지 않는다(data-grist.ts 와 같은 값). 고칠 수 있는 열이 하나라도 있으면 여기서 되살린다.\n       *\n       * 화면이 고르는 모드가 아니다 — 표가 스스로 아는 사실이다(위 editableGrid 주석 참조).\n       */\n      :host([editable-grid]) {\n        --grid-record-focused-cell-border: 1px dashed var(--ui-faint, #8a959c);\n        /*\n         * 정렬 표식의 자리는 이 값에서 **파생된다** — 손잡이가 보이면 표식이 칸 오른쪽 끝으로 가고,\n         * 안 보이면 이름에 붙는다(data-grid-header.ts 의 스타일 질의). 여기서 따로 정하지 않는다.\n         */\n        --grid-header-splitter-display: flex;\n        /*\n         * ── 지나는 줄 표시를 **비우지 않는다** ──────────────────────────────\n         *\n         * 여기 hover 색을 transparent 로 두었었다. 「점선 셀 테두리가 이미 「지금 여기」를 말하므로\n         * 줄 배경까지 움직일 필요가 없다」는 뜻이었는데, **그 값은 「칠하지 않는다」가 아니라\n         * 「칸의 색을 지운다」였다.**\n         *\n         * 칸은 자기 바탕을 갖는다(흰색). 그것을 지우면 그 자리에 **구멍이 뚫려 표 뒤의 페이지가\n         * 비친다.** 이 앱에서 그 색이 회색이라(rgb 240·242·244) 회색 띠처럼 보였고, 그래서\n         * 「지나는 줄 표시」가 실제로는 있었다 — 아무도 정하지 않은 색으로.\n         *\n         * 그리고 **고정 열에서 그 띠가 끊긴다.** 고정 열은 스크롤되는 열 위에 떠 있어야 하니\n         * 불투명해야 하고, 그래서 구멍이 안 뚫린다. 줄 하나가 두 색으로 갈렸다.\n         *\n         * 표 뒤에 무엇이 있느냐로 줄 색이 정해지는 것 자체가 결함이다. 어두운 페이지에 이 표를\n         * 놓으면 마우스를 올린 줄이 검게 된다.\n         *\n         * 그래서 이 예외를 걷는다. 모든 표가 같은 hover 색을 쓰고, 그 색은 칸마다 실제로 칠하는\n         * 색이므로 고정 열에도 똑같이 걸린다.\n         */\n      }\n\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        /* div[setting] 의 절대 좌표 기준. */\n        position: relative;\n        overflow: hidden;\n\n        border-width: var(--grid-container-border-width);\n      }\n\n      /*\n       * Grid wrapper (role=grid) — generates no box, so header and body stay flex items of the\n       * host.\n       */\n      div[grid] {\n        display: contents;\n      }\n\n      ox-grid-body {\n        flex: 1;\n        position: relative;\n\n        font-variation-settings: 'FILL' 1;\n      }\n\n      ox-grid-header {\n        font-variation-settings: 'FILL' 1;\n      }\n\n      ox-grid-footer {\n        font-variation-settings: 'FILL' 1;\n      }\n\n      ox-empty-note {\n        display: block;\n        position: absolute;\n        left: 50%;\n        top: 50%;\n        transform: translate(-50%, -50%);\n      }\n\n      /*\n       * 컬럼 설정 버튼은 **헤더에 마우스를 올릴 때만** 보인다.\n       *\n       * 늘 보이면 목록 화면마다 오른쪽 위에 눈에 걸리는 것이 하나 생긴다. 자주 쓰는 것도 아니다.\n       *\n       * 감춰 있는 동안에는 pointer-events 도 끈다 — 안 보이는데 눌리는 자리가 있으면, 헤더의 마지막\n       * 컬럼을 누르려던 사람이 엉뚱한 팝업을 만난다.\n       *\n       * 세 갈래로 켠다.\n       *   헤더에 올렸을 때        :has(ox-grid-header:hover)\n       *   버튼 자체에 올렸을 때   버튼이 헤더 위에 떠 있으므로, 커서가 버튼으로 옮겨오면 헤더는 더 이상\n       *                          hover 가 아니다. 이 갈래가 없으면 커서 아래에서 사라진다\n       *   키보드 초점            focus-within\n       */\n      div[setting] {\n        /*\n         * 크기 없이 호스트의 오른쪽 위에 붙는다. 안에 들어오는 버튼이 [slot='setting'] 규칙으로\n         * top: -3px · right: 0 을 스스로 잡으므로, 이 div 는 기준점 노릇만 한다.\n         */\n        position: absolute;\n        top: 0;\n        right: 0;\n        width: 0;\n        height: 0;\n        z-index: 5;\n        opacity: 0;\n        pointer-events: none;\n        transition: opacity 0.12s ease-out;\n      }\n\n      /*\n       * 버튼 자체에 올렸을 때도 켜 둔다. 버튼이 헤더 위에 떠 있어서, 커서가 버튼으로 옮겨오면 헤더는\n       * 더 이상 hover 가 아니다. 이 갈래가 없으면 커서 아래에서 사라진다.\n       */\n      div[grid]:has(ox-grid-header:hover) + div[setting],\n      div[setting]:hover,\n      div[setting]:focus-within {\n        opacity: 1;\n        pointer-events: auto;\n      }\n\n      /*\n       * 손가락으로 쓰는 장치 — hover 가 없으므로 감추면 닿을 방법이 없다. 늘 두고 평소에는 흐리게,\n       * 누르는 동안 선명하게 한다.\n       *\n       * 화면 폭이 아니라 입력 장치로 구분한다. 창을 좁힌 데스크톱은 여기에 걸리지 않고, 큰 태블릿은\n       * 폭이 넓어도 걸린다.\n       */\n      @media (pointer: coarse) {\n        div[setting] {\n          opacity: 0.35;\n          pointer-events: auto;\n        }\n\n        div[setting]:active,\n        div[setting]:focus-within {\n          opacity: 1;\n        }\n      }\n\n      @media print {\n        :host {\n          zoom: 80%;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Object }) focused?: { row: number; column: number }\n  @property({ type: Boolean }) empty?: boolean\n\n  /** 비었을 때 무슨 말을 하나 — 판단은 data-grist 가 하고 여기서는 그리기만 한다. */\n  @property({ type: Object }) emptyNote?: { icon?: string; title: string; description?: string }\n\n\n\n  /**\n   * 이 표에 고칠 수 있는 열이 하나라도 있는지. **겉모습이 이것으로 달라진다.**\n   *\n   * 셀 하나를 가리키는 점선과 열 폭 조절 손잡이는 **고칠 셀을 겨누는 장치**다. 고치지 않는 목록에서는\n   * 셀 하나가 뜻을 갖지 않아, 줄을 고르려고 누른 자리에 점선이 남고 세로 선이 줄 읽기를 방해한다.\n   *\n   * 그래서 모드를 따로 두지 않는다. 화면이 고를 일이 아니라 **표가 스스로 아는 사실**이다 —\n   * 열에 `record.editable` 이 있으면 고치는 표다.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'editable-grid' }) editableGrid: boolean = false\n\n  @query('ox-grid-body', true) body!: LitElement\n  @query('ox-grid-header', true) header!: DataGridHeader\n  @query('ox-grid-footer', true) footer!: LitElement\n\n  @state() fixedLefts: number[] = []\n\n  firstUpdated() {\n    /* header and body scroll synchronization */\n    this.header.addEventListener('scroll', e => {\n      if (this.body.scrollLeft !== this.header.scrollLeft) {\n        this.body.scrollLeft = this.header.scrollLeft\n      }\n    })\n\n    this.body.addEventListener('scroll', e => {\n      if (this.body.scrollLeft !== this.header.scrollLeft) {\n        this.header.scrollLeft = this.body.scrollLeft\n      }\n    })\n\n    this.header.addEventListener('wheel', this.onWheelEvent.bind(this))\n    this.footer && this.footer.addEventListener('wheel', this.onWheelEvent.bind(this))\n\n    /* record selection processing */\n    this.addEventListener('select-all-change', e => {\n      if (this.data.records.length == 0) {\n        return\n      }\n\n      var { selected } = (e as CustomEvent).detail\n      var { records } = this.data\n\n      records.forEach(record => (record['__selected__'] = selected))\n\n      this.header.requestUpdate()\n      this.body.requestUpdate()\n    })\n\n    this.addEventListener('focus-change', e => {\n      const { row, column } = (e as CustomEvent).detail || {}\n      if (!this.focused || this.focused.row != row || this.focused.column != column) {\n        this.focused = { row, column }\n        this.focus()\n        this.requestUpdate()\n      }\n    })\n  }\n\n  onWheelEvent(e: WheelEvent) {\n    if (this.body.scrollWidth > this.body.clientWidth) {\n      var delta = Math.max(-1, Math.min(1, e.deltaY || 0))\n      this.body.scrollLeft = Math.max(0, this.body.scrollLeft - delta * 30)\n\n      var maxScrollLeft = this.body.scrollWidth - this.body.clientWidth\n\n      var atStart = this.body.scrollLeft === 0\n      var atEnd = this.body.scrollLeft === maxScrollLeft\n\n      // 스크롤이 맨 앞으로 와 있는 상태에서 휠을 올리는 경우 또는\n      // 스크롤이 맨 끝으로 가 있는 상태에서 휠을 내리는 경우에만 디폴트 동작 허용\n      if ((atStart && delta > 0) || (atEnd && delta < 0)) {\n        return true\n      }\n\n      e.preventDefault()\n    }\n  }\n\n  onSelectRecordChanged({\n    selectedRecords,\n    added,\n    removed\n  }: {\n    selectedRecords: GristRecord[]\n    added: GristRecord[]\n    removed: GristRecord[]\n  }): void {\n    super.onSelectRecordChanged({ selectedRecords, added, removed })\n\n    this.header.requestUpdate()\n    this.body.requestUpdate()\n  }\n\n  onRecordChanged(\n    recordData: GristRecord,\n    row: number,\n    column: ColumnConfig | null /* TODO column should be removed */\n  ) {\n    /* record-viewer 등 grid 외에서 변경되는 경우에도 header와 body를 refresh 하도록 한다. */\n    super.onRecordChanged(recordData, row, column)\n\n    this.header.requestUpdate()\n    this.body.requestUpdate()\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('data')) {\n      /*\n       * 데이타 내용에 따라 동적으로 컬럼의 폭이 달라지는 경우(예를 들면, sequence field)가 있으므로,\n       * data의 변동에 대해서도 다시 계산되어야 한다.\n       */\n      this.calculateWidths(this.config.columns)\n\n      if (this.focused && 'row' in this.focused) {\n        var { row = 0, column = 0 } = this.focused\n        var { records: oldrecords = [] } = changes.get('data') || {}\n        var { records: newrecords } = this.data\n\n        var oldrecord = oldrecords[row]\n\n        if (oldrecord && oldrecord !== newrecords[row]) {\n          var newrecord = newrecords.find(\n            record =>\n              /* TODO keyfields를 정의하고, keyfields의 동일성으로 확정해야 한다. */\n              oldrecord === record ||\n              ('id' in oldrecord\n                ? record.id == oldrecord.id\n                : 'name' in oldrecord\n                  ? record.name == oldrecord.name\n                  : false)\n          )\n\n          this.focused = {\n            row: newrecord ? newrecords.indexOf(newrecord) : row,\n            column\n          }\n        }\n      }\n    } else if (changes.has('config')) {\n      this.calculateWidths(this.config.columns)\n    }\n\n    /* grid fetch 후에 grid로 focus를 주어야 하는 지 검토가 필요하다. */\n    // this.focus()\n  }\n\n  calculateWidths(columns: ColumnConfig[]) {\n    /*\n     * 컬럼 모델 마지막에 'auto' cell을 추가하여, 자투리 영역을 꽉 채워서 표시한다.\n     *\n     * 숫자로 준 폭은 **그 폭 그대로** 쓴다. 합이 보이는 폭보다 크면 표는 가로로 넘치고, 나머지는\n     * 가로 스크롤로 본다 — 표의 정상 거동이다.\n     *\n     * 한때 minmax(0, Npx) 로 두어 넘칠 때 열들이 함께 줄게 했다가 되돌렸다. 그렇게 하면 어떤 표도\n     * 가로로 넘치지 않으므로 **가로 스크롤이 아예 사라진다.** 열 열다섯 개를 700px 에 밀어 넣으면\n     * 모든 열이 못 읽을 만큼 좁아지고, 화면은 그것을 알릴 방법이 없다.\n     *\n     * 열이 좁아 잘리는 것은 화면이 열 폭을 정해서 풀 일이다 — 부품이 대신 줄이면 화면의 뜻이 사라진다.\n     */\n    const widths = columns\n      .filter(column => !column.hidden)\n      .map(column => {\n        switch (typeof column.width) {\n          case 'number':\n            return `${column.width}px`\n          case 'string':\n            return column.width\n          case 'function':\n            return column.width.call(this, column)\n          default:\n            return 'auto'\n        }\n      })\n      .concat(['auto'])\n      .join(' ')\n\n    /* 겉모습이 이 사실로 달라진다(위 editableGrid 주석 참조). 열이 정해지는 이 시점이 그 자리다. */\n    this.editableGrid = columns.some(column => !column.hidden && !column.gutterName && !!column.record?.editable)\n\n    this.style.setProperty('--grid-template-columns', widths)\n    /* 인쇄는 종이 폭에 맞춰 비율로 나눈다. `220px` → `220fr` 로 바뀐다. */\n    this.style.setProperty('--grid-template-print-columns', widths.replace(/px/gi, 'fr'))\n  }\n\n  /**\n   * The grid's name, set by the caller as `<ox-grid aria-label=\"Inbound queue\">`.\n   *\n   * role=grid sits on the inner wrapper, and an aria-label on the host does not reach it, so the\n   * value is taken and forwarded. No name is invented here: with several grids on one screen, which\n   * one this is belongs to the screen, not to the component.\n   */\n  @property({ type: String, attribute: 'aria-label' }) gridLabel?: string\n\n  render() {\n    var { pagination = {} as PaginationConfig, columns = [], filters } = this.config\n\n    var paginatable = !pagination.infinite\n    var data = this.data\n\n    /*\n     * Declare the grid a grid.\n     *\n     * This component carried no roles at all — one aria- attribute in the entire source, on the\n     * page number. To a screen reader the screen was a pile of inputs. Naming each cell by hand\n     * still would not say \"this is a table\", \"row 3, column 3\", or \"40 rows in all\", and scanning\n     * and comparing is the whole point of a table; without roles that navigation does not exist.\n     *\n     * With role=grid the column header becomes the cell's name without anything being written on\n     * the cell. That is how an HTML table works, and why the pattern is specified that way.\n     *\n     * The extra wrapper is needed because a grid may only contain rows (or row groups). This\n     * element also holds the settings-button slot and the pager, so putting the role on the host\n     * mixes non-rows into the table and assistive tech drops out of table reading. Wrapping just\n     * the header and body keeps them out. display: contents generates no box, so the host's column\n     * flex layout is unchanged.\n     */\n    const headerRows = columns.some(column => !column.hidden && column.header?.group) ? 2 : 1\n    const visibleColumns = columns.filter(column => !column.hidden).length\n    const total = typeof data.total == 'number' && data.total > 0 ? data.total : data.records?.length || 0\n    const page = Number(data.page) > 0 ? Number(data.page) : 1\n    const limit = Number(data.limit) > 0 ? Number(data.limit) : data.records?.length || 0\n\n    return html`\n      <div\n        grid\n        role=\"grid\"\n        aria-label=${ifDefined(this.gridLabel)}\n        aria-rowcount=${headerRows + total}\n        aria-colcount=${visibleColumns}\n      >\n      <ox-grid-header\n        role=\"rowgroup\"\n        class=\"md-typescale-label-medium-prominent\"\n        .columns=${columns}\n        .sorters=${this.sorters}\n        .filters=${this.filters}\n        .data=${data}\n        ?filtering-feature=${filters?.header}\n        @column-width-change=${(e: CustomEvent) => {\n          let { idx, width } = e.detail\n          columns[idx].width = width\n          this.calculateWidths(columns)\n        }}\n        @fixed-lefts-change=${(e: CustomEvent) => (this.fixedLefts = e.detail)}\n      >\n      </ox-grid-header>\n\n      <ox-grid-body\n        role=\"rowgroup\"\n        class=\"md-typescale-body-medium\"\n        .config=${this.config}\n        .columns=${columns}\n        .data=${data}\n        .focused=${this.focused!}\n        .fixedLefts=${this.fixedLefts}\n        .ariaRowIndexBase=${headerRows + (page - 1) * limit + 1}\n      >\n        ${this.empty\n          ? html`<ox-empty-note\n              icon=${this.emptyNote?.icon ?? nothing}\n              title=${this.emptyNote?.title ?? ''}\n              description=${this.emptyNote?.description ?? nothing}\n            ></ox-empty-note>`\n          : html``}\n      </ox-grid-body>\n      </div>\n\n      <!--\n        Placed after the grid. \"Only while hovering the header\" needs a sibling selector, and a\n        sibling selector can only reach forward.\n\n        :host(:has(ox-grid-header:hover)) does not work — the argument of :host() is evaluated in\n        the outer tree, so it never sees ox-grid-header inside the shadow tree. That was tried and\n        did not react to hover. The :has() on the grid wrapper is evaluated inside the shadow tree,\n        so it does.\n\n        The settings button operates on the grid rather than being part of it, so it stays outside\n        role=grid: a grid may only contain rows, and anything else makes assistive tech drop out of\n        table reading.\n\n        Reordering does not move it on screen — the style below pins it to the host's top right.\n      -->\n      <div setting>\n        <slot name=\"setting\"></slot>\n      </div>\n\n      ${paginatable\n        ? html`\n            <!--\n              푸터에는 본문 타이프스케일을 씌우지 않는다.\n\n              그 클래스는 font 축약형으로 0.875rem 를 넣는데, **바깥 트리의 규칙이라 푸터의\n              :host { font-size } 를 이긴다**(그림자 캐스케이드에서 호스트 요소는 바깥 트리 규칙이\n              우선한다). 그래서 푸터가 자기 크기를 못 정하고 본문과 같은 14px 로 남아 있었다.\n              [확인함] 리터럴 :host { font-size: 7px } 도 안 먹었다. 2026-09-02\n\n              푸터는 본문이 아니다. 크기는 --grid-footer-font-size 가 정한다.\n            -->\n            <ox-grid-footer\n              .data=${data}\n              .pagination=${this.pagination}\n            ></ox-grid-footer>\n          `\n        : html``}\n    `\n  }\n\n  focus() {\n    super.focus()\n\n    this.body.focus()\n  }\n\n  get pullToRefreshTarget() {\n    return this.body\n  }\n}\n"]}
+{"version":3,"file":"data-grid.js","sourceRoot":"","sources":["../../../src/data-grid/data-grid.ts"],"names":[],"mappings":";AACA,OAAO,qCAAqC,CAAA;AAC5C,OAAO,sCAAsC,CAAA;AAC7C,OAAO,uBAAuB,CAAA;AAC9B,OAAO,qBAAqB,CAAA;AAC5B,OAAO,uBAAuB,CAAA;AAE9B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAsC,MAAM,KAAK,CAAA;AACnE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACzE,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AACxD,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,iDAAiD,CAAA;AAE7F,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAEjD,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAA;AAExD,OAAO,EAAiB,eAAe,EAAE,MAAM,yBAAyB,CAAA;AAIxE;;GAEG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,eAAe;IAAtC;;QAgKL;;;;;;;;WAQG;QACqE,iBAAY,GAAY,KAAK,CAAA;QAM5F,eAAU,GAAa,EAAE,CAAA;IAwSpC,CAAC;IAtSC,YAAY;QACV,4CAA4C;QAC5C,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE;YACzC,IAAI,IAAI,CAAC,IAAI,CAAC,UAAU,KAAK,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,CAAC;gBACpD,IAAI,CAAC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,MAAM,CAAC,UAAU,CAAA;YAC/C,CAAC;QACH,CAAC,CAAC,CAAA;QAEF,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE;YACvC,IAAI,IAAI,CAAC,IAAI,CAAC,UAAU,KAAK,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,CAAC;gBACpD,IAAI,CAAC,MAAM,CAAC,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAA;YAC/C,CAAC;QACH,CAAC,CAAC,CAAA;QAEF,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;QACnE,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;QAElF,iCAAiC;QACjC,IAAI,CAAC,gBAAgB,CAAC,mBAAmB,EAAE,CAAC,CAAC,EAAE;YAC7C,IAAI,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,IAAI,CAAC,EAAE,CAAC;gBAClC,OAAM;YACR,CAAC;YAED,IAAI,EAAE,QAAQ,EAAE,GAAI,CAAiB,CAAC,MAAM,CAAA;YAC5C,IAAI,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC,IAAI,CAAA;YAE3B,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAA;YAE9D,IAAI,CAAC,MAAM,CAAC,aAAa,EAAE,CAAA;YAC3B,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAA;QAC3B,CAAC,CAAC,CAAA;QAEF,IAAI,CAAC,gBAAgB,CAAC,cAAc,EAAE,CAAC,CAAC,EAAE;YACxC,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAI,CAAiB,CAAC,MAAM,IAAI,EAAE,CAAA;YACvD,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,GAAG,IAAI,GAAG,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,IAAI,MAAM,EAAE,CAAC;gBAC9E,IAAI,CAAC,OAAO,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,CAAA;gBAC9B,IAAI,CAAC,KAAK,EAAE,CAAA;gBACZ,IAAI,CAAC,aAAa,EAAE,CAAA;YACtB,CAAC;QACH,CAAC,CAAC,CAAA;IACJ,CAAC;IAED,YAAY,CAAC,CAAa;QACxB,IAAI,IAAI,CAAC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;YAClD,IAAI,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC,CAAA;YACpD,IAAI,CAAC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,UAAU,GAAG,KAAK,GAAG,EAAE,CAAC,CAAA;YAErE,IAAI,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,CAAA;YAEjE,IAAI,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,KAAK,CAAC,CAAA;YACxC,IAAI,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,KAAK,aAAa,CAAA;YAElD,oCAAoC;YACpC,6CAA6C;YAC7C,IAAI,CAAC,OAAO,IAAI,KAAK,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,KAAK,GAAG,CAAC,CAAC,EAAE,CAAC;gBACnD,OAAO,IAAI,CAAA;YACb,CAAC;YAED,CAAC,CAAC,cAAc,EAAE,CAAA;QACpB,CAAC;IACH,CAAC;IAED,qBAAqB,CAAC,EACpB,eAAe,EACf,KAAK,EACL,OAAO,EAKR;QACC,KAAK,CAAC,qBAAqB,CAAC,EAAE,eAAe,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,CAAA;QAEhE,IAAI,CAAC,MAAM,CAAC,aAAa,EAAE,CAAA;QAC3B,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAA;IAC3B,CAAC;IAED,eAAe,CACb,UAAuB,EACvB,GAAW,EACX,MAA2B,CAAC,mCAAmC;QAE/D,sEAAsE;QACtE,KAAK,CAAC,eAAe,CAAC,UAAU,EAAE,GAAG,EAAE,MAAM,CAAC,CAAA;QAE9C,IAAI,CAAC,MAAM,CAAC,aAAa,EAAE,CAAA;QAC3B,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAA;IAC3B,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC;YACxB;;;eAGG;YACH,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;YAEzC,IAAI,IAAI,CAAC,OAAO,IAAI,KAAK,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;gBAC1C,IAAI,EAAE,GAAG,GAAG,CAAC,EAAE,MAAM,GAAG,CAAC,EAAE,GAAG,IAAI,CAAC,OAAO,CAAA;gBAC1C,IAAI,EAAE,OAAO,EAAE,UAAU,GAAG,EAAE,EAAE,GAAG,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE,CAAA;gBAC5D,IAAI,EAAE,OAAO,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC,IAAI,CAAA;gBAEvC,IAAI,SAAS,GAAG,UAAU,CAAC,GAAG,CAAC,CAAA;gBAE/B,IAAI,SAAS,IAAI,SAAS,KAAK,UAAU,CAAC,GAAG,CAAC,EAAE,CAAC;oBAC/C,IAAI,SAAS,GAAG,UAAU,CAAC,IAAI,CAC7B,MAAM,CAAC,EAAE;oBACP,qDAAqD;oBACrD,SAAS,KAAK,MAAM;wBACpB,CAAC,IAAI,IAAI,SAAS;4BAChB,CAAC,CAAC,MAAM,CAAC,EAAE,IAAI,SAAS,CAAC,EAAE;4BAC3B,CAAC,CAAC,MAAM,IAAI,SAAS;gCACnB,CAAC,CAAC,MAAM,CAAC,IAAI,IAAI,SAAS,CAAC,IAAI;gCAC/B,CAAC,CAAC,KAAK,CAAC,CACf,CAAA;oBAED,IAAI,CAAC,OAAO,GAAG;wBACb,GAAG,EAAE,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,GAAG;wBACpD,MAAM;qBACP,CAAA;gBACH,CAAC;YACH,CAAC;QACH,CAAC;aAAM,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;YACjC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;QAC3C,CAAC;QAED,mDAAmD;QACnD,eAAe;IACjB,CAAC;IAED,eAAe,CAAC,OAAuB;QACrC;;;;;;;;;;;WAWG;QACH,MAAM,MAAM,GAAG,OAAO;aACnB,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC;aAChC,GAAG,CAAC,MAAM,CAAC,EAAE;YACZ,QAAQ,OAAO,MAAM,CAAC,KAAK,EAAE,CAAC;gBAC5B,KAAK,QAAQ;oBACX,OAAO,GAAG,MAAM,CAAC,KAAK,IAAI,CAAA;gBAC5B,KAAK,QAAQ;oBACX,OAAO,MAAM,CAAC,KAAK,CAAA;gBACrB,KAAK,UAAU;oBACb,OAAO,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC,CAAA;gBACxC;oBACE,OAAO,MAAM,CAAA;YACjB,CAAC;QACH,CAAC,CAAC;aACD,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;aAChB,IAAI,CAAC,GAAG,CAAC,CAAA;QAEZ,iEAAiE;QACjE,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,WAAC,OAAA,CAAC,MAAM,CAAC,MAAM,IAAI,CAAC,MAAM,CAAC,UAAU,IAAI,CAAC,CAAC,CAAA,MAAA,MAAM,CAAC,MAAM,0CAAE,QAAQ,CAAA,CAAA,EAAA,CAAC,CAAA;QAE7G,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,yBAAyB,EAAE,MAAM,CAAC,CAAA;QACzD,oDAAoD;QACpD,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,+BAA+B,EAAE,MAAM,CAAC,OAAO,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC,CAAA;IACvF,CAAC;IAWD,MAAM;;QACJ,IAAI,EAAE,UAAU,GAAG,EAAsB,EAAE,OAAO,GAAG,EAAE,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC,MAAM,CAAA;QAEhF,IAAI,WAAW,GAAG,CAAC,UAAU,CAAC,QAAQ,CAAA;QACtC,IAAI,IAAI,GAAG,IAAI,CAAC,IAAI,CAAA;QAEpB;;;;;;;;;;;;;;;;WAgBG;QACH,MAAM,UAAU,GAAG,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,WAAC,OAAA,CAAC,MAAM,CAAC,MAAM,KAAI,MAAA,MAAM,CAAC,MAAM,0CAAE,KAAK,CAAA,CAAA,EAAA,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;QACzF,MAAM,cAAc,GAAG,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,MAAM,CAAA;QACtE,MAAM,KAAK,GAAG,OAAO,IAAI,CAAC,KAAK,IAAI,QAAQ,IAAI,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,MAAM,KAAI,CAAC,CAAA;QACtG,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;QAC1D,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,MAAM,KAAI,CAAC,CAAA;QAErF,OAAO,IAAI,CAAA;;;;qBAIM,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC;wBACtB,UAAU,GAAG,KAAK;wBAClB,cAAc;;;;;mBAKnB,OAAO;mBACP,IAAI,CAAC,OAAO;mBACZ,IAAI,CAAC,OAAO;gBACf,IAAI;6BACS,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,MAAM;+BACb,CAAC,CAAc,EAAE,EAAE;YACxC,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC,MAAM,CAAA;YAC7B,OAAO,CAAC,GAAG,CAAC,CAAC,KAAK,GAAG,KAAK,CAAA;YAC1B,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAA;QAC/B,CAAC;8BACqB,CAAC,CAAc,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,MAAM,CAAC;;;;;;;kBAO5D,IAAI,CAAC,MAAM;mBACV,OAAO;gBACV,IAAI;mBACD,IAAI,CAAC,OAAQ;sBACV,IAAI,CAAC,UAAU;4BACT,UAAU,GAAG,CAAC,IAAI,GAAG,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC;;UAErD,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,eAAe,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA,EAAE;;;;;;;;;;;;;;;;;;;;;;;QAuBvD,WAAW;YACX,CAAC,CAAC,IAAI,CAAA;;;;;;;;;;;;sBAYQ,IAAI;4BACE,IAAI,CAAC,UAAU;;WAEhC;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;KACX,CAAA;IACH,CAAC;IAED,KAAK;QACH,KAAK,CAAC,KAAK,EAAE,CAAA;QAEb,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAA;IACnB,CAAC;IAED,IAAI,mBAAmB;QACrB,OAAO,IAAI,CAAC,IAAI,CAAA;IAClB,CAAC;;AArdM,eAAM,GAAG;IACd,iBAAiB;IACjB,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiJF;CACF,AArJY,CAqJZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAA0C;AACxC;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uCAAgB;AAGhB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAA0B;AAamB;IAAvE,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;8CAA8B;AAExE;IAA5B,KAAK,CAAC,cAAc,EAAE,IAAI,CAAC;sCAAkB;AACf;IAA9B,KAAK,CAAC,gBAAgB,EAAE,IAAI,CAAC;wCAAwB;AACvB;IAA9B,KAAK,CAAC,gBAAgB,EAAE,IAAI,CAAC;wCAAoB;AAEzC;IAAR,KAAK,EAAE;4CAA0B;AAiLmB;IAApD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;2CAAmB;AAhW5D,QAAQ;IADpB,aAAa,CAAC,SAAS,CAAC;GACZ,QAAQ,CAudpB","sourcesContent":["import i18next from 'i18next'\nimport '@material/web/button/text-button.js'\nimport '@operato/list-state/ox-empty-note.js'\nimport './data-grid-header.js'\nimport './data-grid-body.js'\nimport './data-grid-footer.js'\n\nimport { css, html, LitElement, PropertyValues, nothing} from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { DataManipulator } from '../data-manipulator.js'\nimport { ColumnConfig, GristRecord, PaginationConfig } from '../types.js'\nimport { GridEmptyNote, renderEmptyNote } from '../empty-note-render.js'\n// import { supportsPassive } from '../utils/index.js'\nimport { DataGridHeader } from './data-grid-header.js'\n\n/**\n * DataGrid\n */\n@customElement('ox-grid')\nexport class DataGrid extends DataManipulator {\n  static styles = [\n    MDTypeScaleStyles,\n    ScrollbarStyles,\n    css`\n      /*\n       * ── 고치는 표만 셀을 겨눈다 ─────────────────────────────────────────\n       *\n       * 셀 하나를 가리키는 점선과 열 폭 조절 손잡이는 **고칠 셀을 겨누는 장치**다. 기본 겉모습에서는\n       * 둘을 두지 않는다(data-grist.ts 와 같은 값). 고칠 수 있는 열이 하나라도 있으면 여기서 되살린다.\n       *\n       * 화면이 고르는 모드가 아니다 — 표가 스스로 아는 사실이다(위 editableGrid 주석 참조).\n       */\n      :host([editable-grid]) {\n        --grid-record-focused-cell-border: 1px dashed var(--ui-faint, #8a959c);\n        /*\n         * 정렬 표식의 자리는 이 값에서 **파생된다** — 손잡이가 보이면 표식이 칸 오른쪽 끝으로 가고,\n         * 안 보이면 이름에 붙는다(data-grid-header.ts 의 스타일 질의). 여기서 따로 정하지 않는다.\n         */\n        --grid-header-splitter-display: flex;\n        /*\n         * ── 지나는 줄 표시를 **비우지 않는다** ──────────────────────────────\n         *\n         * 여기 hover 색을 transparent 로 두었었다. 「점선 셀 테두리가 이미 「지금 여기」를 말하므로\n         * 줄 배경까지 움직일 필요가 없다」는 뜻이었는데, **그 값은 「칠하지 않는다」가 아니라\n         * 「칸의 색을 지운다」였다.**\n         *\n         * 칸은 자기 바탕을 갖는다(흰색). 그것을 지우면 그 자리에 **구멍이 뚫려 표 뒤의 페이지가\n         * 비친다.** 이 앱에서 그 색이 회색이라(rgb 240·242·244) 회색 띠처럼 보였고, 그래서\n         * 「지나는 줄 표시」가 실제로는 있었다 — 아무도 정하지 않은 색으로.\n         *\n         * 그리고 **고정 열에서 그 띠가 끊긴다.** 고정 열은 스크롤되는 열 위에 떠 있어야 하니\n         * 불투명해야 하고, 그래서 구멍이 안 뚫린다. 줄 하나가 두 색으로 갈렸다.\n         *\n         * 표 뒤에 무엇이 있느냐로 줄 색이 정해지는 것 자체가 결함이다. 어두운 페이지에 이 표를\n         * 놓으면 마우스를 올린 줄이 검게 된다.\n         *\n         * 그래서 이 예외를 걷는다. 모든 표가 같은 hover 색을 쓰고, 그 색은 칸마다 실제로 칠하는\n         * 색이므로 고정 열에도 똑같이 걸린다.\n         */\n      }\n\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        /* div[setting] 의 절대 좌표 기준. */\n        position: relative;\n        overflow: hidden;\n\n        border-width: var(--grid-container-border-width);\n      }\n\n      /*\n       * Grid wrapper (role=grid) — generates no box, so header and body stay flex items of the\n       * host.\n       */\n      div[grid] {\n        display: contents;\n      }\n\n      ox-grid-body {\n        flex: 1;\n        position: relative;\n\n        font-variation-settings: 'FILL' 1;\n      }\n\n      ox-grid-header {\n        font-variation-settings: 'FILL' 1;\n      }\n\n      ox-grid-footer {\n        font-variation-settings: 'FILL' 1;\n      }\n\n      ox-empty-note {\n        display: block;\n        position: absolute;\n        left: 50%;\n        top: 50%;\n        transform: translate(-50%, -50%);\n      }\n\n      /*\n       * 컬럼 설정 버튼은 **헤더에 마우스를 올릴 때만** 보인다.\n       *\n       * 늘 보이면 목록 화면마다 오른쪽 위에 눈에 걸리는 것이 하나 생긴다. 자주 쓰는 것도 아니다.\n       *\n       * 감춰 있는 동안에는 pointer-events 도 끈다 — 안 보이는데 눌리는 자리가 있으면, 헤더의 마지막\n       * 컬럼을 누르려던 사람이 엉뚱한 팝업을 만난다.\n       *\n       * 세 갈래로 켠다.\n       *   헤더에 올렸을 때        :has(ox-grid-header:hover)\n       *   버튼 자체에 올렸을 때   버튼이 헤더 위에 떠 있으므로, 커서가 버튼으로 옮겨오면 헤더는 더 이상\n       *                          hover 가 아니다. 이 갈래가 없으면 커서 아래에서 사라진다\n       *   키보드 초점            focus-within\n       */\n      div[setting] {\n        /*\n         * 크기 없이 호스트의 오른쪽 위에 붙는다. 안에 들어오는 버튼이 [slot='setting'] 규칙으로\n         * top: -3px · right: 0 을 스스로 잡으므로, 이 div 는 기준점 노릇만 한다.\n         */\n        position: absolute;\n        top: 0;\n        right: 0;\n        width: 0;\n        height: 0;\n        z-index: 5;\n        opacity: 0;\n        pointer-events: none;\n        transition: opacity 0.12s ease-out;\n      }\n\n      /*\n       * 버튼 자체에 올렸을 때도 켜 둔다. 버튼이 헤더 위에 떠 있어서, 커서가 버튼으로 옮겨오면 헤더는\n       * 더 이상 hover 가 아니다. 이 갈래가 없으면 커서 아래에서 사라진다.\n       */\n      div[grid]:has(ox-grid-header:hover) + div[setting],\n      div[setting]:hover,\n      div[setting]:focus-within {\n        opacity: 1;\n        pointer-events: auto;\n      }\n\n      /*\n       * 손가락으로 쓰는 장치 — hover 가 없으므로 감추면 닿을 방법이 없다. 늘 두고 평소에는 흐리게,\n       * 누르는 동안 선명하게 한다.\n       *\n       * 화면 폭이 아니라 입력 장치로 구분한다. 창을 좁힌 데스크톱은 여기에 걸리지 않고, 큰 태블릿은\n       * 폭이 넓어도 걸린다.\n       */\n      @media (pointer: coarse) {\n        div[setting] {\n          opacity: 0.35;\n          pointer-events: auto;\n        }\n\n        div[setting]:active,\n        div[setting]:focus-within {\n          opacity: 1;\n        }\n      }\n\n      @media print {\n        :host {\n          zoom: 80%;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Object }) focused?: { row: number; column: number }\n  @property({ type: Boolean }) empty?: boolean\n\n  /** 비었을 때 무슨 말을 하나 — 판단은 data-grist 가 하고 여기서는 그리기만 한다. */\n  @property({ type: Object }) emptyNote?: GridEmptyNote\n\n\n\n  /**\n   * 이 표에 고칠 수 있는 열이 하나라도 있는지. **겉모습이 이것으로 달라진다.**\n   *\n   * 셀 하나를 가리키는 점선과 열 폭 조절 손잡이는 **고칠 셀을 겨누는 장치**다. 고치지 않는 목록에서는\n   * 셀 하나가 뜻을 갖지 않아, 줄을 고르려고 누른 자리에 점선이 남고 세로 선이 줄 읽기를 방해한다.\n   *\n   * 그래서 모드를 따로 두지 않는다. 화면이 고를 일이 아니라 **표가 스스로 아는 사실**이다 —\n   * 열에 `record.editable` 이 있으면 고치는 표다.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'editable-grid' }) editableGrid: boolean = false\n\n  @query('ox-grid-body', true) body!: LitElement\n  @query('ox-grid-header', true) header!: DataGridHeader\n  @query('ox-grid-footer', true) footer!: LitElement\n\n  @state() fixedLefts: number[] = []\n\n  firstUpdated() {\n    /* header and body scroll synchronization */\n    this.header.addEventListener('scroll', e => {\n      if (this.body.scrollLeft !== this.header.scrollLeft) {\n        this.body.scrollLeft = this.header.scrollLeft\n      }\n    })\n\n    this.body.addEventListener('scroll', e => {\n      if (this.body.scrollLeft !== this.header.scrollLeft) {\n        this.header.scrollLeft = this.body.scrollLeft\n      }\n    })\n\n    this.header.addEventListener('wheel', this.onWheelEvent.bind(this))\n    this.footer && this.footer.addEventListener('wheel', this.onWheelEvent.bind(this))\n\n    /* record selection processing */\n    this.addEventListener('select-all-change', e => {\n      if (this.data.records.length == 0) {\n        return\n      }\n\n      var { selected } = (e as CustomEvent).detail\n      var { records } = this.data\n\n      records.forEach(record => (record['__selected__'] = selected))\n\n      this.header.requestUpdate()\n      this.body.requestUpdate()\n    })\n\n    this.addEventListener('focus-change', e => {\n      const { row, column } = (e as CustomEvent).detail || {}\n      if (!this.focused || this.focused.row != row || this.focused.column != column) {\n        this.focused = { row, column }\n        this.focus()\n        this.requestUpdate()\n      }\n    })\n  }\n\n  onWheelEvent(e: WheelEvent) {\n    if (this.body.scrollWidth > this.body.clientWidth) {\n      var delta = Math.max(-1, Math.min(1, e.deltaY || 0))\n      this.body.scrollLeft = Math.max(0, this.body.scrollLeft - delta * 30)\n\n      var maxScrollLeft = this.body.scrollWidth - this.body.clientWidth\n\n      var atStart = this.body.scrollLeft === 0\n      var atEnd = this.body.scrollLeft === maxScrollLeft\n\n      // 스크롤이 맨 앞으로 와 있는 상태에서 휠을 올리는 경우 또는\n      // 스크롤이 맨 끝으로 가 있는 상태에서 휠을 내리는 경우에만 디폴트 동작 허용\n      if ((atStart && delta > 0) || (atEnd && delta < 0)) {\n        return true\n      }\n\n      e.preventDefault()\n    }\n  }\n\n  onSelectRecordChanged({\n    selectedRecords,\n    added,\n    removed\n  }: {\n    selectedRecords: GristRecord[]\n    added: GristRecord[]\n    removed: GristRecord[]\n  }): void {\n    super.onSelectRecordChanged({ selectedRecords, added, removed })\n\n    this.header.requestUpdate()\n    this.body.requestUpdate()\n  }\n\n  onRecordChanged(\n    recordData: GristRecord,\n    row: number,\n    column: ColumnConfig | null /* TODO column should be removed */\n  ) {\n    /* record-viewer 등 grid 외에서 변경되는 경우에도 header와 body를 refresh 하도록 한다. */\n    super.onRecordChanged(recordData, row, column)\n\n    this.header.requestUpdate()\n    this.body.requestUpdate()\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('data')) {\n      /*\n       * 데이타 내용에 따라 동적으로 컬럼의 폭이 달라지는 경우(예를 들면, sequence field)가 있으므로,\n       * data의 변동에 대해서도 다시 계산되어야 한다.\n       */\n      this.calculateWidths(this.config.columns)\n\n      if (this.focused && 'row' in this.focused) {\n        var { row = 0, column = 0 } = this.focused\n        var { records: oldrecords = [] } = changes.get('data') || {}\n        var { records: newrecords } = this.data\n\n        var oldrecord = oldrecords[row]\n\n        if (oldrecord && oldrecord !== newrecords[row]) {\n          var newrecord = newrecords.find(\n            record =>\n              /* TODO keyfields를 정의하고, keyfields의 동일성으로 확정해야 한다. */\n              oldrecord === record ||\n              ('id' in oldrecord\n                ? record.id == oldrecord.id\n                : 'name' in oldrecord\n                  ? record.name == oldrecord.name\n                  : false)\n          )\n\n          this.focused = {\n            row: newrecord ? newrecords.indexOf(newrecord) : row,\n            column\n          }\n        }\n      }\n    } else if (changes.has('config')) {\n      this.calculateWidths(this.config.columns)\n    }\n\n    /* grid fetch 후에 grid로 focus를 주어야 하는 지 검토가 필요하다. */\n    // this.focus()\n  }\n\n  calculateWidths(columns: ColumnConfig[]) {\n    /*\n     * 컬럼 모델 마지막에 'auto' cell을 추가하여, 자투리 영역을 꽉 채워서 표시한다.\n     *\n     * 숫자로 준 폭은 **그 폭 그대로** 쓴다. 합이 보이는 폭보다 크면 표는 가로로 넘치고, 나머지는\n     * 가로 스크롤로 본다 — 표의 정상 거동이다.\n     *\n     * 한때 minmax(0, Npx) 로 두어 넘칠 때 열들이 함께 줄게 했다가 되돌렸다. 그렇게 하면 어떤 표도\n     * 가로로 넘치지 않으므로 **가로 스크롤이 아예 사라진다.** 열 열다섯 개를 700px 에 밀어 넣으면\n     * 모든 열이 못 읽을 만큼 좁아지고, 화면은 그것을 알릴 방법이 없다.\n     *\n     * 열이 좁아 잘리는 것은 화면이 열 폭을 정해서 풀 일이다 — 부품이 대신 줄이면 화면의 뜻이 사라진다.\n     */\n    const widths = columns\n      .filter(column => !column.hidden)\n      .map(column => {\n        switch (typeof column.width) {\n          case 'number':\n            return `${column.width}px`\n          case 'string':\n            return column.width\n          case 'function':\n            return column.width.call(this, column)\n          default:\n            return 'auto'\n        }\n      })\n      .concat(['auto'])\n      .join(' ')\n\n    /* 겉모습이 이 사실로 달라진다(위 editableGrid 주석 참조). 열이 정해지는 이 시점이 그 자리다. */\n    this.editableGrid = columns.some(column => !column.hidden && !column.gutterName && !!column.record?.editable)\n\n    this.style.setProperty('--grid-template-columns', widths)\n    /* 인쇄는 종이 폭에 맞춰 비율로 나눈다. `220px` → `220fr` 로 바뀐다. */\n    this.style.setProperty('--grid-template-print-columns', widths.replace(/px/gi, 'fr'))\n  }\n\n  /**\n   * The grid's name, set by the caller as `<ox-grid aria-label=\"Inbound queue\">`.\n   *\n   * role=grid sits on the inner wrapper, and an aria-label on the host does not reach it, so the\n   * value is taken and forwarded. No name is invented here: with several grids on one screen, which\n   * one this is belongs to the screen, not to the component.\n   */\n  @property({ type: String, attribute: 'aria-label' }) gridLabel?: string\n\n  render() {\n    var { pagination = {} as PaginationConfig, columns = [], filters } = this.config\n\n    var paginatable = !pagination.infinite\n    var data = this.data\n\n    /*\n     * Declare the grid a grid.\n     *\n     * This component carried no roles at all — one aria- attribute in the entire source, on the\n     * page number. To a screen reader the screen was a pile of inputs. Naming each cell by hand\n     * still would not say \"this is a table\", \"row 3, column 3\", or \"40 rows in all\", and scanning\n     * and comparing is the whole point of a table; without roles that navigation does not exist.\n     *\n     * With role=grid the column header becomes the cell's name without anything being written on\n     * the cell. That is how an HTML table works, and why the pattern is specified that way.\n     *\n     * The extra wrapper is needed because a grid may only contain rows (or row groups). This\n     * element also holds the settings-button slot and the pager, so putting the role on the host\n     * mixes non-rows into the table and assistive tech drops out of table reading. Wrapping just\n     * the header and body keeps them out. display: contents generates no box, so the host's column\n     * flex layout is unchanged.\n     */\n    const headerRows = columns.some(column => !column.hidden && column.header?.group) ? 2 : 1\n    const visibleColumns = columns.filter(column => !column.hidden).length\n    const total = typeof data.total == 'number' && data.total > 0 ? data.total : data.records?.length || 0\n    const page = Number(data.page) > 0 ? Number(data.page) : 1\n    const limit = Number(data.limit) > 0 ? Number(data.limit) : data.records?.length || 0\n\n    return html`\n      <div\n        grid\n        role=\"grid\"\n        aria-label=${ifDefined(this.gridLabel)}\n        aria-rowcount=${headerRows + total}\n        aria-colcount=${visibleColumns}\n      >\n      <ox-grid-header\n        role=\"rowgroup\"\n        class=\"md-typescale-label-medium-prominent\"\n        .columns=${columns}\n        .sorters=${this.sorters}\n        .filters=${this.filters}\n        .data=${data}\n        ?filtering-feature=${filters?.header}\n        @column-width-change=${(e: CustomEvent) => {\n          let { idx, width } = e.detail\n          columns[idx].width = width\n          this.calculateWidths(columns)\n        }}\n        @fixed-lefts-change=${(e: CustomEvent) => (this.fixedLefts = e.detail)}\n      >\n      </ox-grid-header>\n\n      <ox-grid-body\n        role=\"rowgroup\"\n        class=\"md-typescale-body-medium\"\n        .config=${this.config}\n        .columns=${columns}\n        .data=${data}\n        .focused=${this.focused!}\n        .fixedLefts=${this.fixedLefts}\n        .ariaRowIndexBase=${headerRows + (page - 1) * limit + 1}\n      >\n        ${this.empty ? renderEmptyNote(this.emptyNote) : html``}\n      </ox-grid-body>\n      </div>\n\n      <!--\n        Placed after the grid. \"Only while hovering the header\" needs a sibling selector, and a\n        sibling selector can only reach forward.\n\n        :host(:has(ox-grid-header:hover)) does not work — the argument of :host() is evaluated in\n        the outer tree, so it never sees ox-grid-header inside the shadow tree. That was tried and\n        did not react to hover. The :has() on the grid wrapper is evaluated inside the shadow tree,\n        so it does.\n\n        The settings button operates on the grid rather than being part of it, so it stays outside\n        role=grid: a grid may only contain rows, and anything else makes assistive tech drop out of\n        table reading.\n\n        Reordering does not move it on screen — the style below pins it to the host's top right.\n      -->\n      <div setting>\n        <slot name=\"setting\"></slot>\n      </div>\n\n      ${paginatable\n        ? html`\n            <!--\n              푸터에는 본문 타이프스케일을 씌우지 않는다.\n\n              그 클래스는 font 축약형으로 0.875rem 를 넣는데, **바깥 트리의 규칙이라 푸터의\n              :host { font-size } 를 이긴다**(그림자 캐스케이드에서 호스트 요소는 바깥 트리 규칙이\n              우선한다). 그래서 푸터가 자기 크기를 못 정하고 본문과 같은 14px 로 남아 있었다.\n              [확인함] 리터럴 :host { font-size: 7px } 도 안 먹었다. 2026-09-02\n\n              푸터는 본문이 아니다. 크기는 --grid-footer-font-size 가 정한다.\n            -->\n            <ox-grid-footer\n              .data=${data}\n              .pagination=${this.pagination}\n            ></ox-grid-footer>\n          `\n        : html``}\n    `\n  }\n\n  focus() {\n    super.focus()\n\n    this.body.focus()\n  }\n\n  get pullToRefreshTarget() {\n    return this.body\n  }\n}\n"]}