@rimelight/ui 0.0.33 → 0.0.35

package/src/components/astro/RLASplitter.astro

@@ -4,7 +4,10 @@ import { useUi, resolveClasses } from "../../utils"
 import type { SplitterProps } from "../../types"
 import splitterThemeDefault, { createSplitterTheme } from "../../themes/splitter.theme"
 
-const splitterTheme = splitterThemeDefault
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const splitterTheme = uiConfig.colors ? createSplitterTheme() : splitterThemeDefault
 const splitter = scv(splitterTheme)
 
 const {
@@ -24,154 +27,216 @@ const total = defaultSizes.reduce((s, v) => s + v, 0)
 const sizes = defaultSizes.map(s => (s / (total || 100)) * 100)
 
 const panelCount = sizes.length
+const id = `splitter-${Math.random().toString(36).substring(2, 9)}`
+
+const panelContents: string[] = []
+await Promise.all(
+  sizes.map(async (_, i) => {
+    if (Astro.slots.has(`panel-${i}`)) {
+      panelContents[i] = await Astro.slots.render(`panel-${i}`)
+    }
+  })
+)
 ---
 
-<div
-  class={classes.root}
-  data-slot="root"
-  data-resizable
-  data-direction={direction}
-  {...rest}
->
-  {sizes.map((size, i) => (
-    <>
-      <div
-        class={classes.panel}
-        data-slot="panel"
-        data-resizable-panel={i}
-        style={direction === "horizontal" ? `width:${size}%` : `height:${size}%`}
-      >
-        <slot name={`panel-${i}`}>
-          {i === 0
-            ? <slot />
-            : <slot name="panel" />
-          }
-        </slot>
-      </div>
-
-      {/* Render a handle between panels, not after the last one */}
-      {i < panelCount - 1 && (
+<rla-splitter {...rest}>
+  <div
+    class:list={[classes.root, id]}
+    data-slot="root"
+    data-resizable
+    data-direction={direction}
+  >
+    {sizes.map((_size, i) => (
+      <>
         <div
-          class={classes.handle}
-          data-slot="handle"
-          data-resizable-handle={i}
-          role="separator"
-          aria-orientation={direction === "horizontal" ? "vertical" : "horizontal"}
-          tabindex={0}
-          aria-label="Resize panels"
+          class={classes.panel}
+          data-slot="panel"
+          data-resizable-panel={i}
         >
-          <span
-            class={
-              direction === "horizontal"
-                ? "i-lucide-grip-vertical size-3.5 text-muted-foreground/50"
-                : "i-lucide-grip-horizontal size-3.5 text-muted-foreground/50"
-            }
-            aria-hidden="true"
-          />
+          {Astro.slots.has(`panel-${i}`) ? (
+            <Fragment set:html={panelContents[i]} />
+          ) : (
+            i === 0
+              ? <slot />
+              : <slot name="panel" />
+          )}
         </div>
-      )}
-    </>
-  ))}
-</div>
 
-<script>
-  document.querySelectorAll("[data-resizable]").forEach(container => {
-    const direction = (container as HTMLElement).dataset.direction ?? "horizontal";
-    const isHorizontal = direction === "horizontal";
-
-    const panels = Array.from(
-      container.querySelectorAll("[data-resizable-panel]")
-    ) as HTMLElement[];
-
-    const handles = Array.from(
-      container.querySelectorAll("[data-resizable-handle]")
-    ) as HTMLElement[];
-
-    handles.forEach((handle, idx) => {
-      const panelA = panels[idx];
-      const panelB = panels[idx + 1];
-      if (!panelA || !panelB) return;
-
-      const containerSize = () =>
-        isHorizontal
-          ? (container as HTMLElement).clientWidth
-          : (container as HTMLElement).clientHeight;
-
-      let isDragging = false;
-      let startPos = 0;
-      let startASize = 0;
-      let startBSize = 0;
-
-      const getSize = (el: HTMLElement) =>
-        isHorizontal ? el.offsetWidth : el.offsetHeight;
-
-      const setSize = (el: HTMLElement, px: number) => {
-        const pct = (px / containerSize()) * 100;
-        if (isHorizontal) {
-          el.style.width = `${pct}%`;
-        } else {
-          el.style.height = `${pct}%`;
-        }
-      };
+        {/* Render a handle between panels, not after the last one */}
+        {i < panelCount - 1 && (
+          <div
+            class={classes.handle}
+            data-slot="handle"
+            data-resizable-handle={i}
+            role="separator"
+            aria-orientation={direction === "horizontal" ? "vertical" : "horizontal"}
+            tabindex={0}
+            aria-label="Resize panels"
+          >
+            <span
+              class={
+                direction === "horizontal"
+                  ? "i-lucide-grip-vertical size-3.5 text-muted-foreground/50"
+                  : "i-lucide-grip-horizontal size-3.5 text-muted-foreground/50"
+              }
+              aria-hidden="true"
+            />
+          </div>
+        )}
+      </>
+    ))}
+  </div>
+</rla-splitter>
 
-      const onMouseMove = (e: MouseEvent) => {
-        if (!isDragging) return;
-        const delta = isHorizontal
-          ? e.clientX - startPos
-          : e.clientY - startPos;
-
-        const newASize = Math.max(48, startASize + delta);
-        const newBSize = Math.max(48, startBSize - delta);
-
-        // Only resize if both panels have enough space
-        if (startASize + startBSize - newASize < 48) return;
-
-        setSize(panelA, newASize);
-        setSize(panelB, newBSize);
-      };
-
-      const onMouseUp = () => {
-        isDragging = false;
-        document.body.style.cursor = "";
-        document.body.style.userSelect = "";
-        handle.classList.remove("bg-primary/30");
-        document.removeEventListener("mousemove", onMouseMove);
-        document.removeEventListener("mouseup", onMouseUp);
-      };
-
-      handle.addEventListener("mousedown", (e) => {
-        e.preventDefault();
-        isDragging = true;
-        startPos = isHorizontal ? e.clientX : e.clientY;
-        startASize = getSize(panelA);
-        startBSize = getSize(panelB);
-        document.body.style.cursor = isHorizontal ? "col-resize" : "row-resize";
-        document.body.style.userSelect = "none";
-        handle.classList.add("bg-primary/30");
-        document.addEventListener("mousemove", onMouseMove);
-        document.addEventListener("mouseup", onMouseUp);
+<script>
+  class RLASplitter extends HTMLElement {
+    private splitterCleanup: (() => void) | null = null;
+
+    connectedCallback() {
+      this.style.display = 'contents';
+      const container = this.querySelector("[data-resizable]") as HTMLElement | null;
+      if (!container) return;
+
+      const direction = container.dataset.direction ?? "horizontal";
+      const isHorizontal = direction === "horizontal";
+
+      const panels = Array.from(
+        container.querySelectorAll("[data-resizable-panel]")
+      ) as HTMLElement[];
+
+      const handles = Array.from(
+        container.querySelectorAll("[data-resizable-handle]")
+      ) as HTMLElement[];
+
+      const cleanupFns: (() => void)[] = [];
+
+      handles.forEach((handle, idx) => {
+        const panelA = panels[idx];
+        const panelB = panels[idx + 1];
+        if (!panelA || !panelB) return;
+
+        const containerSize = () =>
+          isHorizontal
+            ? container.clientWidth
+            : container.clientHeight;
+
+        let isDragging = false;
+        let startPos = 0;
+        let startASize = 0;
+        let startBSize = 0;
+
+        const getSize = (el: HTMLElement) =>
+          isHorizontal ? el.offsetWidth : el.offsetHeight;
+
+        const setSize = (el: HTMLElement, px: number) => {
+          const pct = (px / containerSize()) * 100;
+          if (isHorizontal) {
+            el.style.width = `${pct}%`;
+          } else {
+            el.style.height = `${pct}%`;
+          }
+        };
+
+        const onMouseMove = (e: MouseEvent) => {
+          if (!isDragging) return;
+          const delta = isHorizontal
+            ? e.clientX - startPos
+            : e.clientY - startPos;
+
+          const newASize = Math.max(48, startASize + delta);
+          const newBSize = Math.max(48, startBSize - delta);
+
+          // Only resize if both panels have enough space
+          if (startASize + startBSize - newASize < 48) return;
+
+          setSize(panelA, newASize);
+          setSize(panelB, newBSize);
+        };
+
+        const onMouseUp = () => {
+          isDragging = false;
+          document.body.style.cursor = "";
+          document.body.style.userSelect = "";
+          handle.classList.remove("bg-primary/30");
+          panels.forEach(p => p.style.transition = "");
+          document.removeEventListener("mousemove", onMouseMove);
+          document.removeEventListener("mouseup", onMouseUp);
+        };
+
+        const onMouseDown = (e: MouseEvent) => {
+          e.preventDefault();
+          isDragging = true;
+          startPos = isHorizontal ? e.clientX : e.clientY;
+          startASize = getSize(panelA);
+          startBSize = getSize(panelB);
+          document.body.style.cursor = isHorizontal ? "col-resize" : "row-resize";
+          document.body.style.userSelect = "none";
+          handle.classList.add("bg-primary/30");
+          panels.forEach(p => p.style.transition = "none");
+          document.addEventListener("mousemove", onMouseMove);
+          document.addEventListener("mouseup", onMouseUp);
+        };
+
+        handle.addEventListener("mousedown", onMouseDown);
+        cleanupFns.push(() => {
+          handle.removeEventListener("mousedown", onMouseDown);
+          document.removeEventListener("mousemove", onMouseMove);
+          document.removeEventListener("mouseup", onMouseUp);
+        });
+
+        // Keyboard resize: arrow keys shift by 2%
+        const onKeyDown = (e: KeyboardEvent) => {
+          const step = containerSize() * 0.02;
+          const forward = isHorizontal
+            ? e.key === "ArrowRight"
+            : e.key === "ArrowDown";
+          const backward = isHorizontal
+            ? e.key === "ArrowLeft"
+            : e.key === "ArrowUp";
+
+          if (!forward && !backward) return;
+          e.preventDefault();
+
+          const aSize = getSize(panelA);
+          const bSize = getSize(panelB);
+          const delta = forward ? step : -step;
+
+          setSize(panelA, Math.max(48, aSize + delta));
+          setSize(panelB, Math.max(48, bSize - delta));
+        };
+
+        handle.addEventListener("keydown", onKeyDown);
+        cleanupFns.push(() => {
+          handle.removeEventListener("keydown", onKeyDown);
+        });
       });
 
-      // Keyboard resize: arrow keys shift by 2%
-      handle.addEventListener("keydown", (e) => {
-        const step = containerSize() * 0.02;
-        const forward = isHorizontal
-          ? e.key === "ArrowRight"
-          : e.key === "ArrowDown";
-        const backward = isHorizontal
-          ? e.key === "ArrowLeft"
-          : e.key === "ArrowUp";
-
-        if (!forward && !backward) return;
-        e.preventDefault();
-
-        const aSize = getSize(panelA);
-        const bSize = getSize(panelB);
-        const delta = forward ? step : -step;
-
-        setSize(panelA, Math.max(48, aSize + delta));
-        setSize(panelB, Math.max(48, bSize - delta));
-      });
-    });
-  });
+      this.splitterCleanup = () => {
+        cleanupFns.forEach(fn => fn());
+      };
+    }
+
+    disconnectedCallback() {
+      if (this.splitterCleanup) {
+        this.splitterCleanup();
+        this.splitterCleanup = null;
+      }
+    }
+  }
+
+  if (!customElements.get('rla-splitter')) {
+    customElements.define('rla-splitter', RLASplitter);
+  }
 </script>
+
+<style is:inline set:html={`
+  .${id}[data-direction="horizontal"] > [data-resizable-panel="0"] { width: ${sizes[0] ?? 50}%; }
+  .${id}[data-direction="horizontal"] > [data-resizable-panel="1"] { width: ${sizes[1] ?? 50}%; }
+  .${id}[data-direction="horizontal"] > [data-resizable-panel="2"] { width: ${sizes[2] ?? 0}%; }
+  .${id}[data-direction="horizontal"] > [data-resizable-panel="3"] { width: ${sizes[3] ?? 0}%; }
+
+  .${id}[data-direction="vertical"] > [data-resizable-panel="0"] { height: ${sizes[0] ?? 50}%; }
+  .${id}[data-direction="vertical"] > [data-resizable-panel="1"] { height: ${sizes[1] ?? 50}%; }
+  .${id}[data-direction="vertical"] > [data-resizable-panel="2"] { height: ${sizes[2] ?? 0}%; }
+  .${id}[data-direction="vertical"] > [data-resizable-panel="3"] { height: ${sizes[3] ?? 0}%; }
+`} />

package/src/components/astro/RLASteps.astro

@@ -1,71 +1,118 @@
----
-interface Props {
-  class?: string
-}
-
-const { class: className = "", ...rest } = Astro.props
----
-<div class:list={["rl-steps-container", className]} {...rest}>
-  <slot />
-</div>
-
-<style is:global>
-  .rl-steps-container ol {
-    list-style: none;
-    counter-reset: steps-counter 0;
-    padding-inline-start: 0;
-    margin-top: 1.5rem;
-    margin-bottom: 1.5rem;
-  }
-
-  .rl-steps-container ol > li {
-    counter-increment: steps-counter;
-    position: relative;
-    padding-inline-start: 3rem;
-    padding-bottom: 1.5rem;
-    min-height: 2.5rem;
-  }
-
-  .rl-steps-container ol > li + li {
-    margin-top: 0;
-  }
-
-  /* Custom bullet */
-  .rl-steps-container ol > li::before {
-    content: counter(steps-counter);
-    position: absolute;
-    top: 0.125rem;
-    left: 0;
-    width: 1.75rem;
-    height: 1.75rem;
-    line-height: 1.75rem;
-    font-size: 0.75rem;
-    font-weight: 700;
-    text-align: center;
-    color: var(--primary-foreground, #fff);
-    background-color: var(--primary, #3b82f6);
-    border-radius: 9999px;
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  }
-
-  /* Vertical guideline */
-  .rl-steps-container ol > li::after {
-    content: '';
-    position: absolute;
-    top: 2rem;
-    bottom: 0.125rem;
-    left: 0.875rem;
-    width: 2px;
-    background-color: var(--border, #e5e7eb);
-  }
-
-  /* Hide guideline on the last item */
-  .rl-steps-container ol > li:last-child::after {
-    display: none;
-  }
-
-  /* Style headings or paragraphs inside list items nicely */
-  .rl-steps-container ol > li > :first-child {
-    margin-top: 0;
-  }
-</style>
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { StepsProps } from "../../types"
+import stepsThemeDefault, { createStepsTheme } from "../../themes/steps.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const stepsTheme = uiConfig.colors ? createStepsTheme() : stepsThemeDefault
+
+const steps = scv(stepsTheme)
+
+const {
+  size = "md",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as StepsProps
+
+const classes = resolveClasses(steps, { size }, useUi("steps", uiProp), className)
+---
+
+<div class:list={[classes.root, "rl-steps"]} data-slot="root" data-size={size} {...rest}>
+  <ol class="rl-steps-list">
+    <slot />
+  </ol>
+</div>
+
+<style is:inline>
+  .rl-steps-list {
+    list-style: none;
+    counter-reset: rl-step 0;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .rl-steps-list > li {
+    counter-increment: rl-step;
+    position: relative;
+    padding-left: 2.625rem;
+    padding-bottom: 1.75rem;
+    margin: 0;
+  }
+
+  .rl-steps-list > li:last-child {
+    padding-bottom: 0;
+  }
+
+  .rl-steps-list > li::before {
+    content: counter(rl-step);
+    position: absolute;
+    left: 0;
+    top: 0.125rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.75rem;
+    height: 1.75rem;
+    border-radius: 9999px;
+    font-size: 0.75rem;
+    font-weight: 700;
+    line-height: 1;
+    color: var(--color-primary-foreground, #fff);
+    background-color: var(--color-primary, #3b82f6);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    z-index: 1;
+  }
+
+  .rl-steps-list > li::after {
+    content: '';
+    position: absolute;
+    left: calc(0.875rem - 1px);
+    top: calc(1.75rem + 0.375rem);
+    bottom: 0;
+    width: 2px;
+    background-color: var(--color-border, #e5e7eb);
+  }
+
+  .rl-steps-list > li:last-child::after {
+    display: none;
+  }
+
+  .rl-steps-list > li > :first-child {
+    margin-top: 0;
+  }
+
+  /* size: sm */
+  [data-size="sm"] .rl-steps-list > li {
+    padding-left: 2rem;
+    padding-bottom: 1.25rem;
+  }
+  [data-size="sm"] .rl-steps-list > li::before {
+    width: 1.375rem;
+    height: 1.375rem;
+    font-size: 0.625rem;
+  }
+  [data-size="sm"] .rl-steps-list > li::after {
+    left: calc(0.6875rem - 1px);
+    top: calc(1.375rem + 0.375rem);
+  }
+
+  /* size: lg */
+  [data-size="lg"] .rl-steps-list > li {
+    padding-left: 3.25rem;
+    padding-bottom: 2.25rem;
+  }
+  [data-size="lg"] .rl-steps-list > li::before {
+    width: 2.25rem;
+    height: 2.25rem;
+    font-size: 0.875rem;
+  }
+  [data-size="lg"] .rl-steps-list > li::after {
+    left: calc(1.125rem - 1px);
+    top: calc(2.25rem + 0.375rem);
+  }
+</style>

package/src/components/astro/RLAStickySurface.astro

@@ -20,12 +20,19 @@ const {
 
 const classes = resolveClasses(stickySurface, {}, useUi("stickySurface", uiProp), className)
 const topOffset = `${offsetTop}px`
+const id = `sticky-${Math.random().toString(36).substring(2, 9)}`
 ---
 <div
-  class={classes.root}
+  class:list={[classes.root, id]}
   data-slot="root"
-  style={{ top: topOffset, zIndex }}
   {...rest}
 >
   <slot />
 </div>
+
+<style is:inline set:html={`
+  .${id} {
+    top: ${topOffset} !important;
+    z-index: ${zIndex} !important;
+  }
+`} />

package/src/components/astro/RLASurround.astro

@@ -0,0 +1,39 @@
+---
+export interface SurroundItem {
+  label: string;
+  href: string;
+}
+
+export interface Props {
+  prev?: SurroundItem | null;
+  next?: SurroundItem | null;
+}
+
+const { prev, next } = Astro.props;
+---
+
+{(prev || next) && (
+  <div class="mt-12 pt-6 border-t border-border flex justify-between gap-4">
+    {prev ? (
+      <a href={prev.href} class="flex flex-col gap-1 text-left group no-underline max-w-[45%]">
+        <span class="text-xs text-muted-foreground font-medium flex items-center gap-1 group-hover:text-primary transition-colors">
+          <span class="i-lucide-arrow-left size-3" /> Previous
+        </span>
+        <span class="text-sm font-semibold text-foreground group-hover:text-primary transition-colors truncate">
+          {prev.label}
+        </span>
+      </a>
+    ) : <div />}
+
+    {next ? (
+      <a href={next.href} class="flex flex-col gap-1 text-right group no-underline max-w-[45%]">
+        <span class="text-xs text-muted-foreground font-medium flex items-center justify-end gap-1 group-hover:text-primary transition-colors">
+          Next <span class="i-lucide-arrow-right size-3" />
+        </span>
+        <span class="text-sm font-semibold text-foreground group-hover:text-primary transition-colors truncate">
+          {next.label}
+        </span>
+      </a>
+    ) : <div />}
+  </div>
+)}

package/src/components/astro/RLATable.astro

@@ -4,7 +4,10 @@ import { useUi, resolveClasses } from "../../utils"
 import type { TableProps } from "../../types"
 import tableThemeDefault, { createTableTheme } from "../../themes/table.theme"
 
-const tableTheme = tableThemeDefault
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const tableTheme = uiConfig.colors ? createTableTheme() : tableThemeDefault
 const table = scv(tableTheme)
 
 const {