@snowztech/ui-js 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Lucas Neves Pereira
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,61 @@
+# @snowztech/ui-js
+
+Optional vanilla bindings for [@snowztech/ui-css](https://www.npmjs.com/package/@snowztech/ui-css). Wires `data-sn-*` attributes so static HTML pages get interactive components without React.
+
+If you're using `@snowztech/ui` (React), you don't need this package.
+
+## CDN (auto-wires on load)
+
+```html
+<link rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/@snowztech/ui-css@0.2/dist/snowztech-ui.min.css">
+<script type="module"
+        src="https://cdn.jsdelivr.net/npm/@snowztech/ui-js@0.2/dist/snowztech-ui.esm.js"></script>
+
+<button class="sn-copy-btn" data-sn-copy="hello@snowz.ai" aria-label="copy email">
+  <svg class="sn-copy-btn__idle"   width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+    <rect x="9" y="9" width="11" height="11" rx="1.5"/><path d="M5 15V5a1 1 0 0 1 1-1h10"/>
+  </svg>
+  <svg class="sn-copy-btn__copied" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+    <path d="m4 12 5 5L20 6"/>
+  </svg>
+</button>
+
+<button class="sn-theme-toggle" data-sn-theme-toggle aria-label="toggle theme">
+  <span class="sn-theme-toggle__indicator"></span>
+</button>
+```
+
+## npm
+
+```bash
+npm i @snowztech/ui-js
+```
+
+```ts
+// Side-effect import: wires every [data-sn-*] on DOMContentLoaded.
+import "@snowztech/ui-js/auto";
+
+// Or explicit:
+import { init, toggleTheme } from "@snowztech/ui-js";
+init();
+```
+
+## Attributes
+
+| Attribute                       | Behavior                                                |
+|---------------------------------|---------------------------------------------------------|
+| `data-sn-copy="<text>"`         | Copies text to clipboard, sets `data-copied="true"` for 1.2s |
+| `data-sn-theme-toggle`          | Toggles `[data-theme="light"]` on `<html>`, persists to localStorage |
+| `data-sn-storage-key="<key>"`   | Override the localStorage key used by the theme toggle  |
+
+## API
+
+```ts
+init(root?: ParentNode): void
+bindCopyButton(el: HTMLElement): void
+bindThemeToggle(el: HTMLElement): void
+getTheme(key?: string): "light" | "dark"
+setTheme(theme: "light" | "dark", key?: string): void
+toggleTheme(key?: string): "light" | "dark"
+```

package/dist/index.cjs

@@ -0,0 +1,121 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  bindCopyButton: () => bindCopyButton,
+  bindThemeToggle: () => bindThemeToggle,
+  getTheme: () => getTheme,
+  init: () => init,
+  initCopyButtons: () => initCopyButtons,
+  initThemeToggles: () => initThemeToggles,
+  setTheme: () => setTheme,
+  toggleTheme: () => toggleTheme
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/copy-button.ts
+var RESET_MS = 1200;
+async function copyValue(value) {
+  try {
+    await navigator.clipboard.writeText(value);
+    return true;
+  } catch {
+    const ta = document.createElement("textarea");
+    ta.value = value;
+    ta.style.position = "fixed";
+    ta.style.opacity = "0";
+    document.body.appendChild(ta);
+    ta.select();
+    let ok = false;
+    try {
+      ok = document.execCommand("copy");
+    } catch {
+    }
+    document.body.removeChild(ta);
+    return ok;
+  }
+}
+function onClick() {
+  const value = this.getAttribute("data-sn-copy");
+  if (value === null) return;
+  void copyValue(value).then((ok) => {
+    if (!ok) return;
+    this.setAttribute("data-copied", "true");
+    window.setTimeout(() => this.removeAttribute("data-copied"), RESET_MS);
+  });
+}
+function bindCopyButton(el) {
+  if (el.dataset.snBound === "copy") return;
+  el.dataset.snBound = "copy";
+  el.addEventListener("click", onClick);
+}
+function initCopyButtons(root = document) {
+  root.querySelectorAll("[data-sn-copy]").forEach(bindCopyButton);
+}
+
+// src/theme-toggle.ts
+var DEFAULT_KEY = "theme";
+function getTheme(storageKey = DEFAULT_KEY) {
+  try {
+    const stored = localStorage.getItem(storageKey);
+    if (stored === "light" || stored === "dark") return stored;
+  } catch {
+  }
+  return document.documentElement.getAttribute("data-theme") === "light" ? "light" : "dark";
+}
+function setTheme(theme, storageKey = DEFAULT_KEY) {
+  if (theme === "light") document.documentElement.setAttribute("data-theme", "light");
+  else document.documentElement.removeAttribute("data-theme");
+  try {
+    localStorage.setItem(storageKey, theme);
+  } catch {
+  }
+}
+function toggleTheme(storageKey = DEFAULT_KEY) {
+  const next = getTheme(storageKey) === "dark" ? "light" : "dark";
+  setTheme(next, storageKey);
+  return next;
+}
+function onClick2() {
+  const key = this.getAttribute("data-sn-storage-key") || DEFAULT_KEY;
+  toggleTheme(key);
+}
+function bindThemeToggle(el) {
+  if (el.dataset.snBound === "theme") return;
+  el.dataset.snBound = "theme";
+  el.addEventListener("click", onClick2);
+}
+function initThemeToggles(root = document) {
+  root.querySelectorAll("[data-sn-theme-toggle]").forEach(bindThemeToggle);
+}
+
+// src/auto.ts
+function init(root = document) {
+  initCopyButtons(root);
+  initThemeToggles(root);
+}
+if (typeof document !== "undefined") {
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", () => init(), { once: true });
+  } else {
+    init();
+  }
+}

package/dist/index.js

@@ -0,0 +1,98 @@
+// src/copy-button.ts
+var RESET_MS = 1200;
+async function copyValue(value) {
+  try {
+    await navigator.clipboard.writeText(value);
+    return true;
+  } catch {
+    const ta = document.createElement("textarea");
+    ta.value = value;
+    ta.style.position = "fixed";
+    ta.style.opacity = "0";
+    document.body.appendChild(ta);
+    ta.select();
+    let ok = false;
+    try {
+      ok = document.execCommand("copy");
+    } catch {
+    }
+    document.body.removeChild(ta);
+    return ok;
+  }
+}
+function onClick() {
+  const value = this.getAttribute("data-sn-copy");
+  if (value === null) return;
+  void copyValue(value).then((ok) => {
+    if (!ok) return;
+    this.setAttribute("data-copied", "true");
+    window.setTimeout(() => this.removeAttribute("data-copied"), RESET_MS);
+  });
+}
+function bindCopyButton(el) {
+  if (el.dataset.snBound === "copy") return;
+  el.dataset.snBound = "copy";
+  el.addEventListener("click", onClick);
+}
+function initCopyButtons(root = document) {
+  root.querySelectorAll("[data-sn-copy]").forEach(bindCopyButton);
+}
+
+// src/theme-toggle.ts
+var DEFAULT_KEY = "theme";
+function getTheme(storageKey = DEFAULT_KEY) {
+  try {
+    const stored = localStorage.getItem(storageKey);
+    if (stored === "light" || stored === "dark") return stored;
+  } catch {
+  }
+  return document.documentElement.getAttribute("data-theme") === "light" ? "light" : "dark";
+}
+function setTheme(theme, storageKey = DEFAULT_KEY) {
+  if (theme === "light") document.documentElement.setAttribute("data-theme", "light");
+  else document.documentElement.removeAttribute("data-theme");
+  try {
+    localStorage.setItem(storageKey, theme);
+  } catch {
+  }
+}
+function toggleTheme(storageKey = DEFAULT_KEY) {
+  const next = getTheme(storageKey) === "dark" ? "light" : "dark";
+  setTheme(next, storageKey);
+  return next;
+}
+function onClick2() {
+  const key = this.getAttribute("data-sn-storage-key") || DEFAULT_KEY;
+  toggleTheme(key);
+}
+function bindThemeToggle(el) {
+  if (el.dataset.snBound === "theme") return;
+  el.dataset.snBound = "theme";
+  el.addEventListener("click", onClick2);
+}
+function initThemeToggles(root = document) {
+  root.querySelectorAll("[data-sn-theme-toggle]").forEach(bindThemeToggle);
+}
+
+// src/auto.ts
+function init(root = document) {
+  initCopyButtons(root);
+  initThemeToggles(root);
+}
+if (typeof document !== "undefined") {
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", () => init(), { once: true });
+  } else {
+    init();
+  }
+}
+export {
+  bindCopyButton,
+  bindThemeToggle,
+  getTheme,
+  init,
+  initCopyButtons,
+  initThemeToggles,
+  setTheme,
+  toggleTheme
+};

package/dist/snowztech-ui.esm.js

@@ -0,0 +1,91 @@
+// src/copy-button.ts
+var RESET_MS = 1200;
+async function copyValue(value) {
+  try {
+    await navigator.clipboard.writeText(value);
+    return true;
+  } catch {
+    const ta = document.createElement("textarea");
+    ta.value = value;
+    ta.style.position = "fixed";
+    ta.style.opacity = "0";
+    document.body.appendChild(ta);
+    ta.select();
+    let ok = false;
+    try {
+      ok = document.execCommand("copy");
+    } catch {
+    }
+    document.body.removeChild(ta);
+    return ok;
+  }
+}
+function onClick() {
+  const value = this.getAttribute("data-sn-copy");
+  if (value === null) return;
+  void copyValue(value).then((ok) => {
+    if (!ok) return;
+    this.setAttribute("data-copied", "true");
+    window.setTimeout(() => this.removeAttribute("data-copied"), RESET_MS);
+  });
+}
+function bindCopyButton(el) {
+  if (el.dataset.snBound === "copy") return;
+  el.dataset.snBound = "copy";
+  el.addEventListener("click", onClick);
+}
+function initCopyButtons(root = document) {
+  root.querySelectorAll("[data-sn-copy]").forEach(bindCopyButton);
+}
+
+// src/theme-toggle.ts
+var DEFAULT_KEY = "theme";
+function getTheme(storageKey = DEFAULT_KEY) {
+  try {
+    const stored = localStorage.getItem(storageKey);
+    if (stored === "light" || stored === "dark") return stored;
+  } catch {
+  }
+  return document.documentElement.getAttribute("data-theme") === "light" ? "light" : "dark";
+}
+function setTheme(theme, storageKey = DEFAULT_KEY) {
+  if (theme === "light") document.documentElement.setAttribute("data-theme", "light");
+  else document.documentElement.removeAttribute("data-theme");
+  try {
+    localStorage.setItem(storageKey, theme);
+  } catch {
+  }
+}
+function toggleTheme(storageKey = DEFAULT_KEY) {
+  const next = getTheme(storageKey) === "dark" ? "light" : "dark";
+  setTheme(next, storageKey);
+  return next;
+}
+function onClick2() {
+  const key = this.getAttribute("data-sn-storage-key") || DEFAULT_KEY;
+  toggleTheme(key);
+}
+function bindThemeToggle(el) {
+  if (el.dataset.snBound === "theme") return;
+  el.dataset.snBound = "theme";
+  el.addEventListener("click", onClick2);
+}
+function initThemeToggles(root = document) {
+  root.querySelectorAll("[data-sn-theme-toggle]").forEach(bindThemeToggle);
+}
+
+// src/auto.ts
+function init(root = document) {
+  initCopyButtons(root);
+  initThemeToggles(root);
+}
+if (typeof document !== "undefined") {
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", () => init(), { once: true });
+  } else {
+    init();
+  }
+}
+export {
+  init
+};

package/dist/snowztech-ui.iife.js

@@ -0,0 +1,116 @@
+"use strict";
+var SnowztechUI = (() => {
+  var __defProp = Object.defineProperty;
+  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+  var __getOwnPropNames = Object.getOwnPropertyNames;
+  var __hasOwnProp = Object.prototype.hasOwnProperty;
+  var __export = (target, all) => {
+    for (var name in all)
+      __defProp(target, name, { get: all[name], enumerable: true });
+  };
+  var __copyProps = (to, from, except, desc) => {
+    if (from && typeof from === "object" || typeof from === "function") {
+      for (let key of __getOwnPropNames(from))
+        if (!__hasOwnProp.call(to, key) && key !== except)
+          __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+    }
+    return to;
+  };
+  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+  // src/auto.ts
+  var auto_exports = {};
+  __export(auto_exports, {
+    init: () => init
+  });
+
+  // src/copy-button.ts
+  var RESET_MS = 1200;
+  async function copyValue(value) {
+    try {
+      await navigator.clipboard.writeText(value);
+      return true;
+    } catch {
+      const ta = document.createElement("textarea");
+      ta.value = value;
+      ta.style.position = "fixed";
+      ta.style.opacity = "0";
+      document.body.appendChild(ta);
+      ta.select();
+      let ok = false;
+      try {
+        ok = document.execCommand("copy");
+      } catch {
+      }
+      document.body.removeChild(ta);
+      return ok;
+    }
+  }
+  function onClick() {
+    const value = this.getAttribute("data-sn-copy");
+    if (value === null) return;
+    void copyValue(value).then((ok) => {
+      if (!ok) return;
+      this.setAttribute("data-copied", "true");
+      window.setTimeout(() => this.removeAttribute("data-copied"), RESET_MS);
+    });
+  }
+  function bindCopyButton(el) {
+    if (el.dataset.snBound === "copy") return;
+    el.dataset.snBound = "copy";
+    el.addEventListener("click", onClick);
+  }
+  function initCopyButtons(root = document) {
+    root.querySelectorAll("[data-sn-copy]").forEach(bindCopyButton);
+  }
+
+  // src/theme-toggle.ts
+  var DEFAULT_KEY = "theme";
+  function getTheme(storageKey = DEFAULT_KEY) {
+    try {
+      const stored = localStorage.getItem(storageKey);
+      if (stored === "light" || stored === "dark") return stored;
+    } catch {
+    }
+    return document.documentElement.getAttribute("data-theme") === "light" ? "light" : "dark";
+  }
+  function setTheme(theme, storageKey = DEFAULT_KEY) {
+    if (theme === "light") document.documentElement.setAttribute("data-theme", "light");
+    else document.documentElement.removeAttribute("data-theme");
+    try {
+      localStorage.setItem(storageKey, theme);
+    } catch {
+    }
+  }
+  function toggleTheme(storageKey = DEFAULT_KEY) {
+    const next = getTheme(storageKey) === "dark" ? "light" : "dark";
+    setTheme(next, storageKey);
+    return next;
+  }
+  function onClick2() {
+    const key = this.getAttribute("data-sn-storage-key") || DEFAULT_KEY;
+    toggleTheme(key);
+  }
+  function bindThemeToggle(el) {
+    if (el.dataset.snBound === "theme") return;
+    el.dataset.snBound = "theme";
+    el.addEventListener("click", onClick2);
+  }
+  function initThemeToggles(root = document) {
+    root.querySelectorAll("[data-sn-theme-toggle]").forEach(bindThemeToggle);
+  }
+
+  // src/auto.ts
+  function init(root = document) {
+    initCopyButtons(root);
+    initThemeToggles(root);
+  }
+  if (typeof document !== "undefined") {
+    if (document.readyState === "loading") {
+      document.addEventListener("DOMContentLoaded", () => init(), { once: true });
+    } else {
+      init();
+    }
+  }
+  return __toCommonJS(auto_exports);
+})();

package/dist/snowztech-ui.iife.min.js

@@ -0,0 +1 @@
+"use strict";var SnowztechUI=(()=>{var r=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var s=Object.prototype.hasOwnProperty;var h=(t,e)=>{for(var n in e)r(t,n,{get:e[n],enumerable:!0})},p=(t,e,n,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of l(e))!s.call(t,o)&&o!==n&&r(t,o,{get:()=>e[o],enumerable:!(a=m(e,o))||a.enumerable});return t};var f=t=>p(r({},"__esModule",{value:!0}),t);var L={};h(L,{init:()=>d});async function g(t){try{return await navigator.clipboard.writeText(t),!0}catch{let e=document.createElement("textarea");e.value=t,e.style.position="fixed",e.style.opacity="0",document.body.appendChild(e),e.select();let n=!1;try{n=document.execCommand("copy")}catch{}return document.body.removeChild(e),n}}function T(){let t=this.getAttribute("data-sn-copy");t!==null&&g(t).then(e=>{e&&(this.setAttribute("data-copied","true"),window.setTimeout(()=>this.removeAttribute("data-copied"),1200))})}function y(t){t.dataset.snBound!=="copy"&&(t.dataset.snBound="copy",t.addEventListener("click",T))}function c(t=document){t.querySelectorAll("[data-sn-copy]").forEach(y)}var i="theme";function E(t=i){try{let e=localStorage.getItem(t);if(e==="light"||e==="dark")return e}catch{}return document.documentElement.getAttribute("data-theme")==="light"?"light":"dark"}function v(t,e=i){t==="light"?document.documentElement.setAttribute("data-theme","light"):document.documentElement.removeAttribute("data-theme");try{localStorage.setItem(e,t)}catch{}}function x(t=i){let e=E(t)==="dark"?"light":"dark";return v(e,t),e}function b(){let t=this.getAttribute("data-sn-storage-key")||i;x(t)}function k(t){t.dataset.snBound!=="theme"&&(t.dataset.snBound="theme",t.addEventListener("click",b))}function u(t=document){t.querySelectorAll("[data-sn-theme-toggle]").forEach(k)}function d(t=document){c(t),u(t)}typeof document<"u"&&(document.readyState==="loading"?document.addEventListener("DOMContentLoaded",()=>d(),{once:!0}):d());return f(L);})();

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@snowztech/ui-js",
+  "version": "0.2.0",
+  "description": "Optional vanilla bindings for @snowztech/ui-css. Wires data-sn-* attributes for static HTML.",
+  "license": "MIT",
+  "author": {
+    "name": "Lucas Neves Pereira",
+    "email": "lnevespereira@proton.me",
+    "url": "https://github.com/lucasnevespereira"
+  },
+  "homepage": "https://github.com/snowztech/ui#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/snowztech/ui.git",
+    "directory": "packages/ui-js"
+  },
+  "bugs": {
+    "url": "https://github.com/snowztech/ui/issues"
+  },
+  "keywords": [
+    "snowztech",
+    "ui",
+    "vanilla",
+    "design-system",
+    "progressive-enhancement"
+  ],
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./src/index.ts",
+  "files": [
+    "dist",
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./auto": "./dist/snowztech-ui.esm.js",
+    "./iife": "./dist/snowztech-ui.iife.js",
+    "./iife/min": "./dist/snowztech-ui.iife.min.js",
+    "./package.json": "./package.json"
+  },
+  "devDependencies": {
+    "esbuild": "^0.27.7",
+    "typescript": "^5.6.3"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "node build.mjs",
+    "dev": "node build.mjs --watch",
+    "typecheck": "tsc --noEmit"
+  }
+}

package/src/auto.ts

@@ -0,0 +1,18 @@
+// Auto-wires every [data-sn-*] element on the page once the DOM is ready.
+// Re-import safe (idempotent: each binder marks its element with data-sn-bound).
+
+import { initCopyButtons } from "./copy-button";
+import { initThemeToggles } from "./theme-toggle";
+
+export function init(root: ParentNode = document): void {
+  initCopyButtons(root);
+  initThemeToggles(root);
+}
+
+if (typeof document !== "undefined") {
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", () => init(), { once: true });
+  } else {
+    init();
+  }
+}

package/src/copy-button.ts

@@ -0,0 +1,44 @@
+// Wires every <button data-sn-copy="…"> on the page.
+// On click: copies the attr's value, flips data-copied="true" for ~1.2s.
+// CSS handles the visual swap (.sn-copy-btn[data-copied="true"]).
+
+const RESET_MS = 1200;
+
+async function copyValue(value: string): Promise<boolean> {
+  try {
+    await navigator.clipboard.writeText(value);
+    return true;
+  } catch {
+    // Fallback for non-secure contexts.
+    const ta = document.createElement("textarea");
+    ta.value = value;
+    ta.style.position = "fixed";
+    ta.style.opacity = "0";
+    document.body.appendChild(ta);
+    ta.select();
+    let ok = false;
+    try { ok = document.execCommand("copy"); } catch { /* ignore */ }
+    document.body.removeChild(ta);
+    return ok;
+  }
+}
+
+function onClick(this: HTMLElement) {
+  const value = this.getAttribute("data-sn-copy");
+  if (value === null) return;
+  void copyValue(value).then((ok) => {
+    if (!ok) return;
+    this.setAttribute("data-copied", "true");
+    window.setTimeout(() => this.removeAttribute("data-copied"), RESET_MS);
+  });
+}
+
+export function bindCopyButton(el: HTMLElement): void {
+  if (el.dataset.snBound === "copy") return;
+  el.dataset.snBound = "copy";
+  el.addEventListener("click", onClick);
+}
+
+export function initCopyButtons(root: ParentNode = document): void {
+  root.querySelectorAll<HTMLElement>("[data-sn-copy]").forEach(bindCopyButton);
+}

package/src/index.ts

@@ -0,0 +1,18 @@
+// ESM entry. Consumers call init() themselves.
+// Use ./auto for the side-effect "wire everything on load" entry.
+
+export {
+  bindCopyButton,
+  initCopyButtons,
+} from "./copy-button";
+
+export {
+  bindThemeToggle,
+  initThemeToggles,
+  getTheme,
+  setTheme,
+  toggleTheme,
+  type Theme,
+} from "./theme-toggle";
+
+export { init } from "./auto";

package/src/theme-toggle.ts

@@ -0,0 +1,41 @@
+// Wires every <button data-sn-theme-toggle> on the page.
+// Toggles [data-theme="light"] on <html>, persists to localStorage.
+
+export type Theme = "light" | "dark";
+
+const DEFAULT_KEY = "theme";
+
+export function getTheme(storageKey = DEFAULT_KEY): Theme {
+  try {
+    const stored = localStorage.getItem(storageKey) as Theme | null;
+    if (stored === "light" || stored === "dark") return stored;
+  } catch { /* ignore */ }
+  return document.documentElement.getAttribute("data-theme") === "light" ? "light" : "dark";
+}
+
+export function setTheme(theme: Theme, storageKey = DEFAULT_KEY): void {
+  if (theme === "light") document.documentElement.setAttribute("data-theme", "light");
+  else document.documentElement.removeAttribute("data-theme");
+  try { localStorage.setItem(storageKey, theme); } catch { /* ignore */ }
+}
+
+export function toggleTheme(storageKey = DEFAULT_KEY): Theme {
+  const next: Theme = getTheme(storageKey) === "dark" ? "light" : "dark";
+  setTheme(next, storageKey);
+  return next;
+}
+
+function onClick(this: HTMLElement) {
+  const key = this.getAttribute("data-sn-storage-key") || DEFAULT_KEY;
+  toggleTheme(key);
+}
+
+export function bindThemeToggle(el: HTMLElement): void {
+  if (el.dataset.snBound === "theme") return;
+  el.dataset.snBound = "theme";
+  el.addEventListener("click", onClick);
+}
+
+export function initThemeToggles(root: ParentNode = document): void {
+  root.querySelectorAll<HTMLElement>("[data-sn-theme-toggle]").forEach(bindThemeToggle);
+}