kempo-ui 0.4.4 → 0.4.6

package/src/components/Resize.js

@@ -7,7 +7,8 @@ export default class Resize extends ShadowComponent {
 	/* Properties */
 	static properties = {
 		resizing: { type: String, reflect: true },
-		dimention: { type: String, reflect: true }
+		dimention: { type: String, reflect: true },
+		disabled: { type: Boolean, reflect: true }
 	};
 
 	/*
@@ -17,6 +18,7 @@ export default class Resize extends ShadowComponent {
 		super();
 		this.resizing = '';
 		this.dimension = '';
+		this.disabled = false;
 		this.startSize = { width: 0, height: 0 };
 		this.cleanupFuncs = [];
 	}
@@ -35,6 +37,7 @@ export default class Resize extends ShadowComponent {
 		Event Handlers
 	*/
 	dragStartHandler = ({ element }) => {
+		if(this.disabled) return;
 		const { width, height } = this.getBoundingClientRect();
 		this.startSize.width = width;
 		this.startSize.height = height;
@@ -46,14 +49,17 @@ export default class Resize extends ShadowComponent {
 	};
 
 	dragSideHandler = ({ x }) => {
+		if(this.disabled) return;
 		this.style.width = this.startSize.width + x + 'px';
 	};
 
 	dragBottomHandler = ({ y }) => {
+		if(this.disabled) return;
 		this.style.height = this.startSize.height + y + 'px';
 	};
 
 	dragCornerHandler = ({ x, y }) => {
+		if(this.disabled) return;
 		this.style.width = this.startSize.width + x + 'px';
 		this.style.height = this.startSize.height + y + 'px';
 	};
@@ -177,6 +183,16 @@ export default class Resize extends ShadowComponent {
 		: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;
+		}
 	`;
 
 	/*

package/src/components/TextToSpeech.js

@@ -1,5 +1,6 @@
 import { html, css } from '../lit-all.min.js';
 import ShadowComponent from './ShadowComponent.js';
+import { getVoice as getPreferredVoice } from '../utils/voice.js';
 import './Icon.js';
 
 export default class TextToSpeech extends ShadowComponent {
@@ -53,9 +54,19 @@ export default class TextToSpeech extends ShadowComponent {
   }
 
   resolveVoice = () => {
-    if(!this.voice || this.#unsupported) return null;
+    if(this.#unsupported) return null;
+    // Use the explicit `voice` attribute first; if none is set, fall back to
+    // the user's saved preference from the voice utility (so a site-wide
+    // VoiceSelector can drive every TextToSpeech that hasn't opted out).
+    const source = this.voice || getPreferredVoice() || '';
+    if(!source) return null;
     const voices = window.speechSynthesis.getVoices();
-    return voices.find(v => v.name === this.voice) || null;
+    const candidates = source.split(',').map(s => s.trim()).filter(Boolean);
+    for(const name of candidates){
+      const match = voices.find(v => v.name === name);
+      if(match) return match;
+    }
+    return null;
   };
 
   /*

package/src/components/VoiceSelector.js

@@ -0,0 +1,271 @@
+import { html, css } from '../lit-all.min.js';
+import ShadowComponent from './ShadowComponent.js';
+import {
+  getVoice,
+  setVoice,
+  subscribeToVoice,
+  subscribeToAvailableVoices
+} from '../utils/voice.js';
+
+const primaryLang = (tag) => (tag || '').split('-')[0].toLowerCase();
+
+const browserLanguage = () => {
+  if(typeof navigator === 'undefined') return 'en';
+  return primaryLang(navigator.language || 'en') || 'en';
+};
+
+let displayNames = null;
+try {
+  if(typeof Intl !== 'undefined' && Intl.DisplayNames){
+    const locale = (typeof navigator !== 'undefined' && navigator.language) || 'en';
+    displayNames = new Intl.DisplayNames([locale], { type: 'language' });
+  }
+} catch(e) {}
+
+// Cache for native-name lookups (Intl.DisplayNames in the language's own locale)
+// so we don't construct a new instance per option per render.
+const nativeNameCache = new Map();
+const getNativeName = (code) => {
+  if(nativeNameCache.has(code)) return nativeNameCache.get(code);
+  let native = '';
+  try {
+    if(typeof Intl !== 'undefined' && Intl.DisplayNames){
+      const dn = new Intl.DisplayNames([code], { type: 'language' });
+      native = dn.of(code) || '';
+    }
+  } catch(e) {}
+  // Capitalize the first character so dropdown labels look consistent —
+  // Intl.DisplayNames returns "español"/"français" lowercase, which looks
+  // off next to the capitalized localized name.
+  if(native){
+    native = native.charAt(0).toUpperCase() + native.slice(1);
+  }
+  nativeNameCache.set(code, native);
+  return native;
+};
+
+// Render a language code as "Localized (Native)" — e.g. "Spanish (Español)",
+// "Japanese (日本語)". The native name is a deliberate accessibility escape
+// hatch: if the user accidentally has the page in a language they can't read,
+// they can still recognize their own language by its native name. When the
+// localized and native names match (user already in that language) we skip
+// the duplicate.
+const formatLanguage = (code) => {
+  let localized = code;
+  if(displayNames){
+    try {
+      localized = displayNames.of(code) || code;
+    } catch(e) {}
+  }
+  const native = getNativeName(code);
+  if(native && native.toLowerCase() !== localized.toLowerCase()){
+    return `${localized} (${native})`;
+  }
+  return localized;
+};
+
+// Strip the parenthetical "(language (region))" that OS-level voices often
+// append to their name (e.g. "Eddy (German (Germany))" → "Eddy"). The actual
+// `value` we submit to SpeechSynthesis still uses the full name.
+const displayVoiceName = (name) => {
+  const cleaned = name.split('(')[0].trim();
+  return cleaned || name;
+};
+
+export default class VoiceSelector extends ShadowComponent {
+  static properties = {
+    language: { type: String, reflect: true },
+    placeholder: { type: String, reflect: true },
+    disabled: { type: Boolean, reflect: true },
+    voices: { state: true },
+    selected: { state: true },
+    currentLang: { state: true }
+  };
+
+  #unsubVoices = null;
+  #unsubSelected = null;
+  #unsupported = false;
+  #langInitialized = false;
+
+  /*
+    Lifecycle Callbacks
+  */
+  constructor() {
+    super();
+    this.language = '';
+    this.placeholder = 'Browser default';
+    this.disabled = false;
+    this.voices = [];
+    this.selected = '';
+    this.currentLang = '';
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    if(typeof window === 'undefined' || !window.speechSynthesis){
+      this.#unsupported = true;
+      return;
+    }
+    this.#unsubVoices = subscribeToAvailableVoices(list => {
+      this.voices = list;
+      this.#initLanguageOnce();
+    });
+    this.#unsubSelected = subscribeToVoice(name => {
+      this.selected = name || '';
+      // Keep the language dropdown in sync with externally-set voices
+      if(name){
+        const match = this.voices.find(v => v.name === name);
+        if(match && match.lang){
+          this.currentLang = primaryLang(match.lang);
+        }
+      }
+    });
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if(this.#unsubVoices) this.#unsubVoices();
+    if(this.#unsubSelected) this.#unsubSelected();
+    this.#unsubVoices = null;
+    this.#unsubSelected = null;
+  }
+
+  /*
+    Utility
+  */
+  #initLanguageOnce = () => {
+    if(this.#langInitialized || this.voices.length === 0) return;
+    this.#langInitialized = true;
+    // Priority: existing voice's language > attribute > navigator > first available
+    const fromVoice = this.selected
+      ? this.voices.find(v => v.name === this.selected)
+      : null;
+    if(fromVoice && fromVoice.lang){
+      this.currentLang = primaryLang(fromVoice.lang);
+      return;
+    }
+    if(this.language){
+      this.currentLang = primaryLang(this.language);
+      return;
+    }
+    const navLang = browserLanguage();
+    const langs = this.availableLanguages;
+    if(langs.includes(navLang)){
+      this.currentLang = navLang;
+    } else if(langs.length > 0){
+      this.currentLang = langs[0];
+    }
+  };
+
+  get availableLanguages() {
+    const langs = new Set();
+    for(const v of this.voices){
+      if(v.lang) langs.add(primaryLang(v.lang));
+    }
+    return [...langs].sort();
+  }
+
+  get voicesForCurrentLanguage() {
+    if(!this.currentLang) return this.voices;
+    return this.voices.filter(v => primaryLang(v.lang) === this.currentLang);
+  }
+
+  /*
+    Event Handlers
+  */
+  handleLanguageChange = (e) => {
+    if(this.disabled) return;
+    this.currentLang = e.target.value;
+    // If the saved voice no longer exists in this language, clear it
+    const stillValid = this.voicesForCurrentLanguage.some(v => v.name === this.selected);
+    if(!stillValid){
+      setVoice('');
+    }
+  };
+
+  handleVoiceChange = (e) => {
+    if(this.disabled) return;
+    const value = e.target.value;
+    setVoice(value);
+    this.dispatchEvent(new CustomEvent('change', {
+      detail: { voice: value, language: this.currentLang },
+      bubbles: true
+    }));
+  };
+
+  /*
+    Public Methods
+  */
+  refresh = () => {
+    if(this.#unsupported) return;
+    this.voices = window.speechSynthesis.getVoices();
+    this.#initLanguageOnce();
+  };
+
+  /*
+    Rendering
+  */
+  render() {
+    if(this.#unsupported){
+      return html`
+        <select disabled aria-label="Voice selector (unsupported)">
+          <option>Speech synthesis not supported</option>
+        </select>
+      `;
+    }
+    const langs = this.availableLanguages;
+    const voicesInLang = this.voicesForCurrentLanguage;
+    return html`
+      <div class="row">
+        <div class="col" style="min-width: 10rem; flex: 0 0 auto">
+          <select
+            class="lang"
+            aria-label="Language"
+            ?disabled=${this.disabled || langs.length === 0}
+            .value=${this.currentLang}
+            @change=${this.handleLanguageChange}
+          >
+            ${langs.map(code => html`
+              <option value=${code} ?selected=${code === this.currentLang}>${formatLanguage(code)}</option>
+            `)}
+          </select>
+        </div>
+        <div class="col">
+          <select
+            class="voice"
+            aria-label="Voice"
+            ?disabled=${this.disabled}
+            .value=${this.selected}
+            @change=${this.handleVoiceChange}
+          >
+            <option value="">${this.placeholder}</option>
+            ${voicesInLang.map(v => html`
+              <option
+                value=${v.name}
+                ?selected=${v.name === this.selected}
+              >${displayVoiceName(v.name)}</option>
+            `)}
+          </select>
+        </div>
+      </div>
+    `;
+  }
+
+  /*
+    Styles
+  */
+  static styles = css`
+    :host {
+      display: block;
+    }
+    :host([disabled]) {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+    select {
+      width: 100%;
+    }
+  `;
+}
+
+customElements.define('k-voice-selector', VoiceSelector);

package/src/components/markdownEditorControls/Bold.js

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

package/src/components/markdownEditorControls/BulletList.js

@@ -0,0 +1,30 @@
+import MarkdownEditorControl from './MarkdownEditorControl.js';
+import { html } from '../../lit-all.min.js';
+import '../Icon.js';
+
+export default class MarkdownBulletList extends MarkdownEditorControl {
+  constructor() {
+    super();
+    this.label = 'Bulleted list';
+  }
+
+  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_list_bulleted"></k-icon>
+      </button>
+    `;
+  }
+}
+
+customElements.define('k-md-bullet-list', MarkdownBulletList);

package/src/components/markdownEditorControls/Code.js

@@ -0,0 +1,39 @@
+import MarkdownEditorControl from './MarkdownEditorControl.js';
+import { html } from '../../lit-all.min.js';
+import '../Icon.js';
+
+/*
+  Toggle inline code (backticks) for the selection. If the selection spans
+  multiple lines, a triple-backtick fenced block is inserted instead.
+*/
+export default class MarkdownCode extends MarkdownEditorControl {
+  constructor() {
+    super();
+    this.label = 'Code';
+  }
+
+  command() {
+    const sel = this.getSelection();
+    if(sel.text.includes('\n')){
+      this.wrapSelection('```\n', '\n```', 'code');
+    } else {
+      this.wrapSelection('`', '`', 'code');
+    }
+  }
+
+  render() {
+    return html`
+      <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', MarkdownCode);

package/src/components/markdownEditorControls/FormatBlock.js

@@ -0,0 +1,102 @@
+import MarkdownEditorControl from './MarkdownEditorControl.js';
+import { html, css } from '../../lit-all.min.js';
+import '../Icon.js';
+
+/*
+  Heading-block picker designed to go inside a `<k-md-menu>` (or any
+  container that wants menu-item-styled controls). The `tag` attribute
+  selects which heading level to switch the current line(s) to:
+
+    tag="h1" .. "h6" — Heading 1-6 (sets the `#` prefix, swapping any
+                       existing heading level for the new one)
+
+  Renders as a full-width button with an icon and a text label so it reads
+  cleanly as a menu item.
+*/
+const TAG_LABELS = {
+  h1: 'Heading 1',
+  h2: 'Heading 2',
+  h3: 'Heading 3',
+  h4: 'Heading 4',
+  h5: 'Heading 5',
+  h6: 'Heading 6'
+};
+
+const TAG_ICONS = {
+  h1: 'format_h1',
+  h2: 'format_h2',
+  h3: 'format_h3',
+  h4: 'format_h4',
+  h5: 'format_h5',
+  h6: 'format_h6'
+};
+
+export default class MarkdownFormatBlock extends MarkdownEditorControl {
+  static properties = {
+    ...MarkdownEditorControl.properties,
+    tag: { type: String, reflect: true }
+  };
+
+  constructor() {
+    super();
+    this.tag = 'h2';
+    this.label = '';
+  }
+
+  command() {
+    const tag = (this.tag || 'h2').toLowerCase();
+    if(/^h[1-6]$/.test(tag)){
+      const lvl = parseInt(tag.slice(1), 10);
+      this.insertLinePrefix('#'.repeat(lvl) + ' ', /^#{1,6} /);
+    }
+  }
+
+  get #displayLabel() {
+    if(this.label) return this.label;
+    return TAG_LABELS[(this.tag || 'h2').toLowerCase()] || this.tag;
+  }
+
+  get #iconName() {
+    return TAG_ICONS[(this.tag || 'h2').toLowerCase()] || 'format_h2';
+  }
+
+  render() {
+    return html`
+      <button
+        type="button"
+        class=${this.btnClass}
+        title=${this.#displayLabel}
+        aria-label=${this.#displayLabel}
+        @click=${this.handleClick}
+      >
+        <k-icon name=${this.#iconName}></k-icon>
+        <span class="fb-label">${this.#displayLabel}</span>
+      </button>
+    `;
+  }
+
+  static styles = [
+    MarkdownEditorControl.styles,
+    css`
+      :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', MarkdownFormatBlock);

package/src/components/markdownEditorControls/Heading.js

@@ -0,0 +1,45 @@
+import MarkdownEditorControl from './MarkdownEditorControl.js';
+import { html } from '../../lit-all.min.js';
+import '../Icon.js';
+
+/*
+  Heading control. Defaults to H2 (the typical "section title" level inside
+  a comment / chat / form). Override the level with the `level` attribute
+  (1–6) — e.g. <k-md-heading level="3"></k-md-heading>.
+*/
+export default class MarkdownHeading extends MarkdownEditorControl {
+  static properties = {
+    ...MarkdownEditorControl.properties,
+    level: { type: Number, reflect: true }
+  };
+
+  constructor() {
+    super();
+    this.level = 2;
+    this.label = 'Heading';
+  }
+
+  command() {
+    const lvl = Math.min(6, Math.max(1, Number(this.level) || 2));
+    // Pass a replacePattern so clicking a different heading level swaps the
+    // existing one out instead of stacking another `#` group on top.
+    this.insertLinePrefix('#'.repeat(lvl) + ' ', /^#{1,6} /);
+  }
+
+  render() {
+    const iconLevel = Math.min(6, Math.max(1, Number(this.level) || 2));
+    return html`
+      <button
+        type="button"
+        class=${this.btnClass}
+        title="${this.label} ${iconLevel}"
+        aria-label="${this.label} ${iconLevel}"
+        @click=${this.handleClick}
+      >
+        <k-icon name="format_h${iconLevel}"></k-icon>
+      </button>
+    `;
+  }
+}
+
+customElements.define('k-md-heading', MarkdownHeading);