@operato/attachment 10.20.0 → 10.23.0

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [10.23.0](https://github.com/hatiolab/operato/compare/v10.22.0...v10.23.0) (2026-09-24)
+
+
+### :rocket: New Features
+
+* **attachment:** quiet cards for the attachment list; outlined card gutters ([97081d1](https://github.com/hatiolab/operato/commit/97081d17e37d99ae231317938329ccb52b4bfae6))
+* **attachment:** tiles for files that are not pictures; one-line card titles ([371cafc](https://github.com/hatiolab/operato/commit/371cafc2b9745a2b15b7870f843767aff5646632))
+
+
+### :bug: Bug Fix
+
+* **attachment:** card actions as five quiet icons, so the row fits any card width ([1eb0665](https://github.com/hatiolab/operato/commit/1eb066581aa215957d98a1a8e7851af650c159ca))
+* **attachment:** draw the tile for files with no server thumbnail; tooltips on card fields ([4a0ee28](https://github.com/hatiolab/operato/commit/4a0ee28396564f098aca8f0b365be65921d24e07))
+
+
+
+## [10.22.0](https://github.com/hatiolab/operato/compare/v10.21.0...v10.22.0) (2026-09-24)
+
+**Note:** Version bump only for package @operato/attachment
+
+
+
+
+
 ## [10.20.0](https://github.com/hatiolab/operato/compare/v10.19.1...v10.20.0) (2026-09-21)
 
 **Note:** Version bump only for package @operato/attachment

package/dist/src/index.d.ts

@@ -1 +1,2 @@
 export * from './ox-attachment-list.js';
+export * from './ox-attachment-tile.js';

package/dist/src/index.js

@@ -1,2 +1,3 @@
 export * from './ox-attachment-list.js';
+export * from './ox-attachment-tile.js';
 //# sourceMappingURL=index.js.map

package/dist/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAA","sourcesContent":["export * from './ox-attachment-list.js'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAA;AACvC,cAAc,yBAAyB,CAAA","sourcesContent":["export * from './ox-attachment-list.js'\nexport * from './ox-attachment-tile.js'\n"]}

package/dist/src/ox-attachment-list.d.ts

@@ -1,4 +1,5 @@
 import '@operato/data-grist';
+import './ox-attachment-tile.js';
 import '@operato/input/ox-input-file.js';
 import { LitElement } from 'lit';
 import { ColumnConfig, DataGrist, FetchOption, FieldRenderer, FilterValue, GristData, GristRecord, SortersConfig } from '@operato/data-grist';
@@ -26,7 +27,6 @@ export declare class OxAttachmentList extends LitElement {
             icon?: undefined;
             title?: undefined;
             handlers?: undefined;
-            iconOnly?: undefined;
             danger?: undefined;
             name?: undefined;
             hidden?: undefined;
@@ -34,7 +34,6 @@ export declare class OxAttachmentList extends LitElement {
             width?: undefined;
             filter?: undefined;
             sortable?: undefined;
-            label?: undefined;
             record?: undefined;
         } | {
             type: string;
@@ -44,7 +43,6 @@ export declare class OxAttachmentList extends LitElement {
             handlers: {
                 click: (columns: ColumnConfig[], data: GristData, column: ColumnConfig, record: GristRecord, rowIndex: number, target: HTMLElement) => void;
             };
-            iconOnly?: undefined;
             danger?: undefined;
             name?: undefined;
             hidden?: undefined;
@@ -52,31 +50,11 @@ export declare class OxAttachmentList extends LitElement {
             width?: undefined;
             filter?: undefined;
             sortable?: undefined;
-            label?: undefined;
             record?: undefined;
         } | {
             type: string;
             gutterName: string;
             icon: string;
-            iconOnly: boolean;
-            title: string;
-            handlers: {
-                click: (columns: ColumnConfig[], data: GristData, column: ColumnConfig, record: GristRecord, rowIndex: number, target: HTMLElement) => void;
-            };
-            danger?: undefined;
-            name?: undefined;
-            hidden?: undefined;
-            header?: undefined;
-            width?: undefined;
-            filter?: undefined;
-            sortable?: undefined;
-            label?: undefined;
-            record?: undefined;
-        } | {
-            type: string;
-            gutterName: string;
-            icon: string;
-            iconOnly: boolean;
             danger: boolean;
             title: string;
             handlers: {
@@ -88,7 +66,6 @@ export declare class OxAttachmentList extends LitElement {
             width?: undefined;
             filter?: undefined;
             sortable?: undefined;
-            label?: undefined;
             record?: undefined;
         } | {
             type: string;
@@ -98,13 +75,11 @@ export declare class OxAttachmentList extends LitElement {
             icon?: undefined;
             title?: undefined;
             handlers?: undefined;
-            iconOnly?: undefined;
             danger?: undefined;
             header?: undefined;
             width?: undefined;
             filter?: undefined;
             sortable?: undefined;
-            label?: undefined;
             record?: undefined;
         } | {
             type: string;
@@ -117,10 +92,8 @@ export declare class OxAttachmentList extends LitElement {
             icon?: undefined;
             title?: undefined;
             handlers?: undefined;
-            iconOnly?: undefined;
             danger?: undefined;
             hidden?: undefined;
-            label?: undefined;
             record?: undefined;
         } | {
             type: string;
@@ -132,11 +105,9 @@ export declare class OxAttachmentList extends LitElement {
             icon?: undefined;
             title?: undefined;
             handlers?: undefined;
-            iconOnly?: undefined;
             danger?: undefined;
             hidden?: undefined;
             sortable?: undefined;
-            label?: undefined;
             record?: undefined;
         } | {
             type: string;
@@ -153,19 +124,17 @@ export declare class OxAttachmentList extends LitElement {
             icon?: undefined;
             title?: undefined;
             handlers?: undefined;
-            iconOnly?: undefined;
             danger?: undefined;
             width?: undefined;
             sortable?: undefined;
-            label?: undefined;
             record?: undefined;
         } | {
             type: string;
             name: string;
             header: string;
-            label: boolean;
             record: {
                 editable: boolean;
+                renderEmpty?: undefined;
                 renderer?: undefined;
             };
             filter: string;
@@ -174,7 +143,6 @@ export declare class OxAttachmentList extends LitElement {
             icon?: undefined;
             title?: undefined;
             handlers?: undefined;
-            iconOnly?: undefined;
             danger?: undefined;
             hidden?: undefined;
             sortable?: undefined;
@@ -184,6 +152,7 @@ export declare class OxAttachmentList extends LitElement {
             hidden: boolean;
             record: {
                 editable: boolean;
+                renderEmpty: boolean;
                 renderer: FieldRenderer;
             };
             handlers: {
@@ -193,12 +162,10 @@ export declare class OxAttachmentList extends LitElement {
             gutterName?: undefined;
             icon?: undefined;
             title?: undefined;
-            iconOnly?: undefined;
             danger?: undefined;
             header?: undefined;
             filter?: undefined;
             sortable?: undefined;
-            label?: undefined;
         } | {
             type: string;
             name: string;
@@ -209,11 +176,9 @@ export declare class OxAttachmentList extends LitElement {
             icon?: undefined;
             title?: undefined;
             handlers?: undefined;
-            iconOnly?: undefined;
             danger?: undefined;
             hidden?: undefined;
             filter?: undefined;
-            label?: undefined;
             record?: undefined;
         })[];
         rows: {

package/dist/src/ox-attachment-list.js

@@ -1,5 +1,6 @@
 import { __decorate } from "tslib";
 import '@operato/data-grist';
+import './ox-attachment-tile.js';
 import '@operato/input/ox-input-file.js';
 import gql from 'graphql-tag';
 import { css, html, LitElement } from 'lit';
@@ -161,7 +162,6 @@ let OxAttachmentList = class OxAttachmentList extends LitElement {
                     type: 'gutter',
                     gutterName: 'button',
                     icon: 'save_alt',
-                    iconOnly: false,
                     title: i18next.t('button.download'),
                     handlers: {
                         click: (columns, data, column, record, rowIndex, target) => {
@@ -178,7 +178,6 @@ let OxAttachmentList = class OxAttachmentList extends LitElement {
                     type: 'gutter',
                     gutterName: 'button',
                     icon: 'delete',
-                    iconOnly: false,
                     danger: true,
                     title: i18next.t('button.delete'),
                     handlers: {
@@ -224,7 +223,6 @@ let OxAttachmentList = class OxAttachmentList extends LitElement {
                     type: 'hashtags',
                     name: 'tags',
                     header: i18next.t('field.hashtags'),
-                    label: true,
                     record: {
                         editable: false
                     },
@@ -237,26 +235,25 @@ let OxAttachmentList = class OxAttachmentList extends LitElement {
                     hidden: true,
                     record: {
                         editable: false,
+                        /* A file with no server thumbnail still gets the slot: the renderer draws a tile for it. */
+                        renderEmpty: true,
                         renderer: function (value, column, record, rowIndex, owner) {
                             // 1순위: 서버가 생성한 썸네일 (data URI 또는 외부 URL)
                             //         이미지/GLTF 등 서버 측에서 썸네일이 있는 타입
                             if (record.thumbnail) {
                                 return html ` <img src=${record.thumbnail} style="max-width: 100%; max-height: 100%;" /> `;
                             }
-                            // 2순위: 비디오는 원본 컨트롤 재생
-                            if (record.category == 'video') {
-                                return html ` <video src=${record.fullpath} style="width: 100%; height: 100%;" controls></video> `;
-                            }
-                            // 3순위: 썸네일 없는 이미지는 원본으로 폴백 (기존 attachment 호환)
+                            // 2순위: 썸네일 없는 이미지는 원본으로 폴백 (기존 attachment 호환)
                             if (record.category == 'image') {
                                 return html ` <img src=${record.fullpath} style="max-width: 100%; max-height: 100%;" /> `;
                             }
-                            // 4순위: 일반 파일 아이콘 + 확장자
+                            // 3순위: 그림이 아닌 파일 - 첫 프레임 · 첫 줄 · 종류 글리프 (ox-attachment-tile)
                             return html `
-                <div style="width: 100%; height: 100%;" etc>
-                  <md-icon style="--md-icon-size: 24px;">insert_drive_file</md-icon>
-                  <span>${record.path.substr(record.path.lastIndexOf('.'))}</span>
-                </div>
+                <ox-attachment-tile
+                  .path=${record.path || record.name || ''}
+                  .mimetype=${record.mimetype || ''}
+                  .src=${record.fullpath || ''}
+                ></ox-attachment-tile>
               `;
                         }
                     },
@@ -408,6 +405,33 @@ OxAttachmentList.styles = [
 
         --grid-record-emphasized-background-color: red;
         --grid-record-emphasized-color: yellow;
+
+        /*
+         * The card: the file's picture on a plate across the top, then its name, when it changed,
+         * its tags if any, and the actions. One hairline, one radius, the same surfaces the
+         * product's other cards use; nothing coloured but the picture and the delete plate.
+         */
+        --data-card-min-width: 240px;
+        --data-card-record-card-background-color: var(--board-card-surface, var(--md-sys-color-surface-container-lowest));
+        --data-card-record-card-background-color-hover: var(--board-card-surface, var(--md-sys-color-surface-container-lowest));
+        --data-card-record-card-border: 1px solid var(--md-sys-color-outline-variant);
+        --data-card-record-card-border-hover: 1px solid var(--md-sys-color-outline);
+        --data-card-record-card-boxshadow-hover: 0 2px 10px rgba(0, 0, 0, 0.08);
+        --data-card-record-card-border-radius: 12px;
+        --data-card-record-card-padding: 0;
+        --data-card-thumbnail-height: 150px;
+        --data-card-thumbnail-padding: 12px;
+        --data-card-thumbnail-background: var(--board-card-plate, var(--md-sys-color-surface-container));
+        --data-card-thumbnail-radius: 11px 11px 0 0;
+        --data-card-item-margin: 12px 16px 0;
+        --data-card-item-name-font: 600 0.86rem/1.3 var(--theme-font, Roboto, sans-serif);
+        --data-card-item-name-lines: 1;
+        --ox-attachment-tile-fade: var(--board-card-plate, var(--md-sys-color-surface-container));
+        --data-card-item-name-color: var(--md-sys-color-on-surface);
+        --data-card-item-etc-font: 0.74rem/1.3 var(--theme-font, Roboto, sans-serif);
+        --data-card-item-etc-color: var(--md-sys-color-on-surface-variant);
+        --data-card-detail-border-top: none;
+        --data-card-gutters-margin: 8px 12px 12px;
       }
 
       .header .filters {

package/dist/src/ox-attachment-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-attachment-list.js","sourceRoot":"","sources":["../../src/ox-attachment-list.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/data-grist'\nimport '@operato/input/ox-input-file.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { openPopup, PopupHandle } from '@operato/popup'\n\nimport {\n  ColumnConfig,\n  DataGrist,\n  FetchOption,\n  FieldRenderer,\n  FilterValue,\n  GristData,\n  GristRecord,\n  PaginationConfig,\n  SortersConfig\n} from '@operato/data-grist'\nimport { buildArgs, client } from '@operato/graphql'\nimport { ScrollbarStyles, CommonGristStyles, CommonHeaderStyles } from '@operato/styles'\nimport { i18next } from '@operato/i18n'\nimport { copyToClipboard, sleep } from '@operato/utils'\n\nconst FETCH_ATTACHMENT_LIST_GQL = (listParam: any) => {\n  return gql`\n  {\n    attachments(${buildArgs(listParam)}) {\n      items {\n        id\n        name\n        description\n        mimetype\n        encoding\n        category\n        fullpath\n        path\n        thumbnail\n        tags\n        createdAt\n        updatedAt\n      }\n      total\n    }\n  }\n`\n}\n\nconst DELETE_ATTACHMENT_GQL = gql`\n  mutation DeleteAttachment($id: String!) {\n    deleteAttachment(id: $id)\n  }\n`\n\nconst CREATE_ATTACHMENTS_GQL = gql`\n  mutation ($attachments: [NewAttachment!]!) {\n    createAttachments(attachments: $attachments) {\n      id\n      name\n      description\n      mimetype\n      encoding\n      category\n      path\n      tags\n      createdAt\n      updatedAt\n    }\n  }\n`\n\nconst UPDATE_ATTACHMENT_GQL = gql`\n  mutation UpdateAttachment($patch: AttachmentPatch!, $id: String!) {\n    updateAttachment(patch: $patch, id: $id) {\n      id\n      name\n      description\n      mimetype\n      encoding\n      category\n      path\n      tags\n      createdAt\n      updatedAt\n    }\n  }\n`\n\n@customElement('ox-attachment-list')\nexport class OxAttachmentList extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    CommonGristStyles,\n    CommonHeaderStyles,\n    css`\n      :host {\n        display: flex;\n\n        width: 100%;\n\n        --grid-record-emphasized-background-color: red;\n        --grid-record-emphasized-color: yellow;\n      }\n\n      ox-grist {\n        flex: 1;\n        overflow-y: auto;\n\n        --grid-record-emphasized-background-color: red;\n        --grid-record-emphasized-color: yellow;\n      }\n\n      .header .filters {\n        flex-direction: column;\n        align-items: stretch;\n      }\n    `\n  ]\n\n  @property({ type: String }) category: string = ''\n  @property({ type: Boolean }) creatable: boolean = false\n  @property({ type: Boolean, attribute: 'without-search' }) withoutSearch: boolean = false\n\n  @query('ox-grist') grist!: DataGrist\n  @query('ox-input-file') fileUploader!: any\n\n  render() {\n    return html`\n      <ox-grist .config=${this.gristConfig} .mode=${'CARD'} auto-fetch .fetchHandler=${this.fetchHandler.bind(this)}>\n        <div slot=\"headroom\" class=\"header\">\n          <div class=\"filters\">\n            <ox-input-file\n              accept=\"*/*\"\n              multiple=\"true\"\n              hide-filelist\n              @change=${this.onCreateAttachment.bind(this)}\n            ></ox-input-file>\n\n            <ox-filters-form autofocus .withoutSearch=${this.withoutSearch}></ox-filters-form>\n          </div>\n        </div>\n      </ox-grist>\n    `\n  }\n\n  async fetchHandler({ page = 1, limit = 100, sortings = [], filters = [] }: FetchOption) {\n    const { items: records, total } = await this.getAttachments({ page, limit, filters, sortings })\n\n    return {\n      total,\n      records\n    }\n  }\n\n  get gristConfig() {\n    return {\n      list: {\n        thumbnail: 'thumbnail',\n        fields: ['name'],\n        details: ['tags', 'updatedAt']\n      },\n      columns: [\n        {\n          type: 'gutter',\n          gutterName: 'dirty'\n        },\n        {\n          type: 'gutter',\n          gutterName: 'sequence'\n        },\n        {\n          type: 'gutter',\n          gutterName: 'button',\n          icon: 'tag',\n          title: i18next.t('field.hashtags'),\n          handlers: {\n            click: (\n              columns: ColumnConfig[],\n              data: GristData,\n              column: ColumnConfig,\n              record: GristRecord,\n              rowIndex: number,\n              target: HTMLElement\n            ): void => {\n              this.popupHashtagEditor(record)\n            }\n          }\n        },\n        {\n          type: 'gutter',\n          gutterName: 'button',\n          icon: 'open_in_new',\n          title: i18next.t('button.open-in-new'),\n          handlers: {\n            click: (\n              columns: ColumnConfig[],\n              data: GristData,\n              column: ColumnConfig,\n              record: GristRecord,\n              rowIndex: number,\n              target: HTMLElement\n            ): void => {\n              window.open(record.fullpath, '_blank')\n            }\n          }\n        },\n        {\n          type: 'gutter',\n          gutterName: 'button',\n          icon: 'link',\n          title: i18next.t('button.copy-url'),\n          handlers: {\n            click: async (\n              columns: ColumnConfig[],\n              data: GristData,\n              column: ColumnConfig,\n              record: GristRecord,\n              rowIndex: number,\n              target: HTMLElement\n            ): Promise<void> => {\n              var { protocol, hostname, port } = location\n              await copyToClipboard(`${protocol}//${hostname}:${port}${record.fullpath}`)\n\n              target.setAttribute('data-tooltip', 'url copied!')\n\n              const rect = target.getBoundingClientRect()\n              target.style.setProperty('--tooltip-top', `${rect.top}px`)\n              target.style.setProperty('--tooltip-left', `${rect.left}px`)\n\n              await sleep(2000)\n              target.removeAttribute('data-tooltip')\n            }\n          }\n        },\n        {\n          type: 'gutter',\n          gutterName: 'button',\n          icon: 'save_alt',\n          iconOnly: false,\n          title: i18next.t('button.download'),\n          handlers: {\n            click: (\n              columns: ColumnConfig[],\n              data: GristData,\n              column: ColumnConfig,\n              record: GristRecord,\n              rowIndex: number,\n              target: HTMLElement\n            ): void => {\n              const element = document.createElement('a')\n              element.setAttribute('href', record.fullpath)\n              element.setAttribute('download', record.name!)\n              document.body.appendChild(element)\n              element.click()\n              element.remove()\n            }\n          }\n        },\n        {\n          type: 'gutter',\n          gutterName: 'button',\n          icon: 'delete',\n          iconOnly: false,\n          danger: true,\n          title: i18next.t('button.delete'),\n          handlers: {\n            click: async (\n              columns: ColumnConfig[],\n              data: GristData,\n              column: ColumnConfig,\n              record: GristRecord,\n              rowIndex: number,\n              target: HTMLElement\n            ): Promise<void> => {\n              await this.deleteAttachment(record.id!)\n              this.refreshAttachments()\n            }\n          }\n        },\n        {\n          type: 'string',\n          name: 'id',\n          hidden: true\n        },\n        {\n          type: 'string',\n          name: 'name',\n          header: i18next.t('field.name'),\n          width: 200,\n          filter: 'search',\n          sortable: true\n        },\n        {\n          type: 'string',\n          name: 'description',\n          header: i18next.t('field.description'),\n          width: 200,\n          filter: 'search'\n        },\n        {\n          type: 'select-buttons',\n          name: 'category',\n          header: i18next.t('field.category'),\n          hidden: true,\n          filter: {\n            operator: 'in',\n            options: ['audio', 'video', 'image', 'text', 'application'],\n            value: this.category,\n            label: ''\n          }\n        },\n        {\n          type: 'hashtags',\n          name: 'tags',\n          header: i18next.t('field.hashtags'),\n          label: true,\n          record: {\n            editable: false\n          },\n          filter: 'search',\n          width: 200\n        },\n        {\n          type: 'image',\n          name: 'thumbnail',\n          hidden: true,\n          record: {\n            editable: false,\n            renderer: function (value, column, record, rowIndex, owner) {\n              // 1순위: 서버가 생성한 썸네일 (data URI 또는 외부 URL)\n              //         이미지/GLTF 등 서버 측에서 썸네일이 있는 타입\n              if (record.thumbnail) {\n                return html` <img src=${record.thumbnail} style=\"max-width: 100%; max-height: 100%;\" /> `\n              }\n              // 2순위: 비디오는 원본 컨트롤 재생\n              if (record.category == 'video') {\n                return html` <video src=${record.fullpath} style=\"width: 100%; height: 100%;\" controls></video> `\n              }\n              // 3순위: 썸네일 없는 이미지는 원본으로 폴백 (기존 attachment 호환)\n              if (record.category == 'image') {\n                return html` <img src=${record.fullpath} style=\"max-width: 100%; max-height: 100%;\" /> `\n              }\n              // 4순위: 일반 파일 아이콘 + 확장자\n              return html`\n                <div style=\"width: 100%; height: 100%;\" etc>\n                  <md-icon style=\"--md-icon-size: 24px;\">insert_drive_file</md-icon>\n                  <span>${record.path.substr(record.path.lastIndexOf('.'))}</span>\n                </div>\n              `\n            } as FieldRenderer\n          },\n          handlers: {\n            click: (\n              columns: ColumnConfig[],\n              data: GristData,\n              column: ColumnConfig,\n              record: GristRecord,\n              rowIndex: number,\n              target: HTMLElement\n            ): void => {\n              this.onClickSelect(record)\n            }\n          },\n          width: 120\n        },\n        {\n          type: 'datetime',\n          name: 'updatedAt',\n          header: i18next.t('field.updated-at'),\n          sortable: true,\n          width: 180\n        },\n        {\n          type: 'datetime',\n          name: 'createdAt',\n          header: i18next.t('field.created-at'),\n          sortable: true,\n          width: 180\n        }\n      ],\n      rows: {\n        appendable: false,\n        selectable: {\n          multiple: true\n        },\n        classifier: function (\n          record: GristRecord,\n          rowIndex: number\n        ): { emphasized?: boolean | string | string[]; [key: string]: any } | void {}\n      },\n      sorters: [\n        {\n          name: 'name',\n          desc: false\n        }\n      ],\n      pagination: {\n        pages: [20, 30, 50, 100, 200]\n      }\n    }\n  }\n\n  async firstUpdated() {\n    this.refreshAttachments()\n  }\n\n  onClickSelect(attachment: any) {\n    this.dispatchEvent(\n      new CustomEvent('attachment-selected', {\n        composed: true,\n        bubbles: true,\n        detail: {\n          attachment\n        }\n      })\n    )\n  }\n\n  async onCreateAttachment(e: CustomEvent) {\n    const files = e.detail\n\n    await this.createAttachments(files)\n    this.refreshAttachments()\n  }\n\n  async onDeleteAttachment(id: string) {\n    await this.deleteAttachment(id)\n\n    this.refreshAttachments()\n  }\n\n  async refreshAttachments() {\n    this.grist.fetch()\n  }\n\n  async getAttachments({\n    page = 1,\n    limit = 30,\n    filters = [],\n    sortings = []\n  }: { page?: number; limit?: number; filters?: FilterValue[]; sortings?: SortersConfig } = {}) {\n    var pagination: PaginationConfig = {\n      limit,\n      page\n    }\n\n    var params = {\n      filters,\n      sortings,\n      pagination\n    }\n\n    var attachmentListResponse = await client.query({\n      query: FETCH_ATTACHMENT_LIST_GQL(params)\n    })\n\n    return attachmentListResponse?.data?.attachments || {}\n  }\n\n  async createAttachments(files: File[]) {\n    /*\n      ref. https://github.com/jaydenseric/graphql-multipart-request-spec#client\n    */\n\n    const response = await client.mutate({\n      mutation: CREATE_ATTACHMENTS_GQL,\n      variables: {\n        attachments: files.map(file => {\n          return { file }\n        })\n      },\n      context: {\n        hasUpload: true\n      }\n    })\n  }\n\n  async updateAttachment(patch: any) {\n    const response = await client.mutate({\n      mutation: UPDATE_ATTACHMENT_GQL,\n      variables: patch\n    })\n  }\n\n  async deleteAttachment(id: string) {\n    const response = await client.mutate({\n      mutation: DELETE_ATTACHMENT_GQL,\n      variables: {\n        id\n      }\n    })\n\n    return response.data\n  }\n\n  popupHashtagEditor(record: GristRecord) {\n    const hashtags = Array.isArray(record.tags) ? [...record.tags] : []\n\n    const confirmCallback = async (newval: any) => {\n      await this.updateAttachment({\n        id: record.id,\n        patch: { tags: newval }\n      })\n\n      this.refreshAttachments()\n    }\n\n    openPopup(\n      html`\n        <ox-popup-hashtags-input .value=${hashtags} .confirmCallback=${confirmCallback}></ox-popup-hashtags-input>\n      `,\n      {\n        backdrop: true,\n        title: i18next.t('title.edit hashtags')\n      }\n    )\n  }\n}\n"]}
+{"version":3,"file":"ox-attachment-list.js","sourceRoot":"","sources":["../../src/ox-attachment-list.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/data-grist'\nimport './ox-attachment-tile.js'\nimport '@operato/input/ox-input-file.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { openPopup, PopupHandle } from '@operato/popup'\n\nimport {\n  ColumnConfig,\n  DataGrist,\n  FetchOption,\n  FieldRenderer,\n  FilterValue,\n  GristData,\n  GristRecord,\n  PaginationConfig,\n  SortersConfig\n} from '@operato/data-grist'\nimport { buildArgs, client } from '@operato/graphql'\nimport { ScrollbarStyles, CommonGristStyles, CommonHeaderStyles } from '@operato/styles'\nimport { i18next } from '@operato/i18n'\nimport { copyToClipboard, sleep } from '@operato/utils'\n\nconst FETCH_ATTACHMENT_LIST_GQL = (listParam: any) => {\n  return gql`\n  {\n    attachments(${buildArgs(listParam)}) {\n      items {\n        id\n        name\n        description\n        mimetype\n        encoding\n        category\n        fullpath\n        path\n        thumbnail\n        tags\n        createdAt\n        updatedAt\n      }\n      total\n    }\n  }\n`\n}\n\nconst DELETE_ATTACHMENT_GQL = gql`\n  mutation DeleteAttachment($id: String!) {\n    deleteAttachment(id: $id)\n  }\n`\n\nconst CREATE_ATTACHMENTS_GQL = gql`\n  mutation ($attachments: [NewAttachment!]!) {\n    createAttachments(attachments: $attachments) {\n      id\n      name\n      description\n      mimetype\n      encoding\n      category\n      path\n      tags\n      createdAt\n      updatedAt\n    }\n  }\n`\n\nconst UPDATE_ATTACHMENT_GQL = gql`\n  mutation UpdateAttachment($patch: AttachmentPatch!, $id: String!) {\n    updateAttachment(patch: $patch, id: $id) {\n      id\n      name\n      description\n      mimetype\n      encoding\n      category\n      path\n      tags\n      createdAt\n      updatedAt\n    }\n  }\n`\n\n@customElement('ox-attachment-list')\nexport class OxAttachmentList extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    CommonGristStyles,\n    CommonHeaderStyles,\n    css`\n      :host {\n        display: flex;\n\n        width: 100%;\n\n        --grid-record-emphasized-background-color: red;\n        --grid-record-emphasized-color: yellow;\n      }\n\n      ox-grist {\n        flex: 1;\n        overflow-y: auto;\n\n        --grid-record-emphasized-background-color: red;\n        --grid-record-emphasized-color: yellow;\n\n        /*\n         * The card: the file's picture on a plate across the top, then its name, when it changed,\n         * its tags if any, and the actions. One hairline, one radius, the same surfaces the\n         * product's other cards use; nothing coloured but the picture and the delete plate.\n         */\n        --data-card-min-width: 240px;\n        --data-card-record-card-background-color: var(--board-card-surface, var(--md-sys-color-surface-container-lowest));\n        --data-card-record-card-background-color-hover: var(--board-card-surface, var(--md-sys-color-surface-container-lowest));\n        --data-card-record-card-border: 1px solid var(--md-sys-color-outline-variant);\n        --data-card-record-card-border-hover: 1px solid var(--md-sys-color-outline);\n        --data-card-record-card-boxshadow-hover: 0 2px 10px rgba(0, 0, 0, 0.08);\n        --data-card-record-card-border-radius: 12px;\n        --data-card-record-card-padding: 0;\n        --data-card-thumbnail-height: 150px;\n        --data-card-thumbnail-padding: 12px;\n        --data-card-thumbnail-background: var(--board-card-plate, var(--md-sys-color-surface-container));\n        --data-card-thumbnail-radius: 11px 11px 0 0;\n        --data-card-item-margin: 12px 16px 0;\n        --data-card-item-name-font: 600 0.86rem/1.3 var(--theme-font, Roboto, sans-serif);\n        --data-card-item-name-lines: 1;\n        --ox-attachment-tile-fade: var(--board-card-plate, var(--md-sys-color-surface-container));\n        --data-card-item-name-color: var(--md-sys-color-on-surface);\n        --data-card-item-etc-font: 0.74rem/1.3 var(--theme-font, Roboto, sans-serif);\n        --data-card-item-etc-color: var(--md-sys-color-on-surface-variant);\n        --data-card-detail-border-top: none;\n        --data-card-gutters-margin: 8px 12px 12px;\n      }\n\n      .header .filters {\n        flex-direction: column;\n        align-items: stretch;\n      }\n    `\n  ]\n\n  @property({ type: String }) category: string = ''\n  @property({ type: Boolean }) creatable: boolean = false\n  @property({ type: Boolean, attribute: 'without-search' }) withoutSearch: boolean = false\n\n  @query('ox-grist') grist!: DataGrist\n  @query('ox-input-file') fileUploader!: any\n\n  render() {\n    return html`\n      <ox-grist .config=${this.gristConfig} .mode=${'CARD'} auto-fetch .fetchHandler=${this.fetchHandler.bind(this)}>\n        <div slot=\"headroom\" class=\"header\">\n          <div class=\"filters\">\n            <ox-input-file\n              accept=\"*/*\"\n              multiple=\"true\"\n              hide-filelist\n              @change=${this.onCreateAttachment.bind(this)}\n            ></ox-input-file>\n\n            <ox-filters-form autofocus .withoutSearch=${this.withoutSearch}></ox-filters-form>\n          </div>\n        </div>\n      </ox-grist>\n    `\n  }\n\n  async fetchHandler({ page = 1, limit = 100, sortings = [], filters = [] }: FetchOption) {\n    const { items: records, total } = await this.getAttachments({ page, limit, filters, sortings })\n\n    return {\n      total,\n      records\n    }\n  }\n\n  get gristConfig() {\n    return {\n      list: {\n        thumbnail: 'thumbnail',\n        fields: ['name'],\n        details: ['tags', 'updatedAt']\n      },\n      columns: [\n        {\n          type: 'gutter',\n          gutterName: 'dirty'\n        },\n        {\n          type: 'gutter',\n          gutterName: 'sequence'\n        },\n        {\n          type: 'gutter',\n          gutterName: 'button',\n          icon: 'tag',\n          title: i18next.t('field.hashtags'),\n          handlers: {\n            click: (\n              columns: ColumnConfig[],\n              data: GristData,\n              column: ColumnConfig,\n              record: GristRecord,\n              rowIndex: number,\n              target: HTMLElement\n            ): void => {\n              this.popupHashtagEditor(record)\n            }\n          }\n        },\n        {\n          type: 'gutter',\n          gutterName: 'button',\n          icon: 'open_in_new',\n          title: i18next.t('button.open-in-new'),\n          handlers: {\n            click: (\n              columns: ColumnConfig[],\n              data: GristData,\n              column: ColumnConfig,\n              record: GristRecord,\n              rowIndex: number,\n              target: HTMLElement\n            ): void => {\n              window.open(record.fullpath, '_blank')\n            }\n          }\n        },\n        {\n          type: 'gutter',\n          gutterName: 'button',\n          icon: 'link',\n          title: i18next.t('button.copy-url'),\n          handlers: {\n            click: async (\n              columns: ColumnConfig[],\n              data: GristData,\n              column: ColumnConfig,\n              record: GristRecord,\n              rowIndex: number,\n              target: HTMLElement\n            ): Promise<void> => {\n              var { protocol, hostname, port } = location\n              await copyToClipboard(`${protocol}//${hostname}:${port}${record.fullpath}`)\n\n              target.setAttribute('data-tooltip', 'url copied!')\n\n              const rect = target.getBoundingClientRect()\n              target.style.setProperty('--tooltip-top', `${rect.top}px`)\n              target.style.setProperty('--tooltip-left', `${rect.left}px`)\n\n              await sleep(2000)\n              target.removeAttribute('data-tooltip')\n            }\n          }\n        },\n        {\n          type: 'gutter',\n          gutterName: 'button',\n          icon: 'save_alt',\n          title: i18next.t('button.download'),\n          handlers: {\n            click: (\n              columns: ColumnConfig[],\n              data: GristData,\n              column: ColumnConfig,\n              record: GristRecord,\n              rowIndex: number,\n              target: HTMLElement\n            ): void => {\n              const element = document.createElement('a')\n              element.setAttribute('href', record.fullpath)\n              element.setAttribute('download', record.name!)\n              document.body.appendChild(element)\n              element.click()\n              element.remove()\n            }\n          }\n        },\n        {\n          type: 'gutter',\n          gutterName: 'button',\n          icon: 'delete',\n          danger: true,\n          title: i18next.t('button.delete'),\n          handlers: {\n            click: async (\n              columns: ColumnConfig[],\n              data: GristData,\n              column: ColumnConfig,\n              record: GristRecord,\n              rowIndex: number,\n              target: HTMLElement\n            ): Promise<void> => {\n              await this.deleteAttachment(record.id!)\n              this.refreshAttachments()\n            }\n          }\n        },\n        {\n          type: 'string',\n          name: 'id',\n          hidden: true\n        },\n        {\n          type: 'string',\n          name: 'name',\n          header: i18next.t('field.name'),\n          width: 200,\n          filter: 'search',\n          sortable: true\n        },\n        {\n          type: 'string',\n          name: 'description',\n          header: i18next.t('field.description'),\n          width: 200,\n          filter: 'search'\n        },\n        {\n          type: 'select-buttons',\n          name: 'category',\n          header: i18next.t('field.category'),\n          hidden: true,\n          filter: {\n            operator: 'in',\n            options: ['audio', 'video', 'image', 'text', 'application'],\n            value: this.category,\n            label: ''\n          }\n        },\n        {\n          type: 'hashtags',\n          name: 'tags',\n          header: i18next.t('field.hashtags'),\n          record: {\n            editable: false\n          },\n          filter: 'search',\n          width: 200\n        },\n        {\n          type: 'image',\n          name: 'thumbnail',\n          hidden: true,\n          record: {\n            editable: false,\n            /* A file with no server thumbnail still gets the slot: the renderer draws a tile for it. */\n            renderEmpty: true,\n            renderer: function (value, column, record, rowIndex, owner) {\n              // 1순위: 서버가 생성한 썸네일 (data URI 또는 외부 URL)\n              //         이미지/GLTF 등 서버 측에서 썸네일이 있는 타입\n              if (record.thumbnail) {\n                return html` <img src=${record.thumbnail} style=\"max-width: 100%; max-height: 100%;\" /> `\n              }\n              // 2순위: 썸네일 없는 이미지는 원본으로 폴백 (기존 attachment 호환)\n              if (record.category == 'image') {\n                return html` <img src=${record.fullpath} style=\"max-width: 100%; max-height: 100%;\" /> `\n              }\n              // 3순위: 그림이 아닌 파일 - 첫 프레임 · 첫 줄 · 종류 글리프 (ox-attachment-tile)\n              return html`\n                <ox-attachment-tile\n                  .path=${record.path || record.name || ''}\n                  .mimetype=${record.mimetype || ''}\n                  .src=${record.fullpath || ''}\n                ></ox-attachment-tile>\n              `\n            } as FieldRenderer\n          },\n          handlers: {\n            click: (\n              columns: ColumnConfig[],\n              data: GristData,\n              column: ColumnConfig,\n              record: GristRecord,\n              rowIndex: number,\n              target: HTMLElement\n            ): void => {\n              this.onClickSelect(record)\n            }\n          },\n          width: 120\n        },\n        {\n          type: 'datetime',\n          name: 'updatedAt',\n          header: i18next.t('field.updated-at'),\n          sortable: true,\n          width: 180\n        },\n        {\n          type: 'datetime',\n          name: 'createdAt',\n          header: i18next.t('field.created-at'),\n          sortable: true,\n          width: 180\n        }\n      ],\n      rows: {\n        appendable: false,\n        selectable: {\n          multiple: true\n        },\n        classifier: function (\n          record: GristRecord,\n          rowIndex: number\n        ): { emphasized?: boolean | string | string[]; [key: string]: any } | void {}\n      },\n      sorters: [\n        {\n          name: 'name',\n          desc: false\n        }\n      ],\n      pagination: {\n        pages: [20, 30, 50, 100, 200]\n      }\n    }\n  }\n\n  async firstUpdated() {\n    this.refreshAttachments()\n  }\n\n  onClickSelect(attachment: any) {\n    this.dispatchEvent(\n      new CustomEvent('attachment-selected', {\n        composed: true,\n        bubbles: true,\n        detail: {\n          attachment\n        }\n      })\n    )\n  }\n\n  async onCreateAttachment(e: CustomEvent) {\n    const files = e.detail\n\n    await this.createAttachments(files)\n    this.refreshAttachments()\n  }\n\n  async onDeleteAttachment(id: string) {\n    await this.deleteAttachment(id)\n\n    this.refreshAttachments()\n  }\n\n  async refreshAttachments() {\n    this.grist.fetch()\n  }\n\n  async getAttachments({\n    page = 1,\n    limit = 30,\n    filters = [],\n    sortings = []\n  }: { page?: number; limit?: number; filters?: FilterValue[]; sortings?: SortersConfig } = {}) {\n    var pagination: PaginationConfig = {\n      limit,\n      page\n    }\n\n    var params = {\n      filters,\n      sortings,\n      pagination\n    }\n\n    var attachmentListResponse = await client.query({\n      query: FETCH_ATTACHMENT_LIST_GQL(params)\n    })\n\n    return attachmentListResponse?.data?.attachments || {}\n  }\n\n  async createAttachments(files: File[]) {\n    /*\n      ref. https://github.com/jaydenseric/graphql-multipart-request-spec#client\n    */\n\n    const response = await client.mutate({\n      mutation: CREATE_ATTACHMENTS_GQL,\n      variables: {\n        attachments: files.map(file => {\n          return { file }\n        })\n      },\n      context: {\n        hasUpload: true\n      }\n    })\n  }\n\n  async updateAttachment(patch: any) {\n    const response = await client.mutate({\n      mutation: UPDATE_ATTACHMENT_GQL,\n      variables: patch\n    })\n  }\n\n  async deleteAttachment(id: string) {\n    const response = await client.mutate({\n      mutation: DELETE_ATTACHMENT_GQL,\n      variables: {\n        id\n      }\n    })\n\n    return response.data\n  }\n\n  popupHashtagEditor(record: GristRecord) {\n    const hashtags = Array.isArray(record.tags) ? [...record.tags] : []\n\n    const confirmCallback = async (newval: any) => {\n      await this.updateAttachment({\n        id: record.id,\n        patch: { tags: newval }\n      })\n\n      this.refreshAttachments()\n    }\n\n    openPopup(\n      html`\n        <ox-popup-hashtags-input .value=${hashtags} .confirmCallback=${confirmCallback}></ox-popup-hashtags-input>\n      `,\n      {\n        backdrop: true,\n        title: i18next.t('title.edit hashtags')\n      }\n    )\n  }\n}\n"]}

package/dist/src/ox-attachment-tile.d.ts

@@ -0,0 +1,14 @@
+import '@material/web/icon/icon.js';
+import { LitElement } from 'lit';
+export declare function fileFamilyIcon(mimetype?: string, path?: string): string;
+export declare class OxAttachmentTile extends LitElement {
+    static styles: import("lit").CSSResult[];
+    path: string;
+    mimetype: string;
+    src: string;
+    private _snippet?;
+    private _snippetFor?;
+    render(): import("lit-html").TemplateResult<1>;
+    updated(): void;
+    private _loadSnippet;
+}

package/dist/src/ox-attachment-tile.js

@@ -0,0 +1,194 @@
+import { __decorate } from "tslib";
+import '@material/web/icon/icon.js';
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+/*
+ * What stands in for a picture when the file is not one.
+ *
+ * The server thumbnails images and glTF models. Everything else used to get the same grey
+ * "insert_drive_file" glyph, so a list of audio, text and zip files was a wall of identical
+ * tiles. This tile draws what it can from the file itself, cheaply:
+ *
+ *   - video: the file's own first frame (the browser decodes just the metadata and one frame)
+ *   - text (txt, csv, json, md, code): the first few lines, fetched with a byte range
+ *   - everything else: a glyph for the file's family, with its extension
+ *
+ * A glyph tile is never blank - the family and the extension are the two things a person
+ * scans a file list for.
+ */
+const TEXT_PREVIEW_BYTES = 600;
+const FAMILIES = [
+    { test: mime => mime === 'application/pdf', icon: 'picture_as_pdf' },
+    { test: mime => mime.startsWith('audio/'), icon: 'audio_file' },
+    { test: mime => mime.startsWith('video/'), icon: 'video_file' },
+    { test: mime => mime.startsWith('model/'), icon: 'view_in_ar' },
+    { test: mime => mime.startsWith('font/'), icon: 'font_download' },
+    {
+        test: (mime, ext) => /zip|compressed|tar|gzip|rar|7z/.test(mime) || ['zip', 'tar', 'gz', 'rar', '7z'].includes(ext),
+        icon: 'folder_zip'
+    },
+    {
+        test: (mime, ext) => /spreadsheet|excel|csv/.test(mime) || ['xls', 'xlsx', 'csv', 'numbers'].includes(ext),
+        icon: 'table_chart'
+    },
+    {
+        test: (mime, ext) => /presentation|powerpoint/.test(mime) || ['ppt', 'pptx', 'key'].includes(ext),
+        icon: 'slideshow'
+    },
+    {
+        test: (mime, ext) => /msword|wordprocessing|rtf/.test(mime) || ['doc', 'docx', 'pages'].includes(ext),
+        icon: 'description'
+    },
+    {
+        test: (mime, ext) => /json|xml|javascript|typescript|yaml|x-sh/.test(mime) ||
+            ['js', 'ts', 'json', 'xml', 'yaml', 'yml', 'sh', 'py', 'java', 'css', 'html'].includes(ext),
+        icon: 'code'
+    },
+    { test: mime => mime.startsWith('text/'), icon: 'article' }
+];
+function extensionOf(path = '') {
+    const dot = path.lastIndexOf('.');
+    return dot >= 0 ? path.slice(dot + 1).toLowerCase() : '';
+}
+export function fileFamilyIcon(mimetype = '', path = '') {
+    var _a;
+    const ext = extensionOf(path);
+    return ((_a = FAMILIES.find(family => family.test(mimetype, ext))) === null || _a === void 0 ? void 0 : _a.icon) || 'draft';
+}
+function isTextLike(mimetype = '', ext) {
+    return (mimetype.startsWith('text/') ||
+        /json|xml|javascript|yaml|x-sh/.test(mimetype) ||
+        ['txt', 'md', 'csv', 'json', 'xml', 'yaml', 'yml', 'log', 'js', 'ts', 'py', 'sh', 'css', 'html', 'sql'].includes(ext));
+}
+let OxAttachmentTile = class OxAttachmentTile extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.path = '';
+        this.mimetype = '';
+        this.src = '';
+    }
+    render() {
+        const ext = extensionOf(this.path);
+        const mime = this.mimetype || '';
+        if (mime.startsWith('video/') && this.src) {
+            return html `<video src="${this.src}#t=0.5" preload="metadata" muted playsinline></video>`;
+        }
+        if (this._snippet) {
+            return html `<pre text>${this._snippet}</pre>`;
+        }
+        return html `
+      <div glyph>
+        <md-icon>${fileFamilyIcon(mime, this.path)}</md-icon>
+        ${ext ? html `<span ext>${ext}</span>` : nothing}
+      </div>
+    `;
+    }
+    updated() {
+        const ext = extensionOf(this.path);
+        if (this.src && isTextLike(this.mimetype, ext) && this._snippetFor !== this.src) {
+            this._snippetFor = this.src;
+            this._loadSnippet(this.src);
+        }
+    }
+    async _loadSnippet(src) {
+        try {
+            const response = await fetch(src, { headers: { Range: `bytes=0-${TEXT_PREVIEW_BYTES - 1}` } });
+            if (!response.ok)
+                return;
+            const text = (await response.text()).slice(0, TEXT_PREVIEW_BYTES);
+            /* A file that starts with binary or is empty gets the glyph instead. */
+            if (!text.trim() || /[\u0000-\u0008\u000e-\u001f]/.test(text))
+                return;
+            if (this._snippetFor === src)
+                this._snippet = text;
+        }
+        catch (e) {
+            /* the glyph stays */
+        }
+    }
+};
+OxAttachmentTile.styles = [
+    css `
+      :host {
+        display: flex;
+        width: 100%;
+        height: 100%;
+        min-height: 0;
+        box-sizing: border-box;
+        overflow: hidden;
+      }
+
+      [glyph] {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 6px;
+        color: var(--md-sys-color-on-surface-variant);
+      }
+
+      [glyph] md-icon {
+        --md-icon-size: 40px;
+        font-variation-settings: 'wght' 300;
+        color: var(--md-sys-color-outline);
+      }
+
+      [ext] {
+        padding: 0 8px;
+        border-radius: 999px;
+        font-size: 0.66rem;
+        font-weight: 600;
+        letter-spacing: 0.06em;
+        line-height: 18px;
+        text-transform: uppercase;
+        color: var(--md-sys-color-on-secondary-container);
+        background: var(--md-sys-color-secondary-container);
+      }
+
+      video {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+        pointer-events: none;
+      }
+
+      /* The first lines of a text file, as they are, in a small monospace; the fade says "more". */
+      [text] {
+        position: relative;
+        flex: 1;
+        margin: 0;
+        padding: 10px 12px;
+        overflow: hidden;
+        font: 0.66rem/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+        color: var(--md-sys-color-on-surface-variant);
+        white-space: pre-wrap;
+        word-break: break-all;
+      }
+
+      [text]::after {
+        content: '';
+        position: absolute;
+        inset: auto 0 0 0;
+        height: 40%;
+        background: linear-gradient(to bottom, transparent, var(--ox-attachment-tile-fade, var(--md-sys-color-surface-container)));
+      }
+    `
+];
+__decorate([
+    property({ type: String })
+], OxAttachmentTile.prototype, "path", void 0);
+__decorate([
+    property({ type: String })
+], OxAttachmentTile.prototype, "mimetype", void 0);
+__decorate([
+    property({ type: String })
+], OxAttachmentTile.prototype, "src", void 0);
+__decorate([
+    state()
+], OxAttachmentTile.prototype, "_snippet", void 0);
+OxAttachmentTile = __decorate([
+    customElement('ox-attachment-tile')
+], OxAttachmentTile);
+export { OxAttachmentTile };
+//# sourceMappingURL=ox-attachment-tile.js.map