jekyll-svg-viewer 0.1.0

data/assets/svg-viewer/preview/preset-builder.js

@@ -0,0 +1,793 @@
+(() => {
+  const defaults = window.__SVG_VIEWER_DEFAULTS__ || {};
+  const form = document.getElementById("preset-form");
+  const previewContainer = document.getElementById("viewer-preview");
+  const statusEl = document.getElementById("builder-status");
+  const liquidOutput = document.getElementById("liquid-tag-output");
+  const copyLiquidBtn = document.getElementById("copy-liquid");
+  const loadPreviewBtn = document.getElementById("load-preview");
+  const captureCenterBtn = document.getElementById("capture-center");
+  const showYamlBtn = document.getElementById("show-yaml");
+  const yamlModal = document.getElementById("yaml-modal");
+  const yamlOutput = document.getElementById("yaml-output");
+  const copyYamlBtn = document.getElementById("copy-yaml");
+
+  if (!form || !previewContainer) return;
+
+  const state = {
+    src: "",
+    height: defaults["height"] || "600px",
+    zoom: defaults["zoom"] || "100",
+    min_zoom: defaults["min_zoom"] || "25",
+    max_zoom: defaults["max_zoom"] || "800",
+    zoom_step: defaults["zoom_step"] || "10",
+    center_x: "",
+    center_y: "",
+    show_coords: Boolean(defaults["show_coords"]),
+    title: defaults["title"] || "",
+    caption: defaults["caption"] || "",
+    controls_position: defaults["controls_position"] || "top",
+    controls_buttons: defaults["controls_buttons"] || "both",
+    button_fill: defaults["button_fill"] || "",
+    button_border: defaults["button_border"] || "",
+    button_foreground: defaults["button_foreground"] || "",
+    pan_mode: defaults["pan_mode"] || "",
+    zoom_mode: defaults["zoom_mode"] || "",
+  };
+
+  const baseUrl = (window.__SVG_VIEWER_BASEURL__ || "").replace(/\/+$/, "");
+  fetch(`${baseUrl}/assets/svg-viewer/i18n/locales.json`)
+    .then((response) => (response.ok ? response.json() : {}))
+    .then((data) => {
+      window.__SVG_VIEWER_I18N__ = data;
+    })
+    .catch(() => {
+      window.__SVG_VIEWER_I18N__ = {};
+    });
+
+  const fieldElements = Array.from(form.querySelectorAll("[data-setting]"));
+  fieldElements.forEach((field) => {
+    const key = field.dataset.setting;
+    if (!(key in state)) return;
+    setFieldValue(field, state[key]);
+    field.dataset.originalValue = field.value;
+    field.addEventListener(
+      field.type === "checkbox" ? "change" : "input",
+      () => {
+        state[key] = readFieldValue(field);
+        updateOutputs();
+      }
+    );
+  });
+
+  let currentViewerId = null;
+  let currentViewer = null;
+
+  loadPreviewBtn.addEventListener("click", (event) => {
+    event.preventDefault();
+    renderPreview();
+  });
+
+  captureCenterBtn.addEventListener("click", (event) => {
+    event.preventDefault();
+    if (!currentViewer) {
+      flashStatus(
+        "Load the preview before capturing the current view.",
+        "warn"
+      );
+      return;
+    }
+    const center = currentViewer.getVisibleCenterPoint
+      ? currentViewer.getVisibleCenterPoint()
+      : null;
+    if (!center) {
+      flashStatus("Unable to read the center point from the preview.", "error");
+      return;
+    }
+    state.center_x = center.x.toFixed(2);
+    state.center_y = center.y.toFixed(2);
+    state.zoom = (currentViewer.currentZoom * 100).toFixed(0);
+    syncFields();
+    updateOutputs();
+    flashStatus("Captured the current view. Fields updated.", "success");
+  });
+
+  copyLiquidBtn.addEventListener("click", async (event) => {
+    event.preventDefault();
+    if (!liquidOutput.value.trim()) {
+      flashStatus(
+        "Nothing to copy yet. Add a source and load the preview first.",
+        "warn"
+      );
+      return;
+    }
+    await copyText(liquidOutput.value);
+    flashStatus("Liquid tag copied to clipboard.", "success");
+  });
+
+  showYamlBtn.addEventListener("click", (event) => {
+    event.preventDefault();
+    const yaml = buildYamlSnippet();
+    yamlOutput.value = yaml;
+    openDialog(yamlModal);
+  });
+
+  copyYamlBtn.addEventListener("click", async (event) => {
+    event.preventDefault();
+    await copyText(yamlOutput.value);
+    flashStatus("YAML snippet copied to clipboard.", "success");
+    closeDialog(yamlModal);
+  });
+
+  if (yamlModal) {
+    yamlModal.addEventListener("cancel", (event) => {
+      event.preventDefault();
+      closeDialog(yamlModal);
+    });
+  }
+
+  updateOutputs();
+
+  function renderPreview() {
+    if (!state.src.trim()) {
+      flashStatus(
+        "Provide an SVG source URL before loading the preview.",
+        "error"
+      );
+      return;
+    }
+
+    destroyCurrentViewer();
+
+    const viewerId = `svg-viewer-preview-${Date.now()}`;
+    currentViewerId = viewerId;
+
+    const wrapper = document.createElement("div");
+    wrapper.id = viewerId;
+    wrapper.className = buildWrapperClasses();
+    const wrapperStyle = buildWrapperStyle();
+    if (wrapperStyle) {
+      wrapper.style.cssText = wrapperStyle;
+    }
+
+    const controlsConfig = parseControlsConfig(Boolean(state.show_coords));
+    const mainClasses = buildMainClasses(controlsConfig);
+    const controlsMarkup = buildControlsMarkup(viewerId, controlsConfig);
+    const containerMarkup = `
+      <div class="${mainClasses}">
+        ${controlsMarkup}
+        <div class="svg-container" style="height: ${escapeHtml(
+          state.height
+        )}; width: 100%; max-width: 100%; min-width: 0;" data-viewer="${viewerId}">
+          <div class="svg-viewport" data-viewer="${viewerId}"></div>
+        </div>
+      </div>
+    `;
+
+    wrapper.innerHTML = `
+      ${
+        state.title
+          ? `<div class="svg-viewer-title">${escapeHtml(state.title)}</div>`
+          : ""
+      }
+      ${containerMarkup}
+      ${
+        state.caption
+          ? `<div class="svg-viewer-caption">${escapeHtml(state.caption)}</div>`
+          : ""
+      }
+    `;
+
+    previewContainer.innerHTML = "";
+    previewContainer.appendChild(wrapper);
+
+    ensureViewerScript(() => {
+      const options = viewerOptions(viewerId);
+      try {
+        window.svgViewerInstances ||= {};
+        currentViewer = new window.SVGViewer(options);
+        window.svgViewerInstances[viewerId] = currentViewer;
+        flashStatus("Preview loaded successfully.", "success");
+      } catch (error) {
+        flashStatus(
+          "Failed to initialize the viewer. Check the console for details.",
+          "error"
+        );
+        console.error("[SVG Viewer Preview]", error);
+      }
+    });
+
+    updateOutputs();
+  }
+
+  function destroyCurrentViewer() {
+    if (currentViewer && typeof currentViewer.destroy === "function") {
+      try {
+        currentViewer.destroy();
+      } catch (error) {
+        console.warn("[SVG Viewer Preview] destroy failed", error);
+      }
+    }
+    if (currentViewerId && window.svgViewerInstances) {
+      delete window.svgViewerInstances[currentViewerId];
+    }
+    currentViewer = null;
+    currentViewerId = null;
+  }
+
+  function viewerOptions(viewerId) {
+    return {
+      viewerId,
+      svgUrl: state.src.trim(),
+      initialZoom: clampZoom(state.zoom) / 100,
+      minZoom: clampZoom(state.min_zoom) / 100,
+      maxZoom: Math.max(
+        clampZoom(state.max_zoom) / 100,
+        clampZoom(state.zoom) / 100
+      ),
+      zoomStep: Math.max(clampZoom(state.zoom_step) / 100, 0.01),
+      centerX: parseMaybeFloat(state.center_x),
+      centerY: parseMaybeFloat(state.center_y),
+      showCoordinates: Boolean(state.show_coords),
+      panMode: normalizePan(state.pan_mode),
+      zoomMode: normalizeZoom(state.zoom_mode),
+      controlsConfig: parseControlsConfig(Boolean(state.show_coords)),
+      buttonFill: state.button_fill || undefined,
+      buttonBorder: state.button_border || undefined,
+      buttonForeground: state.button_foreground || undefined,
+      locale: "en",
+      i18n: window.__SVG_VIEWER_I18N__ || {},
+    };
+  }
+
+  function parseControlsConfig(showCoords) {
+    return parseControls(
+      state.controls_position,
+      state.controls_buttons,
+      showCoords
+    );
+  }
+
+  function updateOutputs() {
+    liquidOutput.value = buildLiquidTag();
+  }
+
+  function buildLiquidTag() {
+    if (!state.src.trim()) return "";
+
+    const attributes = [];
+    attributes.push(`src="${escapeQuotes(state.src.trim())}"`);
+
+    const keys = [
+      "height",
+      "zoom",
+      "min_zoom",
+      "max_zoom",
+      "zoom_step",
+      "center_x",
+      "center_y",
+      "show_coords",
+      "title",
+      "caption",
+      "controls_position",
+      "controls_buttons",
+      "button_fill",
+      "button_border",
+      "button_foreground",
+      "pan_mode",
+      "zoom_mode",
+    ];
+
+    keys.forEach((key) => {
+      const value = state[key];
+      const defaultValue = defaults[key];
+
+      if (value === undefined || value === null || value === "") {
+        return;
+      }
+
+      if (key === "show_coords") {
+        if (Boolean(value) === Boolean(defaultValue)) return;
+        attributes.push(`${key}="true"`);
+        return;
+      }
+
+      if (String(value) === String(defaultValue)) {
+        return;
+      }
+
+      attributes.push(`${key}="${escapeQuotes(value)}"`);
+    });
+
+    return `{% svg_viewer ${attributes.join(" ")} %}`;
+  }
+
+  function buildYamlSnippet() {
+    const yamlLines = ["svg_viewer:", "  defaults:"];
+    const entries = {
+      height: state.height,
+      zoom: state.zoom,
+      min_zoom: state.min_zoom,
+      max_zoom: state.max_zoom,
+      zoom_step: state.zoom_step,
+      show_coords: Boolean(state.show_coords),
+      title: state.title,
+      caption: state.caption,
+      controls_position: state.controls_position,
+      controls_buttons: state.controls_buttons,
+      button_fill: state.button_fill,
+      button_border: state.button_border,
+      button_foreground: state.button_foreground,
+      pan_mode: state.pan_mode,
+      zoom_mode: state.zoom_mode,
+    };
+
+    Object.entries(entries).forEach(([key, value]) => {
+      if (value === undefined || value === null || value === "") {
+        return;
+      }
+
+      if (typeof value === "boolean") {
+        yamlLines.push(`    ${key}: ${value}`);
+      } else {
+        yamlLines.push(`    ${key}: "${escapeQuotes(String(value))}"`);
+      }
+    });
+
+    return yamlLines.join("\n");
+  }
+
+  function parseControls(position, buttonsSetting, showCoords) {
+    const pos = ["top", "bottom", "left", "right"].includes(position)
+      ? position
+      : "top";
+    const raw = buttonsSetting || "both";
+    const tokens = raw
+      .toLowerCase()
+      .replace(/:/g, ",")
+      .split(",")
+      .map((t) => t.trim())
+      .filter(Boolean);
+
+    let hasSlider = tokens.includes("slider");
+    let mode = "both";
+    let alignment = "alignleft";
+    const styles = [];
+    let buttons = showCoords
+      ? ["zoom_in", "zoom_out", "reset", "center", "coords"]
+      : ["zoom_in", "zoom_out", "reset", "center"];
+    let isCustom = false;
+
+    const hiddenOptions = ["hidden", "none"];
+    const styleOptions = ["compact", "labels_on_hover", "labels-on-hover"];
+    const modeOptions = ["icon", "text", "both"];
+    const alignmentOptions = ["alignleft", "aligncenter", "alignright"];
+
+    const normalized = raw.toLowerCase();
+    if (hiddenOptions.includes(normalized)) {
+      mode = "hidden";
+      buttons = [];
+    } else if (normalized === "minimal") {
+      buttons = showCoords
+        ? ["zoom_in", "zoom_out", "center", "coords"]
+        : ["zoom_in", "zoom_out", "center"];
+    } else if (normalized === "slider") {
+      hasSlider = true;
+      buttons = showCoords
+        ? ["reset", "center", "coords"]
+        : ["reset", "center"];
+    } else if (styleOptions.includes(normalized)) {
+      styles.push(normalized.replace("_", "-"));
+    } else if (alignmentOptions.includes(normalized)) {
+      alignment = normalized;
+    } else if (modeOptions.includes(normalized)) {
+      mode = normalized;
+    } else if (normalized === "custom" || normalized.includes(",")) {
+      isCustom = true;
+    }
+
+    if (isCustom) {
+      let parts = raw
+        .replace(/:/g, ",")
+        .split(",")
+        .map((t) => t.trim())
+        .filter(Boolean);
+      if (parts[0] && parts[0].toLowerCase() === "custom") {
+        parts = parts.slice(1);
+      }
+
+      if (parts[0] && parts[0].toLowerCase() === "slider") {
+        hasSlider = true;
+        parts = parts.slice(1);
+      }
+
+      if (parts[0] && modeOptions.includes(parts[0].toLowerCase())) {
+        mode = parts[0].toLowerCase();
+        parts = parts.slice(1);
+      }
+
+      if (parts[0] && alignmentOptions.includes(parts[0].toLowerCase())) {
+        alignment = parts[0].toLowerCase();
+        parts = parts.slice(1);
+      }
+
+      const styleTokens = parts.filter((token) =>
+        styleOptions.includes(token.toLowerCase())
+      );
+      styleTokens.forEach((token) => {
+        styles.push(token.replace("_", "-").toLowerCase());
+      });
+      parts = parts.filter(
+        (token) => !styleOptions.includes(token.toLowerCase())
+      );
+
+      const customButtons = [];
+      parts.forEach((token) => {
+        const key = token.toLowerCase();
+        if (key === "slider") {
+          hasSlider = true;
+          return;
+        }
+        if (key === "coords" && !showCoords) {
+          return;
+        }
+        if (
+          ["zoom_in", "zoom_out", "reset", "center", "coords"].includes(key) &&
+          !customButtons.includes(key)
+        ) {
+          customButtons.push(key);
+        }
+      });
+
+      if (mode !== "hidden") {
+        if (customButtons.length > 0) {
+          buttons = customButtons;
+        } else if (hasSlider) {
+          buttons = showCoords
+            ? ["reset", "center", "coords"]
+            : ["reset", "center"];
+        }
+      } else {
+        buttons = [];
+      }
+    }
+
+    if (mode !== "hidden") {
+      if (showCoords && !buttons.includes("coords")) {
+        buttons.push("coords");
+      }
+      if (!showCoords) {
+        buttons = buttons.filter((key) => key !== "coords");
+      }
+      if (buttons.length === 0) {
+        buttons = showCoords
+          ? ["zoom_in", "zoom_out", "reset", "center", "coords"]
+          : ["zoom_in", "zoom_out", "reset", "center"];
+      }
+    }
+
+    if (hasSlider) {
+      if (!raw.includes("zoom_in")) {
+        buttons = buttons.filter((key) => key !== "zoom_in");
+      }
+      if (!raw.includes("zoom_out")) {
+        buttons = buttons.filter((key) => key !== "zoom_out");
+      }
+    }
+
+    return {
+      position: pos,
+      mode,
+      styles: [...new Set(styles)],
+      alignment,
+      buttons,
+      has_slider: hasSlider,
+    };
+  }
+
+  function buildControlsMarkup(viewerId, config) {
+    const resolvedConfig =
+      config || parseControlsConfig(Boolean(state.show_coords));
+    if (resolvedConfig.mode === "hidden") {
+      return "";
+    }
+
+    const classes = [
+      "svg-controls",
+      `controls-mode-${resolvedConfig.mode}`,
+      `controls-align-${resolvedConfig.alignment}`,
+    ];
+    resolvedConfig.styles.forEach((style) => {
+      classes.push(`controls-style-${style}`);
+    });
+    if (["left", "right"].includes(resolvedConfig.position)) {
+      classes.push("controls-vertical");
+    }
+
+    const sliderMarkup = resolvedConfig.has_slider
+      ? `
+        <div class="zoom-slider-wrapper">
+          <input type="range"
+                 class="zoom-slider"
+                 data-viewer="${viewerId}"
+                 min="${clampZoom(state.min_zoom)}"
+                 max="${clampZoom(state.max_zoom)}"
+                 step="${Math.max(1, Number(state.zoom_step) || 10)}"
+                 value="${clampZoom(state.zoom)}"
+                 aria-label="Zoom level" />
+        </div>
+      `
+      : "";
+
+    const buttonMarkup = resolvedConfig.buttons
+      .map((key) => buttonDefinition(key))
+      .filter(Boolean)
+      .map(
+        (definition) => `
+          <button type="button"
+                  class="svg-viewer-btn ${definition.class}"
+                  data-viewer="${viewerId}"
+                  title="${escapeHtml(definition.title)}"
+                  aria-label="${escapeHtml(definition.text)}">
+            <span class="btn-icon" aria-hidden="true">${definition.icon}</span>
+            <span class="btn-text">${escapeHtml(definition.text)}</span>
+          </button>
+        `
+      )
+      .join("");
+
+    const coordOutput = resolvedConfig.buttons.includes("coords")
+      ? `<span class="coord-output" data-viewer="${viewerId}" aria-live="polite"></span>`
+      : "";
+
+    return `
+      <div class="${classes.join(" ")}" data-viewer="${viewerId}">
+        ${sliderMarkup}
+        ${buttonMarkup}
+        ${coordOutput}
+        <div class="divider"></div>
+        <span class="zoom-display">
+          <span class="zoom-percentage" data-viewer="${viewerId}">${clampZoom(
+      state.zoom
+    )}</span>%
+        </span>
+      </div>
+    `;
+  }
+
+  function buttonDefinition(key) {
+    const definitions = {
+      zoom_in: {
+        class: "zoom-in-btn",
+        icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" aria-hidden="true" focusable="false"><path fill="currentColor" d="M480 272C480 317.9 465.1 360.3 440 394.7L566.6 521.4C579.1 533.9 579.1 554.2 566.6 566.7C554.1 579.2 533.8 579.2 521.3 566.7L394.7 440C360.3 465.1 317.9 480 272 480C157.1 480 64 386.9 64 272C64 157.1 157.1 64 272 64C386.9 64 480 157.1 480 272zM272 176C258.7 176 248 186.7 248 200L248 248L200 248C186.7 248 176 258.7 176 272C176 285.3 186.7 296 200 296L248 296L248 344C248 357.3 258.7 368 272 368C285.3 368 296 357.3 296 344L296 296L344 296C357.3 296 368 285.3 368 272C368 258.7 357.3 248 344 248L296 248L296 200C296 186.7 285.3 176 272 176z"/></svg>',
+        text: "Zoom In",
+        title: "Zoom In (Ctrl +)",
+      },
+      zoom_out: {
+        class: "zoom-out-btn",
+        icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" aria-hidden="true" focusable="false"><path fill="currentColor" d="M480 272C480 317.9 465.1 360.3 440 394.7L566.6 521.4C579.1 533.9 579.1 554.2 566.6 566.7C554.1 579.2 533.8 579.2 521.3 566.7L394.7 440C360.3 465.1 317.9 480 272 480C157.1 480 64 386.9 64 272C64 157.1 157.1 64 272 64C386.9 64 480 157.1 480 272zM200 248C186.7 248 176 258.7 176 272C176 285.3 186.7 296 200 296L344 296C357.3 296 368 285.3 368 272C368 258.7 357.3 248 344 248L200 248z"/></svg>',
+        text: "Zoom Out",
+        title: "Zoom Out (Ctrl -)",
+      },
+      reset: {
+        class: "reset-zoom-btn",
+        icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" aria-hidden="true" focusable="false"><path fill="currentColor" d="M480 272C480 317.9 465.1 360.3 440 394.7L566.6 521.4C579.1 533.9 579.1 554.2 566.6 566.7C554.1 579.2 533.8 579.2 521.3 566.7L394.7 440C360.3 465.1 317.9 480 272 480C157.1 480 64 386.9 64 272C64 157.1 157.1 64 272 64C386.9 64 480 157.1 480 272zM272 416C351.5 416 416 351.5 416 272C416 192.5 351.5 128 272 128C192.5 128 128 192.5 128 272C128 351.5 192.5 416 272 416z"/></svg>',
+        text: "Reset Zoom",
+        title: "Reset Zoom",
+      },
+      center: {
+        class: "center-view-btn",
+        icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" aria-hidden="true" focusable="false"><path fill="currentColor" d="M320 48C337.7 48 352 62.3 352 80L352 98.3C450.1 112.3 527.7 189.9 541.7 288L560 288C577.7 288 592 302.3 592 320C592 337.7 577.7 352 560 352L541.7 352C527.7 450.1 450.1 527.7 352 541.7L352 560C352 577.7 337.7 592 320 592C302.3 592 288 577.7 288 560L288 541.7C189.9 527.7 112.3 450.1 98.3 352L80 352C62.3 352 48 337.7 48 320C48 302.3 62.3 288 80 288L98.3 288C112.3 189.9 189.9 112.3 288 98.3L288 80C288 62.3 302.3 48 320 48zM163.2 352C175.9 414.7 225.3 464.1 288 476.8L288 464C288 446.3 302.3 432 320 432C337.7 432 352 446.3 352 464L352 476.8C414.7 464.1 464.1 414.7 476.8 352L464 352C446.3 352 432 337.7 432 320C432 302.3 446.3 288 464 288L476.8 288C464.1 225.3 414.7 175.9 352 163.2L352 176C352 193.7 337.7 208 320 208C302.3 208 288 193.7 288 176L288 163.2C225.3 175.9 175.9 225.3 163.2 288L176 288C193.7 288 208 302.3 208 320C208 337.7 193.7 352 176 352L163.2 352zM320 272C346.5 272 368 293.5 368 320C368 346.5 346.5 368 320 368C293.5 368 272 346.5 272 320C272 293.5 293.5 272 320 272z"/></svg>',
+        text: "Center View",
+        title: "Center View",
+      },
+      coords: {
+        class: "coord-copy-btn",
+        icon: "📍",
+        text: "Copy Center",
+        title: "Copy current center coordinates",
+      },
+    };
+    return definitions[key];
+  }
+
+  function setFieldValue(field, value) {
+    if (field.type === "checkbox") {
+      field.checked = Boolean(value);
+      return;
+    }
+    if (field.type === "color") {
+      field.value = value || "#000000";
+      return;
+    }
+    field.value = value ?? "";
+  }
+
+  function readFieldValue(field) {
+    if (field.type === "checkbox") {
+      return field.checked;
+    }
+    if (field.type === "color") {
+      return field.value === field.dataset.originalValue ? "" : field.value;
+    }
+    return field.value;
+  }
+
+  function syncFields() {
+    fieldElements.forEach((field) => {
+      const key = field.dataset.setting;
+      if (key in state) {
+        setFieldValue(field, state[key]);
+      }
+    });
+  }
+
+  function buildWrapperClasses() {
+    const controlsConfig = parseControlsConfig(Boolean(state.show_coords));
+    const classes = [
+      "svg-viewer-wrapper",
+      `controls-position-${controlsConfig.position}`,
+      `controls-mode-${controlsConfig.mode}`,
+      `pan-mode-${normalizePan(state.pan_mode)}`,
+      `zoom-mode-${normalizeZoom(state.zoom_mode)}`,
+    ];
+    controlsConfig.styles.forEach((style) =>
+      classes.push(`controls-style-${style}`)
+    );
+    if (state.className) classes.push(state.className);
+    return classes.join(" ");
+  }
+
+  function buildMainClasses(controlsConfig) {
+    const classes = [
+      "svg-viewer-main",
+      `controls-position-${controlsConfig.position}`,
+      `controls-align-${controlsConfig.alignment}`,
+    ];
+    controlsConfig.styles.forEach((style) =>
+      classes.push(`controls-style-${style}`)
+    );
+    return classes.join(" ");
+  }
+
+  function buildWrapperStyle() {
+    const declarations = ["width: 100%", "max-width: 100%", "min-width: 0"];
+    if (isHexColor(state.button_fill)) {
+      declarations.push(`--svg-viewer-button-fill: ${state.button_fill}`);
+      const hover = adjustBrightness(state.button_fill, -12);
+      if (hover) declarations.push(`--svg-viewer-button-hover: ${hover}`);
+    }
+    const border = state.button_border || state.button_fill;
+    if (isHexColor(border)) {
+      declarations.push(`--svg-viewer-button-border: ${border}`);
+    }
+    if (isHexColor(state.button_foreground)) {
+      declarations.push(`--svg-viewer-button-text: ${state.button_foreground}`);
+    }
+    return declarations.join("; ");
+  }
+
+  function ensureViewerScript(callback) {
+    if (window.SVGViewer) {
+      callback();
+      return;
+    }
+    const interval = setInterval(() => {
+      if (window.SVGViewer) {
+        clearInterval(interval);
+        callback();
+      }
+    }, 50);
+    setTimeout(() => clearInterval(interval), 3000);
+  }
+
+  function clampZoom(value) {
+    const numeric = Number(value);
+    if (Number.isFinite(numeric)) {
+      return Math.max(1, Math.min(3200, Math.round(numeric)));
+    }
+    return 100;
+  }
+
+  function parseMaybeFloat(value) {
+    const numeric = Number(value);
+    return Number.isFinite(numeric) ? numeric : null;
+  }
+
+  function normalizePan(value) {
+    return value && value.toString().toLowerCase() === "drag"
+      ? "drag"
+      : "scroll";
+  }
+
+  function normalizeZoom(value) {
+    const normalized = (value || "")
+      .toString()
+      .toLowerCase()
+      .replace(/[\s-]+/g, "_");
+    if (normalized === "click" || normalized === "scroll") return normalized;
+    return "super_scroll";
+  }
+
+  function escapeQuotes(value) {
+    return value.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
+  }
+
+  function escapeHtml(value) {
+    return value
+      .replace(/&/g, "&amp;")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;")
+      .replace(/"/g, "&quot;")
+      .replace(/'/g, "&#39;");
+  }
+
+  function isHexColor(value) {
+    return /^#([0-9a-f]{3}){1,2}$/i.test(value || "");
+  }
+
+  function adjustBrightness(hexColor, percentage) {
+    if (!isHexColor(hexColor)) return null;
+    let hex = hexColor.replace("#", "");
+    if (hex.length === 3)
+      hex = hex
+        .split("")
+        .map((c) => c + c)
+        .join("");
+    const amount = Math.round(2.55 * percentage);
+    const [r, g, b] = hex.match(/.{2}/g).map((component) => {
+      return Math.max(0, Math.min(255, parseInt(component, 16) + amount));
+    });
+    return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
+  }
+
+  async function copyText(text) {
+    try {
+      if (navigator.clipboard && navigator.clipboard.writeText) {
+        await navigator.clipboard.writeText(text);
+      } else {
+        const textarea = document.createElement("textarea");
+        textarea.value = text;
+        textarea.style.position = "fixed";
+        textarea.style.top = "-9999px";
+        document.body.appendChild(textarea);
+        textarea.focus();
+        textarea.select();
+        document.execCommand("copy");
+        document.body.removeChild(textarea);
+      }
+    } catch (error) {
+      console.error("[SVG Viewer Preview] copy failed", error);
+      flashStatus("Copy failed. Select and copy the text manually.", "error");
+    }
+  }
+
+  function openDialog(dialog) {
+    if (!dialog) return;
+    if (typeof dialog.showModal === "function") {
+      dialog.showModal();
+    } else {
+      dialog.setAttribute("open", "");
+    }
+  }
+
+  function closeDialog(dialog) {
+    if (!dialog) return;
+    if (typeof dialog.close === "function" && dialog.open) {
+      dialog.close();
+    } else {
+      dialog.removeAttribute("open");
+    }
+  }
+
+  let statusTimeout = null;
+  function flashStatus(message, tone = "info") {
+    if (!statusEl) return;
+    statusEl.textContent = message;
+    statusEl.dataset.tone = tone;
+    clearTimeout(statusTimeout);
+    statusTimeout = setTimeout(() => {
+      statusEl.textContent = "";
+    }, 3500);
+  }
+})();