@lovision/plugin-dev 1.0.0

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

@@ -0,0 +1,412 @@
+import { definePlugin } from "@lovision/plugin-sdk";
+
+type DataRow = Record<string, string>;
+
+type Vec2 = {
+  x: number;
+  y: number;
+};
+
+type Size = {
+  height: number;
+  width: number;
+};
+
+type SceneNodeSnapshot = {
+  children: SceneNodeSnapshot[];
+  id: string;
+  name: string;
+  opacity: number;
+  parentId: string | null;
+  position: Vec2;
+  size: Size;
+  text?: {
+    content: string;
+  };
+  type: string;
+};
+
+type SceneSnapshot = {
+  root: SceneNodeSnapshot;
+  version: number;
+};
+
+type NodeCreateSpec = {
+  extraFields?: Record<string, unknown>;
+  name?: string;
+  parentId?: string | null;
+  position?: Vec2;
+  size?: Size;
+  type: string;
+};
+
+type MutationResult = {
+  newVersion: number;
+};
+
+type NodesApi = {
+  create(
+    specs: NodeCreateSpec[],
+    opts?: { expectedVersion?: number },
+  ): Promise<MutationResult>;
+  setText(
+    updates: Array<{ id: string; text: string }>,
+    opts?: { expectedVersion?: number },
+  ): Promise<MutationResult>;
+  update(
+    updates: Array<{
+      changes: {
+        name?: string;
+        opacity?: number;
+      };
+      id: string;
+    }>,
+    opts?: { expectedVersion?: number },
+  ): Promise<MutationResult>;
+};
+
+type DataFillerContext = {
+  document: {
+    snapshot(): Promise<SceneSnapshot>;
+  };
+  nodes: NodesApi;
+  notify: {
+    send(
+      message: string,
+      options?: { kind?: "error" | "info" | "success" | "warning" },
+    ): Promise<void>;
+  };
+  selection: {
+    get(): Promise<string[]>;
+  };
+};
+
+type ApplyPayload = {
+  nameField: string;
+  opacityField: string;
+  text: string;
+  textField: 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",
+      width: 600,
+      height: 600,
+    });
+
+    let closed = false;
+    const userDecision = new Promise<UserDecision>((resolve) => {
+      session.on("close", () => {
+        closed = true;
+        resolve({ kind: "close" });
+      });
+      session.on("apply-mapping", (payload) => {
+        resolve({ kind: "apply", payload });
+      });
+    });
+
+    await session.postMessage({
+      type: "ready",
+      payload: {
+        message:
+          "Paste CSV or JSON, choose mapping fields, then apply to text nodes.",
+      },
+    });
+
+    const decision = await userDecision;
+    if (decision.kind === "close") {
+      await ctx.notify.send("Data Filler 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 targets = await resolveTargetTextNodes(ctx, rows.length);
+      const textUpdates = targets.nodes.map((node, index) => ({
+        id: node.id,
+        text: valueForField(
+          rows[index % rows.length],
+          payload.textField,
+          `Data Row ${index + 1}`,
+        ),
+      }));
+      const textResult = await ctx.nodes.setText(textUpdates, {
+        expectedVersion: targets.version,
+      });
+      const styleUpdates = targets.nodes.map((node, index) => {
+        const row = rows[index % rows.length];
+        return {
+          id: node.id,
+          changes: {
+            name: valueForField(row, payload.nameField, node.name),
+            opacity: opacityForField(row, payload.opacityField, node.opacity),
+          },
+        };
+      });
+      const styleResult = await ctx.nodes.update(styleUpdates, {
+        expectedVersion: textResult.newVersion,
+      });
+      if (!closed) {
+        await session.postMessage({
+          type: "applied",
+          payload: {
+            applied: textUpdates.length,
+            newVersion: styleResult.newVersion,
+          },
+        });
+      }
+      await ctx.notify.send(
+        `Data Filler applied ${textUpdates.length} text node(s).`,
+        { kind: "success" },
+      );
+      return {
+        applied: textUpdates.length,
+        newVersion: styleResult.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 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,
+    textField: readFieldName(payload.textField, "title"),
+    nameField: readFieldName(payload.nameField, "name"),
+    opacityField: readFieldName(payload.opacityField, "opacity"),
+  };
+}
+
+async function resolveTargetTextNodes(
+  ctx: DataFillerContext,
+  rowCount: number,
+): Promise<{ nodes: SceneNodeSnapshot[]; version: number }> {
+  const snapshot = await ctx.document.snapshot();
+  const selection = await ctx.selection.get();
+  const allNodes = collectNodes(snapshot.root).filter(
+    (node) => node.id !== snapshot.root.id,
+  );
+  const selectedTextNodes = selection
+    .map((nodeId) => allNodes.find((node) => node.id === nodeId))
+    .filter(isTextNode);
+  const existingTextNodes =
+    selectedTextNodes.length > 0 ? selectedTextNodes : allNodes.filter(isTextNode);
+  if (existingTextNodes.length > 0) {
+    return {
+      nodes: existingTextNodes.slice(0, Math.max(1, rowCount)),
+      version: snapshot.version,
+    };
+  }
+
+  await ctx.nodes.create([createFallbackTextNode()], {
+    expectedVersion: snapshot.version,
+  });
+  const afterCreate = await ctx.document.snapshot();
+  const fallback = collectNodes(afterCreate.root).find(
+    (node) => node.type === "text" && node.name === "Data Filler Target",
+  );
+  if (!fallback) {
+    throw new Error("Could not find the fallback text node after creation.");
+  }
+  return {
+    nodes: [fallback],
+    version: afterCreate.version,
+  };
+}
+
+function createFallbackTextNode(): NodeCreateSpec {
+  return {
+    type: "text",
+    name: "Data Filler Target",
+    parentId: null,
+    position: { x: 120, y: 360 },
+    size: { width: 280, height: 72 },
+    extraFields: {
+      data: {
+        config: {
+          text: "Data Filler Target",
+          layout: {
+            mode: "fixed",
+            textAlign: "left",
+            verticalAlign: "top",
+            paragraphSpacing: 0,
+            paragraphIndent: 0,
+          },
+          baseStyle: {
+            fontSize: 16,
+            fontWeight: 400,
+            fontFamily: "Inter",
+            italic: false,
+            underline: false,
+            strikethrough: false,
+            lineHeight: { type: "auto" },
+            letterSpacing: { type: "px", value: 0 },
+          },
+          styleOverrides: [],
+        },
+      },
+    },
+  };
+}
+
+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 valueForField(
+  row: DataRow | undefined,
+  fieldName: string,
+  fallback: string,
+): string {
+  const raw = row?.[fieldName];
+  const value = typeof raw === "string" ? raw.trim() : "";
+  return value.length > 0 ? value : fallback;
+}
+
+function opacityForField(
+  row: DataRow | undefined,
+  fieldName: string,
+  fallback: number,
+): number {
+  const raw = row?.[fieldName];
+  const parsed = raw === undefined ? Number.NaN : Number.parseFloat(raw);
+  if (!Number.isFinite(parsed)) {
+    return fallback;
+  }
+  return Math.min(1, Math.max(0, parsed));
+}
+
+function readFieldName(value: unknown, fallback: string): string {
+  return typeof value === "string" && value.trim().length > 0
+    ? value.trim()
+    : fallback;
+}
+
+function collectNodes(
+  node: SceneNodeSnapshot,
+  out: SceneNodeSnapshot[] = [],
+): SceneNodeSnapshot[] {
+  out.push(node);
+  for (const child of node.children) {
+    collectNodes(child, out);
+  }
+  return out;
+}
+
+function isTextNode(
+  node: SceneNodeSnapshot | undefined,
+): node is SceneNodeSnapshot {
+  return node !== undefined && node.type === "text";
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}

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

@@ -0,0 +1,221 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Data Filler</title>
+    <style>
+      :root {
+        color-scheme: light dark;
+      }
+
+      body {
+        margin: 0;
+        color: CanvasText;
+        background: Canvas;
+      }
+
+      main {
+        display: grid;
+        gap: 1rem;
+        padding: 1rem;
+      }
+
+      textarea,
+      input {
+        box-sizing: border-box;
+        width: 100%;
+        color: FieldText;
+        background: Field;
+      }
+
+      textarea {
+        min-height: 11rem;
+        resize: vertical;
+      }
+
+      .mapping {
+        display: grid;
+        gap: 0.75rem;
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+      }
+
+      .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;
+      }
+
+      @media (max-width: 520px) {
+        .mapping {
+          grid-template-columns: 1fr;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <main>
+      <header>
+        <h1>Data Filler</h1>
+        <p>
+          Paste CSV or JSON, map fields, then apply through the plugin main
+          worker to text content and node properties.
+        </p>
+      </header>
+
+      <label>
+        Data
+        <textarea id="data-input" spellcheck="false">title,name,opacity
+Hero Headline,Hero Text Node,0.72</textarea>
+      </label>
+
+      <section class="mapping" aria-label="Field mapping">
+        <label>
+          Text field
+          <input id="text-field" value="title" />
+        </label>
+        <label>
+          Name field
+          <input id="name-field" value="name" />
+        </label>
+        <label>
+          Opacity field
+          <input id="opacity-field" value="opacity" />
+        </label>
+      </section>
+
+      <div class="actions">
+        <button id="preview-button" type="button">Preview mapping</button>
+        <button id="apply-button" type="button">Apply mapping</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 dataInput = document.getElementById("data-input");
+      const textField = document.getElementById("text-field");
+      const nameField = document.getElementById("name-field");
+      const opacityField = document.getElementById("opacity-field");
+      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;
+      }
+
+      function previewRows() {
+        const rows = parseRows(dataInput.value);
+        const mapped = rows.map((row) => ({
+          text: row[textField.value] || "",
+          name: row[nameField.value] || "",
+          opacity: row[opacityField.value] || "",
+        }));
+        preview.textContent = JSON.stringify(mapped, null, 2);
+        status.textContent = `Previewed ${mapped.length} row(s).`;
+      }
+
+      document.getElementById("preview-button").addEventListener("click", () => {
+        try {
+          previewRows();
+        } catch (error) {
+          status.textContent = error instanceof Error ? error.message : String(error);
+        }
+      });
+
+      document.getElementById("apply-button").addEventListener("click", () => {
+        status.textContent = "Applying...";
+        post("apply-mapping", {
+          text: dataInput.value,
+          textField: textField.value,
+          nameField: nameField.value,
+          opacityField: opacityField.value,
+        });
+      });
+
+      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} text node(s).`;
+        } else if (message.type === "error") {
+          status.textContent = message.payload.message;
+        }
+      });
+    </script>
+  </body>
+</html>

package/dist/templates/data-filler-lite/README.md.template

@@ -0,0 +1,47 @@
+# Data Filler Lite
+
+Data Filler Lite is a modal-first Instinct UI plugin example generated by `plugin-dev create --template data-filler-lite`.
+
+It uses a single `ui.html` resource with an inline browser bridge. The iframe UI never calls the Host Facade directly; it only posts typed messages to the main worker, and the main worker decides when to call `selection`, `document`, `nodes`, and `notify`.
+
+## 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 Data Filler Lite`.
+6. Prefer selecting canvas nodes before Apply. If nothing is selected, the Lite demo falls back to the first top-level node so the example remains easy to verify.
+7. Paste CSV or JSON and click Apply.
+
+## Input Examples
+
+CSV:
+
+```csv
+name,role
+Hero Card,Landing
+CTA Button,Marketing
+```
+
+JSON:
+
+```json
+[
+  { "name": "Hero Card", "role": "Landing" },
+  { "name": "CTA Button", "role": "Marketing" }
+]
+```
+
+The Lite version maps each row to a node name. A fuller Data Filler can move this mapping to text node contents once a text Host Facade is available.
+
+## 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 modal UI should open from MainMenu.

package/dist/templates/data-filler-lite/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,
+  })),
+];