@ecsplico/editor 0.0.0-stage → 2.0.0

package/dist/outline/EditorOutline.vue.d.ts

@@ -0,0 +1,15 @@
+import { Editor } from "@tiptap/core";
+//#region src/outline/EditorOutline.vue.d.ts
+/**
+ * The heading outline of an editor, placed anywhere on the page: nested headings in a tree, clicking one reveals it in
+ * the editor (selection only, the document is never changed). Works on exactly the editor passed in (from the
+ * surface's `ready` event); a missing or destroyed editor renders an empty outline.
+ */
+type __VLS_Props = {
+  editor?: Editor;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+//#endregion
+export { _default as default };
+//# sourceMappingURL=EditorOutline.vue.d.ts.map

package/dist/outline/heading-outline.d.ts

@@ -0,0 +1,26 @@
+import { Editor } from "@tiptap/core";
+import { Node as Node$1 } from "@tiptap/pm/model";
+//#region src/outline/heading-outline.d.ts
+/** One heading of a document's heading outline. */
+export interface HeadingOutlineNode {
+  /** Block ID, or `pos:<pos>` for a heading without one yet; unique within the document. */
+  key: string;
+  id: string | null;
+  /** Position of the heading in the document it was read from. */
+  pos: number;
+  level: number;
+  text: string;
+  children: HeadingOutlineNode[];
+}
+/** The top-level headings of `doc`, a deeper heading nesting under the nearest shallower one before it; a heading without text is labelled `untitled`. */
+export declare function headingOutline(doc: Node$1, untitled: string): HeadingOutlineNode[];
+/**
+ * Scrolls to the block `node` (found by its ID, else by its position), flashes it and puts the caret into its first
+ * text (a heading's text, a composite's title). The document is not modified.
+ */
+export declare function revealBlockInEditor(editor: Editor, node: {
+  id: string | null;
+  pos: number;
+}): void;
+//#endregion
+//# sourceMappingURL=heading-outline.d.ts.map

package/dist/outline/heading-outline.js

@@ -0,0 +1,46 @@
+import { blockIdOf, findBlockById } from "../core/schema/block-ids.js";
+import { Selection } from "@tiptap/pm/state";
+//#region src/outline/heading-outline.ts
+/** The top-level headings of `doc`, a deeper heading nesting under the nearest shallower one before it; a heading without text is labelled `untitled`. */
+function headingOutline(doc, untitled) {
+	const roots = [];
+	const stack = [];
+	doc.forEach((node, pos) => {
+		if (node.type.name !== "heading") return;
+		const id = blockIdOf(node);
+		const entry = {
+			key: id ?? `pos:${pos}`,
+			id,
+			pos,
+			level: Number(node.attrs.level),
+			text: node.textContent.trim() || untitled,
+			children: []
+		};
+		while (stack.length && stack[stack.length - 1].level >= entry.level) stack.pop();
+		const parent = stack[stack.length - 1];
+		if (parent) parent.children.push(entry);
+		else roots.push(entry);
+		stack.push(entry);
+	});
+	return roots;
+}
+/**
+* Scrolls to the block `node` (found by its ID, else by its position), flashes it and puts the caret into its first
+* text (a heading's text, a composite's title). The document is not modified.
+*/
+function revealBlockInEditor(editor, node) {
+	const { doc } = editor.state;
+	const found = node.id ? findBlockById(doc, node.id) : null;
+	const pos = found?.pos ?? node.pos;
+	if (!doc.nodeAt(pos)) return;
+	const caret = Selection.findFrom(doc.resolve(pos + 1), 1, true)?.from ?? pos + 1;
+	const chain = editor.chain().focus().setTextSelection(caret);
+	if (found && node.id) {
+		chain.run();
+		editor.commands.revealBlock(node.id);
+	} else chain.scrollIntoView().run();
+}
+//#endregion
+export { headingOutline, revealBlockInEditor };
+
+//# sourceMappingURL=heading-outline.js.map

package/dist/outline/heading-outline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"heading-outline.js","names":[],"sources":["../../src/outline/heading-outline.ts"],"sourcesContent":["import type { Editor } from '@tiptap/core'\nimport type { Node as PMNode } from '@tiptap/pm/model'\nimport { Selection } from '@tiptap/pm/state'\nimport { blockIdOf, findBlockById } from '../core/schema/block-ids'\n\n/** One heading of a document's heading outline. */\nexport interface HeadingOutlineNode {\n  /** Block ID, or `pos:<pos>` for a heading without one yet; unique within the document. */\n  key: string\n  id: string | null\n  /** Position of the heading in the document it was read from. */\n  pos: number\n  level: number\n  text: string\n  children: HeadingOutlineNode[]\n}\n\n/** The top-level headings of `doc`, a deeper heading nesting under the nearest shallower one before it; a heading without text is labelled `untitled`. */\nexport function headingOutline(doc: PMNode, untitled: string): HeadingOutlineNode[] {\n  const roots: HeadingOutlineNode[] = []\n  const stack: HeadingOutlineNode[] = []\n  doc.forEach((node, pos) => {\n    if (node.type.name !== 'heading') return\n    const id = blockIdOf(node)\n    const entry: HeadingOutlineNode = {\n      key: id ?? `pos:${pos}`,\n      id,\n      pos,\n      level: Number(node.attrs.level),\n      text: node.textContent.trim() || untitled,\n      children: [],\n    }\n    while (stack.length && stack[stack.length - 1]!.level >= entry.level) stack.pop()\n    const parent = stack[stack.length - 1]\n    if (parent) parent.children.push(entry)\n    else roots.push(entry)\n    stack.push(entry)\n  })\n  return roots\n}\n\n/**\n * Scrolls to the block `node` (found by its ID, else by its position), flashes it and puts the caret into its first\n * text (a heading's text, a composite's title). The document is not modified.\n */\nexport function revealBlockInEditor(editor: Editor, node: { id: string | null, pos: number }): void {\n  const { doc } = editor.state\n  const found = node.id ? findBlockById(doc, node.id) : null\n  const pos = found?.pos ?? node.pos\n  const block = doc.nodeAt(pos)\n  if (!block) return\n  const caret = Selection.findFrom(doc.resolve(pos + 1), 1, true)?.from ?? pos + 1\n  const chain = editor.chain().focus().setTextSelection(caret)\n  if (found && node.id) {\n    chain.run()\n    editor.commands.revealBlock(node.id)\n  }\n  else {\n    chain.scrollIntoView().run()\n  }\n}\n"],"mappings":";;;;AAkBA,SAAgB,eAAe,KAAa,UAAwC;CAClF,MAAM,QAA8B,CAAC;CACrC,MAAM,QAA8B,CAAC;CACrC,IAAI,SAAS,MAAM,QAAQ;EACzB,IAAI,KAAK,KAAK,SAAS,WAAW;EAClC,MAAM,KAAK,UAAU,IAAI;EACzB,MAAM,QAA4B;GAChC,KAAK,MAAM,OAAO;GAClB;GACA;GACA,OAAO,OAAO,KAAK,MAAM,KAAK;GAC9B,MAAM,KAAK,YAAY,KAAK,KAAK;GACjC,UAAU,CAAC;EACb;EACA,OAAO,MAAM,UAAU,MAAM,MAAM,SAAS,EAAE,CAAE,SAAS,MAAM,OAAO,MAAM,IAAI;EAChF,MAAM,SAAS,MAAM,MAAM,SAAS;EACpC,IAAI,QAAQ,OAAO,SAAS,KAAK,KAAK;OACjC,MAAM,KAAK,KAAK;EACrB,MAAM,KAAK,KAAK;CAClB,CAAC;CACD,OAAO;AACT;;;;;AAMA,SAAgB,oBAAoB,QAAgB,MAAgD;CAClG,MAAM,EAAE,QAAQ,OAAO;CACvB,MAAM,QAAQ,KAAK,KAAK,cAAc,KAAK,KAAK,EAAE,IAAI;CACtD,MAAM,MAAM,OAAO,OAAO,KAAK;CAE/B,IAAI,CADU,IAAI,OAAO,GAChB,GAAG;CACZ,MAAM,QAAQ,UAAU,SAAS,IAAI,QAAQ,MAAM,CAAC,GAAG,GAAG,IAAI,CAAC,EAAE,QAAQ,MAAM;CAC/E,MAAM,QAAQ,OAAO,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,iBAAiB,KAAK;CAC3D,IAAI,SAAS,KAAK,IAAI;EACpB,MAAM,IAAI;EACV,OAAO,SAAS,YAAY,KAAK,EAAE;CACrC,OAEE,MAAM,eAAe,CAAC,CAAC,IAAI;AAE/B"}

package/dist/outline/index.d.ts

@@ -0,0 +1,2 @@
+import { HeadingOutlineNode, headingOutline, revealBlockInEditor } from "./heading-outline.js";
+export { type HeadingOutlineNode, headingOutline, revealBlockInEditor };

package/dist/outline/index.js

@@ -0,0 +1 @@
+export { headingOutline, revealBlockInEditor } from "./heading-outline.js";

package/dist/outline/react/EditorOutline.d.ts

@@ -0,0 +1,12 @@
+import { Editor } from "@tiptap/core";
+//#region src/outline/react/EditorOutline.d.ts
+/**
+ * The heading outline of an editor, placed anywhere on the page: nested headings in a tree, clicking one reveals it in
+ * the editor (selection only, the document is never changed). Works on exactly the editor passed in (from the
+ * surface's `onReady`); a missing or destroyed editor renders an empty outline.
+ */
+export declare function EditorOutline({ editor }: {
+  editor?: Editor;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=EditorOutline.d.ts.map

package/dist/outline/react/EditorOutline.js

@@ -0,0 +1,112 @@
+import { useEditorI18n } from "../../react/use-editor-i18n.js";
+import { cn } from "../../react/ui/utils.js";
+import { Icon } from "../../react/Icon.js";
+import { headingOutline, revealBlockInEditor } from "../heading-outline.js";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/outline/react/EditorOutline.tsx
+const REFRESH_DEBOUNCE_MS = 150;
+const HEADING_ICONS = {
+	1: "i-lucide-heading-1",
+	2: "i-lucide-heading-2",
+	3: "i-lucide-heading-3",
+	4: "i-lucide-heading-4",
+	5: "i-lucide-heading-5",
+	6: "i-lucide-heading-6"
+};
+function read(editor, t) {
+	return editor && !editor.isDestroyed ? headingOutline(editor.state.doc, t("outline.untitled")) : [];
+}
+/**
+* The heading outline of an editor, placed anywhere on the page: nested headings in a tree, clicking one reveals it in
+* the editor (selection only, the document is never changed). Works on exactly the editor passed in (from the
+* surface's `onReady`); a missing or destroyed editor renders an empty outline.
+*/
+function EditorOutline({ editor }) {
+	const { t } = useEditorI18n();
+	const [nodes, setNodes] = useState(() => read(editor, t));
+	const [collapsed, setCollapsed] = useState(/* @__PURE__ */ new Set());
+	useEffect(() => {
+		setNodes(read(editor, t));
+		if (!editor) return;
+		let timer;
+		const onTransaction = ({ transaction }) => {
+			if (!transaction.docChanged) return;
+			clearTimeout(timer);
+			timer = setTimeout(() => setNodes(read(editor, t)), REFRESH_DEBOUNCE_MS);
+		};
+		const onDestroy = () => {
+			clearTimeout(timer);
+			setNodes([]);
+		};
+		editor.on("transaction", onTransaction);
+		editor.on("destroy", onDestroy);
+		return () => {
+			clearTimeout(timer);
+			editor.off("transaction", onTransaction);
+			editor.off("destroy", onDestroy);
+		};
+	}, [editor, t]);
+	const toggle = (key) => setCollapsed((current) => {
+		const next = new Set(current);
+		if (!next.delete(key)) next.add(key);
+		return next;
+	});
+	const reveal = (node) => {
+		if (editor && !editor.isDestroyed) revealBlockInEditor(editor, node);
+	};
+	const onKeyDown = (event, node) => {
+		const parent = node.children.length > 0;
+		const open = !collapsed.has(node.key);
+		if (event.key === "Enter" || event.key === " ") reveal(node);
+		else if (event.key === "ArrowRight" && parent && !open) toggle(node.key);
+		else if (event.key === "ArrowLeft" && parent && open) toggle(node.key);
+		else return;
+		event.preventDefault();
+	};
+	const renderNodes = (list, level) => /* @__PURE__ */ jsx("ul", {
+		role: level === 0 ? "tree" : "group",
+		"aria-label": level === 0 ? t("outline.label") : void 0,
+		className: cn("m-0 list-none p-0 text-sm", level > 0 && "ml-3 border-l border-border pl-1"),
+		children: list.map((node) => {
+			const parent = node.children.length > 0;
+			const open = !collapsed.has(node.key);
+			return /* @__PURE__ */ jsxs("li", {
+				role: "none",
+				children: [/* @__PURE__ */ jsxs("div", {
+					role: "treeitem",
+					tabIndex: 0,
+					"aria-level": level + 1,
+					"aria-expanded": parent ? open : void 0,
+					className: "group flex w-full cursor-pointer items-center gap-1.5 rounded-md px-2 py-1 text-sm select-none outline-none hover:bg-muted/60 focus-visible:ring-1 focus-visible:ring-ring",
+					onClick: () => reveal(node),
+					onKeyDown: (event) => onKeyDown(event, node),
+					children: [
+						parent ? /* @__PURE__ */ jsx("span", {
+							className: "flex shrink-0",
+							onClick: (event) => {
+								event.stopPropagation();
+								toggle(node.key);
+							},
+							children: /* @__PURE__ */ jsx(Icon, {
+								name: "i-lucide-chevron-right",
+								className: cn("size-3.5 text-muted-foreground transition-transform", open && "rotate-90")
+							})
+						}) : /* @__PURE__ */ jsx("span", { className: "size-3.5 shrink-0" }),
+						/* @__PURE__ */ jsx(Icon, { name: HEADING_ICONS[node.level] ?? "i-lucide-heading" }),
+						/* @__PURE__ */ jsx("span", {
+							className: "min-w-0 flex-1 truncate",
+							title: node.text,
+							children: node.text
+						})
+					]
+				}), parent && open && renderNodes(node.children, level + 1)]
+			}, node.key);
+		})
+	});
+	return renderNodes(nodes, 0);
+}
+//#endregion
+export { EditorOutline };
+
+//# sourceMappingURL=EditorOutline.js.map

package/dist/outline/react/EditorOutline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorOutline.js","names":[],"sources":["../../../src/outline/react/EditorOutline.tsx"],"sourcesContent":["import type { Editor } from '@tiptap/core'\nimport { type KeyboardEvent, useEffect, useState } from 'react'\nimport { Icon } from '../../react/Icon'\nimport { useEditorI18n } from '../../react/use-editor-i18n'\nimport { cn } from '../../react/ui/utils'\nimport type { Translate } from '../../i18n'\nimport { type HeadingOutlineNode, headingOutline, revealBlockInEditor } from '../heading-outline'\n\nconst REFRESH_DEBOUNCE_MS = 150\n\n// Spelled out (not built from the level) so bundlers that scan source for icon names find them.\nconst HEADING_ICONS: Record<number, string> = {\n  1: 'i-lucide-heading-1',\n  2: 'i-lucide-heading-2',\n  3: 'i-lucide-heading-3',\n  4: 'i-lucide-heading-4',\n  5: 'i-lucide-heading-5',\n  6: 'i-lucide-heading-6',\n}\n\nfunction read(editor: Editor | undefined, t: Translate): HeadingOutlineNode[] {\n  return editor && !editor.isDestroyed ? headingOutline(editor.state.doc, t('outline.untitled')) : []\n}\n\n/**\n * The heading outline of an editor, placed anywhere on the page: nested headings in a tree, clicking one reveals it in\n * the editor (selection only, the document is never changed). Works on exactly the editor passed in (from the\n * surface's `onReady`); a missing or destroyed editor renders an empty outline.\n */\nexport function EditorOutline({ editor }: { editor?: Editor }) {\n  const { t } = useEditorI18n()\n  // Read from the editor on demand and refreshed, debounced, when the document changes (also an external `setContent`).\n  const [nodes, setNodes] = useState<HeadingOutlineNode[]>(() => read(editor, t))\n  // Entries start open: only the ones the user closed are remembered.\n  const [collapsed, setCollapsed] = useState<ReadonlySet<string>>(new Set())\n\n  useEffect(() => {\n    setNodes(read(editor, t))\n    if (!editor) return\n    let timer: ReturnType<typeof setTimeout> | undefined\n    const onTransaction = ({ transaction }: { transaction: { docChanged: boolean } }) => {\n      if (!transaction.docChanged) return\n      clearTimeout(timer)\n      timer = setTimeout(() => setNodes(read(editor, t)), REFRESH_DEBOUNCE_MS)\n    }\n    const onDestroy = () => {\n      clearTimeout(timer)\n      setNodes([])\n    }\n    editor.on('transaction', onTransaction)\n    editor.on('destroy', onDestroy)\n    return () => {\n      clearTimeout(timer)\n      editor.off('transaction', onTransaction)\n      editor.off('destroy', onDestroy)\n    }\n  }, [editor, t])\n\n  const toggle = (key: string) => setCollapsed((current) => {\n    const next = new Set(current)\n    if (!next.delete(key)) next.add(key)\n    return next\n  })\n\n  const reveal = (node: HeadingOutlineNode) => {\n    if (editor && !editor.isDestroyed) revealBlockInEditor(editor, node)\n  }\n\n  const onKeyDown = (event: KeyboardEvent, node: HeadingOutlineNode) => {\n    const parent = node.children.length > 0\n    const open = !collapsed.has(node.key)\n    if (event.key === 'Enter' || event.key === ' ') reveal(node)\n    else if (event.key === 'ArrowRight' && parent && !open) toggle(node.key)\n    else if (event.key === 'ArrowLeft' && parent && open) toggle(node.key)\n    else return\n    event.preventDefault()\n  }\n\n  const renderNodes = (list: readonly HeadingOutlineNode[], level: number) => (\n    <ul role={level === 0 ? 'tree' : 'group'} aria-label={level === 0 ? t('outline.label') : undefined} className={cn('m-0 list-none p-0 text-sm', level > 0 && 'ml-3 border-l border-border pl-1')}>\n      {list.map((node) => {\n        const parent = node.children.length > 0\n        const open = !collapsed.has(node.key)\n        return (\n          <li key={node.key} role=\"none\">\n            <div\n              role=\"treeitem\"\n              tabIndex={0}\n              aria-level={level + 1}\n              aria-expanded={parent ? open : undefined}\n              className=\"group flex w-full cursor-pointer items-center gap-1.5 rounded-md px-2 py-1 text-sm select-none outline-none hover:bg-muted/60 focus-visible:ring-1 focus-visible:ring-ring\"\n              onClick={() => reveal(node)}\n              onKeyDown={event => onKeyDown(event, node)}\n            >\n              {parent\n                ? (\n                    // The chevron toggles, a click elsewhere on the row reveals.\n                    <span\n                      className=\"flex shrink-0\"\n                      onClick={(event) => {\n                        event.stopPropagation()\n                        toggle(node.key)\n                      }}\n                    >\n                      <Icon name=\"i-lucide-chevron-right\" className={cn('size-3.5 text-muted-foreground transition-transform', open && 'rotate-90')} />\n                    </span>\n                  )\n                : <span className=\"size-3.5 shrink-0\" />}\n              <Icon name={HEADING_ICONS[node.level] ?? 'i-lucide-heading'} />\n              <span className=\"min-w-0 flex-1 truncate\" title={node.text}>{node.text}</span>\n            </div>\n            {parent && open && renderNodes(node.children, level + 1)}\n          </li>\n        )\n      })}\n    </ul>\n  )\n\n  return renderNodes(nodes, 0)\n}\n"],"mappings":"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"}

package/dist/outline/react.d.ts

@@ -0,0 +1,2 @@
+import { EditorOutline } from "./react/EditorOutline.js";
+export { EditorOutline };

package/dist/outline/react.js

@@ -0,0 +1 @@
+export { EditorOutline } from "./react/EditorOutline.js";

package/dist/outline/vue.d.ts

@@ -0,0 +1,2 @@
+import _default from "./EditorOutline.vue.js";
+export { _default as EditorOutline };

package/dist/outline/vue.js

@@ -0,0 +1 @@
+export { default as EditorOutline } from "./EditorOutline.js";

package/dist/presets/advanced.d.ts

@@ -0,0 +1,33 @@
+import { EditorFeature, EditorPreset } from "../core/feature.js";
+import { CompositeKind } from "../features/composites/kinds.js";
+import { CompositeFeatureOptions } from "../features/composites/feature.js";
+//#region src/presets/advanced.d.ts
+/** Options of the advanced editor presets (`advancedEditor` of `./vue/advanced` and `./react/advanced`). */
+export interface AdvancedEditorOptions {
+  /** The composite kinds („Bausteine“) offered in the editor (default: the built-in `defaultCompositeKinds(t)`); read once. */
+  compositeKinds?: readonly CompositeKind[];
+}
+/**
+ * The feature ids of the advanced editor in schema order: core, media, transcript, composites, mentions, authors,
+ * comments, AI, collaboration, block UI, the three integrations (composite-media, composite-AI, transcript-AI) and
+ * themes last, in the order of the schema-bearing extensions of the advanced document model.
+ */
+export declare const ADVANCED_FEATURE_IDS: readonly ["core", "media", "transcript", "composites", "mentions", "authors", "comments", "ai", "collab", "block-ui", "composite-media", "composite-ai", "transcript-ai", "themes"];
+export type AdvancedFeatureId = (typeof ADVANCED_FEATURE_IDS)[number];
+/** The ids a UI layer binds (components, node views, hooks); the other advanced features are framework-free. */
+export type UiBoundFeatureId = Exclude<AdvancedFeatureId, 'core' | 'mentions' | 'composite-media' | 'composite-ai' | 'transcript-ai'>;
+/**
+ * The features a UI layer binds, keyed by their id; a layer must bind every one (the compiler enforces it).
+ * `composites` is the layer's `compositeFeature`: `advancedEditorCore` calls it with the options' `compositeKinds`.
+ */
+export type AdvancedFeatures<C> = Record<Exclude<UiBoundFeatureId, 'composites'>, EditorFeature<C>> & {
+  composites: (options: CompositeFeatureOptions) => EditorFeature<C>;
+};
+/**
+ * Assembles the advanced editor from the features a UI layer has bound plus the framework-free ones (core, mentions and
+ * the integrations composite-media, composite-AI, transcript-AI), in `ADVANCED_FEATURE_IDS` order (the feature list
+ * order is the schema and toolbar order). `C` is the layer's component type.
+ */
+export declare function advancedEditorCore<C>(bound: AdvancedFeatures<C>, options?: AdvancedEditorOptions): EditorPreset<C>;
+//#endregion
+//# sourceMappingURL=advanced.d.ts.map

package/dist/presets/advanced.js

@@ -0,0 +1,50 @@
+import { coreFeature } from "../core/core-feature.js";
+import { defineEditor } from "../core/define-editor.js";
+import { mentionsFeature } from "../features/mentions/index.js";
+import { compositeAiFeature } from "../integrations/composite-ai/index.js";
+import { compositeMediaFeature } from "../integrations/composite-media/index.js";
+import { transcriptAiFeature } from "../integrations/transcript-ai/index.js";
+//#region src/presets/advanced.ts
+/**
+* The feature ids of the advanced editor in schema order: core, media, transcript, composites, mentions, authors,
+* comments, AI, collaboration, block UI, the three integrations (composite-media, composite-AI, transcript-AI) and
+* themes last, in the order of the schema-bearing extensions of the advanced document model.
+*/
+const ADVANCED_FEATURE_IDS = [
+	"core",
+	"media",
+	"transcript",
+	"composites",
+	"mentions",
+	"authors",
+	"comments",
+	"ai",
+	"collab",
+	"block-ui",
+	"composite-media",
+	"composite-ai",
+	"transcript-ai",
+	"themes"
+];
+/**
+* Assembles the advanced editor from the features a UI layer has bound plus the framework-free ones (core, mentions and
+* the integrations composite-media, composite-AI, transcript-AI), in `ADVANCED_FEATURE_IDS` order (the feature list
+* order is the schema and toolbar order). `C` is the layer's component type.
+*/
+function advancedEditorCore(bound, options = {}) {
+	const { composites, ...uiBound } = bound;
+	const features = {
+		...uiBound,
+		"core": coreFeature(),
+		"mentions": mentionsFeature(),
+		"composites": composites(options.compositeKinds ? { kinds: options.compositeKinds } : {}),
+		"composite-media": compositeMediaFeature(),
+		"composite-ai": compositeAiFeature(),
+		"transcript-ai": transcriptAiFeature()
+	};
+	return defineEditor({ features: ADVANCED_FEATURE_IDS.map((id) => features[id]) });
+}
+//#endregion
+export { ADVANCED_FEATURE_IDS, advancedEditorCore };
+
+//# sourceMappingURL=advanced.js.map

package/dist/presets/advanced.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"advanced.js","names":[],"sources":["../../src/presets/advanced.ts"],"sourcesContent":["import { coreFeature } from '../core/core-feature'\nimport { defineEditor } from '../core/define-editor'\nimport type { EditorFeature, EditorPreset } from '../core/feature'\nimport type { CompositeFeatureOptions } from '../features/composites/feature'\nimport type { CompositeKind } from '../features/composites/kinds'\nimport { mentionsFeature } from '../features/mentions'\nimport { compositeAiFeature } from '../integrations/composite-ai'\nimport { compositeMediaFeature } from '../integrations/composite-media'\nimport { transcriptAiFeature } from '../integrations/transcript-ai'\n\n/** Options of the advanced editor presets (`advancedEditor` of `./vue/advanced` and `./react/advanced`). */\nexport interface AdvancedEditorOptions {\n  /** The composite kinds („Bausteine“) offered in the editor (default: the built-in `defaultCompositeKinds(t)`); read once. */\n  compositeKinds?: readonly CompositeKind[]\n}\n\n/**\n * The feature ids of the advanced editor in schema order: core, media, transcript, composites, mentions, authors,\n * comments, AI, collaboration, block UI, the three integrations (composite-media, composite-AI, transcript-AI) and\n * themes last, in the order of the schema-bearing extensions of the advanced document model.\n */\nexport const ADVANCED_FEATURE_IDS = [\n  'core',\n  'media',\n  'transcript',\n  'composites',\n  'mentions',\n  'authors',\n  'comments',\n  'ai',\n  'collab',\n  'block-ui',\n  'composite-media',\n  'composite-ai',\n  'transcript-ai',\n  'themes',\n] as const\n\nexport type AdvancedFeatureId = (typeof ADVANCED_FEATURE_IDS)[number]\n\n/** The ids a UI layer binds (components, node views, hooks); the other advanced features are framework-free. */\nexport type UiBoundFeatureId = Exclude<AdvancedFeatureId, 'core' | 'mentions' | 'composite-media' | 'composite-ai' | 'transcript-ai'>\n\n/**\n * The features a UI layer binds, keyed by their id; a layer must bind every one (the compiler enforces it).\n * `composites` is the layer's `compositeFeature`: `advancedEditorCore` calls it with the options' `compositeKinds`.\n */\nexport type AdvancedFeatures<C> = Record<Exclude<UiBoundFeatureId, 'composites'>, EditorFeature<C>> & {\n  composites: (options: CompositeFeatureOptions) => EditorFeature<C>\n}\n\n/**\n * Assembles the advanced editor from the features a UI layer has bound plus the framework-free ones (core, mentions and\n * the integrations composite-media, composite-AI, transcript-AI), in `ADVANCED_FEATURE_IDS` order (the feature list\n * order is the schema and toolbar order). `C` is the layer's component type.\n */\nexport function advancedEditorCore<C>(bound: AdvancedFeatures<C>, options: AdvancedEditorOptions = {}): EditorPreset<C> {\n  const { composites, ...uiBound } = bound\n  const features: Record<AdvancedFeatureId, EditorFeature<C>> = {\n    ...uiBound,\n    'core': coreFeature(),\n    'mentions': mentionsFeature(),\n    'composites': composites(options.compositeKinds ? { kinds: options.compositeKinds } : {}),\n    'composite-media': compositeMediaFeature(),\n    'composite-ai': compositeAiFeature(),\n    'transcript-ai': transcriptAiFeature(),\n  }\n  return defineEditor({ features: ADVANCED_FEATURE_IDS.map(id => features[id]) })\n}\n"],"mappings":";;;;;;;;;;;;AAqBA,MAAa,uBAAuB;CAClC;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;;;;;;AAoBA,SAAgB,mBAAsB,OAA4B,UAAiC,CAAC,GAAoB;CACtH,MAAM,EAAE,YAAY,GAAG,YAAY;CACnC,MAAM,WAAwD;EAC5D,GAAG;EACH,QAAQ,YAAY;EACpB,YAAY,gBAAgB;EAC5B,cAAc,WAAW,QAAQ,iBAAiB,EAAE,OAAO,QAAQ,eAAe,IAAI,CAAC,CAAC;EACxF,mBAAmB,sBAAsB;EACzC,gBAAgB,mBAAmB;EACnC,iBAAiB,oBAAoB;CACvC;CACA,OAAO,aAAa,EAAE,UAAU,qBAAqB,KAAI,OAAM,SAAS,GAAG,EAAE,CAAC;AAChF"}

package/dist/presets/simple.d.ts

@@ -0,0 +1,9 @@
+import { EditorPreset } from "../core/feature.js";
+//#region src/presets/simple.d.ts
+/**
+ * The simple editor: the core feature only (formatting, headings, lists, quotes, code, undo/redo). No backend, no AI,
+ * no collaboration. Component-free (`EditorPreset<never>`), so both the Vue and the React surface accept it.
+ */
+export declare const simpleEditor: () => EditorPreset<never>;
+//#endregion
+//# sourceMappingURL=simple.d.ts.map

package/dist/presets/simple.js

@@ -0,0 +1,12 @@
+import { coreFeature } from "../core/core-feature.js";
+import { defineEditor } from "../core/define-editor.js";
+//#region src/presets/simple.ts
+/**
+* The simple editor: the core feature only (formatting, headings, lists, quotes, code, undo/redo). No backend, no AI,
+* no collaboration. Component-free (`EditorPreset<never>`), so both the Vue and the React surface accept it.
+*/
+const simpleEditor = () => defineEditor({ features: [coreFeature()] });
+//#endregion
+export { simpleEditor };
+
+//# sourceMappingURL=simple.js.map

package/dist/presets/simple.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"simple.js","names":[],"sources":["../../src/presets/simple.ts"],"sourcesContent":["import { coreFeature } from '../core/core-feature'\nimport { defineEditor } from '../core/define-editor'\nimport type { EditorPreset } from '../core/feature'\n\n/**\n * The simple editor: the core feature only (formatting, headings, lists, quotes, code, undo/redo). No backend, no AI,\n * no collaboration. Component-free (`EditorPreset<never>`), so both the Vue and the React surface accept it.\n */\nexport const simpleEditor = (): EditorPreset<never> => defineEditor({ features: [coreFeature()] })\n"],"mappings":";;;;;;;AAQA,MAAa,qBAA0C,aAAa,EAAE,UAAU,CAAC,YAAY,CAAC,EAAE,CAAC"}

package/dist/react/AdvancedEditor.d.ts

@@ -0,0 +1,23 @@
+import { EditorSurfaceHandle, EditorSurfaceProps } from "./EditorSurface.js";
+import { CompositeKind } from "../features/composites/kinds.js";
+//#region src/react/AdvancedEditor.d.ts
+/**
+ * Props of the advanced editor: the surface's own (collaboration session or standalone `value`/`onChange`, metadata,
+ * abilities, extensions, block actions, slash commands, `documentId`/`upload`, `editable`, `settingsUi`, the open
+ * state of the sidebar and comments margin, `onReady` and the other callbacks) except the preset, which the advanced
+ * editor owns, plus the composite kinds.
+ */
+export interface AdvancedEditorProps extends Omit<EditorSurfaceProps, 'preset'> {
+  /** Composite kinds („Bausteine“) offered in the editor (default: `defaultCompositeKinds(t)`); read once at mount. */
+  compositeKinds?: readonly CompositeKind[];
+}
+/**
+ * The advanced editor on the React surface: `advancedEditor()` mounted through `EditorSurface`. The feature list is
+ * fixed at mount like the kinds it is built from; hosts remount (`key`) to change either. Place `EditorToolbar`
+ * (with the same `preset`: build it with `advancedEditor()` and pass it to both) and, with `settingsUi: 'external'`,
+ * `EditorSettingsModal`/`EditorSettingsPanel` beside it; `useEditorUi(editor)` reaches the chrome of a ready editor.
+ * Collaboration is active only when a `collaboration` session is passed; mount `Toaster` once for notices.
+ */
+export declare const AdvancedEditor: import("react").ForwardRefExoticComponent<AdvancedEditorProps & import("react").RefAttributes<EditorSurfaceHandle>>;
+//#endregion
+//# sourceMappingURL=AdvancedEditor.d.ts.map

package/dist/react/AdvancedEditor.js

@@ -0,0 +1,24 @@
+import { EditorSurface } from "./EditorSurface.js";
+import { advancedEditor } from "./advanced-preset.js";
+import { forwardRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/react/AdvancedEditor.tsx
+/**
+* The advanced editor on the React surface: `advancedEditor()` mounted through `EditorSurface`. The feature list is
+* fixed at mount like the kinds it is built from; hosts remount (`key`) to change either. Place `EditorToolbar`
+* (with the same `preset`: build it with `advancedEditor()` and pass it to both) and, with `settingsUi: 'external'`,
+* `EditorSettingsModal`/`EditorSettingsPanel` beside it; `useEditorUi(editor)` reaches the chrome of a ready editor.
+* Collaboration is active only when a `collaboration` session is passed; mount `Toaster` once for notices.
+*/
+const AdvancedEditor = forwardRef(function AdvancedEditor({ compositeKinds, ...surface }, ref) {
+	const [preset] = useState(() => advancedEditor(compositeKinds ? { compositeKinds } : {}));
+	return /* @__PURE__ */ jsx(EditorSurface, {
+		ref,
+		preset,
+		...surface
+	});
+});
+//#endregion
+export { AdvancedEditor };
+
+//# sourceMappingURL=AdvancedEditor.js.map

package/dist/react/AdvancedEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdvancedEditor.js","names":[],"sources":["../../src/react/AdvancedEditor.tsx"],"sourcesContent":["import { forwardRef, useState } from 'react'\nimport type { CompositeKind } from '../features/composites/kinds'\nimport { advancedEditor } from './advanced-preset'\nimport { EditorSurface, type EditorSurfaceHandle, type EditorSurfaceProps } from './EditorSurface'\n\n/**\n * Props of the advanced editor: the surface's own (collaboration session or standalone `value`/`onChange`, metadata,\n * abilities, extensions, block actions, slash commands, `documentId`/`upload`, `editable`, `settingsUi`, the open\n * state of the sidebar and comments margin, `onReady` and the other callbacks) except the preset, which the advanced\n * editor owns, plus the composite kinds.\n */\nexport interface AdvancedEditorProps extends Omit<EditorSurfaceProps, 'preset'> {\n  /** Composite kinds („Bausteine“) offered in the editor (default: `defaultCompositeKinds(t)`); read once at mount. */\n  compositeKinds?: readonly CompositeKind[]\n}\n\n/**\n * The advanced editor on the React surface: `advancedEditor()` mounted through `EditorSurface`. The feature list is\n * fixed at mount like the kinds it is built from; hosts remount (`key`) to change either. Place `EditorToolbar`\n * (with the same `preset`: build it with `advancedEditor()` and pass it to both) and, with `settingsUi: 'external'`,\n * `EditorSettingsModal`/`EditorSettingsPanel` beside it; `useEditorUi(editor)` reaches the chrome of a ready editor.\n * Collaboration is active only when a `collaboration` session is passed; mount `Toaster` once for notices.\n */\nexport const AdvancedEditor = forwardRef<EditorSurfaceHandle, AdvancedEditorProps>(function AdvancedEditor({ compositeKinds, ...surface }, ref) {\n  const [preset] = useState(() => advancedEditor(compositeKinds ? { compositeKinds } : {}))\n  return <EditorSurface ref={ref} preset={preset} {...surface} />\n})\n"],"mappings":";;;;;;;;;;;;AAuBA,MAAa,iBAAiB,WAAqD,SAAS,eAAe,EAAE,gBAAgB,GAAG,WAAW,KAAK;CAC9I,MAAM,CAAC,UAAU,eAAe,eAAe,iBAAiB,EAAE,eAAe,IAAI,CAAC,CAAC,CAAC;CACxF,OAAO,oBAAC,eAAD;EAAoB;EAAa;EAAQ,GAAI;CAAU,CAAA;AAChE,CAAC"}

package/dist/react/EditorSettingsModal.d.ts

@@ -0,0 +1,14 @@
+import { ReactPreset } from "./EditorSurface.js";
+//#region src/react/EditorSettingsModal.d.ts
+/** „Einstellungen“: `EditorSettingsPanel` in a modal. Renders nothing when the preset contributes no settings tab. */
+export declare function EditorSettingsModal({ preset, open, onOpenChange, tab, onTabChange }: {
+  /** The preset whose features contribute the tabs (the surface's `preset`). */
+  preset: ReactPreset;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** Shown tab id (see `EditorSettingsPanel`). */
+  tab?: string;
+  onTabChange?: (tab: string) => void;
+}): import("react").JSX.Element | null;
+//#endregion
+//# sourceMappingURL=EditorSettingsModal.d.ts.map

package/dist/react/EditorSettingsModal.js

@@ -0,0 +1,40 @@
+import { settingsTabsOf } from "../core/define-editor.js";
+import { useEditorContext } from "./context.js";
+import { useEditorI18n } from "./use-editor-i18n.js";
+import { EditorSettingsPanel } from "./EditorSettingsPanel.js";
+import { useEditorSettings } from "./settings.js";
+import { Button } from "./ui/button.js";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "./ui/dialog.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/EditorSettingsModal.tsx
+/** „Einstellungen“: `EditorSettingsPanel` in a modal. Renders nothing when the preset contributes no settings tab. */
+function EditorSettingsModal({ preset, open, onOpenChange, tab, onTabChange }) {
+	const { synced } = useEditorSettings();
+	const { t } = useEditorI18n();
+	if (!settingsTabsOf(preset, useEditorContext()).length) return null;
+	return /* @__PURE__ */ jsx(Dialog, {
+		open,
+		onOpenChange,
+		children: /* @__PURE__ */ jsxs(DialogContent, {
+			className: "sm:w-[42rem] sm:max-w-[42rem]",
+			children: [
+				/* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsx(DialogTitle, { children: t("settings.title") }), /* @__PURE__ */ jsx(DialogDescription, { children: t(synced ? "settings.scope.account" : "settings.scope.browser") })] }),
+				/* @__PURE__ */ jsx(EditorSettingsPanel, {
+					preset,
+					...tab !== void 0 && { tab },
+					...onTabChange && { onTabChange },
+					contentClassName: "h-[32rem] overflow-y-auto pt-4 pr-2"
+				}),
+				/* @__PURE__ */ jsx(DialogFooter, { children: /* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					onClick: () => onOpenChange(false),
+					children: t("common.close")
+				}) })
+			]
+		})
+	});
+}
+//#endregion
+export { EditorSettingsModal };
+
+//# sourceMappingURL=EditorSettingsModal.js.map

package/dist/react/EditorSettingsModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorSettingsModal.js","names":[],"sources":["../../src/react/EditorSettingsModal.tsx"],"sourcesContent":["import { settingsTabsOf } from '../core/define-editor'\nimport { EditorSettingsPanel } from './EditorSettingsPanel'\nimport type { ReactPreset } from './EditorSurface'\nimport { useEditorContext } from './context'\nimport { useEditorSettings } from './settings'\nimport { useEditorI18n } from './use-editor-i18n'\nimport { Button } from './ui/button'\nimport { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from './ui/dialog'\n\n/** „Einstellungen“: `EditorSettingsPanel` in a modal. Renders nothing when the preset contributes no settings tab. */\nexport function EditorSettingsModal({ preset, open, onOpenChange, tab, onTabChange }: {\n  /** The preset whose features contribute the tabs (the surface's `preset`). */\n  preset: ReactPreset\n  open: boolean\n  onOpenChange: (open: boolean) => void\n  /** Shown tab id (see `EditorSettingsPanel`). */\n  tab?: string\n  onTabChange?: (tab: string) => void\n}) {\n  const { synced } = useEditorSettings()\n  const { t } = useEditorI18n()\n  if (!settingsTabsOf(preset, useEditorContext()).length) return null\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent className=\"sm:w-[42rem] sm:max-w-[42rem]\">\n        <DialogHeader>\n          <DialogTitle>{t('settings.title')}</DialogTitle>\n          <DialogDescription>{t(synced ? 'settings.scope.account' : 'settings.scope.browser')}</DialogDescription>\n        </DialogHeader>\n        <EditorSettingsPanel\n          preset={preset}\n          {...(tab !== undefined && { tab })}\n          {...(onTabChange && { onTabChange })}\n          contentClassName=\"h-[32rem] overflow-y-auto pt-4 pr-2\"\n        />\n        <DialogFooter>\n          <Button variant=\"ghost\" onClick={() => onOpenChange(false)}>{t('common.close')}</Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  )\n}\n"],"mappings":";;;;;;;;;;AAUA,SAAgB,oBAAoB,EAAE,QAAQ,MAAM,cAAc,KAAK,eAQpE;CACD,MAAM,EAAE,WAAW,kBAAkB;CACrC,MAAM,EAAE,MAAM,cAAc;CAC5B,IAAI,CAAC,eAAe,QAAQ,iBAAiB,CAAC,CAAC,CAAC,QAAQ,OAAO;CAC/D,OACE,oBAAC,QAAD;EAAc;EAAoB;EAChC,UAAA,qBAAC,eAAD;GAAe,WAAU;GAAzB,UAAA;IACE,qBAAC,cAAD,EAAA,UAAA,CACE,oBAAC,aAAD,EAAA,UAAc,EAAE,gBAAgB,EAAe,CAAA,GAC/C,oBAAC,mBAAD,EAAA,UAAoB,EAAE,SAAS,2BAA2B,wBAAwB,EAAqB,CAAA,CAC3F,EAAA,CAAA;IACd,oBAAC,qBAAD;KACU;KACR,GAAK,QAAQ,KAAA,KAAa,EAAE,IAAI;KAChC,GAAK,eAAe,EAAE,YAAY;KAClC,kBAAiB;IAClB,CAAA;IACD,oBAAC,cAAD,EAAA,UACE,oBAAC,QAAD;KAAQ,SAAQ;KAAQ,eAAe,aAAa,KAAK;KAAI,UAAA,EAAE,cAAc;IAAU,CAAA,EAC3E,CAAA;GACD;;CACT,CAAA;AAEZ"}

package/dist/react/EditorSettingsPanel.d.ts

@@ -0,0 +1,18 @@
+import { ReactPreset } from "./EditorSurface.js";
+//#region src/react/EditorSettingsPanel.d.ts
+/**
+ * The settings of an editor: one tab per settings tab the preset's features contribute. Place it anywhere; it renders
+ * nothing when the preset contributes no tab. The values live in the app's shared settings (`useEditorSettings`), so
+ * panels of several editors edit the same preferences.
+ */
+export declare function EditorSettingsPanel({ preset, tab, onTabChange, contentClassName }: {
+  /** The preset whose features contribute the tabs (the surface's `preset`). */
+  preset: ReactPreset;
+  /** Shown tab id; a missing or removed id shows the first contributed tab. */
+  tab?: string;
+  onTabChange?: (tab: string) => void;
+  /** Classes of the tab content area, e.g. a fixed height with scrolling. */
+  contentClassName?: string;
+}): import("react").JSX.Element | null;
+//#endregion
+//# sourceMappingURL=EditorSettingsPanel.d.ts.map

package/dist/react/EditorSettingsPanel.js

@@ -0,0 +1,40 @@
+import { settingsTabsOf } from "../core/define-editor.js";
+import { useEditorContext } from "./context.js";
+import { Icon } from "./Icon.js";
+import { Tabs, TabsList, TabsTrigger } from "./ui/tabs.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/EditorSettingsPanel.tsx
+/**
+* The settings of an editor: one tab per settings tab the preset's features contribute. Place it anywhere; it renders
+* nothing when the preset contributes no tab. The values live in the app's shared settings (`useEditorSettings`), so
+* panels of several editors edit the same preferences.
+*/
+function EditorSettingsPanel({ preset, tab, onTabChange, contentClassName = "pt-4" }) {
+	const tabs = settingsTabsOf(preset, useEditorContext());
+	const active = tabs.find((candidate) => candidate.id === tab) ?? tabs[0];
+	if (!active) return null;
+	const Active = active.component;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex w-full flex-col",
+		children: [/* @__PURE__ */ jsx(Tabs, {
+			value: active.id,
+			onValueChange: (value) => onTabChange?.(value),
+			className: "w-full",
+			children: /* @__PURE__ */ jsx(TabsList, {
+				variant: "line",
+				children: tabs.map(({ id, label, icon }) => /* @__PURE__ */ jsxs(TabsTrigger, {
+					value: id,
+					children: [icon && /* @__PURE__ */ jsx(Icon, { name: icon }), label]
+				}, id))
+			})
+		}), /* @__PURE__ */ jsx("div", {
+			className: contentClassName,
+			"data-settings-panel-content": true,
+			children: /* @__PURE__ */ jsx(Active, { ...active.props }, active.id)
+		})]
+	});
+}
+//#endregion
+export { EditorSettingsPanel };
+
+//# sourceMappingURL=EditorSettingsPanel.js.map

package/dist/react/EditorSettingsPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorSettingsPanel.js","names":[],"sources":["../../src/react/EditorSettingsPanel.tsx"],"sourcesContent":["import type { ComponentType } from 'react'\nimport { settingsTabsOf } from '../core/define-editor'\nimport type { ReactPreset } from './EditorSurface'\nimport { useEditorContext } from './context'\nimport { Icon } from './Icon'\nimport { Tabs, TabsList, TabsTrigger } from './ui/tabs'\n\n/**\n * The settings of an editor: one tab per settings tab the preset's features contribute. Place it anywhere; it renders\n * nothing when the preset contributes no tab. The values live in the app's shared settings (`useEditorSettings`), so\n * panels of several editors edit the same preferences.\n */\nexport function EditorSettingsPanel({ preset, tab, onTabChange, contentClassName = 'pt-4' }: {\n  /** The preset whose features contribute the tabs (the surface's `preset`). */\n  preset: ReactPreset\n  /** Shown tab id; a missing or removed id shows the first contributed tab. */\n  tab?: string\n  onTabChange?: (tab: string) => void\n  /** Classes of the tab content area, e.g. a fixed height with scrolling. */\n  contentClassName?: string\n}) {\n  const tabs = settingsTabsOf(preset, useEditorContext())\n  const active = tabs.find(candidate => candidate.id === tab) ?? tabs[0]\n  if (!active) return null\n  // The preset's component type is the toolbar/overlay one; a settings tab receives only its `props`.\n  const Active = active.component as ComponentType<Record<string, unknown>>\n  return (\n    <div className=\"flex w-full flex-col\">\n      <Tabs value={active.id} onValueChange={value => onTabChange?.(value)} className=\"w-full\">\n        <TabsList variant=\"line\">\n          {tabs.map(({ id, label, icon }) => (\n            <TabsTrigger key={id} value={id}>\n              {icon && <Icon name={icon} />}\n              {label}\n            </TabsTrigger>\n          ))}\n        </TabsList>\n      </Tabs>\n      <div className={contentClassName} data-settings-panel-content>\n        <Active key={active.id} {...active.props} />\n      </div>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAYA,SAAgB,oBAAoB,EAAE,QAAQ,KAAK,aAAa,mBAAmB,UAQhF;CACD,MAAM,OAAO,eAAe,QAAQ,iBAAiB,CAAC;CACtD,MAAM,SAAS,KAAK,MAAK,cAAa,UAAU,OAAO,GAAG,KAAK,KAAK;CACpE,IAAI,CAAC,QAAQ,OAAO;CAEpB,MAAM,SAAS,OAAO;CACtB,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,oBAAC,MAAD;GAAM,OAAO,OAAO;GAAI,gBAAe,UAAS,cAAc,KAAK;GAAG,WAAU;GAC9E,UAAA,oBAAC,UAAD;IAAU,SAAQ;IACf,UAAA,KAAK,KAAK,EAAE,IAAI,OAAO,WACtB,qBAAC,aAAD;KAAsB,OAAO;KAA7B,UAAA,CACG,QAAQ,oBAAC,MAAD,EAAM,MAAM,KAAO,CAAA,GAC3B,KACU;IAHK,GAAA,EAGL,CACd;GACO,CAAA;EACN,CAAA,GACN,oBAAC,OAAD;GAAK,WAAW;GAAkB,+BAAA;GAChC,UAAA,oBAAC,QAAD,EAAwB,GAAI,OAAO,MAAQ,GAA9B,OAAO,EAAuB;EACxC,CAAA,CACF;;AAET"}