58:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 59:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 4f:["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@codemirror/commands"}] 50:["$","li","@codemirror/language",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40codemirror%2Flanguage","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@codemirror/language"}]]}]}] 51:["$","li","@codemirror/lang-markdown",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40codemirror%2Flang-markdown","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@codemirror/lang-markdown"}]]}]}] 52:["$","li","@codemirror/autocomplete",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40codemirror%2Fautocomplete","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@codemirror/autocomplete"}]]}]}] 53:["$","li","@codemirror/search",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40codemirror%2Fsearch","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@codemirror/search"}]]}]}] 54:["$","li","@lezer/markdown",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40lezer%2Fmarkdown","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@lezer/markdown"}]]}]}] 55:["$","li","@lezer/highlight",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40lezer%2Fhighlight","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@lezer/highlight"}]]}]}] 56:["$","$L58",null,{"namespace":"@ilinxa","registryDependencies":["badge","button","tabs","tooltip"]}] 5a:T19ec,"use client"; import { useDeferredValue, useEffect, useMemo, useRef, } from "react"; import type { Extension } from "@codemirror/state"; import { TooltipProvider } from "@/components/ui/tooltip"; import { cn } from "@/lib/utils"; import { useCodeMirror } from "./hooks/use-codemirror"; import { useViewMode } from "./hooks/use-view-mode"; import { useToolbarStore, useToolbarVersion, } from "./hooks/use-toolbar-state"; import { useMarkdownEditorHandle } from "./hooks/use-imperative-handle"; import { Toolbar } from "./parts/toolbar"; import { ViewToggle } from "./parts/view-toggle"; import { EditorPane } from "./parts/editor-pane"; import { PreviewPane } from "./parts/preview-pane"; import { defaultMarkdownToolbar } from "./default-toolbar"; import { parseMarkdown } from "./lib/parse-markdown"; import { insertText as insertTextAction, toggleLinePrefix as toggleLinePrefixAction, wrapSelection as wrapSelectionAction, } from "./lib/toolbar-actions"; import type { KindMeta, MarkdownEditorProps, ToolbarCtx, WikilinkCandidate, } from "./types"; const EMPTY_EXTENSIONS: ReadonlyArray = []; export function MarkdownEditor( props: MarkdownEditorProps, ) { const { value, onChange, readOnly = false, view: viewProp, onViewChange, initialView = "edit", showPreviewToggle = true, wikilinkCandidates, onWikilinkClick, kinds, toolbar, extensions, onSave, ariaLabel, className, minHeight, maxHeight, ref, id, } = props; // Stable refs holding latest callbacks (post-commit update — read by CM6 extensions // captured at mount time so prop changes flow through without reconfiguring the stack). const onChangeRef = useRef(onChange); const onSaveRef = useRef(onSave); const kindsRef = useRef | undefined>(kinds); const onWikilinkClickRef = useRef(onWikilinkClick); useEffect(() => { onChangeRef.current = onChange; onSaveRef.current = onSave; kindsRef.current = kinds; onWikilinkClickRef.current = onWikilinkClick; }); // Toolbar external store — bumped by CM6 update listener on selection or doc changes. const toolbarStore = useToolbarStore(); const onRelevantUpdateRef = useRef<(() => void) | undefined>(toolbarStore.notify); useEffect(() => { onRelevantUpdateRef.current = toolbarStore.notify; }, [toolbarStore]); const userExtensions = extensions ?? EMPTY_EXTENSIONS; const { view, setContainer } = useCodeMirror({ value, readOnly, wikilinkCandidates, userExtensions, onChangeRef, onSaveRef, kindsRef, onRelevantUpdateRef, ariaLabel, }); const { viewValue, handleViewChange, toggleHidden } = useViewMode({ view: viewProp, onViewChange, initialView, showPreviewToggle, }); // Subscribe to toolbar updates — re-renders toolbar buttons on selection/doc changes. useToolbarVersion(toolbarStore); // Preview HTML — useDeferredValue keeps typing fluid; parse runs at low priority. const deferredValue = useDeferredValue(value); const hasClickHandler = Boolean(onWikilinkClick); const html = useMemo( () => parseMarkdown(deferredValue, { wikilinkCandidates, kinds, hasClickHandler, }), [deferredValue, wikilinkCandidates, kinds, hasClickHandler], ); // Build ToolbarCtx from current view — recomputed on render (cheap; closures over view). const ctx: ToolbarCtx | null = view ? { view, value: view.state.doc.toString(), insertText: (text) => insertTextAction(view, text), wrapSelection: (before, after) => wrapSelectionAction(view, before, after), toggleLinePrefix: (prefix) => toggleLinePrefixAction(view, prefix), } : null; const showToolbar = toolbar !== false; const items = toolbar === undefined || toolbar === false ? defaultMarkdownToolbar : toolbar; const showEditor = viewValue !== "preview"; const showPreview = viewValue !== "edit"; // Imperative handle wiring (Q-P10 ref-as-prop pattern). useMarkdownEditorHandle({ ref, view }); // Onclick handler for preview wikilinks reads onWikilinkClickRef so prop changes // flow through without re-binding the stable click delegation. const handlePreviewWikilinkClick = useMemo( () => (target: string) => { onWikilinkClickRef.current?.(target); }, [], ); return (

{(showToolbar || !toggleHidden) && (

{showToolbar && ctx ? ( ) : showToolbar ? ( // Pre-mount placeholder so layout doesn't shift when CM6 attaches.

) : null} {!toggleHidden && ( )}

)}

{showEditor && ( )} {showPreview && ( )}

); } 5b:T884,import type { ReactNode, Ref } from "react"; import type { Extension } from "@codemirror/state"; import type { EditorView } from "@codemirror/view"; export interface WikilinkCandidate { id: string; label: string; kind?: string; alias?: string; } export interface KindMeta { label: string; color?: string; } export type ViewMode = "edit" | "preview" | "split"; export interface ToolbarCtx { view: EditorView; value: string; insertText: (text: string) => void; wrapSelection: (before: string, after?: string) => void; toggleLinePrefix: (prefix: string) => void; } export interface ToolbarItem { id: string; label: string; icon?: ReactNode; shortcut?: string; isActive?: (ctx: ToolbarCtx) => boolean; /* * Optional since v0.2.1. A separator (`label: ""`) is a real `ToolbarItem` * that the renderer draws as a divider and never invokes — but `run` was * required, so the documented separator idiom told consumers to write * `run: () => {}`. That taught the codebase to author empty-bodied public * methods, which is the exact shape being eliminated everywhere else. * Separators now simply omit it. */ run?: (ctx: ToolbarCtx) => void; } export interface MarkdownEditorProps { value: string; onChange: (value: string) => void; readOnly?: boolean; view?: ViewMode; onViewChange?: (view: ViewMode) => void; initialView?: ViewMode; showPreviewToggle?: boolean; wikilinkCandidates?: ReadonlyArray; onWikilinkClick?: (target: string) => void; kinds?: Record; toolbar?: false | ReadonlyArray; extensions?: ReadonlyArray; onSave?: (value: string) => void; ariaLabel?: string; className?: string; placeholder?: string; minHeight?: string | number; maxHeight?: string | number; ref?: Ref; id?: string; } export interface MarkdownEditorHandle { focus(): void; undo(): void; redo(): void; insertText(text: string): void; getSelection(): { from: number; to: number; text: string }; getValue(): string; getView(): EditorView | null; } 5c:T82f,import { Bold, Code, Heading, Italic, Link, List, ListOrdered, Quote } from "lucide-react"; import { cycleHeading, isInlineMarkActive } from "./lib/toolbar-actions"; import type { ToolbarItem } from "./types"; // Default markdown toolbar — 8 built-in items + 1 separator between link and lists (Q-P4 + §13.5 #7). // Hosts spread + extend per description §6.2. export const defaultMarkdownToolbar: ReadonlyArray = [ { id: "bold", label: "Bold", icon: , shortcut: "⌘B", isActive: (ctx) => isInlineMarkActive(ctx.view, "**"), run: (ctx) => ctx.wrapSelection("**", "**"), }, { id: "italic", label: "Italic", icon: , shortcut: "⌘I", run: (ctx) => ctx.wrapSelection("*", "*"), }, { id: "code", label: "Inline code", icon:

,
    shortcut: "⌘E",
    isActive: (ctx) => isInlineMarkActive(ctx.view, "`"),
    run: (ctx) => ctx.wrapSelection("`", "`"),
  },
  {
    id: "link",
    label: "Link",
    icon: ,
    shortcut: "⌘K",
    run: (ctx) => {
      const { from, to } = ctx.view.state.selection.main;
      const selectedText = ctx.view.state.sliceDoc(from, to);
      const before = `[${selectedText}](`;
      const placeholder = "url";
      const after = ")";
      const insertStart = from + before.length;
      ctx.view.dispatch({
        changes: { from, to, insert: `${before}${placeholder}${after}` },
        selection: { anchor: insertStart, head: insertStart + placeholder.length },
      });
      ctx.view.focus();
    },
  },
  { id: "sep-1", label: "" },
  {
    id: "bullet-list",
    label: "Bullet list",
    icon: ,
    run: (ctx) => ctx.toggleLinePrefix("- "),
  },
  {
    id: "numbered-list",
    label: "Numbered list",
    icon: ,
    run: (ctx) => ctx.toggleLinePrefix("1. "),
  },
  {
    id: "blockquote",
    label: "Blockquote",
    icon: ,
    run: (ctx) => ctx.toggleLinePrefix("> "),
  },
  {
    id: "heading",
    label: "Heading",
    icon: ,
    run: (ctx) => cycleHeading(ctx.view),
  },
];
5d:T1c53,import { useEffect, useRef, useState } from "react";
import { EditorState, type Extension } from "@codemirror/state";
import {
  EditorView,
  drawSelection,
  highlightActiveLine,
  keymap,
} from "@codemirror/view";
import { defaultKeymap, history, historyKeymap, indentWithTab } from "@codemirror/commands";
import { search, searchKeymap, highlightSelectionMatches } from "@codemirror/search";
import {
  autocompletion,
  closeBrackets,
  closeBracketsKeymap,
  completionKeymap,
} from "@codemirror/autocomplete";
import { markdown, markdownLanguage } from "@codemirror/lang-markdown";
import { GFM } from "@lezer/markdown";

import { markdownEditorTheme } from "../lib/extensions/theme";
import {
  buildCandidatesMap,
  setCandidatesEffect,
  wikilinkExtension,
} from "../lib/extensions/wikilink";
import { createWikilinkCompletionSource } from "../lib/extensions/wikilink-autocomplete";
import { saveKeymap } from "../lib/extensions/save-keymap";
import { markdownKeymap } from "../lib/extensions/markdown-keymap";
import { readOnlyCompartment, userExtensionsCompartment } from "../lib/extensions/compartments";
import { SyncAnnotation } from "../lib/sync-annotation";
import type { KindMeta, WikilinkCandidate } from "../types";
import type { RefObject } from "react";

interface UseCodeMirrorOpts {
  value: string;
  readOnly: boolean;
  wikilinkCandidates: ReadonlyArray | undefined;
  userExtensions: ReadonlyArray;
  onChangeRef: RefObject<(value: string) => void>;
  onSaveRef: RefObject<((value: string) => void) | undefined>;
  kindsRef: RefObject | undefined>;
  // Notified on selection-set or doc-change CM6 updates so dependent surfaces
  // (toolbar active state) can re-render without reconfiguring extensions.
  onRelevantUpdateRef: RefObject<(() => void) | undefined>;
  ariaLabel: string | undefined;
}

interface UseCodeMirrorResult {
  // React-state view — null until CM6 mounts; safe to read during render.
  view: EditorView | null;
  setContainer: (node: HTMLDivElement | null) => void;
}

export function useCodeMirror(opts: UseCodeMirrorOpts): UseCodeMirrorResult {
  const {
    value,
    readOnly,
    wikilinkCandidates,
    userExtensions,
    onChangeRef,
    onSaveRef,
    kindsRef,
    onRelevantUpdateRef,
    ariaLabel,
  } = opts;

  const [view, setView] = useState(null);
  const lastSyncedValueRef = useRef(value);
  const [container, setContainer] = useState(null);

  // Mount-time prop snapshot via refs — read by mount effect; updated post-commit so
  // the snapshot stays fresh if a parent re-renders between hook call and mount.
  const valueAtMountRef = useRef(value);
  const readOnlyAtMountRef = useRef(readOnly);
  const candidatesAtMountRef = useRef(wikilinkCandidates);
  const userExtensionsAtMountRef = useRef(userExtensions);
  const ariaLabelAtMountRef = useRef(ariaLabel);

  useEffect(() => {
    valueAtMountRef.current = value;
    readOnlyAtMountRef.current = readOnly;
    candidatesAtMountRef.current = wikilinkCandidates;
    userExtensionsAtMountRef.current = userExtensions;
    ariaLabelAtMountRef.current = ariaLabel;
  });

  // Mount effect — keyed only on container; subsequent prop changes flow through
  // the sync effects below. Mount-time prop reads come from the refs above.
  useEffect(() => {
    if (!container) return;

    const initialDoc = valueAtMountRef.current;
    const initialReadOnly = readOnlyAtMountRef.current;
    const initialCandidates = candidatesAtMountRef.current;
    const initialUserExtensions = userExtensionsAtMountRef.current;
    const initialAriaLabel = ariaLabelAtMountRef.current;

    const extensions: Extension[] = [
      EditorView.lineWrapping,
      EditorState.tabSize.of(2),
      drawSelection(),
      highlightActiveLine(),
      highlightSelectionMatches(),
      closeBrackets(),

      markdown({ base: markdownLanguage, extensions: [GFM], addKeymap: true }),

      history(),
      search({ top: true }),

      ...wikilinkExtension,

      autocompletion({
        override: [createWikilinkCompletionSource(kindsRef)],
      }),

      markdownEditorTheme,

      // Keymap — most-specific first; each binding's `run: () => true` stops further keymaps.
      keymap.of([
        ...saveKeymap(onSaveRef),
        ...markdownKeymap(),
        ...closeBracketsKeymap,
        ...defaultKeymap,
        ...historyKeymap,
        ...searchKeymap,
        ...completionKeymap,
        indentWithTab,
      ]),

      readOnlyCompartment.of(EditorState.readOnly.of(initialReadOnly)),

      // Echo-guard updateListener (Q-P9) — skip onChange when transaction carries SyncAnnotation.
      EditorView.updateListener.of((update) => {
        if (
          update.docChanged &&
          !update.transactions.some((t) => t.annotation(SyncAnnotation))
        ) {
          onChangeRef.current(update.state.doc.toString());
        }
        if (update.selectionSet || update.docChanged) {
          onRelevantUpdateRef.current?.();
        }
      }),

      EditorView.contentAttributes.of(
        initialAriaLabel ? { "aria-label": initialAriaLabel } : {},
      ),

      // User extensions LAST — earlier-in-array = HIGHER CM6 default precedence (Q-P8 lock).
      // Our defaults win conflicts; users escalate via Prec.high(...).
      userExtensionsCompartment.of([...initialUserExtensions]),
    ];

    const editorView = new EditorView({
      state: EditorState.create({ doc: initialDoc, extensions }),
      parent: container,
    });

    // Seed initial candidates via dispatch (StateField starts empty).
    if (initialCandidates && initialCandidates.length > 0) {
      editorView.dispatch({
        effects: setCandidatesEffect.of(buildCandidatesMap(initialCandidates)),
      });
    }

    setView(editorView);
    lastSyncedValueRef.current = initialDoc;

    return () => {
      editorView.destroy();
      setView(null);
    };
    // Mount only on container change. All prop changes flow through sync effects below.
  }, [container, kindsRef, onChangeRef, onSaveRef, onRelevantUpdateRef]);

  // Value sync (Q-P9 echo-guarded).
  useEffect(() => {
    if (!view) return;
    if (
      value !== lastSyncedValueRef.current &&
      value !== view.state.doc.toString()
    ) {
      view.dispatch({
        changes: { from: 0, to: view.state.doc.length, insert: value },
        annotations: SyncAnnotation.of(true),
      });
    }
    lastSyncedValueRef.current = value;
  }, [view, value]);

  // ReadOnly sync.
  useEffect(() => {
    view?.dispatch({
      effects: readOnlyCompartment.reconfigure(EditorState.readOnly.of(readOnly)),
    });
  }, [view, readOnly]);

  // wikilinkCandidates sync (validate-pass refinement #2).
  useEffect(() => {
    if (!view) return;
    view.dispatch({
      effects: setCandidatesEffect.of(buildCandidatesMap(wikilinkCandidates ?? [])),
    });
  }, [view, wikilinkCandidates]);

  // User extensions sync (full reconfigure on reference change).
  useEffect(() => {
    view?.dispatch({
      effects: userExtensionsCompartment.reconfigure([...userExtensions]),
    });
  }, [view, userExtensions]);

  return { view, setContainer };
}
5e:T645,import { useImperativeHandle, useMemo, type Ref } from "react";
import { undo as cmUndo, redo as cmRedo } from "@codemirror/commands";
import type { EditorView } from "@codemirror/view";
import { insertText as insertTextAction } from "../lib/toolbar-actions";
import type { MarkdownEditorHandle } from "../types";

interface UseHandleOpts {
  ref: Ref | undefined;
  view: EditorView | null;
}

const DEV = process.env.NODE_ENV !== "production";
let warnedGetViewBeforeMount = false;

export function useMarkdownEditorHandle({ ref, view }: UseHandleOpts): void {
  const handle = useMemo(
    () => ({
      focus() {
        view?.focus();
      },
      undo() {
        if (!view) return;
        cmUndo(view);
      },
      redo() {
        if (!view) return;
        cmRedo(view);
      },
      insertText(text: string) {
        if (!view) return;
        insertTextAction(view, text);
      },
      getSelection() {
        if (!view) return { from: 0, to: 0, text: "" };
        const { from, to } = view.state.selection.main;
        return { from, to, text: view.state.sliceDoc(from, to) };
      },
      getValue() {
        return view?.state.doc.toString() ?? "";
      },
      getView() {
        if (!view && DEV && !warnedGetViewBeforeMount) {
          warnedGetViewBeforeMount = true;
          console.warn(
            "[markdown-editor] getView() called before mount or after unmount; returned null.",
          );
        }
        return view;
      },
    }),
    [view],
  );

  useImperativeHandle(ref, () => handle, [handle]);
}
5f:T411,import { useState, useSyncExternalStore } from "react";

// External store: tracks a CM6-update counter so toolbar buttons re-render only when
// CM6 fires a relevant update (selection-change or doc-change), not on every keystroke
// at the React level (plan §4.4).
export interface ToolbarStore {
  subscribe: (cb: () => void) => () => void;
  getSnapshot: () => number;
  notify: () => void;
}

export function createToolbarStore(): ToolbarStore {
  let version = 0;
  const listeners = new Set<() => void>();
  return {
    subscribe(cb) {
      listeners.add(cb);
      return () => {
        listeners.delete(cb);
      };
    },
    getSnapshot() {
      return version;
    },
    notify() {
      version++;
      listeners.forEach((cb) => cb());
    },
  };
}

export function useToolbarStore(): ToolbarStore {
  const [store] = useState(createToolbarStore);
  return store;
}

export function useToolbarVersion(store: ToolbarStore): number {
  return useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);
}
60:T4e0,import { useCallback, useState } from "react";
import type { ViewMode } from "../types";

interface UseViewModeOpts {
  view: ViewMode | undefined;
  onViewChange: ((view: ViewMode) => void) | undefined;
  initialView: ViewMode;
  showPreviewToggle: boolean;
}

interface UseViewModeResult {
  viewValue: ViewMode;
  handleViewChange: (next: ViewMode) => void;
  toggleHidden: boolean;
}

// Controlled-or-uncontrolled view-mode dispatch (plan §4.3).
// When showPreviewToggle is false, view is locked to initialView (toggle is hidden too).
export function useViewMode(opts: UseViewModeOpts): UseViewModeResult {
  const { view, onViewChange, initialView, showPreviewToggle } = opts;
  const isControlled = view !== undefined;
  const [internalView, setInternalView] = useState(initialView);

  const lockedView = !showPreviewToggle ? initialView : null;
  const viewValue = lockedView ?? (isControlled ? view : internalView);

  const handleViewChange = useCallback(
    (next: ViewMode) => {
      if (lockedView) return;
      if (!isControlled) setInternalView(next);
      onViewChange?.(next);
    },
    [isControlled, lockedView, onViewChange],
  );

  return { viewValue, handleViewChange, toggleHidden: !showPreviewToggle };
}
61:T1547,import { Marked, type Tokens } from "marked";
import type { KindMeta, WikilinkCandidate } from "../types";

interface WikilinkToken extends Tokens.Generic {
  type: "wikilink";
  raw: string;
  label: string;
  alias: string | undefined;
}

const wikilinkExtension = {
  extensions: [
    {
      name: "wikilink",
      level: "inline" as const,
      start: (src: string) => src.indexOf("[["),
      tokenizer(src: string): WikilinkToken | undefined {
        const match = src.match(/^\[\[([^[\]\n|]+?)(?:\|([^[\]\n]+?))?\]\]/);
        if (!match) return undefined;
        return {
          type: "wikilink",
          raw: match[0],
          label: match[1].trim(),
          alias: match[2]?.trim(),
        };
      },
      renderer(token: WikilinkToken): string {
        const display = token.alias ?? token.label;
        return `${escapeHtml(display)}`;
      },
    },
  ],
};

// ─── Sanitization (v0.1.2, deep-review finding 5.1) ─────────────────────────
// `marked` passes raw HTML through by default — with backend-stored multi-author
// markdown (the wikilink use case) that is stored XSS in consumer apps. Two
// per-instance defenses, no added dependency:
//   1. Raw HTML tokens (block `html` + inline tags) render as ESCAPED text —
//      `` displays literally instead of executing. This also
//      prevents hand-forged `.wikilink` spans from reaching the post-process
//      regex below.
//   2. Link hrefs are scheme-filtered — `javascript:` / `data:` / `vbscript:`
//      and every other non-allowlisted scheme are stripped (the link renders as
//      plain text); `http:` / `https:` / `mailto:`, `#fragments`, and
//      relative/absolute paths pass through. Attribute output is entity-escaped,
//      so `:`-style entity tricks are neutralized too.
// Wikilink rendering is unaffected (its renderer already escapes label+target).

const SCHEME_RE = /^([a-zA-Z][a-zA-Z0-9+.-]*):/;
const SAFE_SCHEME_RE = /^(?:https?|mailto)$/i;

function sanitizeHref(href: string): string | null {
  // Strip control chars + whitespace browsers ignore when parsing the scheme
  // ("jav\tascript:" tricks) before checking, but return the original href.
  const cleaned = href.replace(/[\u0000-\u0020\u007f]/g, "");
  const schemeMatch = SCHEME_RE.exec(cleaned);
  if (!schemeMatch) return href; // relative path / #fragment / query — no scheme
  return SAFE_SCHEME_RE.test(schemeMatch[1]) ? href : null;
}

// Per-instance Marked (Q-P1 lock + validate-pass refinement #1) — avoids global
// `marked.use(...)` mutation that would pollute every other consumer of `marked`
// in the same bundle (e.g., the docs-site README parser).
const customMarked = new Marked();
customMarked.use(
  { gfm: true, breaks: false },
  {
    renderer: {
      // Raw HTML (block + inline) → escaped literal text, never markup.
      html(token: Tokens.HTML | Tokens.Tag): string {
        return escapeHtml(token.text);
      },
      // Links → scheme-filtered href; disallowed schemes drop the anchor and
      // keep the (inline-parsed) label text.
      link(token: Tokens.Link): string {
        const text = this.parser.parseInline(token.tokens);
        const href = sanitizeHref(token.href);
        if (href === null) return text;
        const title = token.title ? ` title="${escapeHtml(token.title)}"` : "";
        return `${text}`;
      },
    },
  },
  wikilinkExtension,
);

interface ParseOpts {
  wikilinkCandidates?: ReadonlyArray;
  // kinds is part of the parse opts for forward-compat with kind-aware preview rendering;
  // unused in v0.1 (autocomplete renders kind badges, not preview).
  kinds?: Record;
  hasClickHandler: boolean;
}

const WIKILINK_SPAN_REGEX = //g;

export function parseMarkdown(source: string, opts: ParseOpts): string {
  const html = customMarked.parse(source, { async: false }) as string;

  // Post-process: mark broken wikilinks; conditionally add role+tabindex when interactive
  // (validate-pass refinement #4 — only marked interactive when host wires onWikilinkClick).
  const interactive = opts.hasClickHandler;

  if (!opts.wikilinkCandidates) {
    return interactive
      ? html.replace(
          WIKILINK_SPAN_REGEX,
          (_, target) =>
            ``,
        )
      : html;
  }

  const labelSet = new Set(opts.wikilinkCandidates.map((c) => c.label.toLowerCase().trim()));

  return html.replace(WIKILINK_SPAN_REGEX, (_, target) => {
    const resolved = labelSet.has(String(target).toLowerCase().trim());
    const classes = `wikilink${resolved ? "" : " wikilink-broken"}`;
    const roleAttr = interactive ? ' role="link" tabindex="0"' : "";
    return ``;
  });
}

function escapeHtml(s: string): string {
  return s.replace(/[&<>"']/g, (ch) => {
    switch (ch) {
      case "&":
        return "&";
      case "<":
        return "<";
      case ">":
        return ">";
      case '"':
        return """;
      case "'":
        return "'";
      default:
        return ch;
    }
  });
}
62:Tabd,import type { EditorView } from "@codemirror/view";

export function wrapSelection(view: EditorView, before: string, after: string = before): void {
  const { from, to } = view.state.selection.main;
  const selectedText = view.state.sliceDoc(from, to);
  view.dispatch({
    changes: { from, to, insert: `${before}${selectedText}${after}` },
    selection:
      from === to
        ? { anchor: from + before.length }
        : { anchor: from + before.length, head: from + before.length + selectedText.length },
  });
  view.focus();
}

export function toggleLinePrefix(view: EditorView, prefix: string): void {
  const { from, to } = view.state.selection.main;
  const startLine = view.state.doc.lineAt(from).number;
  const endLine = view.state.doc.lineAt(to).number;

  const lines: { from: number; to: number; text: string }[] = [];
  for (let n = startLine; n <= endLine; n++) {
    const line = view.state.doc.line(n);
    lines.push({ from: line.from, to: line.to, text: line.text });
  }

  const allHavePrefix = lines.every((l) => l.text.startsWith(prefix));
  const changes = lines.map((l) =>
    allHavePrefix
      ? { from: l.from, to: l.from + prefix.length, insert: "" }
      : { from: l.from, insert: prefix },
  );

  view.dispatch({ changes });
  view.focus();
}

export function insertText(view: EditorView, text: string): void {
  const { from, to } = view.state.selection.main;
  view.dispatch({
    changes: { from, to, insert: text },
    selection: { anchor: from + text.length },
  });
  view.focus();
}

// Heading cycle: H1 → H2 → H3 → no-prefix → H1 (§13.5 #8).
const HEADING_PREFIXES = ["# ", "## ", "### "] as const;

export function cycleHeading(view: EditorView): void {
  const { from } = view.state.selection.main;
  const line = view.state.doc.lineAt(from);
  const text = line.text;

  let currentIdx = -1;
  for (let i = 0; i < HEADING_PREFIXES.length; i++) {
    if (text.startsWith(HEADING_PREFIXES[i])) {
      currentIdx = i;
      break;
    }
  }

  const stripLen = currentIdx >= 0 ? HEADING_PREFIXES[currentIdx].length : 0;
  const nextIdx = currentIdx + 1;
  const nextPrefix = nextIdx < HEADING_PREFIXES.length ? HEADING_PREFIXES[nextIdx] : "";

  view.dispatch({
    changes: { from: line.from, to: line.from + stripLen, insert: nextPrefix },
  });
  view.focus();
}

// Detect if the inline mark (e.g. "**" for bold) wraps the current cursor or selection.
export function isInlineMarkActive(view: EditorView, mark: string): boolean {
  const { from, to } = view.state.selection.main;
  const text = view.state.doc.toString();
  const before = text.slice(Math.max(0, from - mark.length), from);
  const after = text.slice(to, to + mark.length);
  return before === mark && after === mark;
}
63:T443,// Canonical wikilink pattern (Q-P2 lock):
// - [[label]]
// - [[label|alias]]
// - NOT image embeds (![[...]]) — caller must check isImageEmbed
// - NO nested square brackets
// - NO #anchor (deferred to v0.2)
export const WIKILINK_PATTERN = "\\[\\[([^\\[\\]\\n|]+?)(?:\\|([^\\[\\]\\n]+?))?\\]\\]";

export function makeWikilinkRegex(): RegExp {
  return new RegExp(WIKILINK_PATTERN, "g");
}

export interface WikilinkMatch {
  full: string;
  label: string;
  alias: string | undefined;
  start: number;
  end: number;
}

export function findWikilinks(text: string): WikilinkMatch[] {
  const matches: WikilinkMatch[] = [];
  for (const m of text.matchAll(makeWikilinkRegex())) {
    if (m.index === undefined) continue;
    if (isImageEmbed(text, m.index)) continue;
    matches.push({
      full: m[0],
      label: m[1].trim(),
      alias: m[2]?.trim(),
      start: m.index,
      end: m.index + m[0].length,
    });
  }
  return matches;
}

export function isImageEmbed(text: string, matchStart: number): boolean {
  return matchStart > 0 && text.charAt(matchStart - 1) === "!";
}
64:T8ed,import type { EditorView, KeyBinding } from "@codemirror/view";

// Standard markdown keymap (description Q2; plan §5.4).
// Mod-B / Mod-I / Mod-E / Mod-K wrap selection; Mod-Shift-period toggles blockquote.

function wrap(view: EditorView, before: string, after: string = before): boolean {
  const { from, to } = view.state.selection.main;
  const selectedText = view.state.sliceDoc(from, to);
  view.dispatch({
    changes: { from, to, insert: `${before}${selectedText}${after}` },
    selection:
      from === to
        ? { anchor: from + before.length }
        : { anchor: from + before.length, head: from + before.length + selectedText.length },
  });
  view.focus();
  return true;
}

function wrapLink(view: EditorView): boolean {
  // [[selection]](url) with cursor placed inside the (url) slot per §8.5 #1.
  const { from, to } = view.state.selection.main;
  const selectedText = view.state.sliceDoc(from, to);
  const before = `[${selectedText}](`;
  const after = ")";
  const cursor = from + before.length;
  view.dispatch({
    changes: { from, to, insert: `${before}${after}` },
    selection: { anchor: cursor },
  });
  view.focus();
  return true;
}

function toggleBlockquote(view: EditorView): boolean {
  const prefix = "> ";
  const { from, to } = view.state.selection.main;
  const startLine = view.state.doc.lineAt(from).number;
  const endLine = view.state.doc.lineAt(to).number;
  const lines: { from: number; to: number; text: string }[] = [];
  for (let n = startLine; n <= endLine; n++) {
    const line = view.state.doc.line(n);
    lines.push({ from: line.from, to: line.to, text: line.text });
  }
  const allHavePrefix = lines.every((l) => l.text.startsWith(prefix));
  const changes = lines.map((l) =>
    allHavePrefix
      ? { from: l.from, to: l.from + prefix.length, insert: "" }
      : { from: l.from, insert: prefix },
  );
  view.dispatch({ changes });
  view.focus();
  return true;
}

export function markdownKeymap(): KeyBinding[] {
  return [
    { key: "Mod-b", run: (view) => wrap(view, "**") },
    { key: "Mod-i", run: (view) => wrap(view, "*") },
    { key: "Mod-e", run: (view) => wrap(view, "`") },
    { key: "Mod-k", run: (view) => wrapLink(view) },
    { key: "Mod-Shift-.", run: (view) => toggleBlockquote(view) },
  ];
}
65:T12b9,import { EditorView } from "@codemirror/view";
import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
import { tags as t } from "@lezer/highlight";
import type { Extension } from "@codemirror/state";

// CM6 theme mapping editor surface to globals.css CSS variables (Q5 + §8.5 #5).
// All colors flow through `var(--*)` so dark/light theme flips at the document
// level update the editor without notifying CM6 — no remount.
const editorTheme = EditorView.theme({
  "&": {
    backgroundColor: "var(--card)",
    color: "var(--foreground)",
    fontFamily: "var(--font-mono)",
    fontSize: "0.875rem",
    lineHeight: "1.65",
    height: "100%",
  },
  ".cm-content": {
    caretColor: "var(--foreground)",
    padding: "0.875rem 1rem",
  },
  ".cm-scroller": {
    fontFamily: "inherit",
    overflowY: "auto",
  },
  ".cm-cursor, .cm-dropCursor": {
    borderLeftColor: "var(--foreground)",
    borderLeftWidth: "1.5px",
  },
  "&.cm-focused": {
    outline: "none",
  },
  "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, ::selection": {
    backgroundColor: "color-mix(in oklch, var(--primary) 28%, transparent)",
  },
  ".cm-activeLine": {
    backgroundColor: "color-mix(in oklch, var(--muted) 55%, transparent)",
  },
  ".cm-gutters": {
    backgroundColor: "transparent",
    color: "var(--muted-foreground)",
    border: "none",
  },
  ".cm-activeLineGutter": {
    backgroundColor: "transparent",
    color: "var(--foreground)",
  },
  ".cm-selectionMatch": {
    backgroundColor: "color-mix(in oklch, var(--primary) 18%, transparent)",
  },

  // Wikilink decoration (Q-P5; styled per resolved/broken)
  ".cm-wikilink": {
    color: "var(--primary)",
    backgroundColor: "color-mix(in oklch, var(--primary) 12%, transparent)",
    borderRadius: "3px",
    padding: "1px 2px",
  },
  ".cm-wikilink-broken": {
    color: "var(--destructive)",
    backgroundColor: "color-mix(in oklch, var(--destructive) 10%, transparent)",
    textDecoration: "underline dashed",
    textUnderlineOffset: "3px",
  },

  // Search panel (description §3 — out of scope to redesign; map colors only per §13.5 #11)
  ".cm-panels": {
    backgroundColor: "var(--popover)",
    color: "var(--popover-foreground)",
    borderTop: "1px solid var(--border)",
  },
  ".cm-panels input": {
    backgroundColor: "var(--background)",
    color: "var(--foreground)",
    border: "1px solid var(--border)",
    borderRadius: "0.375rem",
    padding: "0.25rem 0.5rem",
  },
  ".cm-panels button": {
    backgroundColor: "var(--secondary)",
    color: "var(--secondary-foreground)",
    border: "1px solid var(--border)",
    borderRadius: "0.375rem",
    padding: "0.125rem 0.5rem",
    marginLeft: "0.25rem",
  },

  // Autocomplete popup
  ".cm-tooltip.cm-tooltip-autocomplete": {
    backgroundColor: "var(--popover)",
    color: "var(--popover-foreground)",
    border: "1px solid var(--border)",
    borderRadius: "0.5rem",
    boxShadow: "0 8px 24px -8px rgb(0 0 0 / 0.18)",
    fontFamily: "var(--font-sans)",
  },
  ".cm-tooltip-autocomplete > ul": {
    fontFamily: "var(--font-sans)",
    fontSize: "0.8125rem",
    maxHeight: "16rem",
  },
  ".cm-tooltip-autocomplete > ul > li": {
    padding: "0.25rem 0.625rem",
  },
  ".cm-tooltip-autocomplete > ul > li[aria-selected]": {
    backgroundColor: "var(--accent)",
    color: "var(--accent-foreground)",
  },
  ".cm-completionInfo": {
    backgroundColor: "var(--popover)",
    color: "var(--popover-foreground)",
    border: "1px solid var(--border)",
    borderRadius: "0.5rem",
    padding: "0.5rem 0.75rem",
    fontFamily: "var(--font-sans)",
  },
});

// Syntax highlighting for markdown tokens — maps lezer tags to design-token colors
const markdownHighlight = HighlightStyle.define([
  { tag: [t.heading1, t.heading2, t.heading3, t.heading4, t.heading5, t.heading6], color: "var(--foreground)", fontWeight: "600" },
  { tag: t.strong, fontWeight: "700" },
  { tag: t.emphasis, fontStyle: "italic" },
  { tag: t.strikethrough, textDecoration: "line-through", color: "var(--muted-foreground)" },
  { tag: t.link, color: "var(--primary)", textDecoration: "underline" },
  { tag: t.url, color: "var(--primary)" },
  { tag: t.monospace, color: "var(--foreground)", backgroundColor: "color-mix(in oklch, var(--muted) 70%, transparent)", borderRadius: "3px", padding: "0 3px" },
  { tag: t.quote, color: "var(--muted-foreground)", fontStyle: "italic" },
  { tag: t.list, color: "var(--muted-foreground)" },
  { tag: t.atom, color: "var(--primary)" },
  { tag: t.processingInstruction, color: "var(--muted-foreground)" },
  { tag: t.contentSeparator, color: "var(--border)" },
]);

export const markdownEditorTheme: Extension = [
  editorTheme,
  syntaxHighlighting(markdownHighlight, { fallback: true }),
];
66:Tfe8,import {
  type CompletionContext,
  type CompletionResult,
  type CompletionSource,
  closeCompletion,
} from "@codemirror/autocomplete";
import type { EditorView } from "@codemirror/view";
import type { RefObject } from "react";
import { candidatesField } from "./wikilink";
import type { KindMeta, WikilinkCandidate } from "../../types";

// Cap visible results to 50 (Q-P3 lock); overflow gets a sentinel "+ N more (refine search)" row.
const RESULT_CAP = 50;

function filterCandidates(
  candidates: ReadonlyArray,
  query: string,
): WikilinkCandidate[] {
  if (!query) return candidates.slice();
  const needle = query.toLowerCase();
  return candidates.filter((c) => c.label.toLowerCase().includes(needle));
}

function renderInfoPanel(
  candidate: WikilinkCandidate,
  kinds: Record | undefined,
): HTMLElement {
  const root = document.createElement("div");
  root.className = "markdown-editor-completion-info";
  root.style.display = "flex";
  root.style.flexDirection = "column";
  root.style.gap = "4px";

  if (candidate.kind && kinds?.[candidate.kind]) {
    const meta = kinds[candidate.kind];
    const badge = document.createElement("span");
    badge.textContent = meta.label;
    badge.style.alignSelf = "flex-start";
    badge.style.fontSize = "0.6875rem";
    badge.style.fontWeight = "600";
    badge.style.padding = "1px 6px";
    badge.style.borderRadius = "999px";
    badge.style.color = meta.color ?? "var(--foreground)";
    badge.style.backgroundColor = meta.color
      ? `color-mix(in oklch, ${meta.color} 14%, transparent)`
      : "var(--muted)";
    badge.style.border = `1px solid ${meta.color ?? "var(--border)"}`;
    root.appendChild(badge);
  }

  const label = document.createElement("div");
  label.textContent = candidate.label;
  label.style.fontWeight = "500";
  root.appendChild(label);

  if (candidate.alias) {
    const alias = document.createElement("div");
    alias.textContent = `alias: ${candidate.alias}`;
    alias.style.fontSize = "0.75rem";
    alias.style.color = "var(--muted-foreground)";
    root.appendChild(alias);
  }

  return root;
}

// Factory: returns a completion source closed over a kindsRef (read lazily so kinds prop
// updates flow through without reconfiguring the autocomplete extension).
export function createWikilinkCompletionSource(
  kindsRef: RefObject | undefined>,
): CompletionSource {
  return (context: CompletionContext): CompletionResult | null => {
    // Trigger: caret is somewhere inside an open wikilink token (anchored, NOT global).
    const before = context.matchBefore(/\[\[([^[\]\n|]*)$/);
    if (!before) return null;
    if (before.from === before.to && !context.explicit) return null;

    const query = before.text.slice(2);
    const candidatesMap = context.state.field(candidatesField, false);
    if (!candidatesMap) return null;

    const candidates = Array.from(candidatesMap.values());
    const filtered = filterCandidates(candidates, query);
    const capped = filtered.slice(0, RESULT_CAP);
    const overflow = filtered.length > RESULT_CAP ? filtered.length - RESULT_CAP : 0;

    return {
      from: before.from + 2,
      to: context.pos,
      options: [
        ...capped.map((c) => ({
          label: c.label,
          apply: (view: EditorView, _completion: unknown, from: number, to: number) => {
            const insert = c.alias ? `${c.label}|${c.alias}` : c.label;
            view.dispatch({
              changes: { from, to, insert: `${insert}]]` },
              selection: { anchor: from + insert.length + 2 },
            });
          },
          info: () => renderInfoPanel(c, kindsRef.current),
        })),
        ...(overflow > 0
          ? [
              {
                label: `…and ${overflow} more (refine search)`,
                apply: (view: EditorView) => closeCompletion(view),
                type: "text" as const,
                boost: -100,
              },
            ]
          : []),
      ],
      validFor: /^[^[\]\n|]*$/,
    };
  };
}
67:Tac6,import { StateEffect, StateField, type Extension } from "@codemirror/state";
import {
  Decoration,
  type DecorationSet,
  EditorView,
  MatchDecorator,
  ViewPlugin,
  type ViewUpdate,
} from "@codemirror/view";
import { isImageEmbed, makeWikilinkRegex } from "../wikilink-grammar";
import type { WikilinkCandidate } from "../../types";

// Effect to update candidates at runtime (validate-pass refinement #2 — Q-P5 lock).
export const setCandidatesEffect = StateEffect.define>();

// StateField holding the current candidates Map (lowercased+trimmed labels → candidate).
export const candidatesField = StateField.define>({
  create: () => new Map(),
  update: (value, tr) => {
    for (const effect of tr.effects) {
      if (effect.is(setCandidatesEffect)) return effect.value;
    }
    return value;
  },
});

export function buildCandidatesMap(
  candidates: ReadonlyArray,
): Map {
  return new Map(candidates.map((c) => [c.label.toLowerCase().trim(), c]));
}

// ViewPlugin: reads candidates from field; rebuilds decorations on doc OR field change.
const wikilinkPlugin = ViewPlugin.fromClass(
  class {
    decorations: DecorationSet;
    matcher: MatchDecorator;

    constructor(view: EditorView) {
      this.matcher = new MatchDecorator({
        regexp: makeWikilinkRegex(),
        decoration: (match, view, pos) => {
          const text = view.state.doc.toString();
          if (isImageEmbed(text, pos)) return null;
          const label = match[1].trim();
          const candidates = view.state.field(candidatesField, false) ?? new Map();
          // candidates may be empty when host doesn't supply wikilinkCandidates;
          // treat all as broken in that case (visible signal that nothing resolves).
          const resolved = candidates.size > 0 && candidates.has(label.toLowerCase());
          return Decoration.mark({
            class: resolved ? "cm-wikilink" : "cm-wikilink cm-wikilink-broken",
          });
        },
      });
      this.decorations = this.matcher.createDeco(view);
    }

    update(update: ViewUpdate) {
      const oldCandidates = update.startState.field(candidatesField, false);
      const newCandidates = update.state.field(candidatesField, false);
      const candidatesChanged = oldCandidates !== newCandidates;
      if (update.docChanged || candidatesChanged) {
        this.decorations = candidatesChanged
          ? this.matcher.createDeco(update.view)
          : this.matcher.updateDeco(update, this.decorations);
      }
    }
  },
  {
    decorations: (v) => v.decorations,
  },
);

export const wikilinkExtension: readonly Extension[] = [candidatesField, wikilinkPlugin];
68:T1270,import { useCallback, type CSSProperties, type KeyboardEvent, type MouseEvent } from "react";
import { cn } from "@/lib/utils";

interface PreviewPaneProps {
  html: string;
  onWikilinkClick: ((target: string) => void) | undefined;
  minHeight: string | number | undefined;
  maxHeight: string | number | undefined;
  className?: string;
}

function toCss(value: string | number | undefined): string | undefined {
  if (value === undefined) return undefined;
  return typeof value === "number" ? `${value}px` : value;
}

// Click + keyboard delegation per §6.5 — interactive wikilinks (those with role+tabindex)
// activate on Enter/Space; spans without role are inert.
export function PreviewPane({
  html,
  onWikilinkClick,
  minHeight,
  maxHeight,
  className,
}: PreviewPaneProps) {
  const activate = useCallback(
    (target: HTMLElement) => {
      const span = target.closest("[data-wikilink-target]");
      if (!span) return;
      const wikilinkTarget = span.getAttribute("data-wikilink-target");
      if (wikilinkTarget && onWikilinkClick) {
        onWikilinkClick(wikilinkTarget);
      }
    },
    [onWikilinkClick],
  );

  const handleClick = useCallback(
    (event: MouseEvent) => {
      const targetEl = event.target as HTMLElement;
      if (!targetEl.closest("[data-wikilink-target]")) return;
      event.preventDefault();
      activate(targetEl);
    },
    [activate],
  );

  const handleKeyDown = useCallback(
    (event: KeyboardEvent) => {
      if (event.key !== "Enter" && event.key !== " ") return;
      const targetEl = event.target as HTMLElement;
      if (!targetEl.matches("[data-wikilink-target]")) return;
      event.preventDefault();
      activate(targetEl);
    },
    [activate],
  );

  const style: CSSProperties = {
    minHeight: toCss(minHeight) ?? "12rem",
    maxHeight: toCss(maxHeight),
  };

  return (
    
  );
}
69:T4e8,import { buttonVariants } from "@/components/ui/button";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
import { cn } from "@/lib/utils";
import type { ToolbarCtx, ToolbarItem } from "../types";

interface ToolbarButtonProps {
  item: ToolbarItem;
  ctx: ToolbarCtx;
  disabled?: boolean;
}

export function ToolbarButton({ item, ctx, disabled }: ToolbarButtonProps) {
  const isActive = item.isActive ? item.isActive(ctx) : false;
  const tooltipLabel = item.shortcut ? `${item.label} (${item.shortcut})` : item.label;

  // F-cross-13: no `asChild` — the trigger IS the toolbar button (buttonVariants styling).
  return (
    
       item.run?.(ctx)}
        className={cn(
          buttonVariants({ variant: "ghost", size: "icon-sm" }),
          "text-muted-foreground hover:text-foreground",
          isActive && "bg-muted text-foreground",
        )}
      >
        {item.icon}
      
      {tooltipLabel}
    
  );
}
57:["$","$L59",null,{"files":[{"path":"src/registry/components/forms/markdown-editor/markdown-editor.tsx","content":"$5a","type":"registry:component","target":"components/markdown-editor/markdown-editor.tsx"},{"path":"src/registry/components/forms/markdown-editor/index.ts","content":"export { MarkdownEditor } from \"./markdown-editor\";\nexport { defaultMarkdownToolbar } from \"./default-toolbar\";\nexport { parseMarkdown } from \"./lib/parse-markdown\";\nexport type {\n  KindMeta,\n  MarkdownEditorHandle,\n  MarkdownEditorProps,\n  ToolbarCtx,\n  ToolbarItem,\n  ViewMode,\n  WikilinkCandidate,\n} from \"./types\";\n","type":"registry:component","target":"components/markdown-editor/index.ts"},{"path":"src/registry/components/forms/markdown-editor/types.ts","content":"$5b","type":"registry:component","target":"components/markdown-editor/types.ts"},{"path":"src/registry/components/forms/markdown-editor/default-toolbar.tsx","content":"$5c","type":"registry:component","target":"components/markdown-editor/default-toolbar.tsx"},{"path":"src/registry/components/forms/markdown-editor/hooks/use-codemirror.ts","content":"$5d","type":"registry:component","target":"components/markdown-editor/hooks/use-codemirror.ts"},{"path":"src/registry/components/forms/markdown-editor/hooks/use-imperative-handle.ts","content":"$5e","type":"registry:component","target":"components/markdown-editor/hooks/use-imperative-handle.ts"},{"path":"src/registry/components/forms/markdown-editor/hooks/use-toolbar-state.ts","content":"$5f","type":"registry:component","target":"components/markdown-editor/hooks/use-toolbar-state.ts"},{"path":"src/registry/components/forms/markdown-editor/hooks/use-view-mode.ts","content":"$60","type":"registry:component","target":"components/markdown-editor/hooks/use-view-mode.ts"},{"path":"src/registry/components/forms/markdown-editor/lib/parse-markdown.ts","content":"$61","type":"registry:component","target":"components/markdown-editor/lib/parse-markdown.ts"},{"path":"src/registry/components/forms/markdown-editor/lib/sync-annotation.ts","content":"import { Annotation } from \"@codemirror/state\";\n\n// Marks transactions originating from React value-prop sync so the updateListener\n// skips firing onChange and avoids the value-sync echo (Q-P9 lock).\nexport const SyncAnnotation = Annotation.define();\n","type":"registry:component","target":"components/markdown-editor/lib/sync-annotation.ts"},{"path":"src/registry/components/forms/markdown-editor/lib/toolbar-actions.ts","content":"$62","type":"registry:component","target":"components/markdown-editor/lib/toolbar-actions.ts"},{"path":"src/registry/components/forms/markdown-editor/lib/wikilink-grammar.ts","content":"$63","type":"registry:component","target":"components/markdown-editor/lib/wikilink-grammar.ts"},{"path":"src/registry/components/forms/markdown-editor/lib/extensions/compartments.ts","content":"import { Compartment } from \"@codemirror/state\";\n\nexport const readOnlyCompartment = new Compartment();\nexport const userExtensionsCompartment = new Compartment();\n","type":"registry:component","target":"components/markdown-editor/lib/extensions/compartments.ts"},{"path":"src/registry/components/forms/markdown-editor/lib/extensions/markdown-keymap.ts","content":"$64","type":"registry:component","target":"components/markdown-editor/lib/extensions/markdown-keymap.ts"},{"path":"src/registry/components/forms/markdown-editor/lib/extensions/save-keymap.ts","content":"import type { KeyBinding } from \"@codemirror/view\";\nimport type { RefObject } from \"react\";\n\n// Cmd/Ctrl+S → onSave (description §8.5 #4 + §8.5 #5).\n// preventDefault is gated on whether onSave is supplied:\n//   - onSaveRef.current set → run returns true; CM6 marks transaction handled and prevents browser default.\n//   - onSaveRef.current undefined → run returns false; browser's native save dialog fires (no surprise).\n// Payload is the CURRENT CM6 doc, NOT the React `value` prop (avoids stale-by-React-batching).\nexport function saveKeymap(\n  onSaveRef: RefObject<((value: string) => void) | undefined>,\n): KeyBinding[] {\n  return [\n    {\n      key: \"Mod-s\",\n      preventDefault: false,\n      run: (view) => {\n        const onSave = onSaveRef.current;\n        if (!onSave) return false;\n        onSave(view.state.doc.toString());\n        return true;\n      },\n    },\n  ];\n}\n","type":"registry:component","target":"components/markdown-editor/lib/extensions/save-keymap.ts"},{"path":"src/registry/components/forms/markdown-editor/lib/extensions/theme.ts","content":"$65","type":"registry:component","target":"components/markdown-editor/lib/extensions/theme.ts"},{"path":"src/registry/components/forms/markdown-editor/lib/extensions/wikilink-autocomplete.ts","content":"$66","type":"registry:component","target":"components/markdown-editor/lib/extensions/wikilink-autocomplete.ts"},{"path":"src/registry/components/forms/markdown-editor/lib/extensions/wikilink.ts","content":"$67","type":"registry:component","target":"components/markdown-editor/lib/extensions/wikilink.ts"},{"path":"src/registry/components/forms/markdown-editor/parts/editor-pane.tsx","content":"import type { CSSProperties } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\ninterface EditorPaneProps {\n  setContainer: (node: HTMLDivElement | null) => void;\n  minHeight: string | number | undefined;\n  maxHeight: string | number | undefined;\n  className?: string;\n}\n\nfunction toCss(value: string | number | undefined): string | undefined {\n  if (value === undefined) return undefined;\n  return typeof value === \"number\" ? `${value}px` : value;\n}\n\nexport function EditorPane({ setContainer, minHeight, maxHeight, className }: EditorPaneProps) {\n  const style: CSSProperties = {\n    minHeight: toCss(minHeight) ?? \"12rem\",\n    maxHeight: toCss(maxHeight),\n  };\n\n  return (\n    \n  );\n}\n","type":"registry:component","target":"components/markdown-editor/parts/editor-pane.tsx"},{"path":"src/registry/components/forms/markdown-editor/parts/kind-badge.tsx","content":"import type { CSSProperties } from \"react\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { cn } from \"@/lib/utils\";\nimport type { KindMeta } from \"../types\";\n\ninterface KindBadgeProps {\n  meta: KindMeta;\n  className?: string;\n}\n\nexport function KindBadge({ meta, className }: KindBadgeProps) {\n  // If meta.color is provided, use color-mix for the background tint and the literal\n  // for text + border. Otherwise fall back to the outline variant using design tokens.\n  const styled: CSSProperties = meta.color\n    ? {\n        color: meta.color,\n        backgroundColor: `color-mix(in oklch, ${meta.color} 14%, transparent)`,\n        borderColor: meta.color,\n      }\n    : {};\n\n  return (\n    \n      {meta.label}\n    \n  );\n}\n","type":"registry:component","target":"components/markdown-editor/parts/kind-badge.tsx"},{"path":"src/registry/components/forms/markdown-editor/parts/preview-pane.tsx","content":"$68","type":"registry:component","target":"components/markdown-editor/parts/preview-pane.tsx"},{"path":"src/registry/components/forms/markdown-editor/parts/toolbar-button.tsx","content":"$69","type":"registry:component","target":"components/markdown-editor/parts/toolbar-button.tsx"},{"path":"src/registry/components/forms/markdown-editor/parts/toolbar.tsx","content":"import { ToolbarButton } from \"./toolbar-button\";\nimport { cn } from \"@/lib/utils\";\nimport type { ToolbarCtx, ToolbarItem } from \"../types\";\n\ninterface ToolbarProps {\n  items: ReadonlyArray;\n  ctx: ToolbarCtx;\n  disabled?: boolean;\n  className?: string;\n}\n\nfunction isSeparator(item: ToolbarItem): boolean {\n  return item.id.startsWith(\"sep\");\n}\n\nexport function Toolbar({ items, ctx, disabled, className }: ToolbarProps) {\n  return (\n    \n      {items.map((item) =>\n        isSeparator(item) ? (\n          \n        ) : (\n          \n        ),\n      )}\n    
\n  );\n}\n","type":"registry:component","target":"components/markdown-editor/parts/toolbar.tsx"},{"path":"src/registry/components/forms/markdown-editor/parts/view-toggle.tsx","content":"import { Tabs, TabsList, TabsTrigger } from \"@/components/ui/tabs\";\nimport { cn } from \"@/lib/utils\";\nimport type { ViewMode } from \"../types\";\n\ninterface ViewToggleProps {\n  value: ViewMode;\n  onChange: (next: ViewMode) => void;\n  className?: string;\n}\n\nexport function ViewToggle({ value, onChange, className }: ViewToggleProps) {\n  return (\n     onChange(v as ViewMode)}\n      className={cn(\"w-fit shrink-0\", className)}\n    >\n      \n        \n          Edit\n        \n        \n          Split\n        \n        \n          Preview\n        \n      \n    \n  );\n}\n","type":"registry:component","target":"components/markdown-editor/parts/view-toggle.tsx"}],"className":"h-[70svh] min-h-80"}]