@octolearn/training-ui 0.1.0 → 0.2.0

package/dist/chunks/{define-elements-BKBBQkbv.js → define-elements-CeSpZJXj.js}

@@ -1,7 +1,7 @@
 var _a;
 import { html, svg, css, unsafeCSS, LitElement, nothing } from "lit";
 import { property, state, query } from "lit/decorators.js";
-import { g as getSpeechController, A as ANSWER_EVENT, D as DONT_KNOW_ANSWER } from "./core-DR1lxtEg.js";
+import { g as getSpeechController, S as SpeechController, A as ANSWER_EVENT, D as DONT_KNOW_ANSWER } from "./core-rJUDTpGS.js";
 import { styleMap } from "lit/directives/style-map.js";
 import { repeat } from "lit/directives/repeat.js";
 import { live } from "lit/directives/live.js";
@@ -16,7 +16,8 @@ const paths = {
   },
   check: { box: 22, body: svg`<path d="M4 11.5l5 5 9-11"></path>` },
   cross: { box: 30, body: svg`<path d="M8 8l14 14M22 8L8 22"></path>` },
-  arrow: { box: 22, body: svg`<path d="M4 11h14M12 5l6 6-6 6"></path>` }
+  arrow: { box: 22, body: svg`<path d="M4 11h14M12 5l6 6-6 6"></path>` },
+  zoom: { box: 24, body: svg`<circle cx="10.5" cy="10.5" r="6.5"></circle><path d="M15.5 15.5L21 21M10.5 7.5v6M7.5 10.5h6"></path>` }
 };
 function dIcon(name, size, strokeWidth = 3) {
   const { box, body } = paths[name];
@@ -49,6 +50,7 @@ const de = {
   stop: "Sprachausgabe stoppen",
   playHintMessage: "Dein Browser benötigt eine Interaktion, bevor Audio abgespielt werden kann.",
   playHintButton: "Abspielen",
+  noVoiceMessage: "Dein Gerät hat keine Stimme für {language}, deshalb klingt das Wort falsch. Füge in den Sprachausgabe-Einstellungen deines Geräts eine Stimme für {language} hinzu.",
   feedbackCorrect: "Richtige Antwort",
   feedbackWrong: "Falsche Antwort",
   yourAnswer: "Deine Antwort",
@@ -84,6 +86,8 @@ const de = {
   pictureAlt: "Bild zur Aufgabe",
   pictureCaptionVocabulary: "Bild zur Vokabelaufgabe",
   pictureCaptionRiddle: "Bilderrätsel: Was ist auf dem Bild zu sehen?",
+  enlargePicture: "Bild vergrößern",
+  closePicture: "Großes Bild schließen",
   enterPictureVocabulary: "Vokabel zu diesem Bild eingeben",
   enterPictureRiddle: "Eingeben, was auf dem Bild zu sehen ist",
   arithmeticHeading: "Rechenaufgabe",
@@ -219,6 +223,7 @@ const en = {
   stop: "Stop dictation",
   playHintMessage: "Your browser requires interaction before playing audio.",
   playHintButton: "Play",
+  noVoiceMessage: "Your device has no {language} voice, so the word sounds wrong. Add a {language} voice in your device's speech settings.",
   feedbackCorrect: "Correct answer",
   feedbackWrong: "Wrong answer",
   yourAnswer: "Your answer",
@@ -254,6 +259,8 @@ const en = {
   pictureAlt: "Picture for the task",
   pictureCaptionVocabulary: "Picture for the vocabulary task",
   pictureCaptionRiddle: "Picture riddle: what can you see in the picture?",
+  enlargePicture: "Enlarge picture",
+  closePicture: "Close the large picture",
   enterPictureVocabulary: "Enter the vocabulary word for this picture",
   enterPictureRiddle: "Enter what you see in the picture",
   arithmeticHeading: "Arithmetic task",
@@ -727,6 +734,83 @@ const baseStyles = [
     }
   `
 ];
+const SHORT_VIEWPORT_PX = 520;
+class ViewportWatcher {
+  constructor() {
+    this.listeners = /* @__PURE__ */ new Set();
+    this.viewport = null;
+    this.current = false;
+    this.onResize = () => {
+      const short = ViewportWatcher.measure(this.viewport);
+      if (short === this.current) {
+        return;
+      }
+      this.current = short;
+      for (const listener of [...this.listeners]) {
+        listener(short);
+      }
+    };
+  }
+  /** The visible area is short right now (false without a visual viewport, e.g. old browsers). */
+  get short() {
+    return this.listeners.size > 0 ? this.current : ViewportWatcher.measure(ViewportWatcher.visualViewport());
+  }
+  /** Calls `listener` whenever `short` flips; returns the function that ends it. */
+  subscribe(listener) {
+    if (this.listeners.size === 0) {
+      this.attach();
+    }
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+      if (this.listeners.size === 0) {
+        this.detach();
+      }
+    };
+  }
+  attach() {
+    this.viewport = ViewportWatcher.visualViewport();
+    this.current = ViewportWatcher.measure(this.viewport);
+    this.viewport?.addEventListener("resize", this.onResize);
+  }
+  detach() {
+    this.viewport?.removeEventListener("resize", this.onResize);
+    this.viewport = null;
+    this.current = false;
+  }
+  static visualViewport() {
+    return typeof window === "undefined" ? null : window.visualViewport ?? null;
+  }
+  /** Height times scale: zooming in with two fingers makes the visual viewport smaller, but the page isn't short. */
+  static measure(viewport) {
+    if (!viewport || !(viewport.height > 0)) {
+      return false;
+    }
+    return viewport.height * (viewport.scale || 1) < SHORT_VIEWPORT_PX;
+  }
+}
+let defaultWatcher;
+function getViewportWatcher() {
+  defaultWatcher ??= new ViewportWatcher();
+  return defaultWatcher;
+}
+function revealAtTop(element) {
+  element.scrollIntoView({ block: "start" });
+  const offset = typeof window === "undefined" ? 0 : window.visualViewport?.offsetTop ?? 0;
+  if (offset > 0) {
+    window.scrollBy(0, -offset);
+  }
+}
+function hasFocusInside(element) {
+  let active = document.activeElement;
+  while (active) {
+    if (active === element) {
+      return true;
+    }
+    active = active.shadowRoot?.activeElement ?? null;
+  }
+  return false;
+}
 var __defProp$i = Object.defineProperty;
 var __decorateClass$i = (decorators, target, key, kind) => {
   var result = void 0;
@@ -737,6 +821,21 @@ var __decorateClass$i = (decorators, target, key, kind) => {
   return result;
 };
 const _OctolearnElement = class _OctolearnElement extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.short = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    const watcher = getViewportWatcher();
+    this.endViewportWatch = watcher.subscribe((short) => this.short = short);
+    this.short = watcher.short;
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.endViewportWatch?.();
+    this.endViewportWatch = void 0;
+  }
   get resolvedLanguage() {
     return this.language ? toTrainingLanguage(this.language) : resolveLanguage(this);
   }
@@ -761,6 +860,9 @@ __decorateClass$i([
 __decorateClass$i([
   property({ reflect: true })
 ], OctolearnElement.prototype, "theme");
+__decorateClass$i([
+  property({ type: Boolean, reflect: true })
+], OctolearnElement.prototype, "short");
 const dParts = css`
   :focus-visible {
     outline: 4px solid ${d.ink};
@@ -948,6 +1050,60 @@ const dParts = css`
     }
   }
 
+  :host([short]) .prompt {
+    font-size: 18px;
+    line-height: 1.15;
+  }
+
+  :host([short]) .field {
+    height: 52px;
+    padding: 0 6px 0 14px;
+    border-radius: 16px;
+    box-shadow: 0 0 0 4px ${d.cream};
+  }
+
+  :host([short]) .field input {
+    font-size: 24px;
+  }
+
+  /* the field's label as placeholder ("Schreib das Wort"): readable, not answer-sized */
+  :host([short]) .field input::placeholder {
+    font-size: 14px;
+    font-weight: 600;
+    letter-spacing: 0;
+  }
+
+  :host([short]) .pill {
+    min-height: 40px;
+    padding: 0 14px;
+    font-size: 14px;
+  }
+
+  :host([short]) .listen {
+    width: 48px;
+    height: 48px;
+  }
+
+  :host([short]) .listen.medium {
+    width: 44px;
+    height: 44px;
+  }
+
+  :host([short]) .listen.small {
+    width: 40px;
+    height: 40px;
+  }
+
+  :host([short]) .listen .d-icon {
+    width: 24px;
+    height: 24px;
+  }
+
+  :host([short]) .listen.small .d-icon {
+    width: 20px;
+    height: 20px;
+  }
+
   kbd {
     padding: 2px 8px;
     border: 1.5px solid ${d.openStar};
@@ -1053,13 +1209,39 @@ const questionStyles = css`
       font-size: 22px;
     }
   }
+
+  /* a phone's keyboard is open */
+  :host([short]) .question {
+    gap: 10px;
+  }
+
+  :host([short]) .row {
+    gap: 10px;
+  }
+
+  :host([short]) .big {
+    font-size: 30px;
+  }
+
+  :host([short]) .big.sentence {
+    font-size: 18px;
+  }
+
+  :host([short]) .instruction {
+    font-size: 15px;
+  }
+
+  :host([short]) .play-hint {
+    padding: 8px 12px;
+    font-size: 14px;
+  }
 `;
 const _QuestionElement = class _QuestionElement extends OctolearnElement {
   constructor() {
     super(...arguments);
     this.noKeys = false;
+    this.noAutofocus = false;
     this.needsGesture = false;
-    this.autofocusAnswer = false;
     this.speech = getSpeechController();
   }
   connectedCallback() {
@@ -1092,6 +1274,9 @@ const _QuestionElement = class _QuestionElement extends OctolearnElement {
         </div>` : nothing;
   }
   updated(changed) {
+    if (this.short && (changed.has("short") || changed.has("content"))) {
+      void this.revealWhenFocused();
+    }
     if (!changed.has("content")) {
       return;
     }
@@ -1103,11 +1288,30 @@ const _QuestionElement = class _QuestionElement extends OctolearnElement {
       "octolearn-tile-answer, octolearn-true-false, octolearn-flashcard"
     );
     if (field) {
-      if (this.autofocusAnswer) {
+      if (!this.noAutofocus) {
         void field.updateComplete.then(() => field.focus());
       }
     }
   }
+  /** After the field took the focus (autofocus waits for the field's own update) and the layout settled. */
+  async revealWhenFocused() {
+    await this.updateComplete;
+    await new Promise((resolve) => requestAnimationFrame(resolve));
+    if (this.short && this.isConnected && hasFocusInside(this)) {
+      revealAtTop(this.closestCard() ?? this);
+    }
+  }
+  /** The `<octolearn-card>` around the question, across shadow roots. */
+  closestCard() {
+    let node = this.parentNode;
+    while (node) {
+      if (node instanceof Element && node.localName === "octolearn-card") {
+        return node;
+      }
+      node = node.parentNode ?? (node instanceof ShadowRoot ? node.host : null);
+    }
+    return null;
+  }
   /** Puts the focus on the answer: the field, the first tile or the first button (e.g. when an overlay opens). */
   focusAnswer() {
     this.renderRoot.querySelector(
@@ -1126,6 +1330,9 @@ __decorateClass$h([
 __decorateClass$h([
   property({ attribute: false })
 ], QuestionElement.prototype, "revealFlashcard");
+__decorateClass$h([
+  property({ type: Boolean, attribute: "no-autofocus" })
+], QuestionElement.prototype, "noAutofocus");
 __decorateClass$h([
   state()
 ], QuestionElement.prototype, "needsGesture");
@@ -1315,6 +1522,21 @@ _OctolearnArithmeticQuestion.styles = [
           font-size: 56px;
         }
       }
+
+      /* a phone's keyboard is open */
+      :host([short]) .task {
+        font-size: 40px;
+      }
+
+      :host([short]) .head-row {
+        gap: 8px;
+      }
+
+      :host([short]) .head-row .pill {
+        min-height: 36px;
+        padding: 0 12px;
+        font-size: 13px;
+      }
     `
 ];
 let OctolearnArithmeticQuestion = _OctolearnArithmeticQuestion;
@@ -1499,6 +1721,37 @@ _OctolearnCard.styles = [
           width: 72px;
         }
       }
+
+      /* the on-screen keyboard covers half the screen: only the question and the field; label and stars for screen readers */
+      :host([short]) {
+        scroll-margin-top: 8px;
+      }
+
+      :host([short]) .card {
+        --band-height: 8px;
+        border-radius: 18px;
+      }
+
+      :host([short]) .content {
+        gap: 10px;
+        padding: calc(var(--band-height) + 10px) 14px 12px;
+      }
+
+      :host([short]) .head {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        margin: -1px;
+        padding: 0;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+        border: 0;
+      }
+
+      :host([short]) .inkie {
+        display: none;
+      }
     `
 ];
 let OctolearnCard = _OctolearnCard;
@@ -1544,6 +1797,7 @@ const _OctolearnDictationQuestion = class _OctolearnDictationQuestion extends Qu
     super(...arguments);
     this.settings = false;
     this.noAutospeak = false;
+    this.handleVoicesChanged = () => this.requestUpdate();
   }
   /** Where the keyboard focus belongs when the page's voice settings close. */
   focusSettings() {
@@ -1551,13 +1805,26 @@ const _OctolearnDictationQuestion = class _OctolearnDictationQuestion extends Qu
   }
   /** Reads the word aloud, as the listen button does. */
   speak(reason = "repeat") {
-    this.speakText(this.content?.question, reason, reason === "slow" ? { rate: SLOW_RATE } : {});
+    const lang = this.wordLanguage;
+    this.speakText(this.content?.question, reason, reason === "slow" ? { lang, rate: SLOW_RATE } : { lang });
   }
   stop() {
     if (this.emit("octolearn-stop", {}, { cancelable: true })) {
       this.speech.stop();
     }
   }
+  connectedCallback() {
+    super.connectedCallback();
+    if (SpeechController.supported) {
+      speechSynthesis.addEventListener("voiceschanged", this.handleVoicesChanged);
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (SpeechController.supported) {
+      speechSynthesis.removeEventListener("voiceschanged", this.handleVoicesChanged);
+    }
+  }
   updated(changed) {
     super.updated(changed);
     if (changed.has("content") && !this.noAutospeak) {
@@ -1583,7 +1850,7 @@ const _OctolearnDictationQuestion = class _OctolearnDictationQuestion extends Qu
       const words = content.queryFormat === "WordTiles";
       return html`<section class="root question" lang=${this.resolvedLanguage} aria-labelledby="dictation-heading">
         <h2 id="dictation-heading" class="prompt">${words ? t.promptWordSalad : t.promptLetterSalad}</h2>
-        ${this.playHint(t)}
+        ${this.playHint(t)} ${this.noVoiceHint(t)}
         <div class="row">
           <button type="button" class="listen medium repeat-button" aria-label=${t.listenWord} @click=${this.repeat}>
             ${dIcon("speaker", 36, 3.4)}
@@ -1597,7 +1864,7 @@ const _OctolearnDictationQuestion = class _OctolearnDictationQuestion extends Qu
       </section>`;
     }
     return html`<section class="root question" lang=${this.resolvedLanguage} aria-labelledby="dictation-heading">
-      ${this.playHint(t)}
+      ${this.playHint(t)} ${this.noVoiceHint(t)}
       <div class="row">
         <button type="button" class="listen repeat-button" aria-label=${t.listenWord} @click=${this.repeat}>
           ${dIcon("speaker", 46, 3.4)}
@@ -1612,6 +1879,20 @@ const _OctolearnDictationQuestion = class _OctolearnDictationQuestion extends Qu
       ${answer}
     </section>`;
   }
+  /** The word's language: the content's, else German (octolearn's dictations are German). */
+  get wordLanguage() {
+    return this.content?.sourceLanguage?.trim() || "de";
+  }
+  /** Shown once the browser's voice list is known and has no voice for the word's language. */
+  noVoiceHint(t) {
+    const lang = this.wordLanguage;
+    if (this.speech.hasVoiceFor(lang) !== false) {
+      return nothing;
+    }
+    return html`<div class="play-hint no-voice" role="status">
+      <span>${format(t.noVoiceMessage, { language: languageName(lang, this.resolvedLanguage) })}</span>
+    </div>`;
+  }
   controls() {
     const t = this.t;
     return html`<button type="button" class="pill slow-button" @click=${this.slow}>${t.listenSlowly}</button> ${this.settings ? html`<button type="button" class="pill settings-button" aria-haspopup="dialog" @click=${this.openSettings}>${t.settings}</button>` : nothing}`;
@@ -1634,6 +1915,35 @@ _OctolearnDictationQuestion.styles = [
         flex-wrap: wrap;
         gap: 8px;
       }
+
+      /*
+       * a phone's keyboard is open: speaker and prompt side by side, "Langsam anhören" and "Einstellungen" in one slim
+       * row below them (next to the speaker there is no room for both)
+       */
+      :host([short]) .row {
+        flex-wrap: wrap;
+        row-gap: 8px;
+      }
+
+      :host([short]) .stack {
+        display: contents;
+      }
+
+      :host([short]) .stack .prompt {
+        flex: 1 1 0;
+        min-width: 0;
+      }
+
+      :host([short]) .controls {
+        flex: 1 0 100%;
+        gap: 6px;
+      }
+
+      :host([short]) .controls .pill {
+        min-height: 36px;
+        padding: 0 12px;
+        font-size: 13px;
+      }
     `
 ];
 let OctolearnDictationQuestion = _OctolearnDictationQuestion;
@@ -3647,7 +3957,54 @@ __decorateClass$a([
 __decorateClass$a([
   state()
 ], OctolearnMultipleChoice.prototype, "chosen");
+var __defProp$9 = Object.defineProperty;
+var __decorateClass$9 = (decorators, target, key, kind) => {
+  var result = void 0;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(target, key, result) || result;
+  if (result) __defProp$9(target, key, result);
+  return result;
+};
 const _OctolearnPictureQuestion = class _OctolearnPictureQuestion extends QuestionElement {
+  constructor() {
+    super(...arguments);
+    this.zoomed = false;
+  }
+  /** Shows the picture large (same as tapping it). */
+  enlargePicture() {
+    this.zoomed = true;
+  }
+  /** Closes the large picture. */
+  closePicture() {
+    this.zoomed = false;
+  }
+  willUpdate(changed) {
+    super.willUpdate(changed);
+    if (changed.has("content")) {
+      this.zoomed = false;
+    }
+  }
+  updated(changed) {
+    super.updated(changed);
+    const dialog = this.zoomDialog;
+    if (!dialog) {
+      return;
+    }
+    if (this.zoomed && !dialog.open) {
+      if (typeof dialog.showModal === "function") {
+        dialog.showModal();
+      } else {
+        dialog.setAttribute("open", "");
+      }
+    } else if (!this.zoomed && dialog.open) {
+      if (typeof dialog.close === "function") {
+        dialog.close();
+      } else {
+        dialog.removeAttribute("open");
+      }
+    }
+  }
   render() {
     const content = this.content;
     if (!content) {
@@ -3657,8 +4014,14 @@ const _OctolearnPictureQuestion = class _OctolearnPictureQuestion extends Questi
     const lang = this.resolvedLanguage;
     const vocabulary = content.isItVocabulary === true;
     const choice = content.queryFormat === "MultipleChoice";
+    const src = content.question ?? "";
+    const alt = vocabulary ? t.pictureCaptionVocabulary : t.pictureCaptionRiddle;
     const picture = html`<figure class="frame">
-      <img src=${content.question ?? ""} alt=${vocabulary ? t.pictureCaptionVocabulary : t.pictureCaptionRiddle} />
+      <button type="button" class="enlarge" aria-haspopup="dialog" title=${t.enlargePicture} @click=${this.enlargePicture}>
+        <img src=${src} alt=${alt} />
+        <span class="badge" aria-hidden="true">${dIcon("zoom", 22, 2.6)}</span>
+        <span class="visually-hidden">${t.enlargePicture}</span>
+      </button>
     </figure>`;
     const answer = answerSection({
       content,
@@ -3674,8 +4037,22 @@ const _OctolearnPictureQuestion = class _OctolearnPictureQuestion extends Questi
     return html`<section class="root question" lang=${lang} aria-labelledby="picture-heading">
       <h2 id="picture-heading" class="prompt">${vocabulary ? vocabularyPrompt(content, lang, t) : t.promptPicture}</h2>
       ${choice ? html`<div class="centered">${picture}</div>` : nothing} ${answer}
+      <dialog class="zoom" aria-label=${alt} @click=${this.closePicture} @keydown=${this.onZoomKeydown} @close=${this.onZoomClosed}>
+        ${this.zoomed ? html`<div class="stage"><img src=${src} alt=${alt} /></div>
+              <button type="button" class="close" aria-label=${t.closePicture} title=${t.closePicture}>${dIcon("cross", 26, 3.4)}</button>` : nothing}
+      </dialog>
     </section>`;
   }
+  onZoomKeydown(event) {
+    event.stopPropagation();
+    if (event.key === "Escape") {
+      event.preventDefault();
+      this.zoomed = false;
+    }
+  }
+  onZoomClosed() {
+    this.zoomed = false;
+  }
 };
 _OctolearnPictureQuestion.styles = [
   QuestionElement.styles,
@@ -3703,6 +4080,96 @@ _OctolearnPictureQuestion.styles = [
         border-radius: 14px;
       }
 
+      .enlarge {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        padding: 0;
+        border: 0;
+        border-radius: 14px;
+        background: none;
+        cursor: zoom-in;
+      }
+
+      .enlarge .badge {
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 36px;
+        height: 36px;
+        border: 2px solid ${d.frameLine};
+        border-radius: 999px;
+        background: ${d.creamLight};
+        color: ${d.ink};
+        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
+      }
+
+      .enlarge:hover .badge {
+        background: ${d.cream};
+      }
+
+      .zoom {
+        position: fixed;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        max-width: none;
+        max-height: none;
+        margin: 0;
+        padding: 0;
+        border: 0;
+        background: transparent;
+        cursor: zoom-out;
+      }
+
+      .zoom::backdrop {
+        background: ${d.backdrop};
+        -webkit-backdrop-filter: blur(4px);
+        backdrop-filter: blur(4px);
+      }
+
+      .zoom .stage {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        padding: 24px;
+      }
+
+      .zoom img {
+        display: block;
+        max-width: min(92vw, 1100px);
+        max-height: 86vh;
+        object-fit: contain;
+        border: 3px solid ${d.frameLine};
+        border-radius: 24px;
+        background: ${d.creamLight};
+      }
+
+      .zoom .close {
+        position: fixed;
+        top: 16px;
+        right: 16px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 52px;
+        height: 52px;
+        padding: 0;
+        border: 2px solid ${d.ink};
+        border-radius: 999px;
+        background: ${d.paper};
+        color: ${d.ink};
+        cursor: pointer;
+      }
+
       .centered {
         display: flex;
         justify-content: center;
@@ -3725,16 +4192,47 @@ _OctolearnPictureQuestion.styles = [
           height: 180px;
         }
       }
+
+      /* a phone's keyboard is open: a small picture left of the field (a tap still shows it large) */
+      :host([short]) .frame {
+        align-self: center;
+        width: 88px;
+        height: 88px;
+        padding: 4px;
+        border-width: 2px;
+        border-radius: 16px;
+      }
+
+      :host([short]) .frame img,
+      :host([short]) .enlarge {
+        border-radius: 10px;
+      }
+
+      :host([short]) .enlarge .badge {
+        width: 26px;
+        height: 26px;
+      }
+
+      :host([short]) .enlarge .badge .d-icon {
+        width: 16px;
+        height: 16px;
+      }
     `
 ];
 let OctolearnPictureQuestion = _OctolearnPictureQuestion;
-var __defProp$9 = Object.defineProperty;
-var __decorateClass$9 = (decorators, target, key, kind) => {
+__decorateClass$9([
+  state()
+], OctolearnPictureQuestion.prototype, "zoomed");
+__decorateClass$9([
+  query("dialog.zoom")
+], OctolearnPictureQuestion.prototype, "zoomDialog");
+var __defProp$8 = Object.defineProperty;
+var __decorateClass$8 = (decorators, target, key, kind) => {
   var result = void 0;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = decorator(target, key, result) || result;
-  if (result) __defProp$9(target, key, result);
+  if (result) __defProp$8(target, key, result);
   return result;
 };
 const _OctolearnProgress = class _OctolearnProgress extends OctolearnElement {
@@ -3834,22 +4332,22 @@ _OctolearnProgress.styles = [
     `
 ];
 let OctolearnProgress = _OctolearnProgress;
-__decorateClass$9([
+__decorateClass$8([
   property({ type: Number })
 ], OctolearnProgress.prototype, "current");
-__decorateClass$9([
+__decorateClass$8([
   property({ type: Number })
 ], OctolearnProgress.prototype, "total");
-__decorateClass$9([
+__decorateClass$8([
   property({ attribute: false })
 ], OctolearnProgress.prototype, "results");
-var __defProp$8 = Object.defineProperty;
-var __decorateClass$8 = (decorators, target, key, kind) => {
+var __defProp$7 = Object.defineProperty;
+var __decorateClass$7 = (decorators, target, key, kind) => {
   var result = void 0;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = decorator(target, key, result) || result;
-  if (result) __defProp$8(target, key, result);
+  if (result) __defProp$7(target, key, result);
   return result;
 };
 const ELEMENT_BY_FORMAT = {
@@ -3903,6 +4401,7 @@ class OctolearnQuestion extends OctolearnElement {
           .content=${this.content}
           .strings=${this.strings}
           lang=${lang}
+          ?no-autofocus=${this.noAutofocus}
           ?no-keys=${this.noKeys}
         ></octolearn-arithmetic-question>`;
       case "octolearn-dictation-question":
@@ -3912,6 +4411,7 @@ class OctolearnQuestion extends OctolearnElement {
           lang=${lang}
           ?settings=${this.settings}
           ?no-autospeak=${this.noAutospeak}
+          ?no-autofocus=${this.noAutofocus}
           ?no-keys=${this.noKeys}
         ></octolearn-dictation-question>`;
       case "octolearn-picture-question":
@@ -3919,6 +4419,7 @@ class OctolearnQuestion extends OctolearnElement {
           .content=${this.content}
           .strings=${this.strings}
           lang=${lang}
+          ?no-autofocus=${this.noAutofocus}
           ?no-keys=${this.noKeys}
         ></octolearn-picture-question>`;
       default:
@@ -3933,41 +4434,25 @@ class OctolearnQuestion extends OctolearnElement {
     }
   }
 }
-__decorateClass$8([
+__decorateClass$7([
   property({ attribute: false })
 ], OctolearnQuestion.prototype, "content");
-__decorateClass$8([
+__decorateClass$7([
   property({ type: Boolean })
 ], OctolearnQuestion.prototype, "settings");
-__decorateClass$8([
+__decorateClass$7([
   property({ type: Boolean, attribute: "no-autospeak" })
 ], OctolearnQuestion.prototype, "noAutospeak");
-__decorateClass$8([
+__decorateClass$7([
   property({ type: Boolean, attribute: "no-autofocus" })
 ], OctolearnQuestion.prototype, "noAutofocus");
-__decorateClass$8([
+__decorateClass$7([
   property({ type: Boolean, attribute: "no-keys" })
 ], OctolearnQuestion.prototype, "noKeys");
-__decorateClass$8([
+__decorateClass$7([
   property({ attribute: false })
 ], OctolearnQuestion.prototype, "revealFlashcard");
-var __defProp$7 = Object.defineProperty;
-var __decorateClass$7 = (decorators, target, key, kind) => {
-  var result = void 0;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = decorator(target, key, result) || result;
-  if (result) __defProp$7(target, key, result);
-  return result;
-};
 class OctolearnQuestionAnswer extends QuestionElement {
-  constructor() {
-    super(...arguments);
-    this.noAutofocus = false;
-  }
-  willUpdate() {
-    this.autofocusAnswer = !this.noAutofocus;
-  }
   render() {
     const content = this.content;
     if (!content) {
@@ -4030,9 +4515,6 @@ class OctolearnQuestionAnswer extends QuestionElement {
     }
   }
 }
-__decorateClass$7([
-  property({ type: Boolean, attribute: "no-autofocus" })
-], OctolearnQuestionAnswer.prototype, "noAutofocus");
 var __defProp$6 = Object.defineProperty;
 var __decorateClass$6 = (decorators, target, key, kind) => {
   var result = void 0;
@@ -4061,13 +4543,19 @@ const _OctolearnTextAnswer = class _OctolearnTextAnswer extends OctolearnElement
     const t = this.t;
     const empty = this.value.trim() === "";
     const keyHint = t.pressKeyOr.split("{key}");
+    const short = this.short;
+    const placeholder = short && this.visibleLabel ? this.label : this.placeholder;
+    const send = html`<button type="submit" class="send-round" aria-label=${t.done} title=${t.done} ?disabled=${empty}>
+      ${dIcon("check", 22, 3.4)}
+    </button>`;
     const input = html`<input
       id="answer"
       class=${this.variant === "box" ? "box" : ""}
       .type=${this.type}
       inputmode=${this.type === "number" ? "numeric" : "text"}
+      enterkeyhint="done"
       .value=${live(this.value)}
-      placeholder=${this.placeholder || nothing}
+      placeholder=${placeholder || nothing}
       lang=${this.inputLang ?? nothing}
       autocomplete="off"
       autocapitalize="off"
@@ -4075,30 +4563,35 @@ const _OctolearnTextAnswer = class _OctolearnTextAnswer extends OctolearnElement
       spellcheck="false"
       @input=${this.onInput}
     />`;
-    const label = html`<label for="answer" class=${this.visibleLabel ? "field-label" : "visually-hidden"}>${this.label}</label>`;
+    const label = html`<label for="answer" class=${this.visibleLabel && !short ? "field-label" : "visually-hidden"}>${this.label}</label>`;
+    const field = html`<div class="field">${input}${short ? send : nothing}</div>`;
     return html`<div class="root" lang=${this.resolvedLanguage}>
       <form novalidate @submit=${this.onSubmit}>
         ${this.renderHint()}
-        ${this.variant === "box" ? html`<div class="equation"><slot name="before"></slot>${label}${input}</div>` : this.variant === "media" ? html`<div class="with-media">
+        ${this.variant === "box" ? html`<div class="equation"><slot name="before"></slot>${label}${input}${short ? send : nothing}</div>` : this.variant === "media" ? html`<div class="with-media">
                 <slot name="media"></slot>
-                <div class="labelled grow">
-                  ${label}
-                  <div class="field">${input}</div>
-                </div>
-              </div>` : html`<div class="labelled">
-                ${label}
-                <div class="field">${input}</div>
-              </div>`}
-        <div class="actions">
-          ${this.noDontKnow ? nothing : html`<button type="button" class="pill dont-know" @click=${this.onDontKnow}>${t.dontKnow}</button>`}
-          <span class="send">
-            <span class="hint keys-only">${keyHint[0]}<kbd>Enter</kbd>${keyHint[1]}</span>
-            <button type="submit" class="pill primary" ?disabled=${empty}>${dIcon("check", 22)} ${t.done}</button>
-          </span>
-        </div>
+                <div class="labelled grow">${label} ${field}</div>
+              </div>` : html`<div class="labelled">${label} ${field}</div>`}
+        ${short ? this.renderShortActions() : this.renderActions(empty, keyHint)}
       </form>
     </div>`;
   }
+  renderActions(empty, keyHint) {
+    const t = this.t;
+    return html`<div class="actions">
+      ${this.noDontKnow ? nothing : html`<button type="button" class="pill dont-know" @click=${this.onDontKnow}>${t.dontKnow}</button>`}
+      <span class="send">
+        <span class="hint keys-only">${keyHint[0]}<kbd>Enter</kbd>${keyHint[1]}</span>
+        <button type="submit" class="pill primary" ?disabled=${empty}>${dIcon("check", 22)} ${t.done}</button>
+      </span>
+    </div>`;
+  }
+  /** Short: the send button is in the field; only "Weiß ich nicht", small, below it. */
+  renderShortActions() {
+    return this.noDontKnow ? nothing : html`<div class="actions">
+          <button type="button" class="dont-know link" @click=${this.onDontKnow}>${this.t.dontKnow}</button>
+        </div>`;
+  }
   renderHint() {
     const letters2 = Array.from((this.hint ?? "").normalize("NFC"));
     if (letters2.length === 0) {
@@ -4265,6 +4758,96 @@ _OctolearnTextAnswer.styles = [
           height: 80px;
           font-size: 48px;
         }
+
+        /* "Weiß ich nicht" and "Fertig" share one row on a 320 px phone */
+        .actions {
+          gap: 8px;
+        }
+
+        .actions .pill {
+          padding: 0 14px;
+        }
+
+        .actions .pill.primary {
+          padding: 0 18px;
+        }
+      }
+
+      /* a phone's keyboard is open */
+      :host([short]) form {
+        gap: 6px;
+      }
+
+      :host([short]) .with-media {
+        flex-direction: row;
+        align-items: center;
+        gap: 10px;
+      }
+
+      :host([short]) .equation {
+        flex-wrap: nowrap;
+        gap: 10px;
+      }
+
+      :host([short]) .box {
+        width: 88px;
+        height: 56px;
+        border-radius: 16px;
+        box-shadow: 0 0 0 4px ${d.cream};
+        font-size: 32px;
+      }
+
+      :host([short]) .fragment {
+        font-size: 26px;
+      }
+
+      :host([short]) .fragment .gap {
+        width: 18px;
+        height: 24px;
+        margin: 0 2px;
+        border-width: 2px;
+        border-radius: 6px;
+        vertical-align: -3px;
+      }
+
+      .send-round {
+        display: inline-flex;
+        flex: none;
+        align-items: center;
+        justify-content: center;
+        width: 40px;
+        height: 40px;
+        padding: 0;
+        border: 0;
+        border-radius: 50%;
+        background: ${d.accent};
+        color: ${d.onAccent};
+      }
+
+      .send-round:disabled {
+        opacity: 0.5;
+      }
+
+      .equation .send-round {
+        width: 48px;
+        height: 48px;
+      }
+
+      :host([short]) .actions {
+        justify-content: flex-start;
+        gap: 0;
+      }
+
+      .dont-know.link {
+        min-height: 40px;
+        padding: 0 4px;
+        border: 0;
+        background: none;
+        color: ${d.inkSoft};
+        font-size: 14px;
+        font-weight: 600;
+        text-decoration: underline;
+        text-underline-offset: 3px;
       }
     `
 ];
@@ -5054,6 +5637,16 @@ _OctolearnTrainerOverlay.styles = [
           padding: 76px 8px 16px;
         }
       }
+
+      /* a phone's keyboard is open: the card at the top, no note over it */
+      :host([short]) .stage {
+        align-items: flex-start;
+        padding: 8px;
+      }
+
+      :host([short]) .status {
+        display: none;
+      }
     `
 ];
 let OctolearnTrainerOverlay = _OctolearnTrainerOverlay;
@@ -5479,13 +6072,16 @@ function defineTrainingElements(options = {}) {
 }
 export {
   AUTO_CONTINUE_MS as A,
-  parseArithmeticTask as B,
-  trainingElements as C,
+  loadFonts as B,
+  parseArithmeticTask as C,
+  trainingElements as D,
   FALSE_ANSWER as F,
   KNOWN_ANSWER as K,
   NOT_KNOWN_ANSWER as N,
   OctolearnArithmeticQuestion as O,
+  SHORT_VIEWPORT_PX as S,
   TRUE_ANSWER as T,
+  ViewportWatcher as V,
   OctolearnCard as a,
   OctolearnDictationQuestion as b,
   OctolearnFeedback as c,
@@ -5509,7 +6105,7 @@ export {
   describeMatchingRound as u,
   describeQuestion as v,
   en as w,
-  languageName as x,
-  letterDiff as y,
-  loadFonts as z
+  getViewportWatcher as x,
+  languageName as y,
+  letterDiff as z
 };