@rimelight/ui 0.0.36 → 0.0.38

package/src/integrations/ui.ts

@@ -1,215 +0,0 @@
-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/index.ts

@@ -1 +0,0 @@
-export * from "./security"

package/src/middleware/security.ts

@@ -1,210 +0,0 @@
-import { defineMiddleware } from "astro:middleware"
-// @ts-ignore - virtual module generated by the SRI integration
-import { manifest } from "virtual:sri-manifest"
-
-declare const HTMLRewriter: any
-
-function assertManifest(obj: unknown): asserts obj is Record<string, string> {
-  if (!obj || typeof obj !== "object") throw new Error("Expected manifest")
-}
-
-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
-  })
-}
-
-/**
- * Security Middleware: Injects SRI integrity attributes and security headers.
- */
-export const security = defineMiddleware(async (context, next) => {
-  // HTTP to HTTPS redirect only in production
-  if (import.meta.env.PROD && context.request.url.startsWith("http://")) {
-    const httpsUrl = context.request.url.replace(/^http:/, "https:")
-    return Response.redirect(httpsUrl, 301)
-  }
-
-  const response = await next()
-  const contentType = response.headers.get("content-type") || ""
-
-  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") {
-    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) {
-            el.append(`<meta name="csp-nonce" content="${nonceValue}">`, { html: true })
-          }
-        })
-        .on("script", {
-          element(el: any) {
-            if (!el.getAttribute("nonce")) {
-              el.setAttribute("nonce", nonceValue)
-            }
-          }
-        })
-        .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)
-  for (const [url, hash] of entries) {
-    if (!hash) continue
-
-    const scriptRegex = new RegExp(`(<script[^>]+src=["']${url}["'][^>]*)(/?>)`, "g")
-    modifiedHtml = modifiedHtml.replace(
-      scriptRegex,
-      `$1 integrity="${hash}" crossorigin="anonymous"$2`
-    )
-
-    const linkRegex = new RegExp(`(<link[^>]+href=["']${url}["'][^>]*)(/?>)`, "g")
-    modifiedHtml = modifiedHtml.replace(
-      linkRegex,
-      `$1 integrity="${hash}" crossorigin="anonymous"$2`
-    )
-  }
-
-  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: newHeaders
-    }),
-    context.url.origin
-  )
-})