Show off the tiled layout

src/components/TiledDemo.astro

@@ -0,0 +1,76 @@
+---
+import { messages, tokens, type Lang } from '../i18n';
+
+interface Props { lang: Lang }
+const { lang } = Astro.props;
+const t = messages[lang].tiled;
+const keys = tokens(lang);
+
+type Rect = [left: number, top: number, width: number, height: number];
+
+// Glide's tiled layout, in percent of the screen: the first columns split the width evenly,
+// and the last one keeps splitting what's left, top and bottom, then side by side.
+function spiral(count: number, columns: number): Rect[] {
+  const cols = Math.min(count, columns);
+  const w = 100 / cols;
+  const rects: Rect[] = [];
+  for (let i = 0; i < cols - 1; i++) rects.push([i * w, 0, w, 100]);
+  let rest: Rect = [(cols - 1) * w, 0, w, 100];
+  for (let i = cols - 1; i < count; i++) {
+    const [x, y, rw, rh] = rest;
+    if (i === count - 1) { rects.push(rest); break; }
+    const horizontal = (i - cols + 1) % 2 === 0;
+    if (horizontal) { rects.push([x, y, rw, rh / 2]); rest = [x, y + rh / 2, rw, rh / 2]; }
+    else { rects.push([x, y, rw / 2, rh]); rest = [x + rw / 2, y, rw / 2, rh]; }
+  }
+  return rects;
+}
+
+const tiles = 5;
+// Windows open one by one on 2 columns, then the workspace switches to 3.
+const steps = [1, 2, 3, 4, 5].map((n) => ({ n, columns: 2 })).concat([{ n: 5, columns: 3 }]);
+const frames = steps.map(({ n, columns }) => {
+  const rects = spiral(n, columns);
+  // Windows yet to open wait inside the last tile, so they seem to split out of it.
+  return Array.from({ length: tiles }, (_, i) => ({ rect: rects[Math.min(i, n - 1)], shown: i < n, focus: i === n - 1 }));
+});
+const still = frames[4];
+const pos = ([l, tp, w, h]: Rect) => `left:${l}%;top:${tp}%;width:${w}%;height:${h}%`;
+---
+<figure class="demo">
+  <div class="tiled" role="img" aria-label={t.label} data-frames={JSON.stringify(frames)}>
+    <div class="tiled-area">
+      {still.map((tile) => (
+        <div class:list={['tiled-tile', { 'is-hidden': !tile.shown, 'is-focus': tile.focus }]} style={pos(tile.rect)}><i /></div>
+      ))}
+    </div>
+  </div>
+  <figcaption class="strip-keys">
+    <span><kbd>{keys.macTiled}</kbd> <kbd>{keys.winTiled}</kbd> {t.toggle}</span>
+    <span><kbd>{keys.macTiledColumns}</kbd> <kbd>{keys.winTiledColumns}</kbd> {t.columns}</span>
+  </figcaption>
+</figure>
+
+<script>
+  type Frame = { rect: [number, number, number, number]; shown: boolean; focus: boolean }[];
+
+  for (const demo of document.querySelectorAll<HTMLElement>('.tiled[data-frames]')) {
+    if (matchMedia('(prefers-reduced-motion: reduce)').matches) continue;
+    const frames: Frame[] = JSON.parse(demo.dataset.frames!);
+    const tiles = [...demo.querySelectorAll<HTMLElement>('.tiled-tile')];
+    let step = 0;
+    const show = () => {
+      frames[step].forEach(({ rect: [l, t, w, h], shown, focus }, i) => {
+        Object.assign(tiles[i].style, { left: `${l}%`, top: `${t}%`, width: `${w}%`, height: `${h}%` });
+        tiles[i].classList.toggle('is-hidden', !shown);
+        tiles[i].classList.toggle('is-focus', focus);
+      });
+      // Linger on the full layouts before starting over.
+      const last = step === frames.length - 1;
+      const wait = last || step === frames.length - 2 ? 2600 : 1300;
+      step = last ? 0 : step + 1;
+      setTimeout(show, wait);
+    };
+    show();
+  }
+</script>

src/data/features.ts

@@ -38,6 +38,8 @@ export const groups = [
       { id: 'tabs', mac: 'yes', windows: 'yes' },
       { id: 'widths', mac: 'yes', windows: 'yes' },
       { id: 'tiledLayout', mac: 'yes', windows: 'yes', note: true },
+      { id: 'tiledColumns', mac: 'yes', windows: 'yes' },
+      { id: 'tiledMoves', mac: 'yes', windows: 'yes' },
       { id: 'resize', mac: 'yes', windows: 'yes' },
       { id: 'floating', mac: 'yes', windows: 'yes' },
       { id: 'slideAnimation', mac: 'yes', windows: 'yes' },

src/i18n.ts

@@ -77,6 +77,8 @@ export function formatDate(iso: string, lang: Lang): string {
  * messages, so translators can't break them. Documented at the top of src/i18n/en.ts.
  */
 export function tokens(lang: Lang): Record<string, string> {
+  // German Windows keyboards label Ctrl as Strg.
+  const ctrl = lang === 'de' ? 'Strg' : 'Ctrl';
   return {
     mac: github(repos.mac),
     windows: github(repos.windows),
@@ -92,8 +94,12 @@ export function tokens(lang: Lang): Record<string, string> {
     aepd: 'https://www.aepd.es/',
     macMod: '⌃⌥',
     macOverview: '⌃⌥O',
+    macTiled: '⌃⌥T',
+    macTiledColumns: '⌃⌥G',
     winKey: 'Win',
     winOverview: 'Win+Tab',
+    winTiled: `Win+${ctrl}+T`,
+    winTiledColumns: `Win+${ctrl}+G`,
     appData: '%APPDATA%\\Glide',
     localAppData: '%LOCALAPPDATA%\\Glide',
   };

src/i18n/de.ts

@@ -21,14 +21,14 @@ export const de: Messages = {
   },
 
   home: {
-    title: 'Glide: ein scrollender Fenstermanager für Mac und Windows',
+    title: 'Glide: ein scrollender und kachelnder Fenstermanager für Mac und Windows',
     description:
       'Glide ordnet deine Fenster als Spalten auf einem endlosen horizontalen Band an, über das du mit der Tastatur gleitest, oder kachelt sie alle auf einem Bildschirm. Kostenlos und Open Source.',
     hero: {
       title: 'Deine Fenster in einer Reihe. Glide.',
-      lede: 'Glide setzt jedes Fenster in eine Spalte auf einem endlosen horizontalen Band und bringt dich per Tastatur oder Trackpad von Fenster zu Fenster. Schluss mit Fenstern, die sich gegenseitig verdecken. Für Mac und Windows.',
+      lede: 'Glide setzt jedes Fenster in eine Spalte auf einem endlosen horizontalen Band und bringt dich per Tastatur oder Trackpad von Fenster zu Fenster. Oder kachle einen Arbeitsbereich, damit alle Fenster auf den Bildschirm passen. Für Mac und Windows.',
       download: 'Kostenlos herunterladen',
-      meta: 'Open Source, MIT-Lizenz. Im Stil von niri und PaperWM.',
+      meta: 'Open Source, MIT-Lizenz. Scrollt wie niri und PaperWM, kachelt spiralförmig wie ein Dwindle-Layout.',
     },
     how: {
       title: 'So funktioniert es',
@@ -47,6 +47,32 @@ export const de: Messages = {
         },
       ],
     },
+    tiling: {
+      title: "Oder alles gekachelt auf einem Bildschirm",
+      lede: "Alle Fenster im Blick? Schalte einen beliebigen Arbeitsbereich auf die gekachelte Anordnung, und Glide bringt sie alle auf den Bildschirm, ohne Scrollen. Schaltest du zurück, bleibt ihre Reihenfolge erhalten.",
+      points: [
+        {
+          title: "Eine Spirale, die sich selbst kachelt",
+          bodyHtml:
+            "Ein Fenster füllt den Bildschirm, zwei teilen ihn sich. Ab dem dritten teilt sich die letzte Kachel erneut, oben und unten, dann nebeneinander. Keine Bäume zu verwalten.",
+        },
+        {
+          title: "Zwei Spalten oder drei",
+          bodyHtml:
+            "<kbd>{macTiledColumns}</kbd> oder <kbd>{winTiledColumns}</kbd> wechselt zwischen 2 und 3 Spalten. Auf einem Ultrawide-Bildschirm wählt Glide 3 für dich.",
+        },
+        {
+          title: "Nach Richtung bewegen",
+          bodyHtml:
+            "Die Pfeiltasten fokussieren die Kachel auf dieser Seite, mit Umschalt tauschst du sie dorthin. Stelle eine Teilung auf ⅓, ½ oder ⅔, zoome eine Kachel auf den ganzen Bildschirm und fasse Fenster als Tabs zusammen.",
+        },
+        {
+          title: "Eine Anordnung pro Arbeitsbereich",
+          bodyHtml:
+            "Jeder Arbeitsbereich auf jedem Bildschirm behält seine Anordnung, auch nach einem Neustart: Editor und Terminals gekachelt auf dem einen, ein scrollendes Band voller Browser auf dem nächsten.",
+        },
+      ],
+    },
     keyboard: {
       title: 'Für die Tastatur gemacht',
       points: [
@@ -94,6 +120,12 @@ export const de: Messages = {
     swipe: 'oder mit drei Fingern wischen',
   },
 
+  tiled: {
+    label: "Fenster, die sich spiralförmig selbst kacheln: Jedes neue Fenster teilt die letzte Kachel in zwei",
+    toggle: "scrollend ⇄ gekachelt",
+    columns: "2 oder 3 Spalten",
+  },
+
   downloads: {
     macNote: 'macOS 27 oder neuer, Apple Silicon. Von Apple signiert und notarisiert.',
     macButton: 'Für Mac herunterladen',
@@ -131,7 +163,9 @@ export const de: Messages = {
       stacks: 'Stapel: mehrere Fenster in einer Spalte',
       tabs: 'Spalten mit Tabs',
       widths: 'Breitenvorgaben, volle Breite und Zentrieren',
-      tiledLayout: 'Gekachelte Anordnung oder scrollendes Band, pro Arbeitsbereich',
+      tiledLayout: "Gekachelte Spirale oder scrollendes Band, pro Arbeitsbereich",
+      tiledColumns: "Gekachelt mit 2 oder 3 Spalten, 3 auf Ultrawide-Bildschirmen",
+      tiledMoves: "Gekachelt: nach Richtung fokussieren und tauschen, Teilungen ändern, eine Kachel zoomen",
       resize: 'Spaltengröße durch Ziehen am Rand ändern',
       floating: 'Schwebende Fenster',
       slideAnimation: 'Gleitanimation',
@@ -161,7 +195,7 @@ export const de: Messages = {
     },
     notes: {
       tiledLayout:
-        'Unter Windows schaltet Win+Strg+T den Arbeitsbereich um, am Mac ⌃⌥T. In der gekachelten Anordnung teilen sich alle Spalten den Bildschirm, ohne Scrollen. Jeder Arbeitsbereich behält seine Anordnung; unter Einstellungen › Allgemein › Anordnung legst du fest, womit neue starten.',
+        'Unter Windows schaltet Win+Strg+T den Arbeitsbereich um, am Mac ⌃⌥T. In der gekachelten Anordnung passen alle Fenster spiralförmig auf den Bildschirm, ohne Scrollen. Jeder Arbeitsbereich behält seine Anordnung; unter Einstellungen › Allgemein › Anordnung legst du fest, womit neue starten.',
       workspacesInUse:
         'Unter Windows zeigt das Symbol im Infobereich ein 3×3-Raster der neun Arbeitsbereiche, wobei die genutzten leuchten. Glide für Mac zeigt ihre Nummern in der Menüleiste.',
       livePreviews: 'Auf dem Mac mit der Berechtigung „Bildschirmaufnahme“; ohne sie werden App-Symbole angezeigt.',

src/i18n/en.ts

@@ -26,6 +26,8 @@
 //     {githubPrivacy} {aepd}              external privacy pages
 //     {macMod} {macOverview}              ⌃⌥ and ⌃⌥O
 //     {winKey} {winOverview}              Win and Win+Tab
+//     {macTiled} {macTiledColumns}        ⌃⌥T and ⌃⌥G
+//     {winTiled} {winTiledColumns}        Win+Ctrl+T and Win+Ctrl+G
 //     {appData} {localAppData}            Windows folders shown in the privacy policy
 //     {date}                              only in privacy.updated: the formatted date
 //
@@ -54,14 +56,14 @@ export const en = {
   },
 
   home: {
-    title: 'Glide: a scrolling window manager for Mac and Windows',
+    title: 'Glide: a scrolling and tiling window manager for Mac and Windows',
     description:
       'Glide lays your windows out as columns on an endless horizontal strip that you glide through with the keyboard, or tiles them all on one screen. Free and open source.',
     hero: {
       title: 'Your windows, in a row. Glide.',
-      lede: 'Glide puts every window in a column on an endless horizontal strip and moves you through them with the keyboard or trackpad. No more windows piled on windows. For Mac and Windows.',
+      lede: 'Glide puts every window in a column on an endless horizontal strip and moves you through them with the keyboard or trackpad. Or tile a workspace so every window fits on screen. For Mac and Windows.',
       download: 'Download free',
-      meta: 'Open source, MIT license. In the style of niri and PaperWM.',
+      meta: 'Open source, MIT license. Scrolls like niri and PaperWM, tiles like a dwindle layout.',
     },
     how: {
       title: 'How it works',
@@ -80,6 +82,32 @@ export const en = {
         },
       ],
     },
+    tiling: {
+      title: 'Or tile it all on one screen',
+      lede: 'Want every window in sight? Switch any workspace to the tiled layout and Glide fits them all on screen, with nothing to scroll. Switch back and they keep their order.',
+      points: [
+        {
+          title: 'A spiral that tiles itself',
+          bodyHtml:
+            'One window fills the screen and two share it. From the third on, the last tile splits again, top and bottom, then side by side. No trees to manage.',
+        },
+        {
+          title: 'Two columns, or three',
+          bodyHtml:
+            '<kbd>{macTiledColumns}</kbd> or <kbd>{winTiledColumns}</kbd> switches between 2 and 3 columns. On an ultrawide display, Glide picks 3 for you.',
+        },
+        {
+          title: 'Move by direction',
+          bodyHtml:
+            'The arrows focus the tile on that side, and Shift swaps it there. Resize a split to ⅓, ½ or ⅔, zoom a tile to fill the screen, and keep windows together as tabs.',
+        },
+        {
+          title: 'One layout per workspace',
+          bodyHtml:
+            'Each workspace on each display keeps its own layout, even after a restart: your editor and terminals tiled on one, a scrolling strip of browsers on the next.',
+        },
+      ],
+    },
     keyboard: {
       title: 'Made for the keyboard',
       points: [
@@ -127,6 +155,12 @@ export const en = {
     swipe: 'or swipe three fingers',
   },
 
+  tiled: {
+    label: 'Windows tiling themselves in a spiral: each new window splits the last tile in two',
+    toggle: 'scrolling ⇄ tiled',
+    columns: '2 or 3 columns',
+  },
+
   downloads: {
     macNote: 'macOS 27 or later, Apple silicon. Signed and notarized by Apple.',
     macButton: 'Download for Mac',
@@ -164,7 +198,9 @@ export const en = {
       stacks: 'Stacks: several windows in one column',
       tabs: 'Tabbed columns',
       widths: 'Width presets, full width and centering',
-      tiledLayout: 'Tiled layout, or the scrolling strip, per workspace',
+      tiledLayout: 'Tiled spiral layout, or the scrolling strip, per workspace',
+      tiledColumns: 'Tiled with 2 or 3 columns, 3 on ultrawide displays',
+      tiledMoves: 'Tiled: focus and swap by direction, resize splits, zoom a tile',
       resize: 'Resize a column by dragging its edge',
       floating: 'Floating windows',
       slideAnimation: 'Slide animation',
@@ -194,7 +230,7 @@ export const en = {
     } satisfies Record<FeatureId, string>,
     notes: {
       tiledLayout:
-        'On Windows, Win+Ctrl+T switches the workspace; on Mac, ⌃⌥T. In the tiled layout every column shares the screen, with no scrolling. Each workspace keeps its own layout, and Settings › General › Layout sets what new ones start with.',
+        'On Windows, Win+Ctrl+T switches the workspace; on Mac, ⌃⌥T. In the tiled layout every window fits on screen in a spiral, with no scrolling. Each workspace keeps its own layout, and Settings › General › Layout sets what new ones start with.',
       workspacesInUse:
         'On Windows the tray icon shows a 3×3 grid of the nine workspaces, with the ones in use lit. Glide for Mac shows their numbers in the menu bar.',
       livePreviews: 'On Mac, with the Screen Recording permission; app icons without it.',

src/i18n/es.ts

@@ -20,14 +20,14 @@ export const es: Messages = {
   },
 
   home: {
-    title: 'Glide: gestor de ventanas con desplazamiento para Mac y Windows',
+    title: 'Glide: gestor de ventanas con desplazamiento y mosaico para Mac y Windows',
     description:
       'Glide coloca tus ventanas en columnas sobre una tira horizontal sin fin y te deslizas por ellas con el teclado, o las reparte todas en una pantalla. Gratis y de código abierto.',
     hero: {
       title: 'Tus ventanas, en fila. Deslízate.',
-      lede: 'Glide coloca cada ventana en una columna de una tira horizontal sin fin y te mueve por ellas con el teclado o el trackpad. Sin ventanas encima de otras. Para Mac y Windows.',
+      lede: 'Glide coloca cada ventana en una columna de una tira horizontal sin fin y te mueve por ellas con el teclado o el trackpad. O pon un escritorio en mosaico para que todas las ventanas quepan en la pantalla. Para Mac y Windows.',
       download: 'Descargar gratis',
-      meta: 'Código abierto, licencia MIT. Al estilo de niri y PaperWM.',
+      meta: 'Código abierto, licencia MIT. Se desplaza como niri y PaperWM, y hace mosaico en espiral como un layout dwindle.',
     },
     how: {
       title: 'Cómo funciona',
@@ -46,6 +46,32 @@ export const es: Messages = {
         },
       ],
     },
+    tiling: {
+      title: "O todo en mosaico en una pantalla",
+      lede: "¿Quieres ver todas las ventanas? Pon cualquier escritorio en mosaico y Glide las encaja todas en la pantalla, sin nada que desplazar. Vuelve atrás y conservan su orden.",
+      points: [
+        {
+          title: "Una espiral que se ordena sola",
+          bodyHtml:
+            "Una ventana llena la pantalla y dos la comparten. A partir de la tercera, el último mosaico se vuelve a dividir, arriba y abajo y luego lado a lado. Sin árboles que gestionar.",
+        },
+        {
+          title: "Dos columnas, o tres",
+          bodyHtml:
+            "<kbd>{macTiledColumns}</kbd> o <kbd>{winTiledColumns}</kbd> cambia entre 2 y 3 columnas. En una pantalla ultrapanorámica, Glide elige 3 por ti.",
+        },
+        {
+          title: "Muévete por dirección",
+          bodyHtml:
+            "Las flechas enfocan el mosaico de ese lado, y con Mayús lo intercambias. Ajusta una división a ⅓, ½ o ⅔, amplía un mosaico a toda la pantalla y agrupa ventanas en pestañas.",
+        },
+        {
+          title: "Una disposición por escritorio",
+          bodyHtml:
+            "Cada escritorio de cada pantalla conserva su disposición, incluso tras reiniciar: el editor y las terminales en mosaico en uno, una tira de navegadores en el siguiente.",
+        },
+      ],
+    },
     keyboard: {
       title: 'Hecho para el teclado',
       points: [
@@ -93,6 +119,12 @@ export const es: Messages = {
     swipe: 'o desliza tres dedos',
   },
 
+  tiled: {
+    label: "Ventanas que se colocan solas en espiral: cada ventana nueva divide en dos el último mosaico",
+    toggle: "desplazamiento ⇄ mosaico",
+    columns: "2 o 3 columnas",
+  },
+
   downloads: {
     macNote: 'macOS 27 o posterior, Apple silicon. Firmada y notarizada por Apple.',
     macButton: 'Descargar para Mac',
@@ -131,7 +163,9 @@ export const es: Messages = {
       stacks: 'Pilas: varias ventanas en una columna',
       tabs: 'Columnas con pestañas',
       widths: 'Anchos predefinidos, ancho completo y centrado',
-      tiledLayout: 'Disposición en mosaico o en tira desplazable, por escritorio',
+      tiledLayout: "Mosaico en espiral o tira desplazable, por escritorio",
+      tiledColumns: "Mosaico de 2 o 3 columnas, 3 en pantallas ultrapanorámicas",
+      tiledMoves: "Mosaico: enfocar e intercambiar por dirección, ajustar divisiones, ampliar un mosaico",
       resize: 'Cambiar el ancho arrastrando el borde',
       floating: 'Ventanas flotantes',
       slideAnimation: 'Animación de deslizamiento',
@@ -161,7 +195,7 @@ export const es: Messages = {
     },
     notes: {
       tiledLayout:
-        'En Windows, Win+Ctrl+T cambia el escritorio; en Mac, ⌃⌥T. En el mosaico todas las columnas comparten la pantalla, sin desplazarte. Cada escritorio conserva su disposición, y Configuración › General › Disposición define la de los nuevos.',
+        'En Windows, Win+Ctrl+T cambia el escritorio; en Mac, ⌃⌥T. En el mosaico todas las ventanas caben en la pantalla en espiral, sin desplazarte. Cada escritorio conserva su disposición, y Configuración › General › Disposición define la de los nuevos.',
       workspacesInUse:
         'En Windows, el icono de la bandeja muestra una cuadrícula de 3×3 con los nueve escritorios, iluminando los que están en uso. Glide para Mac muestra sus números en la barra de menús.',
       livePreviews: 'En Mac, con el permiso de Grabación de pantalla; iconos de app sin él.',