create-next-imagicma 0.0.5 → 0.0.7

package/template/app/page.tsx

@@ -1,47 +1,25 @@
 export default function Home() {
   return (
-    <div className="relative flex min-h-screen items-center justify-center overflow-hidden bg-gradient-to-br from-indigo-600 via-purple-600 to-sky-600 px-6 py-16 text-white">
-      <div className="absolute inset-0 bg-[radial-gradient(60%_60%_at_50%_40%,rgba(255,255,255,0.20),transparent_60%)]" />
-      <main className="relative w-full max-w-xl rounded-3xl border border-white/15 bg-white/10 p-10 shadow-2xl backdrop-blur-xl">
-        <div className="flex flex-col items-center text-center">
-          <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-white/10">
-            <svg
-              viewBox="0 0 24 24"
-              className="h-9 w-9 text-white/90"
-              fill="none"
-              aria-hidden="true"
-            >
-              <path
-                d="M12 15.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Z"
-                stroke="currentColor"
-                strokeWidth="1.8"
-              />
-              <path
-                d="M19.4 13.1a7.8 7.8 0 0 0 0-2.2l2-1.6a.7.7 0 0 0 .2-.9l-1.9-3.2a.7.7 0 0 0-.8-.3l-2.4 1a8.3 8.3 0 0 0-1.9-1.1l-.4-2.5a.7.7 0 0 0-.7-.6H8.5a.7.7 0 0 0-.7.6l-.4 2.5a8.3 8.3 0 0 0-1.9 1.1l-2.4-1a.7.7 0 0 0-.8.3L.4 8.4a.7.7 0 0 0 .2.9l2 1.6a7.8 7.8 0 0 0 0 2.2l-2 1.6a.7.7 0 0 0-.2.9l1.9 3.2c.2.3.5.4.8.3l2.4-1a8.3 8.3 0 0 0 1.9 1.1l.4 2.5c.1.3.3.6.7.6h3.7c.3 0 .6-.2.7-.6l.4-2.5a8.3 8.3 0 0 0 1.9-1.1l2.4 1c.3.1.6 0 .8-.3l1.9-3.2a.7.7 0 0 0-.2-.9l-2-1.6Z"
-                stroke="currentColor"
-                strokeWidth="1.2"
-                strokeLinejoin="round"
-                opacity="0.85"
-              />
-            </svg>
-          </div>
+    <div className="relative min-h-screen overflow-hidden bg-gradient-to-br from-indigo-600 via-purple-600 to-sky-600 text-white">
+      <div aria-hidden className="pointer-events-none absolute inset-0 overflow-hidden">
+        <div className="absolute inset-0 bg-[radial-gradient(60%_60%_at_50%_40%,rgba(255,255,255,0.20),transparent_60%)]" />
+      </div>
 
-          <h1 className="mt-6 text-4xl font-semibold tracking-tight">
-            项目构建中
-          </h1>
-          <p className="mt-4 max-w-md text-base leading-7 text-white/80">
-            我们正在努力为你构建预览服务，请稍后再试。
-          </p>
+      <div aria-hidden className="aurora-frame">
+        <span className="aurora-edge top" />
+        <span className="aurora-edge right" />
+        <span className="aurora-edge bottom" />
+        <span className="aurora-edge left" />
+        <span className="aurora-edge top is-glow" />
+        <span className="aurora-edge right is-glow" />
+        <span className="aurora-edge bottom is-glow" />
+        <span className="aurora-edge left is-glow" />
+      </div>
 
-          <div
-            className="mt-10 flex items-center gap-3 text-sm text-white/70"
-            role="status"
-            aria-live="polite"
-          >
-            <span className="sr-only">加载中</span>
-            <div className="h-5 w-5 rounded-full border-2 border-white/25 border-t-white/90 motion-reduce:animate-none animate-spin" />
-            <span>准备中…</span>
-          </div>
+      <main className="relative z-[1] flex min-h-screen items-center justify-center">
+        <div role="status" aria-live="polite">
+          <span className="sr-only">加载中</span>
+          <div className="h-10 w-10 rounded-full border-[3px] border-white/25 border-t-white/90 motion-reduce:animate-none animate-spin" />
         </div>
       </main>
     </div>

package/template/package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev -p 5005",
     "build": "next build",
     "start": "next start",
     "check": "tsc -p tsconfig.json --noEmit",

package/template/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/.env.example

@@ -0,0 +1,8 @@
+# 复制为 .env.local 并填入真实值（.env.local 不会被提交）
+#
+# Postgres 连接串（Drizzle + pg 使用）
+# 示例：
+# DATABASE_URL="postgres://user:pass@localhost:5432/mydb"
+DATABASE_URL=""
+
+

package/template-hono/AGENTS.md

@@ -0,0 +1,39 @@
+# 项目 Agent 指南（Hono + Vite + React + Drizzle）
+
+默认使用中文沟通与输出（除非用户明确要求其他语言）。
+
+## 技术栈与约束
+
+- 框架：Hono（Node runtime）+ Vite（单进程开发）
+- 前端：React 19 + React Router + Tailwind v4 + shadcn/ui
+- 请求层：React Query + fetch
+- 契约：Zod（`shared/routes.ts`）
+- 数据库：Postgres + Drizzle
+
+## 目录约定
+
+- `client/index.html`：Vite 前端入口 HTML
+- `client/public/`：前端静态资源
+- `client/src/`：前端应用入口、页面、Provider、错误边界
+- `client/src/components/ui/`：shadcn/ui 组件
+- `client/src/hooks/`：客户端 hooks
+- `client/src/lib/`：通用工具
+- `server/`：Hono 入口、路由、存储、DB
+- `shared/`：前后端共享 schema/契约
+
+## 常用命令
+
+- `pnpm dev`：单进程开发（Vite + Hono dev middleware）
+- `pnpm build`：构建前端并编译 server
+- `pnpm start`：生产启动
+- `pnpm check`：类型检查
+- `pnpm lint`：ESLint
+- `pnpm db:push`：同步数据库结构
+
+## 开发规则
+
+- 服务端数据库逻辑放在 `server/`，不要泄漏到客户端。
+- API 响应必须经过 `shared/routes.ts` 的 Zod schema 校验。
+- 不提交 `.env.local`、数据库密钥。
+- 优先复用 `client/src/components/ui` 与 `client/src/hooks`，避免重复造轮子。
+

package/template-hono/README.md

@@ -0,0 +1,58 @@
+# hono-app
+
+基于 **Hono + Vite + React** 的全栈模板，目标是保留原 `nextjs-app` 的前端体验，同时降低服务端运行开销。
+
+## 技术栈
+
+- 前端：React 19、React Router、Tailwind CSS v4、shadcn/ui、React Query
+- 后端：Hono（Node runtime）
+- 数据层：Drizzle ORM + PostgreSQL (`pg`)
+- 校验契约：Zod（`shared/routes.ts`）
+
+## 目录结构（重点）
+
+- `client/index.html`：前端入口 HTML
+- `client/public/`：前端静态资源
+- `client/src/components/ui/`：shadcn/ui 组件
+- `client/src/hooks/`：前端 hooks
+- `client/src/lib/`：前端通用工具
+- `server/`：Hono 后端入口与路由
+- `shared/`：前后端共享契约与 schema
+
+## 开发
+
+```bash
+pnpm install
+pnpm dev
+```
+
+默认端口由 `/.imagicma/port.json` 锁定（模板默认 `5001`）。
+请勿直接执行 `vite` 启动，必须使用 `pnpm dev`。
+
+## 构建与运行
+
+```bash
+pnpm build
+pnpm start
+```
+
+- `build` 产出：
+  - 前端：`dist/client`
+  - 后端：`dist/server`
+- `start`：由受保护脚本启动服务（禁止直接 `node dist/server/index.js`），并由 Hono 承载 API + 静态资源 + SPA fallback。
+- 生产端口同样由 `/.imagicma/port.json` 锁定，不接受 `PORT` 覆盖。
+
+## 数据库
+
+1. 复制 `.env.example` 为 `.env.local`
+2. 填写 `DATABASE_URL`
+3. 初始化结构：
+
+```bash
+pnpm db:push
+```
+
+## 验证路径
+
+- API：`GET /api/greeting`
+- 页面：`/hello`

package/template-hono/client/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="zh-CN" data-theme-style="quadratic">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>hono-app</title>
+    <script src="/imagicma-picker-bridge.js"></script>
+  </head>
+  <body class="antialiased">
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/template-hono/client/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/client/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>