@lovision/plugin-dev 1.0.0

package/dist/templates/ai-layout-assistant/src/main.ts.template

@@ -0,0 +1,345 @@
+import { definePlugin } from "@lovision/plugin-sdk";
+
+type Vec2 = {
+  x: number;
+  y: number;
+};
+
+type Size = {
+  height: number;
+  width: number;
+};
+
+type SceneNodeSnapshot = {
+  children: SceneNodeSnapshot[];
+  id: string;
+  name: string;
+  parentId: string | null;
+  position: Vec2;
+  size: Size;
+  type: string;
+};
+
+type SceneSnapshot = {
+  root: SceneNodeSnapshot;
+  version: number;
+};
+
+type NodeCreateSpec = {
+  name?: string;
+  parentId?: string | null;
+  position?: Vec2;
+  size?: Size;
+  type: string;
+};
+
+type MutationResult = {
+  newVersion: number;
+};
+
+type IntegrationInvokeResult = {
+  integrationId: string;
+  invokedAt: number;
+  operation: string;
+  output?: unknown;
+  receipt?: unknown;
+  status: "accepted" | "ok";
+};
+
+type LayoutAssistantContext = {
+  document: {
+    snapshot(): Promise<SceneSnapshot>;
+  };
+  integrations: {
+    invoke(params: {
+      artifacts?: Array<{ resource: unknown; role?: string }>;
+      input: unknown;
+      integrationId: string;
+      operation: string;
+    }): Promise<IntegrationInvokeResult>;
+  };
+  nodes: {
+    create(
+      specs: NodeCreateSpec[],
+      opts?: { expectedVersion?: number },
+    ): Promise<MutationResult>;
+  };
+  notify: {
+    send(
+      message: string,
+      options?: { kind?: "error" | "info" | "success" | "warning" },
+    ): Promise<void>;
+  };
+  selection: {
+    get(): Promise<string[]>;
+  };
+};
+
+type LayoutCardSuggestion = {
+  name: string;
+  position: Vec2;
+  size: Size;
+};
+
+type LayoutSuggestion = {
+  cards: LayoutCardSuggestion[];
+  integration: {
+    integrationId: string;
+    invokedAt: number;
+    operation: string;
+    status: string;
+  };
+  summary: string;
+};
+
+type LayoutMessage =
+  | {
+      type: "analysis";
+      payload: LayoutSuggestion;
+    }
+  | {
+      type: "applied";
+      payload: {
+        cardCount: number;
+        newVersion: number;
+        suggestion: LayoutSuggestion;
+      };
+    }
+  | {
+      type: "error";
+      payload: {
+        message: string;
+      };
+    }
+  | {
+      type: "ready";
+      payload: {
+        message: string;
+      };
+    };
+
+definePlugin({
+  apiVersion: "1.0",
+  version: "0.1.0",
+  command: async (ctx) => {
+    const session = await ctx.ui.show({
+      mode: "panel",
+      entry: "./ui.html",
+      title: "AI Layout Assistant",
+      width: 440,
+    });
+
+    let closed = false;
+    let latestSuggestion: LayoutSuggestion | null = null;
+    const postToUi = async (message: LayoutMessage): Promise<void> => {
+      if (closed) return;
+      await session.postMessage(message);
+    };
+    const panelClosed = new Promise<void>((resolve) => {
+      session.on("close", () => {
+        closed = true;
+        void ctx.notify.send("AI Layout Assistant closed.", {
+          kind: "info",
+        });
+        resolve();
+      });
+    });
+
+    session.on("analyze-layout", async () => {
+      await handleUiAction(postToUi, async () => {
+        latestSuggestion = await analyzeLayout(ctx);
+        await postToUi({
+          type: "analysis",
+          payload: latestSuggestion,
+        });
+      });
+    });
+
+    session.on("apply-layout", async () => {
+      await handleUiAction(postToUi, async () => {
+        const suggestion = latestSuggestion ?? (await analyzeLayout(ctx));
+        latestSuggestion = suggestion;
+        const applied = await applyLayout(ctx, suggestion);
+        await postToUi({
+          type: "applied",
+          payload: {
+            cardCount: suggestion.cards.length,
+            newVersion: applied.newVersion,
+            suggestion,
+          },
+        });
+        await ctx.notify.send(
+          `AI Layout Assistant applied ${suggestion.cards.length} suggestion card(s).`,
+          { kind: "success" },
+        );
+      });
+    });
+
+    await postToUi({
+      type: "ready",
+      payload: {
+        message:
+          "Ready. Analyze layout through the host integration, then apply cards.",
+      },
+    });
+
+    await panelClosed;
+    return { closed: true, ok: true };
+  },
+});
+
+async function handleUiAction(
+  postToUi: (message: LayoutMessage) => Promise<void>,
+  action: () => Promise<unknown>,
+): Promise<void> {
+  try {
+    await action();
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    await postToUi({ type: "error", payload: { message } });
+  }
+}
+
+async function analyzeLayout(
+  ctx: LayoutAssistantContext,
+): Promise<LayoutSuggestion> {
+  const [snapshot, selection] = await Promise.all([
+    ctx.document.snapshot(),
+    ctx.selection.get(),
+  ]);
+  const nodes = collectNodes(snapshot.root).filter(
+    (node) => node.id !== snapshot.root.id,
+  );
+  const result = await ctx.integrations.invoke({
+    integrationId: "ai.layout",
+    operation: "suggest-layout",
+    input: {
+      nodeCount: nodes.length,
+      selectedIds: selection,
+      snapshotVersion: snapshot.version,
+    },
+  });
+
+  return normalizeSuggestion(result);
+}
+
+async function applyLayout(
+  ctx: LayoutAssistantContext,
+  suggestion: LayoutSuggestion,
+): Promise<MutationResult> {
+  const snapshot = await ctx.document.snapshot();
+  return await ctx.nodes.create(
+    suggestion.cards.map((card) => ({
+      type: "shape",
+      name: card.name,
+      parentId: null,
+      position: card.position,
+      size: card.size,
+    })),
+    { expectedVersion: snapshot.version },
+  );
+}
+
+function normalizeSuggestion(
+  result: IntegrationInvokeResult,
+): LayoutSuggestion {
+  const output = readRecord(result.output);
+  const cards = readCards(output?.cards);
+  const fallbackCards =
+    cards.length > 0
+      ? cards
+      : [
+          {
+            name: "AI Layout Assistant Card A",
+            position: { x: 120, y: 340 },
+            size: { width: 120, height: 80 },
+          },
+          {
+            name: "AI Layout Assistant Card B",
+            position: { x: 260, y: 340 },
+            size: { width: 120, height: 80 },
+          },
+          {
+            name: "AI Layout Assistant Card C",
+            position: { x: 400, y: 340 },
+            size: { width: 120, height: 80 },
+          },
+        ];
+
+  return {
+    cards: fallbackCards,
+    integration: {
+      integrationId: result.integrationId,
+      invokedAt: result.invokedAt,
+      operation: result.operation,
+      status: result.status,
+    },
+    summary:
+      typeof output?.summary === "string"
+        ? output.summary
+        : "Host integration returned a balanced card row.",
+  };
+}
+
+function readCards(value: unknown): LayoutCardSuggestion[] {
+  if (!Array.isArray(value)) return [];
+  return value
+    .map((candidate, index) => readCard(candidate, index))
+    .filter((card): card is LayoutCardSuggestion => card !== null);
+}
+
+function readCard(value: unknown, index: number): LayoutCardSuggestion | null {
+  const record = readRecord(value);
+  if (!record) return null;
+  const position = readVec2(record.position);
+  const size = readSize(record.size);
+  if (!position || !size) return null;
+
+  return {
+    name:
+      typeof record.name === "string" && record.name.length > 0
+        ? record.name
+        : `AI Layout Assistant Card ${String.fromCharCode(65 + index)}`,
+    position,
+    size,
+  };
+}
+
+function readRecord(value: unknown): Record<string, unknown> | null {
+  if (value == null || typeof value !== "object" || Array.isArray(value)) {
+    return null;
+  }
+  return value as Record<string, unknown>;
+}
+
+function readVec2(value: unknown): Vec2 | null {
+  const record = readRecord(value);
+  if (!record) return null;
+  if (typeof record.x !== "number" || typeof record.y !== "number") {
+    return null;
+  }
+  return { x: record.x, y: record.y };
+}
+
+function readSize(value: unknown): Size | null {
+  const record = readRecord(value);
+  if (!record) return null;
+  if (
+    typeof record.width !== "number" ||
+    typeof record.height !== "number"
+  ) {
+    return null;
+  }
+  return { height: record.height, width: record.width };
+}
+
+function collectNodes(
+  node: SceneNodeSnapshot,
+  out: SceneNodeSnapshot[] = [],
+): SceneNodeSnapshot[] {
+  out.push(node);
+  for (const child of node.children) {
+    collectNodes(child, out);
+  }
+  return out;
+}

package/dist/templates/ai-layout-assistant/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "lib": ["ESNext", "WebWorker"],
+    "module": "Preserve",
+    "moduleResolution": "bundler",
+    "target": "ESNext",
+    "strict": true,
+    "skipLibCheck": true,
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true
+  },
+  "include": ["src/**/*"]
+}

package/dist/templates/ai-layout-assistant/ui.html.template

@@ -0,0 +1,114 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>AI Layout Assistant</title>
+    <style>
+      :root {
+        color-scheme: light dark;
+      }
+
+      body {
+        margin: 0;
+        color: CanvasText;
+        background: Canvas;
+      }
+
+      main {
+        display: grid;
+        gap: 1rem;
+        padding: 1rem;
+      }
+
+      .actions {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+      }
+
+      .status {
+        min-height: 1.5rem;
+      }
+
+      pre {
+        max-height: 16rem;
+        overflow: auto;
+        padding: 0.75rem;
+        color: CanvasText;
+        background: Canvas;
+        border: 1px solid ButtonBorder;
+      }
+    </style>
+  </head>
+  <body>
+    <main>
+      <header>
+        <h1>AI Layout Assistant</h1>
+        <p>Request a host AI layout suggestion and apply it to the canvas.</p>
+      </header>
+
+      <div class="actions">
+        <button id="analyze-button" type="button">Analyze layout</button>
+        <button id="apply-button" type="button">Apply suggestion</button>
+      </div>
+
+      <p id="status" class="status" role="status">Waiting for host...</p>
+      <pre id="details" aria-label="Layout details"></pre>
+    </main>
+
+    <script>
+      const uiId = globalThis.__LOVISION_PLUGIN_UI_ID__;
+      const status = document.getElementById("status");
+      const details = document.getElementById("details");
+
+      function post(type, payload) {
+        parent.postMessage(
+          {
+            type: "plugin-ui-message",
+            direction: "ui-to-main",
+            uiId,
+            message: { type, payload },
+          },
+          "*",
+        );
+      }
+
+      document.getElementById("analyze-button").addEventListener("click", () => {
+        status.textContent = "Analyzing layout...";
+        details.textContent = "";
+        post("analyze-layout", {});
+      });
+
+      document.getElementById("apply-button").addEventListener("click", () => {
+        status.textContent = "Applying suggestion...";
+        post("apply-layout", {});
+      });
+
+      window.addEventListener("message", (event) => {
+        const envelope = event.data;
+        if (
+          !envelope ||
+          envelope.type !== "plugin-ui-message" ||
+          envelope.direction !== "main-to-ui" ||
+          envelope.uiId !== uiId
+        ) {
+          return;
+        }
+
+        const message = envelope.message;
+        if (message.type === "ready") {
+          status.textContent = message.payload.message;
+        } else if (message.type === "analysis") {
+          status.textContent = `Received ${message.payload.cards.length} layout suggestion card(s).`;
+          details.textContent = JSON.stringify(message.payload, null, 2);
+        } else if (message.type === "applied") {
+          status.textContent = `Applied ${message.payload.cardCount} layout suggestion card(s).`;
+          details.textContent = JSON.stringify(message.payload, null, 2);
+        } else if (message.type === "error") {
+          status.textContent = message.payload.message;
+        }
+      });
+    </script>
+  </body>
+</html>

package/dist/templates/asset-browser/README.md.template

@@ -0,0 +1,24 @@
+# Asset Browser
+
+This Step 31 acceptance template inserts generated image assets through the plugin main worker. The UI sends asset intent only; the worker creates a command-scoped binary resource with `ctx.binary.create` and inserts it as an image node with `ctx.assets.insertImage`.
+
+## Development
+
+```bash
+npm install
+npm run dev
+```
+
+Copy the printed `manifestUrl=...`, open the editor shell, then use Dev Panel -> Development -> Add by URL.
+
+## Use
+
+Run **Open Asset Browser**, then click **Insert hero asset** or **Insert badge asset**. The inserted node is an image node named after the selected asset and carries plugin binary metadata in the document snapshot.
+
+## Formal install
+
+```bash
+npm run build
+```
+
+Upload the generated `dist/*.bundle.json` through Dev Panel -> Formal install, confirm the install dialog, then run the command from MainMenu.

package/dist/templates/asset-browser/eslint.config.mjs

@@ -0,0 +1,19 @@
+import pluginSdkConfig from "@lovision/plugin-sdk/eslint-config";
+import tsParser from "@typescript-eslint/parser";
+
+const pluginFiles = ["src/**/*.ts"];
+
+export default [
+  {
+    files: pluginFiles,
+    languageOptions: {
+      parser: tsParser,
+      ecmaVersion: "latest",
+      sourceType: "module",
+    },
+  },
+  ...pluginSdkConfig.map((entry) => ({
+    ...entry,
+    files: pluginFiles,
+  })),
+];

package/dist/templates/asset-browser/manifest.json.template

@@ -0,0 +1,29 @@
+{
+  "id": "__PLUGIN_ID__",
+  "name": {
+    "en": "Asset Browser",
+    "zh-CN": "Asset Browser"
+  },
+  "version": "0.1.0",
+  "apiVersion": "1.0",
+  "editorType": ["design"],
+  "main": "./dist/main.js",
+  "ui": "./ui.html",
+  "documentAccess": "current-page",
+  "permissions": [
+    "asset:write",
+    "binary:write",
+    "document:read",
+    "notify",
+    "ui:panel"
+  ],
+  "commands": [
+    {
+      "id": "run",
+      "name": {
+        "en": "__COMMAND_NAME_EN__",
+        "zh-CN": "__COMMAND_NAME_ZH__"
+      }
+    }
+  ]
+}

package/dist/templates/asset-browser/package.json.template

@@ -0,0 +1,18 @@
+{
+  "name": "__PACKAGE_NAME__",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "plugin-dev dev",
+    "build": "plugin-dev build",
+    "validate": "plugin-dev validate",
+    "lint": "eslint src --max-warnings=0"
+  },
+  "devDependencies": {
+    "@lovision/plugin-dev": "__PLUGIN_DEV_SPEC__",
+    "@lovision/plugin-sdk": "__PLUGIN_SDK_SPEC__"__LOCAL_SUPPORT_DEPS__,
+    "@typescript-eslint/parser": "^8.30.0",
+    "eslint": "^9.25.1",
+    "typescript": "^5.8.3"
+  }__LOCAL_OVERRIDES__
+}