From 4aa3686fabc49dd9c1b00e8a26b3ad18e884ec56 Mon Sep 17 00:00:00 2001
From: Amphiluke <amphiluke@gmail.com>
Date: Fri, 1 Dec 2023 21:04:15 +0700
Subject: [PATCH] File handling

---
 .eslintrc.cjs                       |   3 +
 package-lock.json                   |   4 +-
 package.json                        |   2 +-
 public/app-icons/doc-icon.png       | Bin 0 -> 1347 bytes
 src/App.vue                         |   4 +
 src/components/PanelCollections.vue |  13 +-
 src/components/PanelExporting.vue   | 106 ----------------
 src/components/PanelSettings.vue    |   2 +-
 src/components/PanelSharing.vue     | 179 ++++++++++++++++++++++++++++
 src/components/ThePopover.vue       |   8 +-
 src/components/TheSidebar.vue       |   8 +-
 src/manifest.webmanifest            |  19 ++-
 src/pwaCtrl.mjs                     |  36 ++++++
 src/styles/interface.module.css     |   4 +
 src/styles/main.css                 |   4 +
 src/sw.js                           |   3 +-
 16 files changed, 276 insertions(+), 119 deletions(-)
 create mode 100644 public/app-icons/doc-icon.png
 delete mode 100644 src/components/PanelExporting.vue
 create mode 100644 src/components/PanelSharing.vue

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 92590e8..203abcc 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -14,6 +14,9 @@ module.exports = {
     ecmaVersion: 2022,
     sourceType: "module",
   },
+  globals: {
+    __PACKAGE_VERSION__: "readonly",
+  },
   plugins: [
     "@stylistic/js",
     "vue",
diff --git a/package-lock.json b/package-lock.json
index d5ac7ab..e3f773d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "lindsvg-pwa",
-  "version": "2.0.2",
+  "version": "2.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "lindsvg-pwa",
-      "version": "2.0.2",
+      "version": "2.1.0",
       "dependencies": {
         "@vueuse/core": "^10.6.1",
         "lindsvg": "^1.3.2",
diff --git a/package.json b/package.json
index 746589b..b0f2e62 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "lindsvg-pwa",
   "private": true,
-  "version": "2.0.2",
+  "version": "2.1.0",
   "type": "module",
   "scripts": {
     "lint": "eslint \"src/**/*.{mjs,vue}\"",
diff --git a/public/app-icons/doc-icon.png b/public/app-icons/doc-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..cd710224ceacfeeae7e02262878d82afaa0d1cb5
GIT binary patch
literal 1347
zcmeAS@N?(olHy`uVBq!ia0y~yU<5K58911MRQ8&P5FoWHz$e5NNdKn>U|7Yl=jEPt
zPu6K{*I4*q;mo@;P4}2S`S#?~?@!t1vMVlC2yGC0|Lc9ov5-^mPW|}%W76$O&%Zyv
z_4!u!&2E>2F1+h``)~DI?6ol3ZIo~-L1v50s~@i}f4qF))q&kFcDG({ExJ&Yb|y`4
zm)@LvbG#3G|NQ%t_sZ04pzFm;g8YIR{;WPCF3k4v`TZLc)m6_X#!s1iE-8+KA@8##
z0|Seqr;B4q#jQ7YZ%(@8Aky&AFCwk{`ekPUjzsr_12?aJuh%v0^q3wivf^syiT|-`
zM_KEcrmo7f00kZzh*-UkCw>lF(256NTz_m@)>R<M_NY@~PsqBf@ztNdU1rIDb!ugl
zt4;7qt@c&vkLDV;v)WaZ|E*tjWvcf2qu%1DCVH>m_rH!?Z>sddoEN6QFZzfliG7`I
zds9G5eO2QcUU{L|6)9Fzwk}u}Q=y*ycADND-{@;`n&OA<zpr0vyFtqOAJ3ktcP=!)
z{(m`1V`uTxLo1)iZBbt~$vRMvWztL4Tf(0HMvX;|MZR-?oBWFCxTroi+skjK!p?o?
zdX^X{&wc5AEVn^p|G%IGf8;t;9-AFl^Fi7nWnHlG$sN22HUGFSU6J$@Y+yKbD6rw)
z*0T;q%&%{rpY-dGxc=Kp@dr`2T_$B_&Td;Gb!(aGOpn_!!VL^83Ji=K4-y+3twp1m
zbv92Hu5R!wE6d~+NLOdS$DZN6Dw|ipdsQ<3g^3|Kyced1%!cSFuwa~&m$tROA=G@b
zOi9Dmy-YJW92l4c8W`Bc6Xb5%yb*e!xM`+*M1$@&mK$vlJq`^2nQgY4eO29T(s%C$
z^PMebx~iAW`|PUa7kqim1a?TkDTc{63X*w0$Vlg@mP$*{Tg#Z2boj__hBn>TOt*7l
z#Xr=}mSF_hG{wr{f}u?mvrTE)hZNoqHw;<svEF#^c%npv-wA9KP))|)r5j(y8I||$
zz3chxp2e@DzZr6WR=aQ1b71%>3^b+T66=oKHwii`3zONmvx_ZQ?fZKTx6Dy9OOQW6
zhLl{{D0!Q?$J(s@@8Xp&<hPxaJ-YrF*q;kh7^hwH4Z2)$d9v++;60gHcU882v2)1W
zei9h^ED8=QnR%kjYK<L|=Ixz)CHC}$8H~SlXE&BJZu@aMw}}1Q^jQ!$HW;x>xR}MC
zW$;YdG5tzyipLp-cxCDT^O(K<t9XEeljVovyJcc&4T0sC7uz04F28(&XTyoUWB1rK
z{_X<C94O2mls9ZUI&J^;?G|qsmflx&gXq(6Z@5>Qrm^zm*3ACG>M~(Z-o3Khx6fCW
z*|Ec#NyfY3QvY4uzYkLR-SW@R?Z3B;KYo6_&XJn+4`27(|DW%tYJPRz46k=CJ3lxT
z9d7-02%J`(H1=-^zs0<I;~ya{@wijBZZuaX7*5;z{Zwm|LiXXzMch+;_MeOj2=;5)
zwD9^HcjMTO$Se8ZQk+-Z*}-+h`{2}~C%qLfopuJT?`YR5ed_boXHRihDBsmRyV<ou
zpN9NBv^xLLgGK9Nc606Z6le)w#j!Q~;m=NyH&1M8LW7ZW@%`J)&P*Ty$N%xOYe1zU
a!vUt#&+gTVt@hpv;(5CIxvX<aXaWFX3U@95

literal 0
HcmV?d00001

diff --git a/src/App.vue b/src/App.vue
index 09a58dc..06c9b47 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,11 @@
 <script setup>
+import {onMounted} from "vue";
+import {applyLaunchParams} from "./pwaCtrl.mjs";
 import PlotArea from "./components/PlotArea.vue";
 import TheSidebar from "./components/TheSidebar.vue";
 import ThePopover from "./components/ThePopover.vue";
+
+onMounted(() => applyLaunchParams());
 </script>
 
 <template>
diff --git a/src/components/PanelCollections.vue b/src/components/PanelCollections.vue
index 4f94eb2..7942b27 100644
--- a/src/components/PanelCollections.vue
+++ b/src/components/PanelCollections.vue
@@ -1,5 +1,5 @@
 <script setup>
-import {ref, computed} from "vue";
+import {ref, computed, onMounted} from "vue";
 import {refDebounced} from "@vueuse/core";
 import {useCollectionsStore, isUserDefined, USER_DEFINED_COLLECTION_ID} from "../stores/collections.mjs";
 import {useLSystemStore} from "../stores/lSystem.mjs";
@@ -51,6 +51,15 @@ function addLSystem() {
 function deleteLSystem(lid) {
   collectionsStore.deleteLSystem(lid);
 }
+
+onMounted(() => {
+  let searchParams = new URLSearchParams(location.search);
+  let cid = searchParams.get("cid");
+  let lid = searchParams.get("lid");
+  if (cid && lid) {
+    plot(cid, lid);
+  }
+});
 </script>
 
 <template>
@@ -177,7 +186,7 @@ function deleteLSystem(lid) {
 
   .collectionName {
     background: var(--color-surface);
-    box-shadow: 0 4px 7px 2px var(--color-surface), 0 -4px 0 0 var(--color-surface);
+    box-shadow: 0 4px 7px 2px var(--color-surface);
     margin-block: 0 8px;
     padding-block: 13px 5px;
     position: sticky;
diff --git a/src/components/PanelExporting.vue b/src/components/PanelExporting.vue
deleted file mode 100644
index 702bd2f..0000000
--- a/src/components/PanelExporting.vue
+++ /dev/null
@@ -1,106 +0,0 @@
-<script setup>
-import {computed, useCssModule} from "vue";
-import {useCollectionsStore, isUserDefined} from "../stores/collections.mjs";
-import {useLSystemStore} from "../stores/lSystem.mjs";
-import {useObjectUrl} from "@vueuse/core";
-import interfaceStyles from "../styles/interface.module.css";
-import panelStyles from "../styles/panel.module.css";
-
-let collectionsStore = useCollectionsStore();
-let lSystemStore = useLSystemStore();
-let cssModule = useCssModule();
-
-let svgBlob = computed(() => new Blob([lSystemStore.svgCode], {type: "image/svg+xml"}));
-let svgURL = useObjectUrl(svgBlob);
-
-let permalink = computed(() => {
-  if (!collectionsStore.selectedCID || !collectionsStore.selectedLID || isUserDefined(collectionsStore.selectedCID)) {
-    return "";
-  }
-  let {location} = window;
-  let url = new URL(location.origin + location.pathname);
-  url.searchParams.set("cid", collectionsStore.selectedCID);
-  url.searchParams.set("lid", collectionsStore.selectedLID);
-  return url.toString();
-});
-
-async function copyPermalink({target}) {
-  await navigator.clipboard.writeText(permalink.value);
-  target.classList.add(cssModule.copySuccess);
-  setTimeout(() => target.classList.remove(cssModule.copySuccess), 4000);
-}
-</script>
-
-<template>
-  <section :class="panelStyles.panel">
-    <h2 :class="panelStyles.title">
-      Exporting
-    </h2>
-    <form
-      action="#"
-      :class="[panelStyles.body, interfaceStyles.thinScroll]"
-      @submit.prevent
-    >
-      <p>
-        <a
-          :href="svgURL"
-          :download="(collectionsStore.selectedLID || 'l-system') + '.svg'"
-        >
-          Download SVG…
-        </a>
-      </p>
-
-      <hr>
-
-      <label>
-        <b>Permalink for the selected L-system</b><br>
-        <textarea
-          :class="$style.permalinkField"
-          :value="permalink"
-          readonly
-          @click="$event.target.select()"
-        />
-      </label>
-      <button
-        :class="[interfaceStyles.button, $style.permalinkCopyButton]"
-        :disabled="!permalink"
-        @click="copyPermalink"
-      >
-        <span :class="$style.permalinkCopyReady">Copy</span>
-        <span :class="$style.permalinkCopyDone">Copied!</span>
-      </button>
-      <small :class="$style.permalinkNote">
-        Note that permalinks are only available for L-systems from the predefined collections.
-        Any manual changes in an L-system parameters are ignored.
-      </small>
-    </form>
-  </section>
-</template>
-
-<style module>
-  .permalinkField {
-    box-sizing: border-box;
-    height: 55px;
-    margin-top: 10px;
-    resize: vertical;
-    width: 100%;
-  }
-
-  .permalinkCopyButton {
-    margin: 5px 0;
-    width: 100%;
-
-    &.copySuccess {
-      pointer-events: none;
-    }
-
-    &:not(.copySuccess) .permalinkCopyDone,
-    &.copySuccess .permalinkCopyReady {
-      display: none;
-    }
-  }
-
-  .permalinkNote {
-    color: var(--color-on-surface-mid);
-  }
-</style>
diff --git a/src/components/PanelSettings.vue b/src/components/PanelSettings.vue
index c51dd38..4542cd8 100644
--- a/src/components/PanelSettings.vue
+++ b/src/components/PanelSettings.vue
@@ -194,7 +194,7 @@ function plot() {
 
     &:has([data-label="B"]),
     &:has([data-label="F"]) {
-      background: rgb(from var(--color-accent) r g b / calc(alpha - 0.92));
+      background: rgb(from var(--color-accent) r g b / 0.08);
     }
   }
 
diff --git a/src/components/PanelSharing.vue b/src/components/PanelSharing.vue
new file mode 100644
index 0000000..6f4b56a
--- /dev/null
+++ b/src/components/PanelSharing.vue
@@ -0,0 +1,179 @@
+<script setup>
+import {computed, useCssModule} from "vue";
+import {useCollectionsStore, isUserDefined} from "../stores/collections.mjs";
+import {useLSystemStore} from "../stores/lSystem.mjs";
+import {useInterfaceStore} from "../stores/interface.mjs";
+import {useObjectUrl, useFileDialog} from "@vueuse/core";
+import interfaceStyles from "../styles/interface.module.css";
+import panelStyles from "../styles/panel.module.css";
+
+let collectionsStore = useCollectionsStore();
+let lSystemStore = useLSystemStore();
+let interfaceStore = useInterfaceStore();
+let cssModule = useCssModule();
+
+let fileDialog = useFileDialog({accept: ".lsvg", multiple: false, reset: true});
+fileDialog.onChange(async ([file]) => {
+  try {
+    let config = JSON.parse(await file.text());
+    lSystemStore.setup(config);
+    lSystemStore.buildSVG();
+  } catch (error) {
+    interfaceStore.requestPopover({text: "Unfortunately, this file cannot be opened"});
+    console.error("Unable to open the file", error);
+  }
+});
+
+let svgBlob = computed(() => new Blob([lSystemStore.svgCode], {type: "image/svg+xml"}));
+let svgURL = useObjectUrl(svgBlob);
+
+let lsvgBlob = computed(() => {
+  let lsvg = JSON.stringify({
+    _version: __PACKAGE_VERSION__,
+    axiom: lSystemStore.axiom,
+    alpha: lSystemStore.alpha,
+    theta: lSystemStore.theta,
+    step: lSystemStore.step,
+    iterations: lSystemStore.iterations,
+    rules: lSystemStore.rules,
+    attributes: lSystemStore.attributes,
+  });
+  return new Blob([lsvg], {type: "application/json"});
+});
+let lsvgURL = useObjectUrl(lsvgBlob);
+
+let permalink = computed(() => {
+  if (!collectionsStore.selectedCID || !collectionsStore.selectedLID || isUserDefined(collectionsStore.selectedCID)) {
+    return "";
+  }
+  let {location} = window;
+  let url = new URL(location.origin + location.pathname);
+  url.searchParams.set("cid", collectionsStore.selectedCID);
+  url.searchParams.set("lid", collectionsStore.selectedLID);
+  return url.toString();
+});
+
+async function copyPermalink({target}) {
+  await navigator.clipboard.writeText(permalink.value);
+  target.classList.add(cssModule.copySuccess);
+  setTimeout(() => target.classList.remove(cssModule.copySuccess), 4000);
+}
+</script>
+
+<template>
+  <section :class="panelStyles.panel">
+    <h2 :class="panelStyles.title">
+      Sharing
+    </h2>
+    <form
+      action="#"
+      :class="[panelStyles.body, interfaceStyles.thinScroll]"
+      @submit.prevent
+    >
+      <div :class="$style.fileControls">
+        <h3>Open file…</h3>
+        <button
+          type="button"
+          :class="[interfaceStyles.button, $style.fileButton]"
+          @click="fileDialog.open"
+        >
+          LSVG
+        </button>
+
+        <h3>Save file…</h3>
+        <a
+          :href="lsvgURL"
+          :class="[interfaceStyles.button, $style.fileButton]"
+          :download="(collectionsStore.selectedLID || 'l-system') + '.lsvg'"
+        >
+          LSVG
+        </a>
+        <a
+          :href="svgURL"
+          :class="[interfaceStyles.button, $style.fileButton]"
+          :download="(collectionsStore.selectedLID || 'l-system') + '.svg'"
+        >
+          SVG
+        </a>
+      </div>
+
+      <hr>
+
+      <h3>Permalink for the selected L-system</h3>
+      <textarea
+        :class="$style.permalinkField"
+        :value="permalink"
+        readonly
+        @click="$event.target.select()"
+      />
+      <button
+        type="button"
+        :class="[interfaceStyles.button, $style.permalinkCopyButton]"
+        :disabled="!permalink"
+        @click="copyPermalink"
+      >
+        <span :class="$style.permalinkCopyReady">Copy</span>
+        <span :class="$style.permalinkCopyDone">Copied!</span>
+      </button>
+      <p :class="$style.note">
+        Note that permalinks are only available for L-systems from the predefined collections.
+        Any manual changes in L-system parameters are not preserved.
+      </p>
+    </form>
+  </section>
+</template>
+
+<style module>
+  .fileControls {
+    align-items: center;
+    display: grid;
+    gap: 20px 10px;
+    grid-template-columns: 1fr 25% 25%;
+
+    & h3 {
+      font: inherit;
+      grid-column: 1 / 2;
+      margin: 0;
+    }
+
+    & .fileButton {
+      --border-alpha: 0.3;
+      border-color: rgb(from var(--color-accent) r g b / var(--border-alpha));
+      border-radius: 5px;
+      font: inherit;
+
+      &:hover,
+      &:focus-visible {
+        --border-alpha: 0.6;
+        background: none;
+      }
+    }
+  }
+
+  .permalinkField {
+    box-sizing: border-box;
+    height: 55px;
+    margin-top: 10px;
+    resize: vertical;
+    width: 100%;
+  }
+
+  .permalinkCopyButton {
+    margin: 5px 0;
+    width: 100%;
+
+    &.copySuccess {
+      pointer-events: none;
+    }
+
+    &:not(.copySuccess) .permalinkCopyDone,
+    &.copySuccess .permalinkCopyReady {
+      display: none;
+    }
+  }
+
+  .note {
+    color: var(--color-on-surface-mid);
+    font-size: 0.85em;
+  }
+</style>
diff --git a/src/components/ThePopover.vue b/src/components/ThePopover.vue
index 109164b..296596e 100644
--- a/src/components/ThePopover.vue
+++ b/src/components/ThePopover.vue
@@ -8,7 +8,7 @@ let {popover} = storeToRefs(useInterfaceStore());
 <template>
   <aside
     v-show="!!popover.uid"
-    :class="$style.popover"
+    :class="[$style.popover, {[$style.acceptable]: !!popover.button}]"
   >
     <p>{{ popover.text }}</p>
     <button
@@ -38,12 +38,16 @@ let {popover} = storeToRefs(useInterfaceStore());
   box-sizing: border-box;
   display: grid;
   gap: 5px 20px;
-  grid-template-columns: 1fr auto auto;
+  grid-template-columns: 1fr auto;
   max-width: 500px;
   padding: 5px 20px;
   right: 15px;
   position: fixed;
   width: calc(100% - 30px - var(--size-sidebar-button));
+}
+
+.acceptable {
+  grid-template-columns: 1fr auto auto;
 
   @media (max-width: 450px) {
     grid-template-columns: 1fr auto;
diff --git a/src/components/TheSidebar.vue b/src/components/TheSidebar.vue
index d484de1..7e6d144 100644
--- a/src/components/TheSidebar.vue
+++ b/src/components/TheSidebar.vue
@@ -3,7 +3,7 @@ import {useInterfaceStore} from "../stores/interface.mjs";
 import PanelCollections from "./PanelCollections.vue";
 import PanelSettings from "./PanelSettings.vue";
 import PanelAttributes from "./PanelAttributes.vue";
-import PanelExporting from "./PanelExporting.vue";
+import PanelSharing from "./PanelSharing.vue";
 import PanelAbout from "./PanelAbout.vue";
 
 let interfaceStore = useInterfaceStore();
@@ -13,14 +13,16 @@ let interfaceStore = useInterfaceStore();
   <div :class="$style.sidebar">
     <button
       v-show="interfaceStore.openedPanel !== ''"
+      type="button"
       :class="$style.collapse"
       title="Hide sidebar"
       @click="interfaceStore.openedPanel = ''"
     />
     <div :class="$style.buttons">
       <button
-        v-for="name of ['collections', 'settings', 'attributes', 'exporting', 'about']"
+        v-for="name of ['collections', 'settings', 'attributes', 'sharing', 'about']"
         :key="name"
+        type="button"
         :class="[$style.button, {[$style.active]: interfaceStore.openedPanel === name}]"
         @click="interfaceStore.togglePanel(name)"
       >
@@ -30,7 +32,7 @@ let interfaceStore = useInterfaceStore();
     <PanelCollections v-show="interfaceStore.openedPanel === 'collections'" />
     <PanelSettings v-show="interfaceStore.openedPanel === 'settings'" />
     <PanelAttributes v-show="interfaceStore.openedPanel === 'attributes'" />
-    <PanelExporting v-show="interfaceStore.openedPanel === 'exporting'" />
+    <PanelSharing v-show="interfaceStore.openedPanel === 'sharing'" />
     <PanelAbout v-show="interfaceStore.openedPanel === 'about'" />
   </div>
 </template>
diff --git a/src/manifest.webmanifest b/src/manifest.webmanifest
index 7dcf381..f29884d 100644
--- a/src/manifest.webmanifest
+++ b/src/manifest.webmanifest
@@ -67,5 +67,22 @@
   ],
   "background_color": "#ffffff",
   "theme_color": "#f5f5f5",
-  "display": "standalone"
+  "display": "standalone",
+  "file_handlers": [
+    {
+      "action": "/lindsvg/index.html?action=handleFile",
+      "accept": {
+        "application/json": [".lsvg"]
+      },
+      "label": "L-system configuration",
+      "icons": [
+        {
+          "src": "/lindsvg/app-icons/doc-icon.png",
+          "type": "image/png",
+          "sizes": "256x256"
+        }
+      ],
+      "launch_type": "single-client"
+    }
+  ]
 }
diff --git a/src/pwaCtrl.mjs b/src/pwaCtrl.mjs
index 02cd902..f460cee 100644
--- a/src/pwaCtrl.mjs
+++ b/src/pwaCtrl.mjs
@@ -1,5 +1,6 @@
 import "./sw.js?worker";
 import {useInterfaceStore, POPOVER_ACCEPT} from "./stores/interface.mjs";
+import {useLSystemStore} from "./stores/lSystem.mjs";
 
 export const USING_PWA = import.meta.env.PROD && ("serviceWorker" in navigator);
 
@@ -35,3 +36,38 @@ async function suggestUpdate(newSW) {
     }
   });
 }
+
+let launchParamsSupported = ("launchQueue" in window) && ("files" in window.LaunchParams.prototype);
+
+/** @see https://github.com/WICG/web-app-launch/issues/92#issuecomment-1505562033 */
+function handleActionURL(action) {
+  let url = new URL(location.href);
+  if (url.searchParams.get("action") !== action) {
+    return false;
+  }
+  url.searchParams.delete("action");
+  window.history.replaceState(null, "", url);
+  return true;
+}
+
+export function applyLaunchParams() {
+  if (!launchParamsSupported || !handleActionURL("handleFile")) {
+    return;
+  }
+  /** @see https://github.com/WICG/file-handling/blob/main/explainer.md */
+  window.launchQueue.setConsumer(async ({files}) => {
+    if (!files.length) {
+      return;
+    }
+    try {
+      let blob = await files[0].getFile();
+      let config = JSON.parse(await blob.text());
+      let lSystemStore = useLSystemStore();
+      lSystemStore.setup(config);
+      lSystemStore.buildSVG();
+    } catch (error) {
+      useInterfaceStore().requestPopover({text: "Unfortunately, this file cannot be opened"});
+      console.error("Unable to open the file", error);
+    }
+  });
+}
diff --git a/src/styles/interface.module.css b/src/styles/interface.module.css
index 05d638c..847b679 100644
--- a/src/styles/interface.module.css
+++ b/src/styles/interface.module.css
@@ -45,7 +45,11 @@
   border-radius: 100px;
   box-sizing: border-box;
   color: var(--color-accent);
+  display: inline-flex;
   padding-block: 0.35em;
+  place-content: center;
+  text-align: center;
+  text-decoration: none;
 
   &:not(:disabled):hover,
   &:focus-visible {
diff --git a/src/styles/main.css b/src/styles/main.css
index bad6a78..8c3f408 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -40,6 +40,10 @@ body {
   font: normal 16px / 1.4 system-ui, sans-serif;
 }
 
+h1, h2, h3, h4 {
+  text-wrap: balance;
+}
+
 a {
   color: var(--color-accent);
   text-underline-offset: 0.2em;
diff --git a/src/sw.js b/src/sw.js
index c7ad8f5..ff233cc 100644
--- a/src/sw.js
+++ b/src/sw.js
@@ -1,5 +1,5 @@
 const CACHE_NS = "lindsvg"; // Never change the namespace to be able to clear old versions’ caches
-const CACHE_VERSION = __PACKAGE_VERSION__; /* global __PACKAGE_VERSION__ */
+const CACHE_VERSION = __PACKAGE_VERSION__;
 const CACHE_NAME = `${CACHE_NS}-v${CACHE_VERSION}`;
 
 let cachedFiles = [
@@ -10,6 +10,7 @@ let cachedFiles = [
   "/lindsvg/index.html",
   "/lindsvg/index.js",
   "/lindsvg/app-icons/apple-touch-icon.png",
+  "/lindsvg/app-icons/doc-icon.png",
   "/lindsvg/app-icons/favicon.svg",
   "/lindsvg/app-icons/icon-192.png",
   "/lindsvg/app-icons/icon-512.png",