@teriusu/rich-editor 0.9.13 → 0.10.0

package/dist/components/FixedToolbar.svelte

@@ -28,6 +28,7 @@
     Paperclip,
     Columns2,
     Columns3,
+    PanelTop,
     SquareDashed,
     Tv,
     Youtube,
@@ -37,6 +38,7 @@
   } from "lucide-svelte";
   import { cn } from "../utils/cn";
   import { insertTableSized } from "../utils/table";
+  import ToggleHeadingIcon from "./icons/ToggleHeadingIcon.svelte";
   import InputModal from "./InputModal.svelte";
   import type { ToolbarFeature, PromptHandler } from "../types";
 
@@ -206,6 +208,7 @@
       has("table") ||
       has("columns-2") ||
       has("columns-3") ||
+      has("tabs") ||
       has("horizontal-rule") ||
       has("code-block") ||
       has("math"),
@@ -427,9 +430,11 @@
             토글 제목 — 접히는 제목. 만드는 일은 입력 규칙(`# > `)과 **같은 커맨드**가 한다.
             제목 바로 아래에 두는 게 맞지만 이 메뉴는 `본문 → 제목 → 목록 → 블록` 순이라,
             토글 옆에 붙여 **접히는 것끼리** 모은다.
+
+            ⚠️ 아이콘은 `제목 N` 과 **달라야 한다.** 한동안 둘 다 lucide `HeadingN` 이라 메뉴에서
+            구분이 안 됐다(사용자 지적) — 삼각형이 붙은 `ToggleHeadingIcon` 을 쓴다.
           -->
           {#each [1, 2, 3] as level}
-            {@const Icon = level === 1 ? Heading1 : level === 2 ? Heading2 : Heading3}
             <button
               type="button"
               class={cn(
@@ -445,7 +450,7 @@
                     .run(),
                 )}
             >
-              <Icon size={14} /> 토글 제목 {level}
+              <ToggleHeadingIcon size={14} level={level as 1 | 2 | 3} /> 토글 제목 {level}
               <span class="hce-menu-shortcut">{'#'.repeat(level)} &gt; </span>
             </button>
           {/each}
@@ -678,7 +683,7 @@
           </button>
           {/if}
 
-          {#if has('horizontal-rule') || has('columns-2') || has('columns-3') || has('card')}
+          {#if has('horizontal-rule') || has('columns-2') || has('columns-3') || has('tabs') || has('card')}
           <div class="h-px bg-border my-1"></div>
           {/if}
           {#if has('horizontal-rule')}
@@ -714,6 +719,16 @@
             <Columns3 size={14} /> 3단 컬럼
           </button>
           {/if}
+          {#if has('tabs')}
+          <button
+            type="button"
+            class="w-full text-left px-2.5 py-1.5 text-xs transition-colors flex items-center gap-2 hover:bg-muted"
+            onclick={() =>
+              runInsert(() => editor.chain().focus().setTabs(3).run())}
+          >
+            <PanelTop size={14} /> 탭
+          </button>
+          {/if}
           {#if has('card')}
           <button
             type="button"

package/dist/components/FixedToolbar.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FixedToolbar.svelte.d.ts","sourceRoot":"","sources":["../../src/components/FixedToolbar.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAsCtC,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAE7D,KAAK,gBAAgB,GAAI;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC9B,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB;;;;;OAKG;IACH,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,0CAA0C;IAC1C,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAgiBJ,QAAA,MAAM,YAAY,sDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"FixedToolbar.svelte.d.ts","sourceRoot":"","sources":["../../src/components/FixedToolbar.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAwCtC,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAE7D,KAAK,gBAAgB,GAAI;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC9B,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB;;;;;OAKG;IACH,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,0CAA0C;IAC1C,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAuiBJ,QAAA,MAAM,YAAY,sDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/components/SlashCommandMenu.svelte

@@ -18,12 +18,16 @@
     Paperclip,
     Columns2,
     Columns3,
+    PanelTop,
     Type,
     Tv,
     Youtube,
     SquareDashed,
     Sigma,
   } from "lucide-svelte";
+  import ToggleHeading1 from "./icons/ToggleHeading1.svelte";
+  import ToggleHeading2 from "./icons/ToggleHeading2.svelte";
+  import ToggleHeading3 from "./icons/ToggleHeading3.svelte";
   import { insertTableSized } from "../utils/table";
   import type { SlashMenuItem, ToolbarFeature, PromptHandler } from "../types";
   import type { Component } from "svelte";
@@ -52,6 +56,7 @@
     table: "레이아웃",
     "columns-2": "레이아웃",
     "columns-3": "레이아웃",
+    tabs: "레이아웃",
     link: "미디어",
     image: "미디어",
   };
@@ -177,13 +182,16 @@
      * 토글 제목 — 접히는 제목. 입력 규칙(`# > `)으로도 만들 수 있지만 그것만 있으면
      * **메뉴에는 없는 기능**이 된다(사용자 요청으로 추가).
      * 만드는 일은 입력 규칙과 **같은 커맨드**가 한다(`setToggleHeading`).
+     *
+     * ⚠️ 아이콘은 `제목 N` 과 **달라야 한다.** 한동안 둘 다 lucide `HeadingN` 이라 메뉴에서
+     * 구분이 안 됐다(사용자 지적) — 삼각형이 붙은 `ToggleHeadingN` 을 쓴다.
      */
     {
       feature: "toggle",
       label: "토글 제목 1",
       section: "기본",
       keywords: "toggle heading 접기 제목 토글제목 h1",
-      icon: Heading1,
+      icon: ToggleHeading1,
       shortcut: "# > ",
       command: (editor) => editor.chain().focus().setToggleHeading(1).run(),
     },
@@ -192,7 +200,7 @@
       label: "토글 제목 2",
       section: "기본",
       keywords: "toggle heading 접기 제목 토글제목 h2",
-      icon: Heading2,
+      icon: ToggleHeading2,
       shortcut: "## > ",
       command: (editor) => editor.chain().focus().setToggleHeading(2).run(),
     },
@@ -201,7 +209,7 @@
       label: "토글 제목 3",
       section: "기본",
       keywords: "toggle heading 접기 제목 토글제목 h3",
-      icon: Heading3,
+      icon: ToggleHeading3,
       shortcut: "### > ",
       command: (editor) => editor.chain().focus().setToggleHeading(3).run(),
     },
@@ -227,6 +235,13 @@
       icon: Columns3,
       command: (editor) => editor.chain().focus().setColumns(3).run(),
     },
+    {
+      feature: "tabs",
+      label: "탭",
+      keywords: "tab tabs 탭 탭블록 전환 분할",
+      icon: PanelTop,
+      command: (editor) => editor.chain().focus().setTabs(3).run(),
+    },
     {
       feature: "image",
       label: "이미지",

package/dist/components/SlashCommandMenu.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SlashCommandMenu.svelte.d.ts","sourceRoot":"","sources":["../../src/components/SlashCommandMenu.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AA0B3C,OAAO,KAAK,EAAiB,cAAc,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAC7E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAEvC,KAAK,gBAAgB,GAAI;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B;;;OAGG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B,CAAC;AA0bJ,QAAA,MAAM,gBAAgB,qCAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"SlashCommandMenu.svelte.d.ts","sourceRoot":"","sources":["../../src/components/SlashCommandMenu.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AA8B3C,OAAO,KAAK,EAAiB,cAAc,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAC7E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAEvC,KAAK,gBAAgB,GAAI;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B;;;OAGG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B,CAAC;AAwcJ,QAAA,MAAM,gBAAgB,qCAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/components/TipTapEditor.svelte

@@ -123,6 +123,7 @@
   import { PdfBlock } from "../extensions/PdfBlock";
   import { Columns } from "../extensions/Columns";
   import { Column } from "../extensions/Column";
+  import { TabsBlock, Tab } from "../extensions/TabsBlock";
   import { transformLegacyHtml } from "../utils/sanitize";
   import { Indent } from "../extensions/Indent";
   import { FileAttachment } from "../extensions/FileAttachment";
@@ -611,6 +612,12 @@
           : [MathDisplay.configure({ promptMath })]),
         Columns,
         Column,
+        /*
+         * 탭 블록도 `Columns`/`Column` 처럼 **컨테이너와 자식을 함께** 등록한다.
+         * 한쪽만 넣으면 스키마가 서지 않는다(`tabs` 의 내용이 `tab+` 다).
+         */
+        TabsBlock,
+        Tab,
         CodeBlockTopEscape,
         Indent,
         FixedDetails,

package/dist/components/TipTapEditor.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TipTapEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/components/TipTapEditor.svelte.ts"],"names":[],"mappings":"AA8FA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AA4BtC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAUjD,OAAO,EAA2B,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAQ9E,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE1F,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAEhE,KAAK,gBAAgB,GAAI;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,aAAa,CAAC,EAAE,YAAY,CAAC;IAC7B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,uDAAuD;IACvD,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,wCAAwC;IACxC,sBAAsB,CAAC,EAAE,aAAa,CAAC;IACvC,mDAAmD;IACnD,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B,4BAA4B;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,YAAY,EAAE,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAC;CAC7B,CAAC;AAmvBJ,QAAA,MAAM,YAAY,sDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"TipTapEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/components/TipTapEditor.svelte.ts"],"names":[],"mappings":"AA8FA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AA4BtC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAWjD,OAAO,EAA2B,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAQ9E,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE1F,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAEhE,KAAK,gBAAgB,GAAI;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,aAAa,CAAC,EAAE,YAAY,CAAC;IAC7B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,uDAAuD;IACvD,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,wCAAwC;IACxC,sBAAsB,CAAC,EAAE,aAAa,CAAC;IACvC,mDAAmD;IACnD,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B,4BAA4B;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,YAAY,EAAE,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAC;CAC7B,CAAC;AA0vBJ,QAAA,MAAM,YAAY,sDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/components/icons/ToggleHeading1.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  /*
+   * 단계별 얇은 껍데기. 슬래시 메뉴는 아이콘을 `Component<{ size?: number }>` 로 **데이터
+   * 표에 담아** 두고 `<item.icon size={SI} />` 로만 그린다 — 거기엔 `level` 을 넘길 자리가
+   * 없다. 그래서 단계를 미리 박아 둔 컴포넌트를 셋 만든다.
+   */
+  import ToggleHeadingIcon from "./ToggleHeadingIcon.svelte";
+
+  let { size = 24 }: { size?: number } = $props();
+</script>
+
+<ToggleHeadingIcon {size} level={1} />

package/dist/components/icons/ToggleHeading1.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    size?: number;
+};
+declare const ToggleHeading1: import("svelte").Component<$$ComponentProps, {}, "">;
+type ToggleHeading1 = ReturnType<typeof ToggleHeading1>;
+export default ToggleHeading1;
+//# sourceMappingURL=ToggleHeading1.svelte.d.ts.map

package/dist/components/icons/ToggleHeading1.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleHeading1.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/icons/ToggleHeading1.svelte.ts"],"names":[],"mappings":"AAUC,KAAK,gBAAgB,GAAI;IAAE,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAY5C,QAAA,MAAM,cAAc,sDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/components/icons/ToggleHeading2.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  /* 단계를 박아 둔 껍데기 — 이유는 `ToggleHeading1.svelte` 참조. */
+  import ToggleHeadingIcon from "./ToggleHeadingIcon.svelte";
+
+  let { size = 24 }: { size?: number } = $props();
+</script>
+
+<ToggleHeadingIcon {size} level={2} />

package/dist/components/icons/ToggleHeading2.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    size?: number;
+};
+declare const ToggleHeading2: import("svelte").Component<$$ComponentProps, {}, "">;
+type ToggleHeading2 = ReturnType<typeof ToggleHeading2>;
+export default ToggleHeading2;
+//# sourceMappingURL=ToggleHeading2.svelte.d.ts.map

package/dist/components/icons/ToggleHeading2.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleHeading2.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/icons/ToggleHeading2.svelte.ts"],"names":[],"mappings":"AAMC,KAAK,gBAAgB,GAAI;IAAE,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAY5C,QAAA,MAAM,cAAc,sDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/components/icons/ToggleHeading3.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  /* 단계를 박아 둔 껍데기 — 이유는 `ToggleHeading1.svelte` 참조. */
+  import ToggleHeadingIcon from "./ToggleHeadingIcon.svelte";
+
+  let { size = 24 }: { size?: number } = $props();
+</script>
+
+<ToggleHeadingIcon {size} level={3} />

package/dist/components/icons/ToggleHeading3.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    size?: number;
+};
+declare const ToggleHeading3: import("svelte").Component<$$ComponentProps, {}, "">;
+type ToggleHeading3 = ReturnType<typeof ToggleHeading3>;
+export default ToggleHeading3;
+//# sourceMappingURL=ToggleHeading3.svelte.d.ts.map

package/dist/components/icons/ToggleHeading3.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleHeading3.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/icons/ToggleHeading3.svelte.ts"],"names":[],"mappings":"AAMC,KAAK,gBAAgB,GAAI;IAAE,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAY5C,QAAA,MAAM,cAAc,sDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/components/icons/ToggleHeadingIcon.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+  /*
+   * 토글 제목 아이콘 — 펼침 삼각형 + 제목 단계(H1·H2·H3).
+   *
+   * 메뉴에서 `토글 제목 N` 이 `제목 N` 과 **똑같은 lucide `HeadingN` 아이콘**을 쓰고 있어서,
+   * 목록만 보고는 둘을 구분할 수 없었다(사용자 지적). 접힌다는 사실을 아이콘이 말해야 한다.
+   *
+   * 삼각형은 실제 토글 손잡이(`editor.css` 의 `[data-type="details"] > button::after`,
+   * 밑변 7px · 높이 11px 채운 삼각형)와 **같은 모양·같은 비율(0.63)** 로 맞춘다 — 메뉴에서 고른
+   * 것과 문서에 생긴 것이 같아 보여야 한다. 거기 적힌 교훈도 그대로 적용된다: **작으면 점처럼
+   * 보인다.**
+   *
+   * ⚠️ **상자를 정사각(24×24)으로 유지한다.** 슬래시 메뉴는 아이콘을 20×20 칩(`.slash-icon`)
+   * 안에 가운데 정렬로 넣고, 고정 툴바 메뉴는 `flex gap-2` 로 라벨을 잇는다. 삼각형을 글자
+   * 왼쪽 **바깥**에 덧대 폭을 넓히면 그 줄만 칩을 넘치거나 라벨이 밀린다.
+   *
+   * 그래서 삼각형은 lucide 가 비워 두는 왼쪽 여백(x 0~4)에 넣고, 제목 글자는 **줄이지 않고**
+   * 오른쪽으로 2 만 민다. 14px 로 그려지는 메뉴에서 글자를 줄이면 그만큼 읽기 어려워지고,
+   * 바로 위에 붙는 `제목 N` 과 크기가 달라 한 가족으로 안 보인다(0.7~0.9 로 줄인 안을 픽셀로
+   * 비교해 고른 값이다). 배율이 1 이라 **획 두께 보정도 필요 없다** — `scale()` 로 줄이면
+   * 획까지 같이 줄어 옆 아이콘보다 가늘어진다.
+   */
+  interface Props {
+    /** 바깥 상자 한 변(px). lucide 아이콘과 같은 뜻이다. */
+    size?: number;
+    level?: 1 | 2 | 3;
+  }
+
+  let { size = 24, level = 1 }: Props = $props();
+
+  /**
+   * lucide `heading-1|2|3` 의 **숫자 부분만**. `H` 획 세 개는 세 단계가 공유하므로 아래
+   * 마크업에 한 벌만 둔다. (lucide-svelte v0.477.0 의 `iconNode` 와 같은 값)
+   */
+  const DIGIT: Record<1 | 2 | 3, string[]> = {
+    1: ["m17 12 3-2v8"],
+    2: ["M21 18h-4c0-4 4-3 4-6 0-1.5-2-2.5-4-1"],
+    3: [
+      "M17.5 10.5c1.7-1 3.5 0 3.5 1.5a2 2 0 0 1-2 2",
+      "M17 17.5c2 1.5 4 .3 4-1.5a2 2 0 0 0-2-2",
+    ],
+  };
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width={size}
+  height={size}
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  aria-hidden="true"
+>
+  <!-- 펼침 표식. 이 아이콘에서 유일하게 칠하는 요소라 fill·stroke 를 여기서 뒤집는다. -->
+  <path d="M1 9 4.7 12 1 15Z" fill="currentColor" stroke="none" />
+  <!-- lucide `heading-N` 을 통째로 오른쪽으로 2. `H` 획은 세 단계가 같다. -->
+  <g transform="translate(2 0)">
+    <path d="M4 12h8" />
+    <path d="M4 18V6" />
+    <path d="M12 18V6" />
+    {#each DIGIT[level] as d}
+      <path {d} />
+    {/each}
+  </g>
+</svg>

package/dist/components/icons/ToggleHeadingIcon.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    /** 바깥 상자 한 변(px). lucide 아이콘과 같은 뜻이다. */
+    size?: number;
+    level?: 1 | 2 | 3;
+}
+declare const ToggleHeadingIcon: import("svelte").Component<Props, {}, "">;
+type ToggleHeadingIcon = ReturnType<typeof ToggleHeadingIcon>;
+export default ToggleHeadingIcon;
+//# sourceMappingURL=ToggleHeadingIcon.svelte.d.ts.map

package/dist/components/icons/ToggleHeadingIcon.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleHeadingIcon.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/icons/ToggleHeadingIcon.svelte.ts"],"names":[],"mappings":"AAwBE,UAAU,KAAK;IACb,yCAAyC;IACzC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CACnB;AAoCH,QAAA,MAAM,iBAAiB,2CAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/extensions/TabsBlock.d.ts

@@ -0,0 +1,18 @@
+import { Node } from "@tiptap/core";
+/**
+ * 탭 하나. `tabs` 안에서만 산다(`group: ""`).
+ *
+ * `isolating: true` — 탭 경계 너머로 지우기·병합이 넘어가지 않게 한다. 없으면 탭 맨 앞에서
+ * Backspace 를 눌렀을 때 앞 탭의 내용과 합쳐진다.
+ */
+export declare const Tab: Node<any, any>;
+export declare const TabsBlock: Node<any, any>;
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        tabs: {
+            /** 탭 블록을 넣는다. 탭마다 빈 문단 하나. 기본 3개. */
+            setTabs: (count?: number) => ReturnType;
+        };
+    }
+}
+//# sourceMappingURL=TabsBlock.d.ts.map

package/dist/extensions/TabsBlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsBlock.d.ts","sourceRoot":"","sources":["../../src/extensions/TabsBlock.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAmB,MAAM,cAAc,CAAC;AA4DrD;;;;;GAKG;AACH,eAAO,MAAM,GAAG,gBAqDd,CAAC;AAEH,eAAO,MAAM,SAAS,gBA6lBpB,CAAC;AAEH,OAAO,QAAQ,cAAc,CAAC;IAC7B,UAAU,QAAQ,CAAC,UAAU;QAC5B,IAAI,EAAE;YACL,qCAAqC;YACrC,OAAO,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,UAAU,CAAC;SACxC,CAAC;KACF;CACD"}