@rimelight/ui 0.0.34 → 0.0.36

package/src/utils/color.ts

@@ -0,0 +1,165 @@
+export function hexToRgb(hex: string): [number, number, number] {
+  const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i
+  const fullHex = hex.replace(shorthandRegex, (_, r, g, b) => r + r + g + g + b + b)
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(fullHex)
+  return result
+    ? [parseInt(result[1]!, 16), parseInt(result[2]!, 16), parseInt(result[3]!, 16)]
+    : [0, 0, 0]
+}
+
+function toHex(c: number): string {
+  const hex = Math.max(0, Math.min(255, c)).toString(16)
+  return hex.length === 1 ? "0" + hex : hex
+}
+
+export function rgbToHex(r: number, g: number, b: number): string {
+  return "#" + toHex(r) + toHex(g) + toHex(b)
+}
+
+export function rgbToHsl(r: number, g: number, b: number): [number, number, number] {
+  r /= 255
+  g /= 255
+  b /= 255
+  const max = Math.max(r, g, b),
+    min = Math.min(r, g, b)
+  let h = 0,
+    s = 0,
+    l = (max + min) / 2
+  if (max !== min) {
+    const d = max - min
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
+    switch (max) {
+      case r:
+        h = (g - b) / d + (g < b ? 6 : 0)
+        break
+      case g:
+        h = (b - r) / d + 2
+        break
+      case b:
+        h = (r - g) / d + 4
+        break
+    }
+    h /= 6
+  }
+  return [Math.round(h * 360), Math.round(s * 100), Math.round(l * 100)]
+}
+
+function hue2rgb(p: number, q: number, t: number): number {
+  if (t < 0) t += 1
+  if (t > 1) t -= 1
+  if (t < 1 / 6) return p + (q - p) * 6 * t
+  if (t < 1 / 2) return q
+  if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6
+  return p
+}
+
+export function hslToRgb(h: number, s: number, l: number): [number, number, number] {
+  h /= 360
+  s /= 100
+  l /= 100
+  let r = l,
+    g = l,
+    b = l
+  if (s !== 0) {
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s
+    const p = 2 * l - q
+    r = hue2rgb(p, q, h + 1 / 3)
+    g = hue2rgb(p, q, h)
+    b = hue2rgb(p, q, h - 1 / 3)
+  }
+  return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)]
+}
+
+export function rgbToHsb(r: number, g: number, b: number): [number, number, number] {
+  r /= 255
+  g /= 255
+  b /= 255
+  const max = Math.max(r, g, b),
+    min = Math.min(r, g, b)
+  let h = 0,
+    s = 0,
+    v = max
+  const d = max - min
+  s = max === 0 ? 0 : d / max
+  if (max !== min) {
+    switch (max) {
+      case r:
+        h = (g - b) / d + (g < b ? 6 : 0)
+        break
+      case g:
+        h = (b - r) / d + 2
+        break
+      case b:
+        h = (r - g) / d + 4
+        break
+    }
+    h /= 6
+  }
+  return [Math.round(h * 360), Math.round(s * 100), Math.round(v * 100)]
+}
+
+export function hsbToRgb(h: number, s: number, b: number): [number, number, number] {
+  h /= 360
+  s /= 100
+  b /= 100
+  let r = 0,
+    g = 0,
+    bl = 0
+  const i = Math.floor(h * 6)
+  const f = h * 6 - i
+  const p = b * (1 - s)
+  const q = b * (1 - f * s)
+  const t = b * (1 - (1 - f) * s)
+  switch (i % 6) {
+    case 0:
+      r = b
+      g = t
+      bl = p
+      break
+    case 1:
+      r = q
+      g = b
+      bl = p
+      break
+    case 2:
+      r = p
+      g = b
+      bl = t
+      break
+    case 3:
+      r = p
+      g = q
+      bl = b
+      break
+    case 4:
+      r = t
+      g = p
+      bl = b
+      break
+    case 5:
+      r = b
+      g = p
+      bl = q
+      break
+  }
+  return [Math.round(r * 255), Math.round(g * 255), Math.round(bl * 255)]
+}
+
+export function getChannelRange(channel: string): { min: number; max: number } {
+  switch (channel) {
+    case "hue":
+      return { min: 0, max: 360 }
+    case "alpha":
+      return { min: 0, max: 100 }
+    case "red":
+    case "green":
+    case "blue":
+      return { min: 0, max: 255 }
+    default:
+      return { min: 0, max: 100 }
+  }
+}
+
+export function clamp(val: number, min: number, max: number): number {
+  return Math.max(min, Math.min(max, val))
+}

package/src/utils/docs.ts

@@ -1,116 +1,252 @@
-import type { DocsConfig, BadgeConfig } from "../types"
+import type {
+  DocsConfig,
+  BadgeConfig,
+  PropMeta,
+  ThemeMeta,
+  SidebarItem,
+  SidebarScope
+} from "../types"
 
 export function defineDocsConfig(config: DocsConfig): DocsConfig {
   return config
 }
 
-/**
- * Strip a leading numeric sort prefix from a filename id, e.g. "01.getting-started" →
- * "getting-started"
- */
-function stripNumericPrefix(id: string): string {
-  return id.replace(/^(\d+\.)+/, "")
-}
-
-/**
- * Extract a numeric sort key from a doc id for numeric-prefix sorting
- */
-function numericPrefixOrder(id: string): number {
-  const segment = id.split("/").pop() ?? id
-  const m = segment.match(/^(\d+)\./)
-  return m ? parseInt(m[1], 10) : Infinity
-}
-
 export interface ResolvedSidebarItem {
   label: string
-  href?: string
-  icon?: string
-  badge?: string | BadgeConfig
-  active?: boolean
-  children?: ResolvedSidebarItem[]
-  collapsed?: boolean
+  href?: string | undefined
+  icon?: string | undefined
+  badge?: string | BadgeConfig | undefined
+  active?: boolean | undefined
+  children?: ResolvedSidebarItem[] | undefined
+  collapsed?: boolean | undefined
 }
 
 export interface ResolvedScope {
   id: string
   label: string
   href: string
-  icon?: string
-  active?: boolean
+  icon?: string | undefined
+  active?: boolean | undefined
+}
+
+export function formatDocsUrl(
+  href: string,
+  locale: string,
+  activeVersion?: string,
+  includeVersionInUrl?: boolean
+): string {
+  let url = href.replace("{locale}", locale)
+  if (activeVersion && includeVersionInUrl) {
+    if (url.includes(`/${activeVersion}/`) || url.endsWith(`/${activeVersion}`)) {
+      return url
+    }
+    const docsPattern = new RegExp(`(/${locale}/docs)(/|$)`)
+    const companyDocsPattern = new RegExp(`(/${locale}/company/docs)(/|$)`)
+
+    if (companyDocsPattern.test(url)) {
+      url = url.replace(companyDocsPattern, `$1/${activeVersion}$2`)
+    } else if (docsPattern.test(url)) {
+      url = url.replace(docsPattern, `$1/${activeVersion}$2`)
+    }
+
+    url = url.replace(/\/{2,}/g, "/")
+  }
+  return url
+}
+
+export interface DocEntry {
+  id: string
+  [key: string]: any
+}
+
+export function getDocsVersions(entries: DocEntry[], locale: string): string[] {
+  const versions = new Set<string>()
+  for (const entry of entries) {
+    const id = entry.id.replace(/\\/g, "/")
+    const parts = id.split("/")
+    // File structure is: [version]/[locale]/[...slug]
+    if (parts[1] === locale && parts[0]?.startsWith("v")) {
+      versions.add(parts[0])
+    }
+  }
+  return Array.from(versions).toSorted((a, b) => {
+    return b.localeCompare(a, undefined, { numeric: true, sensitivity: "base" })
+  })
+}
+
+export function parseDocsSlug(slug: string | undefined, versions: string[]) {
+  if (versions.length === 0) {
+    return {
+      activeVersion: "",
+      contentPath: slug || "index",
+      includeVersionInUrl: false
+    }
+  }
+
+  const defaultVersion = versions[0]
+  const isMultiVersion = versions.length > 1
+
+  if (!slug) {
+    return {
+      activeVersion: defaultVersion,
+      contentPath: "index",
+      includeVersionInUrl: isMultiVersion
+    }
+  }
+
+  const parts = slug.split("/")
+  const firstPart = parts[0]
+
+  if (firstPart && versions.includes(firstPart)) {
+    return {
+      activeVersion: firstPart,
+      contentPath: parts.slice(1).join("/") || "index",
+      includeVersionInUrl: isMultiVersion
+    }
+  }
+
+  return {
+    activeVersion: defaultVersion,
+    contentPath: slug || "index",
+    includeVersionInUrl: isMultiVersion
+  }
+}
+
+function findFirstHref(
+  items: SidebarItem[],
+  locale: string,
+  activeVersion?: string,
+  includeVersionInUrl?: boolean
+): string | undefined {
+  for (const item of items) {
+    if (item.href) return formatDocsUrl(item.href, locale, activeVersion, includeVersionInUrl)
+    const childItems = item.children || item.items
+    if (childItems) {
+      const found = findFirstHref(childItems, locale, activeVersion, includeVersionInUrl)
+      if (found) return found
+    }
+  }
+  return undefined
+}
+
+function getScopePrefix(
+  items: SidebarItem[],
+  locale: string,
+  activeVersion?: string,
+  includeVersionInUrl?: boolean
+): string {
+  const allHrefs: string[] = []
+
+  function collect(item: SidebarItem) {
+    if (item.href)
+      allHrefs.push(formatDocsUrl(item.href, locale, activeVersion, includeVersionInUrl))
+    const childItems = item.children || item.items
+    if (childItems) childItems.forEach(collect)
+  }
+
+  items.forEach(collect)
+  if (allHrefs.length === 0) return ""
+
+  const parts = allHrefs.map((h) => h.split("/").filter(Boolean))
+  let commonLen = 0
+  const firstPart = parts[0]
+  if (!firstPart) return ""
+  for (let i = 0; i < firstPart.length; i++) {
+    if (parts.every((p) => p[i] === firstPart[i])) commonLen++
+    else break
+  }
+
+  return "/" + firstPart.slice(0, commonLen).join("/") + "/"
+}
+
+function hasPath(
+  items: SidebarItem[],
+  locale: string,
+  normPath: string,
+  activeVersion?: string,
+  includeVersionInUrl?: boolean
+): boolean {
+  for (const item of items) {
+    if (
+      item.href &&
+      formatDocsUrl(item.href, locale, activeVersion, includeVersionInUrl)
+        .replace(/\/$/, "")
+        .toLowerCase() === normPath
+    ) {
+      return true
+    }
+    const childItems = item.children || item.items
+    if (childItems && hasPath(childItems, locale, normPath, activeVersion, includeVersionInUrl)) {
+      return true
+    }
+  }
+  return false
 }
 
 export async function getDocsSidebar(
   config: DocsConfig,
   locale: string,
   currentPath: string,
-  getCollection: (name: string) => Promise<any[]>
+  activeVersion?: string,
+  includeVersionInUrl?: boolean
 ): Promise<{
   items: ResolvedSidebarItem[]
   scopes: ResolvedScope[]
-  activeScope?: ResolvedScope
+  activeScope?: ResolvedScope | undefined
 }> {
-  const docs = await getCollection("docs")
   const normPath = currentPath.replace(/\/$/, "").toLowerCase()
-  const docsBase = `/${locale}/docs`
 
-  const sidebarScopes: import("../types").SidebarScope[] = Array.isArray(config.sidebar)
-    ? config.sidebar.filter(
-        (item): item is import("../types").SidebarScope => "id" in item || "scopes" in item
-      )
-    : (config.sidebar as any)?.scopes || []
+  const sidebarScopes: SidebarScope[] = Array.isArray(config.sidebar)
+    ? config.sidebar.filter((item): item is SidebarScope => "id" in item || "scopes" in item)
+    : config.sidebar.scopes || []
 
   const scopes: ResolvedScope[] = sidebarScopes.map((scope) => {
     const id = scope.id || scope.label
     let href = scope.href || ""
     if (!href && scope.items && scope.items.length > 0) {
-      href = scope.items[0].href || ""
+      href = findFirstHref(scope.items, locale, activeVersion, includeVersionInUrl) || ""
     }
     return {
       id,
       label: scope.label,
-      href: href.replace("{locale}", locale),
+      href: formatDocsUrl(href, locale, activeVersion, includeVersionInUrl),
       icon: scope.icon
     }
   })
 
-  function isDocInItems(
-    items: import("../types").SidebarItem[],
-    docId: string | undefined,
-    href: string
-  ): boolean {
-    for (const item of items) {
-      if (item.href && item.href.toLowerCase().replace(/\/$/, "") === href) return true
-      if (item.autogenerate && docId) {
-        const dir = item.autogenerate.directory.replace(/\/$/, "")
-        if (dir === "") {
-          if (!docId.includes("/")) return true
-        } else if (docId.startsWith(dir + "/") || docId === dir) {
-          return true
-        }
-      }
-      const childItems = item.children || item.items
-      if (childItems && isDocInItems(childItems, docId, href)) return true
-    }
-    return false
-  }
+  // Compute scope prefixes for active detection (separate from clickable hrefs)
+  const scopePrefixes: string[] = sidebarScopes.map((scope) =>
+    scope.items ? getScopePrefix(scope.items, locale, activeVersion, includeVersionInUrl) : ""
+  )
 
-  // Find active scope — most-specific prefix match, fallback to scanning scope items
   let activeScope = scopes.find((s) => normPath === s.href.replace(/\/$/, "").toLowerCase())
   if (!activeScope) {
-    const currentDoc = docs.find((d) => `${docsBase}/${d.id}`.toLowerCase() === normPath)
-    const scopeMatch = sidebarScopes.find((s) => {
-      return isDocInItems(s.items || [], currentDoc?.id, normPath)
-    })
-
-    if (scopeMatch) {
-      const matchId = scopeMatch.id || scopeMatch.label
-      activeScope = scopes.find((s) => s.id === matchId)
+    for (let i = 0; i < sidebarScopes.length; i++) {
+      const scope = sidebarScopes[i]
+      if (
+        scope &&
+        scope.items &&
+        hasPath(scope.items, locale, normPath, activeVersion, includeVersionInUrl)
+      ) {
+        activeScope = scopes[i]
+        break
+      }
     }
   }
   if (!activeScope) {
-    activeScope = [...scopes]
-      .toSorted((a, b) => b.href.length - a.href.length)
-      .find((s) => normPath.startsWith(s.href.toLowerCase()))
+    const sorted = [...scopePrefixes.entries()]
+      .filter(([, p]) => p)
+      .toSorted(([, a], [, b]) => b.length - a.length)
+    for (const [i] of sorted) {
+      const prefix = scopePrefixes[i]
+      if (prefix && normPath.startsWith(prefix.toLowerCase())) {
+        activeScope = scopes[i]
+        break
+      }
+    }
+  }
+  if (!activeScope && scopes.length > 0) {
+    activeScope = scopes[0]
   }
   if (activeScope) activeScope.active = true
 
@@ -120,44 +256,12 @@ export async function getDocsSidebar(
 
   const items = sidebarConfig?.items || []
 
-  async function resolveItem(item: import("../types").SidebarItem): Promise<ResolvedSidebarItem[]> {
-    if (item.autogenerate) {
-      const dir = item.autogenerate.directory
-      // Match docs whose id starts with the directory
-      const prefix = dir.replace(/\/$/, "")
-      const filteredDocs = docs.filter((d) => {
-        if (d.data.sidebar?.hidden === true) return false
-        if (prefix === "") return !d.id.includes("/")
-        return d.id.startsWith(prefix + "/") || d.id === prefix
-      })
-
-      filteredDocs.sort((a, b) => {
-        // 1. Frontmatter `order` takes priority
-        const aOrder = a.data.sidebar?.order ?? a.data.order ?? numericPrefixOrder(a.id)
-        const bOrder = b.data.sidebar?.order ?? b.data.order ?? numericPrefixOrder(b.id)
-        if (aOrder !== bOrder) return aOrder - bOrder
-        // 2. Fall back to alphabetical by stripped label
-        const aLabel = a.data.sidebar?.label ?? a.data.title
-        const bLabel = b.data.sidebar?.label ?? b.data.title
-        return stripNumericPrefix(aLabel).localeCompare(stripNumericPrefix(bLabel))
-      })
-
-      return filteredDocs.map((doc) => {
-        const href = `${docsBase}/${doc.id}/`
-        const badge =
-          doc.data.sidebar?.badge ?? (doc.data.badge as string | BadgeConfig | undefined)
-        return {
-          label: doc.data.sidebar?.label ?? doc.data.title,
-          href,
-          badge,
-          active: normPath === href.replace(/\/$/, "").toLowerCase()
-        }
-      })
-    }
-
+  async function resolveItem(item: SidebarItem): Promise<ResolvedSidebarItem[]> {
     const resolved: ResolvedSidebarItem = {
-      label: item.label,
-      href: item.href ? item.href.replace("{locale}", locale) : undefined,
+      label: item.label || "",
+      href: item.href
+        ? formatDocsUrl(item.href, locale, activeVersion, includeVersionInUrl)
+        : undefined,
       icon: item.icon,
       badge: item.badge,
       collapsed: item.collapsed
@@ -170,8 +274,9 @@ export async function getDocsSidebar(
     const childItems = item.children || item.items
     if (childItems) {
       const children: ResolvedSidebarItem[] = []
-      for (const child of childItems) {
-        children.push(...(await resolveItem(child)))
+      const resolvedChildren = await Promise.all(childItems.map((child) => resolveItem(child)))
+      for (const res of resolvedChildren) {
+        children.push(...res)
       }
       resolved.children = children
       if (!resolved.active) {
@@ -183,8 +288,9 @@ export async function getDocsSidebar(
   }
 
   const resolvedItems: ResolvedSidebarItem[] = []
-  for (const item of items) {
-    resolvedItems.push(...(await resolveItem(item)))
+  const resolvedAllItems = await Promise.all(items.map((item) => resolveItem(item)))
+  for (const res of resolvedAllItems) {
+    resolvedItems.push(...res)
   }
 
   return { items: resolvedItems, scopes, activeScope }
@@ -213,3 +319,47 @@ export function getSurroundItems(sidebar: ResolvedSidebarItem[], currentPath: st
       currentIndex >= 0 && currentIndex < flatItems.length - 1 ? flatItems[currentIndex + 1] : null
   }
 }
+
+export function kebabToPascal(name: string): string {
+  return name
+    .split("-")
+    .map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1))
+    .join("")
+}
+
+export function filterProps(
+  props: PropMeta[],
+  options: { hide?: string[]; show?: string[] }
+): PropMeta[] {
+  if (options.show?.length) {
+    return props.filter((p) => options.show!.includes(p.name))
+  }
+  if (options.hide?.length) {
+    return props.filter((p) => !options.hide!.includes(p.name))
+  }
+  return props
+}
+
+export function generateThemeCode(componentName: string, theme: ThemeMeta): string {
+  const componentConfig: Record<string, unknown> = {
+    ...(theme.slots.length ? { slots: theme.slots } : {}),
+    ...(Object.keys(theme.base).length ? { base: theme.base } : {}),
+    ...(Object.keys(theme.variants).length ? { variants: theme.variants } : {}),
+    ...(theme.compoundVariants.length ? { compoundVariants: theme.compoundVariants } : {}),
+    ...(Object.keys(theme.defaultVariants).length ? { defaultVariants: theme.defaultVariants } : {})
+  }
+
+  return `// astro.config.ts
+import { ui } from "@rimelight/ui"
+import { defineConfig } from "astro/config"
+
+export default defineConfig({
+  integrations: [
+    ui({
+      components: {
+        ${componentName}: ${JSON.stringify(componentConfig, null, 6).replace(/\n/g, "\n        ")}
+      }
+    })
+  ]
+})`
+}

package/src/utils/headerStack.ts

@@ -1,5 +1,6 @@
 export interface HeaderLayer {
   id: string
+  type: "banner" | "header"
   order: number
   naturalHeight: number
   isVisible: boolean
@@ -13,7 +14,8 @@ export interface HeaderStackManager {
     order: number,
     naturalHeight: number,
     isVisible: boolean,
-    el: HTMLElement | null
+    el: HTMLElement | null,
+    type?: "banner" | "header"
   ) => void
   unregister: (id: string) => void
   update: () => void
@@ -49,13 +51,18 @@ export function getHeaderStack(): HeaderStackManager {
         order: number,
         naturalHeight: number,
         isVisible: boolean,
-        el: HTMLElement | null
+        el: HTMLElement | null,
+        type: "banner" | "header" = "header"
       ) {
+        if (el && !el.isConnected) return
         let layer = this.layers.find((l: HeaderLayer) => l.id === id)
         if (!layer) {
-          layer = { id, order, naturalHeight, isVisible, el }
+          layer = { id, type, order, naturalHeight, isVisible, el }
           this.layers.push(layer)
-          this.layers.sort((a: HeaderLayer, b: HeaderLayer) => a.order - b.order)
+          this.layers.sort((a: HeaderLayer, b: HeaderLayer) => {
+            if (a.type !== b.type) return a.type === "banner" ? -1 : 1
+            return a.order - b.order
+          })
         } else {
           layer.naturalHeight = naturalHeight
           layer.isVisible = isVisible
@@ -64,6 +71,19 @@ export function getHeaderStack(): HeaderStackManager {
         this.update()
       },
       unregister(id: string) {
+        const layer = this.layers.find((l: HeaderLayer) => l.id === id)
+        if (layer && layer.el) {
+          const el = layer.el as HTMLElement & {
+            rlScrollListener?: () => void
+            rlResizeObserver?: ResizeObserver
+          }
+          if (el.rlScrollListener) {
+            window.removeEventListener("scroll", el.rlScrollListener)
+          }
+          if (el.rlResizeObserver) {
+            el.rlResizeObserver.disconnect()
+          }
+        }
         this.layers = this.layers.filter((l: HeaderLayer) => l.id !== id)
         this.update()
       },

package/src/utils/index.ts

@@ -3,3 +3,5 @@ export * from "./resolveClasses"
 export * from "./useUi.ts"
 export * from "./docs"
 export * from "./embed"
+export * from "./shortcuts"
+export * from "./color"