Reading presets

import { A11yComponent, download, escape } from "../../shared/base.js?v=sdou20261029";
export const presets = [
  {
    name: "Comfortable reading",
    description: "Larger type, more space and a shorter line.",
    values: { size: 1.25, leading: 1.9, letter: 0.02, word: 0.04, measure: 60 },
  },
  {
    name: "Low glare",
    description: "A dark surface with clear type and strong links.",
    values: {
      theme: "dark",
      brightness: null,
      contrast: "standard",
      links: true,
    },
  },
  {
    name: "Calmer motion",
    description: "Less movement, clear focus and quieter decoration.",
    values: { motion: "reduce", focus: true, hideDecorative: true },
  },
  {
    name: "Open spacing",
    description: "Generous word, letter and paragraph spacing.",
    values: {
      size: 1.1,
      leading: 1.75,
      letter: 0.12,
      word: 0.16,
      paragraph: 2,
      font: "sans",
    },
  },
];
class PreferenceProfiles extends A11yComponent {
  static styles = new URL("./component.css?v=sdou20261029", import.meta.url).href;
  render() {
    this.resetAll = true;
    this.mount(
      "Start with a comfortable combination.",
      "Presets describe what changes. Choose one, then adjust any setting to suit you.",
      '<div class="profile-grid">' +
        presets
          .map(
            (p, i) =>
              `<button class="profile" type="button" data-profile="${i}" aria-pressed="false"><strong>${escape(p.name)}</strong><small>${escape(p.description)}</small></button>`,
          )
          .join("") +
        '</div><div class="section stack"><h3>Move your preferences.</h3><p class="hint">Export a small JSON file, or import one you saved earlier. The file contains settings only.</p><button type="button" class="button secondary" data-export>Export preferences</button><label class="field-label" for="import-preferences">Import preferences</label><input id="import-preferences" type="file" accept=".json,application/json"><p class="hint" data-active-summary></p></div>',
    );
  }
  initialize() {
    this.q("[data-reset]").textContent = "Reset all preferences";
    this.qa("[data-profile]").forEach((button) =>
      this.on(button, "click", () => {
        const p = presets[Number(button.dataset.profile)];
        this.preferences.set(p.values);
        this.say(
          p.name + " applied. You can change individual settings at any time.",
        );
      }),
    );
    this.on(this.q("[data-export]"), "click", () => {
      download(
        this.preferences.export(),
        "sdou-reading-preferences.json",
        "application/json",
      );
      this.say("Preferences file prepared for download.");
    });
    this.on(this.q("#import-preferences"), "change", async (event) => {
      this.fail("");
      const file = event.target.files?.[0];
      if (!file) return;
      try {
        if (file.size > 10000)
          throw Error("Choose a preferences file smaller than 10 KB.");
        this.preferences.import(await file.text());
        this.say("Preferences imported and applied.");
      } catch (error) {
        this.fail(
          error instanceof SyntaxError
            ? "The file is not valid JSON. Choose a Starlit preferences file."
            : error.message,
        );
      }
      event.target.value = "";
    });
  }
  update() {
    const s = this.preferences.state;
    for (const button of this.qa("[data-profile]")) {
      const active = Object.entries(
        presets[Number(button.dataset.profile)].values,
      ).every(([key, value]) => s[key] === value);
      button.setAttribute("aria-pressed", String(active));
    }
    const summary = this.q("[data-active-summary]");
    if (summary)
      summary.textContent =
        "Current text size " +
        Math.round(s.size * 100) +
        "%, line spacing " +
        s.leading.toFixed(2) +
        " and " +
        s.measure +
        " characters per line.";
  }
}
customElements.define("sdou-preference-profiles", PreferenceProfiles);