@exxatdesignux/ui 0.2.16 → 0.2.17

package/template/lib/table-state-lifecycle.ts

@@ -0,0 +1,474 @@
+"use client"
+
+/**
+ * Generic, opt-in lifecycle persistence for `useTableState`.
+ *
+ * - Any hub can persist its `DataTable` lifecycle (sort / search / filters /
+ *   column order / pin / width / hidden / row height / gridlines / etc.) to
+ *   `localStorage` by calling `useTableStateLifecycle({ namespace, tabId,
+ *   tableState, columnKeys })`. Don't call it → no persistence (the table
+ *   still works fine in memory).
+ * - Storage keys are namespaced (`exxat-ds:<namespace>:lifecycle:v1:<tabId>`)
+ *   so each hub owns its own keyspace and can't clobber another hub.
+ * - Hubs that need to persist EXTRA state alongside the table (e.g. the
+ *   placements table also persists `conditionalRules` + pagination) pass an
+ *   `extras` object and an `onLoadExtras` callback.
+ * - Saves are debounced (~400ms) and SSR-safe (no-op on the server).
+ *
+ * Replaces the older `lib/data-list-persistence.ts`, which was hard-coded to
+ * the placements / "data-list" route. That file now re-exports from here for
+ * back-compat so existing imports keep working during the migration window.
+ */
+
+import * as React from "react"
+import type { Dispatch, SetStateAction } from "react"
+import type { RowHeight } from "@/lib/row-height"
+import type { DataListDisplayOptions } from "@/lib/data-list-display-options"
+import type { ActiveFilter, ConditionalRule, SortRule } from "@/components/table-properties/types"
+import type { ViewTab } from "@/components/templates/list-page"
+import type { DataListViewType } from "@/lib/data-list-view"
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Storage key + debounce config
+// ─────────────────────────────────────────────────────────────────────────────
+
+const LIFECYCLE_SAVE_DEBOUNCE_MS = 400
+const PAGE_SAVE_DEBOUNCE_MS = 400
+
+/** Public so hubs that want to clear or namespace-scan storage can. */
+export function lifecycleStorageKey(namespace: string, tabId: string): string {
+  return `exxat-ds:${namespace}:lifecycle:v1:${tabId}`
+}
+
+export function pageStorageKey(namespace: string): string {
+  return `exxat-ds:${namespace}:page:v1`
+}
+
+// Module-level timer maps — one per namespace+tabId combo and one per page key.
+const lifecycleTimers = new Map<string, ReturnType<typeof setTimeout>>()
+const pageTimers = new Map<string, ReturnType<typeof setTimeout>>()
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Persisted shapes
+// ─────────────────────────────────────────────────────────────────────────────
+
+/**
+ * Versioned snapshot of a single table's lifecycle state. The fields under
+ * `extras` are entity-specific (e.g. placements stuff `conditionalRules` and
+ * pagination there) and opaque to this module. Older v1 records (pre-extras
+ * rollout) may have those entity-specific fields at the top level — the
+ * parser accepts both shapes for back-compat.
+ */
+export interface PersistedLifecycleV1 {
+  v: 1
+  sortRules: SortRule[]
+  search: string
+  activeFilters: ActiveFilter[]
+  filterConnectors: Record<string, "and" | "or">
+  groupBy: string | null
+  colOrder: string[]
+  hiddenCols: string[]
+  colWidths: Record<string, number>
+  colPins: Record<string, "left" | "right">
+  colWrap: Record<string, boolean>
+  colMenuSearch: Record<string, string>
+  rowHeight: RowHeight
+  showGridlines: boolean
+  filterBarVisible: boolean
+  searchOpen: boolean
+  /** Generic hub-defined extras. Persisted as JSON. */
+  extras?: Record<string, unknown>
+  /**
+   * @deprecated Legacy top-level fields (used by placements pre-extras
+   * rollout). New code SHOULD live under `extras`. Kept here so existing
+   * placements `localStorage` payloads still parse.
+   */
+  conditionalRules?: ConditionalRule[]
+  pagination?: boolean
+  paginationPage?: number
+  paginationPageSize?: number
+}
+
+export interface PersistedPageV1 {
+  v: 1
+  displayOptions: DataListDisplayOptions
+  showMetrics: boolean
+  tabs: ViewTab[]
+  activeTabId: string
+}
+
+/**
+ * Narrow surface the lifecycle hook needs from `useTableState` — getters +
+ * setters for every persisted slice. Defined as a structural type so
+ * callers can pass `tableState` directly (it satisfies this shape).
+ */
+export interface TableStatePersistSlice {
+  sortRules: SortRule[]
+  search: string
+  activeFilters: ActiveFilter[]
+  filterConnectors: Record<string, "and" | "or">
+  groupBy: string | null
+  colOrder: string[]
+  hiddenCols: Set<string>
+  colWidths: Record<string, number>
+  colPins: Record<string, "left" | "right">
+  colWrap: Record<string, boolean>
+  colMenuSearch: Record<string, string>
+  rowHeight: RowHeight
+  showGridlines: boolean
+  filterBarVisible: boolean
+  searchOpen: boolean
+  setSortRules: Dispatch<SetStateAction<SortRule[]>>
+  setSearch: Dispatch<SetStateAction<string>>
+  setActiveFilters: Dispatch<SetStateAction<ActiveFilter[]>>
+  setFilterConnectors: Dispatch<SetStateAction<Record<string, "and" | "or">>>
+  setGroupBy: Dispatch<SetStateAction<string | null>>
+  setColOrder: Dispatch<SetStateAction<string[]>>
+  setHiddenCols: Dispatch<SetStateAction<Set<string>>>
+  setColWidths: Dispatch<SetStateAction<Record<string, number>>>
+  setColPins: Dispatch<SetStateAction<Record<string, "left" | "right">>>
+  setColWrap: Dispatch<SetStateAction<Record<string, boolean>>>
+  setColMenuSearch: Dispatch<SetStateAction<Record<string, string>>>
+  setRowHeight: Dispatch<SetStateAction<RowHeight>>
+  setShowGridlines: Dispatch<SetStateAction<boolean>>
+  setFilterBarVisible: Dispatch<SetStateAction<boolean>>
+  setSearchOpen: Dispatch<SetStateAction<boolean>>
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Parsers + validators
+// ─────────────────────────────────────────────────────────────────────────────
+
+const VIEW_TYPES: DataListViewType[] = ["table", "list", "board", "dashboard"]
+
+function isViewType(v: unknown): v is DataListViewType {
+  return typeof v === "string" && (VIEW_TYPES as string[]).includes(v)
+}
+
+function parseViewTab(raw: unknown): ViewTab | null {
+  if (!raw || typeof raw !== "object") return null
+  const o = raw as Record<string, unknown>
+  if (typeof o.id !== "string" || typeof o.label !== "string") return null
+  if (!isViewType(o.viewType)) return null
+  if (typeof o.icon !== "string" || typeof o.filterId !== "string") return null
+  return { id: o.id, label: o.label, viewType: o.viewType, icon: o.icon, filterId: o.filterId }
+}
+
+export function parsePersistedPage(raw: string | null): PersistedPageV1 | null {
+  if (!raw) return null
+  try {
+    const j = JSON.parse(raw) as unknown
+    if (!j || typeof j !== "object") return null
+    const o = j as Record<string, unknown>
+    if (o.v !== 1) return null
+    if (!o.displayOptions || typeof o.displayOptions !== "object") return null
+    if (typeof o.showMetrics !== "boolean") return null
+    if (!Array.isArray(o.tabs) || typeof o.activeTabId !== "string") return null
+    const tabs = o.tabs.map(parseViewTab).filter((t): t is ViewTab => t !== null)
+    if (tabs.length === 0) return null
+    return {
+      v: 1,
+      displayOptions: o.displayOptions as DataListDisplayOptions,
+      showMetrics: o.showMetrics,
+      tabs,
+      activeTabId: o.activeTabId,
+    }
+  } catch {
+    return null
+  }
+}
+
+export function parsePersistedLifecycle(raw: string | null): PersistedLifecycleV1 | null {
+  if (!raw) return null
+  try {
+    const j = JSON.parse(raw) as unknown
+    if (!j || typeof j !== "object") return null
+    const o = j as Record<string, unknown>
+    if (o.v !== 1) return null
+    if (!Array.isArray(o.sortRules)) return null
+    if (typeof o.search !== "string") return null
+    if (!Array.isArray(o.activeFilters)) return null
+    if (!o.filterConnectors || typeof o.filterConnectors !== "object") return null
+    if (o.groupBy !== null && typeof o.groupBy !== "string") return null
+    if (!Array.isArray(o.colOrder)) return null
+    if (!Array.isArray(o.hiddenCols)) return null
+    if (!o.colWidths || typeof o.colWidths !== "object") return null
+    if (!o.colPins || typeof o.colPins !== "object") return null
+    if (!o.colWrap || typeof o.colWrap !== "object") return null
+    if (!o.colMenuSearch || typeof o.colMenuSearch !== "object") return null
+    if (typeof o.rowHeight !== "string") return null
+    if (typeof o.showGridlines !== "boolean") return null
+    if (typeof o.filterBarVisible !== "boolean") return null
+    if (typeof o.searchOpen !== "boolean") return null
+    // `extras` is optional; legacy placements payloads kept these at the top
+    // level instead and we accept those for back-compat.
+    if (o.extras !== undefined && (typeof o.extras !== "object" || o.extras === null)) return null
+    return o as unknown as PersistedLifecycleV1
+  } catch {
+    return null
+  }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Apply / serialize
+// ─────────────────────────────────────────────────────────────────────────────
+
+function mergeColOrder(saved: string[], columnKeys: Set<string>): string[] {
+  const ordered = saved.filter(k => columnKeys.has(k))
+  for (const k of columnKeys) {
+    if (!ordered.includes(k)) ordered.push(k)
+  }
+  return ordered
+}
+
+function filterRecordKeys<T extends Record<string, unknown>>(obj: T, keys: Set<string>): T {
+  const out = { ...obj }
+  for (const k of Object.keys(out)) {
+    if (!keys.has(k)) delete out[k]
+  }
+  return out
+}
+
+export function applyLifecyclePersisted(
+  ts: TableStatePersistSlice,
+  p: PersistedLifecycleV1,
+  columnKeys: Set<string>,
+): void {
+  const colOrder = mergeColOrder(p.colOrder, columnKeys)
+  const hidden = new Set(p.hiddenCols.filter(k => columnKeys.has(k)))
+  const colWidths = filterRecordKeys(p.colWidths, columnKeys) as Record<string, number>
+  const colPins = filterRecordKeys(p.colPins, columnKeys) as Record<string, "left" | "right">
+  const colWrap = filterRecordKeys(p.colWrap, columnKeys) as Record<string, boolean>
+  const colMenuSearch = filterRecordKeys(p.colMenuSearch, columnKeys) as Record<string, string>
+
+  ts.setSortRules(p.sortRules)
+  ts.setSearch(p.search)
+  ts.setActiveFilters(p.activeFilters)
+  ts.setFilterConnectors(p.filterConnectors)
+  ts.setGroupBy(p.groupBy)
+  ts.setColOrder(colOrder)
+  ts.setHiddenCols(hidden)
+  ts.setColWidths(colWidths)
+  ts.setColPins(colPins)
+  ts.setColWrap(colWrap)
+  ts.setColMenuSearch(colMenuSearch)
+  ts.setRowHeight(p.rowHeight)
+  ts.setShowGridlines(p.showGridlines)
+  ts.setFilterBarVisible(p.filterBarVisible)
+  ts.setSearchOpen(p.searchOpen)
+}
+
+export function serializeLifecycle(
+  ts: TableStatePersistSlice,
+  extras?: Record<string, unknown>,
+): PersistedLifecycleV1 {
+  return {
+    v: 1,
+    sortRules: ts.sortRules,
+    search: ts.search,
+    activeFilters: ts.activeFilters,
+    filterConnectors: ts.filterConnectors,
+    groupBy: ts.groupBy,
+    colOrder: ts.colOrder,
+    hiddenCols: [...ts.hiddenCols],
+    colWidths: { ...ts.colWidths },
+    colPins: { ...ts.colPins },
+    colWrap: { ...ts.colWrap },
+    colMenuSearch: { ...ts.colMenuSearch },
+    rowHeight: ts.rowHeight,
+    showGridlines: ts.showGridlines,
+    filterBarVisible: ts.filterBarVisible,
+    searchOpen: ts.searchOpen,
+    extras,
+  }
+}
+
+/**
+ * Read merged extras from a payload, falling back to the legacy top-level
+ * placements fields when `extras` isn't set yet. Generic so hubs can cast to
+ * their own extras shape.
+ */
+export function readLifecycleExtras<TExtras extends Record<string, unknown>>(
+  p: PersistedLifecycleV1,
+): TExtras | undefined {
+  if (p.extras) return p.extras as TExtras
+  // Legacy placements payload — synthesise extras from known top-level keys.
+  if (
+    p.conditionalRules !== undefined ||
+    p.pagination !== undefined ||
+    p.paginationPage !== undefined ||
+    p.paginationPageSize !== undefined
+  ) {
+    const legacy: Record<string, unknown> = {}
+    if (p.conditionalRules !== undefined) legacy.conditionalRules = p.conditionalRules
+    if (p.pagination !== undefined) legacy.pagination = p.pagination
+    if (p.paginationPage !== undefined) legacy.paginationPage = p.paginationPage
+    if (p.paginationPageSize !== undefined) legacy.paginationPageSize = p.paginationPageSize
+    return legacy as TExtras
+  }
+  return undefined
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Direct storage IO (rarely needed — prefer the hook)
+// ─────────────────────────────────────────────────────────────────────────────
+
+export function loadLifecycleFromStorage(
+  namespace: string,
+  tabId: string,
+): PersistedLifecycleV1 | null {
+  if (typeof window === "undefined") return null
+  return parsePersistedLifecycle(localStorage.getItem(lifecycleStorageKey(namespace, tabId)))
+}
+
+export function scheduleLifecycleSave(
+  namespace: string,
+  tabId: string,
+  payload: PersistedLifecycleV1,
+): void {
+  if (typeof window === "undefined") return
+  const key = lifecycleStorageKey(namespace, tabId)
+  const prev = lifecycleTimers.get(key)
+  if (prev) clearTimeout(prev)
+  const t = setTimeout(() => {
+    lifecycleTimers.delete(key)
+    try {
+      localStorage.setItem(key, JSON.stringify(payload))
+    } catch {
+      /* quota / private mode */
+    }
+  }, LIFECYCLE_SAVE_DEBOUNCE_MS)
+  lifecycleTimers.set(key, t)
+}
+
+export function loadPageFromStorage(namespace: string): PersistedPageV1 | null {
+  if (typeof window === "undefined") return null
+  return parsePersistedPage(localStorage.getItem(pageStorageKey(namespace)))
+}
+
+export function schedulePageSave(namespace: string, payload: PersistedPageV1): void {
+  if (typeof window === "undefined") return
+  const key = pageStorageKey(namespace)
+  const prev = pageTimers.get(key)
+  if (prev) clearTimeout(prev)
+  const t = setTimeout(() => {
+    pageTimers.delete(key)
+    try {
+      localStorage.setItem(key, JSON.stringify(payload))
+    } catch {
+      /* quota */
+    }
+  }, PAGE_SAVE_DEBOUNCE_MS)
+  pageTimers.set(key, t)
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// React hook (the recommended entry point)
+// ─────────────────────────────────────────────────────────────────────────────
+
+export interface UseTableStateLifecycleOptions<TExtras extends Record<string, unknown> | void = void> {
+  /** Storage namespace, e.g. `"placements"`, `"team"`, `"question-bank"`. */
+  namespace: string
+  /**
+   * Sub-key per lifecycle tab. A hub with only one lifecycle should pass a
+   * stable constant like `"main"`. A hub with multiple lifecycle scopes
+   * (e.g. placements' "all / mine / shared" tabs) passes the active scope id.
+   */
+  tabId: string
+  /** `useTableState(...)` return value. Satisfies `TableStatePersistSlice`. */
+  tableState: TableStatePersistSlice
+  /**
+   * Valid column keys for the active table. Persisted column references that
+   * are no longer present (e.g. column was renamed / removed) are dropped on
+   * load.
+   */
+  columnKeys: Set<string>
+  /**
+   * Current value of extra state to persist alongside the table (optional).
+   * Pass `undefined` / omit entirely if the hub only persists the table.
+   */
+  extras?: TExtras
+  /**
+   * Called once when the persisted record is loaded, with whatever `extras`
+   * it contained (or legacy top-level fields). Use this to rehydrate the
+   * matching React state in the consumer.
+   */
+  onLoadExtras?: (extras: TExtras | Record<string, unknown> | undefined) => void
+}
+
+/**
+ * Opt-in lifecycle persistence for a `DataTable`. Wires up:
+ *
+ * 1. **Load** (`useLayoutEffect`, once per `tabId` / `columnKeys` change) —
+ *    reads from `localStorage` and pushes the persisted state back into
+ *    `tableState` setters; then calls `onLoadExtras` so the consumer can
+ *    restore hub-specific state too.
+ * 2. **Save** (`useEffect`, debounced ~400ms) — re-serializes whenever any
+ *    persisted slice changes and writes to `localStorage`.
+ *
+ * Behaviour:
+ *
+ * - SSR-safe (`localStorage` reads are guarded; the layout effect only runs
+ *   on the client).
+ * - No render hits: setters are called inside the effect, not during render.
+ * - Doesn't depend on the full `tableState` object — it depends on each
+ *   persisted slice individually so the table object identity (which is fresh
+ *   every render) doesn't force re-saves.
+ */
+export function useTableStateLifecycle<TExtras extends Record<string, unknown> | void = void>(
+  opts: UseTableStateLifecycleOptions<TExtras>,
+): void {
+  const { namespace, tabId, tableState, columnKeys, extras, onLoadExtras } = opts
+
+  // Keep `onLoadExtras` in a ref so the load effect doesn't refire when the
+  // consumer passes a new function reference each render.
+  const onLoadExtrasRef = React.useRef(onLoadExtras)
+  React.useEffect(() => {
+    onLoadExtrasRef.current = onLoadExtras
+  })
+
+  // ── Load ────────────────────────────────────────────────────────────────
+  // useLayoutEffect so the rehydrated state paints in the first frame after
+  // mount instead of flashing the unhydrated defaults first.
+  React.useLayoutEffect(() => {
+    const raw = loadLifecycleFromStorage(namespace, tabId)
+    if (!raw) return
+    applyLifecyclePersisted(tableState, raw, columnKeys)
+    const e = readLifecycleExtras<Record<string, unknown>>(raw)
+    onLoadExtrasRef.current?.(e as TExtras | Record<string, unknown> | undefined)
+    // `tableState` is freshly returned each render; depending on it would
+    // re-apply persisted state on every keystroke and undo edits. Depend only
+    // on the load scope (namespace + tabId + column set).
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [namespace, tabId, columnKeys])
+
+  // ── Save ────────────────────────────────────────────────────────────────
+  // Serialise + debounce on every persisted slice change. Don't depend on
+  // the full `tableState` (fresh per render); depend on each slice instead so
+  // a no-op render doesn't trigger a no-op save.
+  const extrasJson = React.useMemo(() => (extras ? JSON.stringify(extras) : ""), [extras])
+  React.useEffect(() => {
+    const payload = serializeLifecycle(tableState, extras as Record<string, unknown> | undefined)
+    scheduleLifecycleSave(namespace, tabId, payload)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    namespace,
+    tabId,
+    extrasJson,
+    tableState.sortRules,
+    tableState.search,
+    tableState.activeFilters,
+    tableState.filterConnectors,
+    tableState.groupBy,
+    tableState.colOrder,
+    tableState.hiddenCols,
+    tableState.colWidths,
+    tableState.colPins,
+    tableState.colWrap,
+    tableState.colMenuSearch,
+    tableState.rowHeight,
+    tableState.showGridlines,
+    tableState.filterBarVisible,
+    tableState.searchOpen,
+  ])
+}

package/template/next.config.mjs

@@ -4,12 +4,168 @@ const withBundleAnalyzer = bundleAnalyzer({
   enabled: process.env.ANALYZE === "true",
 })
 
+const isDev = process.env.NODE_ENV !== "production"
+
+/**
+ * Content Security Policy
+ *
+ * Allowlist matches the runtime third-party origins this app actually contacts
+ * (see `app/layout.tsx` and `lib/{logo-dev,stock-portrait}.ts`):
+ *
+ *   • Font Awesome Pro Kit  — *.fontawesome.com (loader at kit.*, Pro CSS/font/telemetry
+ *                             at ka-p.*, free fallback at ka-f.*). Wildcard is used
+ *                             because FA rotates resource subdomains per kit tier and
+ *                             every subdomain is FA-controlled.
+ *   • Adobe Typekit         — use.typekit.net (CSS) + p.typekit.net (font files)
+ *   • Avatars (mock)        — img.logo.dev (school logos), randomuser.me (mock portraits)
+ *
+ * `'unsafe-inline'` is kept for `style-src` because Tailwind injects inline styles
+ * and the chart primitive uses one `<style dangerouslySetInnerHTML>` block for
+ * per-instance CSS variables. `'unsafe-inline'` is kept for `script-src` because
+ * Next.js inlines small bootstrap scripts (page data, RSC payload) on every
+ * route; migrating to nonces is a separate refactor. `'unsafe-eval'` is only
+ * permitted in development for HMR.
+ *
+ * If you add a new third-party origin (fonts, images, telemetry), update the
+ * matching directive below before shipping.
+ */
+function buildContentSecurityPolicy() {
+  // `https://*.fontawesome.com` covers every FA Kit subdomain (loader at
+  // `kit.fontawesome.com`, Pro resources at `ka-p.fontawesome.com`, free
+  // fallback at `ka-f.fontawesome.com`, telemetry, etc.) without us having to
+  // chase per-tier subdomain changes. Every subdomain is FA-controlled.
+  const FA_HOSTS = "https://*.fontawesome.com"
+
+  const scriptSrc = [
+    "'self'",
+    "'unsafe-inline'",
+    isDev ? "'unsafe-eval'" : "",
+    FA_HOSTS,
+  ]
+    .filter(Boolean)
+    .join(" ")
+
+  const styleSrc = [
+    "'self'",
+    "'unsafe-inline'",
+    "https://use.typekit.net",
+    "https://p.typekit.net",
+    FA_HOSTS,
+  ].join(" ")
+
+  const fontSrc = [
+    "'self'",
+    "data:",
+    "https://use.typekit.net",
+    "https://p.typekit.net",
+    FA_HOSTS,
+  ].join(" ")
+
+  const imgSrc = [
+    "'self'",
+    "data:",
+    "blob:",
+    "https://img.logo.dev",
+    "https://randomuser.me",
+    FA_HOSTS,
+  ].join(" ")
+
+  const connectSrc = [
+    "'self'",
+    "https://use.typekit.net",
+    FA_HOSTS,
+    // Next.js dev server uses websockets for HMR.
+    isDev ? "ws:" : "",
+    isDev ? "wss:" : "",
+  ]
+    .filter(Boolean)
+    .join(" ")
+
+  const directives = [
+    `default-src 'self'`,
+    `script-src ${scriptSrc}`,
+    `style-src ${styleSrc}`,
+    `font-src ${fontSrc}`,
+    `img-src ${imgSrc}`,
+    `connect-src ${connectSrc}`,
+    `frame-ancestors 'none'`,
+    `frame-src 'none'`,
+    `object-src 'none'`,
+    `base-uri 'self'`,
+    `form-action 'self'`,
+    `manifest-src 'self'`,
+    `worker-src 'self' blob:`,
+    // `upgrade-insecure-requests` is only meaningful on HTTPS responses.
+    isDev ? "" : "upgrade-insecure-requests",
+  ]
+    .filter(Boolean)
+    .join("; ")
+
+  return directives
+}
+
+const SECURITY_HEADERS = [
+  {
+    key: "Content-Security-Policy",
+    value: buildContentSecurityPolicy(),
+  },
+  // Defence-in-depth — `frame-ancestors 'none'` already blocks framing in
+  // modern browsers, but X-Frame-Options is still honoured by older clients
+  // and is required by some scanners.
+  { key: "X-Frame-Options", value: "DENY" },
+  { key: "X-Content-Type-Options", value: "nosniff" },
+  { key: "Referrer-Policy", value: "strict-origin-when-cross-origin" },
+  {
+    key: "Permissions-Policy",
+    value: [
+      "accelerometer=()",
+      "autoplay=()",
+      "camera=()",
+      "display-capture=()",
+      "encrypted-media=()",
+      "fullscreen=(self)",
+      "geolocation=()",
+      "gyroscope=()",
+      "magnetometer=()",
+      "microphone=()",
+      "midi=()",
+      "payment=()",
+      "picture-in-picture=()",
+      "publickey-credentials-get=()",
+      "screen-wake-lock=()",
+      "sync-xhr=()",
+      "usb=()",
+      "xr-spatial-tracking=()",
+      "interest-cohort=()",
+    ].join(", "),
+  },
+  // HSTS only takes effect over HTTPS; harmless on http://localhost during dev.
+  // Subdomain + preload opt-in — drop `; preload` if the apex domain is not
+  // ready for the HSTS preload list.
+  {
+    key: "Strict-Transport-Security",
+    value: "max-age=63072000; includeSubDomains; preload",
+  },
+  { key: "X-DNS-Prefetch-Control", value: "on" },
+  { key: "Cross-Origin-Opener-Policy", value: "same-origin" },
+]
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   transpilePackages: ["@exxatdesignux/ui"],
   experimental: {
     optimizePackageImports: ["lucide-react", "recharts", "@exxatdesignux/ui"],
   },
+  async headers() {
+    return [
+      {
+        // Apply to every route. Static assets under `/_next/static/*` get the
+        // same headers — that's fine since they are first-party.
+        source: "/:path*",
+        headers: SECURITY_HEADERS,
+      },
+    ]
+  },
   async redirects() {
     return [
       { source: "/rotations", destination: "/examples", permanent: false },

package/template/package.json

@@ -50,7 +50,7 @@
     "react-hook-form": "^7.72.0",
     "react-resizable-panels": "^4.10.0",
     "recharts": "^2.15.4",
-    "shadcn": "^4.1.0",
+    "shadcn": "^4.7.0",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.5.0",
     "tw-animate-css": "^1.4.0",
@@ -71,8 +71,8 @@
     "eslint": "^9.39.4",
     "eslint-config-next": "16.2.6",
     "jsdom": "^26.1.0",
-    "pm2": "^6.0.14",
-    "postcss": "^8",
+    "pm2": "^7.0.1",
+    "postcss": "^8.5.14",
     "prettier": "^3.8.1",
     "prettier-plugin-tailwindcss": "^0.7.2",
     "tailwindcss": "^4.2.1",