jskelet 0.4.3 → 0.4.5

package/CHANGELOG.md

@@ -8,6 +8,15 @@ one is listed under a **Breaking** heading.
 
 ## [Unreleased]
 
+### Added
+
+- Runtime remote image optimizer: set `images.remote.allowHosts` to proxy
+  allowlisted http(s) images through `/_jskelet/image?url=&w=&q=` as resized
+  webp (disk cache under `.jskelet/image-cache/`). `image()` rewrites matching
+  remote `src` values automatically; `remoteImageUrl()` builds URLs by hand.
+  Requires `sharp` at runtime; without it the endpoint 302-redirects to the
+  source.
+
 ### Breaking
 
 - The cache admin panel moved to a top-level `admin()` config section at
@@ -34,6 +43,11 @@ one is listed under a **Breaking** heading.
 
 ### Added
 
+- Devtools SEO check: an **SEO** tab in the overlay lists document, heading,
+  image, link and social-tag issues with error/warning severity. Optional page
+  highlights draw red or yellow boxes around the offending elements; the label
+  shows the short title and a click opens the full explanation. Served only in
+  development as `/__jskelet/dev/seo.js` beside the overlay.
 - Marketing homepage ops storyboard: Redis L2, `/_jskelet/admin` panel mock and
   Cloudflare purge flow, with tabbed visual scenes animated by the vanilla
   `motion` API (Framer Motion’s non-React package) via an `ops-story` island.

package/docs/02-mimari.md

@@ -42,6 +42,8 @@ JSkelet bu gözlemi mimarinin merkezine alır:
  ├─ staticPrecompressed            build'de üretilmiş .br/.gz kopyalar (kalite 11)
  ├─ express.static                 public/ altındaki dosyalar
  ├─ (dev) devtools                 yalnızca NODE_ENV=development
+ ├─ admin (açıksa)                 /_jskelet/admin
+ ├─ image optimizer (remote)       /_jskelet/image — allowHosts doluysa
  ├─ body parser'lar                urlencoded 64kb + json 256kb
  ├─ rewrites(afterFiles)           statik denendikten sonra
  ├─ route'lar

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

@@ -383,12 +383,16 @@ Davranış:
 
 - `public/` altındaki yerel raster görseller için build'de üretilen webp
   varyantları (`.jskelet/images.json`) otomatik olarak `srcset` + intrinsic
-  `width`/`height` olarak eklenir. Manifest'te olmayan ya da uzak görseller
-  olduğu gibi basılır.
-- `srcset` elle verilmişse ya da `unoptimized: true` ise manifest'e hiç
-  bakılmaz.
+  `width`/`height` olarak eklenir. Manifest'te olmayan yerel yollar olduğu
+  gibi basılır.
+- `images.remote.allowHosts` açıksa uzak `http(s)` URL'leri
+  `/_jskelet/image?url=&w=` proxy'sine çevrilir (webp). `width` varsa 1x/2x
+  + config `widths` ile `srcset` üretilir.
+- `srcset` elle verilmişse ya da `unoptimized: true` ise ne manifest ne de
+  remote proxy kullanılır.
 - Yalnızca **tek** varyant üretilmişse (kaynak zaten küçükse) `srcset`/`sizes`
-  yazılmaz; gürültüden ibaret olurdu.
+  yazılmaz; gürültüden ibaret olurdu. Remote'da tek genişlikte bile `src`
+  yine optimize URL'dir.
 - `sizes` verilmezse makul bir varsayılan üretilir: görsel kendi intrinsic
   genişliğinden büyütülmez, dar ekranlarda viewport'u kaplar
   (`(max-width: Npx) 100vw, Npx`).

package/docs/07-yapilandirma.md

@@ -482,24 +482,51 @@ icons: { scan: ["views", "client", "routes", "lib", "content"] }
 
 ## `images`
 
-**Tip:** `{ widths?: number[], quality?: number, skip?: string[] } | false` —
-**Varsayılan:** `{}`
+**Tip:**
+`{ widths?: number[], quality?: number, skip?: string[], remote?: { allowHosts: string[], path?: string, maxWidth?: number, cacheMaxAge?: number, fetchTimeoutMs?: number, maxBytes?: number } | false } | false`
+— **Varsayılan:** `{ widths, quality, skip, remote: false }` (remote kapalı)
+
+`public/` altındaki png/jpg görsellerin webp varyantlarını **build**'de üretir.
+`remote.allowHosts` verilirse çalışma anında uzak görselleri de proxy eder
+(`/_jskelet/image?url=&w=&q=` → webp).
+
+| Alan | Tip | Varsayılan | Anlamı |
+| --- | --- | --- | --- |
+| `widths` | `number[]` | `[400, 640, 960, 1280, 1920]` | Build ve remote `srcset` adayları. Kaynaktan büyük olanlar build'de elenir; kaynağın kendi genişliği (en fazla 1920) her zaman eklenir. |
+| `quality` | `number` | `78` | webp kalitesi. Build'de imzaya girer; remote uçta `q` varsayılanı. |
+| `skip` | `string[]` | `[]` | Build'de taranmayacak **dizin adları**. `assets` ve `fonts` her zaman atlanır. |
+| `remote` | `object \| false` | kapalı | Runtime optimizer. `allowHosts` **zorunlu**; boşsa uç mount edilmez. |
 
-`public/` altındaki png/jpg görsellerin webp varyantlarını üretir.
+### `images.remote`
 
 | Alan | Tip | Varsayılan | Anlamı |
 | --- | --- | --- | --- |
-| `widths` | `number[]` | `[400, 640, 960, 1280, 1920]` | Üretilecek genişlikler. Kaynaktan büyük olanlar elenir; kaynağın kendi genişliği (en fazla 1920) her zaman eklenir. |
-| `quality` | `number` | `78` | webp kalitesi. Değişince kodlayıcı imzası değişir ve tüm görseller yeniden kodlanır. |
-| `skip` | `string[]` | `[]` | Taranmayacak **dizin adları**. `assets` ve `fonts` her zaman atlanır. |
+| `allowHosts` | `string[]` | `[]` | Çekilebilecek host'lar. `*.cdn.example.com` sonek jokerini destekler. |
+| `path` | `string` | `/_jskelet/image` | Optimizer GET yolu. |
+| `maxWidth` | `number` | `1920` | `w` üst sınırı. |
+| `cacheMaxAge` | `number` | `2592000` (30 gün) | Yanıt `Cache-Control` max-age (saniye). Disk önbelleği `.jskelet/image-cache/`. |
+| `fetchTimeoutMs` | `number` | `10000` | Upstream fetch zaman aşımı. |
+| `maxBytes` | `number` | `10485760` (10 MiB) | Upstream gövde üst sınırı. |
 
-`false` verilirse görsel adımı hiç çalışmaz. Adım `sharp` gerektirir ve watch
-turunda hiç çalışmaz. Ayrıntı: [08-build.md](./08-build.md).
+`false` verilirse görsel adımı hiç çalışmaz. Build adımı `sharp` gerektirir ve
+watch turunda hiç çalışmaz. Remote açıksa `sharp` **runtime**'da da gerekir;
+yoksa optimizer kaynak URL'ye 302 yönlendirir. Ayrıntı: [08-build.md](./08-build.md).
 
 ```js
-images: { widths: [400, 800, 1200], quality: 82, skip: ["indirmeler"] }
+images: {
+  widths: [400, 800, 1200],
+  quality: 82,
+  skip: ["indirmeler"],
+  remote: {
+    allowHosts: ["static.ornek.com", "*.cdn.ornek.com"],
+  },
+}
 ```
 
+`image({ src: "https://static.ornek.com/a.jpg", width: 96, alt: "…" })` bu
+ayarla `src` / `srcset`'i `/_jskelet/image?url=…&w=96` biçimine çevirir.
+Elle URL kurmak için `remoteImageUrl(src, { width })` (`jskelet`).
+
 ## `clientEnv`
 
 **Tip:** `string[]` — **Varsayılan:** `[]`

package/docs/08-build.md

@@ -290,6 +290,13 @@ değiştirmez ([04-render-ve-sablonlar.md](./04-render-ve-sablonlar.md)).
 Bu adım `sharp` gerektirir. Kurulu değilse adım sessizce atlanır ve `image()`
 orijinal dosyaya döner. Watch turunda hiç çalışmaz.
 
+## Runtime uzak görsel proxy
+
+`images.remote.allowHosts` verilirse `createApp` `/_jskelet/image` ucunu
+mount eder. CMS / CDN kapakları build'e girmediği için `image()` bu host'lardaki
+URL'leri `?url=&w=` biçiminde yeniden yazar; uç sharp ile webp üretir ve
+`.jskelet/image-cache/` altına yazar. Ayrıntı: [07-yapilandirma.md](./07-yapilandirma.md).
+
 ## Precompress
 
 Build çıktısı varlıkların brotli (kalite 11) ve gzip (seviye 9) kopyalarını

package/docs/09-dev-araclari.md

@@ -170,9 +170,9 @@ basılır:
 ```
 
 Overlay dosyası **build'e dâhil değildir.** Sunucu onu framework paketinden ham
-olarak servis eder; bu yüzden içinde bundler yoktur, tek dosya olarak çalışır ve
-prod çıktısına hiçbir şey eklemez. Tüm arayüz shadow DOM içinde durur, sayfanın
-CSS'i ile karışmaz.
+olarak servis eder; bundler yoktur. Aynı dizindeki `seo.js` gibi kardeş
+modüller native ESM import ile yüklenir ve prod çıktısına hiçbir şey eklenmez.
+Tüm arayüz shadow DOM içinde durur, sayfanın CSS'i ile karışmaz.
 
 Gösterdikleri:
 
@@ -180,6 +180,14 @@ Gösterdikleri:
   (`img`/`script`/`link`), ve sunucudaki `console.error` / `console.warn`
   çıktıları. Sunucu tarafında `console` sarılır, böylece uyarılar terminalde
   kaybolmaz.
+- **SEO:** açık sayfanın istemci tarafı taraması — title ve meta description
+  uzunluğu, `html lang`, viewport, canonical, robots/`noindex`, Open Graph ve
+  Twitter etiketleri, H1/outline, görsel `alt`, boş linkler ve JSON-LD parse
+  hataları. Bulgular panelde listelenir; **Highlight issues on the page**
+  açılınca sorunlu elemanların üzerine kırmızı (error) veya sarı (warning)
+  dikdörtgenler çizilir, kenarda kısa başlık durur. Etikete (ya da panel
+  satırına) tıklanınca ayrıntılı açıklama açılır. Tarama overlay'in yanındaki
+  `/seo.js` dosyasındadır; production paketine girmez.
 - **İstekler:** her HTML isteğinin metodu, yolu, durumu, süresi ve
   `X-JSkelet-Cache` değeri. Aynı satırlar terminale de basılır.
 - **Web Vitals:** TTFB, FCP, LCP, CLS, INP, DCL, load, uzun task sayısı ve
@@ -261,6 +269,7 @@ Rapor katmanı yalnızca development'ta yüklenir, üretim çıktısına hiç gi
 | Yol | Metot | İşi |
 | --- | --- | --- |
 | `/overlay.js` | GET | Overlay script'i |
+| `/seo.js` | GET | SEO tarama + sayfa highlight yardımcısı (overlay import eder) |
 | `/logo.png` | GET | Overlay logosu |
 | `/ws` | GET (upgrade) | Canlı kanal: istatistikler, live reload ve CSS hot-swap olayları |
 | `/events` | GET | SSE: yalnızca WebSocket kurulamazsa kullanılan yedek olay akışı |

package/docs/10-dagitim.md

@@ -97,6 +97,7 @@ ENV HOST=0.0.0.0
 
 COPY package.json package-lock.json ./
 # sharp ve tailwind yalnızca build zamanı gerekli; çalışma imajına girmesin.
+# images.remote kullanıyorsanız sharp'ı production dependencies'e alın.
 RUN npm ci --omit=dev && npm cache clean --force
 
 COPY --from=build /app/jskelet.config.mjs ./jskelet.config.mjs
@@ -126,9 +127,11 @@ Notlar:
   anında yapılıyor. `lib/` yalnızca projenizde varsa kopyalayın.
 - **`.jskelet/` gerekir:** `manifest.json` olmadan `asset()` hash'li URL'leri
   bulamaz ve `jskelet start` build'i baştan çalıştırmaya kalkar.
-- **`sharp` çalışma imajında gerekmez:** yalnızca build zamanı görsel
+- **`sharp` çalışma imajında genelde gerekmez:** yalnızca build zamanı görsel
   optimizasyonu için. `--omit=dev` ile dışarıda kalır (devDependency olarak
-  kurulmuşsa).
+  kurulmuşsa). **`images.remote` açıksa** sharp runtime bağımlılığıdır —
+  production `dependencies`'e alın ya da runtime imajında ayrıca kurun; yoksa
+  optimizer kaynak URL'ye 302 yönlendirir.
 - `jskelet start`ı `npx` olmadan çağırmak isterseniz
   `CMD ["node", "node_modules/jskelet/bin/jskelet.mjs", "start"]` de çalışır.
 

package/docs/11-tasima.md

@@ -96,9 +96,10 @@ Bunları taşıma planında baştan hesaba katın:
   önce belgeyi hazırlar, `viewTransition` geçişi yumuşatır
   ([07](./07-yapilandirma.md)).
 - **Server Actions.** Form gönderimleri normal `app.post(...)` handler'larıdır.
-- **Otomatik görsel optimizasyonu (istek anında).** Optimizasyon build zamanında
-  yapılır ve yalnızca `public/` altındaki yerel görselleri kapsar; uzak görseller
-  olduğu gibi basılır.
+- **Otomatik görsel optimizasyonu (istek anında).** Yerel `public/` görselleri
+  hâlâ build zamanında optimize edilir. Uzak `http(s)` görseller
+  `images.remote.allowHosts` verilirse çalışma anında proxy edilir
+  (`/_jskelet/image` → webp); config yoksa olduğu gibi basılır.
 
 ## Yan yana örnek
 

package/docs/README.md

@@ -24,7 +24,7 @@ eşlenik tutuluyor; birini değiştiriyorsan diğerini de değiştir.
 | [06-cache.md](./06-cache.md) | `withHtmlCache`, `revalidate`, stale-while-revalidate, cache anahtarı, `X-JSkelet-Cache`, istek içi cache, degraded render, prewarm |
 | [07-yapilandirma.md](./07-yapilandirma.md) | `jskelet.config.mjs` tam referansı, `source` desen sözdizimi, ortam değişkenleri tablosu |
 | [08-build.md](./08-build.md) | Build hattı, manifest, hash'li varlıklar, CSS/Tailwind `@source`, fontlar, ikon sprite, görsel optimizasyonu, precompress |
-| [09-dev-araclari.md](./09-dev-araclari.md) | `jskelet dev` akışı, watch dizinleri, CSS hot-swap, devtools overlay (Alt+D), rapor sayfası, dev gate |
+| [09-dev-araclari.md](./09-dev-araclari.md) | `jskelet dev` akışı, watch dizinleri, CSS hot-swap, devtools overlay (Alt+D, SEO highlight), rapor sayfası, dev gate |
 | [10-dagitim.md](./10-dagitim.md) | Prod build + start, ortam değişkenleri, Docker, ters proxy, sağlık kontrolü |
 | [11-tasima.md](./11-tasima.md) | Next.js'ten taşıma: karşılık tablosu ve adım adım plan |
 | [12-panel-ve-oturum.md](./12-panel-ve-oturum.md) | Kişiye özel sayfalar: `private: true`, imzalı cookie oturumu, CSRF, `fragment()`, parça takası ve form döngüsü |

package/docs/en/02-architecture.md

@@ -42,6 +42,8 @@ Request
  ├─ staticPrecompressed            .br/.gz copies produced at build (quality 11)
  ├─ express.static                 files under public/
  ├─ (dev) devtools                 only when NODE_ENV=development
+ ├─ admin (if enabled)             /_jskelet/admin
+ ├─ image optimizer (remote)       /_jskelet/image — when allowHosts is set
  ├─ body parsers                   urlencoded 64kb + json 256kb
  ├─ rewrites(afterFiles)           after static has been tried
  ├─ routes

package/docs/en/04-rendering.md

@@ -389,12 +389,16 @@ Behaviour:
 
 - For local raster images under `public/`, the webp variants generated at build
   time (`.jskelet/images.json`) are added automatically as `srcset` plus
-  intrinsic `width`/`height`. Images that are not in the manifest, or remote
-  ones, are emitted as-is.
-- If `srcset` is given by hand, or `unoptimized: true` is set, the manifest is
-  not consulted at all.
+  intrinsic `width`/`height`. Local paths missing from the manifest are emitted
+  as-is.
+- When `images.remote.allowHosts` is set, remote `http(s)` URLs are rewritten to
+  the `/_jskelet/image?url=&w=` proxy (webp). If `width` is set, `srcset`
+  includes 1x/2x plus config `widths`.
+- If `srcset` is given by hand, or `unoptimized: true` is set, neither the
+  manifest nor the remote proxy is used.
 - If only **one** variant was produced (because the source is already small),
-  `srcset`/`sizes` are not written; they would be pure noise.
+  `srcset`/`sizes` are not written; they would be pure noise. For remote images,
+  a single width still rewrites `src` to the optimized URL.
 - If `sizes` is not given a reasonable default is produced: the image is not
   scaled beyond its own intrinsic width, and it fills the viewport on narrow
   screens (`(max-width: Npx) 100vw, Npx`).

package/docs/en/07-configuration.md

@@ -494,24 +494,52 @@ icons: { scan: ["views", "client", "routes", "lib", "content"] }
 
 ## `images`
 
-**Type:** `{ widths?: number[], quality?: number, skip?: string[] } | false` —
-**Default:** `{}`
+**Type:**
+`{ widths?: number[], quality?: number, skip?: string[], remote?: { allowHosts: string[], path?: string, maxWidth?: number, cacheMaxAge?: number, fetchTimeoutMs?: number, maxBytes?: number } | false } | false`
+— **Default:** `{ widths, quality, skip, remote: false }` (remote off)
 
-Generates webp variants of the png/jpg images under `public/`.
+Generates webp variants of png/jpg files under `public/` at **build** time.
+When `remote.allowHosts` is set, also proxies remote images at runtime
+(`/_jskelet/image?url=&w=&q=` → webp).
 
 | Field | Type | Default | Meaning |
 | --- | --- | --- | --- |
-| `widths` | `number[]` | `[400, 640, 960, 1280, 1920]` | Widths to generate. Ones larger than the source are dropped; the source's own width (at most 1920) is always added. |
-| `quality` | `number` | `78` | webp quality. When it changes, the encoder signature changes and every image is re-encoded. |
-| `skip` | `string[]` | `[]` | **Directory names** not to scan. `assets` and `fonts` are always skipped. |
+| `widths` | `number[]` | `[400, 640, 960, 1280, 1920]` | Candidates for build and remote `srcset`. Ones larger than the source are dropped at build; the source's own width (at most 1920) is always added. |
+| `quality` | `number` | `78` | webp quality. Part of the build encoder signature; default `q` on the remote endpoint. |
+| `skip` | `string[]` | `[]` | **Directory names** not to scan at build. `assets` and `fonts` are always skipped. |
+| `remote` | `object \| false` | off | Runtime optimizer. `allowHosts` is **required**; empty disables the route. |
+
+### `images.remote`
 
-If `false` is given, the image step never runs. The step requires `sharp` and
-never runs on a watch pass. Details: [08-build.md](./08-build.md).
+| Field | Type | Default | Meaning |
+| --- | --- | --- | --- |
+| `allowHosts` | `string[]` | `[]` | Hosts that may be fetched. Supports a `*.cdn.example.com` suffix wildcard. |
+| `path` | `string` | `/_jskelet/image` | Optimizer GET path. |
+| `maxWidth` | `number` | `1920` | Cap for `w`. |
+| `cacheMaxAge` | `number` | `2592000` (30 days) | Response `Cache-Control` max-age (seconds). Disk cache under `.jskelet/image-cache/`. |
+| `fetchTimeoutMs` | `number` | `10000` | Upstream fetch timeout. |
+| `maxBytes` | `number` | `10485760` (10 MiB) | Upstream body size limit. |
+
+If `false` is given, neither surface runs. The build step requires `sharp` and
+never runs on a watch pass. With remote enabled, `sharp` is also needed at
+**runtime**; without it the optimizer 302-redirects to the source URL. Details:
+[08-build.md](./08-build.md).
 
 ```js
-images: { widths: [400, 800, 1200], quality: 82, skip: ["downloads"] }
+images: {
+  widths: [400, 800, 1200],
+  quality: 82,
+  skip: ["downloads"],
+  remote: {
+    allowHosts: ["static.example.com", "*.cdn.example.com"],
+  },
+}
 ```
 
+`image({ src: "https://static.example.com/a.jpg", width: 96, alt: "…" })`
+rewrites `src` / `srcset` to `/_jskelet/image?url=…&w=96`. To build URLs by
+hand, use `remoteImageUrl(src, { width })` from `jskelet`.
+
 ## `clientEnv`
 
 **Type:** `string[]` — **Default:** `[]`

package/docs/en/08-build.md

@@ -305,6 +305,13 @@ to the `.jskelet/images.json` manifest. `image()` looks at that manifest and add
 This step requires `sharp`. If it is not installed the step is silently skipped
 and `image()` falls back to the original file. It never runs on a watch pass.
 
+## Runtime remote image proxy
+
+When `images.remote.allowHosts` is set, `createApp` mounts `/_jskelet/image`.
+CMS / CDN covers never enter the build, so `image()` rewrites those host URLs to
+`?url=&w=`; the endpoint encodes webp with sharp and stores files under
+`.jskelet/image-cache/`. Details: [07-configuration.md](./07-configuration.md).
+
 ## Precompress
 
 Produces brotli (quality 11) and gzip (level 9) copies of the built assets:

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

@@ -173,9 +173,10 @@ by clicking the backdrop. It is only emitted by the layout when
 ```
 
 The overlay file is **not part of the build.** The server serves it raw from the
-framework package; that is why there is no bundler involved, it works as a
-single file, and it adds nothing to the production output. The entire UI lives
-inside a shadow DOM and does not mix with the page's CSS.
+framework package; that is why there is no bundler involved. It loads sibling
+modules such as `seo.js` with native ESM imports, and it adds nothing to the
+production output. The entire UI lives inside a shadow DOM and does not mix with
+the page's CSS.
 
 What it shows:
 
@@ -183,6 +184,14 @@ What it shows:
   (`img`/`script`/`link`), and the server's `console.error` / `console.warn`
   output. On the server side `console` is wrapped so warnings do not get lost in
   the terminal.
+- **SEO:** a client-side scan of the current page — title and meta description
+  length, `html lang`, viewport, canonical, robots/`noindex`, Open Graph and
+  Twitter tags, H1/outline, image `alt`, empty links, and JSON-LD parse errors.
+  Findings appear in the panel; turning on **Highlight issues on the page**
+  draws red (error) or yellow (warning) boxes on the elements, with a short
+  title on the border. Clicking the label (or a row in the panel) opens the
+  full explanation. The scan lives in `/seo.js` next to the overlay and is not
+  part of the production bundle.
 - **Requests:** the method, path, status, duration and `X-JSkelet-Cache` value
   of every HTML request. The same lines are printed to the terminal too.
 - **Web Vitals:** TTFB, FCP, LCP, CLS, INP, DCL, load, long task count and
@@ -265,6 +274,7 @@ Under `brand.devBasePath` (default `/__jskelet/dev`):
 | Path | Method | Job |
 | --- | --- | --- |
 | `/overlay.js` | GET | The overlay script |
+| `/seo.js` | GET | SEO scan + page highlight helper (imported by the overlay) |
 | `/logo.png` | GET | The overlay logo |
 | `/ws` | GET (upgrade) | Live channel: statistics, live reload and CSS hot-swap events |
 | `/events` | GET | SSE: the fallback event stream, used only when WebSocket cannot be established |

package/docs/en/10-deployment.md

@@ -98,6 +98,7 @@ ENV HOST=0.0.0.0
 
 COPY package.json package-lock.json ./
 # sharp and tailwind are only needed at build time; keep them out of the runtime image.
+# If you use images.remote, move sharp to production dependencies.
 RUN npm ci --omit=dev && npm cache clean --force
 
 COPY --from=build /app/jskelet.config.mjs ./jskelet.config.mjs
@@ -127,9 +128,11 @@ Notes:
   rendering happens at runtime. Copy `lib/` only if your project has one.
 - **`.jskelet/` is needed:** without `manifest.json`, `asset()` cannot find the
   hashed URLs and `jskelet start` will try to run the build from scratch.
-- **`sharp` is not needed in the runtime image:** it is only for build-time image
-  optimization. `--omit=dev` leaves it out (if it was installed as a
-  devDependency).
+- **`sharp` is usually not needed in the runtime image:** it is only for
+  build-time image optimization. `--omit=dev` leaves it out (if it was installed
+  as a devDependency). **If `images.remote` is enabled**, sharp is a runtime
+  dependency — move it to production `dependencies` or install it in the
+  runtime image; otherwise the optimizer 302-redirects to the source URL.
 - If you would rather call `jskelet start` without `npx`,
   `CMD ["node", "node_modules/jskelet/bin/jskelet.mjs", "start"]` works too.
 

package/docs/en/11-migration.md

@@ -99,9 +99,10 @@ Account for these from the start in your migration plan:
   `viewTransition` smooths the transition
   ([07](./07-configuration.md)).
 - **Server Actions.** Form submissions are ordinary `app.post(...)` handlers.
-- **Automatic image optimization (at request time).** Optimization happens at
-  build time and only covers local images under `public/`; remote images are
-  emitted as-is.
+- **Automatic image optimization (at request time).** Local `public/` images
+  are still optimized at build time. Remote `http(s)` images can be proxied at
+  runtime when `images.remote.allowHosts` is set (`/_jskelet/image` → webp);
+  without that config they are emitted as-is.
 
 ## A side-by-side example
 

package/docs/en/README.md

@@ -27,7 +27,7 @@ change one, change the other.
 | [06-caching.md](./06-caching.md) | `withHtmlCache`, `revalidate`, stale-while-revalidate, the cache key, `X-JSkelet-Cache`, in-request cache, degraded render, prewarm |
 | [07-configuration.md](./07-configuration.md) | Full `jskelet.config.mjs` reference, the `source` pattern syntax, environment variable table |
 | [08-build.md](./08-build.md) | The build pipeline, the manifest, hashed assets, CSS/Tailwind `@source`, fonts, icon sprite, image optimization, precompress |
-| [09-dev-tools.md](./09-dev-tools.md) | The `jskelet dev` flow, watch directories, CSS hot-swap, devtools overlay (Alt+D), the report page, the dev gate |
+| [09-dev-tools.md](./09-dev-tools.md) | The `jskelet dev` flow, watch directories, CSS hot-swap, devtools overlay (Alt+D, SEO highlight), the report page, the dev gate |
 | [10-deployment.md](./10-deployment.md) | Prod build + start, environment variables, Docker, reverse proxy, health check |
 | [11-migration.md](./11-migration.md) | Migrating from Next.js: the equivalence table and a step-by-step plan |
 | [12-dashboards-and-sessions.md](./12-dashboards-and-sessions.md) | Per-visitor pages: `private: true`, signed cookie sessions, CSRF, `fragment()`, swapping regions and the form loop |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jskelet",
-  "version": "0.4.3",
+  "version": "0.4.5",
   "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",