@lovision/plugin-dev 1.0.0

package/dist/templates/design-lint-panel/src/main.ts.template

@@ -0,0 +1,221 @@
+import { definePlugin } from "@lovision/plugin-sdk";
+
+type DesignLintFinding = {
+  message: string;
+  nodeId: string;
+  rule: "unnamed-node" | "empty-text-node" | "non-positive-size";
+};
+
+type SceneNodeSnapshot = {
+  children: SceneNodeSnapshot[];
+  extraFields?: Record<string, unknown>;
+  id: string;
+  name: string;
+  size: {
+    height: number;
+    width: number;
+  };
+  type: string;
+};
+
+type SceneSnapshot = {
+  root: SceneNodeSnapshot;
+};
+
+type LintMessage =
+  | {
+      type: "findings";
+      payload: {
+        findings: DesignLintFinding[];
+      };
+    }
+  | {
+      type: "error";
+      payload: {
+        message: string;
+      };
+    }
+  | {
+      type: "ready";
+      payload: {
+        message: string;
+      };
+    };
+
+const DEFAULT_LABELS = new Set(["Rectangle", "Frame", "Text"]);
+
+definePlugin({
+  apiVersion: "1.0",
+  version: "0.1.0",
+  command: async (ctx) => {
+    const session = await ctx.ui.show({
+      mode: "panel",
+      entry: "./ui.html",
+      title: "Design Lint Panel",
+      width: 420,
+    });
+
+    let closed = false;
+    let latestFindings: DesignLintFinding[] = [];
+    const panelClosed = new Promise<void>((resolve) => {
+      session.on("close", () => {
+        closed = true;
+        void ctx.notify.send("Design Lint Panel closed.", { kind: "info" });
+        resolve();
+      });
+    });
+
+    const postToUi = async (message: LintMessage): Promise<void> => {
+      if (closed) return;
+      await session.postMessage(message);
+    };
+
+    const runLint = async (): Promise<DesignLintFinding[]> => {
+      const snapshot = (await ctx.document.snapshot()) as SceneSnapshot;
+      latestFindings = lintSnapshot(snapshot);
+      await postToUi({
+        type: "findings",
+        payload: { findings: latestFindings },
+      });
+      await ctx.notify.send(
+        `Design Lint Panel found ${latestFindings.length} issue${
+          latestFindings.length === 1 ? "" : "s"
+        }.`,
+        { kind: latestFindings.length > 0 ? "warning" : "success" },
+      );
+      return latestFindings;
+    };
+
+    session.on("run-lint", async () => {
+      await handleUiAction(postToUi, runLint);
+    });
+
+    session.on("focus-first-issue", async () => {
+      await handleUiAction(postToUi, async () => {
+        const findings =
+          latestFindings.length > 0 ? latestFindings : await runLint();
+        const firstFinding = findings[0];
+        if (!firstFinding) {
+          await ctx.notify.send("Design Lint Panel has no issue to focus.", {
+            kind: "info",
+          });
+          return;
+        }
+        await ctx.viewport.focusNode(firstFinding.nodeId);
+        await ctx.notify.send(
+          `Design Lint Panel focused ${firstFinding.nodeId}.`,
+          { kind: "info" },
+        );
+      });
+    });
+
+    session.on("fix-default-names", async () => {
+      await handleUiAction(postToUi, async () => {
+        const findings =
+          latestFindings.length > 0 ? latestFindings : await runLint();
+        const nodeIds = findings
+          .filter((finding) => finding.rule === "unnamed-node")
+          .map((finding) => finding.nodeId);
+        if (nodeIds.length === 0) {
+          await ctx.notify.send("Design Lint Panel found no default names.", {
+            kind: "info",
+          });
+          await runLint();
+          return;
+        }
+        await ctx.nodes.rename(nodeIds, { prefix: "Lint/" });
+        await ctx.notify.send(
+          `Design Lint Panel fixed ${nodeIds.length} default-named node(s).`,
+          { kind: "success" },
+        );
+        await runLint();
+      });
+    });
+
+    await postToUi({
+      type: "ready",
+      payload: {
+        message:
+          "Ready. Run lint to scan default names, empty text, and non-positive sizes.",
+      },
+    });
+
+    await panelClosed;
+    return { closed: true, ok: true };
+  },
+});
+
+async function handleUiAction(
+  postToUi: (message: LintMessage) => 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 } });
+  }
+}
+
+function lintSnapshot(snapshot: SceneSnapshot): DesignLintFinding[] {
+  const findings: DesignLintFinding[] = [];
+  for (const node of collectNodes(snapshot.root)) {
+    const isRootNode = node.id === snapshot.root.id;
+    const trimmedName = node.name.trim();
+    if (
+      !isRootNode &&
+      (trimmedName.length === 0 || DEFAULT_LABELS.has(trimmedName))
+    ) {
+      findings.push({
+        nodeId: node.id,
+        rule: "unnamed-node",
+        message: "Node name is blank or default.",
+      });
+    }
+
+    if (node.type === "text" && isBlankText(getTextContent(node))) {
+      findings.push({
+        nodeId: node.id,
+        rule: "empty-text-node",
+        message: "Text node content is empty.",
+      });
+    }
+
+    if (!isRootNode && (node.size.width <= 0 || node.size.height <= 0)) {
+      findings.push({
+        nodeId: node.id,
+        rule: "non-positive-size",
+        message: "Node size must be positive.",
+      });
+    }
+  }
+  return findings;
+}
+
+function collectNodes(
+  node: SceneNodeSnapshot,
+  out: SceneNodeSnapshot[] = [],
+): SceneNodeSnapshot[] {
+  out.push(node);
+  for (const child of node.children) {
+    collectNodes(child, out);
+  }
+  return out;
+}
+
+function getTextContent(node: SceneNodeSnapshot): string | undefined {
+  const data = node.extraFields?.data;
+  if (!isRecord(data)) return undefined;
+  const config = data.config;
+  if (!isRecord(config)) return undefined;
+  const text = config.text;
+  return typeof text === "string" ? text : undefined;
+}
+
+function isBlankText(value: unknown): boolean {
+  return typeof value === "string" && value.trim().length === 0;
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return value != null && typeof value === "object" && !Array.isArray(value);
+}

package/dist/templates/design-lint-panel/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/design-lint-panel/ui.html.template

@@ -0,0 +1,172 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Design Lint Panel</title>
+    <style>
+      :root {
+        color-scheme: light dark;
+      }
+
+      body {
+        margin: 0;
+        color: CanvasText;
+        background: Canvas;
+      }
+
+      main {
+        display: grid;
+        gap: 1rem;
+        padding: 1rem;
+      }
+
+      header {
+        display: grid;
+        gap: 0.35rem;
+      }
+
+      h1,
+      p {
+        margin: 0;
+      }
+
+      .actions {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+      }
+
+      .status {
+        min-height: 1.5rem;
+      }
+
+      .findings {
+        display: grid;
+        gap: 0.5rem;
+        margin: 0;
+        padding: 0;
+        list-style: none;
+      }
+
+      .finding {
+        display: grid;
+        gap: 0.25rem;
+        padding: 0.75rem;
+        border: 1px solid ButtonBorder;
+        border-radius: 0.5rem;
+      }
+
+      .finding code {
+        overflow-wrap: anywhere;
+      }
+    </style>
+  </head>
+  <body>
+    <main>
+      <header>
+        <h1>Design Lint Panel</h1>
+        <p>
+          Scan the current page for default names, empty text, and invalid
+          sizes. Fixes run in the main worker.
+        </p>
+      </header>
+
+      <div class="actions">
+        <button id="run-lint" type="button">Run lint</button>
+        <button id="focus-first-issue" type="button">Focus first issue</button>
+        <button id="fix-default-names" type="button">Fix default names</button>
+      </div>
+
+      <p id="status" class="status" role="status">Waiting for host...</p>
+      <ul id="findings" class="findings" aria-label="Findings">
+        <li>No issues yet. Run lint to scan the document.</li>
+      </ul>
+    </main>
+
+    <script>
+      const uiId = globalThis.__LOVISION_PLUGIN_UI_ID__;
+      const status = document.getElementById("status");
+      const findingsList = document.getElementById("findings");
+
+      function post(type, payload) {
+        parent.postMessage(
+          {
+            type: "plugin-ui-message",
+            direction: "ui-to-main",
+            uiId,
+            message: { type, payload },
+          },
+          "*",
+        );
+      }
+
+      function setFindings(findings) {
+        findingsList.textContent = "";
+        if (!Array.isArray(findings) || findings.length === 0) {
+          const empty = document.createElement("li");
+          empty.textContent = "No issues";
+          findingsList.append(empty);
+          status.textContent = "Found 0 issues.";
+          return;
+        }
+
+        for (const finding of findings) {
+          const item = document.createElement("li");
+          item.className = "finding";
+          const title = document.createElement("strong");
+          title.textContent = finding.rule || "issue";
+          const nodeId = document.createElement("code");
+          nodeId.textContent = finding.nodeId || "unknown-node";
+          const message = document.createElement("span");
+          message.textContent = finding.message || "";
+          item.append(title, nodeId, message);
+          findingsList.append(item);
+        }
+        status.textContent = `Found ${findings.length} issue${
+          findings.length === 1 ? "" : "s"
+        }.`;
+      }
+
+      document.getElementById("run-lint").addEventListener("click", () => {
+        status.textContent = "Running lint...";
+        post("run-lint", {});
+      });
+
+      document
+        .getElementById("focus-first-issue")
+        .addEventListener("click", () => {
+          status.textContent = "Focusing first issue...";
+          post("focus-first-issue", {});
+        });
+
+      document
+        .getElementById("fix-default-names")
+        .addEventListener("click", () => {
+          status.textContent = "Fixing default names...";
+          post("fix-default-names", {});
+        });
+
+      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 === "findings") {
+          setFindings(message.payload.findings);
+        } else if (message.type === "error") {
+          status.textContent = message.payload.message;
+        }
+      });
+    </script>
+  </body>
+</html>

package/dist/templates/export-selection/README.md.template

@@ -0,0 +1,26 @@
+# Export Selection
+
+This acceptance template exports the current object selection, or the first node in the scene when nothing is selected. The plugin main worker calls `ctx.export.selection` without forcing `nodeIds` first, so host-side vector edit selections can normalize back to the edited object. If there is no editor selection, the template falls back to the first canvas node.
+
+JSON and SVG are downloadable inline artifacts. PNG selection export is reserved for clean selection-bounds raster output; until the host supports that semantic, the UI reports it as unsupported instead of downloading a misleading whole-canvas screenshot. `ctx.export.screenshot` remains available as **Capture Screen Preview** and returns a screen-pixel binary resource that can be read with `ctx.binary.read`.
+
+## 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 Export Selection**, then click **Export JSON Snapshot**, **Export SVG Paths**, **Export PNG Selection**, or **Capture Screen Preview**. JSON shows `kind`, bounds, node count, and vector command count. SVG shows path and fallback counts. Screen Preview shows binary resource metadata after the worker reads bytes through `ctx.binary.read`. After each successful export, click **Download ...** to save the generated file through the editor shell.
+
+## 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/export-selection/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/export-selection/manifest.json.template

@@ -0,0 +1,31 @@
+{
+  "id": "__PLUGIN_ID__",
+  "name": {
+    "en": "Export Selection",
+    "zh-CN": "Export Selection"
+  },
+  "version": "0.1.0",
+  "apiVersion": "1.0",
+  "editorType": ["design"],
+  "main": "./dist/main.js",
+  "ui": "./ui.html",
+  "documentAccess": "current-page",
+  "permissions": [
+    "binary:read",
+    "document:read",
+    "export:screenshot",
+    "export:selection",
+    "notify",
+    "selection:read",
+    "ui:modal"
+  ],
+  "commands": [
+    {
+      "id": "run",
+      "name": {
+        "en": "__COMMAND_NAME_EN__",
+        "zh-CN": "__COMMAND_NAME_ZH__"
+      }
+    }
+  ]
+}

package/dist/templates/export-selection/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__
+}