metaframe-widget 0.3.6__tar.gz → 0.3.7__tar.gz

{metaframe_widget-0.3.6 → metaframe_widget-0.3.7}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: metaframe-widget
-Version: 0.3.6
+Version: 0.3.7
 Summary: anywidget for embedding metaframe URLs in Jupyter and marimo notebooks
 Project-URL: Homepage, https://github.com/metapages/metaframe-js
 Project-URL: Repository, https://github.com/metapages/metaframe-js
@@ -29,7 +29,7 @@ Description-Content-Type: text/markdown
 
 # metaframe-widget
 
-An [anywidget](https://anywidget.dev/) for embedding [metaframe](https://js.mtfm.io/docs) and [metapage](https://docs.metapage.io/) URLs in Jupyter and marimo notebooks.
+An [anywidget](https://anywidget.dev/) for embedding [metaframe](https://framejs.io/docs) and [metapage](https://docs.metapage.io/) URLs in Jupyter and marimo notebooks.
 
 ## Install
 
@@ -51,7 +51,7 @@ pip install "metaframe-widget[marimo]"    # includes marimo
 ```python
 from metaframe_widget import MetaframeWidget
 
-w = MetaframeWidget(url="https://js.mtfm.io/#?js=...", height="300px")
+w = MetaframeWidget(url="https://framejs.io/#?js=...", height="300px")
 w
 ```
 
@@ -61,7 +61,7 @@ w
 import marimo as mo
 from metaframe_widget import MetaframeWidget
 
-w = MetaframeWidget(url="https://js.mtfm.io/#?js=...", height="300px")
+w = MetaframeWidget(url="https://framejs.io/#?js=...", height="300px")
 mo.ui.anywidget(w)
 ```
 

{metaframe_widget-0.3.6 → metaframe_widget-0.3.7}/README.md

@@ -1,6 +1,6 @@
 # metaframe-widget
 
-An [anywidget](https://anywidget.dev/) for embedding [metaframe](https://js.mtfm.io/docs) and [metapage](https://docs.metapage.io/) URLs in Jupyter and marimo notebooks.
+An [anywidget](https://anywidget.dev/) for embedding [metaframe](https://framejs.io/docs) and [metapage](https://docs.metapage.io/) URLs in Jupyter and marimo notebooks.
 
 ## Install
 
@@ -22,7 +22,7 @@ pip install "metaframe-widget[marimo]"    # includes marimo
 ```python
 from metaframe_widget import MetaframeWidget
 
-w = MetaframeWidget(url="https://js.mtfm.io/#?js=...", height="300px")
+w = MetaframeWidget(url="https://framejs.io/#?js=...", height="300px")
 w
 ```
 
@@ -32,7 +32,7 @@ w
 import marimo as mo
 from metaframe_widget import MetaframeWidget
 
-w = MetaframeWidget(url="https://js.mtfm.io/#?js=...", height="300px")
+w = MetaframeWidget(url="https://framejs.io/#?js=...", height="300px")
 mo.ui.anywidget(w)
 ```
 

{metaframe_widget-0.3.6 → metaframe_widget-0.3.7}/pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "hatchling.build"
 
 [project]
 name = "metaframe-widget"
-version = "0.3.6"
+version = "0.3.7"
 description = "anywidget for embedding metaframe URLs in Jupyter and marimo notebooks"
 license = "MIT"
 requires-python = ">=3.8"

metaframe_widget-0.3.7/src/metaframe_widget/_esm.py

@@ -0,0 +1,177 @@
+ESM = """
+const CDN_URL = "https://cdn.jsdelivr.net/npm/@metapages/metapage@1.10.8/+esm";
+
+let _renderMetapage = null;
+
+async function loadRenderMetapage() {
+    if (!_renderMetapage) {
+        const mod = await import(CDN_URL);
+        _renderMetapage = mod.renderMetapage;
+    }
+    return _renderMetapage;
+}
+
+export default {
+    async render({ model, el }) {
+        // Lay out el as a column: the metapage fills the space, an optional
+        // "saved URL" footer sits beneath it (only when there is one to show).
+        el.style.display = "flex";
+        el.style.flexDirection = "column";
+        el.style.boxSizing = "border-box";
+        el.style.width = model.get("width") || "100%";
+        el.style.height = model.get("height") || "400px";
+
+        // Inject CSS to remove iframe borders and inline gaps
+        const style = document.createElement("style");
+        style.textContent = ".metaframe-widget-container { box-sizing: border-box; flex: 1 1 auto; min-height: 0; width: 100%; } .metaframe-widget-container iframe { border: none; display: block; margin: 0; padding: 0; box-sizing: border-box; width: 100%; height: 100%; }";
+        el.appendChild(style);
+
+        const container = document.createElement("div");
+        container.className = "metaframe-widget-container";
+        el.appendChild(container);
+
+        // Footer showing the latest short URL produced by editing + saving.
+        const footer = document.createElement("div");
+        footer.style.cssText = "flex: 0 0 auto; display: none; align-items: center; gap: 6px; padding: 4px 6px; font-family: sans-serif; font-size: 12px; color: #555; background: #f7f7f7; border-top: 1px solid #e0e0e0; overflow: hidden;";
+        const footerLabel = document.createElement("span");
+        footerLabel.textContent = "Saved:";
+        footerLabel.style.flex = "0 0 auto";
+        const footerLink = document.createElement("a");
+        footerLink.target = "_blank";
+        footerLink.rel = "noopener noreferrer";
+        footerLink.style.cssText = "flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;";
+        const footerCopy = document.createElement("button");
+        footerCopy.textContent = "copy";
+        footerCopy.style.cssText = "flex: 0 0 auto; cursor: pointer; font-size: 11px; padding: 1px 6px;";
+        footer.appendChild(footerLabel);
+        footer.appendChild(footerLink);
+        footer.appendChild(footerCopy);
+        el.appendChild(footer);
+
+        function renderSavedUrl() {
+            const savedUrl = model.get("saved_url") || "";
+            if (savedUrl) {
+                footerLink.textContent = savedUrl;
+                footerLink.href = savedUrl;
+                footer.style.display = "flex";
+            } else {
+                footer.style.display = "none";
+            }
+        }
+        footerCopy.addEventListener("click", () => {
+            const savedUrl = model.get("saved_url") || "";
+            if (savedUrl && navigator.clipboard) {
+                navigator.clipboard.writeText(savedUrl);
+            }
+        });
+        renderSavedUrl();
+
+        const renderMetapage = await loadRenderMetapage();
+
+        let currentResult = null;
+
+        function applyAllowToIframes() {
+            const allow = model.get("allow") || "";
+            if (allow) {
+                container.querySelectorAll("iframe").forEach(iframe => {
+                    iframe.allow = allow;
+                });
+            }
+        }
+
+        async function createMetapage() {
+            if (currentResult) {
+                currentResult.dispose();
+                currentResult = null;
+            }
+            container.innerHTML = "";
+
+            const url = model.get("url");
+            if (!url) return;
+
+            const definition = {
+                version: "0.3",
+                metaframes: {
+                    mf: { url },
+                },
+            };
+
+            const result = await renderMetapage({
+                definition,
+                rootDiv: container,
+                onOutputs: (outputs) => {
+                    const mfOutputs = outputs.mf || {};
+                    model.set("outputs", JSON.parse(JSON.stringify(mfOutputs)));
+                    model.save_changes();
+                },
+            });
+            currentResult = result;
+
+            applyAllowToIframes();
+
+            // Push current inputs if any
+            const inputs = model.get("inputs");
+            if (inputs && Object.keys(inputs).length > 0) {
+                result.setInputs({ mf: inputs });
+            }
+        }
+
+        // The embedded editor (same-origin to the URL-shortening worker) mints a
+        // short URL when the user clicks "Save and Shorten URL", then postMessages
+        // it here. We record it in `saved_url` WITHOUT touching `url`, so the live
+        // iframe the user is editing is never torn down and reloaded.
+        function expectedOrigin() {
+            try {
+                return new URL(model.get("url") || "").origin;
+            } catch {
+                return null;
+            }
+        }
+        const onMessage = (event) => {
+            const data = event.data;
+            if (!data || data.type !== "metaframe-widget:shorturl" || !data.url) {
+                return;
+            }
+            // Route to the correct widget (one notebook may hold several) and
+            // verify the message came from our metaframe's origin.
+            const iframe = container.querySelector("iframe");
+            if (!iframe || event.source !== iframe.contentWindow) return;
+            const origin = expectedOrigin();
+            if (origin && event.origin !== origin) return;
+
+            model.set("saved_url", data.url);
+            model.save_changes();
+        };
+        window.addEventListener("message", onMessage);
+
+        model.on("change:url", createMetapage);
+        model.on("change:saved_url", renderSavedUrl);
+
+        model.on("change:inputs", () => {
+            if (currentResult) {
+                const inputs = model.get("inputs");
+                currentResult.setInputs({ mf: inputs });
+            }
+        });
+
+        model.on("change:width", () => {
+            el.style.width = model.get("width") || "100%";
+        });
+
+        model.on("change:height", () => {
+            el.style.height = model.get("height") || "400px";
+        });
+
+        model.on("change:allow", applyAllowToIframes);
+
+        await createMetapage();
+
+        return () => {
+            window.removeEventListener("message", onMessage);
+            if (currentResult) {
+                currentResult.dispose();
+            }
+        };
+    },
+};
+"""

{metaframe_widget-0.3.6 → metaframe_widget-0.3.7}/src/metaframe_widget/_widget.py

@@ -26,6 +26,9 @@ class MetaframeWidget(anywidget.AnyWidget):
         width: CSS width for the widget container (default "100%").
         height: CSS height for the widget container (default "400px").
         allow: iframe allow attribute string (e.g. "camera; microphone").
+        saved_url: Latest short URL minted by editing+saving inside the widget
+            (read-only). Copy this into your cell to persist edits across
+            notebook re-runs.
     """
 
     _esm = ESM
@@ -36,6 +39,10 @@ class MetaframeWidget(anywidget.AnyWidget):
     width = traitlets.Unicode("100%").tag(sync=True)
     height = traitlets.Unicode("400px").tag(sync=True)
     allow = traitlets.Unicode("").tag(sync=True)
+    # Set by the ESM when the user clicks "Save and Shorten URL" inside the
+    # embedded editor. Read-only from Python's perspective; updating it does not
+    # reload the iframe (so editing is not interrupted).
+    saved_url = traitlets.Unicode("").tag(sync=True)
 
     def __init__(self, *args, **kwargs):
         super().__init__(*args, **kwargs)
@@ -67,6 +74,15 @@ class MetaframeWidget(anywidget.AnyWidget):
         """
         self.observe(callback, names=["outputs"])
 
+    def on_saved_url_change(self, callback):
+        """Register a callback for when the user saves edits to a new short URL.
+
+        Fires after the user clicks "Save and Shorten URL" inside the embedded
+        editor. The callback receives a change dict whose 'new' key holds the
+        freshly-minted short URL.
+        """
+        self.observe(callback, names=["saved_url"])
+
     @classmethod
     def from_code(
         cls,
@@ -78,7 +94,7 @@ class MetaframeWidget(anywidget.AnyWidget):
     ) -> "MetaframeWidget":
         """Create a MetaframeWidget from raw JavaScript code.
 
-        Encodes the code into a js.mtfm.io URL with the code in the hash.
+        Encodes the code into a framejs.io URL with the code in the hash.
 
         Args:
             js_code: JavaScript source for the metaframe.
@@ -87,7 +103,7 @@ class MetaframeWidget(anywidget.AnyWidget):
             allow: iframe allow attribute string (e.g. "camera; microphone").
         """
         encoded = string_to_base64_string(js_code)
-        url = f"https://js.mtfm.io/#?js={encoded}"
+        url = f"https://framejs.io/#?js={encoded}"
         return cls(url=url, width=width, height=height, allow=allow, **kwargs)
 
     def pipe_to(self, target: "MetaframeWidget", output_key: str, input_key: str = None):

{metaframe_widget-0.3.6 → metaframe_widget-0.3.7}/tests/test_widget.py

@@ -5,8 +5,8 @@ from metaframe_widget import MetaframeWidget
 
 
 def test_create_widget():
-    w = MetaframeWidget(url="https://js.mtfm.io/#?js=abc")
-    assert w.url == "https://js.mtfm.io/#?js=abc"
+    w = MetaframeWidget(url="https://framejs.io/#?js=abc")
+    assert w.url == "https://framejs.io/#?js=abc"
     assert w.inputs == {}
     assert w.outputs == {}
     assert w.height == "400px"
@@ -34,14 +34,14 @@ def test_from_code():
     # from_code does: encodeURIComponent(code) then base64
     encoded_uri = urllib.parse.quote(code, safe="-_.!~*'()")
     encoded = base64.b64encode(encoded_uri.encode("ascii")).decode("ascii")
-    expected_url = f"https://js.mtfm.io/#?js={encoded}"
+    expected_url = f"https://framejs.io/#?js={encoded}"
     assert w.url == expected_url
 
 
 def test_from_code_with_kwargs():
     w = MetaframeWidget.from_code("code", height="600px")
     assert w.height == "600px"
-    assert "js.mtfm.io" in w.url
+    assert "framejs.io" in w.url
 
 
 def test_on_outputs_change():

metaframe_widget-0.3.6/src/metaframe_widget/_esm.py

@@ -1,111 +0,0 @@
-ESM = """
-const CDN_URL = "https://cdn.jsdelivr.net/npm/@metapages/metapage@1.10.8/+esm";
-
-let _renderMetapage = null;
-
-async function loadRenderMetapage() {
-    if (!_renderMetapage) {
-        const mod = await import(CDN_URL);
-        _renderMetapage = mod.renderMetapage;
-    }
-    return _renderMetapage;
-}
-
-export default {
-    async render({ model, el }) {
-        // Size el explicitly so marimo and Jupyter honour width/height
-        el.style.display = "block";
-        el.style.boxSizing = "border-box";
-        el.style.width = model.get("width") || "100%";
-        el.style.height = model.get("height") || "400px";
-
-        // Inject CSS to remove iframe borders and inline gaps
-        const style = document.createElement("style");
-        style.textContent = ".metaframe-widget-container { box-sizing: border-box; width: 100%; height: 100%; } .metaframe-widget-container iframe { border: none; display: block; margin: 0; padding: 0; box-sizing: border-box; width: 100%; height: 100%; }";
-        el.appendChild(style);
-
-        const container = document.createElement("div");
-        container.className = "metaframe-widget-container";
-        container.style.width = "100%";
-        container.style.height = "100%";
-        el.appendChild(container);
-
-        const renderMetapage = await loadRenderMetapage();
-
-        let currentResult = null;
-
-        function applyAllowToIframes() {
-            const allow = model.get("allow") || "";
-            if (allow) {
-                container.querySelectorAll("iframe").forEach(iframe => {
-                    iframe.allow = allow;
-                });
-            }
-        }
-
-        async function createMetapage() {
-            if (currentResult) {
-                currentResult.dispose();
-                currentResult = null;
-            }
-            container.innerHTML = "";
-
-            const url = model.get("url");
-            if (!url) return;
-
-            const definition = {
-                version: "0.3",
-                metaframes: {
-                    mf: { url },
-                },
-            };
-
-            const result = await renderMetapage({
-                definition,
-                rootDiv: container,
-                onOutputs: (outputs) => {
-                    const mfOutputs = outputs.mf || {};
-                    model.set("outputs", JSON.parse(JSON.stringify(mfOutputs)));
-                    model.save_changes();
-                },
-            });
-            currentResult = result;
-
-            applyAllowToIframes();
-
-            // Push current inputs if any
-            const inputs = model.get("inputs");
-            if (inputs && Object.keys(inputs).length > 0) {
-                result.setInputs({ mf: inputs });
-            }
-        }
-
-        model.on("change:url", createMetapage);
-
-        model.on("change:inputs", () => {
-            if (currentResult) {
-                const inputs = model.get("inputs");
-                currentResult.setInputs({ mf: inputs });
-            }
-        });
-
-        model.on("change:width", () => {
-            el.style.width = model.get("width") || "100%";
-        });
-
-        model.on("change:height", () => {
-            el.style.height = model.get("height") || "400px";
-        });
-
-        model.on("change:allow", applyAllowToIframes);
-
-        await createMetapage();
-
-        return () => {
-            if (currentResult) {
-                currentResult.dispose();
-            }
-        };
-    },
-};
-"""