kempo-ui 0.4.5 → 0.4.6

package/dist/components/MarkdownEditor.js

@@ -0,0 +1,173 @@
+import{html as t,css as e,nothing as i}from"../lit-all.min.js";import s from"./ShadowComponent.js";import l from"../utils/renderMarkdown.js";import o,{STRIP_COMPLETELY as a}from"../utils/sanitizeHtml.js";import"./Resize.js";import"./Tabs.js";export default class n extends s{static formAssociated=!0;static properties={value:{type:String},name:{type:String,reflect:!0},placeholder:{type:String,reflect:!0},disabled:{type:Boolean,reflect:!0},required:{type:Boolean,reflect:!0},readonly:{type:Boolean,reflect:!0},mode:{type:String,reflect:!0},allowedTags:{type:String,reflect:!0,attribute:"allowed-tags"},disallowedTags:{type:String,reflect:!0,attribute:"disallowed-tags"},scriptsEnabled:{type:Boolean,reflect:!0,attribute:"scripts-enabled"},controls:{type:String,reflect:!0}};#t="";constructor(){super(),this.internals=this.attachInternals(),this.value="",this.name="",this.placeholder="",this.disabled=!1,this.required=!1,this.readonly=!1,this.mode="write",this.allowedTags="",this.disallowedTags="",this.scriptsEnabled=!1,this.controls="",this.#e=!1}#e=!1;async loadControls(){if(this.#e)return;this.#e=!0;const t=new URL("./markdownEditorControls/",import.meta.url).href;await Promise.all([import(`${t}Bold.js`),import(`${t}Italic.js`),import(`${t}Strikethrough.js`),import(`${t}Heading.js`),import(`${t}Code.js`),import(`${t}Link.js`),import(`${t}Image.js`),import(`${t}Table.js`),import(`${t}BulletList.js`),import(`${t}NumberedList.js`),import(`${t}Quote.js`),import(`${t}Menu.js`),import(`${t}FormatBlock.js`),import(`${t}SpeechToText.js`)]),this.requestUpdate()}connectedCallback(){super.connectedCallback(),this.hasAttribute("value")&&(this.#t=this.getAttribute("value")),!this.value&&this.#t&&(this.value=this.#t)}updated(t){super.updated(t),t.has("value")&&this.internals.setFormValue(this.value),t.has("controls")&&this.controls&&"none"!==this.controls&&this.loadControls(),this.#i()}formResetCallback(){this.value=this.#t,this.mode="write"}formStateRestoreCallback(t){"string"==typeof t&&(this.value=t)}formDisabledCallback(t){this.disabled=t}focus(){"write"!==this.mode&&(this.mode="write"),this.updateComplete.then(()=>{this.shadowRoot?.querySelector("textarea")?.focus()})}blur(){this.shadowRoot?.querySelector("textarea")?.blur()}clear(){this.value=""}setMode(t){"write"!==t&&"preview"!==t||(this.mode=t)}togglePreview(){this.mode="write"===this.mode?"preview":"write"}get textarea(){return this.shadowRoot?.querySelector("textarea")||null}getSelection(){const t=this.textarea;return t?{start:t.selectionStart,end:t.selectionEnd,text:t.value.substring(t.selectionStart,t.selectionEnd)}:{start:0,end:0,text:""}}replaceSelection(t,{selectInserted:e=!0}={}){const i=this.textarea;i&&("write"!==this.mode&&(this.mode="write"),this.updateComplete.then(()=>{i.focus();const{selectionStart:s,selectionEnd:l}=i,o=i.value.substring(0,s),a=i.value.substring(l),n=o+t+a;i.value=n;const r=s+t.length;i.selectionStart=e?s:r,i.selectionEnd=r,this.value=n,i.dispatchEvent(new Event("input",{bubbles:!0}))}))}wrapSelection(t,e=t,i=""){const s=this.textarea;s?("write"!==this.mode&&(this.mode="write"),this.updateComplete.then(()=>{s.focus();const{selectionStart:l,selectionEnd:o,value:a}=s,n=a.substring(l,o);if(n.length>=t.length+e.length&&n.startsWith(t)&&n.endsWith(e)){const i=n.slice(t.length,n.length-e.length),r=a.substring(0,l)+i+a.substring(o);return s.value=r,s.selectionStart=l,s.selectionEnd=l+i.length,this.value=r,void s.dispatchEvent(new Event("input",{bubbles:!0}))}const r=a.substring(Math.max(0,l-t.length),l),d=a.substring(o,Math.min(a.length,o+e.length));if(r===t&&d===e){const i=a.substring(0,l-t.length)+n+a.substring(o+e.length);return s.value=i,s.selectionStart=l-t.length,s.selectionEnd=s.selectionStart+n.length,this.value=i,void s.dispatchEvent(new Event("input",{bubbles:!0}))}const m=n||i,c=a.substring(0,l)+t+m+e+a.substring(o);s.value=c;const h=l+t.length;s.selectionStart=h,s.selectionEnd=h+m.length,this.value=c,s.dispatchEvent(new Event("input",{bubbles:!0}))})):this.replaceSelection(t+i+e)}insertAtCursor(t){this.replaceSelection(t,{selectInserted:!1})}replaceInSelectedLines(t,e=""){const i=this.textarea;i&&("write"!==this.mode&&(this.mode="write"),this.updateComplete.then(()=>{i.focus();const{selectionStart:s,selectionEnd:l,value:o}=i,a=o.lastIndexOf("\n",s-1)+1,n=o.indexOf("\n",l),r=-1===n?o.length:n,d=o.substring(a,r),m=d.split("\n").map(i=>i.replace(t,e)).join("\n");if(m===d)return;const c=o.substring(0,a)+m+o.substring(r);i.value=c,i.selectionStart=a,i.selectionEnd=a+m.length,this.value=c,i.dispatchEvent(new Event("input",{bubbles:!0}))}))}insertLinePrefix(t,e=null){const i=this.textarea;i&&("write"!==this.mode&&(this.mode="write"),this.updateComplete.then(()=>{i.focus();const{selectionStart:s,selectionEnd:l,value:o}=i,a=o.lastIndexOf("\n",s-1)+1,n=o.indexOf("\n",l),r=-1===n?o.length:n,d=o.substring(a,r).split("\n"),m=d.filter(t=>t.length>0),c=m.length>0&&m.every(e=>e.startsWith(t)),h=d.map(i=>0===i.length?i:c?i.startsWith(t)?i.slice(t.length):i:i.startsWith(t)?i:e&&e.test(i)?i.replace(e,t):t+i).join("\n"),u=o.substring(0,a)+h+o.substring(r);i.value=u,i.selectionStart=a,i.selectionEnd=a+h.length,this.value=u,i.dispatchEvent(new Event("input",{bubbles:!0}))}))}get isEmpty(){return!(this.value||"").trim()}get renderedHtml(){const t={},e=this.#s;if(e&&(t.allowedTags=e),this.scriptsEnabled){const e=new Set(a);e.delete("SCRIPT"),t.stripCompletely=e}return o(l(this.value||""),t)}get#s(){const t=(this.allowedTags||"").trim(),e=(this.disallowedTags||"").trim();if(t&&e&&console.warn("[k-markdown-editor] `allowed-tags` and `disallowed-tags` are mutually exclusive; using `allowed-tags`."),t)return"*"===t?{has:()=>!0}:new Set(t.split(",").map(t=>t.trim().toUpperCase()).filter(Boolean));if(e){const t=new Set(e.split(",").map(t=>t.trim().toUpperCase()).filter(Boolean));return{has:e=>!t.has(e)}}return null}#i=()=>{const t=this.shadowRoot?.querySelector("textarea");this.required&&this.isEmpty?this.internals.setValidity({valueMissing:!0},"Please fill out this field.",t):this.internals.setValidity({})};handleInput=t=>{this.value=t.target.value,this.dispatchEvent(new CustomEvent("input",{detail:{value:this.value},bubbles:!0}))};handleChange=()=>{this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0}))};handleTabChange=t=>{const e=t.detail?.tab;e&&e!==this.mode&&(this.mode=e,this.dispatchEvent(new CustomEvent("mode-change",{detail:{mode:e},bubbles:!0})))};render(){const e=this.constructor.controlSets[this.controls]??this.constructor.controlSets[""];return t`
+      <k-resize dimension="height" ?disabled=${this.disabled}>
+        <div class="frame">
+          <k-tabs fixed-height active=${this.mode} @tab=${this.handleTabChange}>
+            <k-tab slot="tabs" for="write">Write</k-tab>
+            <k-tab slot="tabs" for="preview">Preview</k-tab>
+            <k-tab-spacer slot="tabs"></k-tab-spacer>
+            <div slot="tabs" class="controls-top">
+              <slot name="controls-top">${e.top??i}</slot>
+            </div>
+            <k-tab-content name="write">
+              <textarea
+                class="editor"
+                .value=${this.value}
+                placeholder=${this.placeholder}
+                ?disabled=${this.disabled}
+                ?readonly=${this.readonly}
+                aria-label=${this.name||this.placeholder}
+                @input=${this.handleInput}
+                @blur=${this.handleChange}
+              ></textarea>
+            </k-tab-content>
+            <k-tab-content name="preview">
+              <div
+                class="preview"
+                role="article"
+                .innerHTML=${this.isEmpty?'<p class="preview-empty">Nothing to preview</p>':this.renderedHtml}
+              ></div>
+            </k-tab-content>
+          </k-tabs>
+          <div class="footer">
+            <slot name="controls-bottom">${e.bottom??i}</slot>
+          </div>
+        </div>
+      </k-resize>
+    `}static styles=e`
+    :host {
+      --padding: 0.5rem 0.75rem;
+      display: block;
+    }
+    :host([disabled]) {
+      opacity: 0.6;
+    }
+    :host([disabled]) k-tabs {
+      pointer-events: none;
+    }
+    /* readonly: textarea is read-only via the native attribute, but the
+       toolbar buttons mutate value programmatically, bypassing it. Mute
+       the controls-top wrapper and the footer so their buttons can't
+       fire. The Write/Preview tabs themselves stay interactive. */
+    :host([readonly]) .controls-top,
+    :host([readonly]) .footer {
+      pointer-events: none;
+      opacity: 0.5;
+    }
+    .controls-top {
+      display: inline-flex;
+      align-items: center;
+      flex-wrap: wrap;
+    }
+    k-resize {
+      width: 100%;
+      height: var(--height, 14rem);
+      background: var(--c_bg);
+    }
+    .frame {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      width: 100%;
+      min-height: 0;
+      box-sizing: border-box;
+    }
+    k-tabs {
+      flex: 1 1 auto;
+      min-height: 0;
+      display: flex;
+      flex-direction: column;
+    }
+    k-tab-content {
+      --spacer: 0;
+    }
+    k-tab-content[active] {
+      display: flex;
+      flex-direction: column;
+      padding: var(--spacer_q);
+    }
+    k-tab-content:not([active]) {
+      display: none;
+    }
+    .editor,
+    .preview {
+      box-sizing: border-box;
+      flex: 1 1 0;
+      min-height: 0;
+      width: 100%;
+      padding: var(--padding);
+      background: transparent;
+      color: var(--tc);
+      font: inherit;
+      line-height: 1.5;
+      overflow-y: auto;
+      scrollbar-width: thin;
+      resize: none;
+    }
+    .preview > :first-child { margin-top: 0; }
+    .preview > :last-child { margin-bottom: 0; }
+    .preview-empty {
+      color: var(--tc_muted);
+      font-style: italic;
+    }
+    .footer {
+      display: flex;
+      align-items: center;
+      gap: 0.25rem;
+      padding: 0.25rem 0.5rem;
+      flex: 0 0 auto;
+      border-top: 1px solid var(--c_border);
+      box-sizing: border-box;
+    }
+    .footer:not(:has(::slotted(*))) {
+      display: none;
+    }
+  `;static controlSets={"":{top:null,bottom:null},none:{top:null,bottom:null},minimal:{top:t`
+        <k-md-menu label="Heading">
+          <k-icon slot="trigger" name="text_fields"></k-icon>
+          <k-md-format-block tag="h1"></k-md-format-block>
+          <k-md-format-block tag="h3"></k-md-format-block>
+          <k-md-format-block tag="h5"></k-md-format-block>
+        </k-md-menu>
+        <k-md-bold></k-md-bold>
+        <k-md-italic></k-md-italic>
+        <k-md-bullet-list></k-md-bullet-list>
+        <k-md-numbered-list></k-md-numbered-list>
+      `,bottom:null},normal:{top:t`
+        <k-md-menu label="Heading">
+          <k-icon slot="trigger" name="text_fields"></k-icon>
+          <k-md-format-block tag="h1"></k-md-format-block>
+          <k-md-format-block tag="h2"></k-md-format-block>
+          <k-md-format-block tag="h3"></k-md-format-block>
+          <k-md-format-block tag="h4"></k-md-format-block>
+          <k-md-format-block tag="h5"></k-md-format-block>
+          <k-md-format-block tag="h6"></k-md-format-block>
+        </k-md-menu>
+        <k-md-bold></k-md-bold>
+        <k-md-italic></k-md-italic>
+        <k-md-quote></k-md-quote>
+        <k-md-code></k-md-code>
+        <k-md-link></k-md-link>
+        <k-md-bullet-list></k-md-bullet-list>
+        <k-md-numbered-list></k-md-numbered-list>
+      `,bottom:null},full:{top:t`
+        <k-md-menu label="Heading">
+          <k-icon slot="trigger" name="text_fields"></k-icon>
+          <k-md-format-block tag="h1"></k-md-format-block>
+          <k-md-format-block tag="h2"></k-md-format-block>
+          <k-md-format-block tag="h3"></k-md-format-block>
+          <k-md-format-block tag="h4"></k-md-format-block>
+          <k-md-format-block tag="h5"></k-md-format-block>
+          <k-md-format-block tag="h6"></k-md-format-block>
+        </k-md-menu>
+        <k-md-bold></k-md-bold>
+        <k-md-italic></k-md-italic>
+        <k-md-strikethrough></k-md-strikethrough>
+        <k-md-quote></k-md-quote>
+        <k-md-code></k-md-code>
+        <k-md-link></k-md-link>
+        <k-md-image></k-md-image>
+        <k-md-table></k-md-table>
+        <k-md-bullet-list></k-md-bullet-list>
+        <k-md-numbered-list></k-md-numbered-list>
+        <k-md-speech-to-text></k-md-speech-to-text>
+      `,bottom:null}}}customElements.define("k-markdown-editor",n);

package/dist/components/Resize.js

@@ -1,4 +1,4 @@
-import{LitElement as e,html as t,css as i}from"../lit-all.min.js";import r from"./ShadowComponent.js";import s from"./Icon.js";import n from"../utils/drag.js";export default class d extends r{static properties={resizing:{type:String,reflect:!0},dimention:{type:String,reflect:!0}};constructor(){super(),this.resizing="",this.dimension="",this.startSize={width:0,height:0},this.cleanupFuncs=[]}firstUpdated(){super.firstUpdated(),this.setupDragHandlers()}disconnectedCallback(){super.disconnectedCallback(),this.cleanupFuncs.forEach(e=>e())}dragStartHandler=({element:e})=>{const{width:t,height:i}=this.getBoundingClientRect();this.startSize.width=t,this.startSize.height=i,this.resizing=e.id};dragEndHandler=()=>{this.resizing=""};dragSideHandler=({x:e})=>{this.style.width=this.startSize.width+e+"px"};dragBottomHandler=({y:e})=>{this.style.height=this.startSize.height+e+"px"};dragCornerHandler=({x:e,y:t})=>{this.style.width=this.startSize.width+e+"px",this.style.height=this.startSize.height+t+"px"};setupDragHandlers(){const e=this.shadowRoot.getElementById("side"),t=this.shadowRoot.getElementById("bottom"),i=this.shadowRoot.getElementById("corner");e&&this.cleanupFuncs.push(n({element:e,startCallback:this.dragStartHandler,endCallback:this.dragEndHandler,callback:this.dragSideHandler,preventScroll:!0})),t&&this.cleanupFuncs.push(n({element:t,startCallback:this.dragStartHandler,endCallback:this.dragEndHandler,callback:this.dragBottomHandler,preventScroll:!0})),i&&this.cleanupFuncs.push(n({element:i,startCallback:this.dragStartHandler,endCallback:this.dragEndHandler,callback:this.dragCornerHandler,preventScroll:!0}))}static styles=i`
+import{LitElement as e,html as t,css as i}from"../lit-all.min.js";import s from"./ShadowComponent.js";import r from"./Icon.js";import d from"../utils/drag.js";export default class n extends s{static properties={resizing:{type:String,reflect:!0},dimention:{type:String,reflect:!0},disabled:{type:Boolean,reflect:!0}};constructor(){super(),this.resizing="",this.dimension="",this.disabled=!1,this.startSize={width:0,height:0},this.cleanupFuncs=[]}firstUpdated(){super.firstUpdated(),this.setupDragHandlers()}disconnectedCallback(){super.disconnectedCallback(),this.cleanupFuncs.forEach(e=>e())}dragStartHandler=({element:e})=>{if(this.disabled)return;const{width:t,height:i}=this.getBoundingClientRect();this.startSize.width=t,this.startSize.height=i,this.resizing=e.id};dragEndHandler=()=>{this.resizing=""};dragSideHandler=({x:e})=>{this.disabled||(this.style.width=this.startSize.width+e+"px")};dragBottomHandler=({y:e})=>{this.disabled||(this.style.height=this.startSize.height+e+"px")};dragCornerHandler=({x:e,y:t})=>{this.disabled||(this.style.width=this.startSize.width+e+"px",this.style.height=this.startSize.height+t+"px")};setupDragHandlers(){const e=this.shadowRoot.getElementById("side"),t=this.shadowRoot.getElementById("bottom"),i=this.shadowRoot.getElementById("corner");e&&this.cleanupFuncs.push(d({element:e,startCallback:this.dragStartHandler,endCallback:this.dragEndHandler,callback:this.dragSideHandler,preventScroll:!0})),t&&this.cleanupFuncs.push(d({element:t,startCallback:this.dragStartHandler,endCallback:this.dragEndHandler,callback:this.dragBottomHandler,preventScroll:!0})),i&&this.cleanupFuncs.push(d({element:i,startCallback:this.dragStartHandler,endCallback:this.dragEndHandler,callback:this.dragCornerHandler,preventScroll:!0}))}static styles=i`
 		:host {
 			--handle_size: 1rem;
 
@@ -75,6 +75,16 @@ import{LitElement as e,html as t,css as i}from"../lit-all.min.js";import r from"
 		:host([dimension="width"]) #corner {
 			display: none;
 		}
+		/* Disabled: handles can't capture pointer events, so a drag can't
+		   start in the first place; visual cue: handles fade out and the
+		   cursor reverts to default. */
+		:host([disabled]) #side,
+		:host([disabled]) #bottom,
+		:host([disabled]) #corner {
+			pointer-events: none;
+			cursor: default;
+			opacity: 0.4;
+		}
 	`;render(){return t`
 			<div id="main">
 				<slot></slot>
@@ -94,4 +104,4 @@ import{LitElement as e,html as t,css as i}from"../lit-all.min.js";import r from"
 					<path fill="currentColor" d="m12.735 3.0095e-4c-0.77288 0.011702-1.6098 0.36368-2.2773 1.0313l-9.4258 9.4258c-1.1868 1.1868-1.3772 2.908-0.42773 3.8574 0.94943 0.94943 2.6687 0.7571 3.8555-0.42969l9.4258-9.4258c1.1868-1.1868 1.3772-2.906 0.42774-3.8555-0.41537-0.41537-0.977-0.61262-1.5781-0.60352zm0 8.5684c-0.77288 0.011702-1.6098 0.36564-2.2773 1.0332l-0.85744 0.85546c-1.1868 1.1868-1.3772 2.908-0.42773 3.8574 0.94943 0.94943 2.6687 0.7571 3.8555-0.42969l0.85742-0.85742c1.1868-1.1868 1.3772-2.906 0.42773-3.8555-0.41537-0.41537-0.977-0.61262-1.5781-0.60352z" />
 				</svg>
 			</div>
-		`}}customElements.define("k-resize",d);
+		`}}customElements.define("k-resize",n);

package/dist/components/markdownEditorControls/Bold.js

@@ -0,0 +1,11 @@
+import t from"./MarkdownEditorControl.js";import{html as l}from"../../lit-all.min.js";import"../Icon.js";export default class o extends t{constructor(){super(),this.label="Bold (Cmd/Ctrl+B)"}command(){this.wrapSelection("**","**","bold text")}render(){return l`
+      <button
+        type="button"
+        class=${this.btnClass}
+        title=${this.label}
+        aria-label=${this.label}
+        @click=${this.handleClick}
+      >
+        <k-icon name="format_bold"></k-icon>
+      </button>
+    `}}customElements.define("k-md-bold",o);

package/dist/components/markdownEditorControls/BulletList.js

@@ -0,0 +1,11 @@
+import t from"./MarkdownEditorControl.js";import{html as l}from"../../lit-all.min.js";import"../Icon.js";export default class e extends t{constructor(){super(),this.label="Bulleted list"}command(){this.insertLinePrefix("- ")}render(){return l`
+      <button
+        type="button"
+        class=${this.btnClass}
+        title=${this.label}
+        aria-label=${this.label}
+        @click=${this.handleClick}
+      >
+        <k-icon name="format_list_bulleted"></k-icon>
+      </button>
+    `}}customElements.define("k-md-bullet-list",e);

package/dist/components/markdownEditorControls/Code.js

@@ -0,0 +1,11 @@
+import t from"./MarkdownEditorControl.js";import{html as e}from"../../lit-all.min.js";import"../Icon.js";export default class o extends t{constructor(){super(),this.label="Code"}command(){this.getSelection().text.includes("\n")?this.wrapSelection("```\n","\n```","code"):this.wrapSelection("`","`","code")}render(){return e`
+      <button
+        type="button"
+        class=${this.btnClass}
+        title=${this.label}
+        aria-label=${this.label}
+        @click=${this.handleClick}
+      >
+        <k-icon name="code"></k-icon>
+      </button>
+    `}}customElements.define("k-md-code",o);

package/dist/components/markdownEditorControls/FormatBlock.js

@@ -0,0 +1,30 @@
+import t from"./MarkdownEditorControl.js";import{html as e,css as s}from"../../lit-all.min.js";import"../Icon.js";const a={h1:"Heading 1",h2:"Heading 2",h3:"Heading 3",h4:"Heading 4",h5:"Heading 5",h6:"Heading 6"},i={h1:"format_h1",h2:"format_h2",h3:"format_h3",h4:"format_h4",h5:"format_h5",h6:"format_h6"};export default class o extends t{static properties={...t.properties,tag:{type:String,reflect:!0}};constructor(){super(),this.tag="h2",this.label=""}command(){const t=(this.tag||"h2").toLowerCase();if(/^h[1-6]$/.test(t)){const e=parseInt(t.slice(1),10);this.insertLinePrefix("#".repeat(e)+" ",/^#{1,6} /)}}get#t(){return this.label?this.label:a[(this.tag||"h2").toLowerCase()]||this.tag}get#e(){return i[(this.tag||"h2").toLowerCase()]||"format_h2"}render(){return e`
+      <button
+        type="button"
+        class=${this.btnClass}
+        title=${this.#t}
+        aria-label=${this.#t}
+        @click=${this.handleClick}
+      >
+        <k-icon name=${this.#e}></k-icon>
+        <span class="fb-label">${this.#t}</span>
+      </button>
+    `}static styles=[t.styles,s`
+      :host {
+        display: inline-flex;
+      }
+      .ctrl {
+        gap: 0.5rem;
+        justify-content: flex-start;
+        white-space: nowrap;
+      }
+      /* When this is slotted into something that stretches it (a menu),
+         the button fills the row instead of staying compact. */
+      :host([slot]) .ctrl,
+      :host(*) .ctrl {
+        width: 100%;
+      }
+      .fb-label {
+        font-size: 0.875rem;
+      }
+    `]}customElements.define("k-md-format-block",o);

package/dist/components/markdownEditorControls/Heading.js

@@ -0,0 +1,11 @@
+import t from"./MarkdownEditorControl.js";import{html as e}from"../../lit-all.min.js";import"../Icon.js";export default class i extends t{static properties={...t.properties,level:{type:Number,reflect:!0}};constructor(){super(),this.level=2,this.label="Heading"}command(){const t=Math.min(6,Math.max(1,Number(this.level)||2));this.insertLinePrefix("#".repeat(t)+" ",/^#{1,6} /)}render(){const t=Math.min(6,Math.max(1,Number(this.level)||2));return e`
+      <button
+        type="button"
+        class=${this.btnClass}
+        title="${this.label} ${t}"
+        aria-label="${this.label} ${t}"
+        @click=${this.handleClick}
+      >
+        <k-icon name="format_h${t}"></k-icon>
+      </button>
+    `}}customElements.define("k-md-heading",i);

package/dist/components/markdownEditorControls/Image.js

@@ -0,0 +1,93 @@
+import e from"./MarkdownEditorControl.js";import{html as t,css as o}from"../../lit-all.min.js";import"../Icon.js";import"../Dropdown.js";import r from"../Dialog.js";export default class i extends e{static properties={...e.properties,popup:{type:String,reflect:!0}};constructor(){super(),this.label="Image",this.popup="dropdown"}command(){"dialog"===this.popup&&this.#e()}#t(e,t){return!!e&&(this.editor?.replaceSelection(`![${t}](${e})`,{selectInserted:!1}),!0)}handleDropdownOpened=()=>{requestAnimationFrame(()=>{this.#o?.focus();const e=this.getSelection();this.#r&&(this.#r.value=e.text||"")})};handleDropdownClosed=()=>{this.#o&&(this.#o.value=""),this.#r&&(this.#r.value="")};handleFormKeydown=e=>{"Enter"===e.key?(e.preventDefault(),this.#i()):"Escape"===e.key&&this.shadowRoot?.querySelector("k-dropdown")?.close()};handleInsertClick=()=>this.#i();handleCancelClick=()=>{this.shadowRoot?.querySelector("k-dropdown")?.close()};#i(){const e=this.#o?.value.trim()||"",t=this.#r?.value.trim()||"";e?(this.#t(e,t),this.shadowRoot?.querySelector("k-dropdown")?.close()):this.#o?.focus()}get#o(){return this.shadowRoot?.querySelector(".image-url")}get#r(){return this.shadowRoot?.querySelector(".image-alt")}#e(){if(!this.editor)return;const e=this.getSelection(),t=document.createElement("input");t.type="url",t.placeholder="https://example.com/image.png",t.required=!0,t.style.cssText="padding: 0.5rem; border: 1px solid var(--c_border); border-radius: var(--radius); font: inherit;";const o=document.createElement("input");o.type="text",o.placeholder="Description for screen readers",o.value=e.text||"",o.style.cssText="padding: 0.5rem; border: 1px solid var(--c_border); border-radius: var(--radius); font: inherit;";const i=document.createElement("div");i.className="p",i.style.cssText="display: flex; flex-direction: column; gap: 1rem;",i.innerHTML='\n      <div style="display: flex; flex-direction: column; gap: 0.25rem;">\n        <label style="font-weight: bold;">Image URL</label>\n      </div>\n      <div style="display: flex; flex-direction: column; gap: 0.25rem;">\n        <label style="font-weight: bold;">Alt text</label>\n      </div>\n    ',i.children[0].appendChild(t),i.children[1].appendChild(o),r.create(i,{title:"Insert Image",cancelText:"Cancel",confirmText:"Insert",confirmClasses:"success ml",confirmAction:e=>{const r=t.value.trim();if(!r)return e.keepDialogOpen=!0,void t.focus();this.#t(r,o.value.trim())}}),queueMicrotask(()=>t.focus())}render(){return"dialog"===this.popup?t`
+        <button
+          type="button"
+          class=${this.btnClass}
+          title=${this.label}
+          aria-label=${this.label}
+          @click=${this.handleClick}
+        >
+          <k-icon name="image"></k-icon>
+        </button>
+      `:t`
+      <k-dropdown
+        @opened=${this.handleDropdownOpened}
+        @closed=${this.handleDropdownClosed}
+      >
+        <button
+          slot="trigger"
+          type="button"
+          class=${this.btnClass}
+          title=${this.label}
+          aria-label=${this.label}
+        >
+          <k-icon name="image"></k-icon>
+        </button>
+        <div class="image-form" @keydown=${this.handleFormKeydown}>
+          <label>Image URL</label>
+          <input
+            class="image-url"
+            type="url"
+            required
+            placeholder="https://example.com/image.png"
+          />
+          <label>Alt text</label>
+          <input
+            class="image-alt"
+            type="text"
+            placeholder="Description for screen readers"
+          />
+          <div class="image-actions">
+            <button type="button" class="no-btn" @click=${this.handleCancelClick}>Cancel</button>
+            <button type="button" class="no-btn primary" @click=${this.handleInsertClick}>Insert</button>
+          </div>
+        </div>
+      </k-dropdown>
+    `}static styles=[e.styles,o`
+      .image-form {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+        padding: 0.75rem;
+        min-width: 16rem;
+      }
+      .image-form label {
+        font-weight: bold;
+        font-size: 0.875rem;
+      }
+      .image-form input {
+        padding: 0.5rem;
+        border: 1px solid var(--c_border);
+        border-radius: var(--radius);
+        font: inherit;
+        background: var(--c_bg);
+        color: var(--tc);
+      }
+      .image-form input:focus-visible {
+        outline: none;
+        box-shadow: var(--focus_shadow);
+      }
+      .image-actions {
+        display: flex;
+        justify-content: flex-end;
+        gap: 0.5rem;
+        margin-top: 0.25rem;
+      }
+      .image-actions button {
+        padding: 0.4rem 0.8rem;
+        border: 1px solid var(--c_border);
+        border-radius: var(--radius);
+        background: var(--c_bg);
+        color: var(--tc);
+        cursor: pointer;
+        font: inherit;
+      }
+      .image-actions button.primary {
+        background: var(--c_primary);
+        color: white;
+        border-color: var(--c_primary);
+      }
+      .image-actions button:focus-visible {
+        outline: none;
+        box-shadow: var(--focus_shadow);
+      }
+    `]}customElements.define("k-md-image",i);

package/dist/components/markdownEditorControls/Italic.js

@@ -0,0 +1,11 @@
+import t from"./MarkdownEditorControl.js";import{html as i}from"../../lit-all.min.js";import"../Icon.js";export default class l extends t{constructor(){super(),this.label="Italic (Cmd/Ctrl+I)"}command(){this.wrapSelection("_","_","italic text")}render(){return i`
+      <button
+        type="button"
+        class=${this.btnClass}
+        title=${this.label}
+        aria-label=${this.label}
+        @click=${this.handleClick}
+      >
+        <k-icon name="format_italic"></k-icon>
+      </button>
+    `}}customElements.define("k-md-italic",l);

package/dist/components/markdownEditorControls/Link.js

@@ -0,0 +1,11 @@
+import t from"./MarkdownEditorControl.js";import{html as e}from"../../lit-all.min.js";import"../Icon.js";export default class n extends t{constructor(){super(),this.label="Link"}command(){const t=this.getSelection(),e=this.editor;if(!e)return;const n=e.textarea;if(!n)return;const s=(t,s,l)=>{n.value=t,n.selectionStart=s,n.selectionEnd=l,n.focus(),e.value=t,n.dispatchEvent(new Event("input",{bubbles:!0}))},l=/\[([^\]]*)\]\([^)]*\)/g;let i;for(;null!==(i=l.exec(n.value));){const e=i.index,l=e+i[0].length;if(t.start>=e&&t.end<=l){const t=i[1];return void s(n.value.substring(0,e)+t+n.value.substring(l),e,e+t.length)}}const r=t.text||"link text",o=`[${r}](url)`,a=n.value.substring(0,t.start)+o+n.value.substring(t.end),u=t.start+1+r.length+2;s(a,u,u+3)}render(){return e`
+      <button
+        type="button"
+        class=${this.btnClass}
+        title=${this.label}
+        aria-label=${this.label}
+        @click=${this.handleClick}
+      >
+        <k-icon name="link"></k-icon>
+      </button>
+    `}}customElements.define("k-md-link",n);

package/dist/components/markdownEditorControls/MarkdownEditorControl.js

@@ -0,0 +1,39 @@
+import e from"../ShadowComponent.js";import{html as t,css as i}from"../../lit-all.min.js";export default class n extends e{static properties={btnClass:{type:String,attribute:"btn-class"},label:{type:String,reflect:!0},hidden:{type:Boolean,reflect:!0}};constructor(){super(),this.btnClass="no-btn ctrl",this.label="",this.hidesInPreviewMode=!0}connectedCallback(){super.connectedCallback();const e=this.editor;e&&(this.boundEditor=e,this.modeHandler=()=>{const e=this.hidesInPreviewMode&&"preview"===this.boundEditor.mode;this.hidden!==e&&(this.hidden=e)},this.modeHandler(),e.addEventListener("mode-change",this.modeHandler))}disconnectedCallback(){super.disconnectedCallback(),this.boundEditor&&this.modeHandler&&this.boundEditor.removeEventListener("mode-change",this.modeHandler),this.boundEditor=null,this.modeHandler=null}get editor(){const e=this.closest("k-markdown-editor");if(e)return e;const t=this.getRootNode();return t instanceof ShadowRoot&&"K-MARKDOWN-EDITOR"===t.host?.tagName?t.host:null}wrapSelection(e,t,i){this.editor?.wrapSelection(e,t,i)}insertAtCursor(e){this.editor?.insertAtCursor(e)}insertLinePrefix(e,t){this.editor?.insertLinePrefix(e,t)}replaceInSelectedLines(e,t){this.editor?.replaceInSelectedLines(e,t)}replaceSelection(e,t){this.editor?.replaceSelection(e,t)}getSelection(){return this.editor?.getSelection()||{start:0,end:0,text:""}}command(){}handleClick=e=>{e.preventDefault(),this.hidden||this.command()};render(){return t`
+      <button
+        type="button"
+        class=${this.btnClass}
+        title=${this.label}
+        aria-label=${this.label}
+        @click=${this.handleClick}
+      >
+        <slot>${this.label}</slot>
+      </button>
+    `}static styles=i`
+    :host {
+      display: inline-flex;
+    }
+    :host([hidden]) {
+      display: none;
+    }
+    .ctrl {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      padding: var(--spacer_h);
+      border: 1px solid transparent;
+      border-radius: var(--radius);
+      background: transparent;
+      color: var(--tc_muted);
+      cursor: pointer;
+      font: inherit;
+      transition: background var(--animation_ms), color var(--animation_ms);
+    }
+    .ctrl:hover {
+      background: var(--c_bg__alt);
+      color: var(--tc);
+    }
+    .ctrl:focus-visible {
+      outline: none;
+      box-shadow: var(--focus_shadow);
+    }
+  `}customElements.define("k-md-control",n);

package/dist/components/markdownEditorControls/Menu.js

@@ -0,0 +1,30 @@
+import t from"./MarkdownEditorControl.js";import{html as e,css as o}from"../../lit-all.min.js";import"../Icon.js";import"../Dropdown.js";export default class s extends t{constructor(){super(),this.label="Menu"}command(){}render(){return e`
+      <k-dropdown>
+        <button
+          slot="trigger"
+          type="button"
+          class=${this.btnClass}
+          title=${this.label}
+          aria-label=${this.label}
+        >
+          <slot name="trigger">
+            <k-icon name="menu"></k-icon>
+          </slot>
+        </button>
+        <slot></slot>
+      </k-dropdown>
+    `}static styles=[t.styles,o`
+      :host {
+        display: inline-flex;
+      }
+      k-dropdown {
+        display: inline-flex;
+      }
+      /* Stretch slotted menu items so each one fills the dropdown
+         horizontally — Dropdown's built-in styles only target raw
+         <a>/<button> children, so custom-element items need this themselves. */
+      ::slotted(:not([slot="trigger"])) {
+        display: block;
+        width: 100%;
+      }
+    `]}customElements.define("k-md-menu",s);

package/dist/components/markdownEditorControls/NumberedList.js

@@ -0,0 +1,11 @@
+import t from"./MarkdownEditorControl.js";import{html as e}from"../../lit-all.min.js";import"../Icon.js";export default class n extends t{constructor(){super(),this.label="Numbered list"}command(){const t=this.editor;if(!t)return;const e=t.textarea;e&&("write"!==t.mode&&(t.mode="write"),t.updateComplete.then(()=>{e.focus();const{selectionStart:n,selectionEnd:l,value:s}=e,i=s.lastIndexOf("\n",n-1)+1,r=s.indexOf("\n",l),o=-1===r?s.length:r,a=s.substring(i,o).split("\n"),c=/^\d+\. /,u=a.filter(t=>t.length>0);let d;if(u.length>0&&u.every(t=>c.test(t)))d=a.map(t=>t.replace(c,""));else{let t=1;d=a.map(e=>{if(!e)return e;const n=e.replace(c,"");return`${t++}. ${n}`})}const m=d.join("\n"),b=s.substring(0,i)+m+s.substring(o);e.value=b,e.selectionStart=i,e.selectionEnd=i+m.length,t.value=b,e.dispatchEvent(new Event("input",{bubbles:!0}))}))}render(){return e`
+      <button
+        type="button"
+        class=${this.btnClass}
+        title=${this.label}
+        aria-label=${this.label}
+        @click=${this.handleClick}
+      >
+        <k-icon name="format_list_numbered"></k-icon>
+      </button>
+    `}}customElements.define("k-md-numbered-list",n);

package/dist/components/markdownEditorControls/Quote.js

@@ -0,0 +1,11 @@
+import t from"./MarkdownEditorControl.js";import{html as e}from"../../lit-all.min.js";import"../Icon.js";export default class o extends t{constructor(){super(),this.label="Quote"}command(){this.insertLinePrefix("> ")}render(){return e`
+      <button
+        type="button"
+        class=${this.btnClass}
+        title=${this.label}
+        aria-label=${this.label}
+        @click=${this.handleClick}
+      >
+        <k-icon name="format_quote"></k-icon>
+      </button>
+    `}}customElements.define("k-md-quote",o);

package/dist/components/markdownEditorControls/SpeechToText.js

@@ -0,0 +1,16 @@
+import t from"./MarkdownEditorControl.js";import{html as e,css as o}from"../../lit-all.min.js";import"../SpeechToText.js";export default class s extends t{static properties={...t.properties,language:{type:String,reflect:!0},continuous:{type:Boolean,reflect:!0}};constructor(){super(),this.label="Speech to text",this.language="en-US",this.continuous=!1}command(){}handleEnd=t=>{const e=(t.detail?.text||"").trim();e&&this.editor?.replaceSelection(e+" ",{selectInserted:!1})};render(){return e`
+      <k-speech-to-text
+        language=${this.language}
+        ?continuous=${this.continuous}
+        @end=${this.handleEnd}
+      ></k-speech-to-text>
+    `}static styles=[t.styles,o`
+    :host {
+      margin: var(--spacer_q);
+    }
+      k-speech-to-text {
+        /* Shrink the default 2.5rem circular mic button so it sits
+           comfortably alongside other toolbar controls. */
+        --btn_size: 2rem;
+      }
+    `]}customElements.define("k-md-speech-to-text",s);

package/dist/components/markdownEditorControls/Strikethrough.js

@@ -0,0 +1,11 @@
+import t from"./MarkdownEditorControl.js";import{html as r}from"../../lit-all.min.js";import"../Icon.js";export default class e extends t{constructor(){super(),this.label="Strikethrough"}command(){this.wrapSelection("~~","~~","strikethrough")}render(){return r`
+      <button
+        type="button"
+        class=${this.btnClass}
+        title=${this.label}
+        aria-label=${this.label}
+        @click=${this.handleClick}
+      >
+        <k-icon name="format_strikethrough"></k-icon>
+      </button>
+    `}}customElements.define("k-md-strikethrough",e);

package/dist/components/markdownEditorControls/Table.js

@@ -0,0 +1,80 @@
+import t from"./MarkdownEditorControl.js";import{html as e,css as r}from"../../lit-all.min.js";import"../Icon.js";import"../Dropdown.js";export default class o extends t{constructor(){super(),this.label="Table"}command(){}handleDropdownOpened=()=>{requestAnimationFrame(()=>{const t=this.shadowRoot?.querySelector(".tbl-cols");t&&(t.value="3",t.select());const e=this.shadowRoot?.querySelector(".tbl-rows");e&&(e.value="2")})};handleFormKeydown=t=>{"Enter"===t.key?(t.preventDefault(),this.#t()):"Escape"===t.key&&this.shadowRoot?.querySelector("k-dropdown")?.close()};handleInsertClick=()=>this.#t();#t(){const t=this.#e(this.shadowRoot?.querySelector(".tbl-cols")?.value,1,20),e=this.#e(this.shadowRoot?.querySelector(".tbl-rows")?.value,1,50);if(!t||!e)return;const r=this.editor;r&&(r.replaceSelection(this.#r(t,e),{selectInserted:!1}),this.shadowRoot?.querySelector("k-dropdown")?.close())}#e(t,e,r){const o=parseInt(t,10);return Number.isFinite(o)?Math.max(e,Math.min(r,o)):0}#r(t,e){const r=Array.from({length:t},(t,e)=>` Header ${e+1} `).join("|"),o=Array.from({length:t},()=>" --- ").join("|"),n=Array.from({length:t},()=>"   ").join("|");return`\n${[`|${r}|`,`|${o}|`,...Array.from({length:e},()=>`|${n}|`)].join("\n")}\n`}render(){return e`
+      <k-dropdown @opened=${this.handleDropdownOpened}>
+        <button
+          slot="trigger"
+          type="button"
+          class=${this.btnClass}
+          title=${this.label}
+          aria-label=${this.label}
+        >
+          <k-icon name="table"></k-icon>
+        </button>
+        <div class="tbl-form" @keydown=${this.handleFormKeydown}>
+          <input
+            class="tbl-cols"
+            type="number"
+            min="1"
+            max="20"
+            inputmode="numeric"
+            aria-label="Columns"
+            value="3"
+          />
+          <span class="tbl-x" aria-hidden="true">×</span>
+          <input
+            class="tbl-rows"
+            type="number"
+            min="1"
+            max="50"
+            inputmode="numeric"
+            aria-label="Rows"
+            value="2"
+          />
+          <button type="button" class="primary" @click=${this.handleInsertClick}>Insert</button>
+        </div>
+      </k-dropdown>
+    `}static styles=[t.styles,r`
+      .tbl-form {
+        display: flex;
+        align-items: center;
+        gap: 0.4rem;
+        padding: 0.5rem;
+      }
+      .tbl-form input {
+        width: 2.5rem;
+        padding: 0.35rem 0.4rem;
+        border: 1px solid var(--c_border);
+        border-radius: var(--radius);
+        font: inherit;
+        background: var(--c_bg);
+        color: var(--tc);
+        text-align: center;
+        /* Hide the up/down spinner buttons that take up extra width. */
+        -moz-appearance: textfield;
+      }
+      .tbl-form input::-webkit-inner-spin-button,
+      .tbl-form input::-webkit-outer-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+      }
+      .tbl-form input:focus-visible {
+        outline: none;
+        box-shadow: var(--focus_shadow);
+      }
+      .tbl-x {
+        color: var(--tc_muted);
+        font-weight: bold;
+      }
+      .tbl-form button.primary {
+        padding: 0.4rem 0.8rem;
+        border: 1px solid var(--c_primary);
+        border-radius: var(--radius);
+        background: var(--c_primary);
+        color: white;
+        cursor: pointer;
+        font: inherit;
+      }
+      .tbl-form button.primary:focus-visible {
+        outline: none;
+        box-shadow: var(--focus_shadow);
+      }
+    `]}customElements.define("k-md-table",o);