From 98b47749e9312e4164fb4770bde64752216632fb Mon Sep 17 00:00:00 2001
From: ErSan <mlt131220@163.com>
Date: Tue, 27 Jan 2026 19:27:23 +0800
Subject: [PATCH] feat: add iframe/video widgets and importer support

---
 .gitignore                               |   6 ++
 packages/docs/docs/architecture.md       |   6 +-
 packages/docs/docs/index.md              |   2 +-
 packages/docs/docs/migration.md          |   4 +-
 packages/editor/src/editor/Canvas.tsx    |  51 ++++++++++
 packages/editor/src/editor/EditorApp.tsx |   2 +
 packages/editor/src/editor/Inspector.tsx |  99 +++++++++++++++++-
 packages/editor/src/editor/store.ts      |  40 +++++++-
 packages/sdk/src/core/goview/convert.ts  | 122 ++++++++++++++++++-----
 packages/sdk/src/core/schema.ts          |  32 +++++-
 packages/sdk/src/core/widgets/iframe.ts  |  13 +++
 packages/sdk/src/core/widgets/image.ts   |  41 ++++++++
 packages/sdk/src/core/widgets/video.ts   |  19 ++++
 packages/sdk/src/index.ts                |  12 +++
 packages/sdk/tsconfig.tsbuildinfo        |   1 -
 15 files changed, 416 insertions(+), 34 deletions(-)
 create mode 100644 packages/sdk/src/core/widgets/iframe.ts
 create mode 100644 packages/sdk/src/core/widgets/image.ts
 create mode 100644 packages/sdk/src/core/widgets/video.ts
 delete mode 100644 packages/sdk/tsconfig.tsbuildinfo

diff --git a/.gitignore b/.gitignore
index d7dfc8c..fb5ee8e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,3 +22,9 @@ Thumbs.db
 # docs build
 packages/docs/docs/.vitepress/cache
 packages/docs/docs/.vitepress/dist
+
+# TypeScript build info
+*.tsbuildinfo
+
+# local traces
+trace.txt
diff --git a/packages/docs/docs/architecture.md b/packages/docs/docs/architecture.md
index 151a8d4..ab89fc6 100644
--- a/packages/docs/docs/architecture.md
+++ b/packages/docs/docs/architecture.md
@@ -64,15 +64,15 @@ Represents one dashboard/screen.
 - Clipboard (copy/paste)
 - History (command pattern)
 
-## Migration Plan (from go-view)
+## Migration Plan (from legacy)
 
 We will *not* transplant Vue UI. We will extract **behavior + data contracts** into `sdk`, then rebuild UI in `editor`.
 
-High-signal sources in go-view:
+High-signal sources in the legacy codebase:
 - `src/views/chart/ContentEdit/*` (drag, selection, guides, tools)
 - `src/store/modules/chartEditStore` (editor state)
 - `src/hooks/useChartDataFetch.hook.ts` (data fetch)
 - `src/views/preview/*` (preview scaling + rendering)
 - `src/packages/*` (widget catalog + configs)
 
-Next step: write a detailed mapping table (go-view module → sdk/editor target) and implement the first vertical slice: **canvas + one widget + import/export**.
+Next step: write a detailed mapping table (legacy module → sdk/editor target) and implement the first vertical slice: **canvas + one widget + import/export**.
diff --git a/packages/docs/docs/index.md b/packages/docs/docs/index.md
index 056102a..703aa8e 100644
--- a/packages/docs/docs/index.md
+++ b/packages/docs/docs/index.md
@@ -3,4 +3,4 @@
 - [Architecture](./architecture)
 - [Migration Plan](./migration)
 
-This site documents the AstralView monorepo and the ongoing refactor from go-view.
+This site documents the AstralView monorepo and the ongoing refactor from a legacy third-party editor codebase.
diff --git a/packages/docs/docs/migration.md b/packages/docs/docs/migration.md
index 9c85944..8471d3d 100644
--- a/packages/docs/docs/migration.md
+++ b/packages/docs/docs/migration.md
@@ -1,8 +1,8 @@
-# Migration Plan (go-view → AstralView)
+# Migration Plan (Legacy → AstralView)
 
 ## Strategy
 
-- Keep go-view as reference under `third_party/go-view`.
+- Keep the legacy codebase as reference under `third_party/`.
 - Extract domain and behaviors into `@astralview/sdk`.
 - Rebuild UI in `@astralview/editor` (React + Ant Design).
 
diff --git a/packages/editor/src/editor/Canvas.tsx b/packages/editor/src/editor/Canvas.tsx
index 7729fa7..fb69f53 100644
--- a/packages/editor/src/editor/Canvas.tsx
+++ b/packages/editor/src/editor/Canvas.tsx
@@ -512,6 +512,57 @@ function NodeView(props: {
               height: '100%',
               objectFit: node.props.fit ?? 'contain',
               display: 'block',
+              // Editor parity: allow selecting/dragging the widget even when clicking the media.
+              pointerEvents: 'none',
+            }}
+          />
+        </div>
+      ) : node.type === 'iframe' ? (
+        <div
+          style={{
+            width: '100%',
+            height: '100%',
+            overflow: 'hidden',
+            borderRadius: `${node.props.borderRadius ?? 0}px`,
+          }}
+        >
+          <iframe
+            src={node.props.src}
+            width={rect.w}
+            height={rect.h}
+            style={{
+              border: 0,
+              display: 'block',
+              // Editor parity: iframes steal pointer events; disable so selection/context menu works.
+              pointerEvents: 'none',
+            }}
+            title={node.id}
+          />
+        </div>
+      ) : node.type === 'video' ? (
+        <div
+          style={{
+            width: '100%',
+            height: '100%',
+            overflow: 'hidden',
+            borderRadius: `${node.props.borderRadius ?? 0}px`,
+          }}
+        >
+          <video
+            src={node.props.src}
+            width={rect.w}
+            height={rect.h}
+            autoPlay
+            playsInline
+            loop={node.props.loop ?? false}
+            muted={node.props.muted ?? false}
+            style={{
+              display: 'block',
+              width: '100%',
+              height: '100%',
+              objectFit: node.props.fit ?? 'contain',
+              // Editor parity: allow selecting/dragging even when clicking the video surface.
+              pointerEvents: 'none',
             }}
           />
         </div>
diff --git a/packages/editor/src/editor/EditorApp.tsx b/packages/editor/src/editor/EditorApp.tsx
index afaa639..757b910 100644
--- a/packages/editor/src/editor/EditorApp.tsx
+++ b/packages/editor/src/editor/EditorApp.tsx
@@ -80,6 +80,8 @@ export function EditorApp() {
             selected={state.doc.screen.nodes.find((n) => n.id === state.selection.ids[0])}
             onUpdateTextProps={(id, props) => dispatch({ type: 'updateTextProps', id, props })}
             onUpdateImageProps={(id, props) => dispatch({ type: 'updateImageProps', id, props })}
+            onUpdateIframeProps={(id, props) => dispatch({ type: 'updateIframeProps', id, props })}
+            onUpdateVideoProps={(id, props) => dispatch({ type: 'updateVideoProps', id, props })}
           />
 
           <Divider />
diff --git a/packages/editor/src/editor/Inspector.tsx b/packages/editor/src/editor/Inspector.tsx
index f48f138..82726f8 100644
--- a/packages/editor/src/editor/Inspector.tsx
+++ b/packages/editor/src/editor/Inspector.tsx
@@ -2,11 +2,15 @@ import { Input, InputNumber, Select, Space, Typography } from 'antd';
 import type { WidgetNode, TextWidgetNode } from '@astralview/sdk';
 
 type ImageWidgetNode = Extract<WidgetNode, { type: 'image' }>;
+type IframeWidgetNode = Extract<WidgetNode, { type: 'iframe' }>;
+type VideoWidgetNode = Extract<WidgetNode, { type: 'video' }>;
 
 export function Inspector(props: {
   selected?: WidgetNode;
   onUpdateTextProps: (id: string, patch: Partial<TextWidgetNode['props']>) => void;
   onUpdateImageProps: (id: string, patch: Partial<ImageWidgetNode['props']>) => void;
+  onUpdateIframeProps: (id: string, patch: Partial<IframeWidgetNode['props']>) => void;
+  onUpdateVideoProps: (id: string, patch: Partial<VideoWidgetNode['props']>) => void;
 }) {
   const node = props.selected;
 
@@ -54,8 +58,101 @@ export function Inspector(props: {
     );
   }
 
+  if (node.type === 'iframe') {
+    return (
+      <div>
+        <Typography.Title level={5} style={{ marginTop: 0 }}>
+          Iframe
+        </Typography.Title>
+
+        <Typography.Text type="secondary">Source</Typography.Text>
+        <Input
+          value={node.props.src}
+          onChange={(e) => props.onUpdateIframeProps(node.id, { src: e.target.value })}
+          placeholder="https://..."
+          style={{ marginBottom: 12 }}
+        />
+
+        <Typography.Text type="secondary">Border radius</Typography.Text>
+        <InputNumber
+          value={node.props.borderRadius ?? 0}
+          min={0}
+          onChange={(v) => props.onUpdateIframeProps(node.id, { borderRadius: typeof v === 'number' ? v : 0 })}
+          style={{ width: '100%' }}
+        />
+      </div>
+    );
+  }
+
+  if (node.type === 'video') {
+    return (
+      <div>
+        <Typography.Title level={5} style={{ marginTop: 0 }}>
+          Video
+        </Typography.Title>
+
+        <Typography.Text type="secondary">Source</Typography.Text>
+        <Input
+          value={node.props.src}
+          onChange={(e) => props.onUpdateVideoProps(node.id, { src: e.target.value })}
+          placeholder="https://..."
+          style={{ marginBottom: 12 }}
+        />
+
+        <Typography.Text type="secondary">Fit</Typography.Text>
+        <Select
+          value={node.props.fit ?? 'contain'}
+          onChange={(v) => props.onUpdateVideoProps(node.id, { fit: v })}
+          style={{ width: '100%', marginBottom: 12 }}
+          options={[
+            { value: 'contain', label: 'contain' },
+            { value: 'cover', label: 'cover' },
+            { value: 'fill', label: 'fill' },
+            { value: 'none', label: 'none' },
+            { value: 'scale-down', label: 'scale-down' },
+          ]}
+        />
+
+        <Space style={{ width: '100%', marginBottom: 12 }} size={12}>
+          <div style={{ flex: 1 }}>
+            <Typography.Text type="secondary">Loop</Typography.Text>
+            <Select
+              value={String(node.props.loop ?? false)}
+              onChange={(v) => props.onUpdateVideoProps(node.id, { loop: v === 'true' })}
+              style={{ width: '100%' }}
+              options={[
+                { value: 'true', label: 'true' },
+                { value: 'false', label: 'false' },
+              ]}
+            />
+          </div>
+          <div style={{ flex: 1 }}>
+            <Typography.Text type="secondary">Muted</Typography.Text>
+            <Select
+              value={String(node.props.muted ?? false)}
+              onChange={(v) => props.onUpdateVideoProps(node.id, { muted: v === 'true' })}
+              style={{ width: '100%' }}
+              options={[
+                { value: 'true', label: 'true' },
+                { value: 'false', label: 'false' },
+              ]}
+            />
+          </div>
+        </Space>
+
+        <Typography.Text type="secondary">Border radius</Typography.Text>
+        <InputNumber
+          value={node.props.borderRadius ?? 0}
+          min={0}
+          onChange={(v) => props.onUpdateVideoProps(node.id, { borderRadius: typeof v === 'number' ? v : 0 })}
+          style={{ width: '100%' }}
+        />
+      </div>
+    );
+  }
+
   // If more widget types are added, handle them above.
-  // For now, we only support text/image.
+  // For now, we only support text/image/iframe/video.
   if (node.type !== 'text') {
     return <Typography.Paragraph style={{ color: '#666' }}>Unsupported widget type.</Typography.Paragraph>;
   }
diff --git a/packages/editor/src/editor/store.ts b/packages/editor/src/editor/store.ts
index 781d916..691213c 100644
--- a/packages/editor/src/editor/store.ts
+++ b/packages/editor/src/editor/store.ts
@@ -4,6 +4,8 @@ import {
   migrateScreen,
   type Rect,
   type ImageWidgetNode,
+  type IframeWidgetNode,
+  type VideoWidgetNode,
   type Screen,
   type TextWidgetNode,
   type WidgetNode,
@@ -41,7 +43,9 @@ export type EditorAction =
   | { type: 'nudgeSelected'; dx: number; dy: number }
   | { type: 'duplicateSelected' }
   | { type: 'updateTextProps'; id: string; props: Partial<TextWidgetNode['props']> }
-  | { type: 'updateImageProps'; id: string; props: Partial<ImageWidgetNode['props']> };
+  | { type: 'updateImageProps'; id: string; props: Partial<ImageWidgetNode['props']> }
+  | { type: 'updateIframeProps'; id: string; props: Partial<IframeWidgetNode['props']> }
+  | { type: 'updateVideoProps'; id: string; props: Partial<VideoWidgetNode['props']> };
 
 interface DragSession {
   kind: 'move' | 'resize';
@@ -217,6 +221,40 @@ export function editorReducer(state: EditorState, action: EditorAction): EditorS
       };
     }
 
+    case 'updateIframeProps': {
+      const node = state.doc.screen.nodes.find((n) => n.id === action.id);
+      if (!node || node.type !== 'iframe') return state;
+      return {
+        ...historyPush(state),
+        doc: {
+          screen: {
+            ...state.doc.screen,
+            nodes: state.doc.screen.nodes.map((n) => {
+              if (n.id !== action.id || n.type !== 'iframe') return n;
+              return { ...n, props: { ...n.props, ...action.props } };
+            }),
+          },
+        },
+      };
+    }
+
+    case 'updateVideoProps': {
+      const node = state.doc.screen.nodes.find((n) => n.id === action.id);
+      if (!node || node.type !== 'video') return state;
+      return {
+        ...historyPush(state),
+        doc: {
+          screen: {
+            ...state.doc.screen,
+            nodes: state.doc.screen.nodes.map((n) => {
+              if (n.id !== action.id || n.type !== 'video') return n;
+              return { ...n, props: { ...n.props, ...action.props } };
+            }),
+          },
+        },
+      };
+    }
+
     case 'deleteSelected': {
       if (!state.selection.ids.length) return state;
       const ids = new Set(state.selection.ids);
diff --git a/packages/sdk/src/core/goview/convert.ts b/packages/sdk/src/core/goview/convert.ts
index 6274c8f..ef8a68a 100644
--- a/packages/sdk/src/core/goview/convert.ts
+++ b/packages/sdk/src/core/goview/convert.ts
@@ -1,12 +1,23 @@
-import { ASTRALVIEW_SCHEMA_VERSION, createEmptyScreen, type Screen, type TextWidgetNode } from '../schema';
+import {
+  ASTRALVIEW_SCHEMA_VERSION,
+  createEmptyScreen,
+  type ImageWidgetNode,
+  type IframeWidgetNode,
+  type Screen,
+  type TextWidgetNode,
+  type VideoWidgetNode,
+} from '../schema';
+import { convertGoViewImageOptionToNodeProps, type GoViewImageOption } from '../widgets/image';
+import { convertLegacyIframeOptionToNodeProps, type LegacyIframeOption } from '../widgets/iframe';
+import { convertLegacyVideoOptionToNodeProps, type LegacyVideoOption } from '../widgets/video';
 import { convertGoViewTextOptionToNodeProps, type GoViewTextOption } from '../widgets/text';
 
 export interface GoViewComponentLike {
   id?: string;
 
-  // goView component identity
+  // component identity
   key?: string; // e.g. "TextCommon" (sometimes)
-  chartConfig?: { key?: string }; // goView standard location
+  chartConfig?: { key?: string };
 
   // geometry
   attr?: { x: number; y: number; w: number; h: number; zIndex?: number };
@@ -14,7 +25,7 @@ export interface GoViewComponentLike {
   // state
   status?: { lock?: boolean; hide?: boolean };
 
-  // goView uses "option" for widget-specific config
+  // widget-specific config
   option?: unknown;
 }
 
@@ -31,23 +42,43 @@ export interface GoViewStorageLike {
 }
 
 export interface GoViewProjectLike {
-  // very loose input shape; goView has different versions/branches.
   width?: number;
   height?: number;
   canvas?: { width?: number; height?: number };
   componentList?: GoViewComponentLike[];
 
-  // goView persisted store shape
+  // persisted store shape (some variants)
   editCanvasConfig?: GoViewEditCanvasConfigLike;
 }
 
+function keyOf(c: GoViewComponentLike): string {
+  return (c.chartConfig?.key ?? c.key ?? '').toLowerCase();
+}
+
 function isTextCommon(c: GoViewComponentLike): boolean {
-  const k = (c.chartConfig?.key ?? c.key ?? '').toLowerCase();
+  const k = keyOf(c);
   if (k === 'textcommon') return true;
-  // fallback heuristic
   return k.includes('text');
 }
 
+function isImage(c: GoViewComponentLike): boolean {
+  const k = keyOf(c);
+  // goView variants: "Image", "image", sometimes with suffixes.
+  return k === 'image' || k.includes('image') || k.includes('picture');
+}
+
+function isIframe(c: GoViewComponentLike): boolean {
+  const k = keyOf(c);
+  // goView variants: "Iframe", "IframeCommon", etc.
+  return k === 'iframe' || k.includes('iframe');
+}
+
+function isVideo(c: GoViewComponentLike): boolean {
+  const k = keyOf(c);
+  // goView variants: "Video", "VideoCommon", etc.
+  return k === 'video' || k.includes('video');
+}
+
 export function convertGoViewProjectToScreen(input: GoViewProjectLike | GoViewStorageLike): Screen {
   const editCanvasConfig = (input as GoViewStorageLike).editCanvasConfig;
 
@@ -56,7 +87,7 @@ export function convertGoViewProjectToScreen(input: GoViewProjectLike | GoViewSt
   const height =
     editCanvasConfig?.height ?? (input as GoViewProjectLike).canvas?.height ?? (input as GoViewProjectLike).height ?? 1080;
 
-  const name = editCanvasConfig?.projectName ?? 'Imported from goView';
+  const name = editCanvasConfig?.projectName ?? 'Imported Project';
   const background = editCanvasConfig?.background;
 
   const screen = createEmptyScreen({
@@ -70,23 +101,68 @@ export function convertGoViewProjectToScreen(input: GoViewProjectLike | GoViewSt
 
   const componentList = (input as GoViewStorageLike).componentList ?? (input as GoViewProjectLike).componentList ?? [];
 
-  const nodes: TextWidgetNode[] = [];
+  const nodes: Array<TextWidgetNode | ImageWidgetNode | IframeWidgetNode | VideoWidgetNode> = [];
+
   for (const c of componentList) {
-    // Only first: TextCommon-like
-    if (!isTextCommon(c)) continue;
+    const rect = c.attr
+      ? { x: c.attr.x, y: c.attr.y, w: c.attr.w, h: c.attr.h }
+      : { x: 0, y: 0, w: 320, h: 60 };
 
-    const rect = c.attr ? { x: c.attr.x, y: c.attr.y, w: c.attr.w, h: c.attr.h } : { x: 0, y: 0, w: 320, h: 60 };
-    const props = convertGoViewTextOptionToNodeProps((c.option ?? {}) as GoViewTextOption);
+    if (isTextCommon(c)) {
+      const props = convertGoViewTextOptionToNodeProps((c.option ?? {}) as GoViewTextOption);
+      nodes.push({
+        id: c.id ?? `import_text_${Math.random().toString(16).slice(2)}`,
+        type: 'text',
+        rect,
+        zIndex: c.attr?.zIndex,
+        locked: c.status?.lock ?? false,
+        hidden: c.status?.hide ?? false,
+        props,
+      });
+      continue;
+    }
 
-    nodes.push({
-      id: c.id ?? `goview_text_${Math.random().toString(16).slice(2)}`,
-      type: 'text',
-      rect,
-      zIndex: c.attr?.zIndex,
-      locked: c.status?.lock ?? false,
-      hidden: c.status?.hide ?? false,
-      props,
-    });
+    if (isImage(c)) {
+      const props = convertGoViewImageOptionToNodeProps((c.option ?? {}) as GoViewImageOption);
+      nodes.push({
+        id: c.id ?? `import_image_${Math.random().toString(16).slice(2)}`,
+        type: 'image',
+        rect,
+        zIndex: c.attr?.zIndex,
+        locked: c.status?.lock ?? false,
+        hidden: c.status?.hide ?? false,
+        props,
+      });
+      continue;
+    }
+
+    if (isIframe(c)) {
+      const props = convertLegacyIframeOptionToNodeProps((c.option ?? {}) as LegacyIframeOption);
+      nodes.push({
+        id: c.id ?? `import_iframe_${Math.random().toString(16).slice(2)}`,
+        type: 'iframe',
+        rect,
+        zIndex: c.attr?.zIndex,
+        locked: c.status?.lock ?? false,
+        hidden: c.status?.hide ?? false,
+        props,
+      });
+      continue;
+    }
+
+    if (isVideo(c)) {
+      const props = convertLegacyVideoOptionToNodeProps((c.option ?? {}) as LegacyVideoOption);
+      nodes.push({
+        id: c.id ?? `import_video_${Math.random().toString(16).slice(2)}`,
+        type: 'video',
+        rect,
+        zIndex: c.attr?.zIndex,
+        locked: c.status?.lock ?? false,
+        hidden: c.status?.hide ?? false,
+        props,
+      });
+      continue;
+    }
   }
 
   return {
diff --git a/packages/sdk/src/core/schema.ts b/packages/sdk/src/core/schema.ts
index 0c13633..ffd02a4 100644
--- a/packages/sdk/src/core/schema.ts
+++ b/packages/sdk/src/core/schema.ts
@@ -34,7 +34,7 @@ export interface TextWidgetNode extends WidgetNodeBase {
     color?: string;
     fontWeight?: number | string;
 
-    // goView parity (TextCommon)
+    // legacy parity (TextCommon)
     paddingX?: number;
     paddingY?: number;
     letterSpacing?: number;
@@ -51,7 +51,35 @@ export interface TextWidgetNode extends WidgetNodeBase {
   };
 }
 
-export type WidgetNode = TextWidgetNode;
+export interface ImageWidgetNode extends WidgetNodeBase {
+  type: 'image';
+  props: {
+    src: string;
+    fit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
+    borderRadius?: number;
+  };
+}
+
+export interface IframeWidgetNode extends WidgetNodeBase {
+  type: 'iframe';
+  props: {
+    src: string;
+    borderRadius?: number;
+  };
+}
+
+export interface VideoWidgetNode extends WidgetNodeBase {
+  type: 'video';
+  props: {
+    src: string;
+    loop?: boolean;
+    muted?: boolean;
+    fit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
+    borderRadius?: number;
+  };
+}
+
+export type WidgetNode = TextWidgetNode | ImageWidgetNode | IframeWidgetNode | VideoWidgetNode;
 
 export interface Screen {
   version: SchemaVersion;
diff --git a/packages/sdk/src/core/widgets/iframe.ts b/packages/sdk/src/core/widgets/iframe.ts
new file mode 100644
index 0000000..e9e5ae6
--- /dev/null
+++ b/packages/sdk/src/core/widgets/iframe.ts
@@ -0,0 +1,13 @@
+import type { IframeWidgetNode } from '../schema';
+
+export interface LegacyIframeOption {
+  dataset: string;
+  borderRadius?: number;
+}
+
+export function convertLegacyIframeOptionToNodeProps(option: LegacyIframeOption): IframeWidgetNode['props'] {
+  return {
+    src: option.dataset ?? '',
+    borderRadius: option.borderRadius,
+  };
+}
diff --git a/packages/sdk/src/core/widgets/image.ts b/packages/sdk/src/core/widgets/image.ts
new file mode 100644
index 0000000..9ad1a7b
--- /dev/null
+++ b/packages/sdk/src/core/widgets/image.ts
@@ -0,0 +1,41 @@
+import type { ImageWidgetNode } from '../schema';
+
+/**
+ * goView Image option shape varies across versions. We keep this intentionally
+ * permissive and normalize the common fields.
+ */
+export interface GoViewImageOption {
+  /**
+   * Common in existing legacy widgets (same as iframe/video).
+   */
+  dataset?: string;
+
+  /**
+   * Other variants seen in the wild.
+   */
+  src?: string;
+  url?: string;
+
+  /**
+   * Styling.
+   */
+  fit?: ImageWidgetNode['props']['fit'];
+  objectFit?: ImageWidgetNode['props']['fit'];
+  borderRadius?: number;
+}
+
+function pickSrc(option: GoViewImageOption): string {
+  return option.dataset ?? option.src ?? option.url ?? '';
+}
+
+function pickFit(option: GoViewImageOption): ImageWidgetNode['props']['fit'] | undefined {
+  return option.fit ?? option.objectFit;
+}
+
+export function convertGoViewImageOptionToNodeProps(option: GoViewImageOption): ImageWidgetNode['props'] {
+  return {
+    src: pickSrc(option),
+    fit: pickFit(option),
+    borderRadius: option.borderRadius,
+  };
+}
diff --git a/packages/sdk/src/core/widgets/video.ts b/packages/sdk/src/core/widgets/video.ts
new file mode 100644
index 0000000..166e30d
--- /dev/null
+++ b/packages/sdk/src/core/widgets/video.ts
@@ -0,0 +1,19 @@
+import type { VideoWidgetNode } from '../schema';
+
+export interface LegacyVideoOption {
+  dataset: string;
+  loop?: boolean;
+  muted?: boolean;
+  fit?: VideoWidgetNode['props']['fit'];
+  borderRadius?: number;
+}
+
+export function convertLegacyVideoOptionToNodeProps(option: LegacyVideoOption): VideoWidgetNode['props'] {
+  return {
+    src: option.dataset ?? '',
+    loop: option.loop,
+    muted: option.muted,
+    fit: option.fit,
+    borderRadius: option.borderRadius,
+  };
+}
diff --git a/packages/sdk/src/index.ts b/packages/sdk/src/index.ts
index 81e3137..ab345b6 100644
--- a/packages/sdk/src/index.ts
+++ b/packages/sdk/src/index.ts
@@ -14,6 +14,9 @@ export type {
   Screen,
   WidgetNode,
   TextWidgetNode,
+  ImageWidgetNode,
+  IframeWidgetNode,
+  VideoWidgetNode,
 } from './core/schema';
 
 export { migrateScreen } from './core/migrate';
@@ -21,6 +24,15 @@ export { migrateScreen } from './core/migrate';
 export type { GoViewTextOption } from './core/widgets/text';
 export { convertGoViewTextOptionToNodeProps } from './core/widgets/text';
 
+export type { GoViewImageOption } from './core/widgets/image';
+export { convertGoViewImageOptionToNodeProps } from './core/widgets/image';
+
+export type { LegacyIframeOption } from './core/widgets/iframe';
+export { convertLegacyIframeOptionToNodeProps } from './core/widgets/iframe';
+
+export type { LegacyVideoOption } from './core/widgets/video';
+export { convertLegacyVideoOptionToNodeProps } from './core/widgets/video';
+
 export type { GoViewProjectLike, GoViewComponentLike } from './core/goview/convert';
 export { convertGoViewProjectToScreen } from './core/goview/convert';
 export { convertGoViewJSONToScreen } from './core/goview';
diff --git a/packages/sdk/tsconfig.tsbuildinfo b/packages/sdk/tsconfig.tsbuildinfo
deleted file mode 100644
index 9b00501..0000000
--- a/packages/sdk/tsconfig.tsbuildinfo
+++ /dev/null
@@ -1 +0,0 @@
-{"fileNames":["../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es5.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2015.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2016.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2017.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2018.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2019.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2020.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2021.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2022.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.dom.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.dom.iterable.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2015.core.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2015.collection.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2015.generator.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2015.iterable.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2015.promise.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2015.proxy.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2015.reflect.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2015.symbol.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2015.symbol.wellknown.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2016.array.include.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2016.intl.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2017.arraybuffer.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2017.date.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2017.object.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2017.sharedmemory.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2017.string.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2017.intl.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2017.typedarrays.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2018.asyncgenerator.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2018.asynciterable.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2018.intl.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2018.promise.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2018.regexp.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2019.array.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2019.object.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2019.string.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2019.symbol.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2019.intl.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2020.bigint.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2020.date.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2020.promise.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2020.sharedmemory.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2020.string.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2020.symbol.wellknown.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2020.intl.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2020.number.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2021.promise.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2021.string.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2021.weakref.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2021.intl.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2022.array.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2022.error.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2022.intl.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2022.object.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2022.string.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2022.regexp.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.decorators.d.ts","../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.decorators.legacy.d.ts","./src/core/types.ts","./src/core/registry.ts","./src/core/schema.ts","./src/core/migrate.ts","./src/core/widgets/text.ts","./src/core/goview/convert.ts","./src/core/goview.ts","./src/index.ts"],"fileIdsList":[[62],[62,64],[60],[60,61,62,63,64,65,66]],"fileInfos":[{"version":"c430d44666289dae81f30fa7b2edebf186ecc91a2d4c71266ea6ae76388792e1","affectsGlobalScope":true,"impliedFormat":1},{"version":"45b7ab580deca34ae9729e97c13cfd999df04416a79116c3bfb483804f85ded4","impliedFormat":1},{"version":"3facaf05f0c5fc569c5649dd359892c98a85557e3e0c847964caeb67076f4d75","impliedFormat":1},{"version":"e44bb8bbac7f10ecc786703fe0a6a4b952189f908707980ba8f3c8975a760962","impliedFormat":1},{"version":"5e1c4c362065a6b95ff952c0eab010f04dcd2c3494e813b493ecfd4fcb9fc0d8","impliedFormat":1},{"version":"68d73b4a11549f9c0b7d352d10e91e5dca8faa3322bfb77b661839c42b1ddec7","impliedFormat":1},{"version":"5efce4fc3c29ea84e8928f97adec086e3dc876365e0982cc8479a07954a3efd4","impliedFormat":1},{"version":"feecb1be483ed332fad555aff858affd90a48ab19ba7272ee084704eb7167569","impliedFormat":1},{"version":"ee7bad0c15b58988daa84371e0b89d313b762ab83cb5b31b8a2d1162e8eb41c2","impliedFormat":1},{"version":"080941d9f9ff9307f7e27a83bcd888b7c8270716c39af943532438932ec1d0b9","affectsGlobalScope":true,"impliedFormat":1},{"version":"2e80ee7a49e8ac312cc11b77f1475804bee36b3b2bc896bead8b6e1266befb43","affectsGlobalScope":true,"impliedFormat":1},{"version":"c57796738e7f83dbc4b8e65132f11a377649c00dd3eee333f672b8f0a6bea671","affectsGlobalScope":true,"impliedFormat":1},{"version":"dc2df20b1bcdc8c2d34af4926e2c3ab15ffe1160a63e58b7e09833f616efff44","affectsGlobalScope":true,"impliedFormat":1},{"version":"515d0b7b9bea2e31ea4ec968e9edd2c39d3eebf4a2d5cbd04e88639819ae3b71","affectsGlobalScope":true,"impliedFormat":1},{"version":"0559b1f683ac7505ae451f9a96ce4c3c92bdc71411651ca6ddb0e88baaaad6a3","affectsGlobalScope":true,"impliedFormat":1},{"version":"0dc1e7ceda9b8b9b455c3a2d67b0412feab00bd2f66656cd8850e8831b08b537","affectsGlobalScope":true,"impliedFormat":1},{"version":"ce691fb9e5c64efb9547083e4a34091bcbe5bdb41027e310ebba8f7d96a98671","affectsGlobalScope":true,"impliedFormat":1},{"version":"8d697a2a929a5fcb38b7a65594020fcef05ec1630804a33748829c5ff53640d0","affectsGlobalScope":true,"impliedFormat":1},{"version":"4ff2a353abf8a80ee399af572debb8faab2d33ad38c4b4474cff7f26e7653b8d","affectsGlobalScope":true,"impliedFormat":1},{"version":"fb0f136d372979348d59b3f5020b4cdb81b5504192b1cacff5d1fbba29378aa1","affectsGlobalScope":true,"impliedFormat":1},{"version":"d15bea3d62cbbdb9797079416b8ac375ae99162a7fba5de2c6c505446486ac0a","affectsGlobalScope":true,"impliedFormat":1},{"version":"68d18b664c9d32a7336a70235958b8997ebc1c3b8505f4f1ae2b7e7753b87618","affectsGlobalScope":true,"impliedFormat":1},{"version":"eb3d66c8327153d8fa7dd03f9c58d351107fe824c79e9b56b462935176cdf12a","affectsGlobalScope":true,"impliedFormat":1},{"version":"38f0219c9e23c915ef9790ab1d680440d95419ad264816fa15009a8851e79119","affectsGlobalScope":true,"impliedFormat":1},{"version":"69ab18c3b76cd9b1be3d188eaf8bba06112ebbe2f47f6c322b5105a6fbc45a2e","affectsGlobalScope":true,"impliedFormat":1},{"version":"a680117f487a4d2f30ea46f1b4b7f58bef1480456e18ba53ee85c2746eeca012","affectsGlobalScope":true,"impliedFormat":1},{"version":"2f11ff796926e0832f9ae148008138ad583bd181899ab7dd768a2666700b1893","affectsGlobalScope":true,"impliedFormat":1},{"version":"4de680d5bb41c17f7f68e0419412ca23c98d5749dcaaea1896172f06435891fc","affectsGlobalScope":true,"impliedFormat":1},{"version":"954296b30da6d508a104a3a0b5d96b76495c709785c1d11610908e63481ee667","affectsGlobalScope":true,"impliedFormat":1},{"version":"ac9538681b19688c8eae65811b329d3744af679e0bdfa5d842d0e32524c73e1c","affectsGlobalScope":true,"impliedFormat":1},{"version":"0a969edff4bd52585473d24995c5ef223f6652d6ef46193309b3921d65dd4376","affectsGlobalScope":true,"impliedFormat":1},{"version":"9e9fbd7030c440b33d021da145d3232984c8bb7916f277e8ffd3dc2e3eae2bdb","affectsGlobalScope":true,"impliedFormat":1},{"version":"811ec78f7fefcabbda4bfa93b3eb67d9ae166ef95f9bff989d964061cbf81a0c","affectsGlobalScope":true,"impliedFormat":1},{"version":"717937616a17072082152a2ef351cb51f98802fb4b2fdabd32399843875974ca","affectsGlobalScope":true,"impliedFormat":1},{"version":"d7e7d9b7b50e5f22c915b525acc5a49a7a6584cf8f62d0569e557c5cfc4b2ac2","affectsGlobalScope":true,"impliedFormat":1},{"version":"71c37f4c9543f31dfced6c7840e068c5a5aacb7b89111a4364b1d5276b852557","affectsGlobalScope":true,"impliedFormat":1},{"version":"576711e016cf4f1804676043e6a0a5414252560eb57de9faceee34d79798c850","affectsGlobalScope":true,"impliedFormat":1},{"version":"89c1b1281ba7b8a96efc676b11b264de7a8374c5ea1e6617f11880a13fc56dc6","affectsGlobalScope":true,"impliedFormat":1},{"version":"74f7fa2d027d5b33eb0471c8e82a6c87216223181ec31247c357a3e8e2fddc5b","affectsGlobalScope":true,"impliedFormat":1},{"version":"d6d7ae4d1f1f3772e2a3cde568ed08991a8ae34a080ff1151af28b7f798e22ca","affectsGlobalScope":true,"impliedFormat":1},{"version":"063600664504610fe3e99b717a1223f8b1900087fab0b4cad1496a114744f8df","affectsGlobalScope":true,"impliedFormat":1},{"version":"934019d7e3c81950f9a8426d093458b65d5aff2c7c1511233c0fd5b941e608ab","affectsGlobalScope":true,"impliedFormat":1},{"version":"52ada8e0b6e0482b728070b7639ee42e83a9b1c22d205992756fe020fd9f4a47","affectsGlobalScope":true,"impliedFormat":1},{"version":"3bdefe1bfd4d6dee0e26f928f93ccc128f1b64d5d501ff4a8cf3c6371200e5e6","affectsGlobalScope":true,"impliedFormat":1},{"version":"59fb2c069260b4ba00b5643b907ef5d5341b167e7d1dbf58dfd895658bda2867","affectsGlobalScope":true,"impliedFormat":1},{"version":"639e512c0dfc3fad96a84caad71b8834d66329a1f28dc95e3946c9b58176c73a","affectsGlobalScope":true,"impliedFormat":1},{"version":"368af93f74c9c932edd84c58883e736c9e3d53cec1fe24c0b0ff451f529ceab1","affectsGlobalScope":true,"impliedFormat":1},{"version":"af3dd424cf267428f30ccfc376f47a2c0114546b55c44d8c0f1d57d841e28d74","affectsGlobalScope":true,"impliedFormat":1},{"version":"995c005ab91a498455ea8dfb63aa9f83fa2ea793c3d8aa344be4a1678d06d399","affectsGlobalScope":true,"impliedFormat":1},{"version":"959d36cddf5e7d572a65045b876f2956c973a586da58e5d26cde519184fd9b8a","affectsGlobalScope":true,"impliedFormat":1},{"version":"965f36eae237dd74e6cca203a43e9ca801ce38824ead814728a2807b1910117d","affectsGlobalScope":true,"impliedFormat":1},{"version":"3925a6c820dcb1a06506c90b1577db1fdbf7705d65b62b99dce4be75c637e26b","affectsGlobalScope":true,"impliedFormat":1},{"version":"0a3d63ef2b853447ec4f749d3f368ce642264246e02911fcb1590d8c161b8005","affectsGlobalScope":true,"impliedFormat":1},{"version":"8cdf8847677ac7d20486e54dd3fcf09eda95812ac8ace44b4418da1bbbab6eb8","affectsGlobalScope":true,"impliedFormat":1},{"version":"8444af78980e3b20b49324f4a16ba35024fef3ee069a0eb67616ea6ca821c47a","affectsGlobalScope":true,"impliedFormat":1},{"version":"3287d9d085fbd618c3971944b65b4be57859f5415f495b33a6adc994edd2f004","affectsGlobalScope":true,"impliedFormat":1},{"version":"b4b67b1a91182421f5df999988c690f14d813b9850b40acd06ed44691f6727ad","affectsGlobalScope":true,"impliedFormat":1},{"version":"8e7f8264d0fb4c5339605a15daadb037bf238c10b654bb3eee14208f860a32ea","affectsGlobalScope":true,"impliedFormat":1},{"version":"782dec38049b92d4e85c1585fbea5474a219c6984a35b004963b00beb1aab538","affectsGlobalScope":true,"impliedFormat":1},{"version":"dcd1824e0c80b910799e3683103ebab13e6f8ebc9a65d77f9cc07b585f470267","signature":"4f3caa2b350606973ed1a34945784617d91decc8e1a3a9e232c709f38eaec121"},{"version":"6c3c430fe895687d042dc9045307685500797a11a070869d85daf0114c4ab6f7","signature":"68fb96f41d69eb0b6517932961585f3f3935cb795bb92532f5c322bb3ddb9630"},{"version":"313fd54718dbead55cff4465375d92b2c9af5badfd93bb828e1a5cf278c0caf5","signature":"c3a535fc6acc9e300c801599a341547ba19ec5a511d12d85d9d0cbd5080776eb"},{"version":"9097617e6718617a7791af4e21d0ef06abe003ddc15cc11e73539ca298fd0074","signature":"a35bb6146641569e75836075f1cbf81007c45ff6229960907b36a52cd79d4b8b"},{"version":"a668958c16e613ae75e8e399872af6cacbc0e18df197ab998329b48178033593","signature":"754b018adcd8187dd51db9c9e9d8b1b6ac139446a06abb9de2c9ea8379f1e6ef"},{"version":"67ebad601c166795e0d550c6c1459e20b32d763d9d5daadeb7770bfafa3c6b93","signature":"0de54710721cf82f969bbc3048b21901973cb8adefbba2062af860ded84a291f"},{"version":"e3837901112e3e4376e1001ea7dabc2aae39376cab1392af367c66fac7185f01","signature":"a976581ab78025f2838c1422808e457defb7bc623d419ac3e08ea9da35a950a4"},{"version":"f1ba428e203a7af93bfff844430656f71bcedf5abb8c220c9b6f1b9be82a89d3","signature":"3aa370cccc39bd39a04ebfbc987f031fbeecf20c8fe617372f16d225b4c1797e"}],"root":[[60,67]],"options":{"composite":true,"declaration":true,"declarationMap":true,"esModuleInterop":true,"module":99,"noImplicitOverride":true,"noUncheckedIndexedAccess":true,"outDir":"./dist","rootDir":"./src","skipLibCheck":true,"sourceMap":true,"strict":true,"target":9,"useDefineForClassFields":true},"referencedMap":[[66,1],[65,2],[63,1],[61,3],[64,1],[67,4]],"latestChangedDtsFile":"./dist/core/goview/convert.d.ts","version":"5.9.3"}
\ No newline at end of file