kempo-ui 0.4.20 → 0.4.21

package/src/components/markdownEditorControls/Image.js

@@ -1,250 +0,0 @@
-import MarkdownEditorControl from './MarkdownEditorControl.js';
-import { html, css } from '../../lit-all.min.js';
-import '../Icon.js';
-import '../Dropdown.js';
-import Dialog from '../Dialog.js';
-
-/*
-  Image control. Asks the user for a URL and alt text, then inserts a
-  markdown image (`![alt](url)`) at the cursor.
-
-  The popup type is configurable via the `popup` attribute:
-    popup="dropdown" (default) — anchored popover next to the button
-    popup="dialog"             — modal Dialog centered on the page
-
-  If the user has text selected when they click the button, it's pre-filled
-  into the alt text field.
-*/
-export default class MarkdownImage extends MarkdownEditorControl {
-  static properties = {
-    ...MarkdownEditorControl.properties,
-    popup: { type: String, reflect: true }
-  };
-
-  constructor() {
-    super();
-    this.label = 'Image';
-    this.popup = 'dropdown';
-  }
-
-  /*
-    For dropdown mode the trigger button toggles the dropdown via Dropdown's
-    own click handling — we don't want our base-class handleClick (which
-    calls command()) to fire on top, or it would create a feedback loop.
-    Override command() to do nothing in dropdown mode; the Insert button
-    inside the dropdown drives insertion instead.
-  */
-  command() {
-    if(this.popup === 'dialog') this.#openDialog();
-  }
-
-  #insert(url, alt) {
-    if(!url) return false;
-    this.editor?.replaceSelection(`![${alt}](${url})`, { selectInserted: false });
-    return true;
-  }
-
-  /*
-    Dropdown flow — inline popover form.
-  */
-  handleDropdownOpened = () => {
-    requestAnimationFrame(() => {
-      this.#urlInput?.focus();
-      // Pre-fill alt text with the current selection (if any).
-      const sel = this.getSelection();
-      if(this.#altInput) this.#altInput.value = sel.text || '';
-    });
-  };
-
-  handleDropdownClosed = () => {
-    if(this.#urlInput) this.#urlInput.value = '';
-    if(this.#altInput) this.#altInput.value = '';
-  };
-
-  handleFormKeydown = (e) => {
-    if(e.key === 'Enter'){
-      e.preventDefault();
-      this.#submitFromDropdown();
-    } else if(e.key === 'Escape'){
-      this.shadowRoot?.querySelector('k-dropdown')?.close();
-    }
-  };
-
-  handleInsertClick = () => this.#submitFromDropdown();
-
-  handleCancelClick = () => {
-    this.shadowRoot?.querySelector('k-dropdown')?.close();
-  };
-
-  #submitFromDropdown() {
-    const url = this.#urlInput?.value.trim() || '';
-    const alt = this.#altInput?.value.trim() || '';
-    if(!url){
-      this.#urlInput?.focus();
-      return;
-    }
-    this.#insert(url, alt);
-    this.shadowRoot?.querySelector('k-dropdown')?.close();
-  }
-
-  get #urlInput() { return this.shadowRoot?.querySelector('.image-url'); }
-  get #altInput() { return this.shadowRoot?.querySelector('.image-alt'); }
-
-  /*
-    Dialog flow — modal version, kept for consumers who want it.
-  */
-  #openDialog() {
-    const editor = this.editor;
-    if(!editor) return;
-    const sel = this.getSelection();
-
-    const urlInput = document.createElement('input');
-    urlInput.type = 'url';
-    urlInput.placeholder = 'https://example.com/image.png';
-    urlInput.required = true;
-    urlInput.style.cssText = 'padding: 0.5rem; border: 1px solid var(--c_border); border-radius: var(--radius); font: inherit;';
-
-    const altInput = document.createElement('input');
-    altInput.type = 'text';
-    altInput.placeholder = 'Description for screen readers';
-    altInput.value = sel.text || '';
-    altInput.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.25rem;">
-        <label style="font-weight: bold;">Image URL</label>
-      </div>
-      <div style="display: flex; flex-direction: column; gap: 0.25rem;">
-        <label style="font-weight: bold;">Alt text</label>
-      </div>
-    `;
-    content.children[0].appendChild(urlInput);
-    content.children[1].appendChild(altInput);
-
-    Dialog.create(content, {
-      title: 'Insert Image',
-      cancelText: 'Cancel',
-      confirmText: 'Insert',
-      confirmClasses: 'success ml',
-      confirmAction: (event) => {
-        const url = urlInput.value.trim();
-        if(!url){
-          event.keepDialogOpen = true;
-          urlInput.focus();
-          return;
-        }
-        this.#insert(url, altInput.value.trim());
-      }
-    });
-    queueMicrotask(() => urlInput.focus());
-  }
-
-  render() {
-    if(this.popup === 'dialog'){
-      return html`
-        <button
-          type="button"
-          class=${this.btnClass}
-          title=${this.label}
-          aria-label=${this.label}
-          @click=${this.handleClick}
-        >
-          <k-icon name="image"></k-icon>
-        </button>
-      `;
-    }
-    return html`
-      <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 = [
-    MarkdownEditorControl.styles,
-    css`
-      .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', MarkdownImage);

package/src/components/markdownEditorControls/Italic.js

@@ -1,30 +0,0 @@
-import MarkdownEditorControl from './MarkdownEditorControl.js';
-import { html } from '../../lit-all.min.js';
-import '../Icon.js';
-
-export default class MarkdownItalic extends MarkdownEditorControl {
-  constructor() {
-    super();
-    this.label = 'Italic (Cmd/Ctrl+I)';
-  }
-
-  command() {
-    this.wrapSelection('_', '_', 'italic text');
-  }
-
-  render() {
-    return html`
-      <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', MarkdownItalic);

package/src/components/markdownEditorControls/Link.js

@@ -1,74 +0,0 @@
-import MarkdownEditorControl from './MarkdownEditorControl.js';
-import { html } from '../../lit-all.min.js';
-import '../Icon.js';
-
-/*
-  Link control. Wraps the selection in `[text](url)`. If the user has selected
-  text it becomes the link text and the URL placeholder is selected for them
-  to overtype. If nothing is selected, a `link text` placeholder is used and
-  the user can tab through to the URL.
-*/
-export default class MarkdownLink extends MarkdownEditorControl {
-  constructor() {
-    super();
-    this.label = 'Link';
-  }
-
-  command() {
-    const sel = this.getSelection();
-    const editor = this.editor;
-    if(!editor) return;
-    const ta = editor.textarea;
-    if(!ta) return;
-
-    const fireInput = (next, selStart, selEnd) => {
-      ta.value = next;
-      ta.selectionStart = selStart;
-      ta.selectionEnd = selEnd;
-      ta.focus();
-      editor.value = next;
-      ta.dispatchEvent(new Event('input', { bubbles: true }));
-    };
-
-    // Toggle: if the selection (or just the cursor) sits anywhere inside an
-    // existing `[label](url)`, unwrap that whole link to just its label. This
-    // works whether the user has the label, the URL, or nothing selected —
-    // they just have to be somewhere inside the link.
-    const re = /\[([^\]]*)\]\([^)]*\)/g;
-    let m;
-    while((m = re.exec(ta.value)) !== null){
-      const matchStart = m.index;
-      const matchEnd = matchStart + m[0].length;
-      if(sel.start >= matchStart && sel.end <= matchEnd){
-        const label = m[1];
-        const next = ta.value.substring(0, matchStart) + label + ta.value.substring(matchEnd);
-        fireInput(next, matchStart, matchStart + label.length);
-        return;
-      }
-    }
-
-    // Otherwise insert a new link with the URL portion pre-selected so the
-    // user can immediately overtype it.
-    const text = sel.text || 'link text';
-    const inserted = `[${text}](url)`;
-    const next = ta.value.substring(0, sel.start) + inserted + ta.value.substring(sel.end);
-    const urlStart = sel.start + 1 + text.length + 2; // past `[text](`
-    fireInput(next, urlStart, urlStart + 'url'.length);
-  }
-
-  render() {
-    return html`
-      <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', MarkdownLink);

package/src/components/markdownEditorControls/MarkdownEditorControl.js

@@ -1,158 +0,0 @@
-import ShadowComponent from '../ShadowComponent.js';
-import { html, css } from '../../lit-all.min.js';
-
-/*
-  Base class for <k-markdown-editor> control buttons. Subclass and override
-  `command()` (or `render()` for custom UI) to wire up a toolbar button to a
-  text manipulation. The editor is found via closest('k-markdown-editor');
-  helper methods on the editor (wrapSelection, insertLinePrefix,
-  replaceSelection, insertAtCursor) handle the textarea selection math.
-
-  Mirrors HtmlEditorControl in spirit, scoped to MarkdownEditor.
-*/
-
-export default class MarkdownEditorControl extends ShadowComponent {
-  static properties = {
-    btnClass: { type: String, attribute: 'btn-class' },
-    label: { type: String, reflect: true },
-    hidden: { type: Boolean, reflect: true }
-  };
-
-  constructor() {
-    super();
-    this.btnClass = 'no-btn ctrl';
-    this.label = '';
-    this.hidesInPreviewMode = true;
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    const editor = this.editor;
-    if(!editor) return;
-    this.boundEditor = editor;
-    this.modeHandler = () => {
-      const shouldHide = this.hidesInPreviewMode && this.boundEditor.mode === 'preview';
-      if(this.hidden !== shouldHide){
-        this.hidden = shouldHide;
-      }
-    };
-    // Reflect initial state
-    this.modeHandler();
-    editor.addEventListener('mode-change', this.modeHandler);
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    if(this.boundEditor && this.modeHandler){
-      this.boundEditor.removeEventListener('mode-change', this.modeHandler);
-    }
-    this.boundEditor = null;
-    this.modeHandler = null;
-  }
-
-  /*
-    Editor lookup. `closest()` works when the control is slotted in light
-    DOM (the most common case). When the control is rendered as slot
-    fallback content it lives inside the editor's own shadow root, where
-    `closest()` can't cross the shadow boundary — fall through to the
-    shadow root's host in that case.
-  */
-  get editor() {
-    const direct = this.closest('k-markdown-editor');
-    if(direct) return direct;
-    const root = this.getRootNode();
-    if(root instanceof ShadowRoot && root.host?.tagName === 'K-MARKDOWN-EDITOR'){
-      return root.host;
-    }
-    return null;
-  }
-
-  /*
-    Convenience helpers — subclasses use these in `command()` to manipulate
-    the editor's textarea. Each is a thin pass-through with a guard.
-  */
-  wrapSelection(prefix, suffix, placeholder) {
-    this.editor?.wrapSelection(prefix, suffix, placeholder);
-  }
-
-  insertAtCursor(text) {
-    this.editor?.insertAtCursor(text);
-  }
-
-  insertLinePrefix(prefix, replacePattern) {
-    this.editor?.insertLinePrefix(prefix, replacePattern);
-  }
-
-  replaceInSelectedLines(pattern, replacement) {
-    this.editor?.replaceInSelectedLines(pattern, replacement);
-  }
-
-  replaceSelection(text, options) {
-    this.editor?.replaceSelection(text, options);
-  }
-
-  getSelection() {
-    return this.editor?.getSelection() || { start: 0, end: 0, text: '' };
-  }
-
-  /*
-    Override in subclasses to do the work. Default no-op.
-  */
-  command() {}
-
-  handleClick = (e) => {
-    e.preventDefault();
-    if(this.hidden) return;
-    this.command();
-  };
-
-  /*
-    Default render: a button with the provided label (or whatever you slot
-    in). Subclasses can override for custom UI (icon button, dropdown, etc.).
-  */
-  render() {
-    return html`
-      <button
-        type="button"
-        class=${this.btnClass}
-        title=${this.label}
-        aria-label=${this.label}
-        @click=${this.handleClick}
-      >
-        <slot>${this.label}</slot>
-      </button>
-    `;
-  }
-
-  static styles = css`
-    :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', MarkdownEditorControl);

package/src/components/markdownEditorControls/Menu.js

@@ -1,86 +0,0 @@
-import MarkdownEditorControl from './MarkdownEditorControl.js';
-import { html, css } from '../../lit-all.min.js';
-import '../Icon.js';
-import '../Dropdown.js';
-
-/*
-  Menu control. Renders as a single toolbar button that, when clicked, opens
-  a Dropdown containing whatever child controls have been slotted in. Useful
-  for grouping less-frequent actions (like the heading picker) so they don't
-  take up space in the main toolbar.
-
-  The trigger button content is fully customizable via the `trigger` slot —
-  drop in whatever combination of icons / text you want. If nothing is
-  slotted, a default `menu` icon is shown.
-
-  The default slot is the menu's items.
-
-  Example (default trigger):
-    <k-md-menu label="Heading">
-      <k-md-format-block tag="h1"></k-md-format-block>
-      ...
-    </k-md-menu>
-
-  Example (custom trigger showing a heading-range icon):
-    <k-md-menu label="Heading">
-      <span slot="trigger">
-        <k-icon name="format_h1"></k-icon> - <k-icon name="format_h6"></k-icon>
-      </span>
-      <k-md-format-block tag="h1"></k-md-format-block>
-      ...
-    </k-md-menu>
-*/
-export default class MarkdownMenu extends MarkdownEditorControl {
-  constructor() {
-    super();
-    this.label = 'Menu';
-  }
-
-  /*
-    The trigger is wired to Dropdown's own click handling, so the
-    base-class handleClick (which calls command()) would fire on top and
-    create a feedback loop. command() is a no-op here; child controls inside
-    the dropdown drive their own commands.
-  */
-  command() {}
-
-  render() {
-    return html`
-      <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 = [
-    MarkdownEditorControl.styles,
-    css`
-      :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', MarkdownMenu);

package/src/components/markdownEditorControls/NumberedList.js

@@ -1,69 +0,0 @@
-import MarkdownEditorControl from './MarkdownEditorControl.js';
-import { html } from '../../lit-all.min.js';
-import '../Icon.js';
-
-/*
-  Numbered list control. Prefixes each non-empty selected line with `N. `
-  using sequential numbers. Markdown renderers accept all-1. as well, but
-  numbering them properly keeps the source readable.
-*/
-export default class MarkdownNumberedList extends MarkdownEditorControl {
-  constructor() {
-    super();
-    this.label = 'Numbered list';
-  }
-
-  command() {
-    const editor = this.editor;
-    if(!editor) return;
-    const ta = editor.textarea;
-    if(!ta) return;
-    if(editor.mode !== 'write') editor.mode = 'write';
-    editor.updateComplete.then(() => {
-      ta.focus();
-      const { selectionStart: start, selectionEnd: end, value } = ta;
-      const lineStart = value.lastIndexOf('\n', start - 1) + 1;
-      const lineEndIdx = value.indexOf('\n', end);
-      const lineEnd = lineEndIdx === -1 ? value.length : lineEndIdx;
-      const block = value.substring(lineStart, lineEnd);
-      const lines = block.split('\n');
-      const numbered = /^\d+\. /;
-      const nonEmpty = lines.filter(l => l.length > 0);
-      const allNumbered = nonEmpty.length > 0 && nonEmpty.every(l => numbered.test(l));
-      let processed;
-      if(allNumbered){
-        processed = lines.map(l => l.replace(numbered, ''));
-      } else {
-        let n = 1;
-        processed = lines.map(l => {
-          if(!l) return l;
-          const stripped = l.replace(numbered, '');
-          return `${n++}. ${stripped}`;
-        });
-      }
-      const nextBlock = processed.join('\n');
-      const next = value.substring(0, lineStart) + nextBlock + value.substring(lineEnd);
-      ta.value = next;
-      ta.selectionStart = lineStart;
-      ta.selectionEnd = lineStart + nextBlock.length;
-      editor.value = next;
-      ta.dispatchEvent(new Event('input', { bubbles: true }));
-    });
-  }
-
-  render() {
-    return html`
-      <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', MarkdownNumberedList);

package/src/components/markdownEditorControls/Quote.js

@@ -1,30 +0,0 @@
-import MarkdownEditorControl from './MarkdownEditorControl.js';
-import { html } from '../../lit-all.min.js';
-import '../Icon.js';
-
-export default class MarkdownQuote extends MarkdownEditorControl {
-  constructor() {
-    super();
-    this.label = 'Quote';
-  }
-
-  command() {
-    this.insertLinePrefix('> ');
-  }
-
-  render() {
-    return html`
-      <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', MarkdownQuote);