@rimelight/ui 0.0.33 → 0.0.34

package/src/config/security.ts

@@ -0,0 +1,220 @@
+import type { AstroUserConfig } from "astro"
+
+export type AstroSecurityConfig = NonNullable<AstroUserConfig["security"]>
+export type AstroCspConfig = Exclude<NonNullable<AstroSecurityConfig["csp"]>, boolean>
+
+export interface SecurityConfigOptions {
+  /**
+   * The base domain name for this project (e.g., "starter.rimelight.com") used to autoconfigure
+   * standard allowedDomains and img-src CDN targets.
+   */
+  domain: string
+  /**
+   * Additional Allowed Domains (appended to the default wildcard subdomains of `domain`)
+   */
+  allowedDomains?: AstroSecurityConfig["allowedDomains"]
+  /**
+   * Additional sources to allow for img-src directive
+   */
+  imgSrc?: string[]
+  /**
+   * Additional sources to allow for connect-src directive
+   */
+  connectSrc?: string[]
+  /**
+   * Additional sources to allow for frame-src directive
+   */
+  frameSrc?: string[]
+  /**
+   * Additional script resources
+   */
+  scriptResources?: string[]
+  /**
+   * Additional style resources
+   */
+  styleResources?: string[]
+  /**
+   * Direct overrides for any security config fields
+   */
+  overrides?: Partial<Omit<AstroSecurityConfig, "csp">> & {
+    csp?: Partial<AstroCspConfig>
+  }
+}
+
+/**
+ * Generates a standard, strictly configured Security/CSP object for Astro configurations with
+ * support for easy customization and additions per project.
+ *
+ * @example
+ * ```ts
+ * // Default returned shape:
+ * {
+ *   checkOrigin: true,
+ *   allowedDomains: [
+ *     {
+ *       hostname: "**.domain.com",
+ *       protocol: "https"
+ *     }
+ *   ],
+ *   csp: {
+ *     algorithm: "SHA-384",
+ *     directives: [
+ *       "default-src 'none'",
+ *       "img-src 'self' data: https://cdn.domain.com https://i3.ytimg.com https://www.youtube.com https://www.youtube-nocookie.com",
+ *       "font-src 'self'",
+ *       "connect-src 'self' https://cloudflareinsights.com",
+ *       "frame-ancestors 'none'",
+ *       "frame-src https://www.youtube.com https://www.youtube-nocookie.com",
+ *       "upgrade-insecure-requests",
+ *       "base-uri 'self'",
+ *       "form-action 'self'"
+ *     ],
+ *     scriptDirective: {
+ *       resources: [
+ *         "'self'",
+ *         "https://static.cloudflareinsights.com",
+ *         "https://betterlytics.io/analytics.js",
+ *         "'inline-speculation-rules'"
+ *       ]
+ *     },
+ *     styleDirective: {
+ *       resources: [
+ *         "'self'",
+ *         "'sha256-SKuaOGnks7NAUq37nvw1PfGEE0lOAs5ERbiYRbGFIbw='"
+ *       ]
+ *     }
+ *   }
+ * }
+ * ```
+ */
+export function defineSecurity(options: SecurityConfigOptions): AstroSecurityConfig {
+  const { domain, overrides } = options
+  const domainWithWildcard = `**.${domain}`
+
+  // 1. Build default allowed domains
+  const allowedDomains = [
+    {
+      hostname: domainWithWildcard,
+      protocol: "https" as const
+    },
+    ...(options.allowedDomains || [])
+  ]
+
+  // 2. Build CSP directives
+  const imgSources = Array.from(
+    new Set([
+      "'self'",
+      "data:",
+      `https://cdn.${domain}`,
+      "https://i3.ytimg.com",
+      "https://www.youtube.com",
+      "https://www.youtube-nocookie.com",
+      ...(options.imgSrc || [])
+    ])
+  )
+
+  const connectSources = Array.from(
+    new Set(["'self'", "https://cloudflareinsights.com", ...(options.connectSrc || [])])
+  )
+
+  const frameSources = Array.from(
+    new Set([
+      "https://www.youtube.com",
+      "https://www.youtube-nocookie.com",
+      ...(options.frameSrc || [])
+    ])
+  )
+
+  const baseDirectives: AstroCspConfig["directives"] = [
+    "default-src 'none'",
+    `img-src ${imgSources.join(" ")}`,
+    "font-src 'self'",
+    `connect-src ${connectSources.join(" ")}`,
+    "frame-ancestors 'none'",
+    `frame-src ${frameSources.join(" ")}`,
+    "upgrade-insecure-requests",
+    "base-uri 'self'",
+    "form-action 'self'"
+  ]
+
+  // 3. Build script & style directives
+  const scriptResources = Array.from(
+    new Set([
+      "'self'",
+      "https://static.cloudflareinsights.com",
+      "https://betterlytics.io/analytics.js",
+      "'inline-speculation-rules'",
+      // Astro ClientRouter (View Transitions)
+      "'sha256-ZuMSxilKU+4KIM8LWna4lqBEKzd6WaiAjz6gamhm7zM='",
+      ...(options.scriptResources || [])
+    ])
+  )
+
+  const styleResources = Array.from(
+    new Set([
+      "'self'",
+      // Astro ClientRouter (View Transitions)
+      "'sha256-SKuaOGnks7NAUq37nvw1PfGEE0lOAs5ERbiYRbGFIbw='",
+      ...(options.styleResources || [])
+    ])
+  )
+
+  // 4. Build base SecurityConfig
+  const securityConfig: AstroSecurityConfig = {
+    checkOrigin: true,
+    allowedDomains,
+    csp: {
+      algorithm: "SHA-384",
+      directives: baseDirectives,
+      scriptDirective: {
+        resources: scriptResources
+      },
+      styleDirective: {
+        resources: styleResources
+      }
+    }
+  }
+
+  // 5. Merge overrides
+  if (overrides) {
+    const { csp, ...restOverrides } = overrides
+    Object.assign(securityConfig, restOverrides)
+    if (csp && typeof securityConfig.csp === "object" && securityConfig.csp !== null) {
+      const currentCsp = securityConfig.csp
+      const mergedCsp: AstroCspConfig = {
+        ...currentCsp,
+        ...csp
+      }
+
+      if (csp.scriptDirective || currentCsp.scriptDirective) {
+        mergedCsp.scriptDirective = {
+          ...currentCsp.scriptDirective,
+          ...csp.scriptDirective,
+          resources: Array.from(
+            new Set([
+              ...(currentCsp.scriptDirective?.resources || []),
+              ...(csp.scriptDirective?.resources || [])
+            ])
+          )
+        }
+      }
+
+      if (csp.styleDirective || currentCsp.styleDirective) {
+        mergedCsp.styleDirective = {
+          ...currentCsp.styleDirective,
+          ...csp.styleDirective,
+          resources: Array.from(
+            new Set([
+              ...(currentCsp.styleDirective?.resources || []),
+              ...(csp.styleDirective?.resources || [])
+            ])
+          )
+        }
+      }
+
+      securityConfig.csp = mergedCsp
+    }
+  }
+
+  return securityConfig
+}

package/src/integrations/ui.ts

@@ -1,199 +1,199 @@
-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"
+
+/**
+ * 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
+  ]
+}