@zeke-02/docx-editor-react 0.1.0

package/dist/plugin-api.d.mts

@@ -0,0 +1,90 @@
+/**
+ * @zeke-02/docx-editor-react/plugin-api
+ *
+ * Generic plugin interface and host component for integrating external
+ * plugins with the editor. Pairs with the framework-agnostic plugin types
+ * exported from `@zeke-02/docx-editor-core/plugin-api`.
+ *
+ * @example
+ * ```tsx
+ * import { PluginHost, templatePlugin, type EditorPlugin } from '@zeke-02/docx-editor-react/plugin-api';
+ *
+ * function MyEditor() {
+ *   return (
+ *     <PluginHost plugins={[templatePlugin]}>
+ *       <DocxEditor document={doc} onChange={handleChange} />
+ *     </PluginHost>
+ *   );
+ * }
+ * ```
+ *
+ * @packageDocumentation
+ * @public
+ */
+import { P as PluginHostProps, a as PluginHostRef, b as ReactEditorPlugin } from './types-DaQbko33.mjs';
+export { E as EditorPlugin, c as PluginContext, R as ReactSidebarItem, S as SidebarItemRenderProps } from './types-DaQbko33.mjs';
+import * as React from 'react';
+export { RenderedDomContextImpl, createRenderedDomContext } from '@zeke-02/docx-editor-core/plugin-api/RenderedDomContext';
+import { TemplateTag } from '@zeke-02/docx-editor-core/prosemirror/template/prosemirror-plugin';
+export { TEMPLATE_DECORATION_STYLES, TagType, TemplateTag, createTemplatePlugin as createTemplateProseMirrorPlugin, getTemplateTags as getTemplatePluginTags, setHoveredElement, setSelectedElement, templatePluginKey } from '@zeke-02/docx-editor-core/prosemirror/template/prosemirror-plugin';
+export { PanelConfig, PluginPanelProps, PositionCoordinates, RenderedDomContext, SidebarItem, SidebarItemContext } from '@zeke-02/docx-editor-core/plugin-api';
+import 'prosemirror-view';
+
+declare const PLUGIN_HOST_STYLES = "\n.plugin-host {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  overflow: visible;\n  position: relative;\n}\n\n.plugin-host-editor {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  overflow: visible;\n}\n\n\n.plugin-panels-left,\n.plugin-panels-right {\n  display: flex;\n  flex-direction: column;\n  flex-shrink: 0;\n  background: #f8f9fa;\n  border-color: #e9ecef;\n}\n\n.plugin-panels-left {\n  border-right: 1px solid #e9ecef;\n}\n\n.plugin-panels-right {\n  border-left: 1px solid #e9ecef;\n}\n\n.plugin-panels-bottom {\n  border-top: 1px solid #e9ecef;\n  background: #f8f9fa;\n}\n\n.plugin-panel {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  transition: width 0.2s ease, height 0.2s ease;\n}\n\n.plugin-panel.collapsed {\n  overflow: visible;\n}\n\n.plugin-panel-toggle {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  padding: 6px 8px;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  font-size: 12px;\n  color: #6c757d;\n  white-space: nowrap;\n}\n\n.plugin-panel.collapsed .plugin-panel-toggle {\n  writing-mode: vertical-rl;\n  text-orientation: mixed;\n  flex-direction: column;\n  height: 100%;\n  padding: 8px 6px;\n}\n\n.plugin-panel-toggle:hover {\n  background: #e9ecef;\n  color: #495057;\n}\n\n.plugin-panel-toggle-icon {\n  font-weight: bold;\n  font-size: 14px;\n}\n\n.plugin-panel.collapsed .plugin-panel-toggle-icon {\n  transform: rotate(90deg);\n}\n\n.plugin-panel-toggle-label {\n  font-weight: 500;\n}\n\n.plugin-panel-content {\n  flex: 1;\n  overflow: auto;\n}\n\n/* Right panel rendered inside viewport - scrolls with content */\n.plugin-panel-in-viewport {\n  position: absolute;\n  top: 0;\n  /* Position is set dynamically via inline styles based on page edge */\n  width: 220px;\n  pointer-events: auto;\n  z-index: 10;\n  overflow: visible;\n}\n\n.plugin-panel-in-viewport.collapsed {\n  width: 32px;\n}\n\n.plugin-panel-in-viewport .plugin-panel-toggle {\n  position: sticky;\n  top: 0;\n  background: rgba(255, 255, 255, 0.95);\n  border-radius: 4px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n.plugin-panel-in-viewport-content {\n  overflow: visible;\n  position: relative;\n}\n\n/* Plugin overlay container for rendering highlights/decorations */\n.plugin-overlays-container {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  pointer-events: none;\n  overflow: visible;\n  z-index: 5;\n}\n\n.plugin-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  pointer-events: none;\n}\n\n/* Individual overlay children manage their own pointer-events.\n   Do NOT set pointer-events: auto here \u2014 it overrides overlay containers\n   that need pointer-events: none to let clicks pass through to the editor. */\n";
+/**
+ * PluginHost Component
+ *
+ * Wraps the editor and provides:
+ * - Plugin state management
+ * - Panel rendering for each plugin
+ * - CSS injection for plugin styles
+ * - Callbacks for editor interaction
+ */
+declare const PluginHost: React.ForwardRefExoticComponent<PluginHostProps & React.RefAttributes<PluginHostRef>>;
+
+/**
+ * Template Plugin
+ *
+ * Docxtemplater template support as a plugin for the DOCX Editor.
+ *
+ * Features:
+ * - Full docxtemplater syntax detection (variables, loops, conditionals)
+ * - Sidebar annotation chips showing template structure (via getSidebarItems)
+ * - Differentiated visual highlighting by element type
+ *
+ * @example
+ * ```tsx
+ * import { PluginHost, templatePlugin } from '@zeke-02/docx-editor-react/plugin-api';
+ *
+ * function MyEditor() {
+ *   return (
+ *     <PluginHost plugins={[templatePlugin]}>
+ *       <DocxEditor document={doc} onChange={handleChange} />
+ *     </PluginHost>
+ *   );
+ * }
+ * ```
+ */
+
+interface TemplatePluginState {
+    tags: TemplateTag[];
+    hoveredId?: string;
+    selectedId?: string;
+}
+/**
+ * Create the template plugin instance.
+ */
+declare function createPlugin(_options?: {
+    /** @deprecated — panel is no longer used; template chips render in the unified sidebar */
+    defaultCollapsed?: boolean;
+    /** @deprecated */
+    panelPosition?: 'left' | 'right';
+    /** @deprecated */
+    panelWidth?: number;
+}): ReactEditorPlugin<TemplatePluginState>;
+/**
+ * Default template plugin instance.
+ */
+declare const templatePlugin: ReactEditorPlugin<TemplatePluginState>;
+
+export { PLUGIN_HOST_STYLES, PluginHost, PluginHostProps, PluginHostRef, ReactEditorPlugin, createPlugin as createTemplatePlugin, templatePlugin };

package/dist/plugin-api.d.ts

@@ -0,0 +1,90 @@
+/**
+ * @zeke-02/docx-editor-react/plugin-api
+ *
+ * Generic plugin interface and host component for integrating external
+ * plugins with the editor. Pairs with the framework-agnostic plugin types
+ * exported from `@zeke-02/docx-editor-core/plugin-api`.
+ *
+ * @example
+ * ```tsx
+ * import { PluginHost, templatePlugin, type EditorPlugin } from '@zeke-02/docx-editor-react/plugin-api';
+ *
+ * function MyEditor() {
+ *   return (
+ *     <PluginHost plugins={[templatePlugin]}>
+ *       <DocxEditor document={doc} onChange={handleChange} />
+ *     </PluginHost>
+ *   );
+ * }
+ * ```
+ *
+ * @packageDocumentation
+ * @public
+ */
+import { P as PluginHostProps, a as PluginHostRef, b as ReactEditorPlugin } from './types-DaQbko33.js';
+export { E as EditorPlugin, c as PluginContext, R as ReactSidebarItem, S as SidebarItemRenderProps } from './types-DaQbko33.js';
+import * as React from 'react';
+export { RenderedDomContextImpl, createRenderedDomContext } from '@zeke-02/docx-editor-core/plugin-api/RenderedDomContext';
+import { TemplateTag } from '@zeke-02/docx-editor-core/prosemirror/template/prosemirror-plugin';
+export { TEMPLATE_DECORATION_STYLES, TagType, TemplateTag, createTemplatePlugin as createTemplateProseMirrorPlugin, getTemplateTags as getTemplatePluginTags, setHoveredElement, setSelectedElement, templatePluginKey } from '@zeke-02/docx-editor-core/prosemirror/template/prosemirror-plugin';
+export { PanelConfig, PluginPanelProps, PositionCoordinates, RenderedDomContext, SidebarItem, SidebarItemContext } from '@zeke-02/docx-editor-core/plugin-api';
+import 'prosemirror-view';
+
+declare const PLUGIN_HOST_STYLES = "\n.plugin-host {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  overflow: visible;\n  position: relative;\n}\n\n.plugin-host-editor {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  overflow: visible;\n}\n\n\n.plugin-panels-left,\n.plugin-panels-right {\n  display: flex;\n  flex-direction: column;\n  flex-shrink: 0;\n  background: #f8f9fa;\n  border-color: #e9ecef;\n}\n\n.plugin-panels-left {\n  border-right: 1px solid #e9ecef;\n}\n\n.plugin-panels-right {\n  border-left: 1px solid #e9ecef;\n}\n\n.plugin-panels-bottom {\n  border-top: 1px solid #e9ecef;\n  background: #f8f9fa;\n}\n\n.plugin-panel {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  transition: width 0.2s ease, height 0.2s ease;\n}\n\n.plugin-panel.collapsed {\n  overflow: visible;\n}\n\n.plugin-panel-toggle {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  padding: 6px 8px;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  font-size: 12px;\n  color: #6c757d;\n  white-space: nowrap;\n}\n\n.plugin-panel.collapsed .plugin-panel-toggle {\n  writing-mode: vertical-rl;\n  text-orientation: mixed;\n  flex-direction: column;\n  height: 100%;\n  padding: 8px 6px;\n}\n\n.plugin-panel-toggle:hover {\n  background: #e9ecef;\n  color: #495057;\n}\n\n.plugin-panel-toggle-icon {\n  font-weight: bold;\n  font-size: 14px;\n}\n\n.plugin-panel.collapsed .plugin-panel-toggle-icon {\n  transform: rotate(90deg);\n}\n\n.plugin-panel-toggle-label {\n  font-weight: 500;\n}\n\n.plugin-panel-content {\n  flex: 1;\n  overflow: auto;\n}\n\n/* Right panel rendered inside viewport - scrolls with content */\n.plugin-panel-in-viewport {\n  position: absolute;\n  top: 0;\n  /* Position is set dynamically via inline styles based on page edge */\n  width: 220px;\n  pointer-events: auto;\n  z-index: 10;\n  overflow: visible;\n}\n\n.plugin-panel-in-viewport.collapsed {\n  width: 32px;\n}\n\n.plugin-panel-in-viewport .plugin-panel-toggle {\n  position: sticky;\n  top: 0;\n  background: rgba(255, 255, 255, 0.95);\n  border-radius: 4px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n.plugin-panel-in-viewport-content {\n  overflow: visible;\n  position: relative;\n}\n\n/* Plugin overlay container for rendering highlights/decorations */\n.plugin-overlays-container {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  pointer-events: none;\n  overflow: visible;\n  z-index: 5;\n}\n\n.plugin-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  pointer-events: none;\n}\n\n/* Individual overlay children manage their own pointer-events.\n   Do NOT set pointer-events: auto here \u2014 it overrides overlay containers\n   that need pointer-events: none to let clicks pass through to the editor. */\n";
+/**
+ * PluginHost Component
+ *
+ * Wraps the editor and provides:
+ * - Plugin state management
+ * - Panel rendering for each plugin
+ * - CSS injection for plugin styles
+ * - Callbacks for editor interaction
+ */
+declare const PluginHost: React.ForwardRefExoticComponent<PluginHostProps & React.RefAttributes<PluginHostRef>>;
+
+/**
+ * Template Plugin
+ *
+ * Docxtemplater template support as a plugin for the DOCX Editor.
+ *
+ * Features:
+ * - Full docxtemplater syntax detection (variables, loops, conditionals)
+ * - Sidebar annotation chips showing template structure (via getSidebarItems)
+ * - Differentiated visual highlighting by element type
+ *
+ * @example
+ * ```tsx
+ * import { PluginHost, templatePlugin } from '@zeke-02/docx-editor-react/plugin-api';
+ *
+ * function MyEditor() {
+ *   return (
+ *     <PluginHost plugins={[templatePlugin]}>
+ *       <DocxEditor document={doc} onChange={handleChange} />
+ *     </PluginHost>
+ *   );
+ * }
+ * ```
+ */
+
+interface TemplatePluginState {
+    tags: TemplateTag[];
+    hoveredId?: string;
+    selectedId?: string;
+}
+/**
+ * Create the template plugin instance.
+ */
+declare function createPlugin(_options?: {
+    /** @deprecated — panel is no longer used; template chips render in the unified sidebar */
+    defaultCollapsed?: boolean;
+    /** @deprecated */
+    panelPosition?: 'left' | 'right';
+    /** @deprecated */
+    panelWidth?: number;
+}): ReactEditorPlugin<TemplatePluginState>;
+/**
+ * Default template plugin instance.
+ */
+declare const templatePlugin: ReactEditorPlugin<TemplatePluginState>;
+
+export { PLUGIN_HOST_STYLES, PluginHost, PluginHostProps, PluginHostRef, ReactEditorPlugin, createPlugin as createTemplatePlugin, templatePlugin };

package/dist/plugin-api.js

@@ -0,0 +1,246 @@
+'use strict';var chunkJTUSMG6J_js=require('./chunk-JTUSMG6J.js'),chunkBJ5RZW6Y_js=require('./chunk-BJ5RZW6Y.js'),ie=require('react'),prosemirrorState=require('prosemirror-state'),docxEditorCore=require('@zeke-02/docx-editor-core'),jsxRuntime=require('react/jsx-runtime'),ke=require('@zeke-02/docx-editor-core/prosemirror/template/prosemirror-plugin');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}function _interopNamespace(e){if(e&&e.__esModule)return e;var n=Object.create(null);if(e){Object.keys(e).forEach(function(k){if(k!=='default'){var d=Object.getOwnPropertyDescriptor(e,k);Object.defineProperty(n,k,d.get?d:{enumerable:true,get:function(){return e[k]}});}})}n.default=e;return Object.freeze(n)}var ie__default=/*#__PURE__*/_interopDefault(ie);var ke__namespace=/*#__PURE__*/_interopNamespace(ke);var z={position:"right",defaultSize:280,minSize:200,maxSize:500,resizable:true,collapsible:true,defaultCollapsed:false},j=docxEditorCore.injectStyles,J=`
+.plugin-host {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+  position: relative;
+}
+
+.plugin-host-editor {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  overflow: visible;
+}
+
+
+.plugin-panels-left,
+.plugin-panels-right {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  background: #f8f9fa;
+  border-color: #e9ecef;
+}
+
+.plugin-panels-left {
+  border-right: 1px solid #e9ecef;
+}
+
+.plugin-panels-right {
+  border-left: 1px solid #e9ecef;
+}
+
+.plugin-panels-bottom {
+  border-top: 1px solid #e9ecef;
+  background: #f8f9fa;
+}
+
+.plugin-panel {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  transition: width 0.2s ease, height 0.2s ease;
+}
+
+.plugin-panel.collapsed {
+  overflow: visible;
+}
+
+.plugin-panel-toggle {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 8px;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  font-size: 12px;
+  color: #6c757d;
+  white-space: nowrap;
+}
+
+.plugin-panel.collapsed .plugin-panel-toggle {
+  writing-mode: vertical-rl;
+  text-orientation: mixed;
+  flex-direction: column;
+  height: 100%;
+  padding: 8px 6px;
+}
+
+.plugin-panel-toggle:hover {
+  background: #e9ecef;
+  color: #495057;
+}
+
+.plugin-panel-toggle-icon {
+  font-weight: bold;
+  font-size: 14px;
+}
+
+.plugin-panel.collapsed .plugin-panel-toggle-icon {
+  transform: rotate(90deg);
+}
+
+.plugin-panel-toggle-label {
+  font-weight: 500;
+}
+
+.plugin-panel-content {
+  flex: 1;
+  overflow: auto;
+}
+
+/* Right panel rendered inside viewport - scrolls with content */
+.plugin-panel-in-viewport {
+  position: absolute;
+  top: 0;
+  /* Position is set dynamically via inline styles based on page edge */
+  width: 220px;
+  pointer-events: auto;
+  z-index: 10;
+  overflow: visible;
+}
+
+.plugin-panel-in-viewport.collapsed {
+  width: 32px;
+}
+
+.plugin-panel-in-viewport .plugin-panel-toggle {
+  position: sticky;
+  top: 0;
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 4px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.plugin-panel-in-viewport-content {
+  overflow: visible;
+  position: relative;
+}
+
+/* Plugin overlay container for rendering highlights/decorations */
+.plugin-overlays-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  overflow: visible;
+  z-index: 5;
+}
+
+.plugin-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+}
+
+/* Individual overlay children manage their own pointer-events.
+   Do NOT set pointer-events: auto here \u2014 it overrides overlay containers
+   that need pointer-events: none to let clicks pass through to the editor. */
+`,ve=ie.forwardRef(function({plugins:d,children:g,className:p=""},u){let[n,y]=ie.useState(null),f=ie.useRef(g.props);f.current=g.props;let[a,S]=ie.useState(null),i=ie.useMemo(()=>new docxEditorCore.PluginLifecycleManager,[]),m=ie.useSyncExternalStore(i.subscribe,i.getSnapshot),[h,T]=ie.useState(()=>{let t=new Set;for(let e of d)({...z,...e.panelConfig}).defaultCollapsed&&t.add(e.id);return t}),[v]=ie.useState(()=>{let t=new Map;for(let e of d){let o={...z,...e.panelConfig};t.set(e.id,o.defaultSize);}return t});ie.useEffect(()=>{if(!n)return;let t=d.map(e=>({id:e.id,styles:e.styles,initialize:e.initialize,onStateChange:e.onStateChange,destroy:e.destroy}));return i.initialize(t,n),()=>{i.destroy();}},[i,n,d]),ie.useEffect(()=>{let t=d.filter(e=>e.styles).map(e=>j(e.id,e.styles));return ()=>t.forEach(e=>e())},[d]),ie.useEffect(()=>{if(!n?.dom)return;let t=()=>{i.updateStates(n);},e=null,o=()=>{e&&cancelAnimationFrame(e),e=requestAnimationFrame(t);};t();let s=n.dom;s.addEventListener("input",o),s.addEventListener("focus",t),s.addEventListener("click",t);let c=n.dispatch.bind(n);return n.dispatch=x=>{c(x),o();},()=>{s.removeEventListener("input",o),s.removeEventListener("focus",t),s.removeEventListener("click",t),e&&cancelAnimationFrame(e),n.dispatch=c;}},[n,i]),ie.useEffect(()=>j("plugin-host-base",J),[]);let O=ie.useCallback(t=>{if(!n)return;if(n.coordsAtPos(t)){n.dom.scrollIntoView({block:"center",inline:"nearest"});let{state:o}=n,s=o.doc.resolve(Math.min(t,o.doc.content.size)),c=o.tr.setSelection(prosemirrorState.TextSelection.near(s));n.dispatch(c),n.focus();}},[n]),k=ie.useCallback((t,e)=>{if(!n)return;let{state:o}=n,s=o.doc.content.size,c=Math.max(0,Math.min(t,s)),x=Math.max(0,Math.min(e,s)),R=o.tr.setSelection(prosemirrorState.TextSelection.create(o.doc,c,x));n.dispatch(R),n.focus();},[n]),_=ie.useCallback(t=>i.getPluginState(t),[i]),A=ie.useCallback((t,e)=>{i.setPluginState(t,e);},[i]),F=ie.useCallback(()=>{n&&i.updateStates(n);},[n,i]);ie.useImperativeHandle(u,()=>({getPluginState:_,setPluginState:A,getEditorView:()=>n,refreshPluginStates:F}),[_,A,n,F]);let Y=ie.useMemo(()=>{let t=[];for(let e of d)e.proseMirrorPlugins&&t.push(...e.proseMirrorPlugins);return t},[d]),M=ie.useCallback(t=>{T(e=>{let o=new Set(e);return o.has(t)?o.delete(t):o.add(t),o});},[]),[$,N]=ie.useState(null);ie.useEffect(()=>{if(!a){N(null);return}let t=()=>{let s=a.pagesContainer,c=s.querySelector(".layout-page");if(!c){N(null);return}let x=a.getContainerOffset(),R=c.getBoundingClientRect(),D=s.getBoundingClientRect(),V=(R.right-D.left)/a.zoom,le=x.x+V+5;N(le);};t();let e=()=>{requestAnimationFrame(t);};window.addEventListener("resize",e);let o=new ResizeObserver(()=>{requestAnimationFrame(t);});return o.observe(a.pagesContainer),()=>{window.removeEventListener("resize",e),o.disconnect();}},[a]);let G=ie.useMemo(()=>{let t=[];if(a){for(let e of d)if(e.renderOverlay){let o=m.states.get(e.id);t.push(jsxRuntime.jsx("div",{className:"plugin-overlay","data-plugin-id":e.id,children:e.renderOverlay(a,o,n)},`overlay-${e.id}`));}}for(let e of d){if(!e.Panel||(e.panelConfig?.position??"right")!=="right")continue;let s={...z,...e.panelConfig},c=h.has(e.id),x=v.get(e.id)??s.defaultSize,R=e.Panel,D=m.states.get(e.id),V=$!==null?`${$}px`:"calc(50% + 428px)";t.push(jsxRuntime.jsxs("div",{className:`plugin-panel-in-viewport ${c?"collapsed":""}`,style:{width:c?"32px":`${x}px`,left:V},"data-plugin-id":e.id,children:[s.collapsible&&jsxRuntime.jsx("button",{className:"plugin-panel-toggle",onClick:()=>M(e.id),title:c?`Show ${e.name}`:`Hide ${e.name}`,"aria-label":c?`Show ${e.name}`:`Hide ${e.name}`,children:jsxRuntime.jsx("span",{className:"plugin-panel-toggle-icon",children:c?"\u2039":"\u203A"})}),!c&&a&&jsxRuntime.jsx("div",{className:"plugin-panel-in-viewport-content",children:jsxRuntime.jsx(R,{editorView:n,doc:n?.state.doc??null,scrollToPosition:O,selectRange:k,pluginState:D,panelWidth:x,renderedDomContext:a})})]},`panel-overlay-${e.id}`));}return t.length>0?t:null},[a,d,m.version,n,h,v,O,k,M,$]),q=ie.useMemo(()=>{let t=[];for(let e of d){if(!e.getSidebarItems)continue;let o=m.states.get(e.id),s={editorView:n,renderedDomContext:a,anchorPositions:new Map,zoom:a?.zoom??1},c=e.getSidebarItems(o,s);t.push(...c);}return t},[d,m.version,n,a]),U=ie.useCallback(t=>{S(t);let e=f.current?.onRenderedDomContextReady;typeof e=="function"&&e(t);},[]),se=ie.useMemo(()=>ie.cloneElement(g,{externalPlugins:Y,pluginOverlays:G,pluginSidebarItems:q,pluginRenderedDomContext:a,onRenderedDomContextReady:U,onEditorViewReady:t=>{y(t);let e=f.current?.onEditorViewReady;typeof e=="function"&&e(t);}}),[g,Y,G,q,a,U]),H=ie.useMemo(()=>{let t=[],e=[],o=[];for(let s of d){if(!s.Panel)continue;let c=s.panelConfig?.position??"right";c==="left"?t.push(s):c==="bottom"?o.push(s):e.push(s);}return {left:t,right:e,bottom:o}},[d]),W=t=>{if(!t.Panel)return null;let e={...z,...t.panelConfig},o=h.has(t.id),s=v.get(t.id)??e.defaultSize,c=t.Panel,x=m.states.get(t.id);return jsxRuntime.jsxs("div",{className:`plugin-panel plugin-panel-${e.position} ${o?"collapsed":""}`,style:{[e.position==="bottom"?"height":"width"]:o?"32px":`${s}px`,minWidth:e.position!=="bottom"?o?"32px":`${e.minSize}px`:void 0,maxWidth:e.position!=="bottom"?`${e.maxSize}px`:void 0,minHeight:e.position==="bottom"?o?"32px":`${e.minSize}px`:void 0,maxHeight:e.position==="bottom"?`${e.maxSize}px`:void 0},"data-plugin-id":t.id,children:[e.collapsible&&jsxRuntime.jsxs("button",{className:"plugin-panel-toggle",onClick:()=>M(t.id),title:o?`Show ${t.name}`:`Hide ${t.name}`,"aria-label":o?`Show ${t.name}`:`Hide ${t.name}`,children:[jsxRuntime.jsx("span",{className:"plugin-panel-toggle-icon",children:o?"\u203A":"\u2039"}),o&&jsxRuntime.jsx("span",{className:"plugin-panel-toggle-label",children:t.name})]}),!o&&jsxRuntime.jsx("div",{className:"plugin-panel-content",children:jsxRuntime.jsx(c,{editorView:n,doc:n?.state.doc??null,scrollToPosition:O,selectRange:k,pluginState:x,panelWidth:s,renderedDomContext:a??null})})]},t.id)};return jsxRuntime.jsxs("div",{className:`plugin-host ${p}`,children:[H.left.length>0&&jsxRuntime.jsx("div",{className:"plugin-panels-left",children:H.left.map(W)}),jsxRuntime.jsxs("div",{className:"plugin-host-editor",children:[se,H.bottom.length>0&&jsxRuntime.jsx("div",{className:"plugin-panels-bottom",children:H.bottom.map(W)})]})]})});var l={};chunkBJ5RZW6Y_js.a(l,ke__namespace);var Se={variable:"rgba(245, 158, 11, 0.3)",sectionStart:"rgba(59, 130, 246, 0.3)",sectionEnd:"rgba(59, 130, 246, 0.3)",invertedStart:"rgba(139, 92, 246, 0.3)",raw:"rgba(239, 68, 68, 0.3)"},Te={variable:"rgba(245, 158, 11, 0.5)",sectionStart:"rgba(59, 130, 246, 0.5)",sectionEnd:"rgba(59, 130, 246, 0.5)",invertedStart:"rgba(139, 92, 246, 0.5)",raw:"rgba(239, 68, 68, 0.5)"};function Z({context:r,tags:d,hoveredId:g,selectedId:p,onHover:u,onSelect:n}){let[y,f]=ie.useState(0),a=ie.useCallback(()=>{let i=r.getContainerOffset(),m=[];for(let h of d){let T=r.getRectsForRange(h.from,h.to);for(let v of T)m.push({tagId:h.id,tagType:h.type,x:v.x+i.x,y:v.y+i.y,width:v.width,height:v.height});}return m},[r,d]),S=ie.useMemo(()=>a(),[a,y]);return ie.useEffect(()=>{let i=()=>{requestAnimationFrame(()=>f(m=>m+1));};return window.addEventListener("resize",i),()=>window.removeEventListener("resize",i)},[]),ie.useEffect(()=>{let i=new ResizeObserver(()=>{requestAnimationFrame(()=>f(m=>m+1));});return i.observe(r.pagesContainer),()=>i.disconnect()},[r.pagesContainer]),S.length===0?null:jsxRuntime.jsx("div",{className:"template-highlight-overlay",children:S.map((i,m)=>{let h=i.tagId===g,T=i.tagId===p,v=h||T?Te[i.tagType]:Se[i.tagType];return jsxRuntime.jsx("div",{className:`template-highlight ${h?"hovered":""} ${T?"selected":""}`,style:{position:"absolute",left:i.x,top:i.y,width:i.width,height:i.height,backgroundColor:v,borderRadius:2,cursor:"pointer"},onMouseEnter:()=>u?.(i.tagId),onMouseLeave:()=>u?.(void 0),onClick:()=>n?.(i.tagId)},`${i.tagId}-${m}`)})})}var ee=`
+.template-highlight-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  overflow: visible;
+}
+
+.template-highlight {
+  pointer-events: auto;
+  transition: background-color 0.1s ease;
+}
+
+.template-highlight:hover,
+.template-highlight.hovered {
+  filter: brightness(0.9);
+}
+
+.template-highlight.selected {
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.6);
+}
+`;var we={variable:"#f59e0b",sectionStart:"#3b82f6",sectionEnd:"#3b82f6",invertedStart:"#8b5cf6",raw:"#ef4444"};function Ee(r){switch(r){case "sectionStart":return "LOOP / IF";case "invertedStart":return "IF NOT";case "raw":return "HTML";default:return ""}}var ne=`
+.template-annotation-chip {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+  padding: 5px 10px;
+  background: white;
+  border: 1px solid #e2e8f0;
+  border-left: 3px solid #6c757d;
+  border-radius: 4px;
+  font-size: 11px;
+  cursor: pointer;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+  max-width: 200px;
+}
+
+.template-annotation-chip:hover,
+.template-annotation-chip.hovered {
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+  border-color: #cbd5e1;
+}
+
+.template-annotation-chip.selected {
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
+}
+
+.template-chip-badge {
+  font-size: 9px;
+  font-weight: 600;
+  padding: 1px 5px;
+  border-radius: 3px;
+  color: white;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+}
+
+.template-chip-dot {
+  font-size: 8px;
+}
+
+.template-chip-name {
+  color: #334155;
+  font-weight: 500;
+}
+
+.template-chip-nested {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  width: 100%;
+  margin-top: 4px;
+  padding-top: 4px;
+  border-top: 1px solid rgba(0, 0, 0, 0.06);
+}
+
+.template-nested-var {
+  font-size: 10px;
+  color: #64748b;
+  background: rgba(0, 0, 0, 0.04);
+  padding: 2px 6px;
+  border-radius: 3px;
+}
+
+.template-nested-var:hover {
+  background: rgba(59, 130, 246, 0.15);
+  color: #1e40af;
+}
+`;function oe({tag:r,isHovered:d,measureRef:g,onHover:p,onSelect:u}){let n=Ee(r.type),y=we[r.type],f=r.type==="sectionStart"||r.type==="invertedStart";return jsxRuntime.jsxs("div",{ref:g,style:{display:"flex",alignItems:"flex-start"},children:[jsxRuntime.jsx("div",{style:{width:20,height:1,background:d?"#3b82f6":"#d0d0d0",marginTop:12,marginRight:4,flexShrink:0}}),jsxRuntime.jsxs("div",{className:`template-annotation-chip ${d?"hovered":""}`,style:{borderLeftColor:y},onMouseEnter:()=>p(r.id),onMouseLeave:()=>p(void 0),onClick:a=>{a.stopPropagation(),u(r.id);},onMouseDown:a=>a.stopPropagation(),title:f?`${r.rawTag}
+Iterates over ${r.name}[]. Access nested properties via ${r.name}.property`:r.rawTag,children:[n&&jsxRuntime.jsx("span",{className:"template-chip-badge",style:{background:y},children:n}),!n&&jsxRuntime.jsx("span",{className:"template-chip-dot",style:{color:y},children:"\u25CF"}),jsxRuntime.jsx("span",{className:"template-chip-name",children:r.name}),f&&r.nestedVars&&r.nestedVars.length>0&&jsxRuntime.jsx("div",{className:"template-chip-nested",children:r.nestedVars.map((a,S)=>jsxRuntime.jsx("span",{className:"template-nested-var",title:`Access: ${r.name}.${a}`,children:a.includes(".")?a.split(".").pop():a},S))})]})]})}function re(r,d,g){if(!r)return;(0, l.setSelectedElement)(r,g);let p=d.find(u=>u.id===g);if(p){let u=r.state.tr.setSelection(prosemirrorState.TextSelection.near(r.state.doc.resolve(p.from)));r.dispatch(u),r.focus();}}function ae(r={}){return {id:"template",name:"Template",proseMirrorPlugins:[(0, l.createTemplatePlugin)()],onStateChange:g=>{let p=l.templatePluginKey.getState(g.state);if(p)return {tags:p.tags,hoveredId:p.hoveredId,selectedId:p.selectedId}},initialize:g=>({tags:[]}),getSidebarItems:(g,p)=>!g||g.tags.length===0?[]:g.tags.filter(n=>n.type!=="sectionEnd"&&!n.insideSection).map(n=>({id:`template-${n.id}`,anchorPos:n.from,priority:10,estimatedHeight:32,render:y=>ie__default.default.createElement(oe,{...y,tag:n,isHovered:n.id===g.hoveredId,onHover:f=>{p.editorView&&(0, l.setHoveredElement)(p.editorView,f);},onSelect:f=>re(p.editorView,g.tags,f)})})),renderOverlay:(g,p,u)=>!p||p.tags.length===0?null:ie__default.default.createElement(Z,{context:g,tags:p.tags,hoveredId:p.hoveredId,selectedId:p.selectedId,onHover:n=>{u&&(0, l.setHoveredElement)(u,n);},onSelect:n=>re(u,p.tags,n)}),styles:`
+${l.TEMPLATE_DECORATION_STYLES}
+${ne}
+${ee}
+`}}var Ce=ae();var export_TEMPLATE_DECORATION_STYLES=l.TEMPLATE_DECORATION_STYLES;var export_createTemplateProseMirrorPlugin=l.createTemplatePlugin;var export_getTemplatePluginTags=l.getTemplateTags;var export_setHoveredElement=l.setHoveredElement;var export_setSelectedElement=l.setSelectedElement;var export_templatePluginKey=l.templatePluginKey;Object.defineProperty(exports,"RenderedDomContextImpl",{enumerable:true,get:function(){return chunkJTUSMG6J_js.a}});Object.defineProperty(exports,"createRenderedDomContext",{enumerable:true,get:function(){return chunkJTUSMG6J_js.b}});exports.PLUGIN_HOST_STYLES=J;exports.PluginHost=ve;exports.TEMPLATE_DECORATION_STYLES=export_TEMPLATE_DECORATION_STYLES;exports.createTemplatePlugin=ae;exports.createTemplateProseMirrorPlugin=export_createTemplateProseMirrorPlugin;exports.getTemplatePluginTags=export_getTemplatePluginTags;exports.setHoveredElement=export_setHoveredElement;exports.setSelectedElement=export_setSelectedElement;exports.templatePlugin=Ce;exports.templatePluginKey=export_templatePluginKey;