@jinntec/fore 3.0.1 → 3.1.0

package/src/fx-instance.js

@@ -320,7 +320,13 @@ export class FxInstance extends HTMLElement {
       const instanceData = new DOMParser().parseFromString(this.innerHTML, 'application/xml');
       this._setInitialData(instanceData);
     } else if (this.type === 'json') {
-      this._setInitialData(JSON.parse(this.textContent));
+      // Use innerHTML (not textContent) so HTML tags the browser parser consumed as
+      // child elements (e.g. <blockquote> in a string value) are serialized back to text.
+      // Then escape literal control characters that JSON.parse rejects inside strings.
+      const sanitized = this.innerHTML.replace(/("(?:[^"\\]|\\.)*")/gs, match =>
+        match.replace(/\n/g, '\\n').replace(/\r/g, '\\r').replace(/\t/g, '\\t'),
+      );
+      this._setInitialData(JSON.parse(sanitized));
     } else if (this.type === 'html') {
       this._setInitialData(this.firstElementChild.children);
     } else if (this.type === 'text') {

package/src/fx-speech.js

@@ -0,0 +1,268 @@
+// fx-speech.js — Fore-compatible voice input component with focus alignment, restart, repeat/back commands, and visual listening indicator
+class FxSpeech extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this.mode = this.getAttribute('mode') || 'guided';
+    this.currentIndex = 0;
+    this.controls = [];
+    this.recognition = null;
+    this.lastInputCaptured = false;
+    this.awaitingInput = false;
+    this.waitingToAdvance = false;
+  }
+
+  connectedCallback() {
+    this.shadowRoot.innerHTML = `
+      <style>
+        button { margin: 0.5em; padding: 0.5em 1em; font-size: 1em; }
+        #status { display: inline-block; margin-left: 1em; font-weight: bold; color: green; visibility: hidden; }
+        #status.listening { visibility: visible; animation: pulse 1s infinite; }
+        @keyframes pulse {
+          0% { opacity: 0.3; }
+          50% { opacity: 1; }
+          100% { opacity: 0.3; }
+        }
+      </style>
+      <button id="start">🎤 Start Speech Input</button>
+      <button id="retry" style="display:none;">🔁 Continue</button>
+      <span id="status">🎧 Listening…</span>
+    `;
+
+    this.controls = Array.from(document.querySelectorAll('fx-control'));
+    this.initSpeech();
+
+    this.shadowRoot.getElementById('start').addEventListener('click', () => {
+      this.startInteraction();
+    });
+
+    this.shadowRoot.getElementById('retry').addEventListener('click', () => {
+      this.startGuided();
+    });
+
+    document.addEventListener('focusin', e => {
+      const targetControl = e.target.closest('fx-control');
+      if (targetControl) {
+        const index = this.controls.indexOf(targetControl);
+        if (index !== -1) {
+          this.currentIndex = index;
+        }
+      }
+    });
+  }
+
+  initSpeech() {
+    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+    if (!SpeechRecognition) {
+      alert('Web Speech API not supported in this browser.');
+      return;
+    }
+    this.recognition = new SpeechRecognition();
+    this.recognition.lang = 'en-US';
+    this.recognition.interimResults = false;
+    this.recognition.continuous = false;
+
+    this.recognition.onresult = event => {
+      this.lastSpoken = null;
+      const spoken = event.results[0][0].transcript.trim();
+      console.log('Recognized:', spoken);
+      this.lastInputCaptured = true;
+      this.awaitingInput = false;
+      this.toggleListening(false);
+
+      if (this.mode === 'guided') {
+        this.lastSpoken = spoken.toLowerCase();
+        this.applyGuidedInput(this.lastSpoken);
+      } else {
+        this.handleCommandInput(spoken.toLowerCase());
+      }
+    };
+
+    this.recognition.onerror = e => {
+      console.warn('Speech error:', e.error);
+      this.awaitingInput = false;
+      this.toggleListening(false);
+      if (this.mode === 'guided' && !this.waitingToAdvance) this.retryGuided();
+    };
+
+    this.recognition.onend = () => {
+      this.recognitionActive = false;
+      console.log('Recognition ended');
+      this.toggleListening(false);
+      if (this.mode === 'guided') {
+        if (this.lastInputCaptured && !['next', 'back'].includes(this.lastSpoken)) {
+          this.advanceToNextField();
+        } else if (this.awaitingInput && !this.waitingToAdvance) {
+          this.retryGuided();
+        }
+      }
+    };
+
+    this.recognition.onstart = () => {
+      this.recognitionActive = true;
+      console.log('Recognition started');
+      this.toggleListening(true);
+    };
+  }
+
+  toggleListening(state) {
+    const status = this.shadowRoot.getElementById('status');
+    if (state) {
+      status.classList.add('listening');
+    } else {
+      status.classList.remove('listening');
+    }
+  }
+
+  speak(text, callback) {
+    const utterance = new SpeechSynthesisUtterance(text);
+    utterance.onend = async () => {
+      await this.waitForSpeechSynthesisToEnd();
+      if (callback) callback();
+    };
+    speechSynthesis.speak(utterance);
+  }
+
+  async waitForSpeechSynthesisToEnd() {
+    while (speechSynthesis.speaking) {
+      await new Promise(resolve => setTimeout(resolve, 50));
+    }
+  }
+
+  getLabelText(control) {
+    return (
+      control.getAttribute('aria-label') ||
+      control.querySelector('label')?.textContent?.trim() ||
+      'unknown field'
+    );
+  }
+
+  getInputElement(control) {
+    return control.querySelector('input, textarea, select');
+  }
+
+  startInteraction() {
+    this.shadowRoot.getElementById('retry').style.display = 'none';
+    if (this.mode === 'guided') {
+      this.startGuided();
+    } else {
+      this.recognition.start();
+    }
+  }
+
+  startGuided() {
+    this.shadowRoot.getElementById('retry').style.display = 'none';
+    if (this.currentIndex >= this.controls.length) {
+      this.speak('All fields completed.', () => {
+        this.currentIndex = 0;
+        this.shadowRoot.getElementById('start').textContent = '🔁 Restart Speech Input';
+        this.shadowRoot.getElementById('retry').style.display = 'inline-block';
+      });
+      return;
+    }
+    this.lastInputCaptured = false;
+    this.awaitingInput = true;
+    this.waitingToAdvance = false;
+    const control = this.controls[this.currentIndex];
+    const label = this.getLabelText(control);
+    const input = this.getInputElement(control);
+    input?.focus();
+
+    console.log('Prompting for field:', label);
+    this.speak(`Please say value for ${label}`, () => {
+      console.log('Starting recognition for:', label);
+      if (!this.recognitionActive) this.recognition.start();
+    });
+  }
+
+  retryGuided() {
+    this.shadowRoot.getElementById('retry').style.display = 'inline-block';
+    this.awaitingInput = false;
+    this.speak('Please try again or tap continue.');
+  }
+
+  applyGuidedInput(spoken) {
+    if (spoken === 'clear') {
+      const control = this.controls[this.currentIndex];
+      const input = this.getInputElement(control);
+      if (input) {
+        input.value = '';
+        input.dispatchEvent(new Event('input', { bubbles: true }));
+        this.speak('Cleared');
+      }
+      return;
+    }
+    if (spoken === 'next') {
+      this.advanceToNextField();
+      return;
+    }
+    if (spoken === 'repeat') {
+      this.startGuided();
+      return;
+    }
+    if (spoken === 'back') {
+      this.currentIndex = Math.max(0, this.currentIndex - 1);
+      this.startGuided();
+      return;
+    }
+    const control = this.controls[this.currentIndex];
+    const input = this.getInputElement(control);
+    if (input) {
+      input.value = spoken;
+      input.dispatchEvent(new Event('input', { bubbles: true }));
+    }
+  }
+
+  advanceToNextField() {
+    this.waitingToAdvance = true;
+    setTimeout(() => {
+      this.currentIndex++;
+      this.startGuided();
+    }, 1000);
+  }
+
+  handleCommandInput(spoken) {
+    if (spoken.startsWith('skip to')) {
+      const label = spoken.replace('skip to', '').trim();
+      const target = this.controls.find(ctrl => this.getLabelText(ctrl).toLowerCase() === label);
+      if (target) {
+        this.currentIndex = this.controls.indexOf(target);
+        this.getInputElement(target)?.focus();
+        this.speak(`Skipping to ${label}`);
+      } else {
+        this.speak(`Label "${label}" not found.`);
+      }
+      return;
+    }
+
+    if (spoken === 'next') {
+      this.currentIndex++;
+      return;
+    }
+    if (spoken === 'repeat') {
+      this.startGuided();
+      return;
+    }
+    if (spoken === 'back') {
+      this.currentIndex = Math.max(0, this.currentIndex - 1);
+      this.startGuided();
+      return;
+    }
+
+    const [label, ...rest] = spoken.split(' ');
+    const value = rest.join(' ');
+    const target = this.controls.find(ctrl => this.getLabelText(ctrl).toLowerCase() === label);
+    if (target) {
+      const input = this.getInputElement(target);
+      if (input) {
+        input.value = value;
+        input.dispatchEvent(new Event('input', { bubbles: true }));
+        input.focus();
+      }
+    } else {
+      this.speak(`Label "${label}" not found.`);
+    }
+  }
+}
+
+customElements.define('fx-speech', FxSpeech);

package/src/ui/abstract-control.js

@@ -335,17 +335,25 @@ export default class AbstractControl extends UIElement {
   }
 
   // todo - review alert handling altogether. There could be potentially multiple ones in model
+  // TODO: both required and handleValid set valid attrs and aria attrs. Duplicate code
   handleValid() {
     // console.log('mip valid', this.modelItem.required);
 
     // console.log('late modelItem', mi);
-    if (this.isValid() !== this.modelItem.constraint) {
-      if (this.modelItem.constraint) {
+    const hasValue = this.modelItem.value !== '';
+    const isRequired = this.modelItem.required;
+    const isValidAccordingToRequired = isRequired ? hasValue : true;
+    const isValidNow = this.modelItem.constraint && isValidAccordingToRequired;
+
+    if (this.isValid() !== isValidNow) {
+      if (isValidNow) {
         // if (alert) alert.style.display = 'none';
         this._dispatchEvent('valid');
         this.setAttribute('valid', '');
         this.removeAttribute('invalid');
         this.getWidget().setAttribute('aria-invalid', 'false');
+        // also reset other dependent CSS classes
+        this.classList.remove('isEmpty');
       } else {
         this.setAttribute('invalid', '');
         this.getWidget().setAttribute('aria-invalid', 'true');
@@ -379,7 +387,6 @@ export default class AbstractControl extends UIElement {
     // Ensure aria-invalid matches the current control state even if
     // we didn't enter the state-change branch above.
     this._syncAriaInvalid();
-
   }
 
   handleRelevant() {
@@ -400,12 +407,12 @@ export default class AbstractControl extends UIElement {
 
     // Apply attributes
     if (newEnabled) {
-        this.setAttribute('relevant', '');
+      this.setAttribute('relevant', '');
       this.removeAttribute('nonrelevant');
-      } else {
-        this.setAttribute('nonrelevant', '');
+    } else {
+      this.setAttribute('nonrelevant', '');
       this.removeAttribute('relevant');
-      }
+    }
 
     // Dispatch only on actual change
     if (wasEnabled !== newEnabled) {

package/src/ui/fx-case.js

@@ -65,6 +65,7 @@ export class FxCase extends FxContainer {
 
     this.addEventListener('select', async () => {
       const ownerForm = this.getOwnerForm();
+      let target = this;
       if (this.src) {
         // We will replace the node. So this node will be detached after these async function
         // calls. Save all important state first.
@@ -79,9 +80,10 @@ export class FxCase extends FxContainer {
           return;
         }
         await parentNode.replaceCase(this, replacement);
+        target = replacement;
       }
       const model = ownerForm.getModel();
-      ownerForm.addToBatchedNotifications(this);
+      ownerForm.addToBatchedNotifications(target);
       ownerForm.refresh(false);
     });
     this.addEventListener('deselect', (event) => {

package/src/ui/fx-control.js

@@ -441,7 +441,7 @@ export default class FxControl extends XfAbstractControl {
     }
 
     // ### when there's a src Fore is used as widget and will be loaded from external file
-    if (this.src && !this.loaded && this.modelItem.relevant) {
+    if (this.src && !this.loaded && !this.loading && this.modelItem.relevant) {
       // ### evaluate initial data if necessary
 
       if (this.initial) {
@@ -449,9 +449,11 @@ export default class FxControl extends XfAbstractControl {
         // console.log('initialNodes', this.initialNode);
       }
 
+      this.loading = true;
       // ### load the markup from src
       await this._loadForeFromSrc();
       this.loaded = true;
+      this.loading = false;
 
       // ### replace default instance of embedded Fore with initial nodes
       // const innerInstance = this.querySelector('fx-instance');
@@ -577,7 +579,7 @@ export default class FxControl extends XfAbstractControl {
     } finally {
       this._isRefreshing = false;
     }
-    Fore.refreshChildren(this, force);
+    await Fore.refreshChildren(this, force);
   }
 
   /**

package/src/ui/fx-group.js

@@ -93,7 +93,7 @@ class FxGroup extends FxContainer {
     super.refresh(force);
     // Make the maybe filtered refresh an unconditional forced refresh: This fx-group changes the
     // context item
-    Fore.refreshChildren(this, !!force);
+    return Fore.refreshChildren(this, !!force);
   }
 
   // todo: this code should go

package/src/ui/fx-output.js

@@ -119,49 +119,19 @@ export class FxOutput extends XfAbstractControl {
     // }
 
     if (this.mediatype === 'html') {
-      if (this.modelItem.node) {
-        const defaultSlot = this.shadowRoot.querySelector('#default');
-        const { node } = this.modelItem;
-        if (node.nodeType) {
-          valueWrapper.append(node);
-          // this.appendChild(node);
+      // JSON instances use a lens, so modelItem.node is null — fall back to this.value
+      const source = this.modelItem.node ?? this.value;
+      if (source) {
+        if (source.nodeType) {
+          valueWrapper.append(source);
           return;
         }
-
-        // ### try to parse as string
-        const tmpDoc = new DOMParser().parseFromString(node, 'text/html');
-        const theNode = tmpDoc.body.childNodes;
-        // console.log('actual node', theNode)
-        Array.from(theNode).forEach(n => {
+        // parse string as HTML
+        const tmpDoc = new DOMParser().parseFromString(source, 'text/html');
+        Array.from(tmpDoc.body.childNodes).forEach(n => {
           valueWrapper.append(n);
         });
-        // valueWrapper.append(theNode);
-
-        // valueWrapper.innerHTML=node;
-        /*
-        if (node.nodeType) {
-          this.appendChild(node);
-          return;
-        }
-        Object.entries(node).map(obj => {
-          // valueWrapper.appendChild(obj[1]);
-          this.appendChild(obj[1]);
-        });
-*/
-        /*
-        Object.entries(node).map(obj => {
-          // valueWrapper.appendChild(obj[1]);
-          this.appendChild(obj[1]);
-        });
-*/
-
-        return;
       }
-
-      // this.innerHTML = this.value.outerHTML;
-      // valueWrapper.innerHTML = this.value.outerHTML;
-
-      // this.shadowRoot.appendChild(this.value);
       return;
     }
 

package/src/ui/fx-repeat-attributes.js

@@ -344,7 +344,7 @@ export class FxRepeatAttributes extends withDraggability(RepeatBase, false) {
     // Fore.refreshChildren(clone,true);
     const fore = this.getOwnerForm();
     if (!fore.lazyRefresh || force) {
-      Fore.refreshChildren(this, force);
+      await Fore.refreshChildren(this, force);
     }
     // this.style.display = 'block';
     // this.style.display = this.display;

package/src/ui/fx-repeat.js

@@ -1035,7 +1035,7 @@ export class FxRepeat extends withDraggability(UIElement, false) {
 
     const fore = this.getOwnerForm();
     if (!fore.lazyRefresh || force) {
-      Fore.refreshChildren(this, force);
+      await Fore.refreshChildren(this, force);
     }
 
     this.setIndex(this.index);

package/src/ui/repeat-base.js

@@ -127,7 +127,7 @@ export class RepeatBase extends withDraggability(UIElement, false) {
     // if (!fore.lazyRefresh || force) {
     if (!fore.lazyRefresh || force) {
       // Turn the possibly conditional force refresh into a forced one: we changed our children
-      Fore.refreshChildren(this, force);
+      await Fore.refreshChildren(this, force);
     }
     // this.style.display = 'block';
     // this.style.display = this.display;
@@ -477,9 +477,9 @@ export class RepeatBase extends withDraggability(UIElement, false) {
               // Create a ModelItem only for the final node; children never get their own opNum
               modelItem = FxBind.createModelItem(ref, node, child, null);
               modelItem.parentModelItem = parentModelItem;
-            // IMPORTANT: keep using the canonical instance returned by registerModelItem.
-            // Otherwise a throwaway ModelItem can leak into observer graphs and be notified.
-            modelItem = this.getModel().registerModelItem(modelItem);
+              // IMPORTANT: keep using the canonical instance returned by registerModelItem.
+              // Otherwise a throwaway ModelItem can leak into observer graphs and be notified.
+              modelItem = this.getModel().registerModelItem(modelItem);
             }
 
             // Always apply Dewey rewrite (handles both $inst and instance('inst') forms)