@things-factory/board-ui 10.0.0-beta.8 → 10.0.0-beta.80

package/dist-client/pages/board-create-wizard-page.js

@@ -0,0 +1,2176 @@
+import { __decorate, __metadata } from "tslib";
+/**
+ * <board-create-wizard-page> — 보드 생성 wizard.
+ *
+ * 세 가지 모드:
+ *   처음부터 (blank / template) — 빈 캔버스 또는 기존 템플릿으로 새 보드 생성.
+ *   도면 업로드 (new) — DXF / 이미지 업로드 → board-import 파이프라인으로 자동 변환.
+ *   기존 파일 (existing) — 이미 업로드된 Attachment 에서 보드 생성.
+ */
+import '@material/web/icon/icon.js';
+import { css, html } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { i18next, localize } from '@operato/i18n';
+import { navigate, PageView } from '@operato/shell';
+import { notify } from '@operato/layout';
+import '@operato/board/ox-board-preview.js';
+import { createBoard } from '../graphql/board';
+import { fetchGroupList } from '../graphql/group';
+import { fetchBoardTemplateList, fetchBoardTemplate } from '../graphql/board-template';
+import { createAttachmentForImport, fetchAttachmentsForImport } from '../graphql/attachment';
+import { importBoardAsync, fetchImportSession, materializeImportSession, suggestBoardMeta } from '../graphql/board-import';
+/** 허용 도면 형식 — board-import 의 어댑터 set 에 맞춤. */
+const ACCEPT = '.dxf,.png,.jpg,.jpeg,.webp,.gif,.bmp';
+let BoardCreateWizardPage = class BoardCreateWizardPage extends localize(i18next)(PageView) {
+    constructor() {
+        super(...arguments);
+        /** 현재 wizard 단계. URL/params 와는 독립 — 페이지 안 state 만으로 진행. */
+        this._step = 'upload';
+        /** 현재 업로드 진행 중 — UI lock + spinner. */
+        this._uploading = false;
+        /** upload 스텝 안의 모드 — 새 파일 업로드 vs 기존 attachment 선택. */
+        this._uploadMode = 'blank';
+        /** 기존 파일 목록 (모드 전환 시 lazy fetch). */
+        this._browseItems = [];
+        /** 기존 파일 목록 로딩 / 검색 상태. */
+        this._browseLoading = false;
+        this._browseSearch = '';
+        /** 사용자가 도면에 대해 추가하는 자유서술 — VLM 에 hint 로 전달. */
+        this._userPrompt = '';
+        /** 템플릿 목록 (template 탭 진입 시 lazy fetch). */
+        this._templates = [];
+        this._templatesLoading = false;
+        this._templatesLoaded = false;
+        this._templateSearch = '';
+        /** 템플릿 모드 — 선택된 템플릿 (id, model, thumbnail). */
+        this._selectedTemplate = undefined;
+        /** 보드 그룹 목록 (lazy fetch). */
+        this._groups = [];
+        this._groupsLoaded = false;
+        /** 새 보드의 group / type — 모든 모드 공통. */
+        this._selectedGroupId = '';
+        this._selectedBoardType = 'main';
+        /** review step — 새 Board 이름 (짧고 심플). */
+        this._newBoardName = '';
+        /** review step — 새 Board 설명 (자세한 narrative). */
+        this._newBoardDescription = '';
+        /** review step — 사용자가 선택한 시안 id. 미선택 시 default (첫 variant). */
+        this._selectedVariantId = '';
+        /** materialize 진행 중 — 중복 클릭 방지. */
+        this._materializing = false;
+    }
+    static { this.styles = [
+        css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+        padding: var(--spacing-large, 16px);
+        gap: var(--spacing-medium, 12px);
+        height: 100%;
+        background: var(--md-sys-color-surface, #fafafa);
+        color: var(--md-sys-color-on-surface, #1a1a1a);
+        overflow-y: auto;
+        box-sizing: border-box;
+      }
+      :host::after {
+        content: '';
+        display: block;
+        flex-shrink: 0;
+        height: var(--spacing-large, 16px);
+      }
+
+      .header {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+      }
+      .header h1 {
+        margin: 0;
+        font-size: 20px;
+        font-weight: 600;
+      }
+      .header p {
+        margin: 0;
+        font-size: 13px;
+        color: var(--md-sys-color-on-secondary-container, #555);
+      }
+
+      .stepper {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 8px 12px;
+        background: var(--md-sys-color-surface-container, #fff);
+        border: 1px solid var(--md-sys-color-outline-variant, #e0e0e0);
+        border-radius: 8px;
+      }
+      .step {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        padding: 4px 10px;
+        border-radius: 16px;
+        font-size: 12px;
+        color: var(--md-sys-color-on-secondary-container, #777);
+        background: transparent;
+        border: 1px solid transparent;
+      }
+      .step.active {
+        background: var(--md-sys-color-primary-container, #e7f0ff);
+        color: var(--md-sys-color-on-primary-container, #0b3a8a);
+        border-color: var(--md-sys-color-primary, #2a64d8);
+        font-weight: 600;
+      }
+      .step.done {
+        color: var(--md-sys-color-tertiary, #2e7d32);
+      }
+      .step .index {
+        width: 18px;
+        height: 18px;
+        border-radius: 50%;
+        background: var(--md-sys-color-outline-variant, #cfd8dc);
+        color: #fff;
+        font-size: 11px;
+        line-height: 18px;
+        text-align: center;
+      }
+      .step.active .index {
+        background: var(--md-sys-color-primary, #2a64d8);
+      }
+      .step.done .index {
+        background: var(--md-sys-color-tertiary, #2e7d32);
+      }
+      .stepper > .arrow {
+        opacity: 0.4;
+        font-size: 14px;
+      }
+
+      .stage {
+        /* flex: 1 0 auto — 빈 공간 있으면 늘어나서 시각 채움, content 가 더 크면 content 크기
+         * 그대로 (단순 flex:1 은 :host height 에 고정 → content 가 잘리는 회귀). */
+        flex: 1 0 auto;
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+        padding: 16px;
+        background: var(--md-sys-color-surface-container, #fff);
+        border: 1px solid var(--md-sys-color-outline-variant, #e0e0e0);
+        border-radius: 8px;
+      }
+
+      .placeholder {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
+        height: 100%;
+        min-height: 240px;
+        color: var(--md-sys-color-on-secondary-container, #777);
+        text-align: center;
+      }
+      .placeholder .big {
+        font-size: 16px;
+        font-weight: 500;
+      }
+      .placeholder .small {
+        font-size: 12px;
+        max-width: 320px;
+      }
+
+      .controls {
+        display: flex;
+        justify-content: flex-end;
+        gap: 8px;
+      }
+
+      /* upload step UI */
+      .drop-zone {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 12px;
+        min-height: 240px;
+        padding: 24px;
+        border: 2px dashed var(--md-sys-color-outline-variant, #b8c2cc);
+        border-radius: 12px;
+        background: var(--md-sys-color-surface-container-lowest, #fafbfc);
+        cursor: pointer;
+        transition: border-color 0.15s, background 0.15s;
+      }
+      .drop-zone:hover,
+      .drop-zone.dragover {
+        border-color: var(--md-sys-color-primary, #2a64d8);
+        background: var(--md-sys-color-primary-container, #eaf2ff);
+      }
+      .drop-zone .icon {
+        font-size: 36px;
+        --md-icon-size: 36px;
+        opacity: 0.5;
+      }
+      .drop-zone .title {
+        font-size: 15px;
+        font-weight: 500;
+      }
+      .drop-zone .hint {
+        font-size: 12px;
+        color: var(--md-sys-color-on-secondary-container, #777);
+      }
+      input[type='file'] {
+        display: none;
+      }
+
+      .uploaded {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 12px 16px;
+        background: var(--md-sys-color-tertiary-container, #e8f5e9);
+        border: 1px solid var(--md-sys-color-tertiary, #2e7d32);
+        border-radius: 8px;
+      }
+      .uploaded .name {
+        font-weight: 500;
+      }
+      .uploaded .meta {
+        font-size: 12px;
+        opacity: 0.7;
+        margin-left: auto;
+      }
+
+      /* upload mode tabs — slim underline-only */
+      .mode-tabs {
+        display: flex;
+        gap: 24px;
+        border-bottom: 1px solid var(--md-sys-color-outline-variant, #e0e0e0);
+        margin-bottom: 8px;
+        padding: 0 4px;
+      }
+      .mode-tab {
+        padding: 8px 0 6px;
+        cursor: pointer;
+        font-size: 13px;
+        font-weight: 400;
+        color: var(--md-sys-color-on-secondary-container, #777);
+        border: none;
+        border-bottom: 2px solid transparent;
+        background: transparent;
+        margin-bottom: -1px;
+        transition: color 0.12s, border-color 0.12s;
+        text-transform: capitalize;
+      }
+      .mode-tab:hover {
+        color: var(--md-sys-color-on-surface, #1a1a1a);
+      }
+      .mode-tab.active {
+        color: var(--md-sys-color-primary, #2a64d8);
+        border-bottom-color: var(--md-sys-color-primary, #2a64d8);
+        font-weight: 500;
+      }
+      .mode-tabs.locked .mode-tab:not(.active) {
+        opacity: 0.35;
+        cursor: not-allowed;
+      }
+
+      /* "처음부터" 탭 — popup 스타일 two-column */
+      .scratch-layout {
+        display: flex;
+        flex-direction: row;
+        gap: 16px;
+        flex: 1 0 auto;
+        min-height: 400px;
+      }
+      .scratch-layout .quick-form {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+        width: 260px;
+        flex-shrink: 0;
+      }
+      .template-panel {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+        overflow: hidden;
+      }
+      .template-panel-label {
+        font-size: 12px;
+        font-weight: 500;
+        display: flex;
+        align-items: baseline;
+        gap: 6px;
+      }
+      .template-panel-hint {
+        font-size: 11px;
+        font-weight: 400;
+        color: var(--md-sys-color-on-secondary-container, #888);
+      }
+      /* "템플릿" 탭 — 1컬럼 레이아웃 */
+      .template-layout {
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+      }
+      .template-layout .quick-form {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+      }
+      .template-selected-name {
+        font-size: 11px;
+        font-weight: 600;
+        color: var(--md-sys-color-primary, #2a64d8);
+        margin-left: 2px;
+      }
+      .browse-item.selected {
+        border-color: var(--md-sys-color-primary, #2a64d8);
+        background: var(--md-sys-color-primary-container, #eaf2ff);
+        outline: 2px solid var(--md-sys-color-primary, #2a64d8);
+        outline-offset: -1px;
+      }
+
+      /* browse existing list */
+      .browse-toolbar {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+      }
+      .browse-search {
+        flex: 1;
+        padding: 6px 10px;
+        font-size: 13px;
+        border: 1px solid var(--md-sys-color-outline-variant, #d0d7de);
+        border-radius: 6px;
+      }
+      .browse-list {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
+        gap: 10px;
+        max-height: 320px;
+        overflow-y: auto;
+        padding: 4px;
+      }
+      .browse-item {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        padding: 8px;
+        border: 1px solid var(--md-sys-color-outline-variant, #e0e0e0);
+        border-radius: 8px;
+        background: var(--md-sys-color-surface-container-lowest, #fafbfc);
+        cursor: pointer;
+        transition: border-color 0.12s, background 0.12s;
+      }
+      .browse-item:hover {
+        border-color: var(--md-sys-color-primary, #2a64d8);
+        background: var(--md-sys-color-primary-container, #eaf2ff);
+      }
+      .browse-item .thumb {
+        width: 100%;
+        height: 90px;
+        object-fit: cover;
+        background: #e9ecef;
+        border-radius: 4px;
+      }
+      .browse-item .thumb-fallback {
+        width: 100%;
+        height: 90px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: #e9ecef;
+        border-radius: 4px;
+        color: #888;
+        font-size: 11px;
+      }
+      .browse-item .name {
+        font-size: 12px;
+        font-weight: 500;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      .browse-item .meta {
+        font-size: 11px;
+        color: var(--md-sys-color-on-secondary-container, #777);
+      }
+      .browse-empty {
+        padding: 32px;
+        text-align: center;
+        color: var(--md-sys-color-on-secondary-container, #777);
+        font-size: 13px;
+      }
+
+      /* file preview pane */
+      .preview-pane {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        padding: 12px;
+        background: var(--md-sys-color-surface-container-lowest, #fafbfc);
+        border: 1px solid var(--md-sys-color-outline-variant, #e0e0e0);
+        border-radius: 8px;
+      }
+      .preview-pane .preview-image {
+        max-width: 100%;
+        max-height: 360px;
+        object-fit: contain;
+        background: #f0f0f0;
+        border-radius: 4px;
+        align-self: center;
+      }
+      .preview-pane .preview-fallback {
+        padding: 32px;
+        text-align: center;
+        color: var(--md-sys-color-on-secondary-container, #777);
+        font-size: 13px;
+        background: #f0f0f0;
+        border-radius: 4px;
+      }
+      .preview-pane .info-row {
+        display: flex;
+        font-size: 12px;
+        gap: 8px;
+      }
+      .preview-pane .info-row .label {
+        color: var(--md-sys-color-on-secondary-container, #777);
+        min-width: 80px;
+        text-transform: capitalize;
+      }
+
+      /* user prompt textarea */
+      .user-prompt {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+      }
+      .user-prompt label {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        font-size: 13px;
+        font-weight: 500;
+        text-transform: capitalize;
+      }
+      .user-prompt label .hint {
+        font-size: 11px;
+        font-weight: 400;
+        color: var(--md-sys-color-on-secondary-container, #777);
+      }
+      .user-prompt textarea {
+        font-family: inherit;
+        font-size: 13px;
+        padding: 8px 10px;
+        border: 1px solid var(--md-sys-color-outline-variant, #d0d7de);
+        border-radius: 6px;
+        resize: vertical;
+        min-height: 60px;
+      }
+      .user-prompt textarea:focus {
+        outline: none;
+        border-color: var(--md-sys-color-primary, #2a64d8);
+      }
+
+      .error-banner {
+        padding: 8px 12px;
+        background: var(--md-sys-color-error-container, #fde7e7);
+        color: var(--md-sys-color-on-error-container, #b91c1c);
+        border-radius: 6px;
+        font-size: 13px;
+      }
+
+      /* progress step UI */
+      .progress-card {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+        padding: 24px;
+        background: var(--md-sys-color-surface-container-lowest, #fafbfc);
+        border: 1px solid var(--md-sys-color-outline-variant, #e0e0e0);
+        border-radius: 12px;
+      }
+      .progress-status {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+      }
+      .progress-status .label {
+        font-size: 14px;
+        font-weight: 500;
+      }
+      .progress-status .pct {
+        margin-left: auto;
+        font-size: 13px;
+        color: var(--md-sys-color-on-secondary-container, #777);
+      }
+      .progress-bar {
+        position: relative;
+        height: 6px;
+        background: var(--md-sys-color-outline-variant, #e0e0e0);
+        border-radius: 3px;
+        overflow: hidden;
+      }
+      .progress-bar > .fill {
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        background: var(--md-sys-color-primary, #2a64d8);
+        transition: width 0.3s;
+      }
+      .progress-message {
+        font-size: 12px;
+        color: var(--md-sys-color-on-secondary-container, #777);
+      }
+
+      /* review step */
+      .review-stats {
+        display: flex;
+        gap: 12px;
+        flex-wrap: wrap;
+      }
+      .stat {
+        flex: 1;
+        min-width: 120px;
+        padding: 12px;
+        background: var(--md-sys-color-surface-container-lowest, #fafbfc);
+        border: 1px solid var(--md-sys-color-outline-variant, #e0e0e0);
+        border-radius: 8px;
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+      }
+      .stat .label {
+        font-size: 11px;
+        color: var(--md-sys-color-on-secondary-container, #777);
+        text-transform: uppercase;
+      }
+      .stat .value {
+        font-size: 22px;
+        font-weight: 600;
+      }
+      .warnings {
+        max-height: 160px;
+        overflow-y: auto;
+        padding: 8px 12px;
+        background: var(--md-sys-color-tertiary-container, #fff8e1);
+        border: 1px solid var(--md-sys-color-tertiary, #b08e00);
+        border-radius: 6px;
+        font-size: 12px;
+      }
+      .warnings ul {
+        margin: 4px 0 0;
+        padding-left: 16px;
+      }
+
+      /* AI 분석 요약 카드 */
+      .ai-summary {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+        padding: 12px 14px;
+        background: var(--md-sys-color-primary-container, #eaf2ff);
+        border: 1px solid var(--md-sys-color-primary, #2a64d8);
+        border-radius: 8px;
+      }
+      .ai-summary .title {
+        font-weight: 600;
+        font-size: 13px;
+      }
+      .ai-summary .row {
+        display: flex;
+        gap: 8px;
+        font-size: 12px;
+      }
+      .ai-summary .row .label {
+        color: var(--md-sys-color-on-secondary-container, #555);
+        min-width: 100px;
+        flex-shrink: 0;
+        text-transform: capitalize;
+      }
+      .ai-summary .row .value {
+        flex: 1;
+        word-break: break-word;
+      }
+      .ai-summary .badge {
+        display: inline-block;
+        padding: 1px 6px;
+        margin-right: 4px;
+        font-size: 11px;
+        background: var(--md-sys-color-surface, #fff);
+        border: 1px solid var(--md-sys-color-outline-variant, #d0d7de);
+        border-radius: 10px;
+      }
+      .ai-summary .strategy {
+        margin-top: 4px;
+        padding: 8px 10px;
+        background: var(--md-sys-color-surface, #fff);
+        border-left: 3px solid var(--md-sys-color-primary, #2a64d8);
+        border-radius: 4px;
+      }
+      .ai-summary .strategy-label {
+        font-size: 12px;
+        font-weight: 600;
+        color: var(--md-sys-color-primary, #2a64d8);
+        margin-bottom: 4px;
+      }
+      .ai-summary .strategy-text {
+        font-size: 12px;
+        line-height: 1.5;
+        color: var(--md-sys-color-on-surface, #1a1a1a);
+        white-space: pre-wrap;
+      }
+
+      /* variant picker */
+      .variant-picker {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+      }
+      .variant-picker-header {
+        display: flex;
+        align-items: baseline;
+        gap: 8px;
+      }
+      .variant-picker-header strong {
+        font-size: 13px;
+      }
+      .variant-picker-hint {
+        flex: 1;
+        font-size: 11px;
+        color: var(--md-sys-color-on-secondary-container, #777);
+      }
+      .regenerate-btn {
+        font-size: 12px;
+        padding: 4px 10px;
+        background: var(--md-sys-color-surface, #fff);
+        border: 1px solid var(--md-sys-color-outline-variant, #d0d7de);
+        border-radius: 4px;
+        cursor: pointer;
+      }
+      .regenerate-btn:hover {
+        background: var(--md-sys-color-surface-container, #f5f5f5);
+      }
+      .variant-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+        gap: 10px;
+      }
+      .variant-card {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        padding: 4px;
+        border: 2px solid var(--md-sys-color-outline-variant, #e0e0e0);
+        border-radius: 8px;
+        background: var(--md-sys-color-surface, #fff);
+        cursor: pointer;
+        transition: border-color 0.12s, box-shadow 0.12s;
+      }
+      .variant-card:hover {
+        border-color: var(--md-sys-color-primary, #2a64d8);
+      }
+      .variant-card.selected {
+        border-color: var(--md-sys-color-primary, #2a64d8);
+        box-shadow: 0 0 0 2px var(--md-sys-color-primary-container, #eaf2ff);
+      }
+      .variant-thumb {
+        width: 100%;
+        height: 140px;
+        background: var(--md-sys-color-surface-container-lowest, #fafbfc);
+        border: 1px solid var(--md-sys-color-outline-variant, #e0e0e0);
+        border-radius: 4px;
+        overflow: hidden;
+      }
+      .variant-thumb ox-board-preview {
+        width: 100%;
+        height: 100%;
+      }
+      .variant-meta {
+        padding: 4px 6px 6px;
+      }
+      .variant-label {
+        font-size: 13px;
+        font-weight: 600;
+      }
+      .variant-desc {
+        font-size: 11px;
+        color: var(--md-sys-color-on-secondary-container, #777);
+        margin-top: 2px;
+      }
+      .variant-stats {
+        font-size: 11px;
+        color: var(--md-sys-color-on-secondary-container, #555);
+        margin-top: 4px;
+      }
+
+      /* big-preview — selected variant 큰 미리보기 */
+      .big-preview {
+        width: 100%;
+        height: 360px;
+        background: var(--md-sys-color-surface-container-lowest, #fafbfc);
+        border: 1px solid var(--md-sys-color-outline-variant, #e0e0e0);
+        border-radius: 8px;
+        overflow: hidden;
+      }
+      .big-preview ox-board-preview {
+        width: 100%;
+        height: 100%;
+      }
+
+      /* blank / template mode UI */
+      .mode-info {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 8px;
+        padding: 32px 16px;
+        text-align: center;
+      }
+      .mode-info .icon {
+        font-size: 36px;
+        opacity: 0.6;
+      }
+      .mode-info .title {
+        font-size: 15px;
+        font-weight: 600;
+      }
+      .mode-info .desc {
+        font-size: 12px;
+        color: var(--md-sys-color-on-secondary-container, #777);
+        max-width: 480px;
+      }
+      .mode-info .primary {
+        margin-top: 8px;
+      }
+      .mode-hint {
+        padding: 10px 12px;
+        font-size: 12px;
+        color: var(--md-sys-color-on-secondary-container, #555);
+        background: var(--md-sys-color-surface-container-lowest, #fafbfc);
+        border-left: 3px solid var(--md-sys-color-primary, #2a64d8);
+        border-radius: 4px;
+      }
+
+      /* meta input — board type radios + group select */
+      .meta-input {
+        display: flex;
+        gap: 16px;
+        flex-wrap: wrap;
+      }
+      .meta-field {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        min-width: 180px;
+      }
+      .meta-field label {
+        font-size: 12px;
+        font-weight: 500;
+        text-transform: capitalize;
+      }
+      .meta-field select {
+        padding: 6px 8px;
+        font-size: 13px;
+        border: 1px solid var(--md-sys-color-outline-variant, #d0d7de);
+        border-radius: 6px;
+      }
+      .board-type-radios {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+      }
+      .radio-label {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        font-size: 13px;
+      }
+
+      .quick-form .controls {
+        margin-top: auto;
+      }
+      .name-input {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+      }
+      .name-input label {
+        font-size: 12px;
+        font-weight: 500;
+        text-transform: capitalize;
+      }
+      .name-input input {
+        padding: 8px 10px;
+        font-size: 14px;
+        border: 1px solid var(--md-sys-color-outline-variant, #d0d7de);
+        border-radius: 6px;
+        outline: none;
+      }
+      .name-input input:focus {
+        border-color: var(--md-sys-color-primary, #2a64d8);
+      }
+
+      .description-input {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+      }
+      .description-input label {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        font-size: 12px;
+        font-weight: 500;
+        text-transform: capitalize;
+      }
+      .description-input label .hint {
+        font-size: 11px;
+        font-weight: 400;
+        color: var(--md-sys-color-on-secondary-container, #777);
+      }
+      .description-input textarea {
+        font-family: inherit;
+        font-size: 13px;
+        line-height: 1.5;
+        padding: 8px 10px;
+        border: 1px solid var(--md-sys-color-outline-variant, #d0d7de);
+        border-radius: 6px;
+        outline: none;
+        resize: vertical;
+        min-height: 90px;
+      }
+      .description-input textarea:focus {
+        border-color: var(--md-sys-color-primary, #2a64d8);
+      }
+
+      /* done step */
+      .done-card {
+        text-align: center;
+        padding: 32px 24px;
+        background: var(--md-sys-color-tertiary-container, #e8f5e9);
+        border-radius: 12px;
+      }
+      .done-card .icon {
+        font-size: 48px;
+        --md-icon-size: 48px;
+        color: var(--md-sys-color-tertiary, #2e7d32);
+      }
+      .done-card .title {
+        font-size: 18px;
+        font-weight: 600;
+        margin-top: 8px;
+      }
+      .done-card .meta {
+        font-size: 13px;
+        color: var(--md-sys-color-on-secondary-container, #555);
+        margin-top: 4px;
+      }
+
+      button.primary {
+        padding: 8px 16px;
+        background: var(--md-sys-color-primary, #2a64d8);
+        color: white;
+        border: none;
+        border-radius: 6px;
+        font-weight: 500;
+        cursor: pointer;
+        text-transform: capitalize;
+      }
+      button.primary:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+      button.secondary {
+        padding: 8px 16px;
+        background: transparent;
+        color: var(--md-sys-color-on-surface, #333);
+        border: 1px solid var(--md-sys-color-outline-variant, #d0d7de);
+        border-radius: 6px;
+        cursor: pointer;
+        text-transform: capitalize;
+      }
+    `
+    ]; }
+    /** wizard 제목 / 설명 — page header 에 노출. */
+    get context() {
+        return {
+            title: i18next.t('title.create board') || 'Create Board',
+            board_topmenu: false
+        };
+    }
+    render() {
+        return html `
+      <div class="header">
+        <h1>${i18next.t('title.create board') || 'Create Board'}</h1>
+      </div>
+
+      ${this._renderModeTabs()}
+
+      <div class="stage">
+        ${this._uploadMode === 'blank'
+            ? this._renderFromScratchTab()
+            : this._uploadMode === 'template'
+                ? this._renderFromTemplateTab()
+                : this._renderFileWizard()}
+      </div>
+    `;
+    }
+    _renderModeTabs() {
+        // 파일 위자드가 upload 단계를 지나면 탭 전환 불가 (진행 중 이탈 방지)
+        const locked = this._isFileMode() && this._step !== 'upload';
+        return html `
+      <div class="mode-tabs ${locked ? 'locked' : ''}">
+        <button
+          class="mode-tab ${this._uploadMode === 'blank' ? 'active' : ''}"
+          ?disabled=${locked}
+          @click=${() => this._setUploadMode('blank')}
+        >
+          ${i18next.t('label.from-scratch') || 'From Scratch'}
+        </button>
+        <button
+          class="mode-tab ${this._uploadMode === 'template' ? 'active' : ''}"
+          ?disabled=${locked}
+          @click=${() => this._setUploadMode('template')}
+        >
+          ${i18next.t('label.from-template') || 'From Template'}
+        </button>
+        <button
+          class="mode-tab ${this._uploadMode === 'new' ? 'active' : ''}"
+          ?disabled=${locked}
+          @click=${() => this._setUploadMode('new')}
+        >
+          ${i18next.t('label.from-new-drawing') || 'From New Drawing'}
+        </button>
+        <button
+          class="mode-tab ${this._uploadMode === 'existing' ? 'active' : ''}"
+          ?disabled=${locked}
+          @click=${() => this._setUploadMode('existing')}
+        >
+          ${i18next.t('label.from-existing-drawing') || 'From Existing Drawing'}
+        </button>
+      </div>
+    `;
+    }
+    _renderFileWizard() {
+        return html `
+      ${this._renderStepper()}
+      ${this._step === 'upload' ? this._renderFileUploadUI() : ''}
+      ${this._step === 'progress' ? this._renderProgressStep() : ''}
+      ${this._step === 'review' ? this._renderReviewStep() : ''}
+      ${this._step === 'done' ? this._renderDoneStep() : ''}
+    `;
+    }
+    _renderStepper() {
+        const firstLabel = this._uploadMode === 'existing'
+            ? i18next.t('label.select file') || 'Select File'
+            : i18next.t('label.upload') || 'Upload';
+        const steps = [
+            { key: 'upload', label: firstLabel },
+            { key: 'progress', label: i18next.t('label.import progress') || 'Conversion Progress' },
+            { key: 'review', label: i18next.t('label.review') || 'Review' },
+            { key: 'done', label: i18next.t('label.done') || 'Done' }
+        ];
+        const activeIndex = steps.findIndex(s => s.key === this._step);
+        return html `
+      <div class="stepper">
+        ${steps.map((s, i) => {
+            const cls = i < activeIndex ? 'step done' : i === activeIndex ? 'step active' : 'step';
+            return html `
+            ${i > 0 ? html `<span class="arrow">›</span>` : ''}
+            <span class=${cls}>
+              <span class="index">${i + 1}</span>
+              ${s.label}
+            </span>
+          `;
+        })}
+      </div>
+    `;
+    }
+    // ── upload step (파일 모드) ──────────────────────────────────────
+    _renderFileUploadUI() {
+        return html `
+      ${this._uploadError ? html `<div class="error-banner">${this._uploadError}</div>` : ''}
+      ${this._uploadMode === 'new' ? this._renderNewUpload() : this._renderBrowseExisting()}
+      ${this._attachment ? this._renderSelectedPreview() : ''}
+    `;
+    }
+    /** "처음부터" 탭 — 빈 보드 생성 전용 단순 폼. 템플릿 없음. */
+    _renderFromScratchTab() {
+        return html `
+      <div class="quick-form">
+        ${this._renderBoardForm('blank')}
+      </div>
+    `;
+    }
+    /** "템플릿" 탭 — existing files와 동일한 browse-item 카드 스타일. */
+    _renderFromTemplateTab() {
+        const filtered = this._templateSearch
+            ? this._templates.filter(t => t.name.toLowerCase().includes(this._templateSearch.toLowerCase()) ||
+                (t.description || '').toLowerCase().includes(this._templateSearch.toLowerCase()))
+            : this._templates;
+        return html `
+      <div class="template-layout">
+        <div>
+          <div class="browse-toolbar">
+            <input
+              class="browse-search"
+              type="search"
+              placeholder=${i18next.t('placeholder.search template') || 'Search templates'}
+              .value=${this._templateSearch}
+              @input=${(e) => (this._templateSearch = e.target.value)}
+            />
+            <button
+              class="secondary"
+              @click=${() => this._loadTemplates(true)}
+              ?disabled=${this._templatesLoading}
+            >
+              ${i18next.t('button.refresh') || 'Refresh'}
+            </button>
+          </div>
+
+          ${this._templatesLoading
+            ? html `<div class="browse-empty">${i18next.t('text.loading') || 'Loading...'}</div>`
+            : filtered.length === 0
+                ? html `<div class="browse-empty">
+                ${i18next.t('text.no templates') || 'No templates available.'}
+              </div>`
+                : html `
+                <div class="browse-list">
+                  ${filtered.map(t => html `
+                      <div
+                        class="browse-item ${this._selectedTemplate?.id === t.id ? 'selected' : ''}"
+                        title=${t.name}
+                        @click=${() => this._selectTemplate(t.id)}
+                      >
+                        ${t.thumbnail
+                    ? html `<img class="thumb" src=${t.thumbnail} />`
+                    : html `<div class="thumb-fallback">BOARD</div>`}
+                        <div class="name">${t.name}</div>
+                        ${t.description
+                    ? html `<div class="meta">${t.description}</div>`
+                    : ''}
+                      </div>
+                    `)}
+                </div>
+              `}
+        </div>
+
+        <div class="quick-form">
+          ${this._renderBoardForm('template')}
+        </div>
+      </div>
+    `;
+    }
+    /** 공통 보드 생성 폼 (blank / template 모드 공유). */
+    _renderBoardForm(mode) {
+        const canSubmit = !!this._effectiveName() && (mode === 'blank' || !!this._selectedTemplate?.model);
+        return html `
+      <div class="name-input">
+        <label for="board-name">
+          ${i18next.t('label.new board name') || 'New Board Name'} *
+        </label>
+        <input
+          id="board-name"
+          type="text"
+          placeholder=${this._selectedTemplate?.name ?? (i18next.t('placeholder.board name') || 'New Board')}
+          .value=${this._newBoardName}
+          @input=${(e) => (this._newBoardName = e.target.value)}
+          ?disabled=${this._materializing}
+        />
+      </div>
+
+      <div class="description-input">
+        <label for="board-description">
+          ${i18next.t('label.board description') || 'Board Description'}
+        </label>
+        <textarea
+          id="board-description"
+          .value=${this._newBoardDescription}
+          @input=${(e) => (this._newBoardDescription = e.target.value)}
+          ?disabled=${this._materializing}
+          placeholder=${i18next.t('placeholder.board description') || 'Detailed description (optional)'}
+        ></textarea>
+      </div>
+
+      <div class="meta-input">
+        <div class="meta-field">
+          <label>${i18next.t('label.board-type') || 'Board Type'}</label>
+          <div class="board-type-radios">
+            ${['main', 'sub', 'popup'].map(t => html `
+                <label class="radio-label">
+                  <input
+                    type="radio"
+                    name="quick-board-type"
+                    value=${t}
+                    .checked=${this._selectedBoardType === t}
+                    @change=${() => (this._selectedBoardType = t)}
+                  />
+                  ${t}
+                </label>
+              `)}
+          </div>
+        </div>
+        <div class="meta-field">
+          <label for="quick-group">${i18next.t('label.group') || 'Group'}</label>
+          <select
+            id="quick-group"
+            .value=${this._selectedGroupId}
+            @change=${(e) => (this._selectedGroupId = e.target.value)}
+            ?disabled=${this._materializing}
+          >
+            <option value="">${i18next.t('label.no group') || '(No Group)'}</option>
+            ${this._groups.map(g => html `<option value=${g.id}>${g.name}</option>`)}
+          </select>
+        </div>
+      </div>
+
+      ${this._materializeError
+            ? html `<div class="error-banner">${this._materializeError}</div>`
+            : ''}
+
+      <div class="controls">
+        <button
+          class="primary"
+          @click=${this._materialize}
+          ?disabled=${this._materializing || !canSubmit}
+        >
+          ${this._materializing
+            ? i18next.t('text.saving') || 'Saving...'
+            : i18next.t('button.create board') || 'Create Board'}
+        </button>
+      </div>
+    `;
+    }
+    _renderNewUpload() {
+        return html `
+      <label
+        class="drop-zone"
+        @dragover=${(e) => {
+            e.preventDefault();
+            e.currentTarget.classList.add('dragover');
+        }}
+        @dragleave=${(e) => {
+            ;
+            e.currentTarget.classList.remove('dragover');
+        }}
+        @drop=${this._onDrop}
+      >
+        <md-icon class="icon">upload</md-icon>
+        <div class="title">${this._uploading ? i18next.t('text.uploading') || 'Uploading...' : i18next.t('text.drop or click to upload') || 'Drop a drawing here or click to browse'}</div>
+        <div class="hint">${ACCEPT}</div>
+        <input
+          type="file"
+          accept=${ACCEPT}
+          ?disabled=${this._uploading}
+          @change=${this._onFileChange}
+        />
+      </label>
+    `;
+    }
+    _renderBrowseExisting() {
+        return html `
+      <div class="browse-toolbar">
+        <input
+          class="browse-search"
+          type="search"
+          placeholder=${i18next.t('placeholder.search file') || 'Search by filename'}
+          .value=${this._browseSearch}
+          @input=${(e) => {
+            this._browseSearch = e.target.value;
+            this._refreshBrowse();
+        }}
+        />
+        <button
+          class="secondary"
+          @click=${() => this._refreshBrowse()}
+          ?disabled=${this._browseLoading}
+        >
+          ${i18next.t('button.refresh') || 'Refresh'}
+        </button>
+      </div>
+
+      ${this._browseLoading
+            ? html `<div class="browse-empty">${i18next.t('text.loading') || 'Loading...'}</div>`
+            : this._browseItems.length === 0
+                ? html `<div class="browse-empty">
+            ${i18next.t('text.no existing files') ||
+                    'No drawing or image files found. Use the \'From New Drawing\' tab to upload.'}
+          </div>`
+                : html `
+            <div class="browse-list">
+              ${this._browseItems.map(item => html `
+                  <div
+                    class="browse-item"
+                    title=${item.name}
+                    @click=${() => this._selectExisting(item)}
+                  >
+                    ${this._isImageMime(item.mimetype)
+                    ? html `<img class="thumb" src="/attachment/${item.path}" />`
+                    : html `<div class="thumb-fallback">
+                          ${(item.mimetype?.split('/')[1] || 'file').toUpperCase()}
+                        </div>`}
+                    <div class="name">${item.name}</div>
+                    <div class="meta">
+                      ${item.size ? this._formatSize(item.size) : ''}
+                      ${item.mimetype ? ' · ' + item.mimetype : ''}
+                    </div>
+                  </div>
+                `)}
+            </div>
+          `}
+    `;
+    }
+    /**
+     * 선택된 attachment 의 미리보기 + 변환 시작 버튼. 두 모드 (new/existing) 공통 렌더링.
+     * 이미지 mimetype 이면 실제 이미지를 띄우고, 아니면 메타정보 카드만.
+     * 추가로 사용자 prompt textarea — VLM 의 view type 분류 + entity 추출에 hint 로 합류.
+     */
+    _renderSelectedPreview() {
+        if (!this._attachment)
+            return '';
+        const a = this._attachment;
+        const isImage = this._isImageMime(a.mimetype);
+        return html `
+      <div class="preview-pane">
+        ${isImage
+            ? html `<img class="preview-image" src="/attachment/${a.path}" />`
+            : html `<div class="preview-fallback">
+              ${(a.mimetype || 'file').toUpperCase()}
+            </div>`}
+        <div class="info-row">
+          <span class="label">${i18next.t('label.name') || 'Name'}</span>
+          <span>${a.name}</span>
+        </div>
+        <div class="info-row">
+          <span class="label">${i18next.t('label.mimetype') || 'MIME'}</span>
+          <span>${a.mimetype || 'unknown'}</span>
+        </div>
+        <div class="info-row">
+          <span class="label">${i18next.t('label.size') || 'Size'}</span>
+          <span>${a.size ? this._formatSize(a.size) : '-'}</span>
+        </div>
+      </div>
+
+      <div class="user-prompt">
+        <label>
+          ${i18next.t('label.user prompt') || 'Drawing notes / key features'}
+          <span class="hint">
+            ${i18next.t('hint.user prompt') ||
+            'Optional — e.g. "FAB lithography zone, large rectangles are stockers, thin lines are OHT rails"'}
+          </span>
+        </label>
+        <textarea
+          rows="3"
+          .value=${this._userPrompt}
+          @input=${(e) => (this._userPrompt = e.target.value)}
+          ?disabled=${this._uploading}
+          placeholder=${i18next.t('placeholder.user prompt') ||
+            'Add notes about this drawing (optional)'}
+        ></textarea>
+      </div>
+
+      <div class="controls">
+        <button class="secondary" @click=${this._resetUpload} ?disabled=${this._uploading}>
+          ${i18next.t('button.choose another') || 'Choose Another File'}
+        </button>
+        <button class="primary" @click=${this._proceedToImport} ?disabled=${this._uploading}>
+          ${i18next.t('button.start import') || 'Start Conversion'}
+        </button>
+      </div>
+    `;
+    }
+    _isImageMime(mime) {
+        return !!mime && mime.toLowerCase().startsWith('image/');
+    }
+    async _setUploadMode(mode) {
+        this._uploadMode = mode;
+        if (mode === 'existing' && this._browseItems.length === 0 && !this._browseLoading) {
+            await this._refreshBrowse();
+        }
+        if (mode === 'template' && !this._templatesLoaded && !this._templatesLoading) {
+            await this._loadTemplates();
+        }
+        // blank/template 진입 시 group 목록 lazy fetch (review step 의 group selector 용)
+        if ((mode === 'blank' || mode === 'template') && !this._groupsLoaded) {
+            await this._loadGroups();
+        }
+    }
+    async _loadGroups() {
+        try {
+            const res = await fetchGroupList();
+            const items = res?.groups?.items;
+            this._groups = Array.isArray(items) ? items : [];
+        }
+        catch (err) {
+            console.warn('[board-create-wizard] fetchGroupList failed', err);
+            this._groups = [];
+        }
+        this._groupsLoaded = true;
+    }
+    async _loadTemplates(force = false) {
+        if (this._templatesLoaded && !force)
+            return;
+        this._templatesLoading = true;
+        try {
+            const data = await fetchBoardTemplateList({ pagination: { limit: 100, page: 1 } });
+            this._templates = data?.boardTemplates?.items || [];
+            this._templatesLoaded = true;
+        }
+        catch (err) {
+            console.warn('[board-create-wizard] fetchBoardTemplateList failed', err);
+            this._templates = [];
+        }
+        this._templatesLoading = false;
+    }
+    async _selectTemplate(id) {
+        const data = await fetchBoardTemplate(id);
+        let template = data?.boardTemplate;
+        if (template?.model)
+            template = { ...template, model: JSON.parse(template.model) };
+        this._selectedTemplate = template || undefined;
+        if (template?.name && !this._newBoardName) {
+            this._newBoardName = template.name;
+        }
+    }
+    /**
+     * 기존 attachment 목록 fetch — 이미지 + DXF 만 (mimetype prefix 'image' 1차 + 검색은 파일명).
+     * mimetype 단일 prefix 만 지원하는 백엔드 한계로 image / application 분리 query 가 필요하지만,
+     * MVP 는 두 번 fetch 해서 합치는 단순 방식.
+     */
+    async _refreshBrowse() {
+        this._browseLoading = true;
+        try {
+            const [imgs, others] = await Promise.all([
+                fetchAttachmentsForImport({
+                    search: this._browseSearch || undefined,
+                    mimetypePrefix: 'image',
+                    limit: 30
+                }),
+                fetchAttachmentsForImport({
+                    search: (this._browseSearch || '') + '%.dxf',
+                    limit: 20
+                })
+            ]);
+            // 단순 합치기 — image first, then DXF, dedupe by id
+            const seen = new Set();
+            const merged = [];
+            for (const it of [...imgs.items, ...others.items]) {
+                if (!seen.has(it.id)) {
+                    seen.add(it.id);
+                    merged.push(it);
+                }
+            }
+            this._browseItems = merged;
+        }
+        catch (err) {
+            notify({ level: 'error', message: err?.message || String(err) });
+            this._browseItems = [];
+        }
+        finally {
+            this._browseLoading = false;
+        }
+    }
+    _selectExisting(item) {
+        this._attachment = item;
+        this._uploadError = undefined;
+    }
+    async _onFileChange(e) {
+        const input = e.target;
+        const file = input.files?.[0];
+        if (file)
+            await this._uploadFile(file);
+        // value 초기화 — 같은 파일 재선택 가능
+        input.value = '';
+    }
+    async _onDrop(e) {
+        e.preventDefault();
+        e.currentTarget.classList.remove('dragover');
+        const file = e.dataTransfer?.files?.[0];
+        if (file)
+            await this._uploadFile(file);
+    }
+    async _uploadFile(file) {
+        this._uploading = true;
+        this._uploadError = undefined;
+        try {
+            const result = await createAttachmentForImport(file);
+            this._attachment = result;
+        }
+        catch (err) {
+            const message = err?.message || String(err);
+            this._uploadError = message;
+            notify({ level: 'error', message });
+        }
+        finally {
+            this._uploading = false;
+        }
+    }
+    _resetUpload() {
+        this._attachment = undefined;
+        this._uploadError = undefined;
+    }
+    async _proceedToImport() {
+        if (!this._attachment)
+            return;
+        this._step = 'progress';
+        this._importError = undefined;
+        this._session = undefined;
+        try {
+            const session = await importBoardAsync({
+                attachmentId: this._attachment.id,
+                userPrompt: this._userPrompt.trim() || undefined
+            });
+            this._session = session;
+            this._startPolling();
+        }
+        catch (err) {
+            const message = err?.message || String(err);
+            this._importError = message;
+            notify({ level: 'error', message });
+        }
+    }
+    // ── progress step ───────────────────────────────────────────────
+    /**
+     * polling — 1초 간격으로 fetchImportSession.
+     *  - status='completed' → review step
+     *  - status='failed' → error 표시 + 재시도 가능
+     *  - 그 외 → progress UI 갱신 후 다시 polling
+     *
+     * 취소 시점: pollingTimer 명시 clear (다음 단계 진입 / 페이지 떠남).
+     */
+    _startPolling() {
+        this._stopPolling();
+        const tick = async () => {
+            if (!this._session?.id)
+                return;
+            try {
+                const fresh = await fetchImportSession(this._session.id);
+                this._session = fresh;
+                if (fresh?.status === 'completed') {
+                    this._stopPolling();
+                    this._step = 'review';
+                    // 보드 이름 자동 추천 — 충돌 회피된 이름을 서버에서 받아서 input default 로.
+                    // 이미 사용자가 수정한 값이 있으면 덮어쓰지 않음.
+                    if (!this._newBoardName && !this._newBoardDescription) {
+                        try {
+                            const meta = await suggestBoardMeta({ sessionId: fresh.id });
+                            // 사용자가 이미 수정한 값 보존 — name/description 각각 독립 체크
+                            if (meta?.name && !this._newBoardName)
+                                this._newBoardName = meta.name;
+                            if (meta?.description && !this._newBoardDescription) {
+                                this._newBoardDescription = meta.description;
+                            }
+                        }
+                        catch (err) {
+                            console.warn('[board-create-wizard] suggestBoardMeta failed', err);
+                        }
+                    }
+                    return;
+                }
+                if (fresh?.status === 'failed') {
+                    this._stopPolling();
+                    this._importError = fresh.message || 'Import failed';
+                    return;
+                }
+            }
+            catch (err) {
+                // polling 일시적 에러는 무시 — 다음 tick 에 재시도. 단 너무 자주면 사용자에 노출.
+                console.warn('[board-create-wizard] polling error', err);
+            }
+            this._pollingTimer = window.setTimeout(tick, 1000);
+        };
+        // 즉시 1회 + 이후 setTimeout chain
+        this._pollingTimer = window.setTimeout(tick, 0);
+    }
+    _stopPolling() {
+        if (this._pollingTimer) {
+            clearTimeout(this._pollingTimer);
+            this._pollingTimer = undefined;
+        }
+    }
+    _renderProgressStep() {
+        if (this._importError) {
+            return html `
+        <div class="error-banner">${this._importError}</div>
+        <div class="controls">
+          <button class="secondary" @click=${this._retryFromUpload}>
+            ${i18next.t('button.retry') || 'Retry'}
+          </button>
+        </div>
+      `;
+        }
+        const session = this._session;
+        const progress = session?.progress ?? 0;
+        const status = session?.status ?? 'queued';
+        const message = session?.message ?? '';
+        return html `
+      <div class="progress-card">
+        <div class="progress-status">
+          <span class="label">${this._statusLabel(status)}</span>
+          <span class="pct">${Math.round(progress)}%</span>
+        </div>
+        <div class="progress-bar">
+          <div class="fill" style="width: ${Math.min(100, Math.max(0, progress))}%"></div>
+        </div>
+        ${message ? html `<div class="progress-message">${message}</div>` : ''}
+      </div>
+    `;
+    }
+    _statusLabel(status) {
+        switch (status) {
+            case 'queued': return i18next.t('label.queued') || 'Queued';
+            case 'parsing': return i18next.t('label.parsing') || 'Parsing';
+            case 'mapping': return i18next.t('label.mapping') || 'Mapping';
+            case 'assembling': return i18next.t('label.assembling') || 'Assembling Board';
+            case 'binding': return i18next.t('label.binding') || 'Data Binding';
+            case 'completed': return i18next.t('label.completed') || 'Completed';
+            case 'failed': return i18next.t('label.failed') || 'Failed';
+            default: return status;
+        }
+    }
+    _retryFromUpload() {
+        this._stopPolling();
+        this._session = undefined;
+        this._importError = undefined;
+        this._step = 'upload';
+    }
+    disconnectedCallback() {
+        this._stopPolling();
+        super.disconnectedCallback();
+    }
+    /**
+     * step 이나 session 변경 시 polling 상태 동기화. step='progress' + session 존재 + 종료 안된
+     * 상태에서만 polling 활성화. 그 외 상태로 진입하면 자동 정리.
+     */
+    updated(changes) {
+        super.updated(changes);
+        if (changes.has('_step') || changes.has('_session')) {
+            const session = this._session;
+            const inProgress = this._step === 'progress';
+            const sessionAlive = session && session.status !== 'completed' && session.status !== 'failed';
+            if (inProgress && sessionAlive && !this._pollingTimer) {
+                this._startPolling();
+            }
+            else if (!inProgress || !sessionAlive) {
+                this._stopPolling();
+            }
+        }
+    }
+    // ── review step ─────────────────────────────────────────────────
+    _renderReviewStep() {
+        return html `
+      ${this._materializeError
+            ? html `<div class="error-banner">${this._materializeError}</div>`
+            : ''}
+
+      ${this._renderFileReviewBody()}
+
+      <div class="name-input">
+        <label for="board-name">${i18next.t('label.new board name') || 'New Board Name'}</label>
+        <input
+          id="board-name"
+          type="text"
+          placeholder=${this._attachment?.name?.replace(/\.[^.]+$/, '') ??
+            this._selectedTemplate?.name ?? (i18next.t('placeholder.board name') || 'New Board')}
+          .value=${this._newBoardName}
+          @input=${(e) => (this._newBoardName = e.target.value)}
+          ?disabled=${this._materializing}
+        />
+      </div>
+
+      <div class="description-input">
+        <label for="board-description">
+          ${i18next.t('label.board description') || 'Board Description'}
+        </label>
+        <textarea
+          id="board-description"
+          rows="3"
+          .value=${this._newBoardDescription}
+          @input=${(e) => (this._newBoardDescription = e.target.value)}
+          ?disabled=${this._materializing}
+          placeholder=${i18next.t('placeholder.board description') ||
+            'Detailed description (optional)'}
+        ></textarea>
+      </div>
+
+      <div class="meta-input">
+        <div class="meta-field">
+          <label>${i18next.t('label.board-type') || 'Board Type'}</label>
+          <div class="board-type-radios">
+            ${['main', 'sub', 'popup'].map(t => html `
+                <label class="radio-label">
+                  <input
+                    type="radio"
+                    name="board-type"
+                    value=${t}
+                    .checked=${this._selectedBoardType === t}
+                    @change=${() => (this._selectedBoardType = t)}
+                  />
+                  ${t}
+                </label>
+              `)}
+          </div>
+        </div>
+        <div class="meta-field">
+          <label for="board-group">${i18next.t('label.group') || 'Group'}</label>
+          <select
+            id="board-group"
+            .value=${this._selectedGroupId}
+            @change=${(e) => (this._selectedGroupId = e.target.value)}
+            ?disabled=${this._materializing}
+          >
+            <option value="">
+              ${i18next.t('label.no group') || '(No Group)'}
+            </option>
+            ${this._groups.map(g => html `<option value=${g.id}>${g.name}</option>`)}
+          </select>
+        </div>
+      </div>
+
+      <div class="controls">
+        <button class="secondary" @click=${this._retryFromUpload} ?disabled=${this._materializing}>
+          ${i18next.t('button.start over') || 'Start Over'}
+        </button>
+        <button
+          class="primary"
+          @click=${this._materialize}
+          ?disabled=${this._materializing || !this._effectiveName()}
+        >
+          ${this._materializing
+            ? i18next.t('text.saving') || 'Saving...'
+            : i18next.t('button.save as new board') || 'Save as New Board'}
+        </button>
+      </div>
+    `;
+    }
+    /** 파일 import 모드 여부 — true 면 variants/AI 분석 표시, false 면 단순 정보 입력. */
+    _isFileMode() {
+        return this._uploadMode === 'new' || this._uploadMode === 'existing';
+    }
+    /** review 의 파일 모드 본문 — variants picker + AI 분석 + 큰 preview + stats + warnings. */
+    _renderFileReviewBody() {
+        const result = this._session?.result;
+        const variants = Array.isArray(result?.variants) ? result.variants : [];
+        const selected = this._getSelectedVariant(variants, result);
+        const stats = selected?.stats ?? result?.stats ?? {};
+        const warnings = (selected?.warnings ?? result?.warnings ?? []).map((w) => typeof w === 'string' ? w : w.message ?? JSON.stringify(w));
+        return html `
+      ${variants.length > 1 ? this._renderVariantPicker(variants, selected) : ''}
+      ${this._renderAISummary(result, selected)}
+
+      ${selected?.boardModel
+            ? html `
+            <div class="big-preview">
+              <ox-board-preview
+                .boardModel=${selected.boardModel}
+                interactive
+              ></ox-board-preview>
+            </div>
+          `
+            : ''}
+
+      <div class="review-stats">
+        <div class="stat">
+          <span class="label">${i18next.t('label.entities') || 'Entities'}</span>
+          <span class="value">${stats.total ?? '?'}</span>
+        </div>
+        <div class="stat">
+          <span class="label">${i18next.t('label.matched') || 'Matched'}</span>
+          <span class="value">${stats.matched ?? 0}</span>
+        </div>
+        <div class="stat">
+          <span class="label">${i18next.t('label.generic') || 'Generic'}</span>
+          <span class="value">${stats.generic ?? 0}</span>
+        </div>
+        <div class="stat">
+          <span class="label">${i18next.t('label.warnings') || 'Warnings'}</span>
+          <span class="value">${warnings.length}</span>
+        </div>
+      </div>
+
+      ${warnings.length > 0
+            ? html `
+            <div class="warnings">
+              <strong>${i18next.t('label.warnings') || 'Warnings'}:</strong>
+              <ul>
+                ${warnings.slice(0, 20).map(w => html `<li>${w}</li>`)}
+                ${warnings.length > 20
+                ? html `<li>… +${warnings.length - 20} more</li>`
+                : ''}
+              </ul>
+            </div>
+          `
+            : ''}
+    `;
+    }
+    /**
+     * 사용자가 선택한 시안 — _selectedVariantId 우선, 없으면 result.defaultVariantId, 없으면 첫 시안.
+     */
+    _getSelectedVariant(variants, result) {
+        if (variants.length === 0)
+            return undefined;
+        if (this._selectedVariantId) {
+            const found = variants.find(v => v.id === this._selectedVariantId);
+            if (found)
+                return found;
+        }
+        if (result?.defaultVariantId) {
+            const found = variants.find(v => v.id === result.defaultVariantId);
+            if (found)
+                return found;
+        }
+        return variants[0];
+    }
+    /**
+     * 3 시안 picker — 썸네일 + 라벨 + 클릭 시 선택. 시안이 1개 이하면 안 그림.
+     * 사용자가 다른 시안 선택 시 _selectedVariantId 갱신 → re-render → 큰 preview / stats / 추천 갱신.
+     */
+    _renderVariantPicker(variants, selected) {
+        return html `
+      <div class="variant-picker">
+        <div class="variant-picker-header">
+          <strong>${i18next.t('label.choose variant') || 'Choose AI Variant'}</strong>
+          <span class="variant-picker-hint">
+            ${i18next.t('hint.choose variant') ||
+            'Different AI interpretations of the same drawing. Choose the most accurate one.'}
+          </span>
+          <button
+            class="regenerate-btn"
+            @click=${this._onRegenerateVariants}
+            ?disabled=${this._materializing}
+            title=${i18next.t('hint.regenerate variants') ||
+            'Regenerate if none of the variants look right'}
+          >
+            ↻ ${i18next.t('button.regenerate') || 'Regenerate'}
+          </button>
+        </div>
+        <div class="variant-grid">
+          ${variants.map(v => html `
+              <div
+                class="variant-card ${selected?.id === v.id ? 'selected' : ''}"
+                @click=${() => this._onSelectVariant(v.id)}
+              >
+                <div class="variant-thumb">
+                  <ox-board-preview .boardModel=${v.boardModel}></ox-board-preview>
+                </div>
+                <div class="variant-meta">
+                  <div class="variant-label">${v.label || v.id}</div>
+                  ${v.description
+            ? html `<div class="variant-desc">${v.description}</div>`
+            : ''}
+                  <div class="variant-stats">
+                    ${v.stats?.total ?? 0}개 객체
+                    ${v.stats?.matched ? html ` · ${v.stats.matched} 매핑` : ''}
+                  </div>
+                </div>
+              </div>
+            `)}
+        </div>
+      </div>
+    `;
+    }
+    _onSelectVariant(variantId) {
+        if (this._selectedVariantId === variantId)
+            return;
+        this._selectedVariantId = variantId;
+        // 선택된 variant 의 subjectName / subjectDescription 으로 자동 채움 — 사용자가 이미
+        // 수정한 값은 보존하지 않음 (시안 바뀌면 새 정체성이 더 적절).
+        const variant = (this._session?.result?.variants ?? []).find((v) => v.id === variantId);
+        if (variant?.subjectName) {
+            // shortenName 같은 정규화는 서버 suggestBoardMeta 가 이미 처리. 여기는 그대로.
+            this._newBoardName = variant.subjectName.slice(0, 30).trim() || this._newBoardName;
+        }
+        if (variant?.subjectDescription) {
+            this._newBoardDescription = variant.subjectDescription;
+        }
+    }
+    async _onRegenerateVariants() {
+        if (!this._attachment)
+            return;
+        // 기존 review 결과 폐기, progress 단계로 되돌리고 import 다시 시작.
+        this._step = 'progress';
+        this._session = undefined;
+        this._selectedVariantId = '';
+        this._materializeError = undefined;
+        try {
+            const session = await importBoardAsync({
+                attachmentId: this._attachment.id,
+                userPrompt: this._userPrompt.trim() || undefined
+            });
+            this._session = session;
+            this._startPolling();
+        }
+        catch (err) {
+            const message = err?.message || String(err);
+            this._importError = message;
+            notify({ level: 'error', message });
+        }
+    }
+    /**
+     * AI 분석 요약 카드 — VLM 이 도면을 어떻게 이해했고 어떤 관점으로 import 를 진행했는지
+     * 사용자 review 에 노출. metadata 가 비어있으면 (DXF 임포트 등 VLM 미사용 경로) 카드 자체 생략.
+     *
+     * selected variant 의 importStrategy / subjectName / subjectDescription 은 시안별 전용.
+     */
+    _renderAISummary(result, selectedVariant) {
+        const meta = result?.metadata;
+        if (!meta)
+            return '';
+        const viewType = meta.viewType;
+        const confidence = typeof meta.viewTypeConfidence === 'number' ? meta.viewTypeConfidence : undefined;
+        const reasoning = meta.viewTypeReasoning;
+        // importStrategy 는 selected variant 우선, 없으면 metadata 의 (default) 사용
+        const importStrategy = (selectedVariant?.importStrategy ?? meta.importStrategy);
+        const userPrompt = meta.userPrompt;
+        const dist = result?.categoryDistribution;
+        const aiClient = meta.aiClientId;
+        const imageDims = meta.imageWidth && meta.imageHeight ? `${meta.imageWidth}×${meta.imageHeight}px` : undefined;
+        const viewTypeLabel = (() => {
+            switch (viewType) {
+                case 'top-down':
+                    return i18next.t('label.viewtype top-down') || 'Floor Plan (top-down)';
+                case 'perspective-3d':
+                    return i18next.t('label.viewtype perspective-3d') || '3D Render / Bird\'s Eye';
+                case 'photo':
+                    return i18next.t('label.viewtype photo') || 'Photo';
+                default:
+                    return viewType || '-';
+            }
+        })();
+        return html `
+      <div class="ai-summary">
+        <div class="title">🔍 ${i18next.t('label.ai analysis') || 'AI Analysis Summary'}</div>
+
+        <div class="row">
+          <span class="label">${i18next.t('label.view type') || 'Drawing Type'}</span>
+          <span class="value">
+            <span class="badge">${viewTypeLabel}</span>
+            ${typeof confidence === 'number'
+            ? html `<span class="badge">${i18next.t('label.confidence') || 'Confidence'} ${Math.round(confidence * 100)}%</span>`
+            : ''}
+          </span>
+        </div>
+
+        ${reasoning
+            ? html `
+              <div class="row">
+                <span class="label">${i18next.t('label.reasoning') || 'Reasoning'}</span>
+                <span class="value">${reasoning}</span>
+              </div>
+            `
+            : ''}
+        ${importStrategy
+            ? html `
+              <div class="strategy">
+                <div class="strategy-label">
+                  💡 ${i18next.t('label.ai intent') || 'AI Intent / Approach'}
+                </div>
+                <div class="strategy-text">${importStrategy}</div>
+              </div>
+            `
+            : ''}
+        ${userPrompt
+            ? html `
+              <div class="row">
+                <span class="label">${i18next.t('label.user hint') || 'User Hint'}</span>
+                <span class="value">"${userPrompt}"</span>
+              </div>
+            `
+            : ''}
+        ${dist && Object.keys(dist).length > 0
+            ? html `
+              <div class="row">
+                <span class="label">${i18next.t('label.categories') || 'Categories'}</span>
+                <span class="value">
+                  ${Object.entries(dist).map(([cat, n]) => html `<span class="badge">${cat} ${n}</span>`)}
+                </span>
+              </div>
+            `
+            : ''}
+        ${imageDims
+            ? html `
+              <div class="row">
+                <span class="label">${i18next.t('label.image size') || 'Image Size'}</span>
+                <span class="value">${imageDims}</span>
+              </div>
+            `
+            : ''}
+        ${aiClient
+            ? html `
+              <div class="row">
+                <span class="label">${i18next.t('label.ai client') || 'AI Model'}</span>
+                <span class="value">${aiClient}</span>
+              </div>
+            `
+            : ''}
+        ${viewType === 'perspective-3d' || viewType === 'photo'
+            ? html `
+              <div class="row">
+                <span class="label" style="color:#a0892a;">⚠️</span>
+                <span class="value" style="color:#7a5e00;font-style:italic;">
+                  ${i18next.t('text.perspective notice') ||
+                'Perspective drawings are difficult to infer floor plan positions — positional accuracy may be low. Please verify and adjust.'}
+                </span>
+              </div>
+            `
+            : ''}
+      </div>
+    `;
+    }
+    /** 사용자 입력 또는 첨부파일 이름 (확장자 제거) 을 fallback. 빈 input 일 때만 fallback. */
+    _effectiveName() {
+        if (this._newBoardName.trim())
+            return this._newBoardName.trim();
+        if (this._attachment?.name)
+            return this._attachment.name.replace(/\.[^.]+$/, '');
+        return '';
+    }
+    async _materialize() {
+        const name = this._effectiveName();
+        if (!name)
+            return;
+        if (this._isFileMode() && !this._session?.id)
+            return;
+        this._materializing = true;
+        this._materializeError = undefined;
+        try {
+            const description = this._newBoardDescription.trim();
+            const groupId = this._selectedGroupId || undefined;
+            const type = this._selectedBoardType;
+            let boardId;
+            if (this._isFileMode()) {
+                // import 결과 → materializeImportSession (variant 선택)
+                const variantId = this._selectedVariantId || undefined;
+                const board = await materializeImportSession({
+                    sessionId: this._session.id,
+                    name,
+                    ...(description ? { description } : {}),
+                    ...(groupId ? { groupId } : {}),
+                    type,
+                    ...(variantId ? { variantId } : {})
+                });
+                boardId = board?.id;
+            }
+            else {
+                // blank / template — 직접 createBoard.
+                const model = this._uploadMode === 'template' && this._selectedTemplate?.model
+                    ? this._selectedTemplate.model
+                    : { width: 800, height: 600 };
+                const thumbnail = this._uploadMode === 'template' ? this._selectedTemplate?.thumbnail : undefined;
+                const created = await createBoard({
+                    name,
+                    description,
+                    type,
+                    groupId: groupId || '',
+                    model,
+                    ...(thumbnail ? { thumbnail } : {})
+                });
+                boardId = created?.createBoard?.id ?? created?.id;
+            }
+            if (!boardId)
+                throw new Error('Board id missing in response.');
+            this._newBoardId = boardId;
+            if (this._isFileMode()) {
+                this._step = 'done';
+            }
+            else {
+                // blank / template — 생성 즉시 모델러로 이동
+                navigate(`board-modeller/${boardId}`);
+            }
+        }
+        catch (err) {
+            const message = err?.message || String(err);
+            this._materializeError = message;
+            notify({ level: 'error', message });
+        }
+        finally {
+            this._materializing = false;
+        }
+    }
+    // ── done step ───────────────────────────────────────────────────
+    _renderDoneStep() {
+        return html `
+      <div class="done-card">
+        <md-icon class="icon">check_circle</md-icon>
+        <div class="title">${i18next.t('text.import success') || 'Board created successfully'}</div>
+        <div class="meta">
+          ${this._effectiveName()} · ${i18next.t('label.draft') || 'Draft'}
+        </div>
+      </div>
+      <div class="controls">
+        <button class="secondary" @click=${this._retryFromUpload}>
+          ${i18next.t('button.import another') || 'Import Another Drawing'}
+        </button>
+        <button class="primary" @click=${this._goToModeller} ?disabled=${!this._newBoardId}>
+          ${i18next.t('button.open modeller') || 'Open Modeller'}
+        </button>
+      </div>
+    `;
+    }
+    _goToModeller() {
+        if (!this._newBoardId)
+            return;
+        navigate(`board-modeller/${this._newBoardId}`);
+    }
+    _formatSize(bytes) {
+        if (bytes < 1024)
+            return `${bytes} B`;
+        if (bytes < 1024 * 1024)
+            return `${(bytes / 1024).toFixed(1)} KB`;
+        return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+    }
+    // 페이지 라이프사이클
+    pageUpdated(_changes, _lifecycle) {
+        if (this.active) {
+            // wizard 가 'done' 상태로 끝난 뒤 다시 진입하면 초기 상태로 리셋.
+            if (this._step === 'done') {
+                this._resetAll();
+            }
+            // 처음부터 탭이 디폴트 — 첫 진입 시 그룹 목록 로딩.
+            if (!this._groupsLoaded) {
+                this._loadGroups();
+            }
+        }
+    }
+    /** wizard 모든 state 를 초기값으로 — 'done' 후 재진입 / 처음부터 시작 시 사용. */
+    _resetAll() {
+        this._step = 'upload';
+        this._attachment = undefined;
+        this._session = undefined;
+        this._uploading = false;
+        this._uploadError = undefined;
+        this._uploadMode = 'blank';
+        this._browseItems = [];
+        this._browseLoading = false;
+        this._browseSearch = '';
+        this._userPrompt = '';
+        this._importError = undefined;
+        this._newBoardName = '';
+        this._newBoardDescription = '';
+        this._selectedVariantId = '';
+        this._selectedTemplate = undefined;
+        this._templates = [];
+        this._templatesLoading = false;
+        this._templatesLoaded = false;
+        this._templateSearch = '';
+        this._selectedGroupId = '';
+        this._selectedBoardType = 'main';
+        this._materializing = false;
+        this._newBoardId = undefined;
+        this._materializeError = undefined;
+    }
+};
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], BoardCreateWizardPage.prototype, "_step", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], BoardCreateWizardPage.prototype, "_attachment", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], BoardCreateWizardPage.prototype, "_session", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], BoardCreateWizardPage.prototype, "_uploading", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], BoardCreateWizardPage.prototype, "_uploadError", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], BoardCreateWizardPage.prototype, "_uploadMode", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], BoardCreateWizardPage.prototype, "_browseItems", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], BoardCreateWizardPage.prototype, "_browseLoading", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], BoardCreateWizardPage.prototype, "_browseSearch", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], BoardCreateWizardPage.prototype, "_userPrompt", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], BoardCreateWizardPage.prototype, "_templates", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], BoardCreateWizardPage.prototype, "_templatesLoading", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], BoardCreateWizardPage.prototype, "_templatesLoaded", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], BoardCreateWizardPage.prototype, "_templateSearch", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], BoardCreateWizardPage.prototype, "_selectedTemplate", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], BoardCreateWizardPage.prototype, "_groups", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], BoardCreateWizardPage.prototype, "_groupsLoaded", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], BoardCreateWizardPage.prototype, "_selectedGroupId", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], BoardCreateWizardPage.prototype, "_selectedBoardType", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], BoardCreateWizardPage.prototype, "_importError", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], BoardCreateWizardPage.prototype, "_newBoardName", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], BoardCreateWizardPage.prototype, "_newBoardDescription", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], BoardCreateWizardPage.prototype, "_selectedVariantId", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], BoardCreateWizardPage.prototype, "_materializing", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], BoardCreateWizardPage.prototype, "_newBoardId", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], BoardCreateWizardPage.prototype, "_materializeError", void 0);
+BoardCreateWizardPage = __decorate([
+    customElement('board-create-wizard-page')
+], BoardCreateWizardPage);
+export { BoardCreateWizardPage };
+//# sourceMappingURL=board-create-wizard-page.js.map