@rimelight/ui 0.0.33 → 0.0.35

package/src/integrations/ui.ts

@@ -1,199 +1,215 @@
-import type { AstroIntegration } from "astro"
-import UnoCSS from "unocss/astro"
-import vue from "@astrojs/vue"
-import defu from "defu"
-import { defaultUIConfig } from "../themes"
-import type { ComponentTheme } from "../utils/defineTheme"
-import rimelightUiPreset, {
-  uiSrcGlob,
-  uiFilesystemGlob,
-  type ColorConfigValue,
-  type RimelightPresetOptions
-} from "../presets"
-
-/**
- * Shape of the `ui` config that can be passed to the integration.
- */
-export type UIConfigOverrides = Record<string, Partial<ComponentTheme>>
-
-export interface UIOptions {
-  /**
-   * Configuration for the Logo component variants.
-   */
-  logos?: Record<
-    string,
-    | string
-    | {
-        light?: string
-        dark?: string
-        color?: string
-        white?: string
-        black?: string
-        [key: string]: string | undefined
-      }
-  >
-  /**
-   * Global UI overrides applied to all components. Merged with defaults via `defu` (first arg
-   * wins).
-   */
-  ui?: UIConfigOverrides
-  /**
-   * Custom colors. Each color can be:
-   *
-   * - **Flat format**: `{ "500": "#7146ff", "600": "#6222ff" }` — used in all modes. No mode-specific
-   *   buckets needed.
-   * - **Mode format**: flat shades at root define the base; `light`, `dark`, `flat` buckets layer on
-   *   top:
-   *
-   *   ```ts
-   *   { "500": "base", light: { "600": "light-blue" }, dark: { "500": "dark-blue" } }
-   *   ```
-   *
-   *   Each shade falls back through: **mode bucket → flat → unthemed → light → dark**. Defining a
-   *   single source (e.g. only `dark`) propagates to all modes.
-   *
-   *   Use the `theme` prop on components to pin colors: `<Button theme="flat">` forces the flat
-   *   bucket regardless of current mode.
-   */
-  colors?: Record<
-    string,
-    | Record<string, string>
-    | {
-        light?: Record<string, string>
-        dark?: Record<string, string>
-        flat?: Record<string, string>
-      }
-  >
-  /**
-   * When `true`, auto-generates missing `light`/`dark` mode buckets from flat color values using
-   * `color-mix(in oklch, ...)`. Explicitly provided buckets always take precedence. Defaults to
-   * `true`.
-   */
-  autogenerateColorModes?: boolean
-}
-
-/**
- * Astro integration for `@rimelight/ui`.
- *
- * Provides global UI configuration via a virtual module. Components import `virtual:rimelight-ui`
- * to access the merged config.
- *
- * @example
- *   // astro.config.mjs
- *   import { ui } from "@rimelight/ui/integrations"
- *
- *   export default defineConfig({
- *     integrations: [
- *       ui({
- *         ui: {
- *           button: {
- *             defaultVariants: { variant: "primary" }
- *           }
- *         }
- *       })
- *     ]
- *   })
- */
-export function ui(options: UIOptions = {}): AstroIntegration[] {
-  const resolvedUI = defu(options.ui ?? {}, defaultUIConfig)
-  const coreColors = [
-    "primary",
-    "secondary",
-    "info",
-    "success",
-    "warning",
-    "error",
-    "commentary",
-    "ideation",
-    "source"
-  ]
-  const userColors = (options.colors ?? {}) as Record<string, ColorConfigValue>
-  const userColorNames = Object.keys(userColors)
-  const mergedColors = [...new Set([...coreColors, ...userColorNames])]
-  const presetOptions: RimelightPresetOptions = {
-    colors: userColors
-  }
-  if (options.autogenerateColorModes !== undefined) {
-    presetOptions.autogenerateColorModes = options.autogenerateColorModes
-  }
-  const resolvedConfig = {
-    ...resolvedUI,
-    logos: options.logos ?? {},
-    colors: mergedColors
-  }
-
-  const virtualModuleId = "virtual:rimelight-ui"
-  const resolvedVirtualModuleId = "\0" + virtualModuleId
-
-  function setViteConfig(updateConfig: (config: Record<string, unknown>) => void) {
-    updateConfig({
-      vite: {
-        optimizeDeps: {
-          exclude: ["@rimelight/ui"]
-        },
-        ssr: {
-          noExternal: ["@rimelight/ui"]
-        },
-        plugins: [
-          {
-            name: "vite-plugin-rimelight-ui-config",
-            enforce: "pre",
-            resolveId(id: string) {
-              if (id === virtualModuleId) return resolvedVirtualModuleId
-              return null
-            },
-            load(id: string) {
-              if (id === resolvedVirtualModuleId) {
-                return `export const getUIConfig = () => (${JSON.stringify(resolvedConfig)});`
-              }
-              return null
-            }
-          }
-        ]
-      }
-    })
-  }
-
-  const rimelightUIIntegration: AstroIntegration = {
-    name: "@rimelight/ui",
-    hooks: {
-      "astro:config:setup": ({ updateConfig, logger }) => {
-        logger.info("Initializing @rimelight/ui core")
-        setViteConfig(updateConfig)
-      }
-    }
-  }
-
-  return [
-    UnoCSS({
-      presets: [rimelightUiPreset(presetOptions)],
-      content: {
-        pipeline: {
-          include: [
-            /\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/,
-            "src/**/*.{js,ts,jsx,tsx,vue,svelte,astro}",
-            uiSrcGlob,
-            "../ui/src/**/*.{js,ts,jsx,tsx,vue,svelte,astro}"
-          ]
-        },
-        filesystem: [uiFilesystemGlob, "../ui/src/**/*", "src/components/**/*", "src/pages/**/*"]
-      },
-      configResolved(config) {
-        if (process.env.NODE_ENV === "development" && !process.env.UNO_CONFIG_LOGGED) {
-          process.env.UNO_CONFIG_LOGGED = "true"
-          console.log(`[UnoCSS] Presets: ${config.presets.map((p) => p.name).join(", ")}`)
-          console.log(`[UnoCSS] Rules: ${config.rules.length}`)
-          console.log(`[UnoCSS] Shortcuts: ${Object.keys(config.shortcuts).length}`)
-          const ruleNames = config.rules.map((r) =>
-            Array.isArray(r) ? r[0].toString() : "dynamic"
-          )
-          const duplicates = ruleNames.filter((item, index) => ruleNames.indexOf(item) !== index)
-          const filtered = duplicates.filter((d) => d !== "/^(.+?)-(\\$.+)$/")
-          if (filtered.length > 0) console.warn(`[UnoCSS] Rule collisions: ${filtered.join(", ")}`)
-        }
-      }
-    }),
-    vue(),
-    rimelightUIIntegration
-  ]
-}
+import type { AstroIntegration } from "astro"
+import UnoCSS from "unocss/astro"
+import vue from "@astrojs/vue"
+import defu from "defu"
+import { defaultUIConfig } from "../themes"
+import type { ComponentTheme } from "../utils/defineTheme"
+import rimelightUiPreset, {
+  uiSrcGlob,
+  uiFilesystemGlob,
+  type ColorConfigValue,
+  type RimelightPresetOptions
+} from "../presets"
+import { extractAllMeta } from "../docs/extractAll"
+import virtual from "vite-plugin-virtual"
+
+export interface CategoryConfig {
+  label: string
+}
+
+export interface UIConfigOverrides {
+  [key: string]: Partial<ComponentTheme>
+}
+
+export interface UIOptions {
+  /**
+   * Configuration for keyboard shortcuts.
+   */
+  shortcuts?: {
+    categories?: Record<string, CategoryConfig>
+  }
+  /**
+   * Configuration for the Logo component variants.
+   */
+  logos?: Record<
+    string,
+    | string
+    | {
+        light?: string
+        dark?: string
+        color?: string
+        white?: string
+        black?: string
+        [key: string]: string | undefined
+      }
+  >
+  /**
+   * Global UI overrides applied to all components. Merged with defaults via `defu` (first arg
+   * wins).
+   */
+  ui?: UIConfigOverrides
+  /**
+   * Custom colors. Each color can be:
+   *
+   * - **Flat format**: `{ "500": "#7146ff", "600": "#6222ff" }` — used as the base for autogenerated
+   *   light and dark shades via `color-mix(in oklch, ...)`.
+   * - **Mode format**: provide explicit `light` and/or `dark` buckets to control each scheme
+   *   independently:
+   *
+   *   ```ts
+   *   { light: { "500": "#0064d7" }, dark: { "500": "#60a5fa" } }
+   *   ```
+   *
+   *   Shades fall back through: **mode bucket → flat → light → dark**. Defining only one side
+   *   autogenerates the other when `autogenerateColorModes` is enabled.
+   *
+   *   To pin a component to a specific scheme, use `theme="light"` or `theme="dark"` on the component
+   *   — this sets `color-scheme` natively on the element, causing all `light-dark()` variables to
+   *   resolve to the correct side.
+   */
+  colors?: Record<
+    string,
+    | Record<string, string>
+    | {
+        light?: Record<string, string>
+        dark?: Record<string, string>
+      }
+  >
+  /**
+   * When `true`, auto-generates missing `light`/`dark` mode buckets from flat color values using
+   * `color-mix(in oklch, ...)`. Explicitly provided buckets always take precedence. Defaults to
+   * `true`.
+   */
+  autogenerateColorModes?: boolean
+}
+
+/**
+ * Astro integration for `@rimelight/ui`.
+ *
+ * Provides global UI configuration via a virtual module. Components import `virtual:rimelight-ui`
+ * to access the merged config.
+ *
+ * @example
+ *   // astro.config.mjs
+ *   import { ui } from "@rimelight/ui/integrations"
+ *
+ *   export default defineConfig({
+ *     integrations: [
+ *       ui({
+ *         ui: {
+ *           button: {
+ *             defaultVariants: { variant: "primary" }
+ *           }
+ *         }
+ *       })
+ *     ]
+ *   })
+ */
+export function ui(options: UIOptions = {}): AstroIntegration[] {
+  const resolvedUI = defu(options.ui ?? {}, defaultUIConfig)
+  const coreColors = [
+    "primary",
+    "secondary",
+    "info",
+    "success",
+    "warning",
+    "error",
+    "commentary",
+    "ideation",
+    "source"
+  ]
+  const userColors = (options.colors ?? {}) as Record<string, ColorConfigValue>
+  const userColorNames = Object.keys(userColors)
+  const mergedColors = [...new Set([...coreColors, ...userColorNames])]
+  const presetOptions: RimelightPresetOptions = {
+    colors: userColors
+  }
+  if (options.autogenerateColorModes !== undefined) {
+    presetOptions.autogenerateColorModes = options.autogenerateColorModes
+  }
+  const resolvedConfig = {
+    ...resolvedUI,
+    logos: options.logos ?? {},
+    colors: mergedColors,
+    shortcuts: options.shortcuts ?? {}
+  }
+
+  const virtualModuleId = "virtual:rimelight-ui"
+  const resolvedVirtualModuleId = "\0" + virtualModuleId
+
+  async function setViteConfig(updateConfig: (config: Record<string, unknown>) => void) {
+    const docsMeta = await extractAllMeta()
+    updateConfig({
+      vite: {
+        optimizeDeps: {
+          exclude: ["@rimelight/ui"]
+        },
+        ssr: {
+          noExternal: ["@rimelight/ui"]
+        },
+        plugins: [
+          {
+            name: "vite-plugin-rimelight-ui-config",
+            enforce: "pre",
+            resolveId(id: string) {
+              if (id === virtualModuleId) return resolvedVirtualModuleId
+              return null
+            },
+            load(id: string) {
+              if (id === resolvedVirtualModuleId) {
+                return `export const getUIConfig = () => (${JSON.stringify(resolvedConfig)});`
+              }
+              return null
+            }
+          },
+          virtual({
+            "virtual:rimelight-ui-docs-meta": `export default ${JSON.stringify(docsMeta)}`
+          })
+        ]
+      }
+    })
+  }
+
+  const rimelightUIIntegration: AstroIntegration = {
+    name: "@rimelight/ui",
+    hooks: {
+      "astro:config:setup": async ({ updateConfig, logger }) => {
+        logger.info("Initializing @rimelight/ui core")
+        await setViteConfig(updateConfig)
+      }
+    }
+  }
+
+  return [
+    UnoCSS({
+      presets: [rimelightUiPreset(presetOptions)],
+      content: {
+        pipeline: {
+          include: [
+            /\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/,
+            "src/**/*.{js,ts,jsx,tsx,vue,svelte,astro}",
+            uiSrcGlob,
+            "../ui/src/**/*.{js,ts,jsx,tsx,vue,svelte,astro}"
+          ]
+        },
+        filesystem: [uiFilesystemGlob, "../ui/src/**/*", "src/components/**/*", "src/pages/**/*"]
+      },
+      configResolved(config) {
+        if (process.env.NODE_ENV === "development" && !process.env.UNO_CONFIG_LOGGED) {
+          process.env.UNO_CONFIG_LOGGED = "true"
+          console.log(`[UnoCSS] Presets: ${config.presets.map((p) => p.name).join(", ")}`)
+          console.log(`[UnoCSS] Rules: ${config.rules.length}`)
+          console.log(`[UnoCSS] Shortcuts: ${Object.keys(config.shortcuts).length}`)
+          const ruleNames = config.rules.map((r) =>
+            Array.isArray(r) ? r[0].toString() : "dynamic"
+          )
+          const duplicates = ruleNames.filter((item, index) => ruleNames.indexOf(item) !== index)
+          const filtered = duplicates.filter((d) => d !== "/^(.+?)-(\\$.+)$/")
+          if (filtered.length > 0) console.warn(`[UnoCSS] Rule collisions: ${filtered.join(", ")}`)
+        }
+      }
+    }),
+    vue(),
+    rimelightUIIntegration
+  ]
+}

package/src/middleware/security.ts

@@ -8,17 +8,30 @@ function assertManifest(obj: unknown): asserts obj is Record<string, string> {
   if (!obj || typeof obj !== "object") throw new Error("Expected manifest")
 }
 
-function addSecurityHeaders(response: Response): Response {
-  const newResponse = new Response(response.body, response)
-  newResponse.headers.set("Referrer-Policy", "strict-origin-when-cross-origin")
-  newResponse.headers.set("X-Content-Type-Options", "nosniff")
-  newResponse.headers.set("X-Frame-Options", "DENY")
-  newResponse.headers.set("Cross-Origin-Resource-Policy", "same-origin")
-  newResponse.headers.set(
-    "Strict-Transport-Security",
-    "max-age=31536000; includeSubDomains; preload"
-  )
-  return newResponse
+function addSecurityHeaders(response: Response, origin?: string): Response {
+  const headers = new Headers(response.headers)
+  headers.set("Referrer-Policy", "strict-origin-when-cross-origin")
+  headers.set("X-Content-Type-Options", "nosniff")
+  headers.set("X-Frame-Options", "DENY")
+  headers.set("Cross-Origin-Resource-Policy", "same-origin")
+  headers.set("Strict-Transport-Security", "max-age=31536000; includeSubDomains; preload")
+  headers.set("Permissions-Policy", "camera=(), microphone=(), geolocation=(), payment=(), usb=()")
+  if (origin) {
+    headers.set(
+      "Link",
+      [
+        `<${origin}/sitemap-index.xml>; rel="sitemap"`,
+        `<${origin}/llms.txt>; rel="llms"`,
+        `<${origin}/.well-known/api-catalog>; rel="api-catalog"`,
+        `<${origin}/rss.xml>; rel="alternate"; type="application/rss+xml"`
+      ].join(", ")
+    )
+  }
+  return new Response(response.body, {
+    status: response.status,
+    statusText: response.statusText,
+    headers
+  })
 }
 
 /**
@@ -34,37 +47,124 @@ export const security = defineMiddleware(async (context, next) => {
   const response = await next()
   const contentType = response.headers.get("content-type") || ""
 
-  if (!contentType.includes("text/html")) {
-    return addSecurityHeaders(response)
+  if (import.meta.env.DEV) {
+    if (!contentType.includes("text/html")) {
+      return addSecurityHeaders(response, context.url.origin)
+    }
+    const cleanHeaders = new Headers(response.headers)
+    cleanHeaders.delete("content-security-policy")
+    let modifiedHtml = await response.text()
+    modifiedHtml = modifiedHtml.replace(
+      /<meta\s[^>]*http-equiv\s*=\s*["']?content-security-policy[^>]*>/gi,
+      ""
+    )
+    return addSecurityHeaders(
+      new Response(modifiedHtml, {
+        status: response.status,
+        statusText: response.statusText,
+        headers: cleanHeaders
+      }),
+      context.url.origin
+    )
+  }
+
+  let cspHeader = response.headers.get("content-security-policy")
+  const newHeaders = new Headers(response.headers)
+
+  if (cspHeader) {
+    // Unescape HTML entities (like &#39; or &#x27; to ') that Astro's native CSP generation mistakenly puts in the header
+    cspHeader = cspHeader
+      .replace(/&#0*39;/g, "'")
+      .replace(/&#x0*27;/gi, "'")
+      .replace(/&quot;/g, '"')
+      .replace(/&amp;/g, "&")
+    newHeaders.set("content-security-policy", cspHeader)
+  }
+
+  const nonceValue = cspHeader ? crypto.randomUUID().replace(/-/g, "") : null
+
+  if (cspHeader && nonceValue) {
+    let newCsp = cspHeader
+    if (newCsp.includes("script-src ")) {
+      newCsp = newCsp.replace("script-src ", `script-src 'nonce-${nonceValue}' `)
+    } else {
+      newCsp = newCsp + `; script-src 'nonce-${nonceValue}'`
+    }
+    if (newCsp.includes("style-src ")) {
+      newCsp = newCsp.replace("style-src ", `style-src 'nonce-${nonceValue}' `)
+    } else {
+      newCsp = newCsp + `; style-src 'nonce-${nonceValue}'`
+    }
+    newHeaders.set("content-security-policy", newCsp)
   }
 
   if (typeof HTMLRewriter !== "undefined") {
-    return addSecurityHeaders(
-      new HTMLRewriter()
-        .on("script[src]", {
+    let rewriter = new HTMLRewriter()
+      .on("script[src]", {
+        element(el: any) {
+          const src = el.getAttribute("src")
+          if (src && manifest[src]) {
+            el.setAttribute("integrity", manifest[src])
+            el.setAttribute("crossorigin", "anonymous")
+          }
+        }
+      })
+      .on('link[rel="stylesheet"][href]', {
+        element(el: any) {
+          const href = el.getAttribute("href")
+          if (href && manifest[href]) {
+            el.setAttribute("integrity", manifest[href])
+            el.setAttribute("crossorigin", "anonymous")
+          }
+        }
+      })
+      .on('meta[http-equiv="content-security-policy" i]', {
+        element(el: any) {
+          el.remove()
+        }
+      })
+
+    if (nonceValue) {
+      rewriter = rewriter
+        .on("head", {
           element(el: any) {
-            const src = el.getAttribute("src")
-            if (src && manifest[src]) {
-              el.setAttribute("integrity", manifest[src])
-              el.setAttribute("crossorigin", "anonymous")
-            }
+            el.append(`<meta name="csp-nonce" content="${nonceValue}">`, { html: true })
           }
         })
-        .on('link[rel="stylesheet"][href]', {
+        .on("script", {
           element(el: any) {
-            const href = el.getAttribute("href")
-            if (href && manifest[href]) {
-              el.setAttribute("integrity", manifest[href])
-              el.setAttribute("crossorigin", "anonymous")
+            if (!el.getAttribute("nonce")) {
+              el.setAttribute("nonce", nonceValue)
             }
           }
         })
-        .transform(response)
+        .on("style", {
+          element(el: any) {
+            el.setAttribute("nonce", nonceValue)
+          }
+        })
+    }
+
+    return addSecurityHeaders(
+      rewriter.transform(
+        new Response(response.body, {
+          status: response.status,
+          statusText: response.statusText,
+          headers: newHeaders
+        })
+      ),
+      context.url.origin
     )
   }
 
   let modifiedHtml = await response.text()
 
+  // Remove Astro-injected CSP meta tag to prevent duplicate CSP headers and HTML escaping errors
+  modifiedHtml = modifiedHtml.replace(
+    /<meta\s[^>]*http-equiv\s*=\s*["']?content-security-policy[^>]*>/gi,
+    ""
+  )
+
   assertManifest(manifest)
 
   const entries = Object.entries(manifest)
@@ -84,11 +184,27 @@ export const security = defineMiddleware(async (context, next) => {
     )
   }
 
+  if (nonceValue) {
+    modifiedHtml = modifiedHtml.replace(
+      /<head([^>]*)>/i,
+      `<head$1>\n<meta name="csp-nonce" content="${nonceValue}">`
+    )
+    modifiedHtml = modifiedHtml.replace(
+      /<script(?![^>]*nonce=)([^>]*)>/gi,
+      `<script$1 nonce="${nonceValue}">`
+    )
+    modifiedHtml = modifiedHtml.replace(
+      /<style(?![^>]*nonce=)([^>]*)>/gi,
+      `<style$1 nonce="${nonceValue}">`
+    )
+  }
+
   return addSecurityHeaders(
     new Response(modifiedHtml, {
       status: response.status,
       statusText: response.statusText,
-      headers: new Headers(response.headers)
-    })
+      headers: newHeaders
+    }),
+    context.url.origin
   )
 })