@ojiepermana/angular 22.1.11 → 22.1.12

package/theme/shell/README.md

@@ -0,0 +1,340 @@
+# @ojiepermana/angular/theme/shell
+
+The application shell root. Where `@ojiepermana/angular/theme/layout` arranges an
+app _inside_ a page, `shell` owns the whole surface — a browser tab, an **OS
+window**, a tablet, a phone — and bridges it to Tauri (or Electron, or any other
+desktop runtime).
+
+A `<Shell>` holds the app directly, plus a titlebar it renders itself when there
+is window chrome to draw:
+
+```html
+<Shell mode="desktop" device="macos" color="sync">
+  <button shellBarStart type="button">Menu</button>
+  <span shellBarTitle>Acme Studio</span>
+  <app-sync-badge shellBarEnd />
+
+  <Layout>
+    <LayoutVertical>
+      <LayoutNavigation><Navigation … /></LayoutNavigation>
+      <LayoutContent><router-outlet /></LayoutContent>
+    </LayoutVertical>
+  </Layout>
+</Shell>
+```
+
+`<Layout>` is a direct child — there is no container element. Inside a shell it
+grows into whatever the titlebar left over (`--layout-viewport-height` becomes
+`auto` plus a zero flex-basis) instead of measuring the viewport and overflowing
+by the height of the bar.
+
+## Entry points
+
+```ts
+import {
+  ShellComponent,
+  ShellService,
+  provideShellWindowBridge,
+  provideTauriShellWindowBridge,
+  isTauriRuntime,
+  type ShellMode,
+  type ShellDevice,
+  type ShellWindowBridge,
+} from '@ojiepermana/angular/theme/shell';
+```
+
+The secondary entry points stay available for explicit imports:
+
+```ts
+import { ShellService } from '@ojiepermana/angular/theme/shell/services';
+import { SHELL_MODES, SHELL_MODE_DEVICES } from '@ojiepermana/angular/theme/shell/types';
+```
+
+`ShellBarComponent` is deliberately **not** exported. When a titlebar exists is
+`<Shell>`'s decision, not the consumer's — configure it through `<Shell>` and its
+slots.
+
+## The four axes
+
+| Input    | Values                                                           | Storage key    |
+| -------- | ---------------------------------------------------------------- | -------------- |
+| `mode`   | `web`, `desktop`, `tablet`, `mobile`                             | `shell-mode`   |
+| `device` | `browser`, `macos`, `windows`, `linux`, `ipad`, `android`, `ios` | `shell-device` |
+| `color`  | `sync`, `default`                                                | `shell-color`  |
+| `frame`  | `classic`, `modern`                                              | `shell-frame`  |
+
+Every axis is optional and falls back rather than demanding a value:
+
+- **`mode`** — the input, else the stored `shell-mode`, else `desktop` when a
+  desktop runtime is registered (a Tauri window _is_ a desktop shell), else `web`.
+- **`device`** — the input, else the stored `shell-device`, else whatever the
+  window bridge reports, else the mode's default device.
+- **`color`** — the input, else the stored `shell-color`, else `sync`.
+- **`frame`** — the input, else the stored `shell-frame`, else `classic`; only
+  `desktop` can be `modern`.
+
+### Driving the axes from localStorage
+
+Because all four are storage-backed, a delivery target can be flipped **without a
+rebuild** — useful for trying a native look, or for reproducing a tablet report on
+a desktop machine. Set the keys and reload:
+
+```js
+localStorage.setItem('shell-mode', 'desktop');
+localStorage.setItem('shell-device', 'macos');
+localStorage.setItem('shell-color', 'default');
+localStorage.setItem('shell-frame', 'modern');
+```
+
+An unrecognized value is ignored rather than throwing, so a stale or hand-typo'd
+key degrades to the axis default.
+
+At runtime, go through `ShellService` — each setter writes its own key:
+
+```ts
+const shell = inject(ShellService);
+
+shell.setMode('desktop'); // a user choice — persists to shell-mode
+shell.setDevice('macos'); // …to shell-device
+shell.setColor('default'); // …to shell-color
+shell.setFrame('modern'); // …to shell-frame
+
+shell.registerMode('desktop'); // a default — yields to a stored choice
+```
+
+Pass `{ persist: false }` to any setter to change the axis for this session only.
+
+Inputs, by contrast, are **host declarations, not user preferences**: they outrank
+storage and never write to it, so `<Shell mode="desktop">` in a Tauri build cannot
+be knocked over by a stale key — and pinning an input does not destroy the choice
+underneath it.
+
+### Modes and their devices
+
+| Mode      | Devices                     | Chrome                     |
+| --------- | --------------------------- | -------------------------- |
+| `web`     | `browser`                   | none — the browser drew it |
+| `desktop` | `macos`, `windows`, `linux` | its own titlebar           |
+| `tablet`  | `ipad`, `android`           | none                       |
+| `mobile`  | `ios`, `android`            | none                       |
+
+`android` deliberately belongs to both `tablet` and `mobile`: the same OS ships on
+both form factors, and only `mode` can tell them apart.
+
+`mode` and `device` are always resolved as a **coherent pair**. A device belonging
+to another form factor (`mode="desktop" device="ipad"`) is corrected to the mode's
+default, so `data-shell-device` never describes something the mode cannot be. The
+stored preference itself is left alone, so a temporary `mode="web"` does not erase
+a stored `macos`.
+
+### Mode locks the layout width
+
+`mode` is the one axis that constrains another package. On `desktop`, `tablet`, and
+`mobile` the app _is_ the surface, so there is no page for the layout frame to be
+inset within — `LayoutService.widthLocked()` becomes `true` and `width()` reports
+`full`, outranking even `<Layout>`'s own `width` input.
+
+The user's choice is not destroyed: it stays in `LayoutService.preferredWidth()` (and
+in `localStorage`), so returning to `web` restores it. `ThemeSettings` reflects this
+by disabling every width but `full` and explaining why.
+
+Switch the axes at runtime through `ThemeSettings`
+(`@ojiepermana/angular/theme/component/settings`), which exposes all four in a
+**Shell** section directly below Theme.
+
+## Chrome color
+
+`color="sync"` (the default) promotes the selected **Theme color** to the shell
+background through `--primary`. Its title and controls use `--primary-foreground`,
+so named accents and the consumer's `brand` color keep the same readable semantic
+pair in light and dark modes.
+
+`color="default"` paints the native chrome of the active `device` instead — for an
+app that wants to disappear into its OS. Each desktop device has a light and dark
+palette, applied through `--shell-bar-background` / `-foreground` / `-border`
+under `[data-shell-color='default'][data-shell-device='…']`.
+
+## Frame
+
+`frame` decides how the app sits inside its window. Only a desktop window has a
+frame to shape, so this collapses to `classic` on every other mode.
+
+**`classic`** (the default) is the traditional desktop arrangement: the app is flush
+to the window edge, with a bordered titlebar stacked on top of it.
+
+**`modern`** insets the app instead. It gains `mx-3 mb-3 mt-0`
+(`--shell-frame-inset`, which rides `--spacing-base`), so it floats as a panel free
+of the window on three sides and meets the titlebar on the fourth. The titlebar then
+drops its bottom border and takes the **same background token as the surround**, so
+the bar and the margin around the panel read as one continuous frame rather than two
+stacked surfaces.
+
+The inset is margin on the layout, never padding on `<Shell>`: the titlebar is the
+shell's other flex child, and padding would indent it too, breaking the full-bleed
+drag region and pulling the macOS traffic lights off the window corner. The margin
+also releases the layout's width — while it kept `width: 100%` the margins only
+_shifted_ a full-width panel, overflowing the trailing edge into the shell's
+`overflow-hidden` and leaving a gap on the leading side alone.
+
+### Panel edge
+
+Inside a desktop window the app gets a panel edge: `modern` is rounded to
+`--shell-frame-radius` (**12px**) and outlined 1px in `--shell-frame-border`, the
+full-strength structural border tier.
+
+`modern` rounds and closes all four sides, since it is a free-floating panel — its
+titlebar drops the divider, so the panel's own top edge is what closes it. `classic`
+keeps the entire layout square and flush to the window edge. Its top edge meets the
+titlebar, which already draws that seam with its own `border-b`; outlining it again
+would double the line, and rounding any edge would cut notches of chrome into the
+full-bleed window join. No other mode has a window to shape.
+
+The radius is a fixed 12px rather than riding `--radius-base`: this is window
+geometry, matching what the OS rounds its own windows to, not a component-styling
+choice the `theme-radius` axis should retune.
+
+On `color="sync"`, the bar and surround both use the active `--primary`, while the
+inset app panel remains on `--background`; the selected Theme color therefore makes
+the frame visible without introducing another palette. `color="default"` keeps the
+same composition but uses the active device's native chrome instead.
+
+## Window buttons
+
+Buttons follow the **device**, not the runtime:
+
+| Device            | Controls                                                                  |
+| ----------------- | ------------------------------------------------------------------------- |
+| `macos`           | traffic lights on the **leading** edge — close, minimize, zoom            |
+| `windows`/`linux` | square glyph buttons on the **trailing** edge — minimize, maximize, close |
+
+The macOS lights are drawn by the shell, not the OS. That is deliberate: a
+`decorations: false` window has no OS buttons at all, so without them the window
+could not be closed. Their fills are macOS's own constants rather than theme tokens
+— a traffic light that recoloured with the accent would stop reading as one — and
+each is a real button with an `aria-label`, so colour is never the only way to tell
+them apart.
+
+They sit at `--shell-traffic-light-size` (~13.1px), a little over the 12px the OS
+draws: the app's own lights are in a titlebar the user can mis-click, so they get a
+slightly larger target. Each takes a `cursor: pointer`, and on hover it darkens to
+its **own** pressed shade — the per-light shift macOS uses, so the feedback reads as
+"this specific control" rather than a generic highlight. The glyph inside appears on
+hover and on keyboard focus, so the hover state never rests on colour alone.
+
+Set `nativeWindowControls` when the runtime still draws its own decorations — Tauri's
+macOS `titleBarStyle: 'Overlay'`. macOS then reserves `--shell-traffic-light-inset`
+on the leading edge for the OS lights and draws none of its own; Windows and Linux
+draw nothing either.
+
+Whether those buttons _do_ anything is the bridge's business; the shape of the
+chrome is the device's. Every button carries an `aria-label` (`minimizeLabel`,
+`maximizeLabel`, `restoreLabel`, `closeLabel` are `<Shell>` inputs, for
+localization), and the maximize/zoom button reports `aria-pressed` so the maximized
+state is announced.
+
+## Desktop navigation flyout
+
+When `LayoutWrapperDefault` uses `nav-type="desktop"`, it publishes its primary
+navigation data to the titlebar instead of rendering a second navigation region
+inside the layout. `<Shell>` then adds the same icon-only `NavigationFlyout`
+pattern used by an empty-layout `<Page>`, adapted to desktop chrome as a
+window-width popover:
+
+- macOS — after consumer `[shellBarEnd]` content, at the far right opposite the
+  traffic lights;
+- Windows and Linux — before consumer `[shellBarStart]` content, at the far left
+  opposite the window controls.
+
+The trigger is rendered only when desktop navigation data exists. It keeps a real
+button, `aria-haspopup="menu"`, an explicit accessible name, visible keyboard
+focus, and the established semantic shell/navigation tokens. Its surface stays
+transparent, including hover and open states, while the icon inherits the exact
+`--shell-bar-foreground` color used by the titlebar text. The open panel is fixed
+at the viewport origin (`top: 0; left: 0`) and spans the full window width instead
+of using a fixed content cap. Its lower corners use the desktop-only
+`--shell-frame-radius` while the upper edge stays square like the classic window
+frame. Set
+`[navigationFlyout]="false"` to suppress it, or localize/customize it through
+`navigationFlyoutLabel` and `navigationFlyoutIcon`.
+
+## Window dragging
+
+Declarative, so nothing runs on pointer-down. In desktop mode `<Shell>` becomes
+Electron's ancestor `shell-drag-region` (`-webkit-app-region: drag`) and paints a
+transparent Tauri frame layer at `z-index: 0` with `data-tauri-drag-region`. The
+titlebar also carries the direct Tauri marker; it deliberately does not create a
+second Electron drag rectangle above the flyout.
+
+Application foregrounds such as `<Layout>` sit at `z-index: 10` and opt out through
+`app-region: no-drag`; the titlebar sits at `z-index: 20`, and its open flyout
+panel stays at `z-index: 50` with an explicit no-drag region. Consequently the
+exposed window surround—including the modern-frame gaps—moves the window, while
+buttons, fields, routed content, and every flyout menu item keep normal pointer
+interaction. Electron's ancestor drag region is suspended while the flyout is
+mounted because native app-region hit testing is independent of ordinary DOM
+stacking; it resumes automatically as soon as the panel closes.
+
+Turn the bar into pure UI with `[drag]="false"`. Runtimes that need an explicit
+call can use `ShellService.startDragging()`. Disabling drag removes both the
+frame-wide layer and the titlebar markers.
+
+## Bridging to Tauri
+
+The theme package never imports a desktop SDK. Everything the shell needs from a
+window sits behind `ShellWindowBridge`, so a browser build pays nothing.
+
+For a Tauri app with `app.withGlobalTauri = true`:
+
+```ts
+import { provideTauriShellWindowBridge } from '@ojiepermana/angular/theme/shell';
+
+export const appConfig: ApplicationConfig = {
+  // The bridge reports the OS, so mode and device both resolve on their own.
+  providers: [provideTauriShellWindowBridge()],
+};
+```
+
+Without the global, hand it the modules instead — they stay dynamic imports, so a
+web build never pulls them in:
+
+```ts
+provideTauriShellWindowBridge({
+  currentWindow: () => import('@tauri-apps/api/window').then((m) => m.getCurrentWindow()),
+  platform: () => import('@tauri-apps/plugin-os').then((m) => m.platform()),
+});
+```
+
+This is safe to register unconditionally: outside a Tauri webview the bridge
+resolves no window and every command becomes a no-op. Use `isTauriRuntime()` if you
+need to branch yourself.
+
+For any other runtime, implement `ShellWindowBridge` and register it with
+`provideShellWindowBridge()`. With no bridge at all, `ShellService` falls back to an
+inert web bridge — which is what keeps `<Shell>` renderable in a browser tab, in a
+unit test, and under SSR.
+
+## Tokens
+
+Geometry rides `--spacing-base`, so window chrome tracks the `theme-space` density
+axis:
+
+| Token                         | Purpose                                        |
+| ----------------------------- | ---------------------------------------------- |
+| `--shell-bar-height`          | Titlebar thickness — the single geometry knob. |
+| `--shell-bar-inline`          | Titlebar inline padding.                       |
+| `--shell-bar-gap`             | Gap between items in the titlebar.             |
+| `--shell-control-size`        | Window button hit area.                        |
+| `--shell-traffic-light-inset` | Leading run reserved for macOS traffic lights. |
+| `--shell-traffic-light-size`  | Diameter of one traffic light (~13.1px).       |
+| `--shell-bar-background`      | Shell chrome background; see **Chrome color**. |
+| `--shell-bar-foreground`      | Titlebar text and glyphs.                      |
+| `--shell-bar-border`          | Titlebar bottom divider (`classic` only).      |
+| `--shell-frame-inset`         | `modern`: gap between the app and the window.  |
+| `--shell-frame-radius`        | Corner radius of the app in a desktop window.  |
+
+## Host attributes
+
+`<Shell>` reflects its resolved state so consumer CSS and tests can key off it:
+`data-shell-root`, `data-shell-mode`, `data-shell-device`, `data-shell-color`,
+`data-shell-platform`, `data-shell-window`. The titlebar adds
+`data-shell-focused` — an unfocused window recedes, per OS convention.

package/theme/styles/README.md

@@ -0,0 +1,178 @@
+# Theme
+
+`@ojiepermana/angular/theme/styles` menyediakan provider untuk mode, warna (accent +
+neutral, gaya FluxUI), brand color, dan preload aset tema global.
+
+```ts
+import { provideUiTheme } from '@ojiepermana/angular/theme/styles';
+
+export const appConfig = {
+  providers: [
+    provideUiTheme({
+      mode: 'light',
+      color: 'base', // accent: base, red…rose, brand
+      neutral: 'base', // gray family: base, slate, gray, zinc, …
+      radius: 'md', // corner radius: none, xs, sm, md, xl, full
+      space: 'normal', // spacing density: compact, normal
+      brand: '221 83% 53%', // warna brand consumer (HSL triplet, atau { color, foreground })
+    }),
+  ],
+};
+```
+
+## API Notes
+
+- `mode` mem-bootstrap `ThemeModeService` dan default mode yang disimpan di storage.
+- `color` mem-bootstrap `ThemeColorService`; accent palette awal (`<html theme-color>`).
+- `neutral` keluarga neutral awal (`<html theme-neutral>`); berkomposisi dengan accent.
+- `radius` mem-bootstrap `ThemeRadiusService`; preset corner radius awal (`<html theme-radius>`).
+  Menggerakkan knob `--radius-base` sehingga seluruh skala `--radius-*` dan utility `rounded-*` ikut.
+  Nilainya mengikuti Tailwind: `none`, `xs`, `sm`, `md` (default), `xl`, dan `full`.
+- `space` mem-bootstrap `ThemeSpaceService`; preset spacing density awal (`<html theme-space>`).
+  Menggerakkan knob `--spacing-base` sehingga setiap utility `p-*`/`m-*`/`gap-*`/`w-*`/`h-*` ikut.
+- `brand` mem-bootstrap `ThemeBrandService`; set `--brand` / utility `bg-brand` dan preset
+  accent `theme-color='brand'`. Menerima string HSL triplet atau `{ color, foreground }`.
+  Bisa diubah runtime via `setBrand()`, persist di storage.
+- `icons.materialSymbols` mengontrol preload stylesheet Material Symbols pada bootstrap aplikasi.
+- Pilihan yang dipersist (`theme-color` / `theme-neutral` / `theme-radius` / `theme-space` /
+  `theme-brand`) menang atas default.
+
+## Default Behavior
+
+- Material Symbols **tidak** di-preload secara default (opt-in). Tanpa konfigurasi,
+  `provideUiTheme()` tidak melakukan request jaringan eksternal apa pun — ramah privasi,
+  offline, dan CSP.
+- Untuk mengaktifkan preload font dari Google Fonts, set `icons.materialSymbols` ke `true`,
+  atau self-host font Material Symbols dan `@import` sendiri di stylesheet Anda.
+- Jika memakai `@ojiepermana/angular/component/icon` tanpa provider tema, aktifkan
+  `provideMaterialSymbols()` dari entrypoint icon atau self-host stylesheet font sendiri.
+
+## Token Semantik Status
+
+Selain palet accent dan neutral, tema mengemit tiga token status semantik beserta
+pasangan foregroundnya. Semuanya digenerate oleh `scripts/gen-theme-colors.mjs` ke
+`css/base/status.css`, jadi jangan diedit tangan.
+
+| Token       | Pasangan foreground    | Seed        | Dipakai oleh                         |
+| ----------- | ---------------------- | ----------- | ------------------------------------ |
+| `--success` | `--success-foreground` | green (142) | `bg-success text-success-foreground` |
+| `--warning` | `--warning-foreground` | amber (38)  | `bg-warning text-warning-foreground` |
+| `--info`    | `--info-foreground`    | sky (199)   | `bg-info text-info-foreground`       |
+
+`--destructive` tetap ditulis tangan di `css/base/theme.css` karena tidak berasal
+dari seed accent, tapi generator ikut memvalidasi kontrasnya.
+
+## Jaminan Kontras
+
+Generator mengukur kontras setiap pasangan token teks yang diemitnya dengan rumus
+WCAG, bukan menebak dari rentang hue. Aturannya:
+
+- pasangan teks (`primary`, `accent`, `secondary`, `muted`, `surface`, `card`,
+  `popover`, dan `foreground` terhadap `background`) wajib minimal 4.5 banding 1;
+- `--ring` diemit terpisah dari `--primary` dan wajib minimal 3 banding 1 terhadap
+  `--background`, jadi indikator fokus selalu terlihat;
+- foreground yang meleset digeser lightnessnya sekecil mungkin sampai lolos. Hue dan
+  saturation tidak pernah bergeser, sehingga identitas warna palet tetap;
+- bila tidak ada nilai yang bisa lolos, generator gagal dan tidak menulis apa pun.
+
+A brand the consumer picks at runtime is held to the same rules, and split the
+same way. `ThemeBrandService.setBrand()` measures it with the same WCAG formula
+(`theme-contrast.ts`, a port of `scripts/theme-contrast.mjs`) before storing it:
+
+- `--brand` itself is never moved. Like a generated `--primary`, the fill keeps
+  the lightness it was chosen with, so `theme-color='brand'` ships the colour the
+  consumer asked for;
+- `--brand-foreground` is moved until text on the brand clears 4.5 to 1;
+- the focus ring is solved separately, once per mode, into `--brand-ring-light`
+  and `--brand-ring-dark`. `css/color/brand.css` maps `--ring` to
+  `var(--brand-ring, var(--brand))` and picks the right one per `data-mode`, so
+  the ring clears 3 to 1 against that mode's `--background` without dragging the
+  fill down with it.
+
+Every HSL form CSS accepts is normalised first — space or comma separated, a hue
+written with `deg`/`grad`/`rad`/`turn`, a hue outside 0..360 — so none of them can
+paint while skipping the measurement. Hex is accepted and converted too, since
+that is what a native colour picker returns. A value with nothing to measure in
+it (`var(--consumer-brand)`, say) is passed through as given, and forfeits the
+guarantee.
+
+Jalankan `node scripts/gen-theme-colors.mjs --check` untuk memastikan CSS yang
+ter commit masih cocok dengan seed. Cek ini juga berjalan di `verify:libs` dan CI.
+
+## Standar Token Geometri
+
+Setiap nilai geometri di `library/` wajib turun dari token tema, bukan angka mati.
+Aturan ini yang membuat sumbu `theme-space` dan `theme-radius` benar benar
+menjangkau seluruh library, bukan hanya komponen yang kebetulan memakai utility
+Tailwind. Keputusan lengkapnya di
+[spec 0003](../../../docs/specs/0003-jangkauan-sumbu-space-radius/index.md).
+
+**Pola kanonik**:
+
+```css
+/* Jarak di CSS komponen: selalu turun dari unit spacing */
+.panel {
+  padding: calc(var(--spacing-base) * 3);
+  gap: calc(var(--spacing-base) * 2);
+}
+
+/* Sudut: pakai skala radius */
+.panel {
+  border-radius: var(--radius-md);
+}
+```
+
+```html
+<!-- Template: pakai skala utility, yang sudah turun dari --spacing -->
+<div class="gap-2 p-3">
+  <!-- Sudut -->
+  <div class="rounded-md">
+    <!-- Tinggi kontrol: satu knop bernama, bukan literal tinggi -->
+    <button class="h-control-md"></button>
+  </div>
+</div>
+```
+
+**Jangkauan sumbu**: jarak (padding, margin, gap, ukuran) plus tinggi kontrol ikut
+`theme-space`. Tipografi, ukuran ikon, dan tebal garis **tidak** ikut. Bentuk pil
+semantik (`rounded-full` pada avatar, switch, radio, progress, spinner, dan track
+slider) dikunci sebagai bentuk, jadi sumbu radius tidak menyentuhnya.
+
+**Penegakan**: `node scripts/check-geometry-tokens.mjs` (`bun run check:libs:geometry`)
+memindai `library/**/*.ts` dan `library/**/*.css`, lalu menggagalkan build saat
+menemukan pelanggaran. Cek ini berjalan di `verify:libs` dan di CI pada tiap PR dan
+push ke `main`. Yang ditolak:
+
+| Jenis          | Ditolak                                                                          | Contoh                |
+| -------------- | -------------------------------------------------------------------------------- | --------------------- |
+| Panjang        | properti jarak dan ukuran dengan nilai `px`, `rem`, atau `em` mentah             | `padding: 12px`       |
+| Radius         | `border-radius` dengan panjang mentah                                            | `border-radius: 10px` |
+| Nilai arbitrer | utility jarak, ukuran, dan `rounded-*` yang kurung sikunya berisi panjang mentah | `min-w-[8rem]`        |
+
+Yang **tidak** ditolak, dan memang begitu adanya:
+
+- nilai yang membaca token, termasuk `calc(var(--spacing-base) * 3)`,
+  `rounded-[var(--radius-base)]`, dan `rounded-[inherit]`;
+- `border-radius: inherit` serta kata kunci tanpa besaran seperti `auto` dan `fit-content`;
+- `0` dan persen, karena keduanya bukan besaran yang punya skala;
+- tebal border dan outline, karena garis rambut tidak boleh ikut skala;
+- ekspresi `calc()`, `min()`, `clamp()` di dalam kurung siku utility, dan satuan
+  viewport seperti `85vh`. Guard mempercayainya; kalau isinya ternyata angka mati,
+  itu yang lolos dari jaring ini;
+- berkas `*.spec.ts`, karena test hanya mencerminkan class string komponennya. Satu
+  nilai diperbaiki di komponennya, bukan di dua tempat;
+- `library/theme/styles/css/` yang justru tempat token didefinisikan.
+
+**Pengecualian**: tinggal di
+[`scripts/geometry-token-exceptions.json`](../../../scripts/geometry-token-exceptions.json).
+Tiap baris wajib membawa `pattern`, `files`, dan `reason`; baris tanpa alasan
+tertulis ditolak oleh guard itu sendiri, jadi daftar ini tidak bisa dipakai sebagai
+tempat buang. `wave` bernilai `null` untuk pengecualian permanen, atau angka 2
+sampai 5 untuk utang sementara yang dihapus oleh gelombang itu sendiri. Guard
+mencetak sisa utang per gelombang tiap kali dijalankan, sehingga yang belum
+dibereskan selalu berupa angka, bukan perasaan.
+
+**Entry point baru**: tambahkan barisnya ke tabel inventaris sumbu di
+[rationale spec 0003](../../../docs/specs/0003-jangkauan-sumbu-space-radius/rationale.md),
+sebutkan sumbu mana yang berlaku dan seberapa jauh sudah tersambung. Tabel itu
+rujukan tunggal soal sudut mana yang sengaja dikunci dan mana yang kelupaan.