hyperclayjs 1.7.0 → 1.9.0

package/{hyperclay.js → src/hyperclay.js}

@@ -1,5 +1,5 @@
 /**
- * HyperclayJS v1.7.0 - Minimal Browser-Native Loader
+ * HyperclayJS v1.9.0 - Minimal Browser-Native Loader
  *
  * Modules auto-init when imported (no separate init call needed).
  * Include `export-to-window` feature to export to window.hyperclay.
@@ -8,11 +8,11 @@
  *
  * <script type="module">
  *   // With window.hyperclay (default presets include export-to-window):
- *   await import('https://cdn.jsdelivr.net/npm/hyperclayjs@1/hyperclay.js?preset=minimal');
+ *   await import('https://cdn.jsdelivr.net/npm/hyperclayjs@1/src/hyperclay.js?preset=minimal');
  *   const { toast, savePage } = window.hyperclay;
  *
  *   // ES modules only (exclude export-to-window):
- *   const hyperclay = await import('https://cdn.jsdelivr.net/npm/hyperclayjs@1/hyperclay.js?preset=minimal&exclude=export-to-window');
+ *   const hyperclay = await import('https://cdn.jsdelivr.net/npm/hyperclayjs@1/src/hyperclay.js?preset=minimal&exclude=export-to-window');
  *   const modules = window.hyperclayModules;
  * </script>
  *
@@ -28,9 +28,11 @@ const MODULE_PATHS = {
   "save-core": "./core/savePageCore.js",
   "save-system": "./core/savePage.js",
   "autosave": "./core/autosave.js",
+  "unsaved-warning": "./core/unsavedWarning.js",
   "save-toast": "./core/saveToast.js",
   "edit-mode-helpers": "./core/adminSystem.js",
   "persist": "./core/enablePersistentFormInputValues.js",
+  "snapshot": "./core/snapshot.js",
   "option-visibility": "./core/optionVisibility.js",
   "edit-mode": "./core/editmodeSystem.js",
   "event-attrs": "./custom-attributes/events.js",
@@ -48,6 +50,7 @@ const MODULE_PATHS = {
   "cookie": "./utilities/cookie.js",
   "throttle": "./utilities/throttle.js",
   "debounce": "./utilities/debounce.js",
+  "cache-bust": "./utilities/cacheBust.js",
   "dom-ready": "./dom-utilities/onDomReady.js",
   "window-load": "./dom-utilities/onLoad.js",
   "all-js": "./dom-utilities/All.js",
@@ -60,6 +63,7 @@ const MODULE_PATHS = {
   "behavior-collector": "./communication/behaviorCollector.js",
   "send-message": "./communication/sendMessage.js",
   "file-upload": "./communication/uploadFile.js",
+  "live-sync": "./communication/live-sync.js",
   "export-to-window": "./core/exportToWindow.js"
 };
 const PRESETS = {
@@ -98,9 +102,11 @@ const PRESETS = {
       "save-core",
       "save-system",
       "autosave",
+      "unsaved-warning",
       "save-toast",
       "edit-mode-helpers",
       "persist",
+      "snapshot",
       "option-visibility",
       "edit-mode",
       "event-attrs",
@@ -118,6 +124,7 @@ const PRESETS = {
       "cookie",
       "throttle",
       "debounce",
+      "cache-bust",
       "dom-ready",
       "window-load",
       "all-js",
@@ -130,6 +137,7 @@ const PRESETS = {
       "behavior-collector",
       "send-message",
       "file-upload",
+      "live-sync",
       "export-to-window"
     ]
   }
@@ -205,6 +213,12 @@ export const savePage = window.hyperclayModules['save-core']?.savePage ?? window
 export const beforeSave = window.hyperclayModules['save-system']?.beforeSave ?? window.hyperclayModules['save-system']?.default;
 export const savePageThrottled = window.hyperclayModules['save-system']?.savePageThrottled ?? window.hyperclayModules['save-system']?.default;
 export const replacePageWith = window.hyperclayModules['save-system']?.replacePageWith ?? window.hyperclayModules['save-system']?.default;
+export const captureSnapshot = window.hyperclayModules['snapshot']?.captureSnapshot ?? window.hyperclayModules['snapshot']?.default;
+export const captureForSave = window.hyperclayModules['snapshot']?.captureForSave ?? window.hyperclayModules['snapshot']?.default;
+export const captureBodyForSync = window.hyperclayModules['snapshot']?.captureBodyForSync ?? window.hyperclayModules['snapshot']?.default;
+export const onSnapshot = window.hyperclayModules['snapshot']?.onSnapshot ?? window.hyperclayModules['snapshot']?.default;
+export const onPrepareForSave = window.hyperclayModules['snapshot']?.onPrepareForSave ?? window.hyperclayModules['snapshot']?.default;
+export const getPageContents = window.hyperclayModules['snapshot']?.getPageContents ?? window.hyperclayModules['snapshot']?.default;
 export const toggleEditMode = window.hyperclayModules['edit-mode']?.toggleEditMode ?? window.hyperclayModules['edit-mode']?.default;
 export const isEditMode = window.hyperclayModules['edit-mode']?.isEditMode ?? window.hyperclayModules['edit-mode']?.default;
 export const isOwner = window.hyperclayModules['edit-mode']?.isOwner ?? window.hyperclayModules['edit-mode']?.default;
@@ -220,9 +234,11 @@ export const nearest = window.hyperclayModules['nearest']?.nearest ?? window.hyp
 export const cookie = window.hyperclayModules['cookie']?.cookie ?? window.hyperclayModules['cookie']?.default;
 export const throttle = window.hyperclayModules['throttle']?.throttle ?? window.hyperclayModules['throttle']?.default;
 export const debounce = window.hyperclayModules['debounce']?.debounce ?? window.hyperclayModules['debounce']?.default;
+export const cacheBust = window.hyperclayModules['cache-bust']?.cacheBust ?? window.hyperclayModules['cache-bust']?.default;
 export const onDomReady = window.hyperclayModules['dom-ready']?.onDomReady ?? window.hyperclayModules['dom-ready']?.default;
 export const onLoad = window.hyperclayModules['window-load']?.onLoad ?? window.hyperclayModules['window-load']?.default;
 export const All = window.hyperclayModules['all-js']?.All ?? window.hyperclayModules['all-js']?.default;
+export const insertStyles = window.hyperclayModules['style-injection']?.insertStyles ?? window.hyperclayModules['style-injection']?.default;
 export const insertStyleTag = window.hyperclayModules['style-injection']?.insertStyleTag ?? window.hyperclayModules['style-injection']?.default;
 export const getDataFromForm = window.hyperclayModules['form-data']?.getDataFromForm ?? window.hyperclayModules['form-data']?.default;
 export const Idiomorph = window.hyperclayModules['idiomorph']?.Idiomorph ?? window.hyperclayModules['idiomorph']?.default;
@@ -234,3 +250,4 @@ export const sendMessage = window.hyperclayModules['send-message']?.sendMessage
 export const uploadFile = window.hyperclayModules['file-upload']?.uploadFile ?? window.hyperclayModules['file-upload']?.default;
 export const createFile = window.hyperclayModules['file-upload']?.createFile ?? window.hyperclayModules['file-upload']?.default;
 export const uploadFileBasic = window.hyperclayModules['file-upload']?.uploadFileBasic ?? window.hyperclayModules['file-upload']?.default;
+export const liveSync = window.hyperclayModules['live-sync']?.liveSync ?? window.hyperclayModules['live-sync']?.default;

package/{module-dependency-graph.json → src/module-dependency-graph.json}

@@ -1,16 +1,7 @@
 {
   "rawDependencies": {
-    "__tests__/All.test.js": [
-      "dom-utilities/All.js"
-    ],
-    "babel.config.js": [],
-    "build/build-loader.js": [],
-    "build/generate-dependency-graph.js": [],
-    "build/generate-load-jsdelivr.js": [],
-    "build/generate-readme.js": [],
-    "build/hyperclay.template.js": [],
-    "build/update-index-url.js": [],
     "communication/behaviorCollector.js": [],
+    "communication/live-sync.js": [],
     "communication/sendMessage.js": [
       "communication/behaviorCollector.js",
       "dom-utilities/getDataFromForm.js",
@@ -61,7 +52,7 @@
       "core/setPageTypeOnDocumentElement.js"
     ],
     "core/enablePersistentFormInputValues.js": [
-      "core/savePage.js"
+      "core/snapshot.js"
     ],
     "core/exportToWindow.js": [],
     "core/isAdminOfCurrentResource.js": [
@@ -69,6 +60,7 @@
       "utilities/cookie.js"
     ],
     "core/optionVisibility.js": [
+      "dom-utilities/insertStyleTag.js",
       "utilities/mutation.js"
     ],
     "core/savePage.js": [
@@ -78,6 +70,7 @@
     ],
     "core/savePageCore.js": [
       "core/isAdminOfCurrentResource.js",
+      "core/snapshot.js",
       "utilities/cookie.js"
     ],
     "core/saveToast.js": [
@@ -89,9 +82,11 @@
       "core/savePage.js",
       "dom-utilities/onDomReady.js"
     ],
-    "coverage/lcov-report/block-navigation.js": [],
-    "coverage/lcov-report/prettify.js": [],
-    "coverage/lcov-report/sorter.js": [],
+    "core/snapshot.js": [],
+    "core/unsavedWarning.js": [
+      "core/isAdminOfCurrentResource.js",
+      "core/savePage.js"
+    ],
     "custom-attributes/ajaxElements.js": [
       "dom-utilities/getDataFromForm.js"
     ],
@@ -103,6 +98,7 @@
     "custom-attributes/events.js": [
       "custom-attributes/onclickaway.js",
       "custom-attributes/onclone.js",
+      "custom-attributes/onmutation.js",
       "custom-attributes/onpagemutation.js",
       "custom-attributes/onrender.js"
     ],
@@ -113,6 +109,9 @@
     "custom-attributes/onaftersave.js": [],
     "custom-attributes/onclickaway.js": [],
     "custom-attributes/onclone.js": [],
+    "custom-attributes/onmutation.js": [
+      "utilities/mutation.js"
+    ],
     "custom-attributes/onpagemutation.js": [
       "utilities/mutation.js"
     ],
@@ -132,7 +131,6 @@
     "dom-utilities/onDomReady.js": [],
     "dom-utilities/onLoad.js": [],
     "hyperclay.js": [],
-    "jest.config.js": [],
     "string-utilities/copy-to-clipboard.js": [],
     "string-utilities/query.js": [],
     "string-utilities/slugify.js": [],
@@ -147,6 +145,7 @@
       "ui/toast.js"
     ],
     "ui/toast.js": [],
+    "utilities/cacheBust.js": [],
     "utilities/cookie.js": [],
     "utilities/debounce.js": [],
     "utilities/loadVendorScript.js": [],
@@ -161,7 +160,7 @@
     "save-core": {
       "name": "save-core",
       "category": "core",
-      "size": 6.3,
+      "size": 6.8,
       "files": [
         "core/savePageCore.js"
       ],
@@ -198,11 +197,21 @@
     "autosave": {
       "name": "autosave",
       "category": "core",
-      "size": 1.1,
+      "size": 0.9,
       "files": [
         "core/autosave.js"
       ],
-      "description": "Auto-save on DOM changes, unsaved changes warning",
+      "description": "Auto-save on DOM changes",
+      "exports": {}
+    },
+    "unsaved-warning": {
+      "name": "unsaved-warning",
+      "category": "core",
+      "size": 0.8,
+      "files": [
+        "core/unsavedWarning.js"
+      ],
+      "description": "Warn before leaving page with unsaved changes",
       "exports": {}
     },
     "save-toast": {
@@ -218,7 +227,7 @@
     "edit-mode-helpers": {
       "name": "edit-mode-helpers",
       "category": "core",
-      "size": 5.4,
+      "size": 7.500000000000001,
       "files": [
         "core/adminSystem.js",
         "core/adminContenteditable.js",
@@ -232,17 +241,49 @@
     "persist": {
       "name": "persist",
       "category": "core",
-      "size": 2.5,
+      "size": 2.4,
       "files": [
         "core/enablePersistentFormInputValues.js"
       ],
       "description": "Persist input/select/textarea values to the DOM with [persist] attribute",
       "exports": {}
     },
+    "snapshot": {
+      "name": "snapshot",
+      "category": "core",
+      "size": 7.5,
+      "files": [
+        "core/snapshot.js"
+      ],
+      "description": "Source of truth for page state - captures DOM snapshots for save and sync",
+      "exports": {
+        "captureSnapshot": [
+          "hyperclay"
+        ],
+        "captureForSave": [
+          "hyperclay"
+        ],
+        "captureBodyForSync": [
+          "hyperclay"
+        ],
+        "onSnapshot": [
+          "hyperclay"
+        ],
+        "onPrepareForSave": [
+          "hyperclay"
+        ],
+        "beforeSave": [
+          "hyperclay"
+        ],
+        "getPageContents": [
+          "hyperclay"
+        ]
+      }
+    },
     "option-visibility": {
       "name": "option-visibility",
       "category": "core",
-      "size": 5.9,
+      "size": 5.3,
       "files": [
         "core/optionVisibility.js"
       ],
@@ -274,7 +315,7 @@
     "event-attrs": {
       "name": "event-attrs",
       "category": "custom-attributes",
-      "size": 3.6000000000000005,
+      "size": 4.1000000000000005,
       "files": [
         "custom-attributes/events.js",
         "custom-attributes/onclickaway.js",
@@ -288,7 +329,7 @@
     "ajax-elements": {
       "name": "ajax-elements",
       "category": "custom-attributes",
-      "size": 2.8,
+      "size": 2.6,
       "files": [
         "custom-attributes/ajaxElements.js"
       ],
@@ -298,7 +339,7 @@
     "sortable": {
       "name": "sortable",
       "category": "custom-attributes",
-      "size": 2.8,
+      "size": 3.4,
       "files": [
         "custom-attributes/sortable.js"
       ],
@@ -308,7 +349,7 @@
     "dom-helpers": {
       "name": "dom-helpers",
       "category": "custom-attributes",
-      "size": 5.7,
+      "size": 6.2,
       "files": [
         "custom-attributes/domHelpers.js"
       ],
@@ -330,7 +371,7 @@
     "onaftersave": {
       "name": "onaftersave",
       "category": "custom-attributes",
-      "size": 1.2,
+      "size": 1,
       "files": [
         "custom-attributes/onaftersave.js"
       ],
@@ -340,7 +381,7 @@
     "dialogs": {
       "name": "dialogs",
       "category": "ui",
-      "size": 8.4,
+      "size": 7.7,
       "files": [
         "ui/prompts.js"
       ],
@@ -359,6 +400,7 @@
           "hyperclay"
         ],
         "snippet": [
+          "window",
           "hyperclay"
         ]
       }
@@ -396,7 +438,7 @@
     "the-modal": {
       "name": "the-modal",
       "category": "ui",
-      "size": 19.8,
+      "size": 21.8,
       "files": [
         "ui/theModal.js"
       ],
@@ -481,6 +523,21 @@
         ]
       }
     },
+    "cache-bust": {
+      "name": "cache-bust",
+      "category": "utilities",
+      "size": 0.6,
+      "files": [
+        "utilities/cacheBust.js"
+      ],
+      "description": "Cache-bust href/src attributes",
+      "exports": {
+        "cacheBust": [
+          "window",
+          "hyperclay"
+        ]
+      }
+    },
     "dom-ready": {
       "name": "dom-ready",
       "category": "dom-utilities",
@@ -512,7 +569,7 @@
     "all-js": {
       "name": "all-js",
       "category": "dom-utilities",
-      "size": 14,
+      "size": 14.4,
       "files": [
         "dom-utilities/All.js"
       ],
@@ -527,12 +584,16 @@
     "style-injection": {
       "name": "style-injection",
       "category": "dom-utilities",
-      "size": 1.1,
+      "size": 1.9,
       "files": [
         "dom-utilities/insertStyleTag.js"
       ],
       "description": "Dynamic stylesheet injection",
       "exports": {
+        "insertStyles": [
+          "window",
+          "hyperclay"
+        ],
         "insertStyleTag": [
           "window",
           "hyperclay"
@@ -557,7 +618,7 @@
     "idiomorph": {
       "name": "idiomorph",
       "category": "vendor",
-      "size": 8.2,
+      "size": 8.3,
       "files": [
         "vendor/idiomorph.min.js"
       ],
@@ -629,7 +690,7 @@
     "send-message": {
       "name": "send-message",
       "category": "communication",
-      "size": 1.4,
+      "size": 1.3,
       "files": [
         "communication/sendMessage.js"
       ],
@@ -660,6 +721,20 @@
         ]
       }
     },
+    "live-sync": {
+      "name": "live-sync",
+      "category": "communication",
+      "size": 12,
+      "files": [
+        "communication/live-sync.js"
+      ],
+      "description": "Real-time DOM sync across browsers and with file system",
+      "exports": {
+        "liveSync": [
+          "hyperclay"
+        ]
+      }
+    },
     "export-to-window": {
       "name": "export-to-window",
       "category": "core",
@@ -675,9 +750,11 @@
     "save-core": "./core/savePageCore.js",
     "save-system": "./core/savePage.js",
     "autosave": "./core/autosave.js",
+    "unsaved-warning": "./core/unsavedWarning.js",
     "save-toast": "./core/saveToast.js",
     "edit-mode-helpers": "./core/adminSystem.js",
     "persist": "./core/enablePersistentFormInputValues.js",
+    "snapshot": "./core/snapshot.js",
     "option-visibility": "./core/optionVisibility.js",
     "edit-mode": "./core/editmodeSystem.js",
     "event-attrs": "./custom-attributes/events.js",
@@ -695,6 +772,7 @@
     "cookie": "./utilities/cookie.js",
     "throttle": "./utilities/throttle.js",
     "debounce": "./utilities/debounce.js",
+    "cache-bust": "./utilities/cacheBust.js",
     "dom-ready": "./dom-utilities/onDomReady.js",
     "window-load": "./dom-utilities/onLoad.js",
     "all-js": "./dom-utilities/All.js",
@@ -707,6 +785,7 @@
     "behavior-collector": "./communication/behaviorCollector.js",
     "send-message": "./communication/sendMessage.js",
     "file-upload": "./communication/uploadFile.js",
+    "live-sync": "./communication/live-sync.js",
     "export-to-window": "./core/exportToWindow.js"
   },
   "categories": {
@@ -717,9 +796,11 @@
         "save-core",
         "save-system",
         "autosave",
+        "unsaved-warning",
         "save-toast",
         "edit-mode-helpers",
         "persist",
+        "snapshot",
         "option-visibility",
         "edit-mode"
       ]
@@ -753,7 +834,8 @@
         "nearest",
         "cookie",
         "throttle",
-        "debounce"
+        "debounce",
+        "cache-bust"
       ]
     },
     "dom-utilities": {
@@ -780,7 +862,8 @@
       "description": "File handling and messaging",
       "modules": [
         "send-message",
-        "file-upload"
+        "file-upload",
+        "live-sync"
       ]
     },
     "vendor": {
@@ -827,9 +910,11 @@
         "save-core",
         "save-system",
         "autosave",
+        "unsaved-warning",
         "save-toast",
         "edit-mode-helpers",
         "persist",
+        "snapshot",
         "option-visibility",
         "edit-mode",
         "event-attrs",
@@ -847,6 +932,7 @@
         "cookie",
         "throttle",
         "debounce",
+        "cache-bust",
         "dom-ready",
         "window-load",
         "all-js",
@@ -859,6 +945,7 @@
         "behavior-collector",
         "send-message",
         "file-upload",
+        "live-sync",
         "export-to-window"
       ]
     }

package/{ui → src/ui}/prompts.js

@@ -3,7 +3,7 @@ import onDomReady from "../dom-utilities/onDomReady.js";
 import toast from "./toast.js";
 import copyToClipboard from "../string-utilities/copy-to-clipboard.js";
 
-const CLOSE_BUTTON_SVG = `<svg class="group" viewBox="0 0 134 134" fill="none" xmlns="http://www.w3.org/2000/svg"><path class="fill-[#1D2032] group-hover:fill-[#212543]" d="M132 132.5 1 1.5h131v131Z" /><path fill-rule="evenodd" clip-rule="evenodd" d="M0 0h3v1.5h1.5V3H6v1.5h1.5V6H9v1.5h1.5V9H12v1.5h1.5V12H15v1.5h1.5V15H18v1.5h1.5V18H21v1.5h1.5V21H24v1.5h1.5V24H27v1.5h1.5V27H30v1.5h1.5V30H33v1.5h1.5V33H36v1.5h1.5V36H39v1.5h1.5V39H42v1.5h1.5V42H45v1.5h1.5V45H48v1.5h1.5V48H51v1.5h1.5V51H54v1.5h1.5V54H57v1.5h1.5V57H60v1.5h1.5V60H63v1.5h1.5V63H66v1.5h1.5V66H69v1.5h1.5V69H72v1.5h1.5V72H75v1.5h1.5V75H78v1.5h1.5V78H81v1.5h1.5V81H84v1.5h1.5V84H87v1.5h1.5V87H90v1.5h1.5V90H93v1.5h1.5V93H96v1.5h1.5V96H99v1.5h1.5V99h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v3h-3V132H129v-1.5h-1.5V129H126v-1.5h-1.5V126H123v-1.5h-1.5V123H120v-1.5h-1.5V120H117v-1.5h-1.5V117H114v-1.5h-1.5V114H111v-1.5h-1.5V111H108v-1.5h-1.5V108H105v-1.5h-1.5V105H102v-1.5h-1.5V102H99v-1.5h-1.5V99H96v-1.5h-1.5V96H93v-1.5h-1.5V93H90v-1.5h-1.5V90H87v-1.5h-1.5V87H84v-1.5h-1.5V84H81v-1.5h-1.5V81H78v-1.5h-1.5V78H75v-1.5h-1.5V75H72v-1.5h-1.5V72H69v-1.5h-1.5V69H66v-1.5h-1.5V66H63v-1.5h-1.5V63H60v-1.5h-1.5V60H57v-1.5h-1.5V57H54v-1.5h-1.5V54H51v-1.5h-1.5V51H48v-1.5h-1.5V48H45v-1.5h-1.5V45H42v-1.5h-1.5V42H39v-1.5h-1.5V39H36v-1.5h-1.5V36H33v-1.5h-1.5V33H30v-1.5h-1.5V30H27v-1.5h-1.5V27H24v-1.5h-1.5V24H21v-1.5h-1.5V21H18v-1.5h-1.5V18H15v-1.5h-1.5V15H12v-1.5h-1.5V12H9v-1.5H7.5V9H6V7.5H4.5V6H3V4.5H1.5V3H0V0ZM108.8 22h5.2v5.1h-2.6v2.6H109v2.6h-2.6v2.6h-2.6v2.5h-2.6v5.2h2.6V45h2.6v2.6h2.6v2.6h2.5v2.6h2.6V58h-5.1v-2.6h-2.6V53h-2.6v-2.6h-2.6v-2.6h-2.5v-2.6h-5.2v2.6H91v2.6h-2.6v2.6h-2.6v2.5h-2.6V58H78v-5.1h2.6v-2.6H83v-2.6h2.6v-2.6h2.6v-2.5h2.6v-5.2h-2.6V35h-2.6v-2.6h-2.6v-2.6h-2.5v-2.6H78V22h5.2v2.6h2.5V27h2.6v2.6h2.6v2.6h2.5v2.6h5.2v-2.6h2.5v-2.6h2.6v-2.6h2.6v-2.5h2.5V22Z" fill="#fff"/></svg>`;
+const CLOSE_BUTTON_SVG = `<svg viewBox="0 0 134 134" fill="none" xmlns="http://www.w3.org/2000/svg"><path class="micromodal__close-bg" d="M132 132.5 1 1.5h131v131Z" /><path class="micromodal__close-x" fill-rule="evenodd" clip-rule="evenodd" d="M0 0h3v1.5h1.5V3H6v1.5h1.5V6H9v1.5h1.5V9H12v1.5h1.5V12H15v1.5h1.5V15H18v1.5h1.5V18H21v1.5h1.5V21H24v1.5h1.5V24H27v1.5h1.5V27H30v1.5h1.5V30H33v1.5h1.5V33H36v1.5h1.5V36H39v1.5h1.5V39H42v1.5h1.5V42H45v1.5h1.5V45H48v1.5h1.5V48H51v1.5h1.5V51H54v1.5h1.5V54H57v1.5h1.5V57H60v1.5h1.5V60H63v1.5h1.5V63H66v1.5h1.5V66H69v1.5h1.5V69H72v1.5h1.5V72H75v1.5h1.5V75H78v1.5h1.5V78H81v1.5h1.5V81H84v1.5h1.5V84H87v1.5h1.5V87H90v1.5h1.5V90H93v1.5h1.5V93H96v1.5h1.5V96H99v1.5h1.5V99h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v3h-3V132H129v-1.5h-1.5V129H126v-1.5h-1.5V126H123v-1.5h-1.5V123H120v-1.5h-1.5V120H117v-1.5h-1.5V117H114v-1.5h-1.5V114H111v-1.5h-1.5V111H108v-1.5h-1.5V108H105v-1.5h-1.5V105H102v-1.5h-1.5V102H99v-1.5h-1.5V99H96v-1.5h-1.5V96H93v-1.5h-1.5V93H90v-1.5h-1.5V90H87v-1.5h-1.5V87H84v-1.5h-1.5V84H81v-1.5h-1.5V81H78v-1.5h-1.5V78H75v-1.5h-1.5V75H72v-1.5h-1.5V72H69v-1.5h-1.5V69H66v-1.5h-1.5V66H63v-1.5h-1.5V63H60v-1.5h-1.5V60H57v-1.5h-1.5V57H54v-1.5h-1.5V54H51v-1.5h-1.5V51H48v-1.5h-1.5V48H45v-1.5h-1.5V45H42v-1.5h-1.5V42H39v-1.5h-1.5V39H36v-1.5h-1.5V36H33v-1.5h-1.5V33H30v-1.5h-1.5V30H27v-1.5h-1.5V27H24v-1.5h-1.5V24H21v-1.5h-1.5V21H18v-1.5h-1.5V18H15v-1.5h-1.5V15H12v-1.5h-1.5V12H9v-1.5H7.5V9H6V7.5H4.5V6H3V4.5H1.5V3H0V0ZM108.8 22h5.2v5.1h-2.6v2.6H109v2.6h-2.6v2.6h-2.6v2.5h-2.6v5.2h2.6V45h2.6v2.6h2.6v2.6h2.5v2.6h2.6V58h-5.1v-2.6h-2.6V53h-2.6v-2.6h-2.6v-2.6h-2.5v-2.6h-5.2v2.6H91v2.6h-2.6v2.6h-2.6v2.5h-2.6V58H78v-5.1h2.6v-2.6H83v-2.6h2.6v-2.6h2.6v-2.5h2.6v-5.2h-2.6V35h-2.6v-2.6h-2.6v-2.6h-2.5v-2.6H78V22h5.2v2.6h2.5V27h2.6v2.6h2.6v2.6h2.5v2.6h5.2v-2.6h2.5v-2.6h2.6v-2.6h2.6v-2.5h2.5V22Z" /></svg>`;
 const CONFIRM_BUTTON_SVG = `<div style="width: 28px;"><svg viewBox="0 0 60 33" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M34.5 0.75H43.5V5.25H49V9.75H54.5V14.25H60V18.75H54.5V23.25H49V27.75H43.5V32.25H34.5V27.75H40V23.25H45.5V18.75H0V14.25H45.5V9.75H40V5.25H34.5V0.75Z" fill="white"/></svg></div>`;
 
 function createModal(promptText, yesCallback, extraContent = "", includeInput = false, defaultValue = "") {
@@ -70,11 +70,11 @@ export function consent(promptText, yesCallback, extraContent = "") {
  */
 export function tell(promptText, ...content) {
   const contentHtml = content.length > 0
-    ? content.map(c => `<div class="text-[16px] sm:text-[18px] font-normal">${c}</div>`).join("")
+    ? content.map(c => `<div class="micromodal__tell-content">${c}</div>`).join("")
     : "";
 
-  themodal.html = `<div class="max-w-[440px] space-y-5 mb-7">
-    <div class="text-[20px] sm:text-[22px] font-bold">${promptText}</div>
+  themodal.html = `<div class="micromodal__tell">
+    <div class="micromodal__tell-title">${promptText}</div>
     ${contentHtml}
   </div>`;
   themodal.closeHtml = CLOSE_BUTTON_SVG;
@@ -98,27 +98,22 @@ export function tell(promptText, ...content) {
 
 /**
  * Display a modal with a code snippet and copy functionality
- * Following the existing modal pattern from prompts.js
+ * @param {string} title - The modal heading
+ * @param {string} content - The code to display
+ * @param {string} extraContent - Optional warning/info text below the copy button
  */
-export function snippet(title, content, options = {}) {
-  const {
-    extraContent = 'Save this, it won\'t be shown again. Expires in 1 year.'
-  } = options;
+export function snippet(title, content, extraContent = '') {
 
   // Create the modal content with copy button
   const modalContent = `
-    <div class="bg-[#292E54] p-4 mb-[14px] max-w-[420px]">
-      <div class="overflow-x-auto">
-        <pre class="text-white font-mono text-sm whitespace-nowrap">${content}</pre>
-      </div>
+    <div class="snippet-code-block">
+      <pre>${content}</pre>
     </div>
 
-    <button type="button" class="custom-button group font-fixedsys text-center cursor-pointer border-[3px] border-t-[#474C65] border-r-[#131725] border-b-[#131725] border-l-[#474C65] bg-[#1D1F2F] hover:bg-[#232639] active:border-b-[#474C65] active:border-l-[#131725] active:border-t-[#131725] active:border-r-[#474C65] text-[23px] p-[2px_16px_4px] w-full mb-4 copy-snippet-btn">
-      <span class="whitespace-nowrap select-none inline-block group-active:translate-x-[1.5px] group-active:translate-y-[1.5px]">copy</span>
-    </button>
+    <button type="button" class="micromodal__secondary-btn copy-snippet-btn" style="margin-bottom: 14px;">copy</button>
 
     ${extraContent ? `
-      <div class="p-3 border-2 border-[#989742] bg-[#1E1E11] text-sm text-[#FBF7B7] max-w-[420px]">
+      <div class="snippet-warning">
         ${extraContent}
       </div>
     ` : ''}
@@ -131,7 +126,7 @@ export function snippet(title, content, options = {}) {
   </div>`;
 
   themodal.closeHtml = CLOSE_BUTTON_SVG;
-  themodal.yes = CONFIRM_BUTTON_SVG;
+  themodal.yes = '';
 
   const promise = new Promise((resolve) => {
     // Local copy function