@rimelight/ui 0.0.33 → 0.0.34

package/src/utils/headerStack.ts

@@ -1,95 +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
-}
-
-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
-}
+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,5 +1,5 @@
-export * from "./defineTheme"
-export * from "./resolveClasses"
-export * from "./useUi.ts"
-export * from "./docs"
-export * from "./embed"
+export * from "./defineTheme"
+export * from "./resolveClasses"
+export * from "./useUi.ts"
+export * from "./docs"
+export * from "./embed"

package/src/components/astro/RLABlogPost.astro

@@ -1,7 +0,0 @@
----
-import RLAPost from "./RLAPost.astro"
-import type { PostProps } from "../../types"
-
-const props = Astro.props as PostProps
----
-<RLAPost {...props} />

package/src/components/astro/RLABlogPosts.astro

@@ -1,9 +0,0 @@
----
-import RLAPosts from "./RLAPosts.astro"
-import type { PostsProps } from "../../types"
-
-const props = Astro.props as PostsProps
----
-<RLAPosts {...props}>
-  <slot />
-</RLAPosts>

package/src/components/astro/RLAPosts.astro

@@ -1,23 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { PostsProps } from "../../types"
-import postsThemeDefault, { createPostsTheme } from "../../themes/posts.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const postsTheme = uiConfig.colors ? createPostsTheme() : postsThemeDefault
-
-const posts = scv(postsTheme)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as PostsProps
-
-const classes = resolveClasses(posts, {}, useUi("posts", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
-</div>

package/src/themes/posts.theme.ts

@@ -1,13 +0,0 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export const createPostsTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: "grid gap-8"
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createPostsTheme()

package/src/types/components/posts.ts

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