@rimelight/ui 0.0.6 → 0.0.8

package/src/components/ExtendedCarousel.astro

@@ -1,107 +0,0 @@
----
-import Carousel from "@rimelight/ui/components/carousel/Carousel.astro";
-import CarouselPrevious from "@rimelight/ui/components/carousel/CarouselPrevious.astro";
-import CarouselNext from "@rimelight/ui/components/carousel/CarouselNext.astro";
-import type { HTMLAttributes } from "astro/types";
-import type { EmblaOptionsType } from "embla-carousel";
-
-export interface ExtendedCarouselProps extends HTMLAttributes<"div"> {
-  opts?: EmblaOptionsType;
-  orientation?: "horizontal" | "vertical";
-  showDots?: boolean;
-}
-type Props = ExtendedCarouselProps;
-
-const { opts = {}, orientation = "horizontal", showDots = true, class: className, ...rest } = Astro.props;
-
-// Default loop to true for ExtendedCarousel
-const carouselOpts: EmblaOptionsType = {
-  loop: true,
-  ...opts
-};
----
-
-<Carousel 
-  opts={carouselOpts} 
-  orientation={orientation} 
-  class:list={["extended-carousel group/extended-carousel", className]} 
-  {...rest} 
-  data-extended-carousel
-  autoInit={false}
->
-  <slot />
-  
-  <div class="hidden md:block">
-    <CarouselPrevious class="-left-12 opacity-50 hover:opacity-100 transition-opacity" />
-    <CarouselNext class="-right-12 opacity-50 hover:opacity-100 transition-opacity" />
-  </div>
-  
-  {showDots && (
-    <div class="carousel-pagination absolute bottom-8 left-1/2 -translate-x-1/2 z-10 flex justify-center items-center gap-1.5" data-slot="pagination">
-      {/* Dots injected by script */}
-    </div>
-  )}
-</Carousel>
-
-<script>
-  import { initCarousel } from "@rimelight/ui/components/carousel/carousel-script.ts";
-
-  const setupExtendedCarousels = () => {
-    const extendedCarousels = document.querySelectorAll('[data-extended-carousel]') as NodeListOf<HTMLElement>;
-    
-    extendedCarousels.forEach((carousel) => {
-      // Avoid double-initialization
-      if (carousel.dataset.extendedInitialized === "true") return;
-      carousel.dataset.extendedInitialized = "true";
-
-      // Initialize the underlying Starwind carousel
-      // Passing autoInit={false} to the component means we handle init here
-      const manager = initCarousel(carousel);
-      if (!manager) return;
-
-      const api = manager.api;
-      const pagination = carousel.querySelector('[data-slot="pagination"]');
-      
-      if (pagination) {
-        const scrollSnaps = api.scrollSnapList();
-        const dots: HTMLButtonElement[] = [];
-
-        // Clear existing (useful for handle re-init cases)
-        pagination.innerHTML = '';
-
-        scrollSnaps.forEach((_: number, index: number) => {
-          const dot = document.createElement('button');
-          dot.className = 'size-4 rounded-full bg-border transition-all hover:bg-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary h-4 cursor-pointer';
-          dot.setAttribute('aria-label', `Go to slide ${index + 1}`);
-          dot.addEventListener('click', () => api.scrollTo(index));
-          pagination.appendChild(dot);
-          dots.push(dot);
-        });
-
-        const updateDots = () => {
-          const selectedIndex = api.selectedScrollSnap();
-          dots.forEach((dot, index) => {
-            if (index === selectedIndex) {
-              dot.classList.add('bg-primary'); 
-              dot.classList.remove('bg-border');
-            } else {
-              dot.classList.remove('bg-primary');
-              dot.classList.add('bg-border');
-            }
-          });
-        };
-
-        api.on('select', updateDots);
-        api.on('init', updateDots);
-        api.on('reInit', updateDots);
-        
-        updateDots();
-      }
-    });
-  };
-
-  // Run on load and after Astro page swaps
-  document.addEventListener("DOMContentLoaded", setupExtendedCarousels);
-  document.addEventListener("astro:after-swap", setupExtendedCarousels);
-</script>
-

package/src/components/FormattedDate.astro

@@ -1,22 +0,0 @@
----
-export interface FormattedDateProps {
-	date?: Date | undefined;
-}
-type Props = FormattedDateProps;
-
-const { date } = Astro.props;
----
-
-{
-	date && (
-		<time datetime={date.toISOString()}>
-			{
-				date.toLocaleDateString('en-us', {
-					year: 'numeric',
-					month: 'short',
-					day: 'numeric',
-				})
-			}
-		</time>
-	)
-}

package/src/components/HeaderLink.astro

@@ -1,24 +0,0 @@
----
-import type { HTMLAttributes } from 'astro/types';
-
-export interface HeaderLinkProps extends HTMLAttributes<"a"> {}
-type Props = HeaderLinkProps;
-
-const { href, class: className, ...props } = Astro.props;
-const pathname = Astro.url.pathname.replace(import.meta.env.BASE_URL, '');
-const subpath = pathname.match(/[^/]+/g);
-const isActive = href === pathname || href === '/' + (subpath?.[0] || '');
----
-
-<a 
-	href={href} 
-	class:list={[
-		className, 
-		"inline-block no-underline",
-		{ "font-bold underline active": isActive }
-	]} 
-	{...props}
->
-	<slot />
-</a>
-

package/src/components/LanguageSwitcher.astro

@@ -1,128 +0,0 @@
----
-/**
- * Language Switcher Component (Extension)
- *
- * Variants:
- * - 'full': Shows language icon, current flag, name, and chevron
- * - 'label' (default): Shows language icon and current flag only
- *
- * Uses Starwind components for consistency.
- * Built using native Astro i18n features.
- */
-
-import Dropdown from "@rimelight/ui/components/dropdown/Dropdown.astro";
-import DropdownTrigger from "@rimelight/ui/components/dropdown/DropdownTrigger.astro";
-import DropdownContent from "@rimelight/ui/components/dropdown/DropdownContent.astro";
-import DropdownItem from "@rimelight/ui/components/dropdown/DropdownItem.astro";
-import Button from "@rimelight/ui/components/button/Button.astro";
-import Flag from "@rimelight/ui/components/icons/Flag.astro";
-
-import { SUPPORTED_LOCALES, LANGUAGES } from "@rimelight/ui/domain";
-import { localeToFlagCode } from "@rimelight/ui/domain";
-import { replaceLocaleInPath } from "@rimelight/ui/domain";
-import type { Locale } from "@rimelight/ui/domain";
-
-export interface LanguageSwitcherProps {
-  variant?: 'full' | 'label';
-  class?: string;
-}
-type Props = LanguageSwitcherProps;
-
-const { variant = 'label', class: className } = Astro.props;
-const { uiLocale: currentLocale } = Astro.locals;
-const currentPath = Astro.url.pathname;
-
-/**
- * Utility to compute the target URL for a locale switch
- * Handles standard Astro routing by replacing the locale prefix in the URL.
- */
-function getSwitchUrl(targetLocale: string) {
-  return replaceLocaleInPath(currentPath, currentLocale as string, targetLocale);
-}
-
-const currentFlagCode = localeToFlagCode(currentLocale as Locale);
-const currentLabel = LANGUAGES[(currentLocale as Locale) as keyof typeof LANGUAGES] || currentLocale;
----
-
-<Dropdown class={className}>
-  <DropdownTrigger asChild>
-    <Button
-      variant="outline"
-      size="sm"
-      class:list={[
-        "rounded-full border-border/50 bg-background/50 hover:bg-background transition-all h-9 shadow-none",
-        variant === 'full' ? "px-3xs" : "px-5xs",
-      ]}
-      aria-label="Select Language"
-    >
-      <div class="flex items-center gap-5xs">
-        <div class="flex items-center justify-center shrink-0 opacity-70 size-4.5">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="text-current size-4.5"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 5h7" /><path d="M9 3v2c0 4.418 -2.239 8 -5 8" /><path d="M5 9c0 2.144 2.952 3.908 6.7 4" /><path d="M12 20l4 -9l4 9" /><path d="M19.1 18h-6.2" />
-          </svg>
-        </div>
-
-        <div class="flex items-center -translate-y-[0.5px]">
-          <Flag code={currentFlagCode} size={18} class="rounded-sm shadow-sm border border-border/20" />
-        </div>
-
-        {variant === 'full' && (
-          <div class="flex items-center gap-5xs border-l border-border/30 pl-5xs ml-3xs">
-            <span class="text-xs font-medium text-muted-foreground whitespace-nowrap leading-none flex items-center translate-y-[0.5px]">
-              {currentLabel}
-            </span>
-            <div class="flex items-center justify-center opacity-50 -translate-y-[0.5px]">
-              <svg class="size-3.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-                <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
-              </svg>
-            </div>
-          </div>
-        )}
-      </div>
-    </Button>
-  </DropdownTrigger>
-
-  <DropdownContent align="end" class="w-6xl border-border/50 bg-background/95 backdrop-blur-md p-5xs">
-    {SUPPORTED_LOCALES.map((locale) => {
-      const isActive = locale === currentLocale;
-      const href = getSwitchUrl(locale);
-      const flagCode = localeToFlagCode(locale as Locale);
-      const label = LANGUAGES[(locale as Locale) as keyof typeof LANGUAGES] || locale;
-
-      return (
-        <DropdownItem
-          as="a"
-          href={href}
-          class:list={[
-            "flex items-center h-10 px-3xs gap-3xs transition-colors rounded-lg",
-            isActive ? "bg-accent/70 text-foreground font-semibold" : "text-muted-foreground hover:text-foreground"
-          ]}
-        >
-          <div class="flex items-center shrink-0 -translate-y-[0.5px]">
-            <Flag code={flagCode} size={18} class="rounded-sm shadow-sm border border-border/20" />
-          </div>
-          <span class="text-sm leading-none flex items-center translate-y-[0.5px]">{label}</span>
-          {isActive && (
-            <div class="ml-auto flex items-center justify-center h-full text-primary">
-              <svg class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-                <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
-              </svg>
-            </div>
-          )}
-        </DropdownItem>
-      );
-    })}
-
-  </DropdownContent>
-</Dropdown>
-
-

package/src/components/MissingTranslationBanner.astro

@@ -1,39 +0,0 @@
----
-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/ProjectPost.astro

@@ -1,183 +0,0 @@
----
-import { Image } from "astro:assets";
-import { scv } from "css-variants";
-import type { CollectionEntry } from "astro:content";
-import Separator from "@rimelight/ui/components/separator/Separator.astro";
-import Avatar from "@rimelight/ui/components/avatar/Avatar.astro";
-import AvatarImage from "@rimelight/ui/components/avatar/AvatarImage.astro";
-import avatarAsset from "../assets/team/Daniel-Marchi_0000_00.webp";
-import { fetchTranslations } from "@rimelight/ui/domain";
-
-const { translationLocale, cfContext } = Astro.locals;
-const runtime = { cf: Astro.request.cf, cfContext };
-const { projects: t } = await fetchTranslations(runtime, translationLocale, ["projects"]);
-
-// Support both Astro content collections and CMS documents
-export type CMSProjectDocument = {
-  _id: string;
-  slug?: string;
-  title: string;
-  description?: string;
-  heroImage?: string;
-  publishedDate?: string | Date | null;
-  featured?: boolean;
-  tags?: string[] | Record<string, unknown> | null;
-  _updatedAt?: string;
-  _createdAt?: string;
-};
-
-export interface ProjectPostProps extends NonNullable<Parameters<typeof projectPostVariants>[0]> {
-  project: CollectionEntry<"projects"> | CMSProjectDocument;
-  class?: string;
-  showImage?: boolean;
-  separator?: boolean;
-}
-
-type Props = ProjectPostProps;
-
-const projectPostVariants = scv({
-  slots: [
-    "root",
-    "imageWrapper",
-    "image",
-    "content",
-    "title",
-    "description",
-    "footer",
-    "authorGroup",
-    "author",
-    "link",
-    "badge",
-    "featuredBadge"
-  ],
-  base: {
-    root: "group flex transition-all duration-300 w-full",
-    imageWrapper: "relative overflow-hidden ring-1 ring-border shadow-sm shrink-0 bg-muted isolate",
-    image: "absolute inset-0 h-full w-full !object-cover transition-transform duration-500 group-hover:scale-105 block",
-    content: "flex flex-col flex-1",
-    title: "font-heading font-bold tracking-tight text-pretty group-hover:text-primary transition-colors",
-    description: "text-muted-foreground line-clamp-2 text-base text-pretty",
-    footer: "mt-auto flex items-end justify-end w-full",
-    authorGroup: "flex flex-col gap-5xs text-xs font-medium text-muted-foreground",
-    author: "font-bold text-foreground",
-    link: "inline-flex items-center gap-5xs text-sm font-semibold hover:underline decoration-primary underline-offset-4",
-    badge: "px-2xs py-6xs rounded-full bg-muted text-muted-foreground text-[10px] font-bold uppercase tracking-wider",
-    featuredBadge: "absolute top-3 left-3 z-20 flex items-center gap-5xs px-3xs py-5xs rounded-full bg-primary text-primary-foreground text-[10px] font-bold uppercase tracking-wider shadow-lg ring-1 ring-white/20",
-  },
-  variants: {
-    variant: {
-      flat: {
-        root: "flex-col md:flex-row gap-3xl md:gap-4xl items-stretch py-4xl first:pt-0 last:pb-0 text-left",
-        imageWrapper: "w-full md:w-5/12 aspect-video self-stretch rounded-3xl shrink-0 shadow-none ring-0",
-        content: "gap-2xl justify-center items-start text-left",
-        title: "text-xl",
-        description: "text-base",
-      },
-      card: {
-        root: "flex-col bg-muted/20 p-2xl rounded-3xl border border-border/50 hover:bg-muted/40 hover:shadow-2xl hover:-translate-y-1 gap-2xl text-left items-stretch",
-        imageWrapper: "w-full aspect-video rounded-2xl shadow-lg",
-        title: "text-xl",
-        content: "gap-2xl text-left items-start",
-      },
-    },
-  },
-  defaultVariants: {
-    variant: "flat",
-  },
-});
-
-const { project, variant, class: className, showImage = true, separator = false } = Astro.props;
-
-// Detect if this is a CMS document or Astro content entry
-const isCMSDocument = "_id" in project && !("id" in project);
-
-// Extract fields based on source type
-const projectTitle = isCMSDocument ? project.title : project.data.title;
-const projectDescription = isCMSDocument ? project.description : project.data.description;
-const projectImage = isCMSDocument ? project.heroImage : project.data.heroImage;
-const projectFeatured = isCMSDocument ? (project.featured ?? false) : project.data.featured;
-const projectTags = isCMSDocument ? (project.tags || []) : (project.data.tags || []);
-
-// Handle date formatting
-const rawDate = isCMSDocument ? (project.publishedDate || project._createdAt) : project.data.publishedDate;
-const d = rawDate ? new Date(rawDate) : null;
-const formattedDate = d && !isNaN(d.getTime())
-  ? new Intl.DateTimeFormat(translationLocale, {
-      dateStyle: "medium",
-    }).format(d)
-  : "";
-
-// Get slug from CMS or Astro content
-const projectSlug = isCMSDocument 
-  ? (project.slug || "")
-  : project.id.replace(/^(en|pt|de|es|ja)\//, "");
-
-const { root, imageWrapper, image, content, title, description, footer, authorGroup, author, link, badge, featuredBadge } = projectPostVariants({ variant });
----
-
-<div class="flex flex-col w-full">
-  <a href={`/${translationLocale}/projects/${projectSlug}`} class:list={[root, className]}>
-    {showImage && (
-      <div class={imageWrapper}>
-        {projectFeatured && (
-          <div class={featuredBadge}>
-            <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="currentColor" stroke="none"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path></svg>
-            {t.latest_badge}
-          </div>
-        )}
-        {projectImage && (
-          <Image
-            src={projectImage as any}
-            alt={projectTitle}
-            width={800}
-            height={450}
-            class={image}
-            loading="lazy"
-            decoding="async"
-          />
-        )}
-      </div>
-    )}
-
-    <div class={content}>
-      <h3 class={title}>
-        {projectTitle}
-      </h3>
-
-      <div class="flex items-center gap-3xs mt-3xs">
-        <Avatar size="sm" variant="primary">
-          <AvatarImage image={avatarAsset} alt="Daniel Marchi" />
-        </Avatar>
-        <div class={authorGroup}>
-          <span class={author}>Daniel Marchi</span>
-          <div class="flex items-center gap-3xs">
-            <span>{formattedDate}</span>
-            <div class="flex flex-wrap gap-5xs ml-3xs">
-              {Array.isArray(projectTags) && projectTags.map((tag: string) => (
-                <span class={badge}>{tag}</span>
-              ))}
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <p class={description}>
-        {projectDescription}
-      </p>
-
-      <div class={footer}>
-        <span class={link}>
-          {t.view_project}
-          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="transition-transform group-hover:translate-x-1"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
-        </span>
-      </div>
-    </div>
-  </a>
-
-  {separator && (
-    <div class="py-4xl last:hidden">
-      <Separator />
-    </div>
-  )}
-</div>
-

package/src/components/RLHead.astro

@@ -1,3 +0,0 @@
----
-
----

package/src/utils/deep-merge.ts

@@ -1,36 +0,0 @@
-function isObject(value: unknown): value is Record<string, unknown> {
-  return typeof value === "object" && value !== null && !Array.isArray(value)
-}
-
-/**
- * Deep-merge two dictionaries. - `base` provides known structure (fallback) - `overrides` can
- * provide partial values - Both types are preserved and merged correctly
- */
-function assertRecord(obj: unknown): asserts obj is Record<string, unknown> {
-  if (!obj || typeof obj !== "object") throw new Error("Expected object")
-}
-
-function assertA<T>(obj: unknown): asserts obj is T {
-  if (!obj) throw new Error("Expected result")
-}
-
-export function deepMerge<A extends object, B extends Partial<A>>(base: A, overrides: B): A {
-  const result = { ...base }
-  assertRecord(result)
-
-  for (const key of Object.keys(overrides)) {
-    const overrideValue = Reflect.get(overrides, key)
-    const baseValue = Reflect.get(base, key)
-
-    if (overrideValue === undefined) continue
-
-    if (isObject(baseValue) && isObject(overrideValue)) {
-      Reflect.set(result, key, deepMerge(baseValue as object, overrideValue as Partial<object>))
-    } else {
-      Reflect.set(result, key, overrideValue)
-    }
-  }
-
-  assertA<A>(result)
-  return result
-}

package/src/utils/parse-boolean.ts

@@ -1,14 +0,0 @@
-/**
- * Parse a boolean flag from Wrangler-env string.
- *
- * Accepts: "1", "true", "on" → true "0", "false", "off" → false undefined → defaultValue
- */
-export function parseBooleanFlag(value: string | undefined, defaultValue: boolean): boolean {
-  if (value === undefined) return defaultValue
-
-  const v = value.toLowerCase()
-  if (v === "1" || v === "true" || v === "on") return true
-  if (v === "0" || v === "false" || v === "off") return false
-
-  return defaultValue
-}