npm - jskelet - Versions diffs - 0.4.8 → 0.5.1 - Mend

jskelet 0.4.8 → 0.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (23) hide show

package/CHANGELOG.md +10 -0
package/docs/02-mimari.md +8 -3
package/docs/03-routing.md +2 -0
package/docs/04-render-ve-sablonlar.md +11 -4
package/docs/06-cache.md +16 -2
package/docs/07-yapilandirma.md +3 -1
package/docs/08-build.md +32 -4
package/docs/09-dev-araclari.md +1 -1
package/docs/en/02-architecture.md +8 -2
package/docs/en/03-routing.md +2 -0
package/docs/en/04-rendering.md +11 -4
package/docs/en/06-caching.md +16 -2
package/docs/en/07-configuration.md +3 -1
package/docs/en/08-build.md +37 -8
package/docs/en/09-dev-tools.md +1 -1
package/package.json +1 -1
package/src/build/tasks/css.mjs +122 -13
package/src/client/devtools/overlay.js +9 -4
package/src/server/dev/devtools.js +6 -2
package/src/server/html-cache.js +144 -9
package/src/server/prewarm.js +57 -3
package/src/server/render.js +4 -2
package/src/templates/layout.ejs +10 -4

package/CHANGELOG.md CHANGED Viewed

@@ -10,6 +10,16 @@ one is listed under a **Breaking** heading.
 ### Added
+- Early HTML cache refresh before TTL expiry: the last successful produce time
+  (`produceMs`) sets a lead window (`min(max(produceMs×2, 250ms), ttl/2)`). A
+  still-fresh `HIT` in that window revalidates in the background; idle entries
+  are soft-staled by a sweeper and drained over HTTP even without classic
+  `prewarmPaths` (`PREWARM=0` disables both). In-flight refreshes no longer drop
+  the entry when `staleUntil` elapses.
+- Route-level stylesheets: put files in `styles/pages/*.css` and load them from
+  the controller with `styles: ["home.css"]` (same contract as island
+  `entries`). The layout emits them after global `app.css`; dev hot-swaps any
+  changed `.css` manifest key without a full reload.
 - Dev overlay Errors tab now lists failed SSR and browser `fetch` calls with
   page path, API URL, optional island name, and expandable response-body
   details (JSON instead of `[object Object]`). Server `console.error` /

package/docs/02-mimari.md CHANGED Viewed

@@ -144,9 +144,14 @@ geciktirmek doğrudan LCP'ye yazılır.
 Ayrı bir "critical CSS" üretilmez. Ölçümde inline kritik CSS ilk ekranı tam
 kapsamadığı için sheet gelince sayfa yeniden akıyordu (bir liste sayfasında CLS
-0.307) ve aynı ~27 KB her HTML yanıtında tekrar ediyordu. Sıkıştırılmış tek
-sheet'i render-blocking bırakmak hem daha hızlı hem CLS'siz; ikinci ziyarette
-zaten `immutable` önbellekten geliyor.
+0.307) ve aynı ~27 KB her HTML yanıtında tekrar ediyordu. Sıkıştırılmış global
+`app.css`'i render-blocking bırakmak hem daha hızlı hem CLS'siz; ikinci
+ziyarette zaten `immutable` önbellekten geliyor.
+Sayfaya özel kurallar için `styles/pages/*.css` + controller `styles: [...]`
+eklenebilir ([08-build.md](./08-build.md)); bunlar da render-blocking basılır
+ama yalnızca ilgili sayfada. Tailwind utility'leri global sheet'te kalır —
+sayfa sheet'inde tam `@import "tailwindcss"` utility çıktısını tekrarlar.
 Aynı mantık ikonlarda da var: her ikon için ayrı istek yerine, build zamanında
 yalnızca kaynakta kullanılan sembollerden bir SVG sprite üretilir. Tüm Phosphor

package/docs/03-routing.md CHANGED Viewed

@@ -213,6 +213,7 @@ Controller `async (ctx) => sayfa` biçimindedir ve şu alanları döndürebilir:
 | `head` | `string` | `""` | `<head>`e olduğu gibi basılacak ham HTML (ör. LCP preload'ı). |
 | `bodyClass` | `string` | `hooks.layoutContext().bodyClass ?? ""` | `<body class="…">`. |
 | `entries` | `string[]` | `[]` | Bu sayfada ek olarak yüklenecek client entry adları: `["chart.js"]`. |
+| `styles` | `string[]` | `[]` | Bu sayfada ek olarak yüklenecek stylesheet adları: `["home.css"]` → `styles/pages/home.css`. |
 `revalidate` **`route()`'un ikinci argümanıdır**, controller'ın döndürdüğü
 nesnenin alanı değil.
@@ -239,6 +240,7 @@ app.get(
         head: headHints({ href: data.cover }),
         bodyClass: "bg-slate-50",
         entries: ["chart.js"],
+        styles: ["markets.css"],
       };
     },
     { revalidate: 30 },

package/docs/04-render-ve-sablonlar.md CHANGED Viewed

@@ -151,8 +151,13 @@ kopyalamaktır.
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <%- extraHead %>
     <% if (hasAsset('app.css')) { %>
-    <link rel="stylesheet" href="<%= asset('app.css') %>">
+    <link rel="stylesheet" href="<%= asset('app.css') %>" data-jskelet-css="app.css">
     <% } %>
+    <% styles.forEach(function (sheet) { %>
+      <% if (hasAsset(sheet)) { %>
+    <link rel="stylesheet" href="<%= asset(sheet) %>" data-jskelet-css="<%= sheet %>">
+      <% } %>
+    <% }); %>
     <%- headMeta %>
     <% structuredData.forEach(function (item) { %>
     <script type="application/ld+json"><%- jsonScript(item) %></script>
@@ -177,9 +182,10 @@ Dikkat edilecek noktalar:
 - **`extraHead` en başta.** Kaynak ipuçlarını (`preconnect`, LCP `preload`)
   geciktirmek doğrudan LCP'ye yazılır.
-- **Tek, render-blocking stylesheet** ve gerekçesi
-  [02-mimari.md](./02-mimari.md)'de. Build çalışmadıysa `hasAsset('app.css')`
-  false olur ve etiket hiç basılmaz.
+- **Global `app.css` render-blocking** ve gerekçesi
+  [02-mimari.md](./02-mimari.md)'de. Controller `styles: [...]` ile ek sayfa
+  sheet'leri de aynı şekilde basılır. Build çalışmadıysa `hasAsset` false olur
+  ve etiket hiç basılmaz.
 - **`hasAsset` kontrolleri** build eksikken sayfanın 404 veren dosyaları
   istememesini sağlar.
 - **Devtools script'i** yalnızca `NODE_ENV=development` iken basılır; prod
@@ -196,6 +202,7 @@ Dikkat edilecek noktalar:
 | `body` | `string` | Sayfa şablonunun render çıktısı |
 | `bodyClass` | `string` | controller `bodyClass` → `context.bodyClass` → `""` |
 | `entries` | `string[]` | controller `entries`; varsayılan `[]` |
+| `styles` | `string[]` | controller `styles`; varsayılan `[]` |
 | `pathname` | `string` | `req.path`; **varsayılan boş string** |
 | `lang` | `string` | `context.lang` → `brand.lang` → `"en"` |
 | `devtools` | `boolean` | `NODE_ENV === "development"` |

package/docs/06-cache.md CHANGED Viewed

@@ -142,15 +142,29 @@ Girdi yapısı:
 ```
 expiresAt  = now + ttl
 staleUntil = now + ttl * 2      (STALE_FACTOR = 1)
+produceMs  = son başarılı üretimin süresi (ms)
 ```
 Okuma davranışı:
 | Durum | Yanıt | Arka plan |
 | --- | --- | --- |
-| `now < expiresAt` | Önbellekteki HTML, `HIT` | — |
+| `now < expiresAt - leadMs` | Önbellekteki HTML, `HIT` | — |
+| `expiresAt - leadMs ≤ now < expiresAt` | Önbellekteki HTML, `HIT` | **Erken tazeleme** başlar |
 | `expiresAt ≤ now < staleUntil` | Önbellekteki HTML **anında**, `STALE` | Tazeleme başlatılır |
-| `now ≥ staleUntil` | Girdi silinir, taze render, `MISS` | — |
+| `now ≥ staleUntil` | Girdi silinir, taze render, `MISS` (uçuştaki tazeleme varken silinmez) | — |
+`leadMs` sayfanın load süresini hesaba katar:
+```
+leadMs = min(max(produceMs * 2, 250ms), ttl / 2)
+```
+Böylece yavaş bir sayfa TTL dolduğu anda hâlâ soğuk render'a düşmez: taze
+HTML çoğu zaman `expiresAt` gelmeden yazılmış olur. Trafik yoksa bir sweeper
+aynı pencerede girdiyi soft-bayatlatır ve ısıtma kuyruğuna alır; `startPrewarm`
+( `PREWARM=0` değilse) kuyruğu HTTP ile boşaltır — klasik `prewarmPaths`
+olmasa da.
 Stale penceresinde tazelemenin hatası isteği etkilemez: eski HTML pencere
 boyunca geçerli kalır ve hata yalnızca loglanır

package/docs/07-yapilandirma.md CHANGED Viewed

@@ -622,7 +622,9 @@ Ayrıntı: [03-routing.md](./03-routing.md).
 Desen → saniye eşlemesi. Eşleşen kural, route'un kendi `revalidate` değerini
 **ezer**. Negatif ya da sonlu olmayan değerler yok sayılır; `0` "önbellekleme"
-anlamına gelir.
+anlamına gelir. TTL dolmadan önce framework, son render süresine göre erken
+arka plan tazelemesi başlatır (ayrı bir config alanı yok; ayrıntı
+[06-cache.md](./06-cache.md)).
 ```js
 html: {

package/docs/08-build.md CHANGED Viewed

@@ -64,8 +64,13 @@ dosya adlarını okunur tutuyor. Hash'li olmaları sayesinde bu dosyalara
 ```ejs
 <% if (hasAsset('app.css')) { %>
-<link rel="stylesheet" href="<%= asset('app.css') %>">
+<link rel="stylesheet" href="<%= asset('app.css') %>" data-jskelet-css="app.css">
 <% } %>
+<% styles.forEach(function (sheet) { %>
+  <% if (hasAsset(sheet)) { %>
+<link rel="stylesheet" href="<%= asset(sheet) %>" data-jskelet-css="<%= sheet %>">
+  <% } %>
+<% }); %>
 ```
 - `asset(name)` manifest'te varsa hash'li URL'i, yoksa `/assets/<name>` döner.
@@ -85,7 +90,8 @@ Watch turunda yeniden derlenen varlık yeni bir hash'e yazılıp eskisi silinir.
 yüzden manifest de güncellenmek zorunda (`patchManifest`): aksi hâlde HTML
 silinmiş dosyayı isteyip 404 alır ve sayfa dev oturumunun kalanında stilsiz ya
 da JS'siz kalır. CSS ve client görevlerinin ikisi de her turda kendi anahtarını
-yamalar; diğer anahtarlar korunur.
+yamalar; diğer anahtarlar korunur. CSS tarafı watch'ta `syncCssManifest` ile
+tüm `.css` anahtarlarını günceller (silinen sayfa sheet'leri de düşer).
 ## CSS — Tailwind v4
@@ -100,10 +106,32 @@ minifikasyon → `writeAsset("app.css", …)`.
   şekilde yavaşlatıyor.
 - **lightningcss opsiyoneldir:** yoksa Tailwind'in kendi çıktısı kullanılır,
   yalnızca birkaç kB daha büyük olur.
-- Çıktı tek bir dosyadır ve layout onu render-blocking olarak yükler. Ayrı bir
-  "critical CSS" üretilmemesinin ölçüm gerekçesi
+- Global çıktı `app.css`'tir ve layout onu her sayfada render-blocking olarak
+  yükler. Ayrı bir "critical CSS" üretilmemesinin ölçüm gerekçesi
   [02-mimari.md](./02-mimari.md)'de.
+### Sayfa stylesheet'leri (`styles/pages/`)
+Island `entries` ile aynı sözleşme. `styles/pages/*.css` altındaki her dosya
+ayrı bir hash'li varlıktır (`home.css` → `/assets/home.<hash>.css`). Controller
+yalnızca istediği sayfada yükler:
+```js
+return {
+  view: "pages/home",
+  styles: ["home.css"],
+};
+```
+Dizin, `paths.styles` dosyasının yanındaki `pages/` klasörüdür (`styles` taşınırsa
+pages de yanında kalır). Dizin yoksa veya boşsa adım yalnızca global sheet üretir.
+Sayfa CSS'i sayfaya özel kurallar içindir. Tailwind utility'leri global sheet'te
+kalmalı — dosyada tam `@import "tailwindcss"` utility çıktısını tekrarlar.
+Layout `app.css`ten sonra `styles` dizisindeki her sheet için
+`<link data-jskelet-css="…">` basar; `hasAsset` false ise etiket yok.
 ### `@source` direktifleri zorunludur
 Tailwind v4'ün sınıf taraması `globals.css` içindeki `@source` direktiflerine

package/docs/09-dev-araclari.md CHANGED Viewed

@@ -117,7 +117,7 @@ yeniden yazıldığı için değişiklik tespiti manifest üzerinden yapılır.
 | Değişen | Davranış |
 | --- | --- |
-| Yalnızca `app.css` | **CSS hot-swap:** stylesheet takas edilir, sayfa yenilenmez. Durum ve kaydırma korunur. |
+| Yalnızca `.css` anahtarları | **CSS hot-swap:** değişen her stylesheet takas edilir, sayfa yenilenmez. Durum ve kaydırma korunur. |
 | `main.js`, sprite, başka bir varlık ya da birden fazla anahtar | **Tam yenileme** |
 Her iki durumda önce HTML önbelleği temizlenir: saklanan HTML eski hash'li varlık

package/docs/en/02-architecture.md CHANGED Viewed

@@ -147,10 +147,16 @@ resource hints (`preconnect`, LCP `preload`) at the **very beginning** of the
 No separate "critical CSS" is produced. In measurement, because the inline
 critical CSS did not fully cover the first viewport, the page reflowed once the
 sheet arrived (CLS 0.307 on a list page) and the same ~27 KB was repeated in
-every HTML response. Leaving a single compressed sheet render-blocking is both
-faster and free of CLS; on the second visit it already comes from the
+every HTML response. Leaving the compressed global `app.css` render-blocking is
+both faster and free of CLS; on the second visit it already comes from the
 `immutable` cache.
+Page-specific rules can use `styles/pages/*.css` plus controller
+`styles: [...]` ([08-build.md](./08-build.md)); those are also render-blocking
+but only on the pages that ask for them. Keep Tailwind utilities in the global
+sheet — a full `@import "tailwindcss"` in a page sheet duplicates utility
+output.
 The same logic applies to icons: instead of a separate request per icon, an SVG
 sprite is produced at build time from only the symbols actually used in the
 source. Shipping the whole Phosphor set is 1500+ icons, that is several

package/docs/en/03-routing.md CHANGED Viewed

@@ -216,6 +216,7 @@ fields:
 | `head` | `string` | `""` | Raw HTML to be printed into `<head>` as-is (e.g. the LCP preload). |
 | `bodyClass` | `string` | `hooks.layoutContext().bodyClass ?? ""` | `<body class="…">`. |
 | `entries` | `string[]` | `[]` | The names of client entries to be loaded additionally on this page: `["chart.js"]`. |
+| `styles` | `string[]` | `[]` | Extra stylesheets for this page: `["home.css"]` → `styles/pages/home.css`. |
 `revalidate` is **the second argument of `route()`**, not a field of the object
 the controller returns.
@@ -242,6 +243,7 @@ app.get(
         head: headHints({ href: data.cover }),
         bodyClass: "bg-slate-50",
         entries: ["chart.js"],
+        styles: ["markets.css"],
       };
     },
     { revalidate: 30 },

package/docs/en/04-rendering.md CHANGED Viewed

@@ -151,8 +151,13 @@ most practical way to move to your own layout is to copy that file to
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <%- extraHead %>
     <% if (hasAsset('app.css')) { %>
-    <link rel="stylesheet" href="<%= asset('app.css') %>">
+    <link rel="stylesheet" href="<%= asset('app.css') %>" data-jskelet-css="app.css">
     <% } %>
+    <% styles.forEach(function (sheet) { %>
+      <% if (hasAsset(sheet)) { %>
+    <link rel="stylesheet" href="<%= asset(sheet) %>" data-jskelet-css="<%= sheet %>">
+      <% } %>
+    <% }); %>
     <%- headMeta %>
     <% structuredData.forEach(function (item) { %>
     <script type="application/ld+json"><%- jsonScript(item) %></script>
@@ -177,9 +182,10 @@ Points to watch:
 - **`extraHead` comes first.** Delaying resource hints (`preconnect`, LCP
   `preload`) writes straight into LCP.
-- **A single, render-blocking stylesheet**, with the reasoning in
-  [02-architecture.md](./02-architecture.md). If the build has not run,
-  `hasAsset('app.css')` is false and the tag is never emitted.
+- **Global `app.css` is render-blocking**, with the reasoning in
+  [02-architecture.md](./02-architecture.md). Controller `styles: [...]` adds
+  page sheets the same way. If the build has not run, `hasAsset` is false and
+  the tag is never emitted.
 - **The `hasAsset` checks** keep the page from requesting files that 404 when
   the build is missing.
 - **The devtools script** is emitted only when `NODE_ENV=development`; it does
@@ -196,6 +202,7 @@ Points to watch:
 | `body` | `string` | The render output of the page template |
 | `bodyClass` | `string` | controller `bodyClass` → `context.bodyClass` → `""` |
 | `entries` | `string[]` | controller `entries`; defaults to `[]` |
+| `styles` | `string[]` | controller `styles`; defaults to `[]` |
 | `pathname` | `string` | `req.path`; **defaults to the empty string** |
 | `lang` | `string` | `context.lang` → `brand.lang` → `"en"` |
 | `devtools` | `boolean` | `NODE_ENV === "development"` |

package/docs/en/06-caching.md CHANGED Viewed

@@ -150,15 +150,29 @@ The entry structure:
 ```
 expiresAt  = now + ttl
 staleUntil = now + ttl * 2      (STALE_FACTOR = 1)
+produceMs  = duration of the last successful produce (ms)
 ```
 Read behaviour:
 | State | Response | Background |
 | --- | --- | --- |
-| `now < expiresAt` | The cached HTML, `HIT` | — |
+| `now < expiresAt - leadMs` | The cached HTML, `HIT` | — |
+| `expiresAt - leadMs ≤ now < expiresAt` | The cached HTML, `HIT` | **Early refresh** starts |
 | `expiresAt ≤ now < staleUntil` | The cached HTML **immediately**, `STALE` | A refresh is started |
-| `now ≥ staleUntil` | The entry is deleted, fresh render, `MISS` | — |
+| `now ≥ staleUntil` | The entry is deleted, fresh render, `MISS` (not while a refresh is in flight) | — |
+`leadMs` accounts for the page’s load time:
+```
+leadMs = min(max(produceMs * 2, 250ms), ttl / 2)
+```
+So a slow page does not fall back to a cold render the moment TTL ends: fresh
+HTML is usually written before `expiresAt`. With no traffic, a sweeper
+soft-stales the entry in the same window and queues it for warming;
+`startPrewarm` (unless `PREWARM=0`) drains that queue over HTTP — even when
+classic `prewarmPaths` is absent.
 A failure of the refresh inside the stale window does not affect the request:
 the old HTML stays valid for the whole window and the error is only logged

package/docs/en/07-configuration.md CHANGED Viewed

@@ -635,7 +635,9 @@ Details: [03-routing.md](./03-routing.md).
 A pattern → seconds mapping. A matching rule **overrides** the route's own
 `revalidate` value. Negative or non-finite values are ignored; `0` means "no
-caching".
+caching". Before TTL ends the framework starts an early background refresh
+based on the last render duration (no separate config field; see
+[06-caching.md](./06-caching.md)).
 The one exception is `route(fn, { private: true })`: on that route a matching
 pattern is ignored. The lock is deliberately one-way — a mistake in the other

package/docs/en/08-build.md CHANGED Viewed

@@ -68,8 +68,13 @@ They are passed to templates automatically; in server code,
 ```ejs
 <% if (hasAsset('app.css')) { %>
-<link rel="stylesheet" href="<%= asset('app.css') %>">
+<link rel="stylesheet" href="<%= asset('app.css') %>" data-jskelet-css="app.css">
 <% } %>
+<% styles.forEach(function (sheet) { %>
+  <% if (hasAsset(sheet)) { %>
+<link rel="stylesheet" href="<%= asset(sheet) %>" data-jskelet-css="<%= sheet %>">
+  <% } %>
+<% }); %>
 ```
 - `asset(name)` returns the hashed URL if it is in the manifest, otherwise
@@ -88,10 +93,11 @@ hashes) and once in prod.
 ### Manifest consistency in watch mode
 On a watch pass, a recompiled asset is written to a new hash and the old one is
-deleted. That is why the manifest has to be updated too (`patchManifest`):
-otherwise the HTML asks for the deleted file, gets a 404, and the page stays
-unstyled or JS-less for the rest of the dev session. Both the CSS and the client
-tasks patch their own key on every pass; the other keys are preserved.
+deleted. That is why the manifest has to be updated too (`patchManifest` /
+CSS `syncCssManifest`): otherwise the HTML asks for the deleted file, gets a
+404, and the page stays unstyled or JS-less for the rest of the dev session.
+Both the CSS and the client tasks refresh their own keys on every pass; the
+other keys are preserved.
 ## CSS — Tailwind v4
@@ -106,9 +112,32 @@ The pipeline: PostCSS + `@tailwindcss/postcss` → minification with lightningcs
   noticeably.
 - **lightningcss is optional:** without it, Tailwind's own output is used, and it
   is only a few kB bigger.
-- The output is a single file and the layout loads it render-blocking. The
-  measurement-based reasoning for not producing a separate "critical CSS" is in
-  [02-architecture.md](./02-architecture.md).
+- The global output is `app.css` and the layout loads it render-blocking on every
+  page. The measurement-based reasoning for not producing a separate "critical
+  CSS" is in [02-architecture.md](./02-architecture.md).
+### Page stylesheets (`styles/pages/`)
+Same contract as island `entries`. Each file under `styles/pages/*.css` becomes
+its own hashed asset (`home.css` → `/assets/home.<hash>.css`). The controller
+loads it only on the pages that need it:
+```js
+return {
+  view: "pages/home",
+  styles: ["home.css"],
+};
+```
+The directory is `pages/` next to the `paths.styles` file (if `styles` moves,
+pages stays beside it). If the directory is missing or empty, the step only
+produces the global sheet.
+Page CSS is for page-specific rules. Keep Tailwind utilities in the global
+sheet — a full `@import "tailwindcss"` in a page file duplicates utility output.
+After `app.css`, the layout emits a `<link data-jskelet-css="…">` for each name
+in `styles`; if `hasAsset` is false the tag is omitted.
 ### `@source` directives are mandatory

package/docs/en/09-dev-tools.md CHANGED Viewed

@@ -121,7 +121,7 @@ rewritten on every build round, change detection is done through the manifest.
 | What changed | Behavior |
 | --- | --- |
-| Only `app.css` | **CSS hot-swap:** the stylesheet is swapped, the page is not reloaded. State and scroll position are preserved. |
+| Only `.css` keys | **CSS hot-swap:** each changed stylesheet is swapped, the page is not reloaded. State and scroll position are preserved. |
 | `main.js`, the sprite, another asset, or more than one key | **Full reload** |
 In both cases the HTML cache is cleared first: the stored HTML carries the old

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "jskelet",
-  "version": "0.4.8",
+  "version": "0.5.1",
   "description": "A framework that feels like no framework: Express 5 + build-time .jsk (or EJS) SSR, vanilla JS islands, Tailwind v4 and an in-process HTML TTL cache.",
   "type": "module",
   "license": "MIT",

package/src/build/tasks/css.mjs CHANGED Viewed

@@ -1,11 +1,20 @@
 /**
- * Tailwind v4 → tek statik stylesheet.
+ * Tailwind v4 → global `app.css` + isteğe bağlı sayfa stylesheet'leri.
+ *
+ * Global sheet her sayfada yüklenir (`paths.styles`). Sayfa sheet'leri
+ * `styles/pages/*.css` altındadır ve yalnızca controller `styles: ["home.css"]`
+ * bildiren sayfalarda basılır — island `entries` ile aynı sözleşme.
  *
  * Ayrı bir "critical CSS" üretilmez. Ölçümde inline kritik CSS ilk ekranı tam
  * kapsamadığı için sheet gelince sayfa yeniden akıyordu (bir liste sayfasında
  * CLS 0.307) ve aynı ~27 KB her HTML yanıtında tekrar ediyordu. Sıkıştırılmış
- * tek sheet'i render-blocking bırakmak hem daha hızlı hem CLS'siz; ikinci
- * ziyarette zaten immutable önbellekten geliyor.
+ * global sheet'i render-blocking bırakmak hem daha hızlı hem CLS'siz; ikinci
+ * ziyarette zaten immutable önbellekten geliyor. Sayfa sheet'leri de
+ * render-blocking; yalnızca ilgili sayfada ek maliyet.
+ *
+ * Tailwind utility'leri global sheet'te kalmalı. Sayfa CSS'inde tam
+ * `@import "tailwindcss"` utility çıktısını tekrarlar; sayfaya özel kurallar
+ * yeter.
  *
  * Tailwind'in sınıf taraması `globals.css` içindeki `@source` direktiflerine
  * bağlıdır. Otomatik tespit yalnızca stylesheet'in bulunduğu dizini tarar,
@@ -14,12 +23,12 @@
  */
 import fs from "node:fs";
 import path from "node:path";
-import { patchManifest, pruneAssets, writeAsset } from "../paths.mjs";
+import { paths, writeAsset, writeManifest } from "../paths.mjs";
 import { importFromApp, tryImportFromApp } from "../resolve-peer.mjs";
 import * as log from "../../log.mjs";
 /**
- * PostCSS boru hattı bir kez kurulur: Tailwind'in kendi önbelleği plugin
+ * PostCSS boru hattı bir kez kurulur: Tailwind'in kendi önbelleği plugin-++
  * örneğinde yaşıyor, her derlemede yeniden oluşturmak watch turlarını
  * belirgin şekilde yavaşlatıyor.
  *
@@ -53,6 +62,29 @@ async function createCompiler(root) {
   };
 }
+/**
+ * `paths.styles` dosyasının yanında `pages/` — config'te ayrı alan yok.
+ *
+ * @param {import('../../config/index.js').ResolvedConfig} config
+ * @returns {string}
+ */
+function pageStylesDir(config) {
+  return path.join(path.dirname(config.dirs.styles), "pages");
+}
+/**
+ * @param {string} dir
+ * @returns {string[]} Mutlak yollar, dosya adına göre sıralı.
+ */
+function listPageStyles(dir) {
+  if (!fs.existsSync(dir)) return [];
+  return fs
+    .readdirSync(dir)
+    .filter((name) => name.endsWith(".css"))
+    .sort()
+    .map((name) => path.join(dir, name));
+}
 /**
  * @param {import('../../config/index.js').ResolvedConfig} config
  * @param {{ watch?: boolean }} [options]
@@ -60,27 +92,55 @@ async function createCompiler(root) {
  */
 export async function buildCss(config, { watch = false } = {}) {
   const input = config.dirs.styles;
+  const pagesDir = pageStylesDir(config);
   const compile = await createCompiler(config.root);
   const run = async () => {
     const started = Date.now();
-    const css = await compile(input);
+    /** @type {Record<string, string>} */
+    const urls = {};
+    let bytes = 0;
+    const appCss = await compile(input);
+    const appUrl = writeAsset("app.css", appCss);
+    urls["app.css"] = appUrl;
+    bytes += Buffer.byteLength(appCss);
+    /** @type {string[]} */
+    const keep = [path.basename(appUrl)];
+    for (const file of listPageStyles(pagesDir)) {
+      const name = path.basename(file);
+      const css = await compile(file);
+      const url = writeAsset(name, css);
+      urls[name] = url;
+      bytes += Buffer.byteLength(css);
+      keep.push(path.basename(url));
+    }
     // Önce yaz, sonra eski hash'leri sil — aynı hash'e düşen içerikte 404
-    // penceresi olmasın (CDN immutable zehirlenmesi).
-    const url = writeAsset("app.css", css);
-    pruneAssets(["app."], { keep: [path.basename(url)] });
-    return { url, bytes: Buffer.byteLength(css), elapsed: Date.now() - started };
+    // penceresi olmasın (CDN immutable zehirlenmesi). Silinen sayfa sheet'leri
+    // de burada gider; önek listesi tutmaya gerek yok.
+    pruneCssOutputs(keep);
+    return { urls, bytes, elapsed: Date.now() - started };
   };
   const first = await run();
-  log.detail(log.size(first.bytes));
+  const pageCount = Object.keys(first.urls).length - 1;
+  log.detail(
+    pageCount > 0
+      ? `${log.size(first.bytes)}, ${pageCount} page ${pageCount === 1 ? "sheet" : "sheets"}`
+      : log.size(first.bytes),
+  );
   if (watch) {
     watchCssSources(config, async () => {
       try {
         const result = await run();
         // Yeni hash manifest'e yazılmazsa HTML silinmiş dosyayı ister.
-        patchManifest("app.css", result.url);
+        // Silinen sayfa sheet anahtarları da düşsün.
+        syncCssManifest(result.urls);
         log.event({
           scope: "css",
           message: "rebuilt",
@@ -98,12 +158,61 @@ export async function buildCss(config, { watch = false } = {}) {
     });
   }
-  return { "app.css": first.url };
+  return first.urls;
+}
+/**
+ * `public/assets/` kökündeki stylesheet çıktıları. `js/` ve `img/` altındakilere
+ * dokunulmaz.
+ *
+ * @param {string[]} keep Yeni yazılan dosya adları (`app.<hash>.css`, …)
+ */
+function pruneCssOutputs(keep) {
+  if (!fs.existsSync(paths.assets)) return;
+  for (const file of fs.readdirSync(paths.assets)) {
+    if (!/\.css(?:\.(?:br|gz))?$/i.test(file)) continue;
+    if (keep.some((name) => file === name || file.startsWith(`${name}.`))) {
+      continue;
+    }
+    fs.rmSync(path.join(paths.assets, file), { force: true });
+  }
+}
+/**
+ * Watch turunda CSS anahtarlarını toplu günceller; artık üretilmeyen sayfa
+ * sheet'lerini manifest'ten siler.
+ *
+ * @param {Record<string, string>} urls
+ */
+function syncCssManifest(urls) {
+  const file = path.join(paths.generated, "manifest.json");
+  /** @type {Record<string, string>} */
+  let current = {};
+  try {
+    current = JSON.parse(fs.readFileSync(file, "utf8"));
+  } catch {
+    // İlk yazımda oluşur.
+  }
+  /** @type {Record<string, string>} */
+  const next = {};
+  for (const [key, value] of Object.entries(current)) {
+    if (key.endsWith(".css") && !(key in urls)) continue;
+    next[key] = value;
+  }
+  for (const [key, url] of Object.entries(urls)) {
+    next[key] = url;
+  }
+  if (JSON.stringify(current) === JSON.stringify(next)) return;
+  writeManifest(next);
 }
 /**
  * Şablon ve island dosyaları da izlenir: Tailwind sınıfları oradan geliyor,
  * yalnızca `styles/` izlemek yeni bir utility yazıldığında rebuild etmez.
+ * `styles/pages` zaten `dirname(styles)` altında.
  *
  * @param {import('../../config/index.js').ResolvedConfig} config
  * @param {() => void} onChange

package/src/client/devtools/overlay.js CHANGED Viewed

@@ -630,7 +630,7 @@ function handleServerMessage(payload) {
   }
   if (payload.type === "css") {
-    swapStylesheet(payload.href);
+    swapStylesheet(payload.href, payload.name);
     return;
   }
@@ -664,13 +664,18 @@ function startFallback() {
 /**
  * Yeni sheet yüklenmeden eskisi kaldırılmaz; böylece stilsiz bir kare oluşmaz.
+ * `name` varsa `data-jskelet-css` ile doğru link seçilir (sayfa sheet'leri).
+ *
  * @param {string} href
+ * @param {string} [name] Manifest anahtarı (`app.css`, `home.css`, …)
  */
-function swapStylesheet(href) {
-  const current = document.querySelector('link[rel="stylesheet"]');
+function swapStylesheet(href, name) {
+  const current = name
+    ? document.querySelector(`link[rel="stylesheet"][data-jskelet-css="${CSS.escape(name)}"]`)
+    : document.querySelector('link[rel="stylesheet"]');
   if (!current || current.getAttribute("href") === href) return;
-  const next = current.cloneNode();
+  const next = /** @type {HTMLLinkElement} */ (current.cloneNode());
   next.href = href;
   next.addEventListener("load", () => current.remove(), { once: true });
   current.after(next);

package/src/server/dev/devtools.js CHANGED Viewed

@@ -426,8 +426,12 @@ function watchManifest() {
         // sayfa silinmiş dosyayı istemeye devam eder.
         clearHtmlCache();
-        if (changed.length === 1 && changed[0] === "app.css") {
-          broadcast({ type: "css", href: next["app.css"] });
+        // Yalnızca stylesheet anahtarları değiştiyse hot-swap; JS/sprite için
+        // tam yenileme gerekir. Birden fazla sayfa sheet'i de desteklenir.
+        if (changed.every((key) => key.endsWith(".css"))) {
+          for (const name of changed) {
+            broadcast({ type: "css", name, href: next[name] });
+          }
           return;
         }

package/src/server/html-cache.js CHANGED Viewed

@@ -7,6 +7,11 @@
  * tazeleme turu` kadar geride olabilir. Fiyat gibi canlı alanlar istemcide
  * WebSocket'ten güncellendiği için bu gecikme ekranda görünmez.
  *
+ * TTL dolmadan önce de tazelenir (**erken tazeleme**): son başarılı üretimin
+ * süresi (`produceMs`) kadar önden arka plan refresh başlar, böylece yavaş
+ * bir sayfa TTL anında hâlâ soğuk render'a düşmez. Trafik yoksa sweeper
+ * girdiyi soft-bayatlatır ve ısıtma kuyruğuna alır.
+ *
  * TTL'in yanında ikinci bir tazelik kaynağı daha var: **hedefli
  * invalidation**. Bir içerik güncellendiğinde tüm önbelleği boşaltmak
  * (`clearHtmlCache()`) o an sıcak olan her sayfayı soğuk render'a çevirir;
@@ -50,9 +55,12 @@ import {
  * `encoded` haritası yanıt yolunda (`sendHtml`) doluyor, yani yazma anında
  * boş; `storeEncoded` açıkken harita büyüdüğünde girdi yeniden paylaşılır.
  *
+ * `produceMs`: son başarılı üretimin süresi. Erken tazeleme penceresi bundan
+ * türetilir; Redis'ten gelen kopyada yoksa varsayılan kullanılır.
+ *
  * @typedef {{ html: string, status: number, expiresAt: number,
  *   staleUntil: number, encoded: Map<string, Buffer>, deps: Set<string>,
- *   storedAt: number, sharedEncodings: number }} HtmlEntry
+ *   storedAt: number, sharedEncodings: number, produceMs: number }} HtmlEntry
  */
 /**
@@ -94,12 +102,27 @@ function trackDependencies() {
  */
 const STALE_FACTOR = 1;
+/**
+ * Redis'ten gelen veya süresi bilinmeyen girdiler için erken tazeleme lead'i.
+ * Ölçülmüş `produceMs` yokken aşırı iyimser (0) kalmamak için.
+ */
+const DEFAULT_PRODUCE_MS = 500;
+/** Erken tazelemenin alt sınırı — çok hızlı sayfalar da TTL'den önce ısınsın. */
+const EARLY_REFRESH_MIN_MS = 250;
+/** Trafiksiz girdileri erken pencerede soft-bayatlatma aralığı. */
+const EARLY_SWEEP_INTERVAL_MS = 1000;
 /** @type {Map<string, HtmlEntry>} */
 const store = new Map();
 /** @type {Map<string, Promise<{ html: string, status: number }>>} */
 const inflight = new Map();
+/** @type {ReturnType<typeof setInterval> | null} */
+let earlySweepTimer = null;
 /**
  * Uçuştaki her tazelemenin kimliği. Bir girdi tazelenirken invalidate
  * edilirse o tazelemenin sonucu **artık geçersizdir**: render, purge'den önce
@@ -148,6 +171,54 @@ const purgedDeps = new Map();
 const MAX_PURGED_DEPS = 1000;
+/**
+ * Erken tazeleme lead'i: son render süresinin 2 katı (en az 250 ms), TTL'in
+ * yarısından fazla olamaz — kısa TTL'lerde sürekli refresh döngüsü olmasın.
+ *
+ * @param {number} produceMs
+ * @param {number} ttlMs
+ * @returns {number}
+ */
+export function earlyRefreshLeadMs(produceMs, ttlMs) {
+  const measured =
+    Number.isFinite(produceMs) && produceMs > 0 ? produceMs : DEFAULT_PRODUCE_MS;
+  const lead = Math.max(measured * 2, EARLY_REFRESH_MIN_MS);
+  if (!Number.isFinite(ttlMs) || ttlMs <= 0) return lead;
+  return Math.min(lead, ttlMs / 2);
+}
+/**
+ * @param {HtmlEntry} entry
+ * @returns {number}
+ */
+function entryTtlMs(entry) {
+  // Soft-bayatlatılmış girdide expiresAt 0; orijinal TTL storedAt farkından
+  // okunamaz. O durumda produceMs üzerinden güvenli bir üst sınır yeter.
+  if (entry.expiresAt > entry.storedAt) return entry.expiresAt - entry.storedAt;
+  return Math.max(entry.produceMs * 4, EARLY_REFRESH_MIN_MS * 2);
+}
+/**
+ * @param {HtmlEntry} entry
+ * @param {number} [now]
+ * @returns {boolean}
+ */
+function isEarly(entry, now = Date.now()) {
+  if (now >= entry.expiresAt) return false;
+  const lead = earlyRefreshLeadMs(entry.produceMs, entryTtlMs(entry));
+  return now >= entry.expiresAt - lead;
+}
+/**
+ * @param {unknown} value
+ * @returns {number}
+ */
+function normalizeProduceMs(value) {
+  const n = Number(value);
+  if (Number.isFinite(n) && n >= 0) return Math.round(n);
+  return DEFAULT_PRODUCE_MS;
+}
 /**
  * Girdiyi ters indeksten söker. Bu adım atlanırsa indeks, düşen girdilerin
  * anahtarlarını tutmaya devam eder ve sessizce sızar.
@@ -183,7 +254,7 @@ function drop(key) {
 /**
  * @param {string} key
  * @returns {{ html: string, status: number, encoded: Map<string, Buffer>,
- *   stale: boolean } | null}
+ *   stale: boolean, early: boolean } | null}
  */
 function read(key) {
   const entry = store.get(key);
@@ -191,8 +262,12 @@ function read(key) {
   const now = Date.now();
   if (now >= entry.staleUntil) {
-    drop(key);
-    return null;
+    // Uçuştaki tazeleme bitene kadar girdiyi tut: yavaş upstream'de
+    // staleUntil dolup MISS'e düşmek erken tazelemenin amacını bozar.
+    if (!inflight.has(key)) {
+      drop(key);
+      return null;
+    }
   }
   // LRU: erişilen girdiyi sona taşı.
@@ -206,11 +281,13 @@ function read(key) {
     share(key, entry);
   }
+  const stale = now >= entry.expiresAt;
   return {
     html: entry.html,
     status: entry.status,
     encoded: entry.encoded,
-    stale: now >= entry.expiresAt,
+    stale,
+    early: !stale && isEarly(entry, now),
   };
 }
@@ -234,6 +311,7 @@ function share(key, entry) {
     storedAt: entry.storedAt,
     expiresAt: entry.expiresAt,
     staleUntil: entry.staleUntil,
+    produceMs: entry.produceMs,
     deps: [...entry.deps],
   };
@@ -298,6 +376,7 @@ async function readShared(key) {
     deps,
     storedAt,
     sharedEncodings: encoded.size,
+    produceMs: normalizeProduceMs(payload.produceMs),
   };
 }
@@ -306,8 +385,9 @@ async function readShared(key) {
  * @param {{ html: string, status: number }} value
  * @param {number} ttlSeconds
  * @param {Set<string> | null} deps Render sırasında okunan veri anahtarları.
+ * @param {number} [produceMs] Son üretimin süresi (ms).
  */
-function write(key, value, ttlSeconds, deps = null) {
+function write(key, value, ttlSeconds, deps = null, produceMs = DEFAULT_PRODUCE_MS) {
   const now = Date.now();
   /** @type {HtmlEntry} */
@@ -322,6 +402,7 @@ function write(key, value, ttlSeconds, deps = null) {
     deps: deps ?? new Set(),
     storedAt: now,
     sharedEncodings: 0,
+    produceMs: normalizeProduceMs(produceMs),
   };
   install(key, entry);
@@ -385,6 +466,9 @@ function refresh(key, ttlSeconds, producer) {
   const pending = inflight.get(key);
   if (pending) return pending;
+  // Tazeleme sürerken staleUntil dolmasın: drop → MISS yolu kapanır.
+  extendStaleWhileRefreshing(key);
   const token = {};
   tokens.set(key, token);
@@ -397,6 +481,17 @@ function refresh(key, ttlSeconds, producer) {
   return task;
 }
+/**
+ * @param {string} key
+ */
+function extendStaleWhileRefreshing(key) {
+  const entry = store.get(key);
+  if (!entry) return;
+  const lead = earlyRefreshLeadMs(entry.produceMs, entryTtlMs(entry));
+  const floor = Date.now() + lead;
+  if (entry.staleUntil < floor) entry.staleUntil = floor;
+}
 /**
  * @param {string} key
  * @param {number} ttlSeconds
@@ -436,7 +531,7 @@ async function produce(key, ttlSeconds, producer, token) {
   // öncesinde başlamış demektir; yazmak az önce düşürüleni geri koyardı.
   const valid = tokens.get(key) === token && !readsPurgedData(deps, startedAt);
   if (valid && value.status === 200 && !value.degraded && value.storable !== false) {
-    write(key, value, ttlSeconds, deps);
+    write(key, value, ttlSeconds, deps, Date.now() - startedAt);
   }
   return value;
@@ -447,7 +542,7 @@ async function produce(key, ttlSeconds, producer, token) {
  * @param {number} ttlSeconds 0 → cache yok
  * @param {() => Promise<{ html: string, status: number }>} producer
  * @returns {Promise<{ html: string, status: number, cached: boolean,
- *   stale?: boolean, encoded?: Map<string, Buffer> }>}
+ *   stale?: boolean, early?: boolean, encoded?: Map<string, Buffer> }>}
  */
 export async function withHtmlCache(key, ttlSeconds, producer) {
   if (!ttlSeconds) {
@@ -460,7 +555,8 @@ export async function withHtmlCache(key, ttlSeconds, producer) {
   if (hit) {
     // Süresi geçmiş girdi anında döner; tazeleme arkada yürür ve hatası
     // isteği etkilemez (eski HTML stale penceresi boyunca geçerli kalır).
-    if (hit.stale) {
+    // Erken pencerede de aynı: hâlâ HIT, ama TTL dolmadan taze HTML yazılsın.
+    if (hit.stale || hit.early) {
       invalidated.delete(key);
       void refresh(key, ttlSeconds, producer).catch((error) => {
         console.error(`[html-cache] background refresh failed: ${key}`, error);
@@ -829,3 +925,42 @@ export function isHtmlCacheFresh(pathname) {
   if (!entry) return false;
   return Date.now() < entry.expiresAt;
 }
+/**
+ * Erken tazeleme penceresine girmiş (veya TTL'i dolmuş) trafiksiz girdileri
+ * soft-bayatlatır ve ısıtma kuyruğuna alır. HTTP ısıtması producer'sız
+ * çalıştığı için soft-bayat şart: taze HIT yenileme tetiklemez.
+ *
+ * @returns {number} İşaretlenen girdi sayısı.
+ */
+export function sweepEarlyExpiry() {
+  const now = Date.now();
+  let marked = 0;
+  for (const [key, entry] of store) {
+    if (inflight.has(key)) continue;
+    // Zaten soft-bayat / kuyrukta — her saniye yeniden ekleme.
+    if (entry.expiresAt === 0) continue;
+    if (now < entry.expiresAt && !isEarly(entry, now)) continue;
+    entry.expiresAt = 0;
+    if (invalidated.size < MAX_INVALIDATED) invalidated.add(key);
+    marked += 1;
+  }
+  return marked;
+}
+/**
+ * Trafiksiz sayfaların TTL öncesi soft-bayatlatılması. `startPrewarm` açar;
+ * `PREWARM=0` iken hiç kurulmaz. `unref` — süreç kapanışını geciktirmez.
+ *
+ * @returns {void}
+ */
+export function startEarlyExpirySweep() {
+  if (earlySweepTimer) return;
+  earlySweepTimer = setInterval(() => {
+    sweepEarlyExpiry();
+  }, EARLY_SWEEP_INTERVAL_MS);
+  earlySweepTimer.unref();
+}

package/src/server/prewarm.js CHANGED Viewed

@@ -19,7 +19,7 @@
 import process from "node:process";
 import { getConfig, hook } from "../config/index.js";
 import { getRequestContext } from "../http/request-context.js";
-import { isHtmlCacheFresh, takeInvalidatedPaths } from "./html-cache.js";
+import { isHtmlCacheFresh, takeInvalidatedPaths, startEarlyExpirySweep } from "./html-cache.js";
 import { getDataCacheStats } from "./data-cache.js";
 import { isTransientStatus } from "./upstream-tracking.js";
 import { upstreamCooldownMs } from "./upstream-limiter.js";
@@ -786,7 +786,8 @@ async function drainVisitWarm() {
 /**
  * Açılışta ısıtmayı tetikler. `listen` geri çağrısından çağrılır.
- * `onVisit` modunda zamanlayıcı yok: yalnızca origin kaydı ve kuyruk.
+ * `onVisit` modunda klasik zamanlayıcı yok; yine de erken-TTL invalidation
+ * drain'i çalışır — soft-bayatlayan sweeper'ın kuyruğu boşalmasın.
  *
  * @param {{ port: number }} options
  * @returns {void}
@@ -797,6 +798,11 @@ export function startPrewarm({ port }) {
   const origin = `http://127.0.0.1:${port}`;
+  // Klasik `prewarmPaths` olmasa da TTL öncesi soft-bayatlayan girdiler
+  // HTTP ile ısıtılsın. `PREWARM=0` yukarıda her şeyi keser.
+  startEarlyExpirySweep();
+  startExpiryWarmDrain(origin);
   if (config.prewarm?.onVisit?.enabled) {
     const classicEnv = CLASSIC_PREWARM_ENV.filter((key) => process.env[key]);
     if (classicEnv.length) {
@@ -814,7 +820,8 @@ export function startPrewarm({ port }) {
   }
   if (process.env.PREWARM !== "1" && config.prewarm?.enabled === false) return;
-  // Isıtacak yol bildirmeyen bir projede zamanlayıcı kurmanın anlamı yok.
+  // Isıtacak yol bildirmeyen bir projede klasik tur zamanlayıcısı gerekmez;
+  // expiry drain yine de yukarıda kuruldu.
   if (typeof config.hooks?.prewarmPaths !== "function") return;
   const isDev = process.env.NODE_ENV === "development";
@@ -848,3 +855,50 @@ export function startPrewarm({ port }) {
   const interval = setting("PREWARM_INTERVAL_SECONDS", "intervalSeconds", 0);
   if (interval > 0) setInterval(() => void run(), interval * 1000).unref();
 }
+/** @type {string | null} */
+let expiryOrigin = null;
+/** @type {boolean} */
+let expiryDraining = false;
+/** @type {ReturnType<typeof setInterval> | null} */
+let expiryDrainTimer = null;
+/**
+ * Soft-bayat / invalidate kuyruğunu periyodik boşaltır. Klasik tur ve onVisit
+ * aynı kuyruğu da okur; bu drain `prewarmPaths` yokken de çalışır.
+ *
+ * @param {string} origin
+ * @returns {void}
+ */
+function startExpiryWarmDrain(origin) {
+  expiryOrigin = origin;
+  if (expiryDrainTimer) return;
+  expiryDrainTimer = setInterval(() => {
+    void drainExpiryWarm();
+  }, 1000);
+  expiryDrainTimer.unref();
+}
+/**
+ * @returns {Promise<void>}
+ */
+async function drainExpiryWarm() {
+  if (expiryDraining || !expiryOrigin) return;
+  const paths = takeInvalidatedPaths();
+  if (!paths.length) return;
+  expiryDraining = true;
+  try {
+    const cold = paths.filter((path) => !isHtmlCacheFresh(path));
+    if (!cold.length) return;
+    await prewarm({ origin: expiryOrigin, paths: cold, quiet: true });
+  } catch (error) {
+    console.error("[prewarm] expiry warm failed", error);
+  } finally {
+    expiryDraining = false;
+  }
+}

package/src/server/render.js CHANGED Viewed

@@ -3,7 +3,7 @@
  *
  * Controller sözleşmesi:
  *   async (ctx) => { view, data?, metadata?, status?, revalidate?, head?,
- *                    bodyClass?, entries? }
+ *                    bodyClass?, entries?, styles? }
  * `ctx` → { params, query, pathname, req }
  *
  * `route()` üç kapsamı belirli bir sırayla iç içe kurar:
@@ -218,7 +218,8 @@ export async function renderView(view, data = {}) {
  * Sayfayı layout içinde render eder.
  *
  * @param {{ view: string, data?: object, metadata?: object, head?: string,
- *   bodyClass?: string, entries?: string[], pathname?: string }} page
+ *   bodyClass?: string, entries?: string[], styles?: string[],
+ *   pathname?: string }} page
  * @returns {Promise<string>}
  */
 export async function renderPage(page) {
@@ -258,6 +259,7 @@ export async function renderPage(page) {
       (context.extraHead ?? ""),
     bodyClass: page.bodyClass ?? context.bodyClass ?? "",
     entries: page.entries ?? [],
+    styles: page.styles ?? [],
     devtools: isDev,
     devBasePath: config.brand.devBasePath,
     body,

package/src/templates/layout.ejs CHANGED Viewed

@@ -6,8 +6,8 @@
   noktası olarak kullanın.
   Kullanılabilir local'ler: metadata, headMeta, extraHead, structuredData,
-  body, bodyClass, entries, pathname, lang, devtools, devBasePath, asset,
-  hasAsset + tüm html/tag helper'ları ve views/components/** export'ları.
+  body, bodyClass, entries, styles, pathname, lang, devtools, devBasePath,
+  asset, hasAsset + tüm html/tag helper'ları ve views/components/** export'ları.
   `hooks.layoutContext()` döndürdüğü her alan da buraya eklenir.
 -%>
 <!DOCTYPE html>
@@ -18,10 +18,16 @@
     <%# Kaynak ipuçları en başta: preconnect ve LCP preload'ını geciktirmek
         doğrudan LCP'ye yazılır. Sayfaya özel head buradan gelir. %>
     <%- extraHead %>
-    <%# Tek, render-blocking stylesheet — build çalışmadıysa hiç basılmaz. %>
+    <%# Global sheet + controller `styles: [...]` sayfa sheet'leri.
+        data-jskelet-css: dev hot-swap doğru link'i bulsun diye. %>
     <% if (hasAsset('app.css')) { %>
-    <link rel="stylesheet" href="<%= asset('app.css') %>">
+    <link rel="stylesheet" href="<%= asset('app.css') %>" data-jskelet-css="app.css">
     <% } %>
+    <% styles.forEach(function (sheet) { %>
+      <% if (hasAsset(sheet)) { %>
+    <link rel="stylesheet" href="<%= asset(sheet) %>" data-jskelet-css="<%= sheet %>">
+      <% } %>
+    <% }); %>
     <%- headMeta %>
     <% structuredData.forEach(function (item) { %>
     <script type="application/ld+json"><%- jsonScript(item) %></script>