kempo-ui 0.4.20 → 0.4.21

package/src/components/controls/AlignJustify.js

@@ -0,0 +1,19 @@
+import ButtonControl from './ButtonControl.js';
+import { html } from '../../lit-all.min.js';
+import '../Icon.js';
+
+export default class AlignJustify extends ButtonControl {
+  static requires = ['alignJustify'];
+  static hostMode = 'visual';
+
+  connectedCallback() {
+    super.connectedCallback();
+    if(!this.hasAttribute('title')) this.title = 'Justify';
+  }
+
+  handleAction() { this.host?.alignJustify?.(); }
+
+  render() { return html`<slot><k-icon name="format_align_justify"></k-icon></slot>`; }
+}
+
+customElements.define('kc-align-justify', AlignJustify);

package/src/components/controls/AlignLeft.js

@@ -0,0 +1,19 @@
+import ButtonControl from './ButtonControl.js';
+import { html } from '../../lit-all.min.js';
+import '../Icon.js';
+
+export default class AlignLeft extends ButtonControl {
+  static requires = ['alignLeft'];
+  static hostMode = 'visual';
+
+  connectedCallback() {
+    super.connectedCallback();
+    if(!this.hasAttribute('title')) this.title = 'Align Left';
+  }
+
+  handleAction() { this.host?.alignLeft?.(); }
+
+  render() { return html`<slot><k-icon name="format_align_left"></k-icon></slot>`; }
+}
+
+customElements.define('kc-align-left', AlignLeft);

package/src/components/controls/AlignRight.js

@@ -0,0 +1,19 @@
+import ButtonControl from './ButtonControl.js';
+import { html } from '../../lit-all.min.js';
+import '../Icon.js';
+
+export default class AlignRight extends ButtonControl {
+  static requires = ['alignRight'];
+  static hostMode = 'visual';
+
+  connectedCallback() {
+    super.connectedCallback();
+    if(!this.hasAttribute('title')) this.title = 'Align Right';
+  }
+
+  handleAction() { this.host?.alignRight?.(); }
+
+  render() { return html`<slot><k-icon name="format_align_right"></k-icon></slot>`; }
+}
+
+customElements.define('kc-align-right', AlignRight);

package/src/components/controls/Bold.js

@@ -0,0 +1,19 @@
+import ButtonControl from './ButtonControl.js';
+import { html } from '../../lit-all.min.js';
+import '../Icon.js';
+
+export default class Bold extends ButtonControl {
+  static requires = ['bold'];
+  static hostMode = ['visual', 'write'];
+
+  connectedCallback() {
+    super.connectedCallback();
+    if(!this.hasAttribute('title')) this.title = 'Bold';
+  }
+
+  handleAction() { this.host?.bold?.(); }
+
+  render() { return html`<slot><k-icon name="format_bold"></k-icon></slot>`; }
+}
+
+customElements.define('kc-bold', Bold);

package/src/components/controls/BulletList.js

@@ -0,0 +1,19 @@
+import ButtonControl from './ButtonControl.js';
+import { html } from '../../lit-all.min.js';
+import '../Icon.js';
+
+export default class BulletList extends ButtonControl {
+  static requires = ['bulletList'];
+  static hostMode = ['visual', 'write'];
+
+  connectedCallback() {
+    super.connectedCallback();
+    if(!this.hasAttribute('title')) this.title = 'Bulleted List';
+  }
+
+  handleAction() { this.host?.bulletList?.(); }
+
+  render() { return html`<slot><k-icon name="format_list_bulleted"></k-icon></slot>`; }
+}
+
+customElements.define('kc-bullet-list', BulletList);

package/src/components/controls/ButtonControl.js

@@ -0,0 +1,114 @@
+import Control from './Control.js';
+import { css, html } from '../../lit-all.min.js';
+
+/*
+  Base class for clickable controls. The host element IS the button —
+  no internal <button> is rendered. Subclasses override handleAction()
+  with the click behavior. Disabled state (from Control.updateHostSupport
+  or external) blocks click propagation.
+
+  Subclasses typically:
+    static requires = ['methodName']
+    handleAction() { this.host?.methodName?.(); }
+    render() { return html`<k-icon name="..."></k-icon>`; }
+*/
+export default class ButtonControl extends Control {
+  /*
+    Lifecycle Callbacks
+  */
+  connectedCallback() {
+    super.connectedCallback();
+    if(!this.hasAttribute('role')) this.setAttribute('role', 'button');
+    if(!this.hasAttribute('tabindex')) this.tabIndex = this.disabled ? -1 : 0;
+    this.setAttribute('aria-disabled', String(!!this.disabled));
+    this.addEventListener('click', this.handleClick);
+    this.addEventListener('keydown', this.handleKeyDown);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener('click', this.handleClick);
+    this.removeEventListener('keydown', this.handleKeyDown);
+  }
+
+  updated(changed) {
+    super.updated(changed);
+    if(changed.has('disabled')){
+      this.tabIndex = this.disabled ? -1 : 0;
+      this.setAttribute('aria-disabled', String(this.disabled));
+    }
+  }
+
+  /*
+    Public Methods (override in subclasses)
+  */
+  handleAction() {}
+
+  /*
+    Event Handlers
+  */
+  handleClick = e => {
+    if(this.disabled){
+      e.stopImmediatePropagation();
+      return;
+    }
+    this.handleAction();
+  };
+
+  handleKeyDown = e => {
+    if(this.disabled) return;
+    if(e.key === 'Enter' || e.key === ' '){
+      e.preventDefault();
+      this.click();
+    }
+  };
+
+  /*
+    Rendering — subclasses override
+  */
+  render() {
+    return html`<slot></slot>`;
+  }
+
+  /*
+    Styles
+  */
+  static styles = [
+    Control.styles,
+    css`
+      :host {
+        align-items: center;
+        justify-content: center;
+        min-width: 2rem;
+        min-height: 2rem;
+        background: transparent;
+        border: 1px solid var(--c_border);
+        border-radius: var(--radius);
+        margin: var(--spacer_q);
+        padding: var(--spacer_h);
+        color: inherit;
+        cursor: pointer;
+        outline: none;
+        font-size: inherit;
+        user-select: none;
+        transition: background-color var(--animation_ms), box-shadow var(--animation_ms);
+      }
+      :host(:not([disabled]):hover) {
+        background: oklch(from var(--c_bg__inv) l c h / 0.15);
+      }
+      :host(:not([disabled]):focus),
+      :host(:not([disabled]):focus-visible) {
+        box-shadow: var(--focus_shadow);
+        z-index: 1;
+      }
+      :host([disabled]) {
+        cursor: default;
+      }
+      :host([active]) {
+        background: oklch(from var(--c_primary) l c h / 0.18);
+      }
+    `
+  ];
+}
+
+customElements.define('kc-button', ButtonControl);

package/src/components/controls/CharacterCount.js

@@ -0,0 +1,48 @@
+import Control from './Control.js';
+import { html, css } from '../../lit-all.min.js';
+
+export default class CharacterCount extends Control {
+  static hostEvents = ['change', 'ready'];
+
+  static properties = {
+    ...Control.properties,
+    count: { type: Number, state: true }
+  };
+
+  constructor() {
+    super();
+    this.count = 0;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    setTimeout(() => this.updateCount(), 0);
+  }
+
+  willUpdate(changed) {
+    super.willUpdate?.(changed);
+    this.updateCount();
+  }
+
+  updateCount() {
+    const host = this.host;
+    if(!host || typeof host.getValue !== 'function') return;
+    const val = host.getValue() || '';
+    const text = val.includes('<') ? (new DOMParser().parseFromString(val, 'text/html').body.innerText || '') : val;
+    this.count = text.length;
+  }
+
+  render() {
+    return html`<span class="character-count"><slot name="label">Characters:</slot> ${this.count}</span>`;
+  }
+
+  static styles = [
+    Control.styles,
+    css`
+      :host { align-items: center; padding: 0 0.5rem; font-size: 0.875rem; color: var(--tc_muted, #666); }
+      .character-count { display: flex; align-items: center; gap: 0.25rem; }
+    `
+  ];
+}
+
+customElements.define('kc-character-count', CharacterCount);

package/src/components/controls/ClearFormatting.js

@@ -0,0 +1,19 @@
+import ButtonControl from './ButtonControl.js';
+import { html } from '../../lit-all.min.js';
+import '../Icon.js';
+
+export default class ClearFormatting extends ButtonControl {
+  static requires = ['removeFormat'];
+  static hostMode = 'visual';
+
+  connectedCallback() {
+    super.connectedCallback();
+    if(!this.hasAttribute('title')) this.title = 'Clear Formatting';
+  }
+
+  handleAction() { this.host?.removeFormat?.(); }
+
+  render() { return html`<slot><k-icon name="format_clear"></k-icon></slot>`; }
+}
+
+customElements.define('kc-clear-formatting', ClearFormatting);

package/src/components/controls/CodeBlock.js

@@ -0,0 +1,27 @@
+import ButtonControl from './ButtonControl.js';
+import { html } from '../../lit-all.min.js';
+import '../Icon.js';
+
+/*
+  Toggles between paragraph and <pre> code block in visual mode.
+  Calls host.formatBlock('pre') or 'p' based on isSelectionInCodeBlock.
+*/
+export default class CodeBlock extends ButtonControl {
+  static requires = ['formatBlock'];
+  static hostMode = 'visual';
+
+  connectedCallback() {
+    super.connectedCallback();
+    if(!this.hasAttribute('title')) this.title = 'Code Block';
+  }
+
+  handleAction() {
+    const host = this.host;
+    const inCode = host?.isSelectionInCodeBlock?.();
+    host?.formatBlock?.(inCode ? 'p' : 'pre');
+  }
+
+  render() { return html`<slot><k-icon name="code_blocks"></k-icon></slot>`; }
+}
+
+customElements.define('kc-code-block', CodeBlock);

package/src/components/controls/Control.js

@@ -0,0 +1,176 @@
+import ShadowComponent from '../ShadowComponent.js';
+import { css } from '../../lit-all.min.js';
+
+/*
+  Base class for all controls (kc-*). A control finds its host via
+  closest('[controlled]') and disables itself if the host does not
+  implement the methods declared in static requires.
+
+  Subclasses can declare:
+    static requires = ['methodName', ...]  // host methods that must exist;
+                                           // missing → disabled
+    static hostMode = 'mode-name'          // optional: only visible when
+                                           // host.mode === this value. If
+                                           // host has no `mode` property,
+                                           // always visible.
+    static hostEvents = ['evt', ...]       // host events that trigger
+                                           // requestUpdate() on this control
+
+*/
+export default class Control extends ShadowComponent {
+  static properties = {
+    hidden: { type: Boolean, reflect: true },
+    disabled: { type: Boolean, reflect: true }
+  };
+
+  static requires = [];
+  static hostEvents = [];
+
+  constructor() {
+    super();
+    this.hidden = false;
+    this.disabled = false;
+  }
+
+  /*
+    Lifecycle Callbacks
+  */
+  connectedCallback() {
+    super.connectedCallback();
+    const host = this.host;
+    this.boundHost = host;
+    this.updateHostSupport();
+    if(host){
+      this.modeHandler = () => {
+        this.updateModeVisibility();
+        this.requestUpdate();
+      };
+      host.addEventListener('mode-changed', this.modeHandler);
+      this.hostEventHandler = () => this.requestUpdate();
+      for(const evt of this.constructor.hostEvents || []){
+        host.addEventListener(evt, this.hostEventHandler);
+      }
+      this.updateModeVisibility();
+    }
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if(this.boundHost){
+      if(this.modeHandler) this.boundHost.removeEventListener('mode-changed', this.modeHandler);
+      if(this.hostEventHandler){
+        for(const evt of this.constructor.hostEvents || []){
+          this.boundHost.removeEventListener(evt, this.hostEventHandler);
+        }
+      }
+    }
+    this.modeHandler = null;
+    this.hostEventHandler = null;
+    this.boundHost = null;
+  }
+
+  updated(changed) {
+    super.updated(changed);
+    if(changed.has('hidden')){
+      this.dispatchEvent(new CustomEvent('control_visibility_change', { bubbles: true }));
+    }
+  }
+
+  /*
+    Host Discovery & Support
+  */
+  get host() {
+    if(this.boundHost) return this.boundHost;
+    let current = this.getRootNode();
+    while(current instanceof ShadowRoot){
+      const h = current.host;
+      const found = h?.closest?.('[controlled]') || (h?.hasAttribute?.('controlled') ? h : null);
+      if(found) return found;
+      current = h.getRootNode();
+    }
+    return this.closest('[controlled]');
+  }
+
+  updateHostSupport() {
+    const host = this.host;
+    const required = this.constructor.requires || [];
+    const supported = host && required.every(m => typeof host[m] === 'function');
+    const shouldDisable = !supported;
+    if(this.disabled !== shouldDisable) this.disabled = shouldDisable;
+  }
+
+  updateModeVisibility() {
+    const required = this.constructor.hostMode;
+    if(!required) return;
+    const host = this.host;
+    if(!host) return;
+    /* If the host doesn't track modes (no `mode` property), the control
+       is always visible — mode-restricted controls only filter on hosts
+       that actually have modes. */
+    if(!('mode' in host)) return;
+    const allowed = Array.isArray(required) ? required : [required];
+    const shouldHide = !allowed.includes(host.mode);
+    if(this.hidden !== shouldHide) this.hidden = shouldHide;
+  }
+
+  /*
+    Static Helpers
+  */
+  static load = (() => {
+    const TAG_RE = /<(kc-[a-z][a-z0-9-]*|k-control-group)\b/g;
+    const loaded = new Set();
+
+    const tagToPath = (tag) => {
+      if(tag === 'k-control-group') return '../ControlGroup.js';
+      const pascal = tag.slice('kc-'.length).split('-').map(s => s.charAt(0).toUpperCase() + s.slice(1)).join('');
+      return `./${pascal}.js`;
+    };
+
+    const collectTags = (t, tags = new Set()) => {
+      if(!t) return tags;
+      if(Array.isArray(t)){ t.forEach(i => collectTags(i, tags)); return tags; }
+      if(t.strings){
+        for(const s of t.strings){
+          let m; TAG_RE.lastIndex = 0;
+          while((m = TAG_RE.exec(s)) !== null) tags.add(m[1]);
+        }
+      }
+      if(typeof t === 'object'){
+        for(const v of Object.values(t)){
+          if(v && (Array.isArray(v) || v.strings)) collectTags(v, tags);
+        }
+      }
+      return tags;
+    };
+
+    return async (templates) => {
+      const tags = collectTags(templates);
+      const base = new URL('./', import.meta.url).href;
+      const imports = [];
+      for(const tag of tags){
+        if(loaded.has(tag)) continue;
+        loaded.add(tag);
+        imports.push(import(/* @vite-ignore */ new URL(tagToPath(tag), base).href));
+      }
+      if(imports.length) await Promise.all(imports);
+    };
+  })()
+
+  /*
+    Styles
+  */
+  static styles = css`
+    :host {
+      display: inline-flex;
+    }
+    :host([hidden]) {
+      display: none !important;
+    }
+    :host([disabled]) {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+  `;
+}
+
+customElements.define('kc-control', Control);

package/src/components/controls/CopyCode.js

@@ -0,0 +1,19 @@
+import ButtonControl from './ButtonControl.js';
+import { html } from '../../lit-all.min.js';
+import '../Icon.js';
+
+export default class CopyCode extends ButtonControl {
+  static requires = ['copyToClipboard'];
+  static hostMode = 'code';
+
+  connectedCallback() {
+    super.connectedCallback();
+    if(!this.hasAttribute('title')) this.title = 'Copy Code';
+  }
+
+  handleAction() { this.host?.copyToClipboard?.(); }
+
+  render() { return html`<slot><k-icon name="content_copy"></k-icon></slot>`; }
+}
+
+customElements.define('kc-copy-code', CopyCode);

package/src/components/controls/CreateLink.js

@@ -0,0 +1,63 @@
+import ButtonControl from './ButtonControl.js';
+import { html } from '../../lit-all.min.js';
+import '../Icon.js';
+import Dialog from '../Dialog.js';
+
+export default class CreateLink extends ButtonControl {
+  static requires = ['createLink'];
+  static hostMode = 'visual';
+
+  connectedCallback() {
+    super.connectedCallback();
+    if(!this.hasAttribute('title')) this.title = 'Insert Link';
+  }
+
+  handleAction() {
+    const host = this.host;
+    if(!host) return;
+    const selectedText = host.getSelectedText?.() || '';
+
+    const urlInput = document.createElement('input');
+    urlInput.type = 'text';
+    urlInput.placeholder = 'https://example.com';
+    urlInput.style.cssText = 'padding: 0.5rem; border: 1px solid var(--c_border); border-radius: var(--radius); font: inherit;';
+
+    const textInput = document.createElement('input');
+    textInput.type = 'text';
+    textInput.placeholder = 'Enter link text';
+    textInput.value = selectedText;
+    textInput.style.cssText = 'padding: 0.5rem; border: 1px solid var(--c_border); border-radius: var(--radius); font: inherit;';
+
+    const content = document.createElement('div');
+    content.className = 'p';
+    content.style.cssText = 'display: flex; flex-direction: column; gap: 1rem;';
+    content.innerHTML = `
+      <div style="display: flex; flex-direction: column; gap: 0.5rem;">
+        <label style="font-weight: bold;">URL</label>
+      </div>
+      <div style="display: flex; flex-direction: column; gap: 0.5rem;">
+        <label style="font-weight: bold;">Link Text</label>
+      </div>
+    `;
+    content.children[0].appendChild(urlInput);
+    content.children[1].appendChild(textInput);
+
+    Dialog.create(content, {
+      title: 'Create Link',
+      cancelText: 'Cancel',
+      confirmText: 'Insert Link',
+      confirmClasses: 'success ml',
+      confirmAction: (event) => {
+        const url = urlInput.value.trim();
+        const text = textInput.value.trim();
+        if(!url){ event.keepDialogOpen = true; return; }
+        if(host.selection && (!text || text === selectedText)) host.createLink(url);
+        else host.createLinkWithText?.(url, text || url);
+      }
+    });
+  }
+
+  render() { return html`<slot><k-icon name="link"></k-icon></slot>`; }
+}
+
+customElements.define('kc-create-link', CreateLink);

package/src/components/controls/EditorTheme.js

@@ -0,0 +1,71 @@
+import Control from './Control.js';
+import { html, css } from '../../lit-all.min.js';
+import '../Icon.js';
+
+export default class EditorTheme extends Control {
+  static requires = ['setEditorTheme'];
+  static hostMode = 'code';
+  static hostEvents = ['editor-theme-changed'];
+
+  static properties = {
+    ...Control.properties,
+    value: { type: String, state: true }
+  };
+
+  constructor() {
+    super();
+    this.value = 'auto';
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    if(this.host) this.value = this.host.editorTheme || 'auto';
+  }
+
+  willUpdate(changed) {
+    super.willUpdate?.(changed);
+    if(this.host) this.value = this.host.editorTheme || 'auto';
+  }
+
+  handleChange = e => { this.host?.setEditorTheme?.(e.target.value); };
+
+  static styles = [
+    Control.styles,
+    css`
+      :host {
+        position: relative;
+        background-color: var(--input_bg);
+        color: var(--input_tc);
+        border: var(--input_border_width) solid var(--c_input_border);
+        border-radius: var(--radius);
+        transition: box-shadow var(--animation_ms);
+        margin-right: var(--spacer_q);
+      }
+      k-icon {
+        position: absolute;
+        left: 0.5rem;
+        top: 50%;
+        transform: translateY(-50%);
+        pointer-events: none;
+      }
+      select {
+        border: 0;
+        padding: var(--spacer_h) 1rem var(--spacer_h) 2rem;
+        min-height: 2.5rem;
+      }
+    `
+  ];
+
+  render() {
+    return html`
+      <k-icon name="contrast"></k-icon>
+      <select .value=${this.value} @change=${this.handleChange} title="Editor Theme">
+        <option value="auto">Auto</option>
+        <option value="light">Light</option>
+        <option value="dark">Dark</option>
+      </select>
+    `;
+  }
+}
+
+customElements.define('kc-editor-theme', EditorTheme);

package/src/components/controls/FindReplace.js

@@ -0,0 +1,19 @@
+import ButtonControl from './ButtonControl.js';
+import { html } from '../../lit-all.min.js';
+import '../Icon.js';
+
+export default class FindReplace extends ButtonControl {
+  static requires = ['openFind'];
+  static hostMode = 'code';
+
+  connectedCallback() {
+    super.connectedCallback();
+    if(!this.hasAttribute('title')) this.title = 'Find & Replace';
+  }
+
+  handleAction() { this.host?.openFind?.(); }
+
+  render() { return html`<slot><k-icon name="search"></k-icon></slot>`; }
+}
+
+customElements.define('kc-find-replace', FindReplace);