@rimelight/ui 0.0.1

package/src/components/LighthouseScores.astro

@@ -0,0 +1,204 @@
+---
+/**
+ * LighthouseScores.astro
+ * A callout component displaying perfect Lighthouse scores
+ * Designed to match the authentic Lighthouse report aesthetic
+ */
+export interface LighthouseScore {
+  label: string;
+  value: number;
+}
+
+export interface LighthouseScoresProps {
+  performance?: number;
+  accessibility?: number;
+  bestPractices?: number;
+  seo?: number;
+}
+
+const {
+  performance = 100,
+  accessibility = 100,
+  bestPractices = 100,
+  seo = 100,
+} = Astro.props;
+
+const scores = [
+  { label: 'Performance', value: performance },
+  { label: 'Accessibility', value: accessibility },
+  { label: 'Best Practices', value: bestPractices },
+  { label: 'SEO', value: seo },
+];
+---
+
+<div class="lighthouse-container">
+  <!-- Header -->
+  <div class="mb-4xl text-center">
+    <h3 class="font-heading text-foreground text-3xl font-bold md:text-4xl">
+      Lighthouse Report
+    </h3>
+  </div>
+
+  <!-- Scores Grid -->
+  <div
+    class="lighthouse-scores mx-auto grid max-w-2xl grid-cols-2 gap-4xl sm:grid-cols-4"
+    role="list"
+    aria-label="Lighthouse scores"
+  >
+    {
+      scores.map((score) => {
+        const radius = 54;
+        const circumference = 2 * Math.PI * radius;
+        const offset = circumference - (score.value / 100) * circumference;
+        const color = score.value >= 90 ? "#0cce6b" : score.value >= 50 ? "#ffa400" : "#ff4e42";
+
+        return (
+          <div
+            class="lighthouse-score group flex flex-col items-center"
+            role="listitem"
+          >
+            <div class="relative">
+              <svg
+                class="lighthouse-gauge"
+                width="120"
+                height="120"
+                viewBox="0 0 120 120"
+                aria-hidden="true"
+                style="width: 96px; height: 96px;"
+              >
+                <style>
+                  @media (min-width: 640px) {
+                    .lighthouse-gauge {
+                      width: 112px !important;
+                      height: 112px !important;
+                    }
+                  }
+                  @media (min-width: 768px) {
+                    .lighthouse-gauge {
+                      width: 144px !important;
+                      height: 144px !important;
+                    }
+                  }
+                </style>
+                <circle
+                  cx="60"
+                  cy="60"
+                  r={radius}
+                  fill="none"
+                  stroke="#e0e0e0"
+                  stroke-width="8"
+                />
+                <circle
+                  cx="60"
+                  cy="60"
+                  r={radius}
+                  fill="none"
+                  stroke={color}
+                  stroke-width="8"
+                  stroke-linecap="round"
+                  stroke-dasharray={circumference}
+                  stroke-dashoffset={offset}
+                  class="lighthouse-progress"
+                  transform="rotate(-90 60 60)"
+                  style={`--target-offset: ${offset}`}
+                />
+                <text
+                  x="60"
+                  y="60"
+                  text-anchor="middle"
+                  dominant-baseline="central"
+                  class="lighthouse-number font-semibold font-sans"
+                  fill={color}
+                  style="font-size: 2rem;"
+                >
+                  {score.value}
+                </text>
+              </svg>
+            </div>
+
+            <span class="text-muted-foreground mt-2xl text-center text-sm font-medium">
+              {score.label}
+            </span>
+          </div>
+        );
+      })
+    }
+  </div>
+
+  <!-- Footer note -->
+  <p class="text-muted-foreground/60 mt-4xl text-center text-xs italic">
+    *Results represent the starting template. Changes to styling and features may affect final results.
+  </p>
+</div>
+
+<style>
+  /* Entrance animations */
+  .lighthouse-score {
+    animation: score-enter 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
+  }
+
+  .lighthouse-progress {
+    animation: progress-fill 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
+  }
+
+  /* Staggered delays via nth-child to avoid inline style attributes */
+  .lighthouse-score:nth-child(1) { animation-delay: 100ms; }
+  .lighthouse-score:nth-child(2) { animation-delay: 180ms; }
+  .lighthouse-score:nth-child(3) { animation-delay: 260ms; }
+  .lighthouse-score:nth-child(4) { animation-delay: 340ms; }
+
+  .lighthouse-progress:nth-child(1) { animation-delay: 200ms; }
+  .lighthouse-progress:nth-child(2) { animation-delay: 280ms; }
+  .lighthouse-progress:nth-child(3) { animation-delay: 360ms; }
+  .lighthouse-progress:nth-child(4) { animation-delay: 440ms; }
+
+  @keyframes score-enter {
+    from {
+      opacity: 0;
+      transform: scale(0.9) translateY(10px);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1) translateY(0);
+    }
+  }
+
+  @keyframes progress-fill {
+    from {
+      stroke-dashoffset: 339.292; /* Approximate circumference */
+    }
+    to {
+      stroke-dashoffset: var(--target-offset, 0);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .lighthouse-score,
+    .lighthouse-progress {
+      animation: none;
+    }
+
+    .lighthouse-progress {
+      stroke-dashoffset: 0;
+    }
+  }
+</style>
+
+<script>
+  // Run animations immediately
+  const initLighthouse = () => {
+    const scoresContainer = document.querySelector('.lighthouse-scores');
+    if (scoresContainer) {
+      const elements = scoresContainer.querySelectorAll<HTMLElement>('.lighthouse-score, .lighthouse-progress');
+      elements.forEach((el) => {
+        el.style.animationPlayState = 'running';
+      });
+    }
+  };
+
+  // Run on initial load
+  initLighthouse();
+
+  // Run on View Transitions navigate
+  document.addEventListener('astro:after-swap', initLighthouse);
+</script>

package/src/components/MissingTranslationBanner.astro

@@ -0,0 +1,39 @@
+---
+import { checkMissingTranslation } from '../domain/i18n/resolve-locale'
+import { fetchTranslations } from '../domain/i18n/fetcher'
+
+export interface MissingTranslationBannerProps {}
+type Props = MissingTranslationBannerProps;
+
+const missingType = checkMissingTranslation(
+  Astro.locals.uiLocale,
+  Astro.locals.isMissingContent
+)
+
+let bannerText: string | null = null
+
+if (missingType) {
+  const { cfContext, translationLocale } = Astro.locals
+  const runtime = { cf: Astro.request.cf, cfContext }
+  const { messages } = await fetchTranslations(
+    runtime,
+    translationLocale,
+    ['messages']
+  )
+
+  bannerText =
+    missingType === 'content'
+      ? messages.errors.ui.MISSING_TRANSLATED_CONTENT ||
+        'Sorry, this article is not yet available in your selected language.'
+      : messages.errors.ui.MISSING_TRANSLATED_UI ||
+        'Sorry, this page is not yet fully available in your selected language.'
+}
+---
+
+{
+  bannerText && (
+    <div class='rounded px-4 py-2 mb-8 max-w-160 mx-auto border border-amber-300 bg-amber-50 text-amber-900  dark:border-amber-600 dark:bg-amber-900/20 dark:text-amber-600 text-center'>
+      {bannerText}
+    </div>
+  )
+}

package/src/components/TableOfContents.astro

@@ -0,0 +1,106 @@
+---
+export interface TableOfContentsHeading {
+  depth: number; // The heading level (h1 = 1, h2 = 2, etc)
+  slug: string; // The ID of the heading for linking
+  text: string; // The text content of the heading
+}
+
+export interface TableOfContentsProps {
+  headings: TableOfContentsHeading[]; // Array of headings from your markdown content
+  levels?: 1 | 2 | 3; // How many levels of headers to show in TOC (default: 2)
+}
+
+type Props = TableOfContentsProps;
+
+const { headings, levels = 2 } = Astro.props as Props;
+
+// Filter headings to only show up to the specified level
+const filteredHeadings = headings.filter((heading) => heading.depth <= levels);
+---
+
+<div class="border-base-400 rounded-xs border p-3xs text-sm leading-tight">
+  <h4 class="text-xl font-medium">Table of Contents</h4>
+  <ul class="mt-2xl flex flex-col gap-3xs">
+    {
+      filteredHeadings.map((heading) => (
+        <li
+          class:list={{
+            "pl-3xs": heading.depth === 2,
+            "pl-6": heading.depth === 3,
+          }}
+        >
+          <a
+            href={`#${heading.slug}`}
+            class="toc-link transition hover:text-primary-accent"
+          >
+            {heading.text}
+          </a>
+        </li>
+      ))
+    }
+  </ul>
+</div>
+
+<style>
+  .toc-current {
+    color: var(--primary);
+    font-weight: 500;
+  }
+</style>
+
+<script>
+  // Wrapper for Blog post content
+  let wrappingElement: Element | null;
+  let observeHeaderTags: IntersectionObserver;
+  let allHeaderTags: NodeListOf<Element>;
+
+  // Function that runs when the Intersection Observer fires
+  function setCurrent(e: IntersectionObserverEntry[]) {
+    var allSectionLinks = document.querySelectorAll(".toc-link");
+    e.map((i) => {
+      if (i.isIntersecting === true) {
+        allSectionLinks.forEach((link) => link.classList.remove("toc-current"));
+        const targetLink = document.querySelector(
+          `a[href="#${i.target.id}"].toc-link`,
+        );
+
+        if (targetLink) targetLink.classList.add("toc-current");
+      }
+    });
+  }
+
+  function initTOC() {
+    // update this with whatever class wraps your blog post content
+    wrappingElement = document.querySelector(".markdown-content");
+    if (wrappingElement !== null) {
+      // Get all H1/H2/H3 tags from the post
+      allHeaderTags = wrappingElement.querySelectorAll(
+        ":scope > h1, :scope > h2, :scope > h3",
+      );
+    }
+
+    // Intersection Observer Options
+    let options: IntersectionObserverInit = {
+      root: null,
+      rootMargin: "0px 0px -50% 0px",
+      threshold: [1],
+    };
+
+    // Each Intersection Observer runs setCurrent
+    observeHeaderTags = new IntersectionObserver(setCurrent, options);
+    if (wrappingElement === null) {
+      return;
+    }
+    allHeaderTags.forEach((tag) => {
+      // add scroll margin top to account for fixed navbar
+      tag.classList.add("scroll-mt-3xl");
+      observeHeaderTags.observe(tag);
+    });
+  }
+
+  // runs on initial page load
+  initTOC();
+
+  // runs on view transitions navigation
+  document.addEventListener("astro:after-swap", initTOC);
+</script>

package/src/components/ThemeToggle.astro

@@ -0,0 +1,71 @@
+---
+import IconSun from "~icons/lucide/sun"
+import IconMoon from "~icons/lucide/moon"
+import Toggle from "./toggle/Toggle.astro";
+
+export interface ThemeToggleProps {
+  class?: string;
+  size?: "sm" | "md" | "lg";
+}
+type Props = ThemeToggleProps;
+
+const { class: className, size = "md" } = Astro.props as Props;
+---
+
+<Toggle
+  id="theme-toggle"
+  size={size}
+  class:list={[
+    "group text-muted-foreground hover:text-foreground rounded-full hover:bg-transparent",
+    className,
+  ]}
+  variant="ghost"
+  className={className}
+  aria-label="Toggle theme"
+>
+    <IconSun class="sun-wrapper" />
+    <IconMoon class="moon-wrapper" />
+</Toggle>
+
+<style>
+  #theme-toggle[data-state="on"] .sun-wrapper {
+    display: none;
+  }
+  #theme-toggle[data-state="off"] .sun-wrapper {
+    display: flex;
+  }
+  #theme-toggle[data-state="on"] .moon-wrapper {
+    display: flex;
+  }
+  #theme-toggle[data-state="off"] .moon-wrapper {
+    display: none;
+  }
+</style>
+
+<script>
+  function setupThemeToggle() {
+    const button = document.getElementById('theme-toggle');
+    if (!button) return;
+
+    // Use current document class to set initial button state
+    const isDark = document.documentElement.classList.contains('dark');
+    button.setAttribute('data-state', isDark ? 'on' : 'off');
+    button.setAttribute('aria-pressed', isDark.toString());
+
+    button.addEventListener('click', () => {
+      // Toggle the class on the <html> tag
+      const newDark = document.documentElement.classList.toggle('dark');
+      
+      // Update button state visually
+      button.setAttribute('data-state', newDark ? 'on' : 'off');
+      button.setAttribute('aria-pressed', newDark.toString());
+      
+      // Save the user's choice
+      localStorage.setItem('theme', newDark ? 'dark' : 'light');
+    });
+  }
+
+  // Runs on initial load AND after each navigation (View Transitions)
+  document.addEventListener('astro:page-load', setupThemeToggle);
+</script>
+

package/src/components/accordion/Accordion.astro

@@ -0,0 +1,257 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+export interface AccordionProps extends HTMLAttributes<"div"> {
+  /**
+   * The type of accordion.  If "single", only one item can be open at a time.
+   */
+  type?: "single" | "multiple";
+  /**
+   * The value of the item that should be open by default
+   */
+  defaultValue?: string;
+}
+
+type Props = AccordionProps;
+
+export const accordion = cv({ base: "starwind-accordion" });
+
+const { type = "single", defaultValue, class: className, ...rest } = Astro.props;
+---
+
+<div
+  class:list={[accordion(), className]}
+  data-type={type}
+  data-value={defaultValue}
+  {...rest}
+  data-slot="accordion"
+>
+  <slot />
+</div>
+
+<script>
+  type AccordionType = "single" | "multiple";
+  type AccordionState = "open" | "closed";
+
+  /** Represents a single accordion item with its associated elements */
+  interface AccordionItem {
+    element: HTMLElement;
+    trigger: HTMLElement;
+    content: HTMLElement;
+    value: string;
+  }
+
+  /**
+   * Handles the functionality of an accordion component.
+   * Supports single and multiple open items, keyboard navigation,
+   * and maintains ARIA accessibility standards.
+   */
+  class AccordionHandler {
+    private accordion: HTMLElement;
+    private type: AccordionType;
+    private items: AccordionItem[];
+    private itemsByValue: Map<string, AccordionItem>;
+    private accordionId: string;
+    private isInitialized: boolean = false;
+
+    /**
+     * Creates a new AccordionHandler instance
+     * @param accordion - The root accordion element
+     * @param idx - Unique index for this accordion instance
+     */
+    constructor(accordion: HTMLElement, idx: number) {
+      this.accordion = accordion;
+      this.type = (accordion.dataset.type || "single") as AccordionType;
+      this.accordionId = `starwind-accordion${idx}`;
+
+      // Cache all items and create lookup maps
+      this.items = this.initializeItems();
+      this.itemsByValue = new Map(this.items.map((item) => [item.value, item]));
+
+      this.setupItems();
+      this.setInitialState();
+      this.isInitialized = true;
+    }
+
+    /**
+     * Initializes accordion items by querying the DOM and setting up data structures
+     * @returns Array of AccordionItem objects
+     */
+    private initializeItems(): AccordionItem[] {
+      return Array.from(this.accordion.querySelectorAll<HTMLElement>(".starwind-accordion-item"))
+        .map((element, idx) => {
+          const trigger = element.querySelector<HTMLElement>(".starwind-accordion-trigger");
+          const content = element.querySelector<HTMLElement>(".starwind-accordion-content");
+          const value = element.getAttribute("data-value") || String(idx);
+
+          if (!trigger || !content) return null;
+
+          return { element, trigger, content, value };
+        })
+        .filter((item): item is AccordionItem => item !== null);
+    }
+
+    /**
+     * Sets up initial state and event listeners for all accordion items
+     */
+    private setupItems(): void {
+      this.items.forEach((item, idx) => {
+        this.setupAccessibility(item, idx);
+        this.setContentHeight(item.content);
+        this.setupEventListeners(item);
+      });
+    }
+
+    /**
+     * Sets up ARIA attributes and IDs for accessibility
+     * @param item - The accordion item to setup
+     * @param idx - Index of the item
+     */
+    private setupAccessibility(item: AccordionItem, idx: number): void {
+      const triggerId = `${this.accordionId}-t${idx}`;
+      const contentId = `${this.accordionId}-c${idx}`;
+
+      item.trigger.id = triggerId;
+      item.trigger.setAttribute("aria-controls", contentId);
+      item.trigger.setAttribute("aria-expanded", "false");
+
+      item.content.id = contentId;
+      item.content.setAttribute("aria-labelledby", triggerId);
+      item.content.setAttribute("role", "region");
+    }
+
+    /**
+     * Calculates and sets the content height CSS variable for animations
+     * @param content - The content element to measure
+     */
+    private setContentHeight(content: HTMLElement): void {
+      const contentInner = content.firstElementChild as HTMLElement;
+      if (contentInner) {
+        const height = contentInner.getBoundingClientRect().height;
+        content.style.setProperty("--starwind-accordion-content-height", `${height}px`);
+      }
+    }
+
+    /**
+     * Sets the initial state based on the default value attribute
+     */
+    private setInitialState(): void {
+      const defaultValue = this.accordion.dataset.value;
+      if (defaultValue) {
+        const item = this.itemsByValue.get(defaultValue);
+        if (item) {
+          this.setItemState(item, true);
+        }
+      }
+    }
+
+    /**
+     * Sets up click and keyboard event listeners for an accordion item
+     * @param item - The accordion item to setup listeners for
+     */
+    private setupEventListeners(item: AccordionItem): void {
+      item.trigger.addEventListener("click", () => this.handleClick(item));
+      item.trigger.addEventListener("keydown", (e) => this.handleKeyDown(e, item));
+    }
+
+    /**
+     * Handles click events on accordion triggers
+     * @param item - The clicked accordion item
+     */
+    private handleClick(item: AccordionItem): void {
+      const isOpen = item.element.getAttribute("data-state") === "open";
+      this.toggleItem(item, !isOpen);
+    }
+
+    /**
+     * Handles keyboard navigation events
+     * @param event - The keyboard event
+     * @param item - The current accordion item
+     */
+    private handleKeyDown(event: KeyboardEvent, item: AccordionItem): void {
+      const index = this.items.indexOf(item);
+
+      const keyActions: Record<string, () => void> = {
+        ArrowDown: () => this.focusItem(index + 1),
+        ArrowUp: () => this.focusItem(index - 1),
+        Home: () => this.focusItem(0),
+        End: () => this.focusItem(this.items.length - 1),
+      };
+
+      const action = keyActions[event.key];
+      if (action) {
+        event.preventDefault();
+        action();
+      }
+    }
+
+    /**
+     * Focuses an accordion item by index with wrapping
+     * @param index - The target index to focus
+     */
+    private focusItem(index: number): void {
+      if (this.items.length === 0) return;
+      const targetIndex = (index + this.items.length) % this.items.length;
+      this.items[targetIndex]?.trigger.focus();
+    }
+
+    /**
+     * Toggles an accordion item's state
+     * @param item - The item to toggle
+     * @param shouldOpen - Whether the item should be opened
+     */
+    private toggleItem(item: AccordionItem, shouldOpen: boolean): void {
+      if (this.type === "single" && shouldOpen) {
+        // Close other items if in single mode
+        this.items.forEach((otherItem) => {
+          if (otherItem !== item && otherItem.element.getAttribute("data-state") === "open") {
+            this.setItemState(otherItem, false);
+          }
+        });
+      }
+
+      this.setItemState(item, shouldOpen);
+    }
+
+    /**
+     * Sets the state of an accordion item
+     * @param item - The item to update
+     * @param isOpen - Whether the item should be open
+     */
+    private setItemState(item: AccordionItem, isOpen: boolean): void {
+      const state: AccordionState = isOpen ? "open" : "closed";
+
+      // Skip animation during initial setup, enable for subsequent toggles
+      if (!this.isInitialized) {
+        item.content.style.setProperty("animation", "none");
+      } else {
+        item.content.style.removeProperty("animation");
+      }
+
+      // Set content height variable for animations
+      this.setContentHeight(item.content);
+
+      item.element.setAttribute("data-state", state);
+      item.content.setAttribute("data-state", state);
+      item.trigger.setAttribute("data-state", state);
+      item.trigger.setAttribute("aria-expanded", isOpen.toString());
+    }
+  }
+
+  // Store instances in a WeakMap to avoid memory leaks
+  const accordionInstances = new WeakMap<HTMLElement, AccordionHandler>();
+  let accordionCounter = 0;
+
+  const setupAccordions = () => {
+    document.querySelectorAll<HTMLElement>(".starwind-accordion").forEach((accordion) => {
+      if (!accordionInstances.has(accordion)) {
+        accordionInstances.set(accordion, new AccordionHandler(accordion, accordionCounter++));
+      }
+    });
+  };
+
+  setupAccordions();
+  document.addEventListener("astro:after-swap", setupAccordions);
+  document.addEventListener("starwind:init", setupAccordions);
+</script>