@monkey-mini-app/ui 0.1.1 → 0.1.5

package/dist/src/index.ts

@@ -1,134 +1,147 @@
-export * from "./lib/utils"
-export * from "./lib/icons"
-export * from "./i18n/context"
-export * from "./components/accordion"
-export * from "./components/alert-dialog"
-export * from "./components/alert"
-export * from "./components/aspect-ratio"
-export * from "./components/attachment"
-export * from "./components/avatar"
-export * from "./components/badge"
-export * from "./components/breadcrumb"
-export * from "./components/bubble"
-export * from "./components/button-group"
-export * from "./components/button"
-export * from "./components/calendar"
-export * from "./components/card"
-export * from "./components/chart"
-export * from "./components/checkbox"
-export * from "./components/collapsible"
-export * from "./components/combobox"
-export * from "./components/command"
-export * from "./components/context-menu"
-export * from "./components/dialog"
-export * from "./components/drawer"
-export * from "./components/dropdown-menu"
-export * from "./components/empty"
-export * from "./components/field"
-export * from "./components/hover-card"
-export * from "./components/input-group"
-export * from "./components/input"
-export * from "./components/item"
-export * from "./components/kbd"
-export * from "./components/label"
-export * from "./components/marker"
-export * from "./components/menubar"
-export * from "./components/message-scroller"
-export * from "./components/message"
-export * from "./components/native-select"
-export * from "./components/navigation-menu"
-export * from "./components/pagination"
-export * from "./components/popover"
-export * from "./components/progress"
-export * from "./components/questionnaire"
-export * from "./components/radio-group"
-export * from "./components/resizable"
-export * from "./components/scroll-area"
-export * from "./components/select"
-export * from "./components/separator"
-export * from "./components/sheet"
-export * from "./components/sidebar"
-export * from "./components/skeleton"
-export * from "./components/slider"
-export * from "./components/spinner"
-export * from "./components/switch"
-export * from "./components/table"
-export * from "./components/tabs"
-export * from "./components/textarea"
-export * from "./components/toast"
-export * from "./components/toggle-group"
-export * from "./components/toggle"
-export * from "./components/tooltip"
-export * from "./composites/autocomplete"
-export * from "./composites/cascader"
-export * from "./composites/color-picker"
-export * from "./composites/confirm-dialog"
-export * from "./composites/copyable"
-export * from "./composites/currency-input"
-export * from "./composites/date-picker"
-export * from "./composites/date-range-picker"
-export * from "./composites/date-time-picker"
-export * from "./composites/date-time-range-picker"
-export * from "./composites/duration-input"
-export * from "./composites/mini-calendar"
-export * from "./composites/number-field"
-export * from "./composites/password-field"
-export * from "./composites/phone-input"
-export * from "./composites/rating"
-export * from "./composites/relative-date-picker"
-export * from "./composites/search-input"
-export * from "./composites/slider-range"
-export * from "./composites/tag-input"
-export * from "./composites/time-picker"
-export * from "./composites/time-range-picker"
-export * from "./composites/timezone-select"
-export * from "./composites/transfer"
-export * from "./composites/user-picker"
-export * from "./products/cells"
-export * from "./products/code-block"
-export * from "./products/code-editor"
-export * from "./products/data-grid"
-export * from "./products/diff-viewer"
-export * from "./products/markdown"
-export * from "./products/markdown-editor"
-export * from "./products/rich-text-editor"
-export * from "./products/event-calendar"
-export * from "./products/export-csv"
-export * from "./products/file-dropzone"
-export * from "./products/gantt"
-export * from "./products/json-viewer"
-export * from "./products/jira-wiki"
-export * from "./products/jql-input"
-export * from "./products/kanban"
-export * from "./products/kanban-issue-panel"
-export * from "./products/log-viewer"
-export * from "./products/sortable-list"
-export * from "./products/stepper"
-export * from "./products/timeline"
-export * from "./products/tree-view"
-export * from "./blocks/activity-feed"
-export * from "./blocks/app-shell"
-export * from "./blocks/attachment-gallery"
-export * from "./blocks/bar-chart"
-export * from "./blocks/comment-thread"
-export * from "./blocks/description-list"
-export * from "./blocks/detail-panel"
-export * from "./blocks/donut-chart"
-export * from "./blocks/env-badge"
-export * from "./blocks/file-tree"
-export * from "./blocks/filter-bar"
-export * from "./blocks/gauge"
-export * from "./blocks/notification-center"
-export * from "./blocks/page-header"
-export * from "./blocks/progress-ring"
-export * from "./blocks/radar-chart"
-export * from "./blocks/request-inspector"
-export * from "./blocks/run-timeline"
-export * from "./blocks/scrollspy"
-export * from "./blocks/severity-chip"
-export * from "./blocks/sparkline"
-export * from "./blocks/stat-card"
-export * from "./blocks/status-badge"
-export * from "./blocks/terminal"
-export * from "./blocks/test-step-list"
-export * from "./blocks/trend-card"
+/// <reference path="./cdn-modules.d.ts" />
+export { AppRuntime, useApp } from "./sdk/use-app";
+export { AppErrorBoundary, reportAppError } from "./sdk/app-error-boundary";
+export * from "./lib/utils";
+export * from "./lib/icons";
+export * from "./i18n/context";
+export * from "./components/accordion";
+export * from "./components/alert-dialog";
+export * from "./components/alert";
+export * from "./components/aspect-ratio";
+export * from "./components/attachment";
+export * from "./components/avatar";
+export * from "./components/badge";
+export * from "./components/breadcrumb";
+export * from "./components/bubble";
+export * from "./components/button-group";
+export * from "./components/button";
+export * from "./components/calendar";
+export * from "./components/card";
+export * from "./components/chart";
+export * from "./components/checkbox";
+export * from "./components/collapsible";
+export * from "./components/combobox";
+export * from "./components/command";
+export * from "./components/context-menu";
+export * from "./components/dialog";
+export * from "./components/drawer";
+export * from "./components/dropdown-menu";
+export * from "./components/empty";
+export * from "./components/field";
+export * from "./components/hover-card";
+export * from "./components/input-group";
+export * from "./components/input";
+export * from "./components/item";
+export * from "./components/kbd";
+export * from "./components/label";
+export * from "./components/marker";
+export * from "./components/menubar";
+export * from "./components/message-scroller";
+export * from "./components/message";
+export * from "./components/native-select";
+export * from "./components/navigation-menu";
+export * from "./components/pagination";
+export * from "./components/popover";
+export * from "./components/progress";
+export * from "./components/questionnaire";
+export * from "./components/radio-group";
+export * from "./components/resizable";
+export * from "./components/scroll-area";
+export * from "./components/select";
+export * from "./components/separator";
+export * from "./components/sheet";
+export * from "./components/sidebar";
+export * from "./components/skeleton";
+export * from "./components/slider";
+export * from "./components/spinner";
+export * from "./components/switch";
+export * from "./components/table";
+export * from "./components/tabs";
+export * from "./components/textarea";
+export * from "./components/toast";
+export * from "./components/toggle-group";
+export * from "./components/toggle";
+export * from "./components/tooltip";
+export * from "./composites/autocomplete";
+export * from "./composites/cascader";
+export * from "./composites/color-picker";
+export * from "./composites/confirm-dialog";
+export * from "./composites/copyable";
+export * from "./composites/currency-input";
+export * from "./composites/date-picker";
+export * from "./composites/date-range-picker";
+export * from "./composites/date-time-picker";
+export * from "./composites/date-time-range-picker";
+export * from "./composites/duration-input";
+export * from "./composites/mini-calendar";
+export * from "./composites/number-field";
+export * from "./composites/password-field";
+export * from "./composites/phone-input";
+export * from "./composites/rating";
+export * from "./composites/relative-date-picker";
+export * from "./composites/search-input";
+export * from "./composites/slider-range";
+export * from "./composites/tag-input";
+export * from "./composites/time-picker";
+export * from "./composites/time-range-picker";
+export * from "./composites/timezone-select";
+export * from "./composites/transfer";
+export * from "./composites/user-picker";
+export * from "./products/cells";
+export * from "./products/code-block";
+export * from "./products/code-editor";
+export * from "./products/commit-graph";
+export * from "./products/data-grid";
+export * from "./products/diff-viewer";
+export * from "./products/markdown";
+export * from "./products/markdown-editor";
+export * from "./products/rich-text-editor";
+export * from "./products/event-calendar";
+export * from "./products/export-csv";
+export * from "./products/file-dropzone";
+export * from "./products/gantt";
+export * from "./products/json-viewer";
+export * from "./products/jira-wiki";
+export * from "./products/jql-input";
+export * from "./products/kanban";
+export * from "./products/kanban-issue-panel";
+export * from "./products/log-viewer";
+export * from "./products/sortable-list";
+export * from "./products/stepper";
+export * from "./products/timeline";
+export * from "./products/tree-view";
+export * from "./blocks/activity-feed";
+export * from "./blocks/app-shell";
+export * from "./blocks/attachment-gallery";
+export * from "./blocks/bar-chart";
+export * from "./blocks/comment-thread";
+export * from "./blocks/description-list";
+export * from "./blocks/dashboard-shell";
+export * from "./blocks/detail-panel";
+export * from "./blocks/donut-chart";
+export * from "./blocks/env-badge";
+export * from "./blocks/env-table";
+export * from "./blocks/form-sheet";
+export * from "./blocks/file-tree";
+export * from "./blocks/filter-bar";
+export * from "./blocks/gauge";
+export * from "./blocks/list-detail";
+export * from "./blocks/notification-center";
+export * from "./blocks/page-header";
+export * from "./blocks/progress-ring";
+export * from "./blocks/radar-chart";
+export * from "./blocks/request-inspector";
+export * from "./blocks/reveal";
+export * from "./blocks/run-timeline";
+export * from "./blocks/scrollspy";
+export * from "./blocks/settings-split";
+export * from "./blocks/severity-chip";
+export * from "./blocks/sparkline";
+export * from "./blocks/stat-card";
+export * from "./blocks/status-badge";
+export * from "./blocks/table-page";
+export * from "./blocks/terminal";
+export * from "./blocks/test-step-list";
+export * from "./blocks/trend-card";
+export * from "./blocks/wizard-shell";
+export * from "./lib/illustrations";

package/dist/src/lib/clipboard.ts

@@ -0,0 +1,10 @@
+/** Best-effort clipboard write. Never throws (iframe Permissions-Policy may block). */
+export async function writeClipboard(text: string): Promise<boolean> {
+  try {
+    if (!navigator.clipboard?.writeText) return false
+    await navigator.clipboard.writeText(text)
+    return true
+  } catch {
+    return false
+  }
+}

package/dist/src/lib/illustrations.tsx

@@ -95,8 +95,8 @@ export function IlluAccessDenied(props: SVGProps<SVGSVGElement>) {
        <path d="M325.37344,531.58948s-8.455,4.227-9.512,23.251,3.171,68.7,3.171,68.7-4.227,22.194,0,42.274-4.227,93,1.057,93,32.762,3.171,33.819,0,2.114-50.729,2.114-50.729,8.455-24.308,0-39.1c0,0,29.52086,51.54832,48.615,90.889,4.17891,8.61,35.933-1.057,30.649-10.569s-17.966-52.843-17.966-52.843-9.512-31.706-26.421-45.445l8.455-67.639s17.967-45.445,7.4-51.786S325.37344,531.58948,325.37344,531.58948Z" data-name="Path 975" fill="var(--foreground)" id="b88343d2-9c47-4183-8a8a-427a73d8d9be-1441" transform="translate(-228.79147 -93.71349)"/>
        <circle cx="128.28696" cy="238.129" data-name="Ellipse 182" fill="var(--primary)" id="fdc24b21-a9e1-47f2-b2e4-7458730b7c21" r="27.478"/>
        <path d="M387.72745,361.43447l-34.16,20.08s-13.08,7.366-17.966,20.08c-5.208,13.55-2.181,32.628,0,36.99,4.227,8.455-1.773,29.592-1.773,29.592l-5.284,48.615s-19.023,17.966-4.227,20.08,41.217-1.057,57.07,0,33.819,3.171,28.535-7.4-11.625-17.967-5.284-39.1c4.962-16.54,4.747-78.383,4.419-104.5a21.025,21.025,0,0,0-10.211-17.767Z" data-name="Path 976" fill="var(--muted)" id="ac268c91-41f4-49c7-bce6-773e5eb69fa2-1442" transform="translate(-228.79147 -93.71349)"/>
-       <path d="M372.40744,394.72649l3.17,64.468-30.726,62.223-5.211-1.983,31.706-58.127Z" data-name="Path 980" id="aebed2c8-94ca-417e-8b11-27e17cbf3024-1443" opacity="0.1" style="isolation:isolate" transform="translate(-228.79147 -93.71349)"/>
-       <path d="M407.27945,472.93247v-7.4l-35.929,59.186Z" data-name="Path 982" id="e13ea0c4-bc86-4025-9528-1665a42d3372-1444" opacity="0.1" style="isolation:isolate" transform="translate(-228.79147 -93.71349)"/>
+       <path d="M372.40744,394.72649l3.17,64.468-30.726,62.223-5.211-1.983,31.706-58.127Z" data-name="Path 980" id="aebed2c8-94ca-417e-8b11-27e17cbf3024-1443" opacity="0.1" style={{ "isolation": "isolate" }} transform="translate(-228.79147 -93.71349)"/>
+       <path d="M407.27945,472.93247v-7.4l-35.929,59.186Z" data-name="Path 982" id="e13ea0c4-bc86-4025-9528-1665a42d3372-1444" opacity="0.1" style={{ "isolation": "isolate" }} transform="translate(-228.79147 -93.71349)"/>
        <path d="M337.57645,306.38749l-4.539-1.816s9.5-10.457,22.713-9.548l-3.717-4.092s9.085-3.637,17.345,5.91c4.342,5.019,9.365,10.919,12.5,17.564h4.865l-2.03,4.471,7.106,4.471-7.294-.8a24.73921,24.73921,0,0,1-.69,11.579l.2,3.534s-8.459-13.089-8.459-14.905v4.547s-4.543-4.092-4.543-6.82l-2.478,3.183-1.239-5-15.28,5,2.476-4.094-9.5,1.364,3.717-5s-10.737,5.91-11.15,10.912-5.781,11.366-5.781,11.366l-2.478-4.547S325.60443,313.20747,337.57645,306.38749Z" data-name="Path 983" fill="var(--foreground)" id="eb3190ba-6b3f-4b2b-91d1-1543e580b413-1445" transform="translate(-228.79147 -93.71349)"/>
        <path d="M355.35408,552.83885a10.05581,10.05581,0,0,0,2.73778-15.17434l18.42263-30.62-18.55382.76775-14.64995,28.95959a10.11028,10.11028,0,0,0,12.04336,16.067Z" fill="var(--primary)" transform="translate(-228.79147 -93.71349)"/>
        <path d="M397.24046,375.17548l7.926-1.585s23.779,17.438,16.381,52.314-40.16,87.719-40.16,87.719-7.4,9.512-9.512,11.625-6.341,0-4.227,3.171-3.171,5.284-3.171,5.284-23.251,0-21.137-8.455,38.047-68.7,38.047-68.7l-5.284-56.013S371.87446,373.0615,397.24046,375.17548Z" data-name="Path 981" fill="var(--muted)" id="a62f6567-f472-4931-86f9-ff652851a370-1446" transform="translate(-228.79147 -93.71349)"/>

package/dist/src/products/code-block.tsx

@@ -1,8 +1,8 @@
 "use client"
 
 import * as React from "react"
-import { codeToHtml } from "shiki"
 
+import { useHtmlDark } from "@monkey-mini-app/ui/hooks/use-html-dark"
 import { cn } from "@monkey-mini-app/ui/lib/utils"
 
 const aliases: Record<string, string> = {
@@ -16,6 +16,13 @@ const aliases: Record<string, string> = {
   txt: "text",
 }
 
+/**
+ * Static read-only code with highlighting (shiki via CDN).
+ * @when Showing a snippet/command. Editable → `CodeEditor`.
+ * @example
+ * <CodeBlock code="pnpm test" language="bash" />
+ * @family Discovery & inspect
+ */
 export function CodeBlock({
   code,
   language = "ts",
@@ -27,27 +34,37 @@ export function CodeBlock({
 }) {
   const [html, setHtml] = React.useState<string | null>(null)
   const lang = aliases[language.toLowerCase()] ?? language.toLowerCase()
-  const dark =
-    typeof document !== "undefined" &&
-    document.documentElement.classList.contains("dark")
+  const dark = useHtmlDark()
 
   React.useEffect(() => {
     let cancelled = false
-    codeToHtml(code, {
-      lang,
-      theme: dark ? "github-dark" : "github-light",
-    })
-      .then((out) => {
+    // Dynamic import so shiki (all langs/themes) is code-split into a lazy chunk
+    // and only fetched when a CodeBlock is actually rendered.
+    ;(async () => {
+      try {
+        const shiki = (await import("https://esm.sh/shiki@4.4.3")) as {
+          codeToHtml?: (code: string, opts: object) => Promise<string>
+          default?: { codeToHtml?: (code: string, opts: object) => Promise<string> }
+        }
+        const codeToHtml = shiki.codeToHtml ?? shiki.default?.codeToHtml
+        if (!codeToHtml) throw new Error("shiki.codeToHtml missing")
+        let out: string
+        try {
+          out = await codeToHtml(code, {
+            lang,
+            theme: dark ? "github-dark" : "github-light",
+          })
+        } catch {
+          out = await codeToHtml(code, {
+            lang: "text",
+            theme: dark ? "github-dark" : "github-light",
+          })
+        }
         if (!cancelled) setHtml(out)
-      })
-      .catch(() =>
-        codeToHtml(code, {
-          lang: "text",
-          theme: dark ? "github-dark" : "github-light",
-        }).then((out) => {
-          if (!cancelled) setHtml(out)
-        })
-      )
+      } catch (err) {
+        console.warn("[CodeBlock] shiki CDN failed", err)
+      }
+    })()
     return () => {
       cancelled = true
     }

package/dist/src/products/code-editor.tsx

@@ -1,22 +1,32 @@
 "use client"
 
-import { html } from "@codemirror/lang-html"
-import { javascript } from "@codemirror/lang-javascript"
-import { json } from "@codemirror/lang-json"
-import { markdown } from "@codemirror/lang-markdown"
-import { oneDark } from "@codemirror/theme-one-dark"
-import CodeMirror from "@uiw/react-codemirror"
+import { useEffect, useRef, useState } from "react"
 
+import { useHtmlDark } from "@monkey-mini-app/ui/hooks/use-html-dark"
 import { cn } from "@monkey-mini-app/ui/lib/utils"
 
-const langs = {
-  js: javascript(),
-  ts: javascript({ typescript: true }),
-  json: json(),
-  html: html(),
-  md: markdown(),
+type LangS = "js" | "ts" | "json" | "html" | "md"
+
+type EditorViewT = {
+  destroy(): void
+  dispatch(t: object): void
+  state: { doc: { toString(): string; length: number } }
+}
+
+function bare<T extends object>(m: T & { default?: T }): T {
+  return (m.default ?? m) as T
 }
 
+/**
+ * Vanilla CodeMirror 6 loaded on demand from `esm.sh` (not npm, not a React wrapper).
+ * Do not import `@codemirror/*` or `@uiw/react-codemirror` — the latter pulls a second React.
+ * Highlighting needs `@codemirror/language` + a theme; lang packages only provide the parser.
+ * If the CDN fails the host stays empty (no editor), rather than requiring a peer install.
+ * @when Editing config/scripts in-app. Do not `import @codemirror/*` or add it to package.json.
+ * @example
+ * <CodeEditor value={src} language="ts" onChange={(v) => set(v)} />
+ * @family Discovery & inspect
+ */
 export function CodeEditor({
   value,
   onChange,
@@ -26,23 +36,145 @@ export function CodeEditor({
 }: {
   value: string
   onChange?: (value: string) => void
-  language?: keyof typeof langs
+  language?: LangS
   height?: string
   className?: string
 }) {
-  const dark =
-    typeof document !== "undefined" &&
-    document.documentElement.classList.contains("dark")
+  const hostRef = useRef<HTMLDivElement>(null)
+  const viewRef = useRef<EditorViewT | null>(null)
+  const onChangeRef = useRef(onChange)
+  onChangeRef.current = onChange
+  const valueRef = useRef(value)
+  valueRef.current = value
+  const [cm, setCm] = useState(false)
+  const dark = useHtmlDark()
+
+  useEffect(() => {
+    if (!hostRef.current) return
+    let cancelled = false
+    ;(async () => {
+      try {
+        const [viewMod, cmdMod, langMod, jsLang, jsonLang, htmlLang, mdLang, themeMod] = await Promise.all([
+          import("https://esm.sh/@codemirror/view@6"),
+          import("https://esm.sh/@codemirror/commands@6"),
+          import("https://esm.sh/@codemirror/language@6"),
+          import("https://esm.sh/@codemirror/lang-javascript@6"),
+          import("https://esm.sh/@codemirror/lang-json@6"),
+          import("https://esm.sh/@codemirror/lang-html@6"),
+          import("https://esm.sh/@codemirror/lang-markdown@6"),
+          import("https://esm.sh/@codemirror/theme-one-dark@6"),
+        ])
+        if (cancelled || !hostRef.current) return
+        const viewNs = bare(
+          viewMod as { EditorView: unknown; lineNumbers: () => unknown; keymap: { of: (k: unknown) => unknown } },
+        )
+        const cmdNs = bare(
+          cmdMod as { defaultKeymap: unknown[]; history: () => unknown; historyKeymap: unknown[] },
+        )
+        const langNs = bare(
+          langMod as {
+            syntaxHighlighting: (s: unknown) => unknown
+            defaultHighlightStyle: unknown
+          },
+        )
+        const EditorView = viewNs.EditorView as {
+          new (o: object): EditorViewT
+          updateListener: { of: (fn: (u: { docChanged: boolean }) => void) => unknown }
+          theme: (spec: Record<string, Record<string, string>>) => unknown
+          darkTheme: { of: (v: boolean) => unknown }
+        }
+        const pick = (m: unknown, name: string): ((o?: object) => unknown) => {
+          const n = bare(m as object & { default?: object }) as Record<string, unknown>
+          const fn = n[name] ?? (n.default as Record<string, unknown> | undefined)?.[name]
+          if (typeof fn !== "function") throw new Error(`lang ${name} missing`)
+          return fn as (o?: object) => unknown
+        }
+        const langs: Record<string, unknown> = {
+          js: pick(jsLang, "javascript")(),
+          ts: pick(jsLang, "javascript")({ typescript: true }),
+          json: pick(jsonLang, "json")(),
+          html: pick(htmlLang, "html")(),
+          md: pick(mdLang, "markdown")(),
+        }
+        const themeNs = bare(themeMod as { oneDark?: unknown; oneDarkHighlightStyle?: unknown })
+        const chrome = EditorView.theme({
+          "&": {
+            backgroundColor: "transparent",
+            color: "var(--foreground)",
+            height: "100%",
+          },
+          ".cm-scroller": { overflow: "auto" },
+          ".cm-content": { caretColor: "var(--foreground)" },
+          ".cm-cursor, .cm-dropCursor": { borderLeftColor: "var(--foreground)" },
+          ".cm-gutters": {
+            backgroundColor: "var(--muted)",
+            color: "var(--muted-foreground)",
+            border: "none",
+          },
+          ".cm-activeLine": { backgroundColor: "color-mix(in oklch, var(--muted) 55%, transparent)" },
+          ".cm-activeLineGutter": { backgroundColor: "var(--muted)" },
+        })
+        const highlight = dark
+          ? (themeNs.oneDark ?? langNs.syntaxHighlighting(themeNs.oneDarkHighlightStyle ?? langNs.defaultHighlightStyle))
+          : langNs.syntaxHighlighting(langNs.defaultHighlightStyle)
+        const view = new EditorView({
+          parent: hostRef.current,
+          doc: valueRef.current,
+          extensions: [
+            viewNs.lineNumbers(),
+            cmdNs.history(),
+            langs[language] ?? langs.ts,
+            EditorView.darkTheme.of(dark),
+            highlight,
+            chrome,
+            viewNs.keymap.of([...(cmdNs.defaultKeymap ?? []), ...(cmdNs.historyKeymap ?? [])]),
+            EditorView.updateListener.of((u) => {
+              if (u.docChanged) onChangeRef.current?.(view.state.doc.toString())
+            }),
+          ],
+        })
+        viewRef.current = view
+        setCm(true)
+      } catch (err) {
+        console.warn("[CodeEditor] CodeMirror CDN failed", err)
+      }
+    })()
+    return () => {
+      cancelled = true
+      viewRef.current?.destroy()
+      viewRef.current = null
+    }
+  }, [language, dark])
+
+  useEffect(() => {
+    const view = viewRef.current
+    if (!view) return
+    const cur = view.state.doc.toString()
+    if (value === cur) return
+    view.dispatch({ changes: { from: 0, to: view.state.doc.length, insert: value } })
+  }, [value])
 
   return (
-    <div data-testid="code-editor" className={cn("overflow-hidden rounded-xl border", className)}>
-      <CodeMirror
-        value={value}
-        height={height}
-        theme={dark ? oneDark : "light"}
-        extensions={[langs[language] ?? langs.ts]}
-        onChange={(next) => onChange?.(next)}
-        basicSetup={{ lineNumbers: true }}
+    <div className={cn("overflow-hidden rounded-xl border border-border", className)}>
+      {!cm && (
+        <textarea
+          data-testid="code-editor"
+          value={value}
+          onChange={(e) => onChange?.(e.target.value)}
+          spellCheck={false}
+          className="w-full resize-y overflow-auto bg-transparent px-3 py-2 font-mono text-xs leading-6 outline-none"
+          style={{ height }}
+        />
+      )}
+      <div
+        ref={hostRef}
+        data-testid={cm ? "code-editor" : undefined}
+        className={cn(
+          "text-xs leading-6 [&_.cm-editor]:h-full [&_.cm-editor]:outline-none [&_.cm-scroller]:h-full",
+          !cm && "hidden",
+        )}
+        // Fixed height (not only minHeight) so CM's h-full resolves after async mount.
+        style={{ height: cm ? height : undefined, minHeight: cm ? height : 0 }}
       />
     </div>
   )