npm - @qnroa/qtype - Versions diffs - 0.2.1 → 0.2.3 - Mend

@qnroa/qtype 0.2.1 → 0.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (20) hide show

package/CHANGELOG.md +94 -0
package/CHANGELOG.zh.md +72 -0
package/dist/cli/commands/publish/build/action.js +63 -9
package/dist/cli/commands/repo/new/action.js +14 -0
package/dist/core/typing/engine/TypingInput.js +22 -39
package/dist/view/assets/{index-B_HnQEsb.js → index-B_3g67jY.js} +2 -2
package/dist/view/assets/index-CeFBpbIw.js +194 -0
package/dist/view/assets/{index-BbG90BH8.js → index-Cj70GP_V.js} +1 -1
package/dist/view/assets/index-VPadwWzO.css +1 -0
package/dist/view/index.html +3 -3
package/dist/view/logo.svg +21 -0
package/package.json +1 -1
package/templates/en/.qtype/assets/favicon.svg +21 -0
package/templates/en/.qtype/assets/logo.svg +21 -0
package/templates/zh/.qtype/assets/favicon.svg +21 -0
package/templates/zh/.qtype/assets/logo.svg +21 -0
package/dist/view/assets/index-B8531CqV.css +0 -1
package/dist/view/assets/index-eEQRUOZD.js +0 -194
/package/dist/view/{qtype-mark.svg → favicon.svg} +0 -0
/package/dist/view/{qtype-logo.svg → wordmark.svg} +0 -0

package/CHANGELOG.md CHANGED Viewed

@@ -13,6 +13,100 @@ can land in any minor bump (`0.x.0`).
 ## [Unreleased]
+## [0.2.3] — 2026-09-07
+Fixes long-standing bugs around Chinese IME input on the typing arena
+and cleans up how "ignore punctuation" behaves. The invisible editor
+is now a `<input>` instead of a contenteditable div, matching the
+pattern every mainstream Chinese typing site uses; character capture
+reads `el.value` on the `input` event, so IME commits arrive as the
+final glyph — no more races between keydown and beforeinput.
+### Added
+- **Miss-slot display setting** (Appearance → Miss display). Default
+  keeps the target glyph visible in red (matches Monkeytype / keybr
+  / ohMyType / ptype conventions — user sees *what should have been
+  there*). Flip to "Typed" to render the user's actual keystroke in
+  red at the miss slot instead — useful when reviewing exactly what
+  went wrong.
+### Changed
+- **Editor element is now a hidden `<input>`, not `<div
+  contentEditable>`.** IME commits and macOS smart-punctuation
+  substitutions land in `el.value` as the final glyph, which the
+  `input` event reads and emits to the engine. Composition (pinyin
+  preedit) is gated on the event's own `isComposing` /
+  `inputType === 'insertCompositionText'` signals rather than the
+  hook's state machine, so browsers that fire `input` before
+  `compositionstart` can't leak preedit letters through as
+  characters.
+- **`Ignore punctuation` now rewrites punctuation to space at engine
+  construction.** Previously the engine fast-forwarded through
+  punctuation slots inside `onKeyDown`, which left the arena still
+  showing punctuation and the on-screen keyboard still hinting the
+  punctuation key. Now every punctuation codepoint in the target
+  becomes a regular space up-front — the arena, the keyboard hint
+  and the engine all see the same target sequence, no divergence.
+  Toggling the setting mid-card rebuilds the engine via the
+  `useTypingEngine` memo.
+### Fixed
+- **Chinese full-width punctuation shown as ASCII.** The old
+  keydown-based capture path picked up whichever of `keydown.key` /
+  `beforeinput.data` fired first and could substitute a half-width
+  glyph. Moving to `<input>` + `input` event and always rendering
+  the target glyph (default) puts an end to this class of bug.
+- **Dead `softInsertText` handler removed** from `INPUT_TYPE_HANDLERS`
+  and the `handleBeforeInput` fast-path; character emission has a
+  single owner now (the `input` event).
+## [0.2.2] — 2026-09-01
+A responsive footer, a convention-based way to swap the site logo
+and favicon without touching code, and a housecleaning rename of the
+public-facing brand assets to drop the redundant `qtype-` prefix.
+### Added
+- **Custom site logo via `.qtype/assets/logo.{svg,png}`.** `qtype repo
+  new` seeds `<repo>/.qtype/assets/logo.svg` from the language template,
+  and `qtype publish build` copies that file over the default
+  `logo.<ext>` in `dist/` when it's present. Users edit the file in
+  place (keeping the filename `logo.<ext>`) — no config key, no CLI
+  flag. Missing file → the built-in default keeps working. Used by the
+  Header brand mark; the browser tab now reads a separate `favicon`
+  (see below).
+- **Custom favicon via `.qtype/assets/favicon.{svg,png,ico}`.** Same
+  convention as the logo — drop a file at this path, `publish build`
+  ships it as `dist/favicon.<ext>` and rewrites `index.html`'s
+  `<link rel="icon">` to point at the resolved format. Separating
+  favicon from logo lets users keep a wide Header brand mark while
+  still having a square browser-tab icon.
+- **`data-qtype-logo-ext` on `<html>`** — new boot attribute so the
+  Header's runtime `<img>` can point at `/logo.<ext>` with the right
+  extension after a build.
+### Changed
+- **Public brand assets renamed** to drop the `qtype-` prefix: files
+  in `src/view/public/` are now `logo.svg`, `favicon.svg`,
+  `wordmark.svg`; the built site emits `dist/logo.<ext>`,
+  `dist/favicon.<ext>`, and `dist/wordmark.svg` (unused for now, kept
+  around for future brand surfaces). Any external consumer referencing
+  `qtype-mark.svg` / `qtype-logo.svg` (the old file names) in
+  hard-coded URLs will need to update — but the runtime `<link rel="icon">`
+  and Header `<img>` are both regenerated on build so a fresh
+  `publish build` in an existing repo is enough.
+- **Footer material name is now responsive.** The left-side title
+  truncates with an ellipsis on all viewports (max width 240px on
+  desktop, 80px on narrow screens, hidden below 400px) so an unusually
+  long material title can't crowd the absolute-centered CardNav or
+  push the theme/settings buttons around.
+- **Footer layout wraps the title in an inner span**, which lets the
+  outer flex slot keep claiming the remaining space (so the right-side
+  buttons stay pinned to the edge) while the inner span alone handles
+  the ellipsis. Fixes a mobile-only regression where the settings /
+  theme buttons drifted next to the title instead of hugging the right
+  edge.
 ## [0.2.1] — 2026-09-01
 Discoverability pass for `qtype config`. Users no longer have to grep

package/CHANGELOG.zh.md CHANGED Viewed

@@ -12,6 +12,78 @@ English: [CHANGELOG.md](https://www.npmjs.com/package/@qnroa/qtype?activeTab=cod
 ## [Unreleased]
+## [0.2.3] — 2026-09-07
+修复打字界面在中文输入法下的一系列老问题,并把"忽略标点"的行为
+理顺。隐藏的输入编辑器从 contenteditable 换成 `<input>`,和主流
+中文打字站的做法一致;字符捕获改为在 `input` 事件里读 `el.value`,
+IME 提交后的最终字符直接进引擎 —— 不再有 keydown 和 beforeinput
+的竞态。
+### 新增
+- **错误显示设置**(外观 → 错误显示)。默认保持目标字符可见(红色),
+  和 Monkeytype / keybr / ohMyType / ptype 一致 —— 用户看到的是
+  "本来应该是什么"。切到"实际输入"则在错误位置显示用户实际敲入
+  的字符(仍然红色),方便复盘到底敲错在哪。
+### 变更
+- **编辑器元素从 `<div contentEditable>` 改为隐藏 `<input>`。** IME
+  提交和 macOS 智能标点替换都会把最终字符写进 `el.value`,由
+  `input` 事件读到再喂给引擎。组词状态(拼音预输入)靠事件自身的
+  `isComposing` / `inputType === 'insertCompositionText'` 判断,
+  不再依赖 hook 状态机的时序;这样即便浏览器先 `input` 后
+  `compositionstart`,预输入的拼音字母也不会以字符形式泄漏出去。
+- **`忽略标点` 改为在引擎构造时把标点重写成空格。** 之前是引擎在
+  `onKeyDown` 里 fast-forward 跳过标点位置,但界面上标点还在显示,
+  键盘还在提示打标点键。现在所有标点 codepoint 上来就变空格 ——
+  arena、键盘提示、引擎看到的目标序列完全一致,不会跑偏。中途切换
+  设置时通过 `useTypingEngine` 的 memo 重建引擎。
+### 修复
+- **中文全角标点显示成 ASCII。** 老的 keydown 捕获路径会挑
+  `keydown.key` 或 `beforeinput.data` 里先来的那个,可能替换成半角。
+  改用 `<input>` + `input` 事件、并默认在打错位置显示目标字符,
+  这类问题一次性解决。
+- **删除死代码 `softInsertText`。** `INPUT_TYPE_HANDLERS` 和
+  `handleBeforeInput` 里的 `insertText` 特殊分支一起删掉,字符发射
+  只由 `input` 事件负责。
+## [0.2.2] — 2026-09-01
+响应式页脚,约定式自定义 logo 和 favicon(不用改代码),以及把 view
+的公用品牌资源改名去掉 `qtype-` 前缀。
+### 新增
+- **通过 `.qtype/assets/logo.{svg,png}` 自定义站点 logo。** `qtype repo
+  new` 会从语言模板复制 `logo.svg` 到 `<repo>/.qtype/assets/`;
+  `publish build` 时若该文件存在,就用它覆盖 dist 里的 `logo.<ext>`。
+  用户直接编辑该文件(保留文件名 `logo.<ext>`) —— 不用 config key,
+  不用 CLI 参数,文件不存在就用内置默认。用于 Header 品牌图标;浏
+  览器 tab 用独立的 favicon(见下)。
+- **通过 `.qtype/assets/favicon.{svg,png,ico}` 自定义浏览器 tab 图标。**
+  和 logo 同样的约定式覆盖机制,`publish build` 会把用户的 favicon
+  复制成 `dist/favicon.<ext>` 并重写 `index.html` 里的
+  `<link rel="icon">`。favicon 和 logo 分开是为了让用户可以放宽横
+  的 logo,同时保留方形的 tab 图标。
+- **`<html data-qtype-logo-ext>` 新 boot 属性** —— 让 Header 的
+  `<img src="/logo.<ext>">` 在运行时挑对扩展名。
+### 变更
+- **view 的公用品牌资源改名去掉 `qtype-` 前缀。** `src/view/public/`
+  下现在叫 `logo.svg`、`favicon.svg`、`wordmark.svg`;build 出来的
+  站点里也是 `dist/logo.<ext>`、`dist/favicon.<ext>` 和
+  `dist/wordmark.svg`(暂时没被引用,保留给以后用)。外部如果硬编码
+  引用了旧文件名(`qtype-mark.svg` / `qtype-logo.svg`)需要更新
+  —— 但运行时 `<link rel="icon">` 和 Header 的 `<img>` 都是构建时
+  重新生成的,已有 repo 只要跑一次 `publish build` 就同步了。
+- **页脚材料名做了响应式截断。** 左边的材料标题在所有断点上都会
+  ellipsis(桌面 240px 上限,窄屏 80px,超窄 400px 以下隐藏),避免过
+  长的材料标题挤占 CardNav 绝对居中区域或推走右侧的主题 / 设置按钮。
+- **标题外面包了一层 inner span**,让外层 flex 槽继续占满剩余空间
+  (右侧按钮才能贴到最右边),ellipsis 只作用在 inner span 上。修复
+  了窄屏上出现的一个视觉回归 —— 设置 / 主题按钮会飘到标题旁边,而
+  不是紧贴右侧。
 ## [0.2.1] — 2026-09-01
 `qtype config` 的可发现性升级。用户不再需要翻源码或 wiki 才知道能设

package/dist/cli/commands/publish/build/action.js CHANGED Viewed

@@ -80,11 +80,20 @@ export async function publishBuildAction(opts = {}) {
     fs.rmSync(outDir, { recursive: true, force: true });
     fs.mkdirSync(outDir, { recursive: true });
     copyDir(viewBundle, outDir);
+    // Optional brand overrides: user may drop custom assets under
+    // `<repo>/.qtype/assets/`:
+    //   - logo.{svg,png}     → Header brand mark (dist/logo.<ext>)
+    //   - favicon.{svg,png,ico} → browser tab (dist/favicon.<ext>)
+    // Whichever the user provides overrides the view bundle default;
+    // the losing sibling extensions are removed so we don't ship stale
+    // duplicates.
+    const logoExt = resolveCustomAsset(cwd, outDir, 'logo', ['svg', 'png']);
+    const faviconExt = resolveCustomAsset(cwd, outDir, 'favicon', ['svg', 'png', 'ico']);
     // Rewrite dist/index.html to carry the site's name — both in the
     // <title> (browser tab) and as a `data-qtype-repo-name` attribute on
     // <html> (read by the view's `readBootConfig()` for the header
     // brand label and anywhere else the repo name is shown).
-    rewriteIndexHtml(path.join(outDir, 'index.html'), name);
+    rewriteIndexHtml(path.join(outDir, 'index.html'), name, logoExt, faviconExt);
     // Defensive: clear any stale material/ that might have snuck into the
     // view bundle. Since dev-seed content lives at repo root's examples/
     // (served only by the vite dev middleware, not the bundle), this is a
@@ -304,7 +313,43 @@ async function resolveRepoName(cwd) {
     }
     return path.basename(cwd);
 }
-function rewriteIndexHtml(indexPath, name) {
+/**
+ * Resolve a user-provided brand asset (`logo` or `favicon`) by walking
+ * the accepted extensions in preference order and copying the first
+ * hit to `dist/<name>.<ext>`. Losing sibling extensions in the
+ * output are cleaned up so the site never carries stale defaults
+ * alongside the user's override. Returns the winning extension so
+ * downstream code (index.html rewrite, Header runtime) can build the
+ * right URL. Missing files → keep the view bundle's default (svg).
+ */
+function resolveCustomAsset(cwd, outDir, name, order) {
+    const candidates = order.map((ext) => ({
+        ext,
+        src: path.join(cwd, '.qtype', 'assets', `${name}.${ext}`),
+    }));
+    for (const c of candidates) {
+        if (!fs.existsSync(c.src))
+            continue;
+        fs.copyFileSync(c.src, path.join(outDir, `${name}.${c.ext}`));
+        for (const other of candidates) {
+            if (other.ext === c.ext)
+                continue;
+            const stale = path.join(outDir, `${name}.${other.ext}`);
+            if (fs.existsSync(stale))
+                fs.rmSync(stale, { force: true });
+        }
+        return c.ext;
+    }
+    return 'svg';
+}
+function extToMime(ext) {
+    if (ext === 'png')
+        return 'image/png';
+    if (ext === 'ico')
+        return 'image/x-icon';
+    return 'image/svg+xml';
+}
+function rewriteIndexHtml(indexPath, name, logoExt, faviconExt) {
     if (!fs.existsSync(indexPath))
         return;
     const html = fs.readFileSync(indexPath, 'utf8');
@@ -314,13 +359,22 @@ function rewriteIndexHtml(indexPath, name) {
         .replace(/>/g, '&gt;')
         .replace(/"/g, '&quot;');
     const withTitle = html.replace(/<title>[^<]*<\/title>/, `<title>${escaped}</title>`);
-    // Add or replace data-qtype-repo-name on the root <html> tag.
-    // Two branches so a re-run cleanly overwrites an existing attribute.
-    const rewritten = /<html\b[^>]*\bdata-qtype-repo-name=/.test(withTitle)
-        ? withTitle.replace(/(<html\b[^>]*\bdata-qtype-repo-name=)"[^"]*"/, `$1"${escaped}"`)
-        : withTitle.replace(/<html\b/, `<html data-qtype-repo-name="${escaped}"`);
-    if (rewritten !== html)
-        fs.writeFileSync(indexPath, rewritten);
+    // Add or replace data-qtype-repo-name / data-qtype-logo-ext on the
+    // root <html> tag. Two branches per attribute so a re-run cleanly
+    // overwrites the existing value.
+    let out = withTitle;
+    out = /<html\b[^>]*\bdata-qtype-repo-name=/.test(out)
+        ? out.replace(/(<html\b[^>]*\bdata-qtype-repo-name=)"[^"]*"/, `$1"${escaped}"`)
+        : out.replace(/<html\b/, `<html data-qtype-repo-name="${escaped}"`);
+    out = /<html\b[^>]*\bdata-qtype-logo-ext=/.test(out)
+        ? out.replace(/(<html\b[^>]*\bdata-qtype-logo-ext=)"[^"]*"/, `$1"${logoExt}"`)
+        : out.replace(/<html\b/, `<html data-qtype-logo-ext="${logoExt}"`);
+    // Rewrite the favicon <link> to point at the resolved favicon file
+    // (SVG / PNG / ICO). Kept independent of the logo so the Header
+    // and the browser tab can carry different aspect ratios.
+    out = out.replace(/<link\s+rel="icon"[^>]*>/, `<link rel="icon" type="${extToMime(faviconExt)}" href="/favicon.${faviconExt}" />`);
+    if (out !== html)
+        fs.writeFileSync(indexPath, out);
 }
 async function obtainPassword() {
     const envPwd = process.env.QTYPE_PUBLISH_PASSWORD;

package/dist/cli/commands/repo/new/action.js CHANGED Viewed

@@ -93,6 +93,20 @@ export async function repoNewAction(opts) {
     fs.mkdirSync(qtypeDir, { recursive: true });
     fs.writeFileSync(path.join(qtypeDir, 'config.json'), JSON.stringify({ repo: { lang: canonicalLang } }, null, 2) + '\n');
     console.log(`  + .qtype/config.json`);
+    // 5b. Seed brand assets from the language template so users can
+    //     rebrand by editing files in place. `publish build` picks them
+    //     up over the defaults that ship in the view bundle.
+    //       - logo.svg     → Header brand mark
+    //       - favicon.svg  → browser tab icon
+    for (const rel of ['logo.svg', 'favicon.svg']) {
+        const src = path.join(templatesDir, '.qtype', 'assets', rel);
+        if (!fs.existsSync(src))
+            continue;
+        const dest = path.join(repoDir, '.qtype', 'assets', rel);
+        fs.mkdirSync(path.dirname(dest), { recursive: true });
+        fs.copyFileSync(src, dest);
+        console.log(`  + .qtype/assets/${rel}`);
+    }
     // 6. git init (optional; requires explicit --git)
     if (opts.git === true) {
         try {

package/dist/core/typing/engine/TypingInput.js CHANGED Viewed

@@ -31,10 +31,28 @@ export class TypingInput {
     #position;
     #listeners = new Set();
     constructor(text, settings) {
-        this.#target = text;
-        this.#targetCodepoints = Array.from(text, (ch) => ch.codePointAt(0) ?? 0);
-        this.#length = this.#targetCodepoints.length;
         this.settings = { ...defaultTypingSettings, ...settings };
+        // ignorePunctuation replaces every punctuation codepoint with a
+        // regular space in the target sequence. The engine, the arena
+        // renderer, and the keyboard hint all just see a space — no
+        // fast-forward machinery, no special-case display, no divergence
+        // between what the user sees and what they need to type.
+        const raw = Array.from(text, (ch) => ch.codePointAt(0) ?? 0);
+        this.#targetCodepoints = this.settings.ignorePunctuation
+            ? raw.map((cp) => (isPunctuation(cp) ? 0x20 : cp))
+            : raw;
+        // The effective target string: rewritten if ignorePunctuation is
+        // on, else identical to `text`. Anything that consumes
+        // `engine.target` (keyboard-hint plans, mini-arena mirrors, etc.)
+        // sees exactly the sequence the engine expects the user to type.
+        // We avoid `String.fromCodePoint(...arr)` here — spreading a large
+        // codepoint array can blow the JS engine's argument-count ceiling
+        // on unusually long targets. Building char-by-char is O(n) with no
+        // fixed upper bound.
+        this.#target = this.settings.ignorePunctuation
+            ? this.#targetCodepoints.map((cp) => String.fromCodePoint(cp)).join('')
+            : text;
+        this.#length = this.#targetCodepoints.length;
         this.#chars = this.#buildInitialChars();
         this.#position = 0;
     }
@@ -60,20 +78,7 @@ export class TypingInput {
         if (this.#position >= this.#length) {
             return Feedback.Correct;
         }
-        let expected = this.#targetCodepoints[this.#position];
-        // ignorePunctuation: fast-forward through any punctuation slots
-        // before matching the user's keystroke against the next
-        // typable character. Uses a broad Unicode range so it works
-        // for both ASCII and CJK punctuation.
-        if (this.settings.ignorePunctuation) {
-            while (this.#position < this.#length &&
-                isPunctuation(this.#targetCodepoints[this.#position])) {
-                this.#autoAdvance(timestamp);
-            }
-            if (this.#position >= this.#length)
-                return Feedback.Correct;
-            expected = this.#targetCodepoints[this.#position];
-        }
+        const expected = this.#targetCodepoints[this.#position];
         // Normalize both sides through the same equivalence table so
         // fullwidth/half-width / smart-quote / CJK-punctuation variants
         // don't cause false misses. Display remains untouched.
@@ -195,28 +200,6 @@ export class TypingInput {
         for (const l of this.#listeners)
             l();
     }
-    /**
-     * Mark the current slot as auto-advanced Hit (used by
-     * `ignorePunctuation`). Records the timestamp so stats include the
-     * auto-advance in `startedAt` timing, but doesn't count it toward
-     * user keystroke totals (still shows as Hit — the punctuation was
-     * "correctly typed" via the auto-advance rule).
-     */
-    #autoAdvance(timestamp) {
-        if (this.#position >= this.#length)
-            return;
-        const expected = this.#targetCodepoints[this.#position];
-        const next = this.#chars.slice();
-        const prev = next[this.#position];
-        next[this.#position] = {
-            target: expected,
-            typed: expected,
-            attrs: (prev.attrs & ~(CharAttr.Miss | CharAttr.Cursor)) | CharAttr.Hit,
-            timestamp,
-        };
-        this.#chars = next;
-        this.#position++;
-    }
 }
 /**
  * ASCII case-insensitive comparison. Non-ASCII (CJK, accented Latin,

package/dist/view/assets/{index-B_HnQEsb.js → index-B_3g67jY.js} RENAMED Viewed

@@ -1,3 +1,3 @@
-const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/index-BbG90BH8.js","assets/index-eEQRUOZD.js","assets/index-B8531CqV.css"])))=>i.map(i=>d[i]);
-import{r as l,_ as h,u as g,j as f,C as p,M as m,T as y,a as w}from"./index-eEQRUOZD.js";let o=null,c=null;async function L(){return o||c||(c=h(()=>import("./index-BbG90BH8.js"),__vite__mapDeps([0,1,2])).then(async e=>(o=await e.createHighlighter({themes:["github-dark","github-light"],langs:[]}),o)),c)}async function _(e,t){if(!e.getLoadedLanguages().includes(t))try{await e.loadLanguage(t)}catch{}}function x(e){const[t,n]=l.useState(o);return l.useEffect(()=>{if(!e)return;let r=!1;return(async()=>{const s=await L();await _(s,e),r||n(s)})(),()=>{r=!0}},[e]),t}const A=/```(\w+)/;function E(e){const t=e.toLowerCase();return t.includes("typescript")||t.endsWith(".ts")?"typescript":t.includes("python")||t.endsWith(".py")?"python":t.includes("cpp")||t.includes("c++")?"cpp":t.includes("java")&&!t.includes("script")?"java":t.includes("go")?"go":t.includes("rust")||t.endsWith(".rs")?"rust":t.includes("code-c")||t.endsWith(".c")?"c":"javascript"}function j(e,t){if(e){const n=e.match(A);if(n)return n[1]}return E(t)}function k(e,t,n,r){if(!r||!r.getLoadedLanguages().includes(t))return new Array(Array.from(e).length).fill(null);try{const s=r.codeToTokens(e,{lang:t,theme:n}),i=[];for(const u of s.tokens){for(const a of u)for(const d of a.content)i.push(a.color??null);i.push(null)}return!e.endsWith(`
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/index-Cj70GP_V.js","assets/index-CeFBpbIw.js","assets/index-VPadwWzO.css"])))=>i.map(i=>d[i]);
+import{r as l,_ as h,u as g,j as f,C as p,M as m,T as y,a as w}from"./index-CeFBpbIw.js";let o=null,c=null;async function L(){return o||c||(c=h(()=>import("./index-Cj70GP_V.js"),__vite__mapDeps([0,1,2])).then(async e=>(o=await e.createHighlighter({themes:["github-dark","github-light"],langs:[]}),o)),c)}async function _(e,t){if(!e.getLoadedLanguages().includes(t))try{await e.loadLanguage(t)}catch{}}function x(e){const[t,n]=l.useState(o);return l.useEffect(()=>{if(!e)return;let r=!1;return(async()=>{const s=await L();await _(s,e),r||n(s)})(),()=>{r=!0}},[e]),t}const A=/```(\w+)/;function E(e){const t=e.toLowerCase();return t.includes("typescript")||t.endsWith(".ts")?"typescript":t.includes("python")||t.endsWith(".py")?"python":t.includes("cpp")||t.includes("c++")?"cpp":t.includes("java")&&!t.includes("script")?"java":t.includes("go")?"go":t.includes("rust")||t.endsWith(".rs")?"rust":t.includes("code-c")||t.endsWith(".c")?"c":"javascript"}function j(e,t){if(e){const n=e.match(A);if(n)return n[1]}return E(t)}function k(e,t,n,r){if(!r||!r.getLoadedLanguages().includes(t))return new Array(Array.from(e).length).fill(null);try{const s=r.codeToTokens(e,{lang:t,theme:n}),i=[];for(const u of s.tokens){for(const a of u)for(const d of a.content)i.push(a.color??null);i.push(null)}return!e.endsWith(`
 `)&&i.length>Array.from(e).length&&i.pop(),i}catch{return new Array(Array.from(e).length).fill(null)}}function v(e){var d;const{material:t,card:n}=e,[r]=g(),s=l.useMemo(()=>r?j(n.question,t.filePath):"",[n.question,t.filePath,r]),i=typeof document<"u"&&((d=document.documentElement.getAttribute("data-theme"))!=null&&d.includes("latte"))?"github-light":"github-dark",u=x(r?s:""),a=l.useMemo(()=>r?k(n.answer,s,i,u):void 0,[n.answer,s,i,u,r]);return f.jsx(p,{type:"code",variant:"flow",slots:[{role:"title",content:n.title},n.question?{role:"question",content:f.jsx(m,{source:n.question})}:{role:"question",content:null},{role:"arena",content:f.jsx(y,{...w(e),charColors:a},n.id)}]})}export{v as CodeCard};