// ==========================================================================
// 共用 UI 與工具
// ==========================================================================

const Section = ({ id, num, zh, en, children }) => (
  <section id={id} className="ds-section" data-screen-label={`${num} ${zh}`}>
    {children}
  </section>
);

const Card = ({ id, title, children, flat }) => {
  // 標題完全跟 sidebar 的 en + zh 一致（id 對應 NAV_MAP）
  // 後台只可覆寫「簡介說明」(intro)，標題鎖死
  // flat=true 模式：移除外框、padding、標題（給 Palette → Code 全頁顯示用）
  // 注意：className 永遠保持 "ds-card" 不變，避免 React reconcile 洗掉 routing 加的 is-active
  const navItem = window.NAV_MAP?.[id];
  const cleanFallback = String(title || "").replace(/^(Foundations|Principles|Components|Patterns)-/, "");
  const displayEn = navItem?.en || cleanFallback;
  const displayZh = navItem?.zh || "";
  const intro = window.dsBootData?.pageContents?.[id]?.intro;
  const flatStyle = flat ? {
    background: "transparent",
    border: "none",
    boxShadow: "none",
    padding: 0,
  } : undefined;
  // flat 切換時，強制保留 is-active class（避免被 React 重渲染時洗掉）
  React.useEffect(() => {
    const el = document.getElementById(id);
    if (el && location.hash.replace(/^#/, "") === id) {
      el.classList.add("is-active");
    }
  }, [id, flat]);
  return (
    <article id={id} className="ds-card" style={flatStyle}>
      {!flat && (
        <header className="ds-card__head">
          <div className="ds-card__bar" />
          <div>
            <div className="ds-card__title">{displayEn}</div>
            {displayZh && <div className="ds-card__ver">{displayZh}</div>}
          </div>
        </header>
      )}
      {!flat && intro && <div className="ds-card__intro">{intro}</div>}
      {children}
    </article>
  );
};

const Spec = ({ headers, rows }) => (
  <table className="ds-spec">
    <thead><tr>{headers.map((h, i) => <th key={i}>{h}</th>)}</tr></thead>
    <tbody>{rows.map((r, i) => (
      <tr key={i}>{r.map((c, j) => <td key={j}>{c}</td>)}</tr>
    ))}</tbody>
  </table>
);

// 簡易圖示
const Icon = ({ name, size = 18, color = "currentColor", style }) => {
  const P = {
    check: "M5 12l5 5L20 7",
    plus:  "M12 5v14M5 12h14",
    x:     "M6 6l12 12M18 6L6 18",
    search:"M11 19a8 8 0 1 1 0-16 8 8 0 0 1 0 16zM21 21l-4.3-4.3",
    chev:  "M6 9l6 6 6-6",
    chevR: "M9 6l6 6-6 6",
    chevL: "M15 6l-6 6 6 6",
    chevU: "M18 15l-6-6-6 6",
    edit:  "M12 20h9M16.5 3.5a2.121 2.121 0 1 1 3 3L7 19l-4 1 1-4L16.5 3.5z",
    trash: "M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6",
    info:  "M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20zM12 16v-4M12 8h.01",
    warn:  "M10.3 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0zM12 9v4M12 17h.01",
    err:   "M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20zM15 9l-6 6M9 9l6 6",
    ok:    "M22 11.08V12a10 10 0 1 1-5.93-9.14M22 4L12 14.01l-3-3",
    bell:  "M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9zM13.73 21a2 2 0 0 1-3.46 0",
    user:  "M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2M12 11a4 4 0 1 1 0-8 4 4 0 0 1 0 8z",
    home:  "M3 9l9-7 9 7v11a2 2 0 0 1-2 2h-4v-7H10v7H6a2 2 0 0 1-2-2V9z",
    menu:  "M3 6h18M3 12h18M3 18h18",
    star:  "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z",
    heart: "M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z",
    set:   "M12 15a3 3 0 1 1 0-6 3 3 0 0 1 0 6zM19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 0 1-4 0v-.1A1.7 1.7 0 0 0 9 19.4a1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 0 1 0-4h.1A1.7 1.7 0 0 0 4.6 9a1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1A1.7 1.7 0 0 0 9 4.6V3a2 2 0 0 1 4 0v.1A1.7 1.7 0 0 0 14 4.6a1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 0 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z",
    upload:"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12",
    download:"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3",
    eye:   "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8zM12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z",
    cal:   "M19 4H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zM16 2v4M8 2v4M3 10h18",
    mail:  "M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zM22 6l-10 7L2 6",
    file:  "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zM14 2v6h6",
    folder:"M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z",
    grid:  "M3 3h7v7H3zM14 3h7v7h-7zM14 14h7v7h-7zM3 14h7v7H3z",
    list:  "M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01",
    filter:"M22 3H2l8 9.46V19l4 2v-8.54L22 3z",
    refresh:"M23 4v6h-6M1 20v-6h6M3.5 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.65 4.36A9 9 0 0 0 20.5 15",
    arrR:  "M5 12h14M12 5l7 7-7 7",
    arrL:  "M19 12H5M12 19l-7-7 7-7",
    lock:  "M19 11H5a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2zM7 11V7a5 5 0 0 1 10 0v4",
    copy:  "M20 9h-9a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2zM5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1",
    link:  "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71",
    pin:   "M12 17v5M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z",
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color}
         strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden style={style}>
      <path d={P[name] || P.info} />
    </svg>
  );
};

// 真實按鈕（給 Components / Patterns 用）
const B = ({ kind = "filled", size, danger, icon, children, disabled, onClick, ...r }) => (
  <button
    {...r}
    disabled={disabled}
    onClick={onClick}
    className={[
      "b",
      kind === "filled" && (danger ? "b--danger" : "b--filled"),
      kind === "toner" && "b--toner",
      kind === "outline" && "b--outline",
      kind === "ghost" && "b--ghost",
      size === "sm" && "b--sm",
      size === "lg" && "b--lg",
    ].filter(Boolean).join(" ")}
    style={{ opacity: disabled ? 0.4 : 1, cursor: disabled ? "not-allowed" : "pointer" }}
  >
    {icon && <Icon name={icon} size={16} />}
    {children}
  </button>
);

// ==========================================================================
// Interactive form controls (有 state)
// ==========================================================================

const Checkbox = ({ label, defaultChecked = false, indeterminate, disabled, onChange }) => {
  const [checked, setChecked] = React.useState(defaultChecked);
  const showCheck = checked && !indeterminate;
  const filled = checked || indeterminate;
  return (
    <label
      onClick={() => { if (!disabled) { const v = !checked; setChecked(v); onChange?.(v); } }}
      style={{ display: "inline-flex", alignItems: "center", gap: 8, opacity: disabled ? 0.4 : 1, cursor: disabled ? "not-allowed" : "pointer", fontSize: 14, color: "var(--n-800)" }}>
      <span style={{
        width: 18, height: 18, borderRadius: 4,
        background: filled ? "var(--blue-500)" : "#fff",
        border: `1.5px solid ${filled ? "var(--blue-500)" : "var(--n-300)"}`,
        display: "inline-flex", alignItems: "center", justifyContent: "center",
        transition: "all var(--dur-fast) var(--ease)",
      }}>
        {showCheck && <Icon name="check" size={12} color="#fff" />}
        {indeterminate && !checked && <span style={{ width: 8, height: 2, background: "#fff", borderRadius: 1 }} />}
      </span>
      {label}
    </label>
  );
};

const RadioGroup = ({ options, defaultIndex = 0, onChange, vertical }) => {
  const [idx, setIdx] = React.useState(defaultIndex);
  return (
    <div style={{ display: "flex", flexDirection: vertical ? "column" : "row", flexWrap: "wrap", gap: vertical ? 10 : 16 }}>
      {options.map((opt, i) => (
        <label key={i}
          onClick={() => { setIdx(i); onChange?.(i); }}
          style={{ display: "inline-flex", alignItems: "center", gap: 8, fontSize: 14, color: "var(--n-800)", cursor: "pointer" }}>
          <span style={{
            width: 18, height: 18, borderRadius: "50%", background: "#fff",
            border: `1.5px solid ${idx === i ? "var(--blue-500)" : "var(--n-300)"}`,
            display: "inline-flex", alignItems: "center", justifyContent: "center",
            transition: "all var(--dur-fast) var(--ease)",
          }}>
            {idx === i && <span style={{ width: 8, height: 8, borderRadius: "50%", background: "var(--blue-500)" }} />}
          </span>
          {opt}
        </label>
      ))}
    </div>
  );
};

const Switch = ({ defaultOn = false, size, disabled, onChange }) => {
  const [on, setOn] = React.useState(defaultOn);
  const w = size === "sm" ? 32 : 40;
  const h = size === "sm" ? 18 : 22;
  const dot = h - 4;
  return (
    <span
      onClick={() => { if (!disabled) { const v = !on; setOn(v); onChange?.(v); } }}
      style={{
        display: "inline-block", width: w, height: h, borderRadius: 999,
        background: on ? "var(--blue-500)" : "var(--n-300)",
        position: "relative", cursor: disabled ? "not-allowed" : "pointer",
        opacity: disabled ? 0.4 : 1,
        transition: "background var(--dur-fast) var(--ease)",
      }}>
      <span style={{
        position: "absolute", top: 2, left: on ? w - dot - 2 : 2,
        width: dot, height: dot, borderRadius: "50%", background: "#fff",
        boxShadow: "0 1px 3px rgba(0,0,0,.2)", transition: "left var(--dur-fast) var(--ease)",
      }} />
    </span>
  );
};

const Tabs = ({ items, defaultIndex = 0, onChange }) => {
  const [idx, setIdx] = React.useState(defaultIndex);
  return (
    <>
      <div style={{ display: "flex", gap: 24, borderBottom: "1px solid var(--n-200)" }}>
        {items.map((t, i) => (
          <div key={i}
            onClick={() => { setIdx(i); onChange?.(i); }}
            style={{
              padding: "12px 4px", fontSize: 14,
              color: i === idx ? "var(--blue-500)" : "var(--n-700)",
              fontWeight: i === idx ? 500 : 400,
              borderBottom: i === idx ? "2px solid var(--blue-500)" : "2px solid transparent",
              cursor: "pointer", transition: "all var(--dur-fast) var(--ease)",
            }}>{t}</div>
        ))}
      </div>
    </>
  );
};

const Pagination = ({ total = 9, defaultPage = 1 }) => {
  const [page, setPage] = React.useState(defaultPage);
  const pages = total <= 7
    ? Array.from({ length: total }, (_, i) => i + 1)
    : (page <= 4
        ? [1, 2, 3, 4, 5, "…", total]
        : page >= total - 3
          ? [1, "…", total - 4, total - 3, total - 2, total - 1, total]
          : [1, "…", page - 1, page, page + 1, "…", total]);
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 4 }}>
      <div onClick={() => setPage(Math.max(1, page - 1))} style={pagBtn(page === 1)}><Icon name="chevL" size={14} /></div>
      {pages.map((n, i) => (
        <div key={i}
          onClick={() => typeof n === "number" && setPage(n)}
          style={{ ...pagBtn(false, n === page), cursor: typeof n === "number" ? "pointer" : "default" }}>{n}</div>
      ))}
      <div onClick={() => setPage(Math.min(total, page + 1))} style={pagBtn(page === total)}><Icon name="chevR" size={14} /></div>
    </div>
  );
};

const Slider = ({ defaultValue = 40, min = 0, max = 100 }) => {
  const [v, setV] = React.useState(defaultValue);
  const pct = ((v - min) / (max - min)) * 100;
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 12, width: "100%" }}>
      <div style={{ flex: 1, height: 6, background: "var(--n-200)", borderRadius: 999, position: "relative" }}>
        <div style={{ position: "absolute", left: 0, top: 0, bottom: 0, width: `${pct}%`, background: "var(--blue-500)", borderRadius: 999 }} />
        <input type="range" min={min} max={max} value={v} onChange={(e) => setV(+e.target.value)}
          style={{ position: "absolute", inset: 0, width: "100%", height: "100%", opacity: 0, cursor: "pointer", margin: 0 }} />
        <div style={{ position: "absolute", left: `calc(${pct}% - 8px)`, top: "50%", transform: "translateY(-50%)", width: 16, height: 16, background: "#fff", border: "2px solid var(--blue-500)", borderRadius: "50%", boxShadow: "var(--shadow-1)", pointerEvents: "none" }} />
      </div>
      <span style={{ fontFamily: "var(--ff-mono)", fontSize: 13, color: "var(--n-700)", minWidth: 36, textAlign: "right" }}>{v}</span>
    </div>
  );
};

const Rate = ({ defaultValue = 3, total = 5 }) => {
  const [v, setV] = React.useState(defaultValue);
  const [hover, setHover] = React.useState(0);
  const show = hover || v;
  return (
    <div style={{ display: "inline-flex", gap: 4 }} onMouseLeave={() => setHover(0)}>
      {Array.from({ length: total }, (_, i) => i + 1).map((n) => (
        <span key={n}
          onMouseEnter={() => setHover(n)}
          onClick={() => setV(n)}
          style={{ cursor: "pointer", lineHeight: 0 }}>
          <svg width="22" height="22" viewBox="0 0 24 24" fill={show >= n ? "#faad14" : "#e6e9ee"}>
            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
          </svg>
        </span>
      ))}
    </div>
  );
};

const Select = ({ options, defaultIndex = 0, placeholder = "請選擇", width = 200 }) => {
  const [open, setOpen] = React.useState(false);
  const [idx, setIdx] = React.useState(defaultIndex);
  const ref = React.useRef(null);
  React.useEffect(() => {
    const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener("mousedown", onDoc);
    return () => document.removeEventListener("mousedown", onDoc);
  }, []);
  return (
    <div ref={ref} style={{ position: "relative", display: "inline-block", width }}>
      <div onClick={() => setOpen(!open)} style={{
        height: 36, padding: "0 12px", border: `1.5px solid ${open ? "var(--blue-500)" : "var(--n-300)"}`,
        borderRadius: 6, display: "flex", alignItems: "center", justifyContent: "space-between",
        cursor: "pointer", fontSize: 14, background: "#fff", transition: "border-color var(--dur-fast) var(--ease)",
        boxShadow: open ? "0 0 0 3px rgba(36,146,255,.15)" : "none",
      }}>
        <span style={{ color: idx >= 0 ? "var(--n-900)" : "var(--n-500)" }}>{idx >= 0 ? options[idx] : placeholder}</span>
        <Icon name="chev" size={14} color="var(--n-500)" style={{ transform: open ? "rotate(180deg)" : "none", transition: "transform var(--dur-fast) var(--ease)" }} />
      </div>
      {open && (
        <div className="ds-menu" style={{ position: "absolute", top: "calc(100% + 4px)", left: 0, right: 0, zIndex: 20 }}>
          {options.map((o, i) => (
            <div key={i} className={`ds-menu__item ${i === idx ? "is-active" : ""}`}
              onClick={() => { setIdx(i); setOpen(false); }}>
              {o}
              {i === idx && <Icon name="check" size={14} color="var(--blue-500)" style={{ marginLeft: "auto" }} />}
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

const Collapse = ({ items, defaultOpenIndex = 0 }) => {
  const [open, setOpen] = React.useState(defaultOpenIndex);
  return (
    <div className="ds-collapse">
      {items.map((it, i) => (
        <div key={i} className={`ds-collapse__item ${i === open ? "is-open" : ""}`}>
          <div className="ds-collapse__head" onClick={() => setOpen(i === open ? -1 : i)}>
            <span className="ds-collapse__chev"><Icon name="chevR" size={14} /></span>
            <span>{it.title}</span>
          </div>
          {i === open && <div className="ds-collapse__body">{it.body}</div>}
        </div>
      ))}
    </div>
  );
};

// 共用樣式 helpers
function inputCss(disabled) {
  return {
    width: "100%", height: 36, padding: "0 12px", marginTop: 6,
    border: "1px solid var(--n-300)", borderRadius: 6, fontSize: 14, fontFamily: "var(--ff)",
    background: disabled ? "var(--n-50)" : "#fff",
    color: disabled ? "var(--n-500)" : "var(--n-900)",
    outline: "none",
  };
}
function pagBtn(disabled, active) {
  return {
    minWidth: 32, height: 32, padding: "0 8px", display: "inline-flex", alignItems: "center", justifyContent: "center",
    border: `1px solid ${active ? "var(--blue-500)" : "var(--n-200)"}`,
    background: active ? "var(--blue-500)" : "#fff",
    color: active ? "#fff" : "var(--n-700)",
    borderRadius: 6,
    fontFamily: "var(--ff-en)", fontSize: 13,
    cursor: disabled ? "not-allowed" : "pointer",
    opacity: disabled ? 0.4 : 1,
    transition: "all var(--dur-fast) var(--ease)",
  };
}

Object.assign(window, { Section, Card, Spec, Icon, B, Checkbox, RadioGroup, Switch, Tabs, Pagination, Slider, Rate, Select, Collapse, inputCss, pagBtn, Spinner });

// 共用 Spinner（也曾在 components-section 出現過，集中放這裡）
function Spinner({ size = 20 }) {
  return (
    React.createElement("span", { style: { display: "inline-block", width: size, height: size, position: "relative" } },
      React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", style: { animation: "ds-spin 0.9s linear infinite" } },
        React.createElement("circle", { cx: 12, cy: 12, r: 9, fill: "none", stroke: "var(--n-200)", strokeWidth: 2.5 }),
        React.createElement("circle", { cx: 12, cy: 12, r: 9, fill: "none", stroke: "var(--blue-500)", strokeWidth: 2.5, strokeLinecap: "round", strokeDasharray: "14 56" })
      ),
      React.createElement("style", null, "@keyframes ds-spin{to{transform:rotate(360deg)}}")
    )
  );
}
window.Spinner = Spinner;

// ==========================================================================
// 元件文件共用容器 — Demo block / DocCard / CompGrid
// （給 comp-*.jsx 與 components-section.jsx 引用）
// ==========================================================================
function Demo({ title, desc, children, fitContent }) {
  return (
    React.createElement("div", { style: { marginBottom: 28 } },
      React.createElement("h3", { className: "ds-h3", style: { marginBottom: 6 } }, title),
      desc && React.createElement("p", { className: "ds-desc", style: { marginBottom: 14 } }, desc),
      React.createElement("div", {
        style: {
          background: "#fff", border: "1px solid var(--n-200)", borderRadius: 8,
          padding: fitContent ? 24 : "36px 28px",
          display: "flex", flexWrap: "wrap", gap: 16, alignItems: "center",
          justifyContent: "flex-start",
          minHeight: fitContent ? "auto" : 110,
        }
      }, children)
    )
  );
}

function DocCard({ id, en, intro, children }) {
  return (
    React.createElement(Card, { id, title: `Components-${en}` },
      intro && React.createElement("p", { className: "ds-desc", style: { marginTop: -8, marginBottom: 24, maxWidth: 780 } }, intro),
      children
    )
  );
}

function CompGrid({ items }) {
  return (
    React.createElement("div", {
      style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))", gap: 14 }
    }, items.map((it) =>
      React.createElement("a", { key: it.id, href: `#${it.id}`, style: { textDecoration: "none" } },
        React.createElement("div", {
          style: {
            background: "#fff", border: "1px solid var(--n-200)", borderRadius: 10,
            overflow: "hidden", display: "flex", flexDirection: "column",
            transition: "all var(--dur-fast) var(--ease)", cursor: "pointer",
          },
          onMouseEnter: (e) => { e.currentTarget.style.boxShadow = "var(--shadow-3)"; e.currentTarget.style.borderColor = "var(--blue-300)"; e.currentTarget.style.transform = "translateY(-2px)"; },
          onMouseLeave: (e) => { e.currentTarget.style.boxShadow = "none"; e.currentTarget.style.borderColor = "var(--n-200)"; e.currentTarget.style.transform = "translateY(0)"; },
        },
          React.createElement("div", {
            style: {
              height: 130, background: "var(--n-50)", borderBottom: "1px solid var(--n-200)",
              display: "flex", alignItems: "center", justifyContent: "center", padding: 12, overflow: "hidden",
            }
          }, it.demo),
          React.createElement("div", { style: { padding: "12px 14px", display: "flex", alignItems: "center", gap: 8 } },
            React.createElement(Icon, { name: "file", size: 14, color: "var(--n-400)" }),
            React.createElement("div", { style: { fontSize: 13, color: "var(--n-900)", lineHeight: 1.4 } },
              React.createElement("span", { style: { fontWeight: 600 } }, it.en),
              React.createElement("span", { style: { color: "var(--n-500)", marginLeft: 4 } }, `-${it.zh}`)
            )
          )
        )
      )
    ))
  );
}

window.Demo = Demo;
window.DocCard = DocCard;
window.CompGrid = CompGrid;