@rimelight/ui 0.0.34 → 0.0.36

package/src/integrations/ui.ts

@@ -10,13 +10,24 @@ import rimelightUiPreset, {
   type ColorConfigValue,
   type RimelightPresetOptions
 } from "../presets"
+import { extractAllMeta } from "../docs/extractAll"
+import virtual from "vite-plugin-virtual"
 
-/**
- * Shape of the `ui` config that can be passed to the integration.
- */
-export type UIConfigOverrides = Record<string, Partial<ComponentTheme>>
+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.
    */
@@ -40,20 +51,21 @@ export interface UIOptions {
   /**
    * 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:
+   * - **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
-   *   { "500": "base", light: { "600": "light-blue" }, dark: { "500": "dark-blue" } }
+   *   { light: { "500": "#0064d7" }, dark: { "500": "#60a5fa" } }
    *   ```
    *
-   *   Each shade falls back through: **mode bucket → flat → unthemed → light → dark**. Defining a
-   *   single source (e.g. only `dark`) propagates to all modes.
+   *   Shades fall back through: **mode bucket → flat → light → dark**. Defining only one side
+   *   autogenerates the other when `autogenerateColorModes` is enabled.
    *
-   *   Use the `theme` prop on components to pin colors: `<Button theme="flat">` forces the flat
-   *   bucket regardless of current mode.
+   *   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,
@@ -61,7 +73,6 @@ export interface UIOptions {
     | {
         light?: Record<string, string>
         dark?: Record<string, string>
-        flat?: Record<string, string>
       }
   >
   /**
@@ -119,13 +130,15 @@ export function ui(options: UIOptions = {}): AstroIntegration[] {
   const resolvedConfig = {
     ...resolvedUI,
     logos: options.logos ?? {},
-    colors: mergedColors
+    colors: mergedColors,
+    shortcuts: options.shortcuts ?? {}
   }
 
   const virtualModuleId = "virtual:rimelight-ui"
   const resolvedVirtualModuleId = "\0" + virtualModuleId
 
-  function setViteConfig(updateConfig: (config: Record<string, unknown>) => void) {
+  async function setViteConfig(updateConfig: (config: Record<string, unknown>) => void) {
+    const docsMeta = await extractAllMeta()
     updateConfig({
       vite: {
         optimizeDeps: {
@@ -148,7 +161,10 @@ export function ui(options: UIOptions = {}): AstroIntegration[] {
               }
               return null
             }
-          }
+          },
+          virtual({
+            "virtual:rimelight-ui-docs-meta": `export default ${JSON.stringify(docsMeta)}`
+          })
         ]
       }
     })
@@ -157,9 +173,9 @@ export function ui(options: UIOptions = {}): AstroIntegration[] {
   const rimelightUIIntegration: AstroIntegration = {
     name: "@rimelight/ui",
     hooks: {
-      "astro:config:setup": ({ updateConfig, logger }) => {
+      "astro:config:setup": async ({ updateConfig, logger }) => {
         logger.info("Initializing @rimelight/ui core")
-        setViteConfig(updateConfig)
+        await setViteConfig(updateConfig)
       }
     }
   }

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,14 +47,42 @@ 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
+    )
   }
 
-  const cspHeader = response.headers.get("content-security-policy")
-  const nonceValue = cspHeader ? crypto.randomUUID().replace(/-/g, "") : null
+  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 ")) {
@@ -77,6 +118,11 @@ export const security = defineMiddleware(async (context, next) => {
           }
         }
       })
+      .on('meta[http-equiv="content-security-policy" i]', {
+        element(el: any) {
+          el.remove()
+        }
+      })
 
     if (nonceValue) {
       rewriter = rewriter
@@ -106,12 +152,19 @@ export const security = defineMiddleware(async (context, next) => {
           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)
@@ -132,7 +185,10 @@ 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(
+      /<head([^>]*)>/i,
+      `<head$1>\n<meta name="csp-nonce" content="${nonceValue}">`
+    )
     modifiedHtml = modifiedHtml.replace(
       /<script(?![^>]*nonce=)([^>]*)>/gi,
       `<script$1 nonce="${nonceValue}">`
@@ -148,7 +204,7 @@ export const security = defineMiddleware(async (context, next) => {
       status: response.status,
       statusText: response.statusText,
       headers: newHeaders
-    })
+    }),
+    context.url.origin
   )
 })
-