@kerkhoff-ict/solora 2.1.0 → 2.1.2

package/dist/index.css

@@ -1,22 +1,20 @@
 /* src/components/button.css */
-:root {
-  --color-primary: #0071e3;
-  --color-secondary: #f5f5f5;
-  --color-success: #28a745;
-  --color-warning: #ffc107;
-  --color-danger: #dc3545;
-  --color-text-light: #ffffff;
-  --color-text-dark: #000000;
-}
 .btn {
   font-weight: 600;
   border: none;
   border-radius: 9999px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  border-radius: 9999px;
   cursor: pointer;
   transition: background 0.2s, filter 0.2s;
 }
+.btn-rounded {
+  padding: 0 !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+}
 .btn-sm {
   padding: 0.1875rem 1rem;
   font-size: 0.9375rem;
@@ -115,7 +113,7 @@
 [class*="btn-["]:hover {
   filter: brightness(0.85);
 }
-@media (prefers-color-scheme: dark) {
+:root.dark {
   .btn-primary {
     background: #0558be;
     color: var(--color-text-light, #fff);
@@ -367,7 +365,7 @@
 .codeblock pre::-webkit-scrollbar-track {
   background: transparent;
 }
-@media (prefers-color-scheme: dark) {
+:root.dark {
   .codeblock {
     background: #1e1e2f88;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
@@ -476,7 +474,7 @@
   margin-top: 0.5rem;
   overflow: hidden;
   overflow-y: auto;
-  background: rgba(255, 255, 255, 0);
+  background: transparent;
   border: 1px solid rgba(255, 255, 255, 0.3);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
@@ -538,44 +536,227 @@
   color: rgba(0, 0, 0, 0.6);
   cursor: default;
 }
-@media (prefers-color-scheme: dark) {
-  .dropdown-btn {
-    background: #1c1c1e;
-    color: #f0f0f0;
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
-  }
-  .dropdown-btn:hover {
-    background: rgba(255, 255, 255, 0.05);
-  }
-  .dropdown-content {
-    background: rgba(28, 28, 30, 0.8);
-    backdrop-filter: blur(12px);
-    -webkit-backdrop-filter: blur(12px);
-    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
-  }
-  .dropdown-item {
-    color: #f0f0f0;
-  }
-  .dropdown-item:hover {
-    background: rgba(255, 255, 255, 0.08);
-  }
-  .dropdown-item.active {
-    background: rgba(255, 255, 255, 0.12);
-  }
-  .dropdown-divider {
-    background: rgba(255, 255, 255, 0.2);
-  }
-  .dropdown-item[aria-disabled=true],
-  .dropdown-item.placeholder {
-    color: rgba(255, 255, 255, 0.4);
-  }
-  .dropdown-label {
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .dropdown-content::-webkit-scrollbar-thumb {
-    background: rgba(255, 255, 255, 0.2);
-  }
+:root.dark .dropdown-btn {
+  background: #1c1c1e;
+  color: #f0f0f0;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
+}
+:root.dark .dropdown-btn:hover {
+  background: rgba(255, 255, 255, 0.05);
+}
+:root.dark .dropdown-content {
+  background: transparent;
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
+}
+:root.dark .dropdown-item {
+  color: #f0f0f0;
+}
+:root.dark .dropdown-item:hover {
+  background: rgba(255, 255, 255, 0.08);
+}
+:root.dark .dropdown-item.active {
+  background: rgba(255, 255, 255, 0.12);
+}
+:root.dark .dropdown-divider {
+  background: rgba(255, 255, 255, 0.2);
+}
+:root.dark .dropdown-item[aria-disabled=true],
+:root.dark .dropdown-item.placeholder {
+  color: rgba(255, 255, 255, 0.4);
+}
+:root.dark .dropdown-label {
+  color: rgba(255, 255, 255, 0.6);
+}
+:root.dark .dropdown-content::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.2);
 }
 
+/* src/components/input.css */
+.sol-input-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    Helvetica,
+    Arial,
+    sans-serif;
+  width: 100%;
+}
+.sol-label {
+  font-size: 0.85rem;
+  font-weight: 500;
+  color: var(--color-text-dark, #000);
+  opacity: 0.6;
+  margin-left: 0.2rem;
+}
+.sol-input {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 100%;
+  padding: 0.3rem 0.4rem;
+  font-size: 0.95rem;
+  border-radius: 12px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  background: var(--color-bg, #fefefe);
+  color: var(--color-text-dark, #000);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 8px rgba(0, 0, 0, 0.05);
+  transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
+  outline: none;
+}
+.sol-input::placeholder {
+  color: var(--color-text-dark, #000);
+  opacity: 0.3;
+}
+.sol-input:hover {
+  border-color: rgba(0, 0, 0, 0.2);
+  background: var(--color-bg-hover, #ffffff);
+}
+.sol-input:focus {
+  border-color: var(--color-primary, #0071e3);
+  box-shadow: 0 0 0 4px var(--color-focus-glow, rgba(0, 113, 227, 0.15)), 0 2px 8px rgba(0, 0, 0, 0.05);
+  background: var(--color-bg-hover, #ffffff);
+}
+.sol-input:disabled {
+  background: var(--color-secondary, #f5f5f5);
+  color: var(--color-text-dark, #000);
+  opacity: 0.5;
+  cursor: not-allowed;
+  box-shadow: none;
+}
+.sol-input-error {
+  border-color: var(--color-danger, #dc3545) !important;
+}
+.sol-input-error:focus {
+  box-shadow: 0 0 0 4px var(--color-error-glow, rgba(220, 53, 69, 0.15)) !important;
+}
+:root.dark .sol-label {
+  color: var(--color-text-light, #fff);
+  opacity: 0.6;
+}
+:root.dark .sol-input {
+  background: rgba(28, 28, 30, 0.8);
+  color: var(--color-text-light, #fff);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05), 0 4px 12px rgba(0, 0, 0, 0.4);
+}
+:root.dark .sol-input::placeholder {
+  color: var(--color-text-light, #fff);
+  opacity: 0.3;
+}
+:root.dark .sol-input:hover {
+  background: rgba(44, 44, 46, 0.9);
+  border-color: rgba(255, 255, 255, 0.25);
+}
+:root.dark .sol-input:focus {
+  background: rgba(44, 44, 46, 1);
+  border-color: var(--color-primary-dark, #0a84ff);
+  box-shadow: 0 0 0 4px var(--color-focus-glow-dark, rgba(10, 132, 255, 0.2)), 0 4px 12px rgba(0, 0, 0, 0.5);
+}
+:root.dark .sol-input-error {
+  border-color: var(--color-danger, #ff453a) !important;
+}
+
+/* src/components/contextMenu.css */
+.sol-context-menu {
+  position: fixed;
+  display: none;
+  z-index: 9999;
+  min-width: 180px;
+  background: transparent;
+  backdrop-filter: blur(12px) saturate(180%);
+  -webkit-backdrop-filter: blur(12px) saturate(180%);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 12px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
+  padding: 5px;
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    Helvetica,
+    Arial,
+    sans-serif;
+  user-select: none;
+  opacity: 0;
+  transform: translateY(-10px) scale(0.95);
+  transition: opacity 0.15s ease, transform 0.15s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+.sol-context-menu.visible {
+  display: block;
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+.sol-menu-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.2rem 0.3rem;
+  font-size: 0.85rem;
+  color: var(--color-text-dark, #000);
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background 0.1s, color 0.1s;
+}
+.sol-menu-item:hover {
+  background: var(--color-primary, #007aff);
+  color: #fff;
+}
+.sol-menu-shortcut {
+  font-size: 0.75rem;
+  opacity: 0.5;
+  margin-left: 20px;
+}
+.sol-menu-item:hover .sol-menu-shortcut {
+  color: #fff;
+  opacity: 0.8;
+}
+.sol-menu-divider {
+  height: 1px;
+  background: rgba(0, 0, 0, 0.08);
+  margin: 4px 0;
+}
+:root.dark .sol-context-menu {
+  background: rgba(28, 28, 30, 0.8);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+}
+:root.dark .sol-menu-item {
+  color: var(--color-text-light, #f0f0f0);
+}
+:root.dark .sol-menu-divider {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+/* src/components/darkToggle.css */
+
 /* src/index.css */
+:root {
+  --font-body:
+    -apple-system,
+    BlinkMacSystemFont,
+    "SF Pro Text",
+    "Helvetica Neue",
+    Arial,
+    sans-serif;
+  --font-display:
+    "SF Pro Display",
+    -apple-system,
+    BlinkMacSystemFont,
+    "Helvetica Neue",
+    sans-serif;
+  --font-mono:
+    "SF Mono",
+    "Menlo",
+    "Consolas",
+    monospace;
+}

package/dist/index.js

@@ -1917,16 +1917,362 @@ function initDropdowns() {
   });
 }
 
+// src/components/contextMenu.js
+function initContextMenu() {
+  let menu = document.querySelector(".sol-context-menu");
+  if (!menu) {
+    menu = document.createElement("div");
+    menu.className = "sol-context-menu";
+    document.body.appendChild(menu);
+  }
+  let contextTarget = null;
+  const showMenu = (e) => {
+    e.preventDefault();
+    contextTarget = e.target;
+    const selection = window.getSelection().toString().trim();
+    const link = e.target.closest("a");
+    const img = e.target.closest("img");
+    const input = e.target.closest("input, textarea, [contenteditable]");
+    const isEditable = input || e.target.isContentEditable;
+    const isTextInput = input && (input.type === "text" || input.type === "search" || input.type === "email" || input.type === "password" || input.tagName === "TEXTAREA" || input.isContentEditable);
+    let menuHtml = "";
+    if (selection.length > 0) {
+      menuHtml += `
+                <div class="sol-menu-label">Selectie</div>
+                <div class="sol-menu-item" data-action="copy">
+                    Kopieer <span class="sol-menu-shortcut">\u2318C</span>
+                </div>
+                ${isEditable ? `
+                <div class="sol-menu-item" data-action="cut">
+                    Knippen <span class="sol-menu-shortcut">\u2318X</span>
+                </div>` : ""}
+                <div class="sol-menu-item" data-action="search-google">
+                    Zoek op Google: <em>"${selection.slice(0, 20)}${selection.length > 20 ? "\u2026" : ""}"</em>
+                </div>
+                <div class="sol-menu-item" data-action="search-wiki">
+                    Zoek op Wikipedia\u2026
+                </div>
+                <div class="sol-menu-item" data-action="translate">
+                    Vertaal selectie\u2026
+                </div>
+                <div class="sol-menu-divider"></div>
+            `;
+    }
+    if (isTextInput) {
+      menuHtml += `
+                <div class="sol-menu-label">Tekstveld</div>
+                ${selection.length > 0 ? `
+                <div class="sol-menu-item" data-action="cut">
+                    Knippen <span class="sol-menu-shortcut">\u2318X</span>
+                </div>
+                <div class="sol-menu-item" data-action="copy">
+                    Kopieer <span class="sol-menu-shortcut">\u2318C</span>
+                </div>` : ""}
+                <div class="sol-menu-item" data-action="paste">
+                    Plakken <span class="sol-menu-shortcut">\u2318V</span>
+                </div>
+                <div class="sol-menu-item" data-action="select-all">
+                    Alles selecteren <span class="sol-menu-shortcut">\u2318A</span>
+                </div>
+                <div class="sol-menu-item" data-action="clear-field">
+                    Veld wissen
+                </div>
+                <div class="sol-menu-divider"></div>
+            `;
+    }
+    if (img) {
+      menuHtml += `
+                <div class="sol-menu-label">Afbeelding</div>
+                <div class="sol-menu-item" data-action="open-img" data-url="${img.src}">
+                    Afbeelding openen in nieuw tabblad
+                </div>
+                <div class="sol-menu-item" data-action="copy-img-url" data-url="${img.src}">
+                    Kopieer afbeeldings-URL
+                </div>
+                <div class="sol-menu-item" data-action="download-img" data-url="${img.src}" data-filename="${img.alt || "afbeelding"}">
+                    Afbeelding opslaan\u2026
+                </div>
+                ${img.alt ? `
+                <div class="sol-menu-item" data-action="copy-alt" data-text="${img.alt}">
+                    Kopieer alt-tekst
+                </div>` : ""}
+                <div class="sol-menu-divider"></div>
+            `;
+    }
+    if (link) {
+      menuHtml += `
+                <div class="sol-menu-label">Link</div>
+                <div class="sol-menu-item" data-action="open-tab" data-url="${link.href}">
+                    Open in nieuw tabblad
+                </div>
+                <div class="sol-menu-item" data-action="open-window" data-url="${link.href}">
+                    Open in nieuw venster
+                </div>
+                <div class="sol-menu-item" data-action="copy-link" data-url="${link.href}">
+                    Kopieer link-adres
+                </div>
+                <div class="sol-menu-divider"></div>
+            `;
+    }
+    menuHtml += `
+            <div class="sol-menu-label">Navigatie</div>
+            <div class="sol-menu-item${!history.length || history.state === null ? " disabled" : ""}" data-action="go-back">
+                \u2190 Vorige pagina
+            </div>
+            <div class="sol-menu-item" data-action="go-forward">
+                \u2192 Volgende pagina
+            </div>
+            <div class="sol-menu-item" data-action="reload">
+                Vernieuwen <span class="sol-menu-shortcut">\u2318R</span>
+            </div>
+            <div class="sol-menu-item" data-action="hard-reload">
+                Geforceerd vernieuwen <span class="sol-menu-shortcut">\u21E7\u2318R</span>
+            </div>
+            <div class="sol-menu-divider"></div>
+        `;
+    menuHtml += `
+            <div class="sol-menu-label">Pagina</div>
+            <div class="sol-menu-item" data-action="copy-page-url">
+                Kopieer pagina-URL
+            </div>
+            <div class="sol-menu-item" data-action="view-source">
+                Bekijk paginabron <span class="sol-menu-shortcut">\u2318U</span>
+            </div>
+            <div class="sol-menu-item" data-action="print">
+                Printen <span class="sol-menu-shortcut">\u2318P</span>
+            </div>
+            <div class="sol-menu-item" data-action="save-page">
+                Pagina opslaan <span class="sol-menu-shortcut">\u2318S</span>
+            </div>
+            <div class="sol-menu-item" data-action="scroll-top">
+                Naar boven scrollen
+            </div>
+            <div class="sol-menu-divider"></div>
+        `;
+    menuHtml += `
+            <div class="sol-menu-label">Ontwikkelaar</div>
+            <div class="sol-menu-item" data-action="inspect">
+                Inspecteer element <span class="sol-menu-shortcut">\u2325\u2318I</span>
+            </div>
+            <div class="sol-menu-item" data-action="copy-selector">
+                Kopieer CSS-selector
+            </div>
+            <div class="sol-menu-item" data-action="log-element">
+                Log element in console
+            </div>
+        `;
+    menu.innerHTML = menuHtml;
+    menu.style.display = "block";
+    let posX = e.clientX;
+    let posY = e.clientY;
+    const menuWidth = menu.offsetWidth;
+    const menuHeight = menu.offsetHeight;
+    posX = Math.max(0, posX);
+    posY = Math.max(0, posY);
+    menu.style.left = `${posX}px`;
+    menu.style.top = `${posY}px`;
+    requestAnimationFrame(() => menu.classList.add("visible"));
+  };
+  const hideMenu = () => {
+    menu.classList.remove("visible");
+    setTimeout(() => {
+      if (!menu.classList.contains("visible")) menu.style.display = "none";
+    }, 150);
+  };
+  const getCssSelector = (el) => {
+    if (!el) return "";
+    const parts = [];
+    while (el && el.nodeType === Node.ELEMENT_NODE) {
+      let selector = el.nodeName.toLowerCase();
+      if (el.id) {
+        selector += `#${el.id}`;
+        parts.unshift(selector);
+        break;
+      }
+      if (el.className) {
+        selector += "." + [...el.classList].join(".");
+      }
+      const siblings = el.parentNode ? [...el.parentNode.children].filter((s) => s.nodeName === el.nodeName) : [];
+      if (siblings.length > 1) {
+        selector += `:nth-of-type(${siblings.indexOf(el) + 1})`;
+      }
+      parts.unshift(selector);
+      el = el.parentNode;
+    }
+    return parts.join(" > ");
+  };
+  document.addEventListener("contextmenu", showMenu);
+  document.addEventListener("click", hideMenu);
+  window.addEventListener("scroll", hideMenu);
+  document.addEventListener("keydown", (e) => {
+    if (e.key === "Escape") hideMenu();
+  });
+  menu.addEventListener("click", (e) => {
+    const item = e.target.closest(".sol-menu-item");
+    if (!item || item.classList.contains("disabled")) return;
+    const action = item.dataset.action;
+    const url = item.dataset.url;
+    const text = item.dataset.text;
+    const filename = item.dataset.filename;
+    const sel = window.getSelection().toString().trim();
+    switch (action) {
+      // Tekst
+      case "copy":
+        document.execCommand("copy");
+        break;
+      case "cut":
+        document.execCommand("cut");
+        break;
+      case "paste":
+        navigator.clipboard.readText().then((t) => document.execCommand("insertText", false, t));
+        break;
+      case "select-all":
+        document.execCommand("selectAll");
+        break;
+      case "clear-field":
+        if (contextTarget?.closest("input, textarea")) contextTarget.closest("input, textarea").value = "";
+        break;
+      // Zoeken & vertalen
+      case "search-google":
+        window.open(`https://www.google.com/search?q=${encodeURIComponent(sel)}`, "_blank");
+        break;
+      case "search-wiki":
+        window.open(`https://nl.wikipedia.org/wiki/Special:Search?search=${encodeURIComponent(sel)}`, "_blank");
+        break;
+      case "translate":
+        window.open(`https://translate.google.com/?sl=auto&tl=nl&text=${encodeURIComponent(sel)}`, "_blank");
+        break;
+      // Afbeelding
+      case "open-img":
+        window.open(url, "_blank");
+        break;
+      case "copy-img-url":
+        navigator.clipboard.writeText(url);
+        break;
+      case "copy-alt":
+        navigator.clipboard.writeText(text);
+        break;
+      case "download-img": {
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = filename || "afbeelding";
+        a.click();
+        break;
+      }
+      // Link
+      case "open-tab":
+        window.open(url, "_blank");
+        break;
+      case "open-window":
+        window.open(url, "_blank", "noopener,noreferrer");
+        break;
+      case "copy-link":
+        navigator.clipboard.writeText(url);
+        break;
+      // Navigatie
+      case "go-back":
+        history.back();
+        break;
+      case "go-forward":
+        history.forward();
+        break;
+      case "reload":
+        location.reload();
+        break;
+      case "hard-reload":
+        location.href = location.href;
+        break;
+      // Pagina
+      case "copy-page-url":
+        navigator.clipboard.writeText(location.href);
+        break;
+      case "view-source":
+        window.open(`view-source:${location.href}`, "_blank");
+        break;
+      case "print":
+        window.print();
+        break;
+      case "save-page":
+        document.execCommand("SaveAs");
+        break;
+      case "scroll-top":
+        window.scrollTo({ top: 0, behavior: "smooth" });
+        break;
+      // Ontwikkelaar
+      case "inspect":
+        console.log("%c[Inspecteer element]", "color:#6c63ff;font-weight:bold", contextTarget);
+        break;
+      case "copy-selector":
+        navigator.clipboard.writeText(getCssSelector(contextTarget));
+        break;
+      case "log-element":
+        console.log("%c[Sol Context Menu] Geselecteerd element:", "color:#6c63ff", contextTarget);
+        console.table({
+          tag: contextTarget?.tagName,
+          id: contextTarget?.id,
+          classes: contextTarget?.className,
+          selector: getCssSelector(contextTarget),
+          innerText: contextTarget?.innerText?.slice(0, 80)
+        });
+        break;
+    }
+    hideMenu();
+  });
+}
+
+// src/components/darkToggle.js
+function initThemeToggle(elementSelector = ".sol-theme-toggle") {
+  const html = document.documentElement;
+  const toggles = document.querySelectorAll(elementSelector);
+  const STORAGE_KEY = "solora-theme";
+  const applyTheme = (theme) => {
+    if (theme === "dark") {
+      html.classList.add("dark");
+      html.classList.remove("light");
+    } else {
+      html.classList.add("light");
+      html.classList.remove("dark");
+    }
+    toggles.forEach((btn) => {
+      btn.innerHTML = `<span>${theme === "dark" ? "\u2600\uFE0F" : "\u{1F319}"}</span>`;
+      btn.setAttribute("aria-label", `Switch to ${theme === "dark" ? "light" : "dark"} mode`);
+    });
+    localStorage.setItem(STORAGE_KEY, theme);
+  };
+  const getInitialTheme = () => {
+    const saved = localStorage.getItem(STORAGE_KEY);
+    if (saved) return saved;
+    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+    return prefersDark ? "dark" : "light";
+  };
+  applyTheme(getInitialTheme());
+  toggles.forEach((btn) => {
+    btn.addEventListener("click", () => {
+      const isDark = html.classList.contains("dark");
+      applyTheme(isDark ? "light" : "dark");
+    });
+  });
+  window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (e) => {
+    if (!localStorage.getItem(STORAGE_KEY)) {
+      applyTheme(e.matches ? "dark" : "light");
+    }
+  });
+}
+
 // src/index.js
 if (typeof window !== "undefined") {
   document.addEventListener("DOMContentLoaded", () => {
     initCodeblocks();
     initDropdowns();
+    initContextMenu();
+    initThemeToggle();
   });
 }
 export {
   initCodeblocks,
-  initDropdowns
+  initContextMenu,
+  initDropdowns,
+  initThemeToggle
 };
 /*! Bundled license information:
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kerkhoff-ict/solora",
-  "version": "2.1.0",
+  "version": "2.1.2",
   "description": "Simple CSS component library",
   "main": "dist/index.js",
   "style": "dist/index.css",