create-next-imagicma 0.0.5 → 0.0.7

package/template-hono/client/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/client/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/client/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/client/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/client/src/App.tsx

@@ -0,0 +1,13 @@
+import { Navigate, Route, Routes } from "react-router-dom";
+import { HelloPage } from "./pages/HelloPage";
+import { HomePage } from "./pages/HomePage";
+
+export function App() {
+  return (
+    <Routes>
+      <Route path="/" element={<HomePage />} />
+      <Route path="/hello" element={<HelloPage />} />
+      <Route path="*" element={<Navigate to="/" replace />} />
+    </Routes>
+  );
+}

package/template-hono/client/src/components/ErrorBoundary.tsx

@@ -0,0 +1,74 @@
+import React from "react";
+
+type AppErrorBoundaryState = {
+  error: Error | null;
+};
+
+export class AppErrorBoundary extends React.Component<
+  { children: React.ReactNode },
+  AppErrorBoundaryState
+> {
+  state: AppErrorBoundaryState = { error: null };
+
+  static getDerivedStateFromError(error: Error): AppErrorBoundaryState {
+    return { error };
+  }
+
+  componentDidCatch(error: Error) {
+    console.error(error);
+  }
+
+  private reset = () => {
+    this.setState({ error: null });
+  };
+
+  render() {
+    const { error } = this.state;
+    if (!error) {
+      return this.props.children;
+    }
+
+    const isDev = import.meta.env.DEV;
+    const message = isDev ? (error.message || "发生未知错误").trim() : "";
+
+    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"
+        role="alert"
+      >
+        <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">
+            <h1 className="text-3xl font-semibold tracking-tight">预览暂时不可用</h1>
+            <p className="mt-4 max-w-md text-base leading-7 text-white/80">
+              检测到错误。修复后可点击“重试”恢复，或直接刷新页面。
+            </p>
+
+            {isDev && message ? (
+              <pre className="mt-6 w-full max-h-40 overflow-auto rounded-2xl border border-white/10 bg-black/25 p-4 text-left text-sm leading-6 text-white/85 shadow-inner">
+                <code>{message}</code>
+              </pre>
+            ) : null}
+
+            <div className="mt-8 flex w-full flex-col gap-3 sm:flex-row sm:justify-center">
+              <button
+                type="button"
+                className="inline-flex h-11 w-full items-center justify-center rounded-full bg-white px-5 text-sm font-medium text-black transition-colors hover:bg-white/90 sm:w-auto"
+                onClick={this.reset}
+              >
+                重试
+              </button>
+              <button
+                type="button"
+                className="inline-flex h-11 w-full items-center justify-center rounded-full border border-white/20 bg-white/10 px-5 text-sm font-medium text-white transition-colors hover:bg-white/15 sm:w-auto"
+                onClick={() => window.location.reload()}
+              >
+                刷新页面
+              </button>
+            </div>
+          </div>
+        </main>
+      </div>
+    );
+  }
+}

package/template-hono/client/src/components/HelloClient.tsx

@@ -0,0 +1,69 @@
+import * as React from "react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { useGreeting } from "@/hooks/use-greeting";
+import { toast } from "@/hooks/use-toast";
+
+export function HelloClient() {
+  const { data, isLoading, error, refetch, isFetching } = useGreeting();
+
+  const status = isLoading ? "loading" : error ? "error" : "ready";
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center justify-between gap-4">
+          <div className="space-y-1">
+            <CardTitle>GET /api/greeting</CardTitle>
+            <CardDescription>响应会被 Zod 校验，并展示到 UI 中。</CardDescription>
+          </div>
+          <Badge variant={status === "error" ? "destructive" : "secondary"}>{status}</Badge>
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="rounded-lg border bg-card p-4">
+          {isLoading ? (
+            <p className="text-sm text-muted-foreground">加载中…</p>
+          ) : error ? (
+            <p className="text-sm text-destructive">
+              {error instanceof Error ? error.message : "请求失败"}
+            </p>
+          ) : (
+            <p className="text-lg leading-7">“{data?.message}”</p>
+          )}
+        </div>
+
+        <div className="flex flex-wrap gap-2">
+          <Button type="button" onClick={() => refetch()} disabled={isFetching}>
+            {isFetching ? "刷新中…" : "刷新"}
+          </Button>
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() =>
+              toast({
+                title: "Toast 正常工作",
+                description: "如果你能看到我，说明 shadcn/toast 已接入。",
+              })
+            }
+          >
+            触发 Toast
+          </Button>
+        </div>
+
+        <EnvHint />
+      </CardContent>
+    </Card>
+  );
+}
+
+function EnvHint() {
+  return (
+    <div className="text-sm text-muted-foreground">
+      <p>
+        若 API 报错请检查：是否已在 <code>.env.local</code> 设置 <code>DATABASE_URL</code>，并执行 <code>npm run db:push</code>。
+      </p>
+    </div>
+  );
+}

package/template-hono/client/src/components/ui/accordion.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b", className)}
+    {...props}
+  />
+))
+AccordionItem.displayName = "AccordionItem"
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+))
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }