@g1cloud/ui-modeler-next 5.0.0-alpha.1 → 5.0.0-alpha.10

package/dist/view/PartCanvas.vue.d.ts

@@ -1,5 +1,6 @@
 import { PartModel } from '../core/types';
 import { RendererRegistry } from './RendererRegistry';
+import { LayoutKind } from './layout';
 type __VLS_Props = {
     node?: PartModel;
     registry?: RendererRegistry;
@@ -7,6 +8,8 @@ type __VLS_Props = {
     parentId?: string;
     /** 부모 children 내 이 노드의 인덱스 — 형제 삽입 gap 계산. */
     index?: number;
+    /** 부모 컨테이너의 레이아웃 kind — 이 노드의 배치(align/expand/그리드셀)·드롭 축 판정에 쓴다. */
+    parentKind?: LayoutKind;
 };
 declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/view/RendererRegistry.d.ts

@@ -12,8 +12,16 @@ export interface PartRenderer {
 }
 export type RendererRegistry = Map<string, PartRenderer>;
 /**
- * 스키매틱 개념 props(순수 — 테스트 가능). caption은 M8 `captionText` 재사용이라 agent read
- * (describeScreen)와 표시가 정합한다(재정의 0). partName/category는 카탈로그 파생.
+ * 캔버스 표시용 caption — `captionText`(리터럴)로 안 풀리는 **message-key/locale 맵**도 사람이 식별할 수
+ * 있게 표면화한다(프리뷰 `displayCaption`과 동일 규칙, 메모리 preview-caption-messagekey-display). 특히
+ * ColumnDef처럼 caption이 MESSAGE_TEXT(키형)라 `captionText`가 undefined를 주던 파트가 캔버스에서 "무슨
+ * 항목"인지 보이게 한다(#{key} 표시). captionProp attr이 아예 없으면 undefined(describeScreen과 동형 —
+ * caption 키 생략 유지).
+ */
+export declare function displayCaptionOf(part: PartModel, catalog: PartCatalog | undefined): string | undefined;
+/**
+ * 스키매틱 개념 props(순수 — 테스트 가능). caption은 `displayCaptionOf`(리터럴 + 키형 #{key} 표면화)로
+ * 산출해 message-key 캡션도 캔버스에서 식별 가능하다. partName/category는 카탈로그 파생.
  */
 export declare function schematicProps(part: PartModel, catalog: PartCatalog): Record<string, unknown>;
 /**

package/dist/view/SchematicPart.vue.d.ts

@@ -14,6 +14,12 @@ type __VLS_Props = {
     container?: boolean;
     /** 컨테이너가 비어 있는지(드롭 영역 힌트 노출). */
     empty?: boolean;
+    /**
+     * 컨테이너 본문(자식 슬롯)의 레이아웃 style — `view/layout` `containerLayoutOf(node).style`(순수 서술자).
+     * 실제 방향(가로/그리드/폼셀)으로 자식을 배치해 "인지한 위치에 드롭"을 가능케 한다(L1). 미지정/빈 객체면
+     * 기본 CSS(세로 스택) 유지 → BS 위임 4종(card/tabs/grid/popup, 빈 style)·stack fallback은 현행 그대로.
+     */
+    bodyStyle?: Record<string, string>;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {

package/dist/view/dnd.d.ts

@@ -1,14 +1,32 @@
 import { PartModel } from '../core/types';
 /** 드롭 존 — 형제 앞/뒤 삽입(before/after) 또는 컨테이너 자식으로(into). */
 export type DropZone = 'before' | 'after' | 'into';
+/** 드롭 대상 — controller.addPart/movePart가 받는 {부모 id, 삽입 index}. index 생략 = append. */
+export interface DropTarget {
+    parentId: string;
+    index?: number;
+}
 /**
- * 커서 세로 위치(ratio 0=상단~1=하단)로 드롭 존을 판정한다.
- * - 컨테이너: 3분할(상 before / 중 into / 하 after). 단 root(hasParent=false)는 형제가 없어 항상 into.
- * - leaf: 2분할(상 before / 하 after) — 자식을 담을 수 없으므로 into 없음.
+ * 드롭 존을 controller가 기대하는 {대상 부모 id, 삽입 index}로 리졸브한다 — **캔버스·iframe 프리뷰
+ * 공용**(Path C). into=대상 파트 자신의 자식(append), before/after=대상 파트의 형제(부모 children 내 gap).
+ * root(부모 없음)에는 형제 삽입 불가라 before/after는 null(into만 유효). 대상 partId가 트리에 없으면 null.
+ * (move의 gap 보정은 별도 `adjustMoveIndex` — 이 함수는 add/move 공용 "제거 전" gap을 낸다.)
  */
-export declare function dropZoneAt(ratio: number, opts: {
+export declare function resolveDropTarget(root: PartModel, targetPartId: string, zone: DropZone): DropTarget | null;
+/**
+ * 커서 위치로 드롭 존을 판정한다 — **부모 배치 주축 인식**(L1). 형제가 좌우로 놓이는 가로 부모(orientation
+ * 'horizontal')는 커서 X비율로, 세로 부모('vertical')는 Y비율로 before/after를 가른다. 이렇게 해야 가로
+ * 툴바에서 "이 버튼 왼쪽/오른쪽에 삽입"이 표현된다(레거시 인지 위치 격차 해소).
+ * - 컨테이너: 3분할(주축 <0.3 before / 중 into / >0.7 after). 단 root(hasParent=false)는 형제가 없어 항상 into.
+ * - leaf: 2분할(<0.5 before / after) — 자식을 담을 수 없으므로 into 없음.
+ */
+export declare function dropZoneAt(ratios: {
+    x: number;
+    y: number;
+}, opts: {
     container: boolean;
     hasParent: boolean;
+    orientation: 'vertical' | 'horizontal';
 }): DropZone;
 /**
  * 형제 상대 삽입 gap(대상 부모의 **현재(제거 전)** children 기준)을 move command가 기대하는

package/dist/view/layout.d.ts

@@ -0,0 +1,85 @@
+import { PartModel } from '../core/types';
+import { PartType } from '../core/partType';
+import { MultiLangText } from '../core/lang';
+/**
+ * 컨테이너 렌더 종류. flex/grid는 CSS로 직접 낮추고, card/tabs는 실 BS 컴포넌트에 위임(PreviewNode 분기).
+ * slot = 단일 슬롯 홀더(InternalLayoutArea/TableLayoutCell/TabSheetPanel/GridCellPanel/ListField),
+ * stack = 팝업 콘텐츠·미지 컨테이너 fallback.
+ */
+export type LayoutKind = 'flex-col' | 'flex-row' | 'flex-wrap' | 'form' | 'table' | 'action' | 'expansion' | 'card' | 'tabs' | 'grid' | 'popup' | 'slot' | 'stack';
+/** 컨테이너 레이아웃 서술자. style은 camelCase CSS(Vue `:style` 바인딩용). */
+export interface ContainerLayout {
+    kind: LayoutKind;
+    style: Record<string, string>;
+    /** form=columnCount / table=colCount (Vue grid 힌트, style에 이미 반영됨). */
+    columns?: number;
+    /** table=rowCount. */
+    rows?: number;
+}
+/** 파트의 레이아웃 종류만(PreviewNode 분기용·자식에 전달할 parentKind). */
+export declare function layoutKindOf(partType: PartType): LayoutKind;
+/** 부모 배치 주축. */
+export type Orientation = 'vertical' | 'horizontal';
+/**
+ * 부모 레이아웃 kind → 형제가 배치되는 주축. 캔버스 드롭존이 before/after를 X축(가로 부모) vs Y축(세로 부모)
+ * 중 어느 쪽으로 판정할지 고르는 데 쓴다. horizontal: flex-row/flex-wrap/action + form/table(그리드 행 우선
+ * 근사) + grid(캔버스에서 컬럼을 가로 헤더 스트립으로 그림, `schematicBodyStyle` 참조). 그 외(flex-col/
+ * expansion/stack/slot + BS 위임 card/tabs/popup)=vertical. 2D 셀 판정은 후속 정제.
+ */
+export declare function orientationOf(kind: LayoutKind | undefined): Orientation;
+/**
+ * 캔버스(스키매틱 설계 표면) 전용 컨테이너 본문 style. CSS-lowered 9종은 `containerLayoutOf`와 동일하되,
+ * **Grid**는 실 렌더가 BSGrid에 위임돼 `containerLayoutOf`가 빈 style을 주므로 캔버스에서 컬럼이 세로로
+ * 쌓여 읽히지 않는다 → 자식 ColumnDef를 **가로 헤더 스트립**(flex-row wrap)으로 배치해 "무슨 컬럼"인지
+ * 보이게 한다. 나머지 BS 위임 kind(card/tabs/popup)는 세로 스택 기본 유지(후속 정제 대상).
+ */
+export declare function schematicBodyStyle(part: PartModel): Record<string, string>;
+/**
+ * 컨테이너 파트 → CSS 레이아웃 서술자. gap은 `spacing`(bool) attr, padding은 `margin`(bool) attr에서.
+ * form/table은 grid 특성상 gap 기본값을 준다(0이면 셀이 붙어 판독 불가).
+ */
+export declare function containerLayoutOf(part: PartModel): ContainerLayout;
+/**
+ * 자식 파트가 부모 레이아웃 안에서 갖는 배치 style(camelCase CSS). PreviewNode가 자기 루트 요소에 적용한다.
+ *
+ * - expandRatio > 0 → flex-grow(flex 부모에서만). Vaadin expandRatio의 비율 배분 근사.
+ * - componentAlignment(6값 enum) → 부모 축 기준 정렬:
+ *   · flex-col(교차축=수평): 수평값 LEFT/CENTER/RIGHT → align-self, 수직값 TOP/MIDDLE/BOTTOM → 주축 auto 마진.
+ *   · flex-row/wrap/action(교차축=수직): 수직값 → align-self, 수평값 → 교차 방향 auto 마진.
+ *   · form/table(grid): 수평 → justify-self, 수직 → align-self.
+ * - form 부모: takeOneRow → 전 열 span. 명시 `column`/`row`(Vaadin GridLayout 셀 좌표, 0-based) →
+ *   grid-column/grid-row-start(1-based)로 sparse 배치 보존. colspan>1 → n열 span(명시 col과 결합 가능).
+ */
+export declare function childLayoutStyle(child: PartModel, parent: LayoutKind): Record<string, string>;
+/**
+ * Grid 컬럼 서술자. bluesea `Column`의 순수-TS 구조 부분집합(`propertyId`·`caption`·`width`·`cellType`)이라
+ * PreviewNode가 `:columns`로 그대로 넘길 수 있다(bluesea import 없이 승격형 유지). caption은 평문 문자열만
+ * (프리뷰엔 메시지 카탈로그가 없어 messageKey는 렌더 불가 → 읽을 수 있는 propertyId로 폴백).
+ */
+export interface GridColumnSpec {
+    propertyId: string;
+    /**
+     * 컬럼 헤더 표시 문자열(이미 flatten). 우선순위 = **리졸버 해소분**(부모가 주입한 메시지 카탈로그) →
+     * 평문 caption → `actualPropertyId`(읽을 수 있는 구조 식별자). 캡션 경로와 달리 미해소 키를 `#{key}`로
+     * 폴백하지 않는다 — 컬럼엔 `itemCode` 같은 propertyId가 `#{ecp.itemCode}`보다 읽기 좋기 때문.
+     */
+    caption: string;
+    width?: number;
+    /** ColumnDef cellType 중 BSGrid GridCellType과 교집합인 값만(그 외는 생략→기본 TEXT 렌더). */
+    cellType?: 'TEXT' | 'NUMBER' | 'DATE' | 'PERCENTAGE';
+}
+/**
+ * Grid 파트의 ColumnDef 자식 → 컬럼 서술자. TabSheet가 TabSheetPanel을 탭으로 소비하듯, Grid는 ColumnDef를
+ * 자식 노드로 재귀 렌더하지 않고 **컬럼 정의로 소비**한다(현 fallback: ColumnDef가 점선 플레이스홀더로 렌더).
+ *
+ * - `propertyId` ← `actualPropertyId`(없으면 partId).
+ * - `caption` ← 리졸버 해소분(부모 메시지 카탈로그, 옵션) → 평문 `caption` → `actualPropertyId` 폴백.
+ * - `width` ← `width`("90px"→90, 단위/공백 무시). 파싱 실패 시 생략(BSGrid 기본 폭).
+ * - `cellType` ← `cellType`(BSGrid 교집합 4종만; 그 외 생략).
+ *
+ * `resolve`는 프리뷰 메시지 카탈로그 해소기(`preview/messages.resolveCaptionText`)를 주입받는 seam이다.
+ * 순수 lib 모듈이 preview 반응형 스토어에 결합하지 않도록 **옵션 파라미터**로 역주입한다(불변식 #1 계층 유지).
+ * 미지정 시 현행(평문/`actualPropertyId`) 동작 — 호출자·기존 테스트 무변경. 미해소 메시지 키는 `#{key}`가
+ * 아니라 `actualPropertyId`로 폴백한다(캡션 경로와 의도적 상이, `GridColumnSpec.caption` 참조).
+ */
+export declare function gridColumnsOf(part: PartModel, resolve?: (t: MultiLangText) => string | undefined): GridColumnSpec[];

package/dist/view/preview/IframePreview.vue.d.ts

@@ -4,6 +4,13 @@ type __VLS_Props = {
     model: PartModel;
     /** 모델 revision — 변경 감지 트리거(controller.revision 배선). */
     revision?: number;
+    /** 현재 선택 partId — iframe에 highlight로 push(실물 위 선택 아웃라인 동기화). */
+    selection?: string | null;
+    /**
+     * 메시지 카탈로그(key→표시텍스트) — iframe에 catalog로 push해 캡션 `#{key}`를 실 텍스트로 해소한다.
+     * 미지정/빈 맵이면 iframe이 지금처럼 `#{key}` 폴백. 실 출처는 호스트 번들, dev는 illustrative fixture.
+     */
+    messages?: Record<string, string>;
     /** iframe 진입 문서 URL(자체 bluesea@5.x 렌더러 번들). */
     src: string;
     /** postMessage targetOrigin — 기본 동일 출처('/'). 교차 출처면 명시. */
@@ -11,12 +18,20 @@ type __VLS_Props = {
 };
 declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     error: (message: string) => any;
+    select: (partId: string | null) => any;
     ready: () => any;
+    addPart: (parentId: string, partType: string, index?: number | undefined) => any;
+    movePart: (movedId: string, toParentId: string, index?: number | undefined) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     onError?: ((message: string) => any) | undefined;
+    onSelect?: ((partId: string | null) => any) | undefined;
     onReady?: (() => any) | undefined;
+    onAddPart?: ((parentId: string, partType: string, index?: number | undefined) => any) | undefined;
+    onMovePart?: ((movedId: string, toParentId: string, index?: number | undefined) => any) | undefined;
 }>, {
     revision: number;
+    selection: string | null;
+    messages: Record<string, string>;
     targetOrigin: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/view/preview/protocol.d.ts

@@ -1,4 +1,5 @@
 import { PartModel } from '../../core/types';
+import { DropZone } from '../dnd';
 /** postMessage 네임스페이스 — 다른 트래픽과 충돌 방지. */
 export declare const PREVIEW_CHANNEL: "ui-modeler-preview";
 /** 부모 → iframe: 렌더할 모델 스냅샷(PartModel은 전부 JSON-safe — attr/MultiLangText/구조값 plain). */
@@ -26,15 +27,68 @@ export interface PreviewErrorMessage {
     type: 'error';
     message: string;
 }
+/**
+ * iframe → 부모: 실물 위 파트 클릭 → 선택(전략 B 편집 표면화). 부모는 이 partId로 controller.select를
+ * 호출해 트리·속성 패널·프리뷰 하이라이트를 동기화한다. 실 컴포넌트 기본 동작은 iframe 렌더측이 억제한다.
+ */
+export interface PreviewSelectMessage {
+    channel: typeof PREVIEW_CHANNEL;
+    type: 'select';
+    /** 선택된 파트 id. 빈 영역 클릭 시 null(선택 해제). */
+    partId: string | null;
+}
+/**
+ * 부모 → iframe: 현재 선택 파트 push(선택 아웃라인 동기화). 부모 selection 변화(트리/캔버스/프리뷰 어디서
+ * 발생하든)를 실물 위 아웃라인으로 반영한다. null이면 하이라이트 해제.
+ */
+export interface PreviewHighlightMessage {
+    channel: typeof PREVIEW_CHANNEL;
+    type: 'highlight';
+    partId: string | null;
+}
+/**
+ * 부모 → iframe: 메시지 카탈로그 push(캡션 `#{key}` 해소용). 프리뷰엔 메시지 리소스가 없어 실샘플 캡션의
+ * 대부분(레거시 `#{key}` 형)이 미해소인데, 부모가 key→표시텍스트 맵을 push하면 실 텍스트로 렌더된다(맵에
+ * 없는 키는 지금처럼 `#{key}` 폴백). **모델과 직교**(편집마다 안 바뀜)라 render와 분리 — ready 후 1회 +
+ * 카탈로그 변경 시 push. 반응형 해소라 render보다 늦게 도착해도 캡션이 재평가된다.
+ */
+export interface PreviewCatalogMessage {
+    channel: typeof PREVIEW_CHANNEL;
+    type: 'catalog';
+    /** 메시지 키 → 표시 텍스트(활성 locale 평면 맵). */
+    messages: Record<string, string>;
+}
+/**
+ * iframe → 부모: 실물 위 드롭 → 구조 편집(Path C, C-a). iframe은 **hit 리포터**로서 드롭 지점의 대상
+ * 파트(`data-part-id`)와 존(`dropZoneAt` 로컬 판정)만 실어 보내고, **모델 변형은 부모 controller**가
+ * 권위 모델에 수행한다(iframe 스냅샷은 stale 가능 → 부모 live 모델이 `resolveDropTarget`+`adjustMoveIndex`
+ * 소비). dragKind로 add(payload=partType)/move(payload=partId) 분기. targetPartId=null이면 빈/루트 영역.
+ */
+export interface PreviewDropMessage {
+    channel: typeof PREVIEW_CHANNEL;
+    type: 'drop';
+    /** add=팔레트 신규 파트 / move=iframe 내부 기존 파트 이동. */
+    dragKind: 'add' | 'move';
+    /** add면 partType, move면 이동 파트 partId. */
+    payload: string;
+    /** 드롭 지점 최내곽 파트 id. null=빈 영역(루트 into). */
+    targetPartId: string | null;
+    /** 대상 파트 기준 존(before/after=형제, into=자식). */
+    zone: DropZone;
+}
 /** 부모가 보내는 메시지(iframe이 수신). */
-export type PreviewOutbound = PreviewRenderMessage;
+export type PreviewOutbound = PreviewRenderMessage | PreviewHighlightMessage | PreviewCatalogMessage;
 /** 부모가 받는 메시지(iframe이 송신). */
-export type PreviewInbound = PreviewReadyMessage | PreviewResizeMessage | PreviewErrorMessage;
+export type PreviewInbound = PreviewReadyMessage | PreviewResizeMessage | PreviewErrorMessage | PreviewSelectMessage | PreviewDropMessage;
 export declare function renderMessage(model: PartModel, revision: number): PreviewRenderMessage;
 export declare function readyMessage(): PreviewReadyMessage;
 export declare function resizeMessage(height: number): PreviewResizeMessage;
 export declare function errorMessage(message: string): PreviewErrorMessage;
+export declare function selectMessage(partId: string | null): PreviewSelectMessage;
+export declare function highlightMessage(partId: string | null): PreviewHighlightMessage;
+export declare function catalogMessage(messages: Record<string, string>): PreviewCatalogMessage;
+export declare function dropMessage(dragKind: 'add' | 'move', payload: string, targetPartId: string | null, zone: DropZone): PreviewDropMessage;
 /** 부모 수신 필터 — iframe이 보낸 ready/resize/error만 통과. */
 export declare function isPreviewInbound(data: unknown): data is PreviewInbound;
-/** iframe 수신 필터 — 부모가 보낸 render만 통과. */
+/** iframe 수신 필터 — 부모가 보낸 render/highlight/catalog만 통과. */
 export declare function isPreviewOutbound(data: unknown): data is PreviewOutbound;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@g1cloud/ui-modeler-next",
   "private": false,
-  "version": "5.0.0-alpha.1",
+  "version": "5.0.0-alpha.10",
   "description": "Vue 3 visual UI-modeling / screen-design editor",
   "type": "module",
   "files": [
@@ -19,7 +19,8 @@
       "import": "./dist/ui-modeler.js",
       "require": "./dist/ui-modeler.umd.cjs"
     },
-    "./style.css": "./dist/ui-modeler-next.css"
+    "./style.css": "./dist/ui-modeler-next.css",
+    "./preview/*": "./dist/preview/*"
   },
   "author": "l.kei@g1project.net",
   "license": "LicenseRef-LICENSE",
@@ -47,7 +48,8 @@
   },
   "scripts": {
     "dev": "vite",
-    "build": "vue-tsc --noEmit && vite build",
+    "build": "vue-tsc --noEmit && vite build && vite build --config vite.preview.config.ts",
+    "build:preview": "vite build --config vite.preview.config.ts",
     "preview": "vite preview",
     "test": "vitest run",
     "test:watch": "vitest",