Improve: restyle the home screen and app icons on the iOS 27 kit

ui/admin/index.html

@@ -292,6 +292,6 @@ <h1 class="sec-title" id="ev-title">General</h1>
   </div></div>
 </div>
 
-<script type="module" src="/js/admin.js?v=9c6d5fd1"></script>
+<script type="module" src="/js/admin.js?v=c5a04f6d"></script>
 </body>
 </html>

ui/index.html

@@ -26,12 +26,12 @@
   <script src="/js/admin-theme.js?v=66565254"></script>
   <title>Stackyard</title>
   <link rel="stylesheet" href="/css/tokens.css?v=0f4ba0b8">
-  <link rel="stylesheet" href="/css/dashboard.css?v=f26f0c58">
+  <link rel="stylesheet" href="/css/dashboard.css?v=ba41a1bb">
 </head>
 <body>
 <header class="visually-hidden"><h1>Stackyard</h1></header>
 <main id="pages" aria-label="Home screen" data-i18n-al="home.homeScreen"></main>
-<nav id="dots" aria-label="Dashboard pages" data-i18n-al="home.pagination"></nav>
+<nav id="dots" aria-label="Dashboard pages" data-i18n-al="home.pagination" hidden></nav>
 <!-- Announces the page after a change. The dots are reachable by keyboard. -->
 <div id="page-live" class="visually-hidden" aria-live="polite" aria-atomic="true"></div>
 <div id="mob-search-pill" role="button" tabindex="0">
@@ -55,5 +55,5 @@
     </div>
   </div>
 </dialog>
-<script type="module" src="/js/dashboard.js?v=f9e847fa"></script>
+<script type="module" src="/js/dashboard.js?v=7844649a"></script>
 </body></html>

ui/js/admin-app-form.js

@@ -1,4 +1,4 @@
-import { clr, el, inp as inpById, q as qSel, qa, qi, tgt } from '/js/utils.js?v=b6231666';
+import { clr, el, inp as inpById, q as qSel, qa, qi, tgt } from '/js/utils.js?v=ed0f1802';
 import { html, raw, setHtml } from '/js/html.js?v=c71f8903';
 import { loadLocalIcons, resolveIcon, iconChain, cdnIconRef, splitIconRef } from '/js/icons.js?v=9c8c550c';
 import { state } from '/js/admin-state.js?v=831e219e';
@@ -21,10 +21,10 @@ import {
   reveal,
   setTogDisabled,
   swapContent,
-} from '/js/admin-shared.js?v=d4f4cd3c';
-import { createListbox } from '/js/listbox.js?v=95ec8aab';
+} from '/js/admin-shared.js?v=d218efee';
+import { createListbox } from '/js/listbox.js?v=80606092';
 import { MAX_LABELS } from '/js/badge-logic.js?v=9e6d9d4b';
-import { renderColorControl, BADGE_DEFAULT } from '/js/admin-color-control.js?v=6e070d2e';
+import { renderColorControl, BADGE_DEFAULT } from '/js/admin-color-control.js?v=96364a80';
 import { badgeErrorAdvice, TONE } from '/js/admin-error.js?v=e4ea7820';
 import { fluidHoverClear, fluidHoverKb } from '/js/fluid-hover.js?v=cb886e86';
 import { iconSvg } from '/js/icon-set.js?v=ba9434d9';

ui/js/admin-auth.js

@@ -1,7 +1,7 @@
-import { apiGet, apiPost } from '/js/admin-shared.js?v=d4f4cd3c';
+import { apiGet, apiPost } from '/js/admin-shared.js?v=d218efee';
 import { t } from '/js/i18n.js?v=1f1ea9c1';
 import { pwStrength } from '/js/password-strength.js?v=42f45ac7';
-import { el, inp as inpById, qa } from '/js/utils.js?v=b6231666';
+import { el, inp as inpById, qa } from '/js/utils.js?v=ed0f1802';
 
 export async function checkAuth(onLogin) {
   try {

ui/js/admin-color-control.js

@@ -1,7 +1,7 @@
-import { PE_SVG, initInlineEdit, toast, reveal } from '/js/admin-shared.js?v=d4f4cd3c';
+import { PE_SVG, initInlineEdit, toast, reveal } from '/js/admin-shared.js?v=d218efee';
 import { t } from '/js/i18n.js?v=1f1ea9c1';
 import { html, raw, setHtml } from '/js/html.js?v=c71f8903';
-import { qa, q } from '/js/utils.js?v=b6231666';
+import { qa, q } from '/js/utils.js?v=ed0f1802';
 import { iconSvg } from '/js/icon-set.js?v=ba9434d9';
 import { HUE_NAMES, ROLE_NAMES, TILE_KEYWORDS, pageTheme, tileColor } from '/js/palette.js?v=3fb8ae43';
 

ui/js/admin-drag.js

@@ -12,7 +12,7 @@
 import { applyDrop, canJoinFolder, folderRowZone } from '/js/admin-drag-logic.js?v=6b767e76';
 import { state } from '/js/admin-state.js?v=831e219e';
 import { snapshotItems } from '/js/admin-save-logic.js?v=60a82419';
-import { qa } from '/js/utils.js?v=b6231666';
+import { qa } from '/js/utils.js?v=ed0f1802';
 
 /** @type {(before: unknown) => void} */
 let _save = () => {};

ui/js/admin-list.js

@@ -14,12 +14,12 @@
 import { collapsedFolders, filter, state } from '/js/admin-state.js?v=831e219e';
 import { snapshotItems } from '/js/admin-save-logic.js?v=60a82419';
 import { reorderItems } from '/js/admin-logic.js?v=5356a1b3';
-import { initDrag, wireRowDrag } from '/js/admin-drag.js?v=64aea034';
-import { paintIcon } from '/js/admin-shared.js?v=d4f4cd3c';
-import { clr, el, qa, setUserText } from '/js/utils.js?v=b6231666';
+import { initDrag, wireRowDrag } from '/js/admin-drag.js?v=0a411097';
+import { paintIcon } from '/js/admin-shared.js?v=d218efee';
+import { clr, el, qa, setUserText } from '/js/utils.js?v=ed0f1802';
 import { html, raw, setHtml } from '/js/html.js?v=c71f8903';
 import { t } from '/js/i18n.js?v=1f1ea9c1';
-import { sizeLabel } from '/js/admin-widget-form.js?v=6a06debe';
+import { sizeLabel } from '/js/admin-widget-form.js?v=e17ed1b7';
 import { widgetGlyph } from '/js/widget-glyphs.js?v=ad1869d7';
 import { iconSvg } from '/js/icon-set.js?v=ba9434d9';
 

ui/js/admin-settings.js

@@ -1,4 +1,4 @@
-import { toast, apiGet, apiPost, reveal, swapContent } from '/js/admin-shared.js?v=d4f4cd3c';
+import { toast, apiGet, apiPost, reveal, swapContent } from '/js/admin-shared.js?v=d218efee';
 import { pwStrength } from '/js/password-strength.js?v=42f45ac7';
 import { t } from '/js/i18n.js?v=1f1ea9c1';
 import {
@@ -9,9 +9,9 @@ import {
   BLOCK,
 } from '/js/admin-logic.js?v=5356a1b3';
 import { confirmText } from '/js/modal.js?v=11fa1eff';
-import { el, inp, setUserText } from '/js/utils.js?v=b6231666';
-import { renderColorControl } from '/js/admin-color-control.js?v=6e070d2e';
-import { BACKDROP } from '/js/background.js?v=1fec6318';
+import { el, inp, setUserText } from '/js/utils.js?v=ed0f1802';
+import { renderColorControl } from '/js/admin-color-control.js?v=96364a80';
+import { BACKDROP } from '/js/background.js?v=848da677';
 
 /* Mirrors the server's rule: auth cannot be switched on with no password. */
 let _passwordSet = false;

ui/js/admin-shared.js

@@ -1,6 +1,6 @@
 /* Stateless helpers shared by the admin modules. Mutable state stays out. */
 import { recoversSession, toastHoldMs } from '/js/admin-logic.js?v=5356a1b3';
-import { el, q } from '/js/utils.js?v=b6231666';
+import { el, q } from '/js/utils.js?v=ed0f1802';
 import { t } from '/js/i18n.js?v=1f1ea9c1';
 import { iconChain } from '/js/icons.js?v=9c8c550c';
 import { iconSvg } from '/js/icon-set.js?v=ba9434d9';

ui/js/admin-widget-form.js

@@ -1,11 +1,11 @@
 import { state } from '/js/admin-state.js?v=831e219e';
-import { PE_SVG, initInlineEdit, swapContent } from '/js/admin-shared.js?v=d4f4cd3c';
-import { createListbox } from '/js/listbox.js?v=95ec8aab';
-import { renderWidgetConfigForm } from '/js/widget-config-form.js?v=7692d3e2';
+import { PE_SVG, initInlineEdit, swapContent } from '/js/admin-shared.js?v=d218efee';
+import { createListbox } from '/js/listbox.js?v=80606092';
+import { renderWidgetConfigForm } from '/js/widget-config-form.js?v=0dbce7d5';
 import { html, raw, setHtml } from '/js/html.js?v=c71f8903';
 import { sizesForView, widgetConfigMode, rejectionLines, carriesTypedValues } from '/js/admin-logic.js?v=5356a1b3';
 import { t } from '/js/i18n.js?v=1f1ea9c1';
-import { q, qi, qa } from '/js/utils.js?v=b6231666';
+import { q, qi, qa } from '/js/utils.js?v=ed0f1802';
 import { iconSvg } from '/js/icon-set.js?v=ba9434d9';
 
 const SIZES_WITH_ICONS = new Set(['small', 'medium', 'large', 'xlarge']);

ui/js/admin.js

@@ -1,6 +1,6 @@
-import { buildAppForm, buildFolderForm, captureActLabels, serializeKvRows } from '/js/admin-app-form.js?v=127079a8';
-import { checkAuth, requireLogin, wirePasswordStrength } from '/js/admin-auth.js?v=dbccdb3f';
-import { initList, render, syncFilterUI } from '/js/admin-list.js?v=da79755f';
+import { buildAppForm, buildFolderForm, captureActLabels, serializeKvRows } from '/js/admin-app-form.js?v=097f38ca';
+import { checkAuth, requireLogin, wirePasswordStrength } from '/js/admin-auth.js?v=fbd8a6cb';
+import { initList, render, syncFilterUI } from '/js/admin-list.js?v=1c8871af';
 import { resolveAdminSection } from '/js/admin-logic.js?v=5356a1b3';
 import {
   buildAppItem,
@@ -10,7 +10,7 @@ import {
   snapshotItems,
   upsertItem,
 } from '/js/admin-save-logic.js?v=60a82419';
-import { loadSettings, settingsDirty, showBgFields, showWallpaperFile } from '/js/admin-settings.js?v=429a28d8';
+import { loadSettings, settingsDirty, showBgFields, showWallpaperFile } from '/js/admin-settings.js?v=b5694a5f';
 import {
   apiGet,
   apiPost,
@@ -19,12 +19,12 @@ import {
   reveal,
   setReauthHandler,
   toast,
-} from '/js/admin-shared.js?v=d4f4cd3c';
+} from '/js/admin-shared.js?v=d218efee';
 import { collapsedFolders, filter, state } from '/js/admin-state.js?v=831e219e';
-import { buildWidgetForm } from '/js/admin-widget-form.js?v=6a06debe';
+import { buildWidgetForm } from '/js/admin-widget-form.js?v=e17ed1b7';
 import { initFluidHover } from '/js/fluid-hover.js?v=cb886e86';
 import { initGlideSelect, syncGlideSelect } from '/js/glide-select.js?v=8b39e9d0';
-import { createListbox } from '/js/listbox.js?v=95ec8aab';
+import { createListbox } from '/js/listbox.js?v=80606092';
 import { html, raw, setHtml } from '/js/html.js?v=c71f8903';
 import { initI18n, LANGUAGES, t } from '/js/i18n.js?v=1f1ea9c1';
 import { loadLocalIcons } from '/js/icons.js?v=9c8c550c';
@@ -49,8 +49,8 @@ import {
   watchSystemTheme,
   writeMode,
 } from '/js/theme.js?v=eeafa4b5';
-import { el, inp, q, qa, clr, setUserText, tgt } from '/js/utils.js?v=b6231666';
-import { applyBackground, resolveBackground } from '/js/background.js?v=1fec6318';
+import { el, inp, q, qa, clr, setUserText, tgt } from '/js/utils.js?v=ed0f1802';
+import { applyBackground, resolveBackground } from '/js/background.js?v=848da677';
 import { parseYamlTolerant, YamlLiteError } from '/js/yaml-lite.js?v=6ebb564c';
 
 ensureSprite();

ui/js/background.js

@@ -1,5 +1,5 @@
 // @ts-check
-import { cssColor, sanitizeCssUrl } from '/js/utils.js?v=b6231666';
+import { cssColor, sanitizeCssUrl } from '/js/utils.js?v=ed0f1802';
 import { loadWallpaper, saveWallpaper } from '/js/wallpaper-cache.js?v=c5f8a3e6';
 
 export const BACKDROP = '#0d1117';

ui/js/dashboard.js

@@ -11,6 +11,7 @@ import {
 } from '/js/widget-types.js?v=9264dee5';
 import {
   el,
+  ICON_R,
   isDashboardEmpty,
   mk,
   mkWrap as _mkWrap,
@@ -23,9 +24,9 @@ import {
   setUserText,
   teardownWidgets,
   titleWhenTruncated,
-} from '/js/utils.js?v=b6231666';
+} from '/js/utils.js?v=ed0f1802';
 import { initFluidHover } from '/js/fluid-hover.js?v=cb886e86';
-import { initSpotlight } from '/js/spotlight.js?v=a59d932e';
+import { initSpotlight } from '/js/spotlight.js?v=6cac6066';
 import { html, setHtml, raw } from '/js/html.js?v=c71f8903';
 import { initI18n, t, currentLang } from '/js/i18n.js?v=1f1ea9c1';
 import { pwStrength, passwordMismatch } from '/js/password-strength.js?v=42f45ac7';
@@ -39,7 +40,7 @@ import {
   buildMobile,
   resetMobileChrome,
   mkFolderGlyph,
-} from '/js/ui.js?v=5d62b8d2';
+} from '/js/ui.js?v=42f30621';
 import { badgeMinimum, badgeSignature, computeBadgeVisual, readBadgeUpdate } from '/js/badge-logic.js?v=9e6d9d4b';
 import { formatNumber } from '/js/format-number.js?v=4a5ccef4';
 import { closeBadgePopover, wireBadgePopover } from '/js/badge-popover.js?v=aa52b1a3';
@@ -51,7 +52,7 @@ import {
   landingAfterSetup,
   restorePage,
 } from '/js/dashboard-logic.js?v=0d519f8b';
-import { applyBackground, BACKDROP, resolveBackground } from '/js/background.js?v=1fec6318';
+import { applyBackground, BACKDROP, resolveBackground } from '/js/background.js?v=848da677';
 import { jitter } from '/js/jitter.js?v=4eeef4c9';
 import { isMobileLayout, onLayoutChange } from '/js/layout.js?v=e9f4b607';
 import { startWakeLock } from '/js/wake-lock.js?v=6b9591cf';
@@ -68,10 +69,6 @@ let MOB = isMobileLayout();
 const wCols = { d: WIDGET_COLS.desktop, m: WIDGET_COLS.mobile };
 const wRows = { d: WIDGET_ROWS.desktop, m: WIDGET_ROWS.mobile };
 const WH = { d: WIDGET_HEIGHTS };
-/* An app icon's corner is 22.37% of its width. A fixed radius only lands on that
-   at one icon size, and the grid draws two: 72 with a label under it, 78
-   without. */
-const ICON_R = 0.2237;
 /* A widget tile's corner, at design size. WIDGET_DESIGN's small is 170 square
    against the reference's 165, so this is its 28 unchanged. */
 const WIDGET_R = 28;
@@ -427,7 +424,7 @@ function buildDesktop() {
   dk.replaceChildren();
   dock.forEach(item => dk.appendChild(mkDock(item)));
   dk.hidden = !dock.length;
-  observeGlass(dk, 45, 0.2);
+  observeGlass(dk, 38, 0.6);
 }
 
 /* Every page is mounted at once, so widgets the user has swiped away from keep

ui/js/listbox.js

@@ -9,7 +9,7 @@
 import { nextActiveIndex } from '/js/admin-logic.js?v=5356a1b3';
 import { fluidHoverClear, fluidHoverKb } from '/js/fluid-hover.js?v=cb886e86';
 import { html, raw, setHtml } from '/js/html.js?v=c71f8903';
-import { qa } from '/js/utils.js?v=b6231666';
+import { qa } from '/js/utils.js?v=ed0f1802';
 import { iconSvg } from '/js/icon-set.js?v=ba9434d9';
 
 const CHEV = iconSvg('chevrons', 22, 'solid', 'dd-chev');

ui/js/mobile-metrics.js

@@ -41,7 +41,7 @@ export function mobileMetrics(vw, docked = true) {
   const sc = Math.min(vw / BASE_VW, MAX_SC);
   const sm = Math.round(18 * sc);
   const dh = docked ? Math.round(108 * sc) : 0;
-  const pillH = Math.round(34 * sc);
+  const pillH = Math.round(30 * sc);
   const pillGap = Math.round(10 * sc);
   /* Reserving less lets the pill sit on top of the last row. */
   const dz = pillGap + pillH + Math.round(8 * sc);

ui/js/spotlight.js

@@ -1,5 +1,5 @@
 import { fluidHoverClear, fluidHoverKb } from '/js/fluid-hover.js?v=cb886e86';
-import { mk, clr, el, inp as inpById, q, qa, setUserText } from '/js/utils.js?v=b6231666';
+import { mk, clr, el, inp as inpById, q, qa, setUserText } from '/js/utils.js?v=ed0f1802';
 import { t } from '/js/i18n.js?v=1f1ea9c1';
 
 /* Attached to the window so a re-open can undo the previous one. */

ui/js/ui.js

@@ -6,17 +6,18 @@ import {
   isDashboardEmpty,
   renderEmptyState,
   mkWrap as _mkWrap,
+  ICON_R,
   mountScaledWidget,
   pageDir,
   teardownWidgets,
   el,
   q,
   qa,
   setUserText,
-} from '/js/utils.js?v=b6231666';
+} from '/js/utils.js?v=ed0f1802';
 import { t, currentLang } from '/js/i18n.js?v=1f1ea9c1';
 import { toneForColor } from '/js/label-contrast.js?v=c1ac6fb8';
-import { mobileMetrics, gridColumnWidth, gridCellCount } from '/js/mobile-metrics.js?v=ab5fe77e';
+import { mobileMetrics, gridColumnWidth, gridCellCount } from '/js/mobile-metrics.js?v=349f4300';
 import { smoothRectPath } from '/js/smooth-corner.js?v=b7dda7e1';
 import { mkGlassRim, observeGlass } from '/js/glass-rim.js?v=3faec233';
 
@@ -110,7 +111,7 @@ export function mkFolderGlyph(folder, size) {
   const wrap = mk('div');
   wrap.className = 'dyn-fold-wrap glass-surface';
   css(wrap, {
-    '--br': Math.round(size * 0.24) + 'px',
+    '--br': Math.round(size * ICON_R) + 'px',
     '--gap': Math.round(size * 0.04) + 'px',
     '--pad': Math.round(size * 0.1) + 'px',
   });
@@ -311,7 +312,7 @@ function mFolder(item, cw, rh, isz, ir, im, sc) {
   css(box, { '--sz': eff + 'px' });
   box.style.pointerEvents = 'none';
   const wrap = mkFolderGlyph(item, eff);
-  wrap.appendChild(mkGlassRim(eff, eff, smoothRectPath(eff, eff, Math.round(eff * 0.24), 0)));
+  wrap.appendChild(mkGlassRim(eff, eff, smoothRectPath(eff, eff, Math.round(eff * ICON_R), 0)));
   box.appendChild(wrap);
   const fb_ = mk('div');
   fb_.className = 'badge';
@@ -322,7 +323,7 @@ function mFolder(item, cw, rh, isz, ir, im, sc) {
     const l = mk('div');
     l.className = 'dyn-fold-label';
     l.dir = 'auto';
-    css(l, { '--lfs': Math.max(9, Math.round(9 * sc)) + 'px', '--lw': cw - 4 + 'px' });
+    css(l, { '--lfs': Math.max(11, Math.round(12 * sc)) + 'px', '--lw': cw - 4 + 'px' });
     setUserText(l, item.label || t('type.folder'));
     a.appendChild(l);
   }
@@ -372,13 +373,13 @@ export function openFolderMobile(folder, isz, _ir, _im, sc) {
   const innerW = boxW - padH * 2,
     gap = Math.round(14 * ptScale);
   const folderIconW = Math.min(Math.floor((innerW - gap * 2) / 3), isz);
-  const folderIr = Math.round(folderIconW * 0.22),
+  const folderIr = Math.round(folderIconW * ICON_R),
     folderIm = Math.round(folderIconW * 0.64);
   const gridInnerW = folderIconW * 3 + gap * 2,
     gridH = folderIconW * 3 + gap * 2;
-  /* A badge sits 7px outside its icon corner. Without this inset the outer
+  /* A badge sits 11px outside its icon corner. Without this inset the outer
      icons' badges cross into the next page and the viewport shows them. */
-  const badgeOvh = Math.min(Math.ceil(7 * (sc || 1)), padH, padVT, padVB);
+  const badgeOvh = Math.min(Math.ceil(11 * (sc || 1)), padH, padVT, padVB);
   const pageW = gridInnerW + badgeOvh * 2,
     pageH = gridH + badgeOvh * 2;
   const dotSz = Math.round(7 * ptScale);
@@ -641,7 +642,7 @@ export function buildMobile() {
   css(document.body, { '--mgw': Math.round(gridW) + 'px' });
   const maxIsz = Math.round(74 * sc);
   const isz = Math.round(Math.min(cw * 0.9, rh * 0.8, maxIsz));
-  const ir = Math.round(isz * 0.225),
+  const ir = Math.round(isz * ICON_R),
     im = Math.round(isz * 0.64);
   const showLabel = S().showLabels?.ios === true;
   /* The reference draws a 66 icon and a 28 widget corner, so a widget's corner
@@ -705,7 +706,7 @@ export function buildMobile() {
 
   function mIcon(item) {
     const eff = showLabel ? Math.round(isz * 0.82) : isz;
-    const er = Math.round(eff * 0.225),
+    const er = Math.round(eff * ICON_R),
       em = Math.round(eff * 0.64);
     const a =
       item.system === 'settings'
@@ -720,7 +721,7 @@ export function buildMobile() {
       const l = mk('div');
       l.className = 'dyn-mob-label';
       l.dir = 'auto';
-      css(l, { '--lfs': Math.max(9, Math.round(9 * sc)) + 'px', '--lw': '100%' });
+      css(l, { '--lfs': Math.max(11, Math.round(12 * sc)) + 'px', '--lw': '100%' });
       setUserText(l, item.label || item.id);
       a.appendChild(l);
     }
@@ -786,7 +787,7 @@ export function buildMobile() {
   const maxDockW = vw - Math.round(18 * sc);
   const dockPad = Math.round(14 * sc);
   const dockIconSz = Math.round(Math.min(isz, ((maxDockW - Math.round(28 * sc)) / 4) * 0.85));
-  const dockIr = Math.round(dockIconSz * 0.225),
+  const dockIr = Math.round(dockIconSz * ICON_R),
     dockIm = Math.round(dockIconSz * 0.64);
   const dockGap = Math.round(9 * sc);
   const dockW = Math.min(maxDockW, Math.round((PHONE_W - 18) * sc));
@@ -796,7 +797,7 @@ export function buildMobile() {
   dk.hidden = !dock.length;
   dk.style.cssText = `position:fixed;left:50%;bottom:${dockGap}px;transform:translateX(-50%);width:${dockW}px;height:${dh}px;padding:0 ${dockPad}px;gap:${dockIconGap}px;z-index:400;`;
   dk.replaceChildren();
-  observeGlass(dk, Math.round(40 * sc), 0.2);
+  observeGlass(dk, Math.round(38 * sc), 0.6);
   dock.forEach(item => {
     const a = mk('a', { href: item.href, target: '_blank', rel: 'noreferrer noopener' });
     a.className = 'dyn-dock-icon';

ui/js/utils.js

@@ -121,6 +121,8 @@ export const qa = (sel, root = document) => /** @type {HTMLElement[]} */ ([...ro
     @param {Event} e @returns {HTMLInputElement} */
 export const tgt = e => /** @type {HTMLInputElement} */ (e.target);
 
+export const ICON_R = 0.26;
+
 /* breg is passed in to avoid a circular import. */
 export function mkWrap(item, sz, r, isz, cls, breg) {
   const w = mk('div');