@rimelight/ui 0.0.31 → 0.0.33

package/src/types/components/user.ts

@@ -0,0 +1,11 @@
+export interface UserProps {
+  /**
+   * Slot-specific CSS class overrides.
+   */
+  ui?: any
+  /**
+   * Additional CSS classes to apply to the root element.
+   */
+  class?: any
+  [key: string]: unknown
+}

package/src/types/components/{embed-youtube.ts → video.ts}

@@ -1,4 +1,4 @@
-export interface EmbedYoutubeProps {
+export interface VideoProps {
   /**
    * The URL of the YouTube video to embed.
    */
@@ -20,7 +20,7 @@ export interface EmbedYoutubeProps {
    */
   ui?: any
   /**
-   * Additional CSS classes to apply to the root component.
+   * Additional CSS classes to apply to the root element.
    */
   class?: any
   [key: string]: unknown

package/src/types/components/watermark.ts

@@ -0,0 +1,11 @@
+export interface WatermarkProps {
+  /**
+   * Slot-specific CSS class overrides.
+   */
+  ui?: any
+  /**
+   * Additional CSS classes to apply to the root element.
+   */
+  class?: any
+  [key: string]: unknown
+}

package/src/types/components/window-mockup.ts

@@ -0,0 +1,11 @@
+export interface WindowMockupProps {
+  /**
+   * Slot-specific CSS class overrides.
+   */
+  ui?: any
+  /**
+   * Additional CSS classes to apply to the root element.
+   */
+  class?: any
+  [key: string]: unknown
+}

package/src/types/index.ts

@@ -1,2 +1,3 @@
-export * from "./componentVariant"
 export * from "./components"
+export * from "./componentVariant"
+export * from "./theme"

package/src/types/theme.ts

@@ -0,0 +1 @@
+export type Theme = "flat" | "light" | "dark"

package/src/utils/docs.ts

@@ -0,0 +1,189 @@
+import type { DocsConfig, BadgeConfig } 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
+}
+
+export interface ResolvedScope {
+  id: string
+  label: string
+  href: string
+  icon?: string
+  active?: boolean
+}
+
+export async function getDocsSidebar(
+  config: DocsConfig,
+  locale: string,
+  currentPath: string,
+  getCollection: (name: string) => Promise<any[]>
+): Promise<{
+  items: ResolvedSidebarItem[]
+  scopes: ResolvedScope[]
+  activeScope?: ResolvedScope
+}> {
+  const docs = await getCollection("docs")
+  const normPath = currentPath.replace(/\/$/, "").toLowerCase()
+  const docsBase = `/${locale}/docs`
+
+  const scopes: ResolvedScope[] = config.sidebar
+    .filter((item): item is import("../types").SidebarScope => "id" in item)
+    .map(scope => ({
+      id: scope.id,
+      label: scope.label,
+      href: scope.href.replace("{locale}", locale),
+      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
+        }
+      }
+      if (item.children && isDocInItems(item.children, docId, href)) return true
+    }
+    return false
+  }
+
+  // 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 = config.sidebar.find(s => {
+      if (!("id" in s)) return false
+      return isDocInItems(s.items || [], currentDoc?.id, normPath)
+    }) as import("../types").SidebarScope | undefined
+
+    if (scopeMatch) {
+      activeScope = scopes.find(s => s.id === scopeMatch.id)
+    }
+  }
+  if (!activeScope) {
+    activeScope = [...scopes]
+      .sort((a, b) => b.href.length - a.href.length)
+      .find(s => normPath.startsWith(s.href.toLowerCase()))
+  }
+  if (activeScope) activeScope.active = true
+
+  const sidebarConfig = config.sidebar.find(item =>
+    "id" in item && activeScope && item.id === activeScope.id
+  ) as import("../types").SidebarScope | undefined
+
+  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()
+        }
+      })
+    }
+
+    const resolved: ResolvedSidebarItem = {
+      label: item.label,
+      href: item.href ? item.href.replace("{locale}", locale) : undefined,
+      icon: item.icon,
+      badge: item.badge,
+      collapsed: item.collapsed
+    }
+
+    if (resolved.href) {
+      resolved.active = normPath === resolved.href.replace(/\/$/, "").toLowerCase()
+    }
+
+    if (item.children) {
+      const children: ResolvedSidebarItem[] = []
+      for (const child of item.children) {
+        children.push(...(await resolveItem(child)))
+      }
+      resolved.children = children
+      if (!resolved.active) {
+        resolved.active = children.some(c => c.active)
+      }
+    }
+
+    return [resolved]
+  }
+
+  const resolvedItems: ResolvedSidebarItem[] = []
+  for (const item of items) {
+    resolvedItems.push(...(await resolveItem(item)))
+  }
+
+  return { items: resolvedItems, scopes, activeScope }
+}
+
+export function getSurroundItems(sidebar: ResolvedSidebarItem[], currentPath: string) {
+  const flatItems: { label: string, href: string }[] = []
+
+  function flatten(items: ResolvedSidebarItem[]) {
+    for (const item of items) {
+      if (item.href) flatItems.push({ label: item.label, href: item.href })
+      if (item.children) flatten(item.children)
+    }
+  }
+
+  flatten(sidebar)
+
+  const normPath = currentPath.replace(/\/$/, "").toLowerCase()
+  const currentIndex = flatItems.findIndex(item => item.href.replace(/\/$/, "").toLowerCase() === normPath)
+
+  return {
+    prev: currentIndex > 0 ? flatItems[currentIndex - 1] : null,
+    next: currentIndex >= 0 && currentIndex < flatItems.length - 1 ? flatItems[currentIndex + 1] : null
+  }
+}

package/src/utils/headerStack.ts

@@ -1,88 +1,95 @@
-export interface HeaderLayer {
-  id: string
-  order: number
-  naturalHeight: number
-  isVisible: boolean
-  el: HTMLElement | null
-}
-
-export interface HeaderStackManager {
-  layers: HeaderLayer[]
-  register: (
-    id: string,
-    order: number,
-    naturalHeight: number,
-    isVisible: boolean,
-    el: HTMLElement | null
-  ) => void
-  unregister: (id: string) => void
-  update: () => void
-}
-
-/**
- * Initializes and returns a global vanilla JS header stack manager. This ensures Vue and Astro
- * components share the exact same layer state and can dynamically push each other up/down when
- * hiding on scroll.
- */
-export function getHeaderStack(): HeaderStackManager {
-  if (typeof window === "undefined") {
-    // SSR stub
-    return {
-      layers: [],
-      register() {},
-      unregister() {},
-      update() {}
-    }
-  }
-
-  const win = window as any
-  if (!win.RLHeaderStack) {
-    win.RLHeaderStack = {
-      layers: [] as HeaderLayer[],
-      register(
-        id: string,
-        order: number,
-        naturalHeight: number,
-        isVisible: boolean,
-        el: HTMLElement | null
-      ) {
-        let layer = this.layers.find((l: HeaderLayer) => l.id === id)
-        if (!layer) {
-          layer = { id, order, naturalHeight, isVisible, el }
-          this.layers.push(layer)
-          this.layers.sort((a: HeaderLayer, b: HeaderLayer) => a.order - b.order)
-        } else {
-          layer.naturalHeight = naturalHeight
-          layer.isVisible = isVisible
-          layer.el = el
-        }
-        this.update()
-      },
-      unregister(id: string) {
-        this.layers = this.layers.filter((l: HeaderLayer) => l.id !== id)
-        this.update()
-      },
-      update() {
-        let currentTop = 0
-        for (const layer of this.layers) {
-          if (layer.el) {
-            // If hidden, slide it up out of view (or exactly to its negative height so it's ready to slide down)
-            const topPx = layer.isVisible ? `${currentTop}px` : `-${layer.naturalHeight}px`
-            layer.el.style.top = topPx
-            layer.el.style.opacity = layer.isVisible ? "1" : "0"
-            layer.el.style.pointerEvents = layer.isVisible ? "auto" : "none"
-            layer.el.style.setProperty(
-              "--rl-header-bottom",
-              `calc(${topPx} + ${layer.naturalHeight}px)`
-            )
-          }
-          if (layer.isVisible) {
-            currentTop += layer.naturalHeight
-          }
-        }
-        document.documentElement.style.setProperty("--rl-total-header-height", `${currentTop}px`)
-      }
-    }
-  }
-  return win.RLHeaderStack
-}
+export interface HeaderLayer {
+  id: string
+  order: number
+  naturalHeight: number
+  isVisible: boolean
+  el: HTMLElement | null
+}
+
+export interface HeaderStackManager {
+  layers: HeaderLayer[]
+  register: (
+    id: string,
+    order: number,
+    naturalHeight: number,
+    isVisible: boolean,
+    el: HTMLElement | null
+  ) => void
+  unregister: (id: string) => void
+  update: () => void
+}
+
+declare global {
+  interface Window {
+    RLHeaderStack?: HeaderStackManager
+  }
+}
+
+/**
+ * Initializes and returns a global vanilla JS header stack manager. This ensures Vue and Astro
+ * components share the exact same layer state and can dynamically push each other up/down when
+ * hiding on scroll.
+ */
+export function getHeaderStack(): HeaderStackManager {
+  if (typeof window === "undefined") {
+    // SSR stub
+    return {
+      layers: [],
+      register() {},
+      unregister() {},
+      update() {}
+    }
+  }
+
+  if (!window.RLHeaderStack) {
+    window.RLHeaderStack = {
+      layers: [] as HeaderLayer[],
+      register(
+        id: string,
+        order: number,
+        naturalHeight: number,
+        isVisible: boolean,
+        el: HTMLElement | null
+      ) {
+        let layer = this.layers.find((l: HeaderLayer) => l.id === id)
+        if (!layer) {
+          layer = { id, order, naturalHeight, isVisible, el }
+          this.layers.push(layer)
+          this.layers.sort((a: HeaderLayer, b: HeaderLayer) => a.order - b.order)
+        } else {
+          layer.naturalHeight = naturalHeight
+          layer.isVisible = isVisible
+          layer.el = el
+        }
+        this.update()
+      },
+      unregister(id: string) {
+        this.layers = this.layers.filter((l: HeaderLayer) => l.id !== id)
+        this.update()
+      },
+      update() {
+        let currentTop = 0
+        for (const layer of this.layers) {
+          if (layer.el) {
+            // If hidden, slide it up out of view (or exactly to its negative height so it's ready to slide down)
+            const topPx = layer.isVisible ? `${currentTop}px` : `-${layer.naturalHeight}px`
+            layer.el.style.top = topPx
+            layer.el.style.opacity = layer.isVisible ? "1" : "0"
+            layer.el.style.pointerEvents = layer.isVisible ? "auto" : "none"
+            layer.el.style.setProperty(
+              "--rl-header-bottom",
+              `calc(${topPx} + ${layer.naturalHeight}px)`
+            )
+          }
+          if (layer.isVisible) {
+            currentTop += layer.naturalHeight
+          }
+        }
+        if (currentTop > 0) {
+          document.documentElement.style.setProperty("--rl-total-header-height", `${currentTop}px`)
+        }
+      }
+    }
+  }
+  return window.RLHeaderStack
+}

package/src/utils/index.ts

@@ -1,4 +1,5 @@
-export * from "./defineTheme"
-export * from "./resolveClasses"
-export * from "./useUi.ts"
-export * from "./embed"
+export * from "./defineTheme"
+export * from "./resolveClasses"
+export * from "./useUi.ts"
+export * from "./docs"
+export * from "./embed"

package/src/components/astro/RLANativeSelect.astro

@@ -1,51 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { NativeSelectProps } from "../../types"
-import nativeSelectThemeDefault, { createNativeSelectTheme } from "../../themes/nativeSelect.theme"
-
-const nativeSelectTheme = nativeSelectThemeDefault
-const nativeSelect = scv(nativeSelectTheme)
-
-const {
-  items = [],
-  value = "",
-  disabled = false,
-  name,
-  label,
-  size = "md",
-  color = "primary",
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as NativeSelectProps
-
-const classes = resolveClasses(nativeSelect, {
-  size
-}, useUi("nativeSelect", uiProp), className);
-
-const normalizedItems = items.map(item => {
-  if (typeof item === "string") {
-    return { label: item, value: item }
-  }
-  return item
-})
----
-<div class={classes.root} data-slot="root">
-  {label && <label class={classes.label} data-slot="label">{label}</label>}
-  <div class="relative w-full">
-    <select
-      class={classes.select}
-      disabled={disabled}
-      name={name}
-      {...rest}
-    >
-      {normalizedItems.map(item => (
-        <option value={item.value} selected={item.value === value}>
-          {item.label}
-        </option>
-      ))}
-    </select>
-    <span class={classes.icon + " i-lucide-chevron-down"} />
-  </div>
-</div>

package/src/components/astro/RLAToggle.astro

@@ -1,38 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { ToggleProps } from "../../types"
-import toggleThemeDefault, { createToggleTheme } from "../../themes/toggle.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const toggleTheme = uiConfig.colors ? createToggleTheme(uiConfig.colors) : toggleThemeDefault
-
-const toggle = scv(toggleTheme)
-
-const {
-  active = false,
-  disabled = false,
-  color = "primary",
-  size = "md",
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as ToggleProps
-
-const classes = resolveClasses(toggle, {
-  color,
-  size,
-  active
-}, useUi("toggle", uiProp), className);
----
-<button
-  type="button"
-  class={classes.root}
-  data-slot="root"
-  data-state={active ? "on" : "off"}
-  disabled={disabled}
-  {...rest}
->
-  <slot />
-</button>

package/src/components/astro/RLAToggleGroup.astro

@@ -1,30 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { ToggleGroupProps } from "../../types"
-import toggleGroupThemeDefault, { createToggleGroupTheme } from "../../themes/toggleGroup.theme"
-
-const toggleGroupTheme = toggleGroupThemeDefault
-const toggleGroup = scv(toggleGroupTheme)
-
-const {
-  value = [],
-  type = "single",
-  size = "md",
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as ToggleGroupProps
-
-const classes = resolveClasses(toggleGroup, {
-  size
-}, useUi("toggleGroup", uiProp), className);
----
-<div
-  class={classes.root}
-  data-slot="root"
-  data-type={type}
-  {...rest}
->
-  <slot />
-</div>

package/src/integrations/vue-entrypoint.ts

@@ -1,6 +0,0 @@
-import type { App } from "vue"
-import ui from "@nuxt/ui/vue-plugin"
-
-export default (app: App) => {
-  app.use(ui)
-}