create-next-imagicma 0.0.4 → 0.0.6

package/template-hono/postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

package/template-hono/process-compose.yaml

@@ -0,0 +1,13 @@
+version: "0.5"
+log_location: ".opencode/logs/process-compose.log"
+
+processes:
+  web:
+    command: "pnpm dev"
+    working_dir: "."
+    environment:
+      - "PORT=5001"
+    availability:
+      restart: "always"
+      backoff_seconds: 5
+      max_restarts: 20

package/template-hono/public/file.svg

@@ -0,0 +1 @@
+<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>

package/template-hono/public/globe.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>

package/template-hono/public/imagicma-picker-bridge.js

@@ -0,0 +1,374 @@
+(function () {
+  var CHANNEL = 'imagicma.preview-picker';
+  var VERSION = 1;
+  var MAX_TEXT_LENGTH = 240;
+  var MAX_SELECTOR_LENGTH = 512;
+  var PROD_PARENT_ORIGIN = 'https://www.imagicma.cn';
+  var LOCAL_PARENT_RE = /^https?:\/\/(localhost|127\.0\.0\.1)(:\d+)?$/i;
+  var LOCAL_IMAGICMA_PARENT_RE = /^https?:\/\/([a-z0-9-]+\.)?local\.imagicma\.cn(:\d+)?$/i;
+
+  var state = {
+    active: false,
+    sessionId: '',
+    nonce: '',
+    parentOrigin: '',
+    hoverEl: null,
+    overlayEl: null,
+    rafId: 0,
+  };
+
+  var listenersBound = false;
+
+  function isAllowedParentOrigin(origin) {
+    if (!origin) return false;
+    return origin === PROD_PARENT_ORIGIN || LOCAL_PARENT_RE.test(origin) || LOCAL_IMAGICMA_PARENT_RE.test(origin);
+  }
+
+  function isRecord(value) {
+    return typeof value === 'object' && value !== null;
+  }
+
+  function trimText(value) {
+    return typeof value === 'string' ? value.trim() : '';
+  }
+
+  function truncateText(value, max) {
+    if (!value) return '';
+    return value.length > max ? value.slice(0, max) : value;
+  }
+
+  function safePostMessage(type, payload) {
+    if (!state.parentOrigin) return;
+    if (window.parent === window) return;
+
+    try {
+      window.parent.postMessage(
+        {
+          channel: CHANNEL,
+          version: VERSION,
+          type: type,
+          sessionId: state.sessionId,
+          nonce: state.nonce,
+          payload: payload,
+        },
+        state.parentOrigin,
+      );
+    } catch (_error) {
+      // Ignore postMessage failures.
+    }
+  }
+
+  function ensureOverlay() {
+    if (state.overlayEl && document.body.contains(state.overlayEl)) return state.overlayEl;
+    var overlay = document.createElement('div');
+    overlay.setAttribute('data-imagicma-picker-overlay', 'true');
+    overlay.style.position = 'fixed';
+    overlay.style.left = '0';
+    overlay.style.top = '0';
+    overlay.style.width = '0';
+    overlay.style.height = '0';
+    overlay.style.zIndex = '2147483647';
+    overlay.style.pointerEvents = 'none';
+    overlay.style.border = '2px solid #1d4ed8';
+    overlay.style.background = 'rgba(29, 78, 216, 0.10)';
+    overlay.style.boxSizing = 'border-box';
+    overlay.style.display = 'none';
+    document.body.appendChild(overlay);
+    state.overlayEl = overlay;
+    return overlay;
+  }
+
+  function hideOverlay() {
+    if (!state.overlayEl) return;
+    state.overlayEl.style.display = 'none';
+  }
+
+  function updateOverlay() {
+    if (!state.active || !state.hoverEl) {
+      hideOverlay();
+      return;
+    }
+
+    var rect = state.hoverEl.getBoundingClientRect();
+    var overlay = ensureOverlay();
+    if (rect.width <= 0 || rect.height <= 0) {
+      overlay.style.display = 'none';
+      return;
+    }
+
+    overlay.style.display = 'block';
+    overlay.style.left = rect.left + 'px';
+    overlay.style.top = rect.top + 'px';
+    overlay.style.width = rect.width + 'px';
+    overlay.style.height = rect.height + 'px';
+  }
+
+  function queueOverlayUpdate() {
+    if (state.rafId) return;
+    state.rafId = window.requestAnimationFrame(function () {
+      state.rafId = 0;
+      updateOverlay();
+    });
+  }
+
+  function isValidElementTarget(target) {
+    if (!(target instanceof Element)) return false;
+    if (state.overlayEl && state.overlayEl.contains(target)) return false;
+    return true;
+  }
+
+  function cssEscapeIdent(value) {
+    if (typeof window.CSS !== 'undefined' && typeof window.CSS.escape === 'function') {
+      return window.CSS.escape(value);
+    }
+    return value.replace(/[^a-zA-Z0-9_-]/g, '\\$&');
+  }
+
+  function selectorByClassChain(element) {
+    var tokens = [];
+    if (element.classList && element.classList.length > 0) {
+      for (var i = 0; i < element.classList.length && i < 3; i += 1) {
+        var cls = trimText(element.classList[i]);
+        if (cls) tokens.push('.' + cssEscapeIdent(cls));
+      }
+    }
+    return tokens.length > 0 ? element.tagName.toLowerCase() + tokens.join('') : '';
+  }
+
+  function selectorByPath(element) {
+    var parts = [];
+    var current = element;
+    var depth = 0;
+    while (current && current.nodeType === 1 && depth < 6) {
+      var part = current.tagName.toLowerCase();
+      if (current.id) {
+        part += '#' + cssEscapeIdent(current.id);
+        parts.unshift(part);
+        break;
+      }
+
+      var classSelector = selectorByClassChain(current);
+      if (classSelector) {
+        part = classSelector;
+      } else if (current.parentElement) {
+        var siblings = current.parentElement.children;
+        var sameTagIndex = 0;
+        var sameTagCount = 0;
+        for (var i = 0; i < siblings.length; i += 1) {
+          var sibling = siblings[i];
+          if (sibling.tagName === current.tagName) {
+            sameTagCount += 1;
+            if (sibling === current) {
+              sameTagIndex = sameTagCount;
+            }
+          }
+        }
+        if (sameTagCount > 1 && sameTagIndex > 0) {
+          part += ':nth-of-type(' + sameTagIndex + ')';
+        }
+      }
+
+      parts.unshift(part);
+      current = current.parentElement;
+      depth += 1;
+    }
+
+    return parts.join(' > ');
+  }
+
+  function getElementSelector(element) {
+    if (element.id) {
+      return '#' + cssEscapeIdent(element.id);
+    }
+
+    var testId = element.getAttribute('data-testid');
+    if (testId) {
+      return '[data-testid="' + testId.replace(/"/g, '\\"') + '"]';
+    }
+
+    var ariaLabel = element.getAttribute('aria-label');
+    if (ariaLabel) {
+      return element.tagName.toLowerCase() + '[aria-label="' + ariaLabel.replace(/"/g, '\\"') + '"]';
+    }
+
+    var role = element.getAttribute('role');
+    if (role) {
+      return element.tagName.toLowerCase() + '[role="' + role.replace(/"/g, '\\"') + '"]';
+    }
+
+    var byClass = selectorByClassChain(element);
+    if (byClass) return byClass;
+
+    return selectorByPath(element) || element.tagName.toLowerCase();
+  }
+
+  function buildSelectionPayload(element) {
+    var rect = element.getBoundingClientRect();
+    var selector = truncateText(getElementSelector(element), MAX_SELECTOR_LENGTH);
+    var textSource = trimText(element.innerText || element.textContent || '');
+    var attributes = {};
+
+    function putAttr(name, value) {
+      if (!name || typeof value !== 'string') return;
+      var key = trimText(name).toLowerCase();
+      var val = trimText(value);
+      if (!key || !val) return;
+      attributes[key] = truncateText(val, 240);
+    }
+
+    putAttr('id', element.id || '');
+    putAttr('class', element.className || '');
+    putAttr('role', element.getAttribute('role') || '');
+    putAttr('name', element.getAttribute('name') || '');
+    putAttr('type', element.getAttribute('type') || '');
+    putAttr('title', element.getAttribute('title') || '');
+    putAttr('aria-label', element.getAttribute('aria-label') || '');
+    putAttr('aria-labelledby', element.getAttribute('aria-labelledby') || '');
+    putAttr('aria-describedby', element.getAttribute('aria-describedby') || '');
+    putAttr('placeholder', element.getAttribute('placeholder') || '');
+    putAttr('href', element.getAttribute('href') || '');
+    putAttr('src', element.getAttribute('src') || '');
+    putAttr('alt', element.getAttribute('alt') || '');
+
+    if (element.attributes && element.attributes.length > 0) {
+      for (var i = 0; i < element.attributes.length; i += 1) {
+        var attr = element.attributes[i];
+        if (!attr) continue;
+        var attrName = trimText(attr.name || '').toLowerCase();
+        if (!attrName) continue;
+        if (attrName.indexOf('data-') === 0 || attrName.indexOf('aria-') === 0) {
+          putAttr(attrName, attr.value || '');
+        }
+      }
+    }
+
+    return {
+      pageUrl: window.location.href,
+      selector: selector,
+      tagName: element.tagName.toLowerCase(),
+      textSnippet: truncateText(textSource, MAX_TEXT_LENGTH),
+      attributes: attributes,
+      rect: {
+        x: Number(rect.left.toFixed(2)),
+        y: Number(rect.top.toFixed(2)),
+        width: Number(rect.width.toFixed(2)),
+        height: Number(rect.height.toFixed(2)),
+      },
+    };
+  }
+
+  function handleMouseMove(event) {
+    if (!state.active) return;
+    var target = event.target;
+    if (!isValidElementTarget(target)) return;
+    state.hoverEl = target;
+    queueOverlayUpdate();
+  }
+
+  function handleScrollOrResize() {
+    if (!state.active) return;
+    queueOverlayUpdate();
+  }
+
+  function handleClickCapture(event) {
+    if (!state.active) return;
+    var target = event.target;
+    if (!isValidElementTarget(target)) return;
+
+    event.preventDefault();
+    event.stopPropagation();
+    if (typeof event.stopImmediatePropagation === 'function') {
+      event.stopImmediatePropagation();
+    }
+
+    try {
+      var payload = buildSelectionPayload(target);
+      safePostMessage('IMAGICMA_PICKER_SELECTED', payload);
+    } catch (error) {
+      safePostMessage('IMAGICMA_PICKER_ERROR', {
+        message: error instanceof Error ? error.message : 'Failed to build selected element payload',
+      });
+    }
+  }
+
+  function bindInteractionListeners() {
+    if (listenersBound) return;
+    listenersBound = true;
+    document.addEventListener('mousemove', handleMouseMove, true);
+    document.addEventListener('click', handleClickCapture, true);
+    window.addEventListener('scroll', handleScrollOrResize, true);
+    window.addEventListener('resize', handleScrollOrResize, true);
+  }
+
+  function unbindInteractionListeners() {
+    if (!listenersBound) return;
+    listenersBound = false;
+    document.removeEventListener('mousemove', handleMouseMove, true);
+    document.removeEventListener('click', handleClickCapture, true);
+    window.removeEventListener('scroll', handleScrollOrResize, true);
+    window.removeEventListener('resize', handleScrollOrResize, true);
+  }
+
+  function activatePicking() {
+    state.active = true;
+    state.hoverEl = null;
+    bindInteractionListeners();
+    document.documentElement.style.cursor = 'crosshair';
+    document.body.style.cursor = 'crosshair';
+    safePostMessage('IMAGICMA_PICKER_READY', {
+      pageUrl: window.location.href,
+    });
+  }
+
+  function deactivatePicking() {
+    state.active = false;
+    state.hoverEl = null;
+    if (state.rafId) {
+      window.cancelAnimationFrame(state.rafId);
+      state.rafId = 0;
+    }
+    hideOverlay();
+    unbindInteractionListeners();
+    document.documentElement.style.cursor = '';
+    document.body.style.cursor = '';
+  }
+
+  function isValidMessage(data) {
+    if (!isRecord(data)) return false;
+    if (data.channel !== CHANNEL) return false;
+    if (data.version !== VERSION) return false;
+    if (typeof data.type !== 'string') return false;
+    if (typeof data.sessionId !== 'string' || data.sessionId.length === 0) return false;
+    if (typeof data.nonce !== 'string' || data.nonce.length === 0) return false;
+    return true;
+  }
+
+  function handleParentMessage(event) {
+    if (!isAllowedParentOrigin(event.origin)) return;
+    if (!isValidMessage(event.data)) return;
+
+    var data = event.data;
+    state.parentOrigin = event.origin;
+    state.sessionId = data.sessionId;
+    state.nonce = data.nonce;
+
+    if (data.type === 'IMAGICMA_PICKER_PING') {
+      safePostMessage('IMAGICMA_PICKER_READY', {
+        pageUrl: window.location.href,
+      });
+      return;
+    }
+
+    if (data.type === 'IMAGICMA_PICKER_START') {
+      activatePicking();
+      return;
+    }
+
+    if (data.type === 'IMAGICMA_PICKER_STOP') {
+      deactivatePicking();
+    }
+  }
+
+  window.addEventListener('message', handleParentMessage);
+  window.addEventListener('beforeunload', deactivatePicking);
+})();

package/template-hono/public/next.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

package/template-hono/public/vercel.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>

package/template-hono/public/window.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>

package/template-hono/scripts/imagicma-common.mjs

@@ -0,0 +1,118 @@
+import crypto from "node:crypto";
+import fs from "node:fs/promises";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+export const ROOT_DIR = path.resolve(__dirname, "..");
+export const PORT_FILE = path.join(ROOT_DIR, ".imagicma", "port.json");
+export const LAUNCH_TOKEN_FILE = path.join(
+  ROOT_DIR,
+  ".imagicma",
+  "launch-token.json",
+);
+export const PACKAGE_JSON_FILE = path.join(ROOT_DIR, "package.json");
+
+export const CANONICAL_SCRIPTS = {
+  predev: "node ./scripts/imagicma-guard.mjs dev",
+  dev: "node ./scripts/imagicma-dev.mjs",
+  prestart: "node ./scripts/imagicma-guard.mjs start",
+  start: "node ./scripts/imagicma-start.mjs",
+};
+
+function isValidPort(value) {
+  return Number.isInteger(value) && value >= 1 && value <= 65535;
+}
+
+export async function readLockedPort() {
+  const raw = await fs.readFile(PORT_FILE, "utf8");
+  const data = JSON.parse(raw);
+  const port = Number(data?.port);
+
+  if (!isValidPort(port)) {
+    throw new Error(
+      `无效端口配置：${PORT_FILE}，port=${JSON.stringify(data?.port)}`,
+    );
+  }
+
+  if (data?.locked !== true) {
+    throw new Error(`端口锁文件未锁定：${PORT_FILE}（locked 必须为 true）`);
+  }
+
+  return port;
+}
+
+export async function readPackageJson() {
+  const raw = await fs.readFile(PACKAGE_JSON_FILE, "utf8");
+  const pkg = JSON.parse(raw);
+  return { raw, pkg };
+}
+
+export async function writePackageJson(pkg) {
+  await fs.writeFile(PACKAGE_JSON_FILE, `${JSON.stringify(pkg, null, 2)}\n`);
+}
+
+export async function writeLaunchToken(mode) {
+  await fs.mkdir(path.dirname(LAUNCH_TOKEN_FILE), { recursive: true });
+  const expiresAt = Date.now() + 30 * 1000;
+  const token = {
+    mode,
+    nonce: crypto.randomUUID(),
+    expiresAt,
+  };
+  await fs.writeFile(LAUNCH_TOKEN_FILE, `${JSON.stringify(token, null, 2)}\n`);
+  return token;
+}
+
+export async function consumeLaunchToken(mode) {
+  let raw;
+  try {
+    raw = await fs.readFile(LAUNCH_TOKEN_FILE, "utf8");
+  } catch (error) {
+    if (error && typeof error === "object" && error.code === "ENOENT") {
+      return false;
+    }
+    throw error;
+  }
+
+  try {
+    const token = JSON.parse(raw);
+    const isValid =
+      token?.mode === mode &&
+      Number.isInteger(token?.expiresAt) &&
+      token.expiresAt >= Date.now();
+
+    if (!isValid) {
+      await fs.rm(LAUNCH_TOKEN_FILE, { force: true });
+      return false;
+    }
+
+    await fs.rm(LAUNCH_TOKEN_FILE, { force: true });
+    return true;
+  } catch {
+    await fs.rm(LAUNCH_TOKEN_FILE, { force: true });
+    return false;
+  }
+}
+
+export async function ensureCanonicalScripts() {
+  const { pkg } = await readPackageJson();
+  const currentScripts = pkg.scripts ?? {};
+
+  let mutated = false;
+  for (const [name, expected] of Object.entries(CANONICAL_SCRIPTS)) {
+    if (currentScripts[name] !== expected) {
+      mutated = true;
+      currentScripts[name] = expected;
+    }
+  }
+
+  if (mutated) {
+    pkg.scripts = currentScripts;
+    await writePackageJson(pkg);
+  }
+
+  return mutated;
+}

package/template-hono/scripts/imagicma-dev.mjs

@@ -0,0 +1,29 @@
+import { spawn } from "node:child_process";
+import path from "node:path";
+import { ROOT_DIR, readLockedPort } from "./imagicma-common.mjs";
+
+const viteBin = path.join(ROOT_DIR, "node_modules", "vite", "bin", "vite.js");
+const port = await readLockedPort();
+
+const child = spawn(
+  process.execPath,
+  [viteBin, "--host", "0.0.0.0", "--port", String(port), "--strictPort"],
+  {
+    cwd: ROOT_DIR,
+    stdio: "inherit",
+    env: {
+      ...process.env,
+      IMAGICMA_SCRIPT_LAUNCH: "1",
+      IMAGICMA_LAUNCH_MODE: "dev",
+    },
+  },
+);
+
+child.on("close", (code) => {
+  process.exit(code ?? 0);
+});
+
+child.on("error", (error) => {
+  console.error(`[imagicma] 启动 dev 失败：${error.message}`);
+  process.exit(1);
+});

package/template-hono/scripts/imagicma-guard.mjs

@@ -0,0 +1,17 @@
+import { ensureCanonicalScripts, writeLaunchToken } from "./imagicma-common.mjs";
+
+const mode = process.argv[2];
+
+if (mode !== "dev" && mode !== "start") {
+  console.error("[imagicma] guard 参数错误，仅支持 dev/start");
+  process.exit(1);
+}
+
+const repaired = await ensureCanonicalScripts();
+if (repaired) {
+  console.warn(
+    "[imagicma] 检测到 package.json scripts 被修改，已自动恢复为受保护启动命令。",
+  );
+}
+
+await writeLaunchToken(mode);

package/template-hono/scripts/imagicma-start.mjs

@@ -0,0 +1,24 @@
+import { spawn } from "node:child_process";
+import path from "node:path";
+import { ROOT_DIR } from "./imagicma-common.mjs";
+
+const entry = path.join(ROOT_DIR, "dist", "server", "index.js");
+
+const child = spawn(process.execPath, [entry], {
+  cwd: ROOT_DIR,
+  stdio: "inherit",
+  env: {
+    ...process.env,
+    IMAGICMA_SCRIPT_LAUNCH: "1",
+    IMAGICMA_LAUNCH_MODE: "start",
+  },
+});
+
+child.on("close", (code) => {
+  process.exit(code ?? 0);
+});
+
+child.on("error", (error) => {
+  console.error(`[imagicma] 启动 start 失败：${error.message}`);
+  process.exit(1);
+});

package/template-hono/server/app.ts

@@ -0,0 +1,40 @@
+import { Hono } from "hono";
+import { serveStatic } from "@hono/node-server/serve-static";
+import { greetingRoute } from "./routes/greeting";
+
+type CreateAppOptions = {
+  serveClient?: boolean;
+};
+
+export function createApp({ serveClient = false }: CreateAppOptions = {}) {
+  const app = new Hono();
+
+  app.route("/", greetingRoute);
+
+  if (serveClient) {
+    const serveClientFiles = serveStatic({ root: "./dist/client" });
+    const serveClientIndex = serveStatic({ path: "./dist/client/index.html" });
+
+    app.use("/assets/*", serveClientFiles);
+    app.use("/imagicma-picker-bridge.js", serveClientFiles);
+    app.use("/*.svg", serveClientFiles);
+    app.use("/*.ico", serveClientFiles);
+    app.use("/*.png", serveClientFiles);
+    app.use("/*.jpg", serveClientFiles);
+    app.use("/*.jpeg", serveClientFiles);
+    app.use("/*.webp", serveClientFiles);
+    app.use("/*.txt", serveClientFiles);
+    app.use("/*.js", serveClientFiles);
+    app.use("/*.css", serveClientFiles);
+
+    app.get("*", async (c, next) => {
+      if (c.req.path.startsWith("/api/")) {
+        return c.notFound();
+      }
+
+      return serveClientIndex(c, next);
+    });
+  }
+
+  return app;
+}

package/template-hono/server/db.ts

@@ -0,0 +1,22 @@
+import { drizzle } from "drizzle-orm/node-postgres";
+import pg from "pg";
+import * as schema from "../shared/schema";
+
+const { Pool } = pg;
+
+const databaseUrl = process.env.DATABASE_URL;
+
+declare global {
+  var __dbPool: InstanceType<typeof Pool> | undefined;
+}
+
+export const pool =
+  databaseUrl
+    ? globalThis.__dbPool ?? new Pool({ connectionString: databaseUrl })
+    : undefined;
+
+if (databaseUrl && process.env.NODE_ENV !== "production") {
+  globalThis.__dbPool = pool;
+}
+
+export const db = pool ? drizzle(pool, { schema }) : undefined;

package/template-hono/server/dev-app.ts

@@ -0,0 +1,5 @@
+import { createApp } from "./app";
+
+const app = createApp();
+
+export default app;