@lovision/plugin-dev 1.0.0

package/dist/templates/data-filler-lite/manifest.json.template

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

package/dist/templates/data-filler-lite/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__
+}

package/dist/templates/data-filler-lite/src/main.ts.template

@@ -0,0 +1,222 @@
+import { definePlugin } from "@lovision/plugin-sdk";
+
+type DataRow = Record<string, string>;
+
+type ApplyPayload = {
+  text: string;
+};
+
+type UserDecision =
+  | {
+      kind: "apply";
+      payload: unknown;
+    }
+  | {
+      kind: "close";
+    };
+
+definePlugin({
+  apiVersion: "1.0",
+  version: "0.1.0",
+  command: async (ctx) => {
+    const session = await ctx.ui.show({
+      entry: "./ui.html",
+      title: "Data Filler Lite",
+      width: 560,
+      height: 520,
+    });
+
+    let closed = false;
+    const userDecision = new Promise<UserDecision>((resolve) => {
+      session.on("close", () => {
+        closed = true;
+        resolve({ kind: "close" });
+      });
+      session.on("apply", (payload) => {
+        resolve({ kind: "apply", payload });
+      });
+    });
+
+    await session.postMessage({
+      type: "ready",
+      payload: {
+        message:
+          "Paste CSV or JSON. Selection is used first; empty selection falls back to the first top-level node.",
+      },
+    });
+
+    const decision = await userDecision;
+    if (decision.kind === "close") {
+      await ctx.notify.send("Data Filler Lite closed without applying data.", {
+        kind: "info",
+      });
+      return { applied: 0, closed: true, ok: true };
+    }
+
+    try {
+      const payload = readApplyPayload(decision.payload);
+      const rows = parseRows(payload.text);
+      const targetIds = await resolveTargetNodeIds(ctx);
+      if (targetIds.length === 0) {
+        throw new Error("No selected or top-level canvas node is available.");
+      }
+
+      const updates = targetIds.map((id, index) => ({
+        id,
+        changes: {
+          name: nameForRow(rows[index % rows.length], index),
+        },
+      }));
+      const result = await ctx.nodes.update(updates);
+      if (!closed) {
+        await session.postMessage({
+          type: "applied",
+          payload: {
+            applied: updates.length,
+            newVersion: result.newVersion,
+          },
+        });
+      }
+      await ctx.notify.send(`Data Filler Lite applied ${updates.length} row(s).`, {
+        kind: "success",
+      });
+      return {
+        applied: updates.length,
+        newVersion: result.newVersion,
+        ok: true,
+      };
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      if (!closed) {
+        await session.postMessage({
+          type: "error",
+          payload: { message },
+        });
+      }
+      await ctx.notify.send(`Data Filler Lite failed: ${message}`, {
+        kind: "error",
+      });
+      return { error: message, ok: false };
+    }
+  },
+});
+
+function readApplyPayload(payload: unknown): ApplyPayload {
+  if (!isRecord(payload) || typeof payload.text !== "string") {
+    throw new Error("Apply payload must include a text field.");
+  }
+  return { text: payload.text };
+}
+
+async function resolveTargetNodeIds(ctx: {
+  document: { snapshot(): Promise<{ root: { children: Array<{ id: string }> } }> };
+  selection: { get(): Promise<string[]> };
+}): Promise<string[]> {
+  const selection = await ctx.selection.get();
+  if (selection.length > 0) {
+    return selection;
+  }
+
+  const snapshot = await ctx.document.snapshot();
+  const firstTopLevel = snapshot.root.children[0];
+  return firstTopLevel ? [firstTopLevel.id] : [];
+}
+
+function parseRows(input: string): DataRow[] {
+  const text = input.trim();
+  if (text.length === 0) {
+    throw new Error("Paste CSV or JSON before applying.");
+  }
+
+  if (text.startsWith("{") || text.startsWith("[")) {
+    return parseJsonRows(text);
+  }
+
+  return parseCsvRows(text);
+}
+
+function parseJsonRows(text: string): DataRow[] {
+  const parsed = JSON.parse(text) as unknown;
+  const values = Array.isArray(parsed) ? parsed : [parsed];
+  const rows = values.map((value) => coerceRow(value));
+  if (rows.length === 0) {
+    throw new Error("JSON input must contain at least one row.");
+  }
+  return rows;
+}
+
+function parseCsvRows(text: string): DataRow[] {
+  const lines = text
+    .split(/\r?\n/)
+    .map((line) => line.trim())
+    .filter((line) => line.length > 0);
+  if (lines.length < 2) {
+    throw new Error("CSV input needs a header row and at least one data row.");
+  }
+
+  const headers = parseCsvLine(lines[0]).map((header) => header.trim());
+  if (headers.length === 0 || headers.some((header) => header.length === 0)) {
+    throw new Error("CSV headers must not be empty.");
+  }
+
+  return lines.slice(1).map((line) => {
+    const values = parseCsvLine(line);
+    const row: DataRow = {};
+    headers.forEach((header, index) => {
+      row[header] = values[index] ?? "";
+    });
+    return row;
+  });
+}
+
+function parseCsvLine(line: string): string[] {
+  const values: string[] = [];
+  let current = "";
+  let quoted = false;
+
+  for (const char of line) {
+    if (char === '"') {
+      quoted = !quoted;
+      continue;
+    }
+    if (char === "," && !quoted) {
+      values.push(current.trim());
+      current = "";
+      continue;
+    }
+    current += char;
+  }
+
+  values.push(current.trim());
+  return values;
+}
+
+function coerceRow(value: unknown): DataRow {
+  if (!isRecord(value)) {
+    throw new Error("Each JSON row must be an object.");
+  }
+  const row: DataRow = {};
+  for (const [key, cell] of Object.entries(value)) {
+    row[key] = cell == null ? "" : String(cell);
+  }
+  return row;
+}
+
+function nameForRow(row: DataRow | undefined, index: number): string {
+  if (!row) {
+    return `Data Row ${index + 1}`;
+  }
+  const preferred = row.name ?? row.title ?? row.label;
+  if (preferred && preferred.trim().length > 0) {
+    return preferred.trim();
+  }
+  const summary = Object.values(row)
+    .map((value) => value.trim())
+    .filter((value) => value.length > 0)
+    .join(" / ");
+  return summary.length > 0 ? summary : `Data Row ${index + 1}`;
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}

package/dist/templates/data-filler-lite/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/data-filler-lite/ui.html.template

@@ -0,0 +1,180 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Data Filler Lite</title>
+    <style>
+      :root {
+        color-scheme: light dark;
+      }
+
+      body {
+        margin: 0;
+        color: CanvasText;
+        background: Canvas;
+      }
+
+      main {
+        display: grid;
+        gap: 1rem;
+        padding: 1rem;
+      }
+
+      textarea {
+        box-sizing: border-box;
+        min-height: 12rem;
+        width: 100%;
+        resize: vertical;
+        color: FieldText;
+        background: Field;
+      }
+
+      .actions {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+      }
+
+      .status {
+        min-height: 1.5rem;
+      }
+
+      pre {
+        max-height: 8rem;
+        overflow: auto;
+        padding: 0.75rem;
+        color: CanvasText;
+        background: Canvas;
+        border: 1px solid ButtonBorder;
+      }
+    </style>
+  </head>
+  <body>
+    <main>
+      <header>
+        <h1>Data Filler Lite</h1>
+        <p>
+          Paste CSV or JSON, preview the parsed rows, then apply. Selection is
+          used first; empty selection falls back to the first top-level node for
+          demo verification.
+        </p>
+      </header>
+
+      <label>
+        Data
+        <textarea id="data-input" spellcheck="false">name,role
+Hero Card,Landing
+CTA Button,Marketing</textarea>
+      </label>
+
+      <div class="actions">
+        <button id="preview-button" type="button">Preview</button>
+        <button id="apply-button" type="button">Apply to nodes</button>
+        <button id="reject-button" type="button">Trigger unhandled rejection</button>
+      </div>
+
+      <p id="status" class="status" role="status">Waiting for host...</p>
+      <pre id="preview" aria-label="Preview"></pre>
+    </main>
+
+    <script>
+      const uiId = globalThis.__LOVISION_PLUGIN_UI_ID__;
+      const input = document.getElementById("data-input");
+      const status = document.getElementById("status");
+      const preview = document.getElementById("preview");
+
+      function post(type, payload) {
+        parent.postMessage(
+          {
+            type: "plugin-ui-message",
+            direction: "ui-to-main",
+            uiId,
+            message: { type, payload },
+          },
+          "*",
+        );
+      }
+
+      function parseRows(text) {
+        const trimmed = text.trim();
+        if (!trimmed) {
+          throw new Error("Paste CSV or JSON before applying.");
+        }
+        if (trimmed.startsWith("{") || trimmed.startsWith("[")) {
+          const parsed = JSON.parse(trimmed);
+          return Array.isArray(parsed) ? parsed : [parsed];
+        }
+        const lines = trimmed
+          .split(/\r?\n/)
+          .map((line) => line.trim())
+          .filter(Boolean);
+        const headers = splitCsvLine(lines[0] || "");
+        return lines.slice(1).map((line) => {
+          const values = splitCsvLine(line);
+          return Object.fromEntries(
+            headers.map((header, index) => [header, values[index] || ""]),
+          );
+        });
+      }
+
+      function splitCsvLine(line) {
+        const values = [];
+        let current = "";
+        let quoted = false;
+        for (const char of line) {
+          if (char === '"') {
+            quoted = !quoted;
+          } else if (char === "," && !quoted) {
+            values.push(current.trim());
+            current = "";
+          } else {
+            current += char;
+          }
+        }
+        values.push(current.trim());
+        return values;
+      }
+
+      document.getElementById("preview-button").addEventListener("click", () => {
+        try {
+          const rows = parseRows(input.value);
+          preview.textContent = JSON.stringify(rows, null, 2);
+          status.textContent = `Previewed ${rows.length} row(s).`;
+        } catch (error) {
+          status.textContent = error instanceof Error ? error.message : String(error);
+        }
+      });
+
+      document.getElementById("apply-button").addEventListener("click", () => {
+        status.textContent = "Applying...";
+        post("apply", { text: input.value });
+      });
+
+      document.getElementById("reject-button").addEventListener("click", () => {
+        Promise.reject(new Error("Data Filler Lite unhandled rejection demo"));
+      });
+
+      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 === "applied") {
+          status.textContent = `Applied ${message.payload.applied} node(s).`;
+        } else if (message.type === "error") {
+          status.textContent = message.payload.message;
+        }
+      });
+    </script>
+  </body>
+</html>

package/dist/templates/design-lint-panel/README.md.template

@@ -0,0 +1,33 @@
+# Design Lint Panel
+
+Design Lint Panel is a panel-first Instinct UI plugin example generated by `plugin-dev create --template design-lint-panel`.
+
+It uses a single `ui.html` resource with an inline browser bridge. The iframe UI never calls the Host Facade directly; it only posts `plugin-ui-message` envelopes to the main worker. The main worker owns all `document`, `viewport`, `nodes`, and `notify` calls.
+
+## Scripts
+
+- `dev` - start the local HTTPS sideload server and print `manifestUrl`
+- `build` - emit a formal-install bundle under `dist/`
+- `validate` - run the same manifest + bundle validation path used by the host
+- `lint` - run the default plugin ESLint setup
+
+## First Run
+
+1. Install dependencies with your preferred package manager.
+2. Run `dev`.
+3. Open the editor shell Plugin Development panel.
+4. Add by URL with the printed `manifestUrl`.
+5. Run `Open Design Lint Panel`.
+6. Click `Run lint` to scan the current page.
+7. Click `Focus first issue` to focus the first finding.
+8. Click `Fix default names` to prefix default or blank node names with `Lint/`.
+
+## Rules
+
+- `unnamed-node` - non-root node name is blank or one of `Rectangle`, `Frame`, or `Text`
+- `empty-text-node` - text node content is empty
+- `non-positive-size` - non-root node width or height is not positive
+
+## Formal Install
+
+Run `build`, then upload the generated `dist/*.bundle.json` as a Formal install. The installed plugin should appear in Installed and MainMenu, and the same panel UI should open from MainMenu.

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

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

package/dist/templates/design-lint-panel/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__
+}