webflow-clipboard 1.0.0

package/README.md

@@ -0,0 +1,149 @@
+# webflow-clipboard
+
+Copy to Webflow / Paste from Webflow as a reusable npm library. Put Xscp JSON on the clipboard in the format Webflow Designer expects (so users can **Cmd+V** in Designer), or extract Xscp from a paste event.
+
+Use the **core API** in any JS/TS app, or the **React** components for a ready **"Copy to Webflow"** button.
+
+## Install
+
+```bash
+npm install webflow-clipboard
+# or
+bun add webflow-clipboard
+# or
+pnpm add webflow-clipboard
+```
+
+## Quick start — React "Copy to Webflow" button
+
+```tsx
+import { CopyToWebflowButton } from "webflow-clipboard/react";
+
+// Your Xscp JSON (e.g. from your CMS, Git, or "Paste from Webflow")
+const xscpJson = '{"type":"@webflow/XscpData","payload":{...}}';
+
+export function MyComponent() {
+  return (
+    <CopyToWebflowButton
+      xscpJson={xscpJson}
+      className="rounded-full bg-black text-white px-4 py-2"
+      showMessage
+    />
+  );
+}
+```
+
+On click, the button copies the JSON to the clipboard so the user can open Webflow Designer and press **Cmd+V** (Mac) or **Ctrl+V** (Windows).
+
+## Core API (no React)
+
+Use in any environment (Node scripts, vanilla JS, other frameworks):
+
+```ts
+import {
+  writeClipboardXscp,
+  normalizeXscp,
+  validateCopyPayload,
+  getXscpFromPasteEvent,
+} from "webflow-clipboard";
+
+// Copy Xscp to clipboard (must run in a user gesture / browser context)
+writeClipboardXscp(xscpJsonString);
+
+// Normalize / validate before copy
+const result = validateCopyPayload(rawString);
+if (result.valid) {
+  writeClipboardXscp(rawString);
+}
+
+// In a paste handler (e.g. onPaste on a contenteditable or textarea)
+element.addEventListener("paste", (e) => {
+  const json = getXscpFromPasteEvent(e);
+  if (json) {
+    e.preventDefault();
+    console.log("Pasted Webflow JSON", json);
+  }
+});
+```
+
+## React hooks
+
+### useCopyToWebflow
+
+Build your own button or trigger copy from code:
+
+```tsx
+import { useCopyToWebflow } from "webflow-clipboard/react";
+
+function MyButton() {
+  const { copyToWebflow, status, error, successMessage } = useCopyToWebflow({
+    successMessage: "Copied! Paste in Webflow Designer with Cmd+V.",
+  });
+
+  return (
+    <div>
+      <button onClick={() => copyToWebflow(xscpJson)}>Copy to Webflow</button>
+      {error && <p role="alert">{error}</p>}
+      {successMessage && <p>{successMessage}</p>}
+    </div>
+  );
+}
+```
+
+### usePasteFromWebflow
+
+Implement a "Paste from Webflow" area (user copies in Designer, pastes in your app):
+
+```tsx
+import { usePasteFromWebflow } from "webflow-clipboard/react";
+
+function PasteArea() {
+  const { json, onPaste, error, copyJson, copied } = usePasteFromWebflow();
+
+  return (
+    <div>
+      <textarea
+        onPaste={onPaste}
+        value={json}
+        placeholder="Click here, then Cmd+V (after copying in Webflow Designer)"
+        readOnly
+      />
+      {error && <p role="alert">{error}</p>}
+      {json && (
+        <button onClick={copyJson}>{copied ? "Copied" : "Copy JSON"}</button>
+      )}
+    </div>
+  );
+}
+```
+
+## API reference
+
+### Core (`webflow-clipboard`)
+
+| Export | Description |
+|--------|-------------|
+| `writeClipboardXscp(xscp)` | Copies normalized Xscp to clipboard (both `application/json` and `text/plain`) so Webflow Designer accepts Cmd+V. |
+| `normalizeXscp(raw)` | Normalizes raw Xscp string; throws if invalid. |
+| `normalizeCopyPayload(payload)` | Extracts first JSON object from a string (for payloads with junk). |
+| `validateCopyPayload(payload)` | Returns `{ valid, length }` or `{ valid: false, error, length, tailPreview? }`. |
+| `isXscpPayload(payload)` | Returns true if payload looks like Webflow Xscp. |
+| `getXscpFromPasteEvent(e)` | From a `ClipboardEvent`, returns Xscp string or `null`. |
+
+### React (`webflow-clipboard/react`)
+
+| Export | Description |
+|--------|-------------|
+| `CopyToWebflowButton` | Button that takes `xscpJson` and copies on click. |
+| `useCopyToWebflow(options?)` | Hook: `copyToWebflow(xscp)`, `status`, `error`, `successMessage`, `reset`. |
+| `usePasteFromWebflow()` | Hook: `json`, `onPaste`, `error`, `copyJson`, `copied`, `reset`. |
+
+## Why this exists
+
+Webflow Designer only accepts paste when the clipboard has `application/json`. Browsers don’t allow setting that via `navigator.clipboard.write()`; this library uses a programmatic **copy** event to set both `application/json` and `text/plain`, so Designer accepts **Cmd+V**.
+
+For **paste from Webflow**, Xscp is only exposed on the **paste** event (not on normal clipboard read), so you need a paste handler; `getXscpFromPasteEvent` / `usePasteFromWebflow` do that.
+
+## License
+
+MIT

package/dist/copy-payload.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Ensures Webflow XSCP JSON payload starts with "{" with no leading characters,
+ * and has no trailing non-whitespace (only the first complete JSON object).
+ * Webflow Designer paste handler requires the clipboard to start exactly with "{".
+ */
+export declare function normalizeCopyPayload(payload: string): string;
+export type ValidatePayloadResult = {
+    valid: true;
+    length: number;
+} | {
+    valid: false;
+    error: string;
+    length: number;
+    tailPreview?: string;
+};
+/**
+ * Normalizes raw XSCP string: strips BOM, trims, removes junk before
+ * {"type":"@webflow/XscpData"}, removes any trailing non-whitespace after the
+ * root object, validates with JSON.parse. Throws if invalid.
+ * Use for Webflow paste (ClipboardItem application/json).
+ */
+export declare function normalizeXscp(raw: string): string;
+/**
+ * Copies XSCP to clipboard via the copy event so we can set both
+ * application/json and text/plain (Clipboard API write() rejects application/json).
+ * Triggers a programmatic copy and intercepts the copy event to set clipboardData.
+ */
+export declare function writeClipboardXscp(xscp: string): void;
+/**
+ * Returns true if the payload looks like Webflow XSCP JSON (use ClipboardItem path).
+ */
+export declare function isXscpPayload(payload: string): boolean;
+/**
+ * Extracts Webflow Xscp JSON from a paste (clipboard) event.
+ * Use in an onPaste handler: if this returns a string, preventDefault and use it.
+ * Returns null if the clipboard doesn't contain Webflow JSON.
+ */
+export declare function getXscpFromPasteEvent(e: ClipboardEvent): string | null;
+/**
+ * Validates that the payload is parseable JSON. Webflow shows "clipboard is empty"
+ * when the payload is invalid or truncated. Use this to warn the user before paste.
+ */
+export declare function validateCopyPayload(payload: string): ValidatePayloadResult;
+//# sourceMappingURL=copy-payload.d.ts.map

package/dist/copy-payload.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"copy-payload.d.ts","sourceRoot":"","sources":["../src/copy-payload.ts"],"names":[],"mappings":"AAkCA;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAK5D;AAED,MAAM,MAAM,qBAAqB,GAC7B;IAAE,KAAK,EAAE,IAAI,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,GAC/B;IAAE,KAAK,EAAE,KAAK,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAI1E;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAOjD;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAyBrD;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO,CAEtD;AAID;;;;GAIG;AACH,wBAAgB,qBAAqB,CAAC,CAAC,EAAE,cAAc,GAAG,MAAM,GAAG,IAAI,CAUtE;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,MAAM,GAAG,qBAAqB,CA8B1E"}

package/dist/copy-payload.js

@@ -0,0 +1,163 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.normalizeCopyPayload = normalizeCopyPayload;
+exports.normalizeXscp = normalizeXscp;
+exports.writeClipboardXscp = writeClipboardXscp;
+exports.isXscpPayload = isXscpPayload;
+exports.getXscpFromPasteEvent = getXscpFromPasteEvent;
+exports.validateCopyPayload = validateCopyPayload;
+/**
+ * Extracts the first complete JSON object from a string (from first "{" to
+ * its matching "}"). Used when payload has trailing junk that causes JSON.parse to fail.
+ */
+function extractFirstJsonObject(s) {
+    const start = s.indexOf("{");
+    if (start === -1)
+        return s;
+    let depth = 0;
+    let inString = false;
+    let escape = false;
+    for (let i = start; i < s.length; i++) {
+        const c = s[i];
+        if (escape) {
+            escape = false;
+            continue;
+        }
+        if (inString) {
+            if (c === "\\")
+                escape = true;
+            else if (c === '"')
+                inString = false;
+            continue;
+        }
+        if (c === '"') {
+            inString = true;
+            continue;
+        }
+        if (c === "{")
+            depth++;
+        else if (c === "}") {
+            depth--;
+            if (depth === 0)
+                return s.slice(start, i + 1);
+        }
+    }
+    return s.slice(start);
+}
+/**
+ * Ensures Webflow XSCP JSON payload starts with "{" with no leading characters,
+ * and has no trailing non-whitespace (only the first complete JSON object).
+ * Webflow Designer paste handler requires the clipboard to start exactly with "{".
+ */
+function normalizeCopyPayload(payload) {
+    const trimmed = payload.trim();
+    const firstBrace = trimmed.indexOf("{");
+    if (firstBrace === -1)
+        return trimmed;
+    return extractFirstJsonObject(trimmed.slice(firstBrace));
+}
+const XSCP_PREFIX = '{"type":"@webflow/XscpData"';
+/**
+ * Normalizes raw XSCP string: strips BOM, trims, removes junk before
+ * {"type":"@webflow/XscpData"}, removes any trailing non-whitespace after the
+ * root object, validates with JSON.parse. Throws if invalid.
+ * Use for Webflow paste (ClipboardItem application/json).
+ */
+function normalizeXscp(raw) {
+    let s = raw.replace(/^\uFEFF/, "").trimStart();
+    const idx = s.indexOf(XSCP_PREFIX);
+    if (idx > 0)
+        s = s.slice(idx);
+    s = extractFirstJsonObject(s);
+    JSON.parse(s); // validate – throws if invalid
+    return s;
+}
+/**
+ * Copies XSCP to clipboard via the copy event so we can set both
+ * application/json and text/plain (Clipboard API write() rejects application/json).
+ * Triggers a programmatic copy and intercepts the copy event to set clipboardData.
+ */
+function writeClipboardXscp(xscp) {
+    const json = normalizeXscp(xscp);
+    const onCopy = (e) => {
+        e.preventDefault();
+        e.clipboardData?.setData("application/json", json);
+        e.clipboardData?.setData("text/plain", json);
+    };
+    document.addEventListener("copy", onCopy, true);
+    try {
+        const textarea = document.createElement("textarea");
+        textarea.value = json;
+        textarea.style.position = "fixed";
+        textarea.style.left = "-9999px";
+        textarea.style.top = "0";
+        document.body.appendChild(textarea);
+        textarea.focus();
+        textarea.select();
+        document.execCommand("copy");
+        document.body.removeChild(textarea);
+    }
+    finally {
+        document.removeEventListener("copy", onCopy, true);
+    }
+}
+/**
+ * Returns true if the payload looks like Webflow XSCP JSON (use ClipboardItem path).
+ */
+function isXscpPayload(payload) {
+    return payload.includes(XSCP_PREFIX);
+}
+const XSCP_MARKER = "@webflow/XscpData";
+/**
+ * Extracts Webflow Xscp JSON from a paste (clipboard) event.
+ * Use in an onPaste handler: if this returns a string, preventDefault and use it.
+ * Returns null if the clipboard doesn't contain Webflow JSON.
+ */
+function getXscpFromPasteEvent(e) {
+    const dt = e.clipboardData;
+    if (!dt)
+        return null;
+    const json = dt.getData("application/json");
+    const text = dt.getData("text/plain");
+    if (json && json.includes(XSCP_MARKER))
+        return json;
+    if (text && text.includes(XSCP_MARKER))
+        return text;
+    if (json && json.trim().startsWith("{"))
+        return json;
+    if (text && text.trim().startsWith("{"))
+        return text;
+    return null;
+}
+/**
+ * Validates that the payload is parseable JSON. Webflow shows "clipboard is empty"
+ * when the payload is invalid or truncated. Use this to warn the user before paste.
+ */
+function validateCopyPayload(payload) {
+    const normalized = normalizeCopyPayload(payload);
+    const length = normalized.length;
+    if (!normalized) {
+        return { valid: false, error: "Payload is empty.", length: 0 };
+    }
+    if (normalized[0] !== "{") {
+        return {
+            valid: false,
+            error: "Payload does not start with {. Webflow requires valid XSCP JSON.",
+            length,
+        };
+    }
+    try {
+        JSON.parse(normalized);
+        return { valid: true, length };
+    }
+    catch (e) {
+        const message = e instanceof Error ? e.message : String(e);
+        const tailPreview = length > 80 ? `…${normalized.slice(-80)}` : normalized;
+        return {
+            valid: false,
+            error: message,
+            length,
+            tailPreview,
+        };
+    }
+}

package/dist/copy-to-webflow-button.d.ts

@@ -0,0 +1,26 @@
+import type { ButtonHTMLAttributes } from "react";
+export interface CopyToWebflowButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onClick"> {
+    /** Xscp JSON string to copy when the button is clicked. */
+    xscpJson: string;
+    /** Optional success message (default: instruction to paste in Designer). */
+    successMessage?: string;
+    /** Label when idle. Default: "Copy to Webflow" */
+    label?: string;
+    /** Label when copied successfully. Default: "Copied" */
+    copiedLabel?: string;
+    /** Label when error. Default: "Copy failed" */
+    errorLabel?: string;
+    /** Optional class name for the button (e.g. Tailwind). */
+    className?: string;
+    /** Optional class for the status/error message container. */
+    messageClassName?: string;
+    /** Whether to show status/error message below the button. Default: true */
+    showMessage?: boolean;
+}
+/**
+ * Ready-to-use "Copy to Webflow" button. Pass your Xscp JSON; on click it copies
+ * to the clipboard in the format Webflow Designer expects (Cmd+V in Designer).
+ * Style with className or wrap in your own UI.
+ */
+export declare function CopyToWebflowButton({ xscpJson, successMessage, label, copiedLabel, errorLabel, className, messageClassName, showMessage, children, ...buttonProps }: CopyToWebflowButtonProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=copy-to-webflow-button.d.ts.map

package/dist/copy-to-webflow-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"copy-to-webflow-button.d.ts","sourceRoot":"","sources":["../src/copy-to-webflow-button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAGlD,MAAM,WAAW,wBACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAChE,2DAA2D;IAC3D,QAAQ,EAAE,MAAM,CAAC;IACjB,4EAA4E;IAC5E,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wDAAwD;IACxD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+CAA+C;IAC/C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6DAA6D;IAC7D,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,2EAA2E;IAC3E,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAMD;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,cAAc,EACd,KAAoB,EACpB,WAAgC,EAChC,UAA8B,EAC9B,SAAS,EACT,gBAAgB,EAChB,WAAkB,EAClB,QAAQ,EACR,GAAG,WAAW,EACf,EAAE,wBAAwB,2CAqC1B"}

package/dist/copy-to-webflow-button.js

@@ -0,0 +1,23 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CopyToWebflowButton = CopyToWebflowButton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const use_copy_to_webflow_1 = require("./use-copy-to-webflow");
+const defaultLabel = "Copy to Webflow";
+const defaultCopiedLabel = "Copied";
+const defaultErrorLabel = "Copy failed";
+/**
+ * Ready-to-use "Copy to Webflow" button. Pass your Xscp JSON; on click it copies
+ * to the clipboard in the format Webflow Designer expects (Cmd+V in Designer).
+ * Style with className or wrap in your own UI.
+ */
+function CopyToWebflowButton({ xscpJson, successMessage, label = defaultLabel, copiedLabel = defaultCopiedLabel, errorLabel = defaultErrorLabel, className, messageClassName, showMessage = true, children, ...buttonProps }) {
+    const { copyToWebflow, status, error, successMessage: msg, } = (0, use_copy_to_webflow_1.useCopyToWebflow)({ successMessage });
+    const displayText = status === "ok"
+        ? copiedLabel
+        : status === "err"
+            ? errorLabel
+            : label;
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => copyToWebflow(xscpJson), disabled: !xscpJson?.trim(), className: className, ...buttonProps, children: children ?? displayText }), showMessage && (error || msg) && ((0, jsx_runtime_1.jsx)("div", { className: messageClassName, role: error ? "alert" : "status", "aria-live": "polite", children: error ?? msg }))] }));
+}

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * webflow-clipboard — Copy to Webflow / Paste from Webflow as reusable primitives.
+ * Use the core API in any JS/TS app, or the React components for a ready "Copy to Webflow" button.
+ */
+export { normalizeCopyPayload, normalizeXscp, writeClipboardXscp, isXscpPayload, validateCopyPayload, getXscpFromPasteEvent, type ValidatePayloadResult, } from "./copy-payload";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EACL,oBAAoB,EACpB,aAAa,EACb,kBAAkB,EAClB,aAAa,EACb,mBAAmB,EACnB,qBAAqB,EACrB,KAAK,qBAAqB,GAC3B,MAAM,gBAAgB,CAAC"}

package/dist/index.js

@@ -0,0 +1,14 @@
+"use strict";
+/**
+ * webflow-clipboard — Copy to Webflow / Paste from Webflow as reusable primitives.
+ * Use the core API in any JS/TS app, or the React components for a ready "Copy to Webflow" button.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getXscpFromPasteEvent = exports.validateCopyPayload = exports.isXscpPayload = exports.writeClipboardXscp = exports.normalizeXscp = exports.normalizeCopyPayload = void 0;
+var copy_payload_1 = require("./copy-payload");
+Object.defineProperty(exports, "normalizeCopyPayload", { enumerable: true, get: function () { return copy_payload_1.normalizeCopyPayload; } });
+Object.defineProperty(exports, "normalizeXscp", { enumerable: true, get: function () { return copy_payload_1.normalizeXscp; } });
+Object.defineProperty(exports, "writeClipboardXscp", { enumerable: true, get: function () { return copy_payload_1.writeClipboardXscp; } });
+Object.defineProperty(exports, "isXscpPayload", { enumerable: true, get: function () { return copy_payload_1.isXscpPayload; } });
+Object.defineProperty(exports, "validateCopyPayload", { enumerable: true, get: function () { return copy_payload_1.validateCopyPayload; } });
+Object.defineProperty(exports, "getXscpFromPasteEvent", { enumerable: true, get: function () { return copy_payload_1.getXscpFromPasteEvent; } });

package/dist/react.d.ts

@@ -0,0 +1,7 @@
+export { CopyToWebflowButton } from "./copy-to-webflow-button";
+export type { CopyToWebflowButtonProps } from "./copy-to-webflow-button";
+export { useCopyToWebflow } from "./use-copy-to-webflow";
+export type { CopyToWebflowStatus, UseCopyToWebflowOptions, UseCopyToWebflowReturn, } from "./use-copy-to-webflow";
+export { usePasteFromWebflow } from "./use-paste-from-webflow";
+export type { UsePasteFromWebflowReturn } from "./use-paste-from-webflow";
+//# sourceMappingURL=react.d.ts.map

package/dist/react.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../src/react.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,YAAY,EAAE,wBAAwB,EAAE,MAAM,0BAA0B,CAAC;AACzE,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,YAAY,EACV,mBAAmB,EACnB,uBAAuB,EACvB,sBAAsB,GACvB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,YAAY,EAAE,yBAAyB,EAAE,MAAM,0BAA0B,CAAC"}

package/dist/react.js

@@ -0,0 +1,10 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePasteFromWebflow = exports.useCopyToWebflow = exports.CopyToWebflowButton = void 0;
+var copy_to_webflow_button_1 = require("./copy-to-webflow-button");
+Object.defineProperty(exports, "CopyToWebflowButton", { enumerable: true, get: function () { return copy_to_webflow_button_1.CopyToWebflowButton; } });
+var use_copy_to_webflow_1 = require("./use-copy-to-webflow");
+Object.defineProperty(exports, "useCopyToWebflow", { enumerable: true, get: function () { return use_copy_to_webflow_1.useCopyToWebflow; } });
+var use_paste_from_webflow_1 = require("./use-paste-from-webflow");
+Object.defineProperty(exports, "usePasteFromWebflow", { enumerable: true, get: function () { return use_paste_from_webflow_1.usePasteFromWebflow; } });

package/dist/use-copy-to-webflow.d.ts

@@ -0,0 +1,23 @@
+export type CopyToWebflowStatus = "idle" | "ok" | "err";
+export interface UseCopyToWebflowOptions {
+    /** Message shown after successful copy. */
+    successMessage?: string;
+}
+export interface UseCopyToWebflowReturn {
+    /** Call with Xscp JSON string to copy to clipboard (Webflow-ready). */
+    copyToWebflow: (xscpJson: string) => void;
+    /** Current status: idle | ok | err */
+    status: CopyToWebflowStatus;
+    /** Error message when status is "err". */
+    error: string | null;
+    /** Success message when status is "ok". */
+    successMessage: string | null;
+    /** Reset status/error to idle. */
+    reset: () => void;
+}
+/**
+ * Hook to copy Xscp JSON to the clipboard in a format Webflow Designer accepts.
+ * Use this to build your own "Copy to Webflow" button or trigger copy from code.
+ */
+export declare function useCopyToWebflow(options?: UseCopyToWebflowOptions): UseCopyToWebflowReturn;
+//# sourceMappingURL=use-copy-to-webflow.d.ts.map

package/dist/use-copy-to-webflow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-copy-to-webflow.d.ts","sourceRoot":"","sources":["../src/use-copy-to-webflow.ts"],"names":[],"mappings":"AAWA,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,IAAI,GAAG,KAAK,CAAC;AAKxD,MAAM,WAAW,uBAAuB;IACtC,2CAA2C;IAC3C,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,sBAAsB;IACrC,uEAAuE;IACvE,aAAa,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,sCAAsC;IACtC,MAAM,EAAE,mBAAmB,CAAC;IAC5B,0CAA0C;IAC1C,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,2CAA2C;IAC3C,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,kCAAkC;IAClC,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAC9B,OAAO,GAAE,uBAA4B,GACpC,sBAAsB,CAoDxB"}

package/dist/use-copy-to-webflow.js

@@ -0,0 +1,57 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCopyToWebflow = useCopyToWebflow;
+const react_1 = require("react");
+const copy_payload_1 = require("./copy-payload");
+const DEFAULT_SUCCESS_MSG = "Copied. Open Webflow Designer, click canvas or Body, then press Cmd+V (Mac) or Ctrl+V (Windows).";
+/**
+ * Hook to copy Xscp JSON to the clipboard in a format Webflow Designer accepts.
+ * Use this to build your own "Copy to Webflow" button or trigger copy from code.
+ */
+function useCopyToWebflow(options = {}) {
+    const { successMessage: customSuccess = DEFAULT_SUCCESS_MSG } = options;
+    const [status, setStatus] = (0, react_1.useState)("idle");
+    const [error, setError] = (0, react_1.useState)(null);
+    const [successMessage, setSuccessMessage] = (0, react_1.useState)(null);
+    const reset = (0, react_1.useCallback)(() => {
+        setStatus("idle");
+        setError(null);
+        setSuccessMessage(null);
+    }, []);
+    const copyToWebflow = (0, react_1.useCallback)((xscpJson) => {
+        setError(null);
+        setSuccessMessage(null);
+        const raw = xscpJson.trim();
+        if (!raw) {
+            setError("Paste or provide Xscp JSON first.");
+            setStatus("err");
+            return;
+        }
+        const validation = (0, copy_payload_1.validateCopyPayload)(raw);
+        if (!validation.valid) {
+            setError(validation.error);
+            setStatus("err");
+            return;
+        }
+        try {
+            const normalized = (0, copy_payload_1.isXscpPayload)(raw)
+                ? (0, copy_payload_1.normalizeXscp)(raw)
+                : (0, copy_payload_1.normalizeCopyPayload)(raw);
+            (0, copy_payload_1.writeClipboardXscp)(normalized);
+            setStatus("ok");
+            setSuccessMessage(customSuccess);
+        }
+        catch (e) {
+            setStatus("err");
+            setError(e instanceof Error ? e.message : "Invalid Xscp JSON. Copy failed.");
+        }
+    }, [customSuccess]);
+    return {
+        copyToWebflow,
+        status,
+        error,
+        successMessage,
+        reset,
+    };
+}

package/dist/use-paste-from-webflow.d.ts

@@ -0,0 +1,20 @@
+export interface UsePasteFromWebflowReturn {
+    /** Extracted/formatted JSON after a successful paste. */
+    json: string;
+    /** Handler to attach to an element's onPaste (e.g. textarea). */
+    onPaste: (e: React.ClipboardEvent<HTMLTextAreaElement>) => void;
+    /** Error message when paste didn't contain Webflow JSON or parsing failed. */
+    error: string | null;
+    /** Copy current json to clipboard (plain text). */
+    copyJson: () => Promise<void>;
+    /** Whether the last copy succeeded. */
+    copied: boolean;
+    /** Clear json and error. */
+    reset: () => void;
+}
+/**
+ * Hook for a "Paste from Webflow" flow: user pastes in a focused area,
+ * you get the extracted Xscp JSON. Use with a textarea or contenteditable.
+ */
+export declare function usePasteFromWebflow(): UsePasteFromWebflowReturn;
+//# sourceMappingURL=use-paste-from-webflow.d.ts.map

package/dist/use-paste-from-webflow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-paste-from-webflow.d.ts","sourceRoot":"","sources":["../src/use-paste-from-webflow.ts"],"names":[],"mappings":"AAgCA,MAAM,WAAW,yBAAyB;IACxC,yDAAyD;IACzD,IAAI,EAAE,MAAM,CAAC;IACb,iEAAiE;IACjE,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,mBAAmB,CAAC,KAAK,IAAI,CAAC;IAChE,8EAA8E;IAC9E,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,mDAAmD;IACnD,QAAQ,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9B,uCAAuC;IACvC,MAAM,EAAE,OAAO,CAAC;IAChB,4BAA4B;IAC5B,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,IAAI,yBAAyB,CA4C/D"}

package/dist/use-paste-from-webflow.js

@@ -0,0 +1,80 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePasteFromWebflow = usePasteFromWebflow;
+const react_1 = require("react");
+const copy_payload_1 = require("./copy-payload");
+function getJsonFromPasteEvent(e) {
+    const json = e.clipboardData.getData("application/json");
+    const text = e.clipboardData.getData("text/plain");
+    const marker = "@webflow/XscpData";
+    if (json && json.includes(marker))
+        return json;
+    if (text && text.includes(marker))
+        return text;
+    if (json && json.trim().startsWith("{"))
+        return json;
+    if (text && text.trim().startsWith("{"))
+        return text;
+    return null;
+}
+function tryFormatJson(raw) {
+    const trimmed = raw.trim();
+    const start = trimmed.indexOf("{");
+    if (start === -1)
+        return raw;
+    const jsonStr = trimmed.slice(start);
+    try {
+        const parsed = JSON.parse(jsonStr);
+        return JSON.stringify(parsed, null, 2);
+    }
+    catch {
+        return raw;
+    }
+}
+const DEFAULT_PASTE_ERROR = "No Webflow JSON in clipboard. Copy a component in Webflow Designer (Cmd+C), then paste here (Cmd+V).";
+/**
+ * Hook for a "Paste from Webflow" flow: user pastes in a focused area,
+ * you get the extracted Xscp JSON. Use with a textarea or contenteditable.
+ */
+function usePasteFromWebflow() {
+    const [json, setJson] = (0, react_1.useState)("");
+    const [error, setError] = (0, react_1.useState)(null);
+    const [copied, setCopied] = (0, react_1.useState)(false);
+    const onPaste = (0, react_1.useCallback)((e) => {
+        const raw = getJsonFromPasteEvent(e);
+        if (!raw) {
+            setError(DEFAULT_PASTE_ERROR);
+            return;
+        }
+        e.preventDefault();
+        setError(null);
+        try {
+            const normalized = raw.includes("@webflow/XscpData")
+                ? (0, copy_payload_1.normalizeXscp)(raw)
+                : raw;
+            setJson(tryFormatJson(normalized));
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : "Invalid JSON");
+        }
+    }, []);
+    const copyJson = (0, react_1.useCallback)(async () => {
+        if (!json)
+            return;
+        setCopied(false);
+        try {
+            await navigator.clipboard.writeText(json);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        }
+        catch {
+            setError("Copy failed");
+        }
+    }, [json]);
+    const reset = (0, react_1.useCallback)(() => {
+        setJson("");
+        setError(null);
+    }, []);
+    return { json, onPaste, error, copyJson, copied, reset };
+}

package/dist-esm/copy-payload.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Ensures Webflow XSCP JSON payload starts with "{" with no leading characters,
+ * and has no trailing non-whitespace (only the first complete JSON object).
+ * Webflow Designer paste handler requires the clipboard to start exactly with "{".
+ */
+export declare function normalizeCopyPayload(payload: string): string;
+export type ValidatePayloadResult = {
+    valid: true;
+    length: number;
+} | {
+    valid: false;
+    error: string;
+    length: number;
+    tailPreview?: string;
+};
+/**
+ * Normalizes raw XSCP string: strips BOM, trims, removes junk before
+ * {"type":"@webflow/XscpData"}, removes any trailing non-whitespace after the
+ * root object, validates with JSON.parse. Throws if invalid.
+ * Use for Webflow paste (ClipboardItem application/json).
+ */
+export declare function normalizeXscp(raw: string): string;
+/**
+ * Copies XSCP to clipboard via the copy event so we can set both
+ * application/json and text/plain (Clipboard API write() rejects application/json).
+ * Triggers a programmatic copy and intercepts the copy event to set clipboardData.
+ */
+export declare function writeClipboardXscp(xscp: string): void;
+/**
+ * Returns true if the payload looks like Webflow XSCP JSON (use ClipboardItem path).
+ */
+export declare function isXscpPayload(payload: string): boolean;
+/**
+ * Extracts Webflow Xscp JSON from a paste (clipboard) event.
+ * Use in an onPaste handler: if this returns a string, preventDefault and use it.
+ * Returns null if the clipboard doesn't contain Webflow JSON.
+ */
+export declare function getXscpFromPasteEvent(e: ClipboardEvent): string | null;
+/**
+ * Validates that the payload is parseable JSON. Webflow shows "clipboard is empty"
+ * when the payload is invalid or truncated. Use this to warn the user before paste.
+ */
+export declare function validateCopyPayload(payload: string): ValidatePayloadResult;
+//# sourceMappingURL=copy-payload.d.ts.map

package/dist-esm/copy-payload.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"copy-payload.d.ts","sourceRoot":"","sources":["../src/copy-payload.ts"],"names":[],"mappings":"AAkCA;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAK5D;AAED,MAAM,MAAM,qBAAqB,GAC7B;IAAE,KAAK,EAAE,IAAI,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,GAC/B;IAAE,KAAK,EAAE,KAAK,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAI1E;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAOjD;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAyBrD;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO,CAEtD;AAID;;;;GAIG;AACH,wBAAgB,qBAAqB,CAAC,CAAC,EAAE,cAAc,GAAG,MAAM,GAAG,IAAI,CAUtE;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,MAAM,GAAG,qBAAqB,CA8B1E"}

package/dist-esm/copy-payload.mjs

@@ -0,0 +1,155 @@
+/**
+ * Extracts the first complete JSON object from a string (from first "{" to
+ * its matching "}"). Used when payload has trailing junk that causes JSON.parse to fail.
+ */
+function extractFirstJsonObject(s) {
+    const start = s.indexOf("{");
+    if (start === -1)
+        return s;
+    let depth = 0;
+    let inString = false;
+    let escape = false;
+    for (let i = start; i < s.length; i++) {
+        const c = s[i];
+        if (escape) {
+            escape = false;
+            continue;
+        }
+        if (inString) {
+            if (c === "\\")
+                escape = true;
+            else if (c === '"')
+                inString = false;
+            continue;
+        }
+        if (c === '"') {
+            inString = true;
+            continue;
+        }
+        if (c === "{")
+            depth++;
+        else if (c === "}") {
+            depth--;
+            if (depth === 0)
+                return s.slice(start, i + 1);
+        }
+    }
+    return s.slice(start);
+}
+/**
+ * Ensures Webflow XSCP JSON payload starts with "{" with no leading characters,
+ * and has no trailing non-whitespace (only the first complete JSON object).
+ * Webflow Designer paste handler requires the clipboard to start exactly with "{".
+ */
+export function normalizeCopyPayload(payload) {
+    const trimmed = payload.trim();
+    const firstBrace = trimmed.indexOf("{");
+    if (firstBrace === -1)
+        return trimmed;
+    return extractFirstJsonObject(trimmed.slice(firstBrace));
+}
+const XSCP_PREFIX = '{"type":"@webflow/XscpData"';
+/**
+ * Normalizes raw XSCP string: strips BOM, trims, removes junk before
+ * {"type":"@webflow/XscpData"}, removes any trailing non-whitespace after the
+ * root object, validates with JSON.parse. Throws if invalid.
+ * Use for Webflow paste (ClipboardItem application/json).
+ */
+export function normalizeXscp(raw) {
+    let s = raw.replace(/^\uFEFF/, "").trimStart();
+    const idx = s.indexOf(XSCP_PREFIX);
+    if (idx > 0)
+        s = s.slice(idx);
+    s = extractFirstJsonObject(s);
+    JSON.parse(s); // validate – throws if invalid
+    return s;
+}
+/**
+ * Copies XSCP to clipboard via the copy event so we can set both
+ * application/json and text/plain (Clipboard API write() rejects application/json).
+ * Triggers a programmatic copy and intercepts the copy event to set clipboardData.
+ */
+export function writeClipboardXscp(xscp) {
+    const json = normalizeXscp(xscp);
+    const onCopy = (e) => {
+        e.preventDefault();
+        e.clipboardData?.setData("application/json", json);
+        e.clipboardData?.setData("text/plain", json);
+    };
+    document.addEventListener("copy", onCopy, true);
+    try {
+        const textarea = document.createElement("textarea");
+        textarea.value = json;
+        textarea.style.position = "fixed";
+        textarea.style.left = "-9999px";
+        textarea.style.top = "0";
+        document.body.appendChild(textarea);
+        textarea.focus();
+        textarea.select();
+        document.execCommand("copy");
+        document.body.removeChild(textarea);
+    }
+    finally {
+        document.removeEventListener("copy", onCopy, true);
+    }
+}
+/**
+ * Returns true if the payload looks like Webflow XSCP JSON (use ClipboardItem path).
+ */
+export function isXscpPayload(payload) {
+    return payload.includes(XSCP_PREFIX);
+}
+const XSCP_MARKER = "@webflow/XscpData";
+/**
+ * Extracts Webflow Xscp JSON from a paste (clipboard) event.
+ * Use in an onPaste handler: if this returns a string, preventDefault and use it.
+ * Returns null if the clipboard doesn't contain Webflow JSON.
+ */
+export function getXscpFromPasteEvent(e) {
+    const dt = e.clipboardData;
+    if (!dt)
+        return null;
+    const json = dt.getData("application/json");
+    const text = dt.getData("text/plain");
+    if (json && json.includes(XSCP_MARKER))
+        return json;
+    if (text && text.includes(XSCP_MARKER))
+        return text;
+    if (json && json.trim().startsWith("{"))
+        return json;
+    if (text && text.trim().startsWith("{"))
+        return text;
+    return null;
+}
+/**
+ * Validates that the payload is parseable JSON. Webflow shows "clipboard is empty"
+ * when the payload is invalid or truncated. Use this to warn the user before paste.
+ */
+export function validateCopyPayload(payload) {
+    const normalized = normalizeCopyPayload(payload);
+    const length = normalized.length;
+    if (!normalized) {
+        return { valid: false, error: "Payload is empty.", length: 0 };
+    }
+    if (normalized[0] !== "{") {
+        return {
+            valid: false,
+            error: "Payload does not start with {. Webflow requires valid XSCP JSON.",
+            length,
+        };
+    }
+    try {
+        JSON.parse(normalized);
+        return { valid: true, length };
+    }
+    catch (e) {
+        const message = e instanceof Error ? e.message : String(e);
+        const tailPreview = length > 80 ? `…${normalized.slice(-80)}` : normalized;
+        return {
+            valid: false,
+            error: message,
+            length,
+            tailPreview,
+        };
+    }
+}

package/dist-esm/copy-to-webflow-button.d.ts

@@ -0,0 +1,26 @@
+import type { ButtonHTMLAttributes } from "react";
+export interface CopyToWebflowButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onClick"> {
+    /** Xscp JSON string to copy when the button is clicked. */
+    xscpJson: string;
+    /** Optional success message (default: instruction to paste in Designer). */
+    successMessage?: string;
+    /** Label when idle. Default: "Copy to Webflow" */
+    label?: string;
+    /** Label when copied successfully. Default: "Copied" */
+    copiedLabel?: string;
+    /** Label when error. Default: "Copy failed" */
+    errorLabel?: string;
+    /** Optional class name for the button (e.g. Tailwind). */
+    className?: string;
+    /** Optional class for the status/error message container. */
+    messageClassName?: string;
+    /** Whether to show status/error message below the button. Default: true */
+    showMessage?: boolean;
+}
+/**
+ * Ready-to-use "Copy to Webflow" button. Pass your Xscp JSON; on click it copies
+ * to the clipboard in the format Webflow Designer expects (Cmd+V in Designer).
+ * Style with className or wrap in your own UI.
+ */
+export declare function CopyToWebflowButton({ xscpJson, successMessage, label, copiedLabel, errorLabel, className, messageClassName, showMessage, children, ...buttonProps }: CopyToWebflowButtonProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=copy-to-webflow-button.d.ts.map

package/dist-esm/copy-to-webflow-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"copy-to-webflow-button.d.ts","sourceRoot":"","sources":["../src/copy-to-webflow-button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAGlD,MAAM,WAAW,wBACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAChE,2DAA2D;IAC3D,QAAQ,EAAE,MAAM,CAAC;IACjB,4EAA4E;IAC5E,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wDAAwD;IACxD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+CAA+C;IAC/C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6DAA6D;IAC7D,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,2EAA2E;IAC3E,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAMD;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,cAAc,EACd,KAAoB,EACpB,WAAgC,EAChC,UAA8B,EAC9B,SAAS,EACT,gBAAgB,EAChB,WAAkB,EAClB,QAAQ,EACR,GAAG,WAAW,EACf,EAAE,wBAAwB,2CAqC1B"}

package/dist-esm/copy-to-webflow-button.mjs

@@ -0,0 +1,20 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCopyToWebflow } from "./use-copy-to-webflow.mjs";
+const defaultLabel = "Copy to Webflow";
+const defaultCopiedLabel = "Copied";
+const defaultErrorLabel = "Copy failed";
+/**
+ * Ready-to-use "Copy to Webflow" button. Pass your Xscp JSON; on click it copies
+ * to the clipboard in the format Webflow Designer expects (Cmd+V in Designer).
+ * Style with className or wrap in your own UI.
+ */
+export function CopyToWebflowButton({ xscpJson, successMessage, label = defaultLabel, copiedLabel = defaultCopiedLabel, errorLabel = defaultErrorLabel, className, messageClassName, showMessage = true, children, ...buttonProps }) {
+    const { copyToWebflow, status, error, successMessage: msg, } = useCopyToWebflow({ successMessage });
+    const displayText = status === "ok"
+        ? copiedLabel
+        : status === "err"
+            ? errorLabel
+            : label;
+    return (_jsxs("div", { children: [_jsx("button", { type: "button", onClick: () => copyToWebflow(xscpJson), disabled: !xscpJson?.trim(), className: className, ...buttonProps, children: children ?? displayText }), showMessage && (error || msg) && (_jsx("div", { className: messageClassName, role: error ? "alert" : "status", "aria-live": "polite", children: error ?? msg }))] }));
+}

package/dist-esm/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * webflow-clipboard — Copy to Webflow / Paste from Webflow as reusable primitives.
+ * Use the core API in any JS/TS app, or the React components for a ready "Copy to Webflow" button.
+ */
+export { normalizeCopyPayload, normalizeXscp, writeClipboardXscp, isXscpPayload, validateCopyPayload, getXscpFromPasteEvent, type ValidatePayloadResult, } from "./copy-payload";
+//# sourceMappingURL=index.d.ts.map

package/dist-esm/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EACL,oBAAoB,EACpB,aAAa,EACb,kBAAkB,EAClB,aAAa,EACb,mBAAmB,EACnB,qBAAqB,EACrB,KAAK,qBAAqB,GAC3B,MAAM,gBAAgB,CAAC"}

package/dist-esm/index.mjs

@@ -0,0 +1,5 @@
+/**
+ * webflow-clipboard — Copy to Webflow / Paste from Webflow as reusable primitives.
+ * Use the core API in any JS/TS app, or the React components for a ready "Copy to Webflow" button.
+ */
+export { normalizeCopyPayload, normalizeXscp, writeClipboardXscp, isXscpPayload, validateCopyPayload, getXscpFromPasteEvent, } from "./copy-payload.mjs";

package/dist-esm/react.d.ts

@@ -0,0 +1,7 @@
+export { CopyToWebflowButton } from "./copy-to-webflow-button";
+export type { CopyToWebflowButtonProps } from "./copy-to-webflow-button";
+export { useCopyToWebflow } from "./use-copy-to-webflow";
+export type { CopyToWebflowStatus, UseCopyToWebflowOptions, UseCopyToWebflowReturn, } from "./use-copy-to-webflow";
+export { usePasteFromWebflow } from "./use-paste-from-webflow";
+export type { UsePasteFromWebflowReturn } from "./use-paste-from-webflow";
+//# sourceMappingURL=react.d.ts.map

package/dist-esm/react.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../src/react.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,YAAY,EAAE,wBAAwB,EAAE,MAAM,0BAA0B,CAAC;AACzE,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,YAAY,EACV,mBAAmB,EACnB,uBAAuB,EACvB,sBAAsB,GACvB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,YAAY,EAAE,yBAAyB,EAAE,MAAM,0BAA0B,CAAC"}

package/dist-esm/react.mjs

@@ -0,0 +1,4 @@
+"use client";
+export { CopyToWebflowButton } from "./copy-to-webflow-button.mjs";
+export { useCopyToWebflow } from "./use-copy-to-webflow.mjs";
+export { usePasteFromWebflow } from "./use-paste-from-webflow.mjs";

package/dist-esm/use-copy-to-webflow.d.ts

@@ -0,0 +1,23 @@
+export type CopyToWebflowStatus = "idle" | "ok" | "err";
+export interface UseCopyToWebflowOptions {
+    /** Message shown after successful copy. */
+    successMessage?: string;
+}
+export interface UseCopyToWebflowReturn {
+    /** Call with Xscp JSON string to copy to clipboard (Webflow-ready). */
+    copyToWebflow: (xscpJson: string) => void;
+    /** Current status: idle | ok | err */
+    status: CopyToWebflowStatus;
+    /** Error message when status is "err". */
+    error: string | null;
+    /** Success message when status is "ok". */
+    successMessage: string | null;
+    /** Reset status/error to idle. */
+    reset: () => void;
+}
+/**
+ * Hook to copy Xscp JSON to the clipboard in a format Webflow Designer accepts.
+ * Use this to build your own "Copy to Webflow" button or trigger copy from code.
+ */
+export declare function useCopyToWebflow(options?: UseCopyToWebflowOptions): UseCopyToWebflowReturn;
+//# sourceMappingURL=use-copy-to-webflow.d.ts.map

package/dist-esm/use-copy-to-webflow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-copy-to-webflow.d.ts","sourceRoot":"","sources":["../src/use-copy-to-webflow.ts"],"names":[],"mappings":"AAWA,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,IAAI,GAAG,KAAK,CAAC;AAKxD,MAAM,WAAW,uBAAuB;IACtC,2CAA2C;IAC3C,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,sBAAsB;IACrC,uEAAuE;IACvE,aAAa,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,sCAAsC;IACtC,MAAM,EAAE,mBAAmB,CAAC;IAC5B,0CAA0C;IAC1C,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,2CAA2C;IAC3C,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,kCAAkC;IAClC,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAC9B,OAAO,GAAE,uBAA4B,GACpC,sBAAsB,CAoDxB"}

package/dist-esm/use-copy-to-webflow.mjs

@@ -0,0 +1,54 @@
+"use client";
+import { useState, useCallback } from "react";
+import { writeClipboardXscp, normalizeXscp, normalizeCopyPayload, isXscpPayload, validateCopyPayload, } from "./copy-payload.mjs";
+const DEFAULT_SUCCESS_MSG = "Copied. Open Webflow Designer, click canvas or Body, then press Cmd+V (Mac) or Ctrl+V (Windows).";
+/**
+ * Hook to copy Xscp JSON to the clipboard in a format Webflow Designer accepts.
+ * Use this to build your own "Copy to Webflow" button or trigger copy from code.
+ */
+export function useCopyToWebflow(options = {}) {
+    const { successMessage: customSuccess = DEFAULT_SUCCESS_MSG } = options;
+    const [status, setStatus] = useState("idle");
+    const [error, setError] = useState(null);
+    const [successMessage, setSuccessMessage] = useState(null);
+    const reset = useCallback(() => {
+        setStatus("idle");
+        setError(null);
+        setSuccessMessage(null);
+    }, []);
+    const copyToWebflow = useCallback((xscpJson) => {
+        setError(null);
+        setSuccessMessage(null);
+        const raw = xscpJson.trim();
+        if (!raw) {
+            setError("Paste or provide Xscp JSON first.");
+            setStatus("err");
+            return;
+        }
+        const validation = validateCopyPayload(raw);
+        if (!validation.valid) {
+            setError(validation.error);
+            setStatus("err");
+            return;
+        }
+        try {
+            const normalized = isXscpPayload(raw)
+                ? normalizeXscp(raw)
+                : normalizeCopyPayload(raw);
+            writeClipboardXscp(normalized);
+            setStatus("ok");
+            setSuccessMessage(customSuccess);
+        }
+        catch (e) {
+            setStatus("err");
+            setError(e instanceof Error ? e.message : "Invalid Xscp JSON. Copy failed.");
+        }
+    }, [customSuccess]);
+    return {
+        copyToWebflow,
+        status,
+        error,
+        successMessage,
+        reset,
+    };
+}

package/dist-esm/use-paste-from-webflow.d.ts

@@ -0,0 +1,20 @@
+export interface UsePasteFromWebflowReturn {
+    /** Extracted/formatted JSON after a successful paste. */
+    json: string;
+    /** Handler to attach to an element's onPaste (e.g. textarea). */
+    onPaste: (e: React.ClipboardEvent<HTMLTextAreaElement>) => void;
+    /** Error message when paste didn't contain Webflow JSON or parsing failed. */
+    error: string | null;
+    /** Copy current json to clipboard (plain text). */
+    copyJson: () => Promise<void>;
+    /** Whether the last copy succeeded. */
+    copied: boolean;
+    /** Clear json and error. */
+    reset: () => void;
+}
+/**
+ * Hook for a "Paste from Webflow" flow: user pastes in a focused area,
+ * you get the extracted Xscp JSON. Use with a textarea or contenteditable.
+ */
+export declare function usePasteFromWebflow(): UsePasteFromWebflowReturn;
+//# sourceMappingURL=use-paste-from-webflow.d.ts.map

package/dist-esm/use-paste-from-webflow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-paste-from-webflow.d.ts","sourceRoot":"","sources":["../src/use-paste-from-webflow.ts"],"names":[],"mappings":"AAgCA,MAAM,WAAW,yBAAyB;IACxC,yDAAyD;IACzD,IAAI,EAAE,MAAM,CAAC;IACb,iEAAiE;IACjE,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,mBAAmB,CAAC,KAAK,IAAI,CAAC;IAChE,8EAA8E;IAC9E,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,mDAAmD;IACnD,QAAQ,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9B,uCAAuC;IACvC,MAAM,EAAE,OAAO,CAAC;IAChB,4BAA4B;IAC5B,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,IAAI,yBAAyB,CA4C/D"}

package/dist-esm/use-paste-from-webflow.mjs

@@ -0,0 +1,77 @@
+"use client";
+import { useState, useCallback } from "react";
+import { normalizeXscp } from "./copy-payload.mjs";
+function getJsonFromPasteEvent(e) {
+    const json = e.clipboardData.getData("application/json");
+    const text = e.clipboardData.getData("text/plain");
+    const marker = "@webflow/XscpData";
+    if (json && json.includes(marker))
+        return json;
+    if (text && text.includes(marker))
+        return text;
+    if (json && json.trim().startsWith("{"))
+        return json;
+    if (text && text.trim().startsWith("{"))
+        return text;
+    return null;
+}
+function tryFormatJson(raw) {
+    const trimmed = raw.trim();
+    const start = trimmed.indexOf("{");
+    if (start === -1)
+        return raw;
+    const jsonStr = trimmed.slice(start);
+    try {
+        const parsed = JSON.parse(jsonStr);
+        return JSON.stringify(parsed, null, 2);
+    }
+    catch {
+        return raw;
+    }
+}
+const DEFAULT_PASTE_ERROR = "No Webflow JSON in clipboard. Copy a component in Webflow Designer (Cmd+C), then paste here (Cmd+V).";
+/**
+ * Hook for a "Paste from Webflow" flow: user pastes in a focused area,
+ * you get the extracted Xscp JSON. Use with a textarea or contenteditable.
+ */
+export function usePasteFromWebflow() {
+    const [json, setJson] = useState("");
+    const [error, setError] = useState(null);
+    const [copied, setCopied] = useState(false);
+    const onPaste = useCallback((e) => {
+        const raw = getJsonFromPasteEvent(e);
+        if (!raw) {
+            setError(DEFAULT_PASTE_ERROR);
+            return;
+        }
+        e.preventDefault();
+        setError(null);
+        try {
+            const normalized = raw.includes("@webflow/XscpData")
+                ? normalizeXscp(raw)
+                : raw;
+            setJson(tryFormatJson(normalized));
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : "Invalid JSON");
+        }
+    }, []);
+    const copyJson = useCallback(async () => {
+        if (!json)
+            return;
+        setCopied(false);
+        try {
+            await navigator.clipboard.writeText(json);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        }
+        catch {
+            setError("Copy failed");
+        }
+    }, [json]);
+    const reset = useCallback(() => {
+        setJson("");
+        setError(null);
+    }, []);
+    return { json, onPaste, error, copyJson, copied, reset };
+}

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "webflow-clipboard",
+  "version": "1.0.0",
+  "description": "Copy to Webflow / Paste from Webflow — put Xscp JSON on the clipboard for Webflow Designer, or extract it from a paste event. Use as a script or as a React \"Copy to Webflow\" button.",
+  "license": "MIT",
+  "author": "Bejamas",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/bejamas/bejamas.git",
+    "directory": "packages/webflow-clipboard"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "module": "./dist-esm/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist/**",
+    "dist-esm/**",
+    "README.md"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist-esm/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "import": "./dist-esm/react.mjs",
+      "require": "./dist/react.js"
+    }
+  },
+  "scripts": {
+    "build": "rm -rf dist dist-esm && tsc -p tsconfig.build.cjs.json && tsc -p tsconfig.build.esm.json && node scripts/prepare-esm.cjs",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run build",
+    "publish:npm": "npm run build && npm publish --access public"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "typescript": "^5.6.0"
+  }
+}