@markdy/renderer-dom 1.0.17 → 1.0.18

package/dist/index.js

@@ -2626,28 +2626,37 @@ function ensureSceneStyles(doc) {
   transform: translateY(-1px) scale(1.02);
 }
 .markdy-badge {
+  position: absolute;
+  top: 10px;
+  right: 12px;
+  z-index: 25;
   display: inline-flex;
   align-items: center;
   gap: 4px;
   font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-  font-size: 11px;
-  font-weight: 600;
-  color: var(--md-control-text, #94a3b8);
+  font-size: 10px;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+  color: var(--md-text-muted, #94a3b8);
   text-decoration: none;
-  padding: 3px 8px;
-  border-radius: 999px;
-  background: var(--md-control-bg, rgba(255, 255, 255, 0.05));
-  border: 1px solid var(--md-control-border, rgba(148, 163, 184, 0.18));
-  margin-left: auto;
-  flex-shrink: 0;
-  transition: all 0.15s ease;
-  white-space: nowrap;
+  padding: 2.5px 7px;
+  border-radius: 5px;
+  background: var(--md-surface, rgba(15, 23, 42, 0.45));
+  border: 1px solid var(--md-border, rgba(148, 163, 184, 0.15));
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  opacity: 0.65;
+  transition: all 0.2s ease;
+  pointer-events: auto;
+  user-select: none;
 }
 .markdy-badge:hover {
+  opacity: 1;
   color: var(--accent, #10b981);
-  background: var(--accent-light, rgba(16, 185, 129, 0.12));
   border-color: var(--accent, #10b981);
+  background: var(--md-surface-raised, rgba(15, 23, 42, 0.75));
   transform: translateY(-1px);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
 }
 .markdy-speed-group {
   display: inline-flex;
@@ -3301,18 +3310,6 @@ function createDiagram(opts) {
     else container.appendChild(footer);
     return footer;
   }
-  let badge = null;
-  if (copyright) {
-    badge = document.createElement("a");
-    badge.className = "markdy-badge";
-    badge.href = `${MARKDY_PLAYGROUND_URL}#code=${encodeCodeForPlaygroundHash(code)}`;
-    badge.target = "_blank";
-    badge.rel = "noopener noreferrer";
-    badge.title = "Open and edit in Markdy Playground";
-    badge.style.marginLeft = "auto";
-    badge.innerHTML = `<span style="opacity:0.9">\u26A1</span> Markdy`;
-    ensureFooter().appendChild(badge);
-  }
   ensureSceneStyles(document);
   ensureNodeStyles(document);
   const scene = document.createElement("div");
@@ -3329,6 +3326,17 @@ function createDiagram(opts) {
   });
   applyThemeToScene(scene, plan.theme);
   viewport.appendChild(scene);
+  let badge = null;
+  if (copyright) {
+    badge = document.createElement("a");
+    badge.className = "markdy-badge";
+    badge.href = "https://markdy.com";
+    badge.target = "_blank";
+    badge.rel = "noopener noreferrer";
+    badge.title = "Powered by Markdy - Diagram as Code";
+    badge.textContent = "Powered by Markdy";
+    viewport.appendChild(badge);
+  }
   const viewportTransform = document.createElement("div");
   viewportTransform.className = "markdy-viewport-transform";
   Object.assign(viewportTransform.style, {
@@ -4230,7 +4238,7 @@ function createDiagram(opts) {
       mountCodeControl(toolsGroup);
     }
     if (toolsGroup.children.length > 0) toolbar.appendChild(toolsGroup);
-    ensureFooter().insertBefore(toolbar, badge ?? null);
+    ensureFooter().appendChild(toolbar);
     syncControls();
   }
   viewport.style.cursor = interactiveViewport ? "grab" : "pointer";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@markdy/renderer-dom",
-  "version": "1.0.17",
+  "version": "1.0.18",
   "description": "Browser renderer for diagram-native animated MarkdyScript architecture diagrams, built on the Web Animations API.",
   "license": "MIT",
   "type": "module",
@@ -45,14 +45,14 @@
   },
   "dependencies": {
     "html2canvas": "^1.4.1",
-    "@markdy/core": "1.0.17"
+    "@markdy/core": "1.0.18"
   },
   "devDependencies": {
     "jsdom": "^29.1.1",
     "tsup": "^8.5.1",
     "typescript": "^5.9.3",
     "vitest": "^4.1.7",
-    "@markdy/stdlib-systems": "1.0.17"
+    "@markdy/stdlib-systems": "1.0.18"
   },
   "scripts": {
     "build": "tsup",