mdsquare 0.0.0-stage → 0.1.0

package/dist/tableState.js

@@ -0,0 +1,96 @@
+import { syntaxTree } from "@codemirror/language";
+import { StateEffect, StateField } from "@codemirror/state";
+import { scanTables, tableRowAt } from "./tableModel.js";
+// ---------------------------------------------------------------------------
+// 문서 전체의 표 목록
+// ---------------------------------------------------------------------------
+/** 문서의 모든 표 (문서 순서). 문서/구문 트리/설정이 바뀔 때만 다시 찾습니다. */
+export const tablesField = StateField.define({
+    create: scanTables,
+    update(value, tr) {
+        if (tr.docChanged || tr.reconfigured || syntaxTree(tr.startState) !== syntaxTree(tr.state))
+            return scanTables(tr.state);
+        return value;
+    },
+});
+/** pos에서 시작하는(Table 노드 시작이 pos인) 표 */
+export function tableBlockAt(state, from) {
+    const tables = state.field(tablesField, false);
+    if (!tables)
+        return null;
+    let lo = 0;
+    let hi = tables.length - 1;
+    while (lo <= hi) {
+        const mid = (lo + hi) >> 1;
+        const table = tables[mid];
+        if (table.from === from)
+            return table;
+        if (table.from < from)
+            lo = mid + 1;
+        else
+            hi = mid - 1;
+    }
+    return null;
+}
+export const setTableSelection = StateEffect.define({
+    map: (value, mapping) => value && { ...value, table: mapping.mapPos(value.table, 1) },
+});
+export const tableSelectionField = StateField.define({
+    create: () => null,
+    update(value, tr) {
+        for (const effect of tr.effects)
+            if (effect.is(setTableSelection))
+                return effect.value;
+        if (value && tr.docChanged)
+            value = { ...value, table: tr.changes.mapPos(value.table, 1) };
+        // 표가 사라졌으면 해제합니다.
+        if (value && !tableBlockAt(tr.state, value.table))
+            return null;
+        return value;
+    },
+});
+// ---------------------------------------------------------------------------
+// 칸 위치와 칸 범위 선택
+// ---------------------------------------------------------------------------
+/** pos가 있는 칸: [행 번호(0: 머리글 줄), 열 번호]. 표 행이 아니면 null */
+export function cellIndexAt(state, pos) {
+    const found = tableRowAt(state, pos);
+    if (!found)
+        return null;
+    let row = -1;
+    let i = 0;
+    for (let child = found.table.firstChild; child; child = child.nextSibling) {
+        if (child.name !== "TableHeader" && child.name !== "TableRow")
+            continue;
+        if (child.from === found.row.from) {
+            row = i;
+            break;
+        }
+        i++;
+    }
+    const { cells } = found.row;
+    let column = cells.findIndex((c) => pos <= c.to);
+    if (column < 0)
+        column = Math.max(0, cells.length - 1);
+    return row < 0 ? null : { table: found.table.from, row, column };
+}
+/**
+ * 선택이 같은 표의 두 칸 이상에 걸치면 그 사각형 칸 범위 (Notion처럼 칸 단위로 고름). 아니면 null.
+ * 한 칸 안의 선택은 글자 선택입니다.
+ */
+export function selectedCells(state) {
+    const { main } = state.selection;
+    if (main.empty || state.selection.ranges.length > 1)
+        return null;
+    const a = cellIndexAt(state, main.anchor);
+    const b = cellIndexAt(state, main.head);
+    if (!a || !b || a.table !== b.table || (a.row === b.row && a.column === b.column))
+        return null;
+    return {
+        table: a.table,
+        fromRow: Math.min(a.row, b.row),
+        toRow: Math.max(a.row, b.row),
+        fromColumn: Math.min(a.column, b.column),
+        toColumn: Math.max(a.column, b.column),
+    };
+}

package/dist/task.d.ts

@@ -0,0 +1,13 @@
+import type { Extension } from "@codemirror/state";
+import { EditorView } from "@codemirror/view";
+export declare const taskPlugin: import("@codemirror/view").ViewPlugin<import("./extensions.js").RevealPluginValue, undefined>;
+/** pos가 있는 줄의 (불릿) 작업 항목을 체크/해제합니다. 작업 항목이 아니면 false */
+export declare function toggleTask(view: EditorView, pos: number): boolean;
+/**
+ * GFM 작업 목록(`- [ ] 할 일`)을 체크박스로 보여주는 확장입니다.
+ * (번호 목록의 작업 항목 `1. [ ] 할 일`은 다루지 않고 원문 그대로 둡니다.)
+ * - 체크박스를 클릭하면 원문의 `[ ]` ↔ `[x]`가 바뀝니다.
+ * - 커서가 기호에 닿으면 원래 기호를 보여줍니다.
+ * - list()와 함께 쓰면 불릿 작업 항목의 불릿 대신 체크박스만 보여줍니다.
+ */
+export declare function task(): Extension;

package/dist/task.js

@@ -0,0 +1,179 @@
+import { syntaxTree } from "@codemirror/language";
+import { Decoration, EditorView, WidgetType } from "@codemirror/view";
+import { taskMarkersHandled } from "./list.js";
+import { createRevealPlugin } from "./utils/reveal.js";
+// ---------------------------------------------------------------------------
+// 체크박스 위젯
+// ---------------------------------------------------------------------------
+class TaskWidget extends WidgetType {
+    checked;
+    constructor(checked) {
+        super();
+        this.checked = checked;
+    }
+    eq(other) {
+        return other.checked === this.checked;
+    }
+    toDOM() {
+        // <label>로 감싸면 라벨 클릭 시 브라우저가 체크 상태만 바꿔 원문과 어긋날 수 있으므로 span을 씁니다.
+        const wrap = document.createElement("span");
+        wrap.className = "cm-task-checkbox";
+        const box = wrap.appendChild(document.createElement("input"));
+        box.type = "checkbox";
+        box.checked = this.checked;
+        return wrap;
+    }
+    // 클릭 이벤트를 에디터(mousedown 핸들러)가 받도록 합니다.
+    ignoreEvent() {
+        return false;
+    }
+}
+// 데코레이션 객체는 모듈 로드 시 한 번만 만들고 재사용합니다.
+const checkbox = {
+    checked: Decoration.replace({ widget: new TaskWidget(true) }),
+    unchecked: Decoration.replace({ widget: new TaskWidget(false) }),
+};
+const revealedMarker = Decoration.mark({ class: "cm-formatting cm-formatting-task" });
+const taskLine = Decoration.line({ class: "cm-task-item" });
+const taskLineChecked = Decoration.line({ class: "cm-task-item cm-task-item-checked" });
+const isCheckedMarker = (text) => text === "[x]" || text === "[X]";
+/**
+ * 작업 항목을 담을 수 있는 컨테이너 블록 (그 외 노드는 자식 순회 생략)
+ * 번호 목록 안에 중첩된 불릿 작업 항목도 찾아야 하므로 OrderedList도 포함합니다.
+ */
+const CONTAINERS = new Set([
+    "Document",
+    "Blockquote",
+    "BulletList",
+    "OrderedList",
+    "ListItem",
+]);
+// ---------------------------------------------------------------------------
+// 플러그인
+// ---------------------------------------------------------------------------
+export const taskPlugin = createRevealPlugin({
+    // 줄 데코레이션과 대체 데코레이션이 같은 위치에서 섞일 수 있으므로 정렬합니다.
+    sort: true,
+    visit({ state, decorations, isRevealed }) {
+        const { doc } = state;
+        return {
+            enter(node) {
+                if (node.name === "Task") {
+                    const marker = node.node.getChild("TaskMarker");
+                    const item = node.node.parent;
+                    const listMark = item?.getChild("ListMark");
+                    if (!marker || !item || !listMark)
+                        return false;
+                    // 번호 목록의 작업 항목(`1. [ ] 할 일`)은 다루지 않습니다. (원문 그대로 표시)
+                    if (item.parent?.name !== "BulletList")
+                        return false;
+                    const checked = isCheckedMarker(doc.sliceString(marker.from, marker.to));
+                    decorations.push((checked ? taskLineChecked : taskLine).range(doc.lineAt(node.from).from));
+                    // 기호부터 [ ]까지 체크박스로 대체 ("-   [ ]"처럼 공백이 여러 개여도 정확히)
+                    const from = listMark.from;
+                    if (isRevealed(from, marker.to)) {
+                        decorations.push(revealedMarker.range(from, marker.to));
+                    }
+                    else {
+                        decorations.push((checked ? checkbox.checked : checkbox.unchecked).range(from, marker.to));
+                    }
+                    return false;
+                }
+                // 컨테이너 블록만 내려가고, 문단/인라인 등은 순회하지 않습니다.
+                return CONTAINERS.has(node.name) ? undefined : false;
+            },
+        };
+    },
+});
+// ---------------------------------------------------------------------------
+// 체크 상태 토글
+// ---------------------------------------------------------------------------
+/** pos가 있는 줄의 (불릿) 작업 항목 체크 상태를 바꾸는 트랜잭션 스펙. 작업 항목이 없으면 null */
+function toggleSpec(state, pos) {
+    const line = state.doc.lineAt(pos);
+    let marker = null;
+    syntaxTree(state).iterate({
+        from: line.from,
+        to: line.to,
+        enter(node) {
+            if (node.name === "TaskMarker" && node.from >= line.from) {
+                // TaskMarker → Task → ListItem → BulletList (번호 목록의 작업 항목은 제외)
+                if (node.node.parent?.parent?.parent?.name === "BulletList") {
+                    marker = { from: node.from, to: node.to };
+                }
+                return false;
+            }
+        },
+    });
+    const found = marker;
+    if (!found)
+        return null;
+    const checked = isCheckedMarker(state.doc.sliceString(found.from, found.to));
+    // "[ ]" ↔ "[x]" : 가운데 한 글자만 바꿉니다.
+    return {
+        changes: { from: found.from + 1, to: found.from + 2, insert: checked ? " " : "x" },
+        userEvent: "input.toggle",
+    };
+}
+/** pos가 있는 줄의 (불릿) 작업 항목을 체크/해제합니다. 작업 항목이 아니면 false */
+export function toggleTask(view, pos) {
+    const spec = toggleSpec(view.state, pos);
+    if (!spec)
+        return false;
+    view.dispatch(spec);
+    return true;
+}
+const taskEvents = EditorView.domEventHandlers({
+    mousedown(event, view) {
+        const target = event.target;
+        const box = target?.closest?.(".cm-task-checkbox");
+        if (!box || !view.contentDOM.contains(box))
+            return false;
+        // 위젯의 DOM 위치는 위젯 시작 위치를 가리키므로, 그 줄의 TaskMarker를 트리에서 찾아 토글합니다.
+        if (!toggleTask(view, view.posAtDOM(box)))
+            return false;
+        event.preventDefault(); // 커서 이동/포커스 변경 없이 토글만 합니다.
+        return true;
+    },
+});
+// ---------------------------------------------------------------------------
+// 테마
+// ---------------------------------------------------------------------------
+const taskTheme = EditorView.baseTheme({
+    ".cm-task-checkbox input[type='checkbox']": {
+        position: "relative",
+        top: "2px",
+        width: "13.5px",
+        height: "13.5px",
+        margin: "0",
+        transformOrigin: "center",
+        transform: "scale(1.1)",
+        border: "1px solid #939393",
+        cursor: "pointer",
+        outline: "none",
+        appearance: "none",
+        borderRadius: "50%",
+        transition: "100ms",
+    },
+    ".cm-task-checkbox input[type='checkbox']:not(:checked):hover": {
+        borderColor: "#d3d3d3",
+    },
+    ".cm-task-checkbox input[type='checkbox']:checked": {
+        backgroundPosition: "center",
+        backgroundSize: "75%",
+        backgroundRepeat: "no-repeat",
+        backgroundColor: "#008cff",
+        borderColor: "#008cff",
+        backgroundImage: 'url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iNC41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWNoZWNrIj48cGF0aCBkPSJNMjAgNiA5IDE3bC01LTUiLz48L3N2Zz4=")',
+    },
+});
+/**
+ * GFM 작업 목록(`- [ ] 할 일`)을 체크박스로 보여주는 확장입니다.
+ * (번호 목록의 작업 항목 `1. [ ] 할 일`은 다루지 않고 원문 그대로 둡니다.)
+ * - 체크박스를 클릭하면 원문의 `[ ]` ↔ `[x]`가 바뀝니다.
+ * - 커서가 기호에 닿으면 원래 기호를 보여줍니다.
+ * - list()와 함께 쓰면 불릿 작업 항목의 불릿 대신 체크박스만 보여줍니다.
+ */
+export function task() {
+    return [taskPlugin, taskEvents, taskTheme, taskMarkersHandled.of(true)];
+}

package/dist/textMate.d.ts

@@ -0,0 +1,49 @@
+/**
+ * VS Code(TextMate) 색 테마 규칙 해석기.
+ *
+ * VS Code가 쓰는 vscode-textmate의 테마 매칭 방식을 그대로 따릅니다.
+ * - 규칙의 스코프 선택자 `a.b c.d`는 마지막 스코프(`c.d`)가 대상, 앞쪽(`a.b`)은 조상 조건입니다.
+ * - 스코프는 접두어 단위로 맞춥니다: `keyword`는 `keyword.control.ts`와 맞습니다.
+ * - 더 구체적인 규칙(점 단위 깊이 → 조상 조건)이 이기고, 덜 구체적인 규칙의 설정을 이어받습니다.
+ * - 토큰의 스코프 스택(바깥 → 안쪽)을 차례로 적용해, 안쪽 스코프의 규칙이 바깥 것을 덮어씁니다.
+ */
+/** 글꼴 모양 비트 (VS Code와 같은 값) */
+export declare const FontStyle: {
+    readonly NotSet: -1;
+    readonly None: 0;
+    readonly Italic: 1;
+    readonly Bold: 2;
+    readonly Underline: 4;
+    readonly Strikethrough: 8;
+};
+/** VS Code 테마의 tokenColors 항목 */
+export interface TokenColorRule {
+    readonly name?: string;
+    readonly scope?: string | readonly string[];
+    readonly settings?: {
+        readonly foreground?: string;
+        readonly fontStyle?: string;
+        readonly background?: string;
+    };
+}
+/** 해석 결과 */
+export interface TokenStyle {
+    /** 글자 색 (소문자 `#rrggbb` 또는 `#rrggbbaa` 등). 없으면 null */
+    readonly foreground: string | null;
+    /** FontStyle 비트 조합 */
+    readonly fontStyle: number;
+}
+export interface TextMateTheme {
+    /** 스코프 스택(바깥 → 안쪽)의 스타일을 구합니다. */
+    resolve(scopes: readonly string[]): TokenStyle;
+    /** 기본 글자 색 */
+    readonly foreground: string | null;
+    /** 규칙에 쓰인 모든 글자 색 */
+    readonly colors: readonly string[];
+}
+/** tokenColors 규칙으로 테마 해석기를 만듭니다. */
+export declare function textMateTheme(rules: readonly TokenColorRule[], defaultForeground?: string): TextMateTheme;
+/**
+ * JSONC(주석, 끝 쉼표 허용 JSON)를 읽습니다. 문자열 안의 `//`, `/*`는 건드리지 않습니다.
+ */
+export declare function parseJsonc(text: string): unknown;

package/dist/textMate.js

@@ -0,0 +1,284 @@
+/**
+ * VS Code(TextMate) 색 테마 규칙 해석기.
+ *
+ * VS Code가 쓰는 vscode-textmate의 테마 매칭 방식을 그대로 따릅니다.
+ * - 규칙의 스코프 선택자 `a.b c.d`는 마지막 스코프(`c.d`)가 대상, 앞쪽(`a.b`)은 조상 조건입니다.
+ * - 스코프는 접두어 단위로 맞춥니다: `keyword`는 `keyword.control.ts`와 맞습니다.
+ * - 더 구체적인 규칙(점 단위 깊이 → 조상 조건)이 이기고, 덜 구체적인 규칙의 설정을 이어받습니다.
+ * - 토큰의 스코프 스택(바깥 → 안쪽)을 차례로 적용해, 안쪽 스코프의 규칙이 바깥 것을 덮어씁니다.
+ */
+/** 글꼴 모양 비트 (VS Code와 같은 값) */
+export const FontStyle = {
+    NotSet: -1,
+    None: 0,
+    Italic: 1,
+    Bold: 2,
+    Underline: 4,
+    Strikethrough: 8,
+};
+const COLOR = /^#(?:[0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i;
+function parseFontStyle(value) {
+    if (typeof value !== "string")
+        return FontStyle.NotSet;
+    let style = FontStyle.None;
+    for (const word of value.split(/\s+/)) {
+        if (word === "italic")
+            style |= FontStyle.Italic;
+        else if (word === "bold")
+            style |= FontStyle.Bold;
+        else if (word === "underline")
+            style |= FontStyle.Underline;
+        else if (word === "strikethrough")
+            style |= FontStyle.Strikethrough;
+    }
+    return style;
+}
+const parseColor = (value) => typeof value === "string" && COLOR.test(value) ? value.toLowerCase() : null;
+/** 조상 조건 배열 비교 (vscode-textmate strArrCmp: null < 배열, 짧은 쪽 먼저) */
+function compareArrays(a, b) {
+    if (a === null && b === null)
+        return 0;
+    if (!a)
+        return -1;
+    if (!b)
+        return 1;
+    if (a.length !== b.length)
+        return a.length - b.length;
+    for (let i = 0; i < a.length; i++) {
+        if (a[i] !== b[i])
+            return a[i] < b[i] ? -1 : 1;
+    }
+    return 0;
+}
+class TrieRule {
+    scopeDepth;
+    parentScopes;
+    fontStyle;
+    foreground;
+    constructor(scopeDepth, parentScopes, fontStyle, foreground) {
+        this.scopeDepth = scopeDepth;
+        this.parentScopes = parentScopes;
+        this.fontStyle = fontStyle;
+        this.foreground = foreground;
+    }
+    clone() {
+        return new TrieRule(this.scopeDepth, this.parentScopes, this.fontStyle, this.foreground);
+    }
+    acceptOverwrite(scopeDepth, fontStyle, foreground) {
+        this.scopeDepth = Math.max(this.scopeDepth, scopeDepth);
+        if (fontStyle !== FontStyle.NotSet)
+            this.fontStyle = fontStyle;
+        if (foreground)
+            this.foreground = foreground;
+    }
+}
+/** 구체적인 규칙이 앞으로 (vscode-textmate _cmpBySpecificity) */
+function bySpecificity(a, b) {
+    if (a.scopeDepth !== b.scopeDepth)
+        return b.scopeDepth - a.scopeDepth;
+    let ai = 0;
+    let bi = 0;
+    for (;;) {
+        if (a.parentScopes[ai] === ">")
+            ai++;
+        if (b.parentScopes[bi] === ">")
+            bi++;
+        if (ai >= a.parentScopes.length || bi >= b.parentScopes.length)
+            break;
+        const diff = b.parentScopes[bi].length - a.parentScopes[ai].length;
+        if (diff !== 0)
+            return diff;
+        ai++;
+        bi++;
+    }
+    return b.parentScopes.length - a.parentScopes.length;
+}
+class TrieNode {
+    mainRule;
+    parentRules;
+    children = new Map();
+    constructor(mainRule, parentRules = []) {
+        this.mainRule = mainRule;
+        this.parentRules = parentRules;
+    }
+    match(scope) {
+        if (scope !== "") {
+            const dot = scope.indexOf(".");
+            const head = dot < 0 ? scope : scope.slice(0, dot);
+            const child = this.children.get(head);
+            if (child)
+                return child.match(dot < 0 ? "" : scope.slice(dot + 1));
+        }
+        return [...this.parentRules, this.mainRule].sort(bySpecificity);
+    }
+    insert(depth, scope, parents, fontStyle, fg) {
+        if (scope === "") {
+            this.insertHere(depth, parents, fontStyle, fg);
+            return;
+        }
+        const dot = scope.indexOf(".");
+        const head = dot < 0 ? scope : scope.slice(0, dot);
+        let child = this.children.get(head);
+        if (!child) {
+            // 새 자식은 지금까지의 설정을 이어받습니다.
+            child = new TrieNode(this.mainRule.clone(), this.parentRules.map((r) => r.clone()));
+            this.children.set(head, child);
+        }
+        child.insert(depth + 1, dot < 0 ? "" : scope.slice(dot + 1), parents, fontStyle, fg);
+    }
+    insertHere(depth, parents, fontStyle, fg) {
+        if (parents === null) {
+            this.mainRule.acceptOverwrite(depth, fontStyle, fg);
+            return;
+        }
+        for (const rule of this.parentRules) {
+            if (compareArrays(rule.parentScopes, parents) === 0) {
+                rule.acceptOverwrite(depth, fontStyle, fg);
+                return;
+            }
+        }
+        // 같은 조상 조건의 규칙이 없으면 대상 스코프의 기본 설정을 이어받아 새로 만듭니다.
+        this.parentRules.push(new TrieRule(depth, parents, fontStyle === FontStyle.NotSet ? this.mainRule.fontStyle : fontStyle, fg ?? this.mainRule.foreground));
+    }
+}
+const matchesScope = (scope, pattern) => scope === pattern || (scope.startsWith(pattern) && scope.charCodeAt(pattern.length) === 46); /* . */
+/** 조상 조건(가까운 조상부터)이 스코프 경로(바깥 → 안쪽)에 차례로 있는지 */
+function matchesParents(path, end, parents) {
+    let i = end - 1;
+    for (let p = 0; p < parents.length; p++) {
+        let pattern = parents[p];
+        let mustMatch = false;
+        if (pattern === ">") {
+            if (p === parents.length - 1)
+                return false;
+            pattern = parents[++p];
+            mustMatch = true;
+        }
+        while (i >= 0 && !matchesScope(path[i], pattern)) {
+            if (mustMatch)
+                return false;
+            i--;
+        }
+        if (i < 0)
+            return false;
+        i--;
+    }
+    return true;
+}
+/** tokenColors 규칙으로 테마 해석기를 만듭니다. */
+export function textMateTheme(rules, defaultForeground) {
+    const parsed = [];
+    rules.forEach((rule, index) => {
+        const settings = rule?.settings;
+        if (!settings || typeof settings !== "object")
+            return;
+        const scopes = typeof rule.scope === "string"
+            ? rule.scope.replace(/^,+|,+$/g, "").split(",")
+            : Array.isArray(rule.scope)
+                ? rule.scope
+                : [""];
+        const fontStyle = parseFontStyle(settings.fontStyle);
+        const foreground = parseColor(settings.foreground);
+        for (const selector of scopes) {
+            const segments = String(selector).trim().split(/\s+/).filter(Boolean);
+            const scope = segments.length ? segments[segments.length - 1] : "";
+            const parents = segments.length > 1 ? segments.slice(0, -1).reverse() : null;
+            parsed.push({ scope, parents, index, fontStyle, foreground });
+        }
+    });
+    parsed.sort((a, b) => (a.scope < b.scope ? -1 : a.scope > b.scope ? 1 : 0) ||
+        compareArrays(a.parents, b.parents) ||
+        a.index - b.index);
+    // 스코프 없는 규칙 = 전역 기본값
+    let defaultFontStyle = FontStyle.None;
+    let foreground = parseColor(defaultForeground);
+    while (parsed.length && parsed[0].scope === "") {
+        const rule = parsed.shift();
+        if (rule.fontStyle !== FontStyle.NotSet)
+            defaultFontStyle = rule.fontStyle;
+        if (rule.foreground)
+            foreground = rule.foreground;
+    }
+    const root = new TrieNode(new TrieRule(0, [], FontStyle.NotSet, null));
+    for (const rule of parsed)
+        root.insert(0, rule.scope, rule.parents, rule.fontStyle, rule.foreground);
+    const colors = new Set();
+    if (foreground)
+        colors.add(foreground);
+    for (const rule of parsed)
+        if (rule.foreground)
+            colors.add(rule.foreground);
+    return {
+        foreground,
+        colors: [...colors],
+        resolve(scopes) {
+            let fontStyle = defaultFontStyle;
+            let fg = foreground;
+            for (let i = 0; i < scopes.length; i++) {
+                for (const rule of root.match(scopes[i])) {
+                    if (!matchesParents(scopes, i, rule.parentScopes))
+                        continue;
+                    if (rule.fontStyle !== FontStyle.NotSet)
+                        fontStyle = rule.fontStyle;
+                    if (rule.foreground)
+                        fg = rule.foreground;
+                    break;
+                }
+            }
+            return { foreground: fg, fontStyle };
+        },
+    };
+}
+/**
+ * JSONC(주석, 끝 쉼표 허용 JSON)를 읽습니다. 문자열 안의 `//`, `/*`는 건드리지 않습니다.
+ */
+export function parseJsonc(text) {
+    let out = "";
+    let i = 0;
+    const n = text.length;
+    while (i < n) {
+        const ch = text[i];
+        if (ch === '"') {
+            // 문자열: 이스케이프를 지키며 통째로 복사
+            let j = i + 1;
+            while (j < n && text[j] !== '"')
+                j += text[j] === "\\" ? 2 : 1;
+            out += text.slice(i, j + 1);
+            i = j + 1;
+        }
+        else if (ch === "/" && text[i + 1] === "/") {
+            while (i < n && text[i] !== "\n")
+                i++;
+        }
+        else if (ch === "/" && text[i + 1] === "*") {
+            const end = text.indexOf("*/", i + 2);
+            i = end < 0 ? n : end + 2;
+        }
+        else if (ch === ",") {
+            // 끝 쉼표: 다음 의미 있는 글자가 } 또는 ]이면 버립니다.
+            let j = i + 1;
+            for (;;) {
+                while (j < n && /\s/.test(text[j]))
+                    j++;
+                if (text[j] === "/" && text[j + 1] === "/") {
+                    while (j < n && text[j] !== "\n")
+                        j++;
+                }
+                else if (text[j] === "/" && text[j + 1] === "*") {
+                    const end = text.indexOf("*/", j + 2);
+                    j = end < 0 ? n : end + 2;
+                }
+                else
+                    break;
+            }
+            if (text[j] !== "}" && text[j] !== "]")
+                out += ch;
+            i++;
+        }
+        else {
+            out += ch;
+            i++;
+        }
+    }
+    return JSON.parse(out);
+}

package/dist/tikz.d.ts

@@ -0,0 +1,56 @@
+import type { Extension } from "@codemirror/state";
+export interface TikzDocument {
+    /** 코드 블록 원문 */
+    readonly source: string;
+    /** `\begin{document}`와 `\end{document}` 사이 (없으면 원문에서 패키지/라이브러리 선언을 뺀 나머지) */
+    readonly body: string;
+    /** `\usepackage[옵션]{이름}` → { 이름: 옵션 } (tikz, xcolor, pgf는 렌더러가 이미 불러오므로 제외) */
+    readonly packages: Readonly<Record<string, string>>;
+    /** `\usetikzlibrary{…}`의 라이브러리 이름들 */
+    readonly libraries: readonly string[];
+    /** 그 밖의 전처리 명령 (`\begin{document}` 앞, 패키지/라이브러리 선언 제외) */
+    readonly preamble: string;
+}
+/** TikZ 코드 블록 원문을 렌더러가 쓸 수 있게 나눕니다. */
+export declare function parseTikz(source: string): TikzDocument;
+/** TikZ 문서를 SVG 마크업으로 바꿉니다. (실패하면 거부) */
+export type TikzRenderer = (doc: TikzDocument) => Promise<string>;
+export interface TikzJaxOptions {
+    /**
+     * tikzjax.js 주소. 같은 폴더에서 TeX 엔진(run-tex.js, tex.wasm.gz, core.dump.gz, tex_files/)을 불러오므로
+     * `@drgrice1/tikzjax`의 dist 폴더를 통째로 같은 출처에서 제공해야 합니다. (기본 "/tikzjax/tikzjax.js")
+     */
+    src?: string;
+    /** 글꼴 CSS 주소 (기본: src와 같은 폴더의 fonts.css). 이미 불러왔다면 false */
+    fonts?: string | false;
+    /** 한 그림의 최대 렌더링 시간 (ms, 기본 60000) */
+    timeout?: number;
+}
+/**
+ * TikZJax(@drgrice1/tikzjax, 브라우저 안의 WebAssembly TeX)로 그리는 렌더러.
+ * TikZJax는 GPL-3.0이므로 이 라이브러리에 포함하지 않고, 앱이 제공하는 주소에서 실행할 때 불러옵니다.
+ * 처음 한 번 TeX 엔진(약 7MB)을 내려받고, 결과는 TikZJax가 IndexedDB에 캐시합니다.
+ */
+export declare function tikzjaxRenderer(options?: TikzJaxOptions): TikzRenderer;
+/**
+ * 렌더러가 돌려준 SVG에서 스크립트와 이벤트 속성, javascript: 링크를 지웁니다.
+ * (TeX의 \special로 SVG 조각을 넣을 수 있으므로, 신뢰할 수 없는 문서도 안전하게 보여주기 위함)
+ */
+export declare function sanitizeSvg(markup: string): string;
+export interface TikzOptions {
+    /** TikZ → SVG 렌더러 (기본: `tikzjaxRenderer()`) */
+    render?: TikzRenderer;
+    /** 그림으로 그릴 코드 블록 언어 (기본 ["tikz"]) */
+    languages?: readonly string[];
+}
+/**
+ * ```` ```tikz ```` 코드 블록을 그림으로 보여주는 확장입니다.
+ * - 원문: Obsidian TikZJax 형식(`\usepackage`, `\usetikzlibrary`, `\begin{document}`…) 또는 tikzpicture만
+ * - 커서가 블록 밖이면 그림, 안이면 코드 블록 원문과 그 아래 미리보기
+ * - 렌더러는 바꿀 수 있습니다. 기본은 TikZJax(브라우저 WebAssembly TeX)이며, 그 파일은 앱이 제공해야 합니다.
+ *   ```ts
+ *   tikz({ render: tikzjaxRenderer({ src: "/tikzjax/tikzjax.js" }) })
+ *   ```
+ * - 같은 원문은 한 번만 렌더링합니다. 그리는 동안에는 진행 표시, 실패하면 오류를 보여줍니다.
+ */
+export declare function tikz(options?: TikzOptions): Extension;