@decocms/start 0.19.0

package/.cursor/skills/deco-to-tanstack-migration/references/imports/README.md

@@ -0,0 +1,70 @@
+# Preact -> React Import Migration
+
+Mechanical find-and-replace. Safe to automate with `sed`.
+
+## Replacements
+
+| Find | Replace |
+|------|---------|
+| `from "preact/hooks"` | `from "react"` |
+| `from "preact/compat"` | `from "react"` |
+| `from "preact"` | `from "react"` |
+
+## Special Cases
+
+### ComponentChildren -> ReactNode
+
+Preact's `ComponentChildren` maps to React's `ReactNode`:
+
+```typescript
+// OLD
+import type { ComponentChildren } from "preact";
+
+// NEW
+import type { ReactNode as ComponentChildren } from "react";
+```
+
+If you want to modernize fully, rename `ComponentChildren` to `ReactNode` across the codebase.
+
+### JSX type
+
+```typescript
+// OLD
+import type { JSX } from "preact";
+
+// NEW (works unchanged)
+import type { JSX } from "react";
+```
+
+### FunctionalComponent -> FC
+
+```typescript
+// OLD
+const Foo: preact.FunctionalComponent<Props> = ...
+
+// NEW
+import React from "react";
+const Foo: React.FC<Props> = ...
+```
+
+## Automation
+
+```bash
+# Bulk replace (macOS sed)
+find src/ -name '*.ts' -o -name '*.tsx' | xargs sed -i '' \
+  -e 's|from "preact/hooks"|from "react"|g' \
+  -e 's|from "preact/compat"|from "react"|g'
+
+# Bare preact requires care (don't match preact/hooks or preact/compat)
+find src/ -name '*.ts' -o -name '*.tsx' | xargs sed -i '' \
+  's|from "preact"|from "react"|g'
+```
+
+Then handle `ComponentChildren` files individually.
+
+## Verification
+
+```bash
+grep -r 'from "preact' src/ --include='*.ts' --include='*.tsx'
+# Should return ZERO matches
+```

package/.cursor/skills/deco-to-tanstack-migration/references/platform-hooks/README.md

@@ -0,0 +1,154 @@
+# Platform Hooks Migration
+
+Platform hooks (useCart, useUser, useWishlist) are the most complex migration target because they have real business logic.
+
+## Strategy
+
+All hooks are **site-local**. No Vite alias tricks. No compat layers.
+
+- Active platform hooks (VTEX for this store) -> `~/hooks/useCart.ts` with real implementation
+- Inactive platform hooks (Wake, Shopify, etc.) -> `~/hooks/platform/{name}.ts` with no-op stubs
+- Auth hooks -> `~/hooks/useUser.ts`, `~/hooks/useWishlist.ts`
+
+## VTEX useCart (Real Implementation)
+
+### Why Server Functions Are Required
+
+The storefront domain (e.g., `my-store.deco.site`) differs from the VTEX checkout domain (`account.vtexcommercestable.com.br`). Direct browser `fetch()` calls are blocked by CORS. Additionally, VTEX API credentials (`AppKey`/`AppToken`) must stay server-side.
+
+Use TanStack Start `createServerFn` to create server-side proxy functions that the client hook calls transparently.
+
+### Server Functions (~/lib/vtex-cart-server.ts)
+
+```typescript
+import { createServerFn } from "@tanstack/react-start";
+
+const ACCOUNT = "myaccount";
+const API_KEY = process.env.VTEX_APP_KEY!;
+const API_TOKEN = process.env.VTEX_APP_TOKEN!;
+
+export const getOrCreateCart = createServerFn({ method: "GET" })
+  .validator((orderFormId: string) => orderFormId)
+  .handler(async ({ data: orderFormId }) => {
+    const url = orderFormId
+      ? `https://${ACCOUNT}.vtexcommercestable.com.br/api/checkout/pub/orderForm/${orderFormId}`
+      : `https://${ACCOUNT}.vtexcommercestable.com.br/api/checkout/pub/orderForm`;
+    const res = await fetch(url, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-VTEX-API-AppKey": API_KEY,
+        "X-VTEX-API-AppToken": API_TOKEN,
+      },
+      body: JSON.stringify({ expectedOrderFormSections: ["items", "totalizers", "shippingData", "clientPreferencesData", "storePreferencesData", "marketingData"] }),
+    });
+    return res.json();
+  });
+
+export const addItemsToCart = createServerFn({ method: "POST" })
+  .validator((data: { orderFormId: string; items: any[] }) => data)
+  .handler(async ({ data }) => {
+    const res = await fetch(
+      `https://${ACCOUNT}.vtexcommercestable.com.br/api/checkout/pub/orderForm/${data.orderFormId}/items`,
+      {
+        method: "POST",
+        headers: { "Content-Type": "application/json", "X-VTEX-API-AppKey": API_KEY, "X-VTEX-API-AppToken": API_TOKEN },
+        body: JSON.stringify({ orderItems: data.items }),
+      },
+    );
+    return res.json();
+  });
+
+export const updateCartItems = createServerFn({ method: "POST" })
+  .validator((data: { orderFormId: string; items: any[] }) => data)
+  .handler(async ({ data }) => {
+    const res = await fetch(
+      `https://${ACCOUNT}.vtexcommercestable.com.br/api/checkout/pub/orderForm/${data.orderFormId}/items/update`,
+      {
+        method: "POST",
+        headers: { "Content-Type": "application/json", "X-VTEX-API-AppKey": API_KEY, "X-VTEX-API-AppToken": API_TOKEN },
+        body: JSON.stringify({ orderItems: data.items }),
+      },
+    );
+    return res.json();
+  });
+```
+
+### Hook (~/hooks/useCart.ts)
+
+Key design decisions:
+- **Module-level singleton state** shared across all component instances
+- **Pub/sub pattern** (`_listeners` Set) for notifying React components of changes
+- **Cookie-based session**: reads/writes `checkout.vtex.com__orderFormId` on the **client** side (not VTEX's domain cookie)
+- Returns `cart` and `loading` with `.value` getter/setter for backward compat with Preact-era components
+- Lazy initialization: cart is fetched on first component mount, not on module load
+- Exports `itemToAnalyticsItem` for cart-specific analytics mapping
+
+### Cross-Domain Checkout
+
+The minicart's "Finalizar Compra" button must link to the VTEX checkout domain with the `orderFormId` as a query parameter — the VTEX domain can't read the storefront's cookies:
+
+```typescript
+const checkoutUrl = `https://secure.${STORE_DOMAIN}/checkout/?orderFormId=${orderFormId}`;
+```
+
+### VTEX Types (~/types/vtex.ts)
+
+Site-local types for VTEX-specific structures:
+- `OrderFormItem`, `SimulationOrderForm`, `Sla`, `SKU`, `VtexProduct`
+
+## Inactive Platform Stubs
+
+For non-VTEX platforms, create minimal no-op files:
+
+```typescript
+// ~/hooks/platform/wake.ts
+export function useCart() {
+  return {
+    cart: { value: null },
+    loading: { value: false },
+    addItem: async (_params: any) => {},
+    updateItems: async (_params: any) => {},
+    removeItem: async (_index: any) => {},
+  };
+}
+
+export function useUser() {
+  return {
+    user: { value: null as { email?: string; name?: string } | null },
+    loading: { value: false },
+  };
+}
+
+export function useWishlist() {
+  return {
+    loading: { value: false },
+    addItem: async (_props: any) => {},
+    removeItem: async (_props: any) => {},
+    getItem: (_props: any) => undefined as any,
+  };
+}
+```
+
+Create similar stubs for: `shopify.ts`, `linx.ts`, `vnda.ts`, `nuvemshop.ts`.
+
+Match the return shape to what each platform's AddToCartButton expects (some use `addItem`, others `addItems`).
+
+## Import Rewrites
+
+```bash
+sed -i '' 's|from "apps/vtex/hooks/useCart.ts"|from "~/hooks/useCart"|g'
+sed -i '' 's|from "apps/vtex/hooks/useUser.ts"|from "~/hooks/useUser"|g'
+sed -i '' 's|from "apps/vtex/hooks/useWishlist.ts"|from "~/hooks/useWishlist"|g'
+sed -i '' 's|from "apps/vtex/utils/types.ts"|from "~/types/vtex"|g'
+sed -i '' 's|from "apps/shopify/hooks/useCart.ts"|from "~/hooks/platform/shopify"|g'
+sed -i '' 's|from "apps/wake/hooks/useCart.ts"|from "~/hooks/platform/wake"|g'
+# etc. for all platforms
+```
+
+## Verification
+
+```bash
+grep -r 'from "apps/' src/ --include='*.ts' --include='*.tsx'
+# Should return ZERO matches
+```

package/.cursor/skills/deco-to-tanstack-migration/references/signals/README.md

@@ -0,0 +1,220 @@
+# @preact/signals -> TanStack Store Migration
+
+Two distinct patterns need different handling.
+
+## Pattern A: Component Hooks (useSignal, useComputed)
+
+These are component-local state. Replace with React hooks directly.
+
+### useSignal -> useState
+
+```typescript
+// OLD
+import { useSignal } from "@preact/signals";
+const loading = useSignal(false);
+loading.value = true;          // write
+if (loading.value) { ... }     // read
+
+// NEW
+import { useState } from "react";
+const [loading, setLoading] = useState(false);
+setLoading(true);              // write
+if (loading) { ... }           // read
+```
+
+Setter naming convention: `set` + capitalized variable name.
+
+### useComputed -> useMemo
+
+```typescript
+// OLD
+import { useComputed } from "@preact/signals";
+const isValid = useComputed(() => name.value.length > 0);
+return <div>{isValid.value}</div>;
+
+// NEW
+import { useMemo } from "react";
+const isValid = useMemo(() => name.length > 0, [name]);
+return <div>{isValid}</div>;
+```
+
+### Automation Tips
+
+- `useSignal`/`useComputed` changes are NOT safe for bulk sed (variable names, setter names, `.value` removal all differ per file)
+- Process each file individually: read, identify variable names, transform
+- Watch for: toggle patterns (`x.value = !x.value` -> `setX(prev => !prev)`), object state, conditional assignments
+
+## Pattern B: Module-Level Signals (Global State)
+
+These create shared state across components. Use `@tanstack/store`.
+
+### Create ~/sdk/signal.ts
+
+```typescript
+import { Store } from "@tanstack/store";
+import { useSyncExternalStore, useMemo } from "react";
+
+export interface Signal<T> {
+  readonly store: Store<T>;
+  value: T;
+  peek(): T;
+  subscribe(fn: () => void): () => void;
+}
+
+export function signal<T>(initialValue: T): Signal<T> {
+  const store = new Store<T>(initialValue);
+  return {
+    store,
+    get value() { return store.state; },
+    set value(v: T) { store.setState(() => v); },
+    peek() { return store.state; },
+    subscribe(fn) {
+      // CRITICAL: @tanstack/store@0.9.x returns { unsubscribe: Function },
+      // NOT a plain function. React's useSyncExternalStore and useEffect
+      // cleanup both expect a bare function. Passing the object causes
+      // "TypeError: destroy_ is not a function" at runtime.
+      const sub = store.subscribe(() => fn());
+      return typeof sub === "function" ? sub : sub.unsubscribe;
+    },
+  };
+}
+
+export function useSignal<T>(initialValue: T): Signal<T> {
+  const sig = useMemo(() => signal(initialValue), []);
+  useSyncExternalStore(
+    (cb) => sig.subscribe(cb),
+    () => sig.value,
+    () => sig.value,
+  );
+  return sig;
+}
+
+export function useComputed<T>(fn: () => T): Signal<T> {
+  const sig = useMemo(() => signal(fn()), []);
+  return sig;
+}
+
+export function computed<T>(fn: () => T): Signal<T> {
+  return signal(fn());
+}
+
+export function effect(fn: () => void | (() => void)): () => void {
+  const cleanup = fn();
+  return typeof cleanup === "function" ? cleanup : () => {};
+}
+
+export function batch(fn: () => void): void {
+  fn();
+}
+
+export function useSignalEffect(fn: () => void | (() => void)): void {
+  fn();
+}
+
+export type { Signal as ReadonlySignal };
+```
+
+> **WARNING**: The `subscribe()` unwrapping is the single most critical line in
+> this file. Without it, every component using `useSignal` will crash with
+> "TypeError: J is not a function" (minified) or "TypeError: destroy_ is not a
+> function" (non-minified), which then cascades into React #419 hydration
+> failures and #130 undefined component errors across the entire page.
+
+### Replace Imports
+
+```bash
+# Safe for bulk sed
+sed -i '' 's|from "@preact/signals"|from "~/sdk/signal"|g'
+```
+
+### React Subscriptions
+
+The signal shim's `.value` getter/setter does NOT create automatic React subscriptions. Reading `signal.value` during render won't re-render when the signal changes. This is the #1 source of "it works in Preact but not React" bugs.
+
+Replace manual useEffect+subscribe boilerplate with `useStore`:
+
+```typescript
+// OLD (manual subscription -- works but verbose)
+const { displayCart } = useUI();
+const [open, setOpen] = useState(false);
+useEffect(() => {
+  setOpen(displayCart.value);
+  return displayCart.subscribe(() => setOpen(displayCart.value));
+}, []);
+
+// NEW (useStore from @tanstack/react-store -- recommended)
+import { useStore } from "@tanstack/react-store";
+const { displayCart } = useUI();
+const open = useStore(displayCart.store);
+```
+
+Write-only consumers (event handlers) don't need `useStore`:
+```typescript
+// This still works -- .value setter backed by TanStack Store
+onClick={() => { displayCart.value = true; }}
+```
+
+### DaisyUI Drawer Workaround
+
+DaisyUI drawers use a hidden checkbox to toggle visibility. Since signal changes don't trigger React re-renders, the checkbox `checked` attribute never updates. Pragmatic workaround: directly toggle the DOM checkbox alongside the signal:
+
+```typescript
+// After setting the signal, also toggle the drawer checkbox
+displayCart.value = true;
+const checkbox = document.getElementById("cart-drawer") as HTMLInputElement;
+if (checkbox) checkbox.checked = true;
+```
+
+This is an interim pattern until all signal consumers use `useStore`. The `useStore` approach is the proper fix because it makes the Drawer component re-render, which updates the checkbox `checked` prop through React.
+
+### Global State Hook Pattern (useCart, useUI)
+
+Hooks that manage global state (cart, UI drawers) need module-level singleton state with a subscription mechanism. The pattern:
+
+```typescript
+let _state: CartData | null = null;
+const _listeners = new Set<() => void>();
+
+function notify() { _listeners.forEach((fn) => fn()); }
+
+export function useCart() {
+  const [, forceUpdate] = useState(0);
+
+  useEffect(() => {
+    const listener = () => forceUpdate((n) => n + 1);
+    _listeners.add(listener);
+    return () => { _listeners.delete(listener); };
+  }, []);
+
+  return {
+    cart: {
+      get value() { return _state; },
+      set value(v) { _state = v; notify(); },
+    },
+    // ... methods that update _state and call notify()
+  };
+}
+```
+
+Every component calling `useCart()` subscribes to changes, and state updates trigger re-renders across all subscribers. This replaces the Preact signals global reactivity.
+
+## Signal Type References
+
+If components use `Signal<T>` as a prop type:
+
+```typescript
+// OLD
+import { Signal } from "@preact/signals";
+interface Props { quantity: Signal<number>; }
+
+// NEW
+import type { ReactiveSignal } from "~/sdk/signal";
+interface Props { quantity: ReactiveSignal<number>; }
+```
+
+## Verification
+
+```bash
+grep -r '@preact/signals' src/ --include='*.ts' --include='*.tsx'
+# Should return ZERO matches
+```

package/.cursor/skills/deco-to-tanstack-migration/references/vite-config/README.md

@@ -0,0 +1,78 @@
+# Vite Configuration
+
+## Final Config (Post-Migration)
+
+After all imports are rewritten, the config should be minimal:
+
+```typescript
+import { cloudflare } from "@cloudflare/vite-plugin";
+import { tanstackStart } from "@tanstack/react-start/plugin/vite";
+import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
+import { defineConfig } from "vite";
+import path from "path";
+
+const srcDir = path.resolve(__dirname, "src");
+
+export default defineConfig({
+  plugins: [
+    cloudflare({ viteEnvironment: { name: "ssr" } }),
+    tanstackStart({ server: { entry: "server" } }),
+    react({
+      babel: {
+        plugins: [["babel-plugin-react-compiler", { target: "19" }]],
+      },
+    }),
+    tailwindcss(),
+  ],
+  resolve: {
+    alias: {
+      "~": srcDir,
+    },
+  },
+});
+```
+
+**One alias only**: `~` -> `src/`. Nothing else.
+
+## tsconfig.json
+
+Must mirror the Vite alias:
+
+```json
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "moduleResolution": "bundler",
+    "module": "ESNext",
+    "target": "ES2022",
+    "skipLibCheck": true,
+    "strictNullChecks": true,
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["./src/*"]
+    }
+  },
+  "include": ["src/**/*", "vite.config.ts"]
+}
+```
+
+No `$store/*`, `site/*`, `apps/*`, `preact`, `@preact/signals`, `@deco/deco` paths. Those are all dead.
+
+## React Compiler
+
+The `babel-plugin-react-compiler` with `target: "19"` enables automatic memoization. Requires `@vitejs/plugin-react` instead of the default SWC plugin.
+
+Install: `npm install -D @vitejs/plugin-react babel-plugin-react-compiler`
+
+## Environment Variables
+
+For VTEX API keys, use Cloudflare Workers secrets or `.dev.vars`:
+
+```
+VTEX_ACCOUNT=mystore
+VTEX_APP_KEY=...
+VTEX_APP_TOKEN=...
+```
+
+Accessed via `process.env.*` in `createServerFn` handlers.

package/.cursor/skills/deco-to-tanstack-migration/templates/package-json.md

@@ -0,0 +1,55 @@
+# package.json Template
+
+```json
+{
+  "name": "my-tanstack-store",
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "npm run generate && vite dev",
+    "build": "npm run generate && vite build",
+    "generate": "npm run generate:blocks && npm run generate:invoke && npm run generate:schema",
+    "generate:blocks": "tsx node_modules/@decocms/start/scripts/generate-blocks.ts",
+    "generate:invoke": "tsx node_modules/@decocms/start/scripts/generate-invoke.ts",
+    "generate:schema": "tsx node_modules/@decocms/start/scripts/generate-schema.ts --site storefront",
+    "deploy": "wrangler deploy"
+  },
+  "dependencies": {
+    "@decocms/apps": "^0.20.1",
+    "@decocms/start": "^0.16.4",
+    "@tanstack/react-query": "^5.90.21",
+    "@tanstack/react-router": "^1.166.2",
+    "@tanstack/react-router-devtools": "^1.166.2",
+    "@tanstack/react-start": "^1.166.2",
+    "@tanstack/react-store": "^0.9.1",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4"
+  },
+  "devDependencies": {
+    "@cloudflare/vite-plugin": "^1.26.1",
+    "@tailwindcss/vite": "^4.2.1",
+    "@tanstack/router-generator": "^1.166.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "babel-plugin-react-compiler": "^1.0.0",
+    "daisyui": "^5.5.19",
+    "tailwindcss": "^4.2.1",
+    "tsx": "^4.19.2",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1",
+    "wrangler": "^4.14.1",
+    "@vitejs/plugin-react": "^4.5.2"
+  }
+}
+```
+
+## Notes
+
+- `@decocms/start` and `@decocms/apps` come from GitHub Packages — needs `.npmrc`:
+  ```
+  @decocms:registry=https://npm.pkg.github.com
+  //npm.pkg.github.com/:_authToken=${NODE_AUTH_TOKEN}
+  ```
+- Set `NODE_AUTH_TOKEN` in `.env` (add `.env` to `.gitignore`)
+- `generate` scripts run before dev and build to produce `blocks.gen.ts`, `invoke.gen.ts`, `meta.gen.json`
+- `tsx` is needed for the generate scripts (TypeScript execution)

package/.cursor/skills/deco-to-tanstack-migration/templates/root-route.md

@@ -0,0 +1,110 @@
+# __root.tsx Template
+
+```typescript
+import { useState } from "react";
+import {
+  createRootRoute,
+  HeadContent,
+  Outlet,
+  Scripts,
+  useRouterState,
+} from "@tanstack/react-router";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { LiveControls } from "@decocms/start/hooks";
+import { ANALYTICS_SCRIPT } from "@decocms/start/sdk/analytics";
+import appCss from "../styles/app.css?url";
+
+// Deco analytics event dispatcher — must be in <head> before any section renders
+const DECO_EVENTS_BOOTSTRAP = `
+window.DECO = window.DECO || {};
+window.DECO.events = window.DECO.events || {
+  _q: [],
+  dispatch: function(e) {
+    if (window.dataLayer) { window.dataLayer.push({ event: e.name, ecommerce: e.params }); }
+    this._q.push(e);
+  }
+};
+window.dataLayer = window.dataLayer || [];
+`;
+
+// Navigation progress bar CSS
+const PROGRESS_CSS = `
+@keyframes decoProgress{0%{width:0}30%{width:50%}60%{width:80%}100%{width:98%}}
+.deco-nav-progress{position:fixed;top:0;left:0;height:3px;background:var(--color-primary,#e53e3e);z-index:9999;animation:decoProgress 4s cubic-bezier(.4,0,.2,1) forwards;pointer-events:none;box-shadow:0 0 8px var(--color-primary,#e53e3e)}
+@keyframes decoFadeIn{from{opacity:0}to{opacity:1}}
+.deco-nav-overlay{position:fixed;inset:0;z-index:9998;pointer-events:none;background:rgba(255,255,255,0.15);animation:decoFadeIn .2s ease-out}
+`;
+
+function NavigationProgress() {
+  const isLoading = useRouterState({ select: (s) => s.isLoading });
+  if (!isLoading) return null;
+  return (
+    <>
+      <style dangerouslySetInnerHTML={{ __html: PROGRESS_CSS }} />
+      <div className="deco-nav-progress" />
+      <div className="deco-nav-overlay" />
+    </>
+  );
+}
+
+export const Route = createRootRoute({
+  head: () => ({
+    meta: [
+      { charSet: "utf-8" },
+      { name: "viewport", content: "width=device-width, initial-scale=1" },
+      { title: "My Store" },
+    ],
+    links: [
+      { rel: "preconnect", href: "https://fonts.googleapis.com" },
+      { rel: "preconnect", href: "https://fonts.gstatic.com", crossOrigin: "anonymous" },
+      // Add your font stylesheet here:
+      // { rel: "stylesheet", href: "https://fonts.googleapis.com/css2?family=..." },
+      { rel: "stylesheet", href: appCss },
+      { rel: "icon", href: "/favicon.ico" },
+    ],
+  }),
+  component: RootLayout,
+});
+
+function RootLayout() {
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            staleTime: import.meta.env.DEV ? 0 : 30_000,
+            gcTime: import.meta.env.DEV ? 0 : 5 * 60_000,
+            refetchOnWindowFocus: import.meta.env.DEV,
+          },
+        },
+      })
+  );
+
+  return (
+    <html lang="pt-BR" data-theme="light" suppressHydrationWarning>
+      <head>
+        <script dangerouslySetInnerHTML={{ __html: DECO_EVENTS_BOOTSTRAP }} />
+        <HeadContent />
+      </head>
+      <body className="bg-base-100 text-base-content" suppressHydrationWarning>
+        <NavigationProgress />
+        <QueryClientProvider client={queryClient}>
+          <Outlet />
+        </QueryClientProvider>
+        <LiveControls site={process.env.DECO_SITE_NAME} />
+        <script type="module" dangerouslySetInnerHTML={{ __html: ANALYTICS_SCRIPT }} />
+        <Scripts />
+      </body>
+    </html>
+  );
+}
+```
+
+## Key Points
+
+1. **QueryClientProvider** — Required even if not using React Query directly. @decocms/apps hooks may use it.
+2. **LiveControls** — Admin iframe bridge. `site` prop must match CMS site name.
+3. **DECO_EVENTS_BOOTSTRAP** — Must be in `<head>` before sections. Sections dispatch analytics events on render.
+4. **NavigationProgress** — Visual feedback during client-side navigation.
+5. **suppressHydrationWarning** — On `<html>` and `<body>` to avoid mismatches from browser extensions.
+6. **data-theme="light"** — Required for DaisyUI v4/v5 CSS variables to activate.