@moldea.ai/website-ui 1.1.4 → 1.2.0

package/src/components/inline-brand-text/inline-brand-text.component.astro

@@ -1,17 +1,25 @@
 ---
 export interface Props {
   text: string;
+  variant?: 'badge' | 'compact';
 }
 
-const { text } = Astro.props;
-const segments = text.split(/(\bmoldea\b)/gu);
+const { text, variant = 'badge' } = Astro.props;
+const segments = text.split(/(\bmoldea\b)/giu);
 ---
 
 {
   segments.map((segment) =>
-    segment === 'moldea' ? (
-      <code class="rounded-md bg-code px-1.5 py-1 font-mono text-[0.86em] font-semibold text-code-foreground">
-        {segment}
+    /^moldea$/iu.test(segment) ? (
+      <code
+        class:list={[
+          'font-mono font-semibold',
+          variant === 'badge'
+            ? 'rounded-md bg-code px-1.5 py-1 text-[0.86em] text-code-foreground'
+            : 'text-[0.92em]',
+        ]}
+      >
+        moldea
       </code>
     ) : (
       segment

package/src/components/site-footer/site-footer.component.astro

@@ -0,0 +1,9 @@
+<footer class="mt-section-gap border-t border-border">
+  <div class="page-shell grid gap-10 py-12 md:grid-cols-[1fr_auto_auto]">
+    <div class="max-w-md space-y-4">
+      <slot name="brand" />
+    </div>
+    <slot name="primary-navigation" />
+    <slot name="secondary-navigation" />
+  </div>
+</footer>

package/src/components/site-header/site-header.component.astro

@@ -0,0 +1,173 @@
+---
+import { GitFork, Menu, Search } from '@lucide/astro';
+
+import ThemeControl from '../theme-control/theme-control.component.astro';
+
+export interface ISiteHeaderNavigationItem {
+  href: string;
+  isActive: boolean;
+  label: string;
+}
+
+export interface Props {
+  breakpoint?: 'lg' | 'md';
+  mobileMenuLabel?: string;
+  mobileNavigationAriaLabel?: string;
+  navigationAriaLabel?: string;
+  navigationItems: readonly ISiteHeaderNavigationItem[];
+  searchAriaLabel: string;
+  searchHref: string;
+  searchIsActive: boolean;
+  sourceAriaLabel: string;
+  sourceHref: string;
+  sourceLabel?: string;
+  themeStorageKey: string;
+}
+
+const {
+  breakpoint = 'md',
+  mobileMenuLabel = 'Open navigation',
+  mobileNavigationAriaLabel,
+  navigationAriaLabel = 'Primary navigation',
+  navigationItems,
+  searchAriaLabel,
+  searchHref,
+  searchIsActive,
+  sourceAriaLabel,
+  sourceHref,
+  sourceLabel = 'Source on GitHub',
+  themeStorageKey,
+} = Astro.props;
+const breakpointClasses = {
+  lg: {
+    desktop: 'hidden lg:flex',
+    mobile: 'lg:hidden',
+  },
+  md: {
+    desktop: 'hidden md:flex',
+    mobile: 'md:hidden',
+  },
+} as const;
+const responsiveClasses = breakpointClasses[breakpoint];
+---
+
+<header class="sticky top-0 z-50 border-b border-border bg-background/92 backdrop-blur-xl">
+  <div class="page-shell flex min-h-16 items-center justify-between gap-4">
+    <slot name="brand" />
+
+    <nav
+      class:list={['items-center gap-1', responsiveClasses.desktop]}
+      aria-label={navigationAriaLabel}
+    >
+      {
+        navigationItems.map(({ href, isActive, label }) => (
+          <a
+            class:list={[
+              'rounded-lg px-3 py-2 text-sm transition-colors',
+              isActive
+                ? 'bg-secondary/70 font-bold text-foreground dark:bg-secondary/50'
+                : 'font-semibold text-muted-foreground hover:bg-muted hover:text-foreground',
+            ]}
+            href={href}
+            aria-current={isActive ? 'page' : undefined}
+          >
+            {label}
+          </a>
+        ))
+      }
+    </nav>
+
+    <div class:list={['items-center gap-2', responsiveClasses.desktop]}>
+      <a
+        class:list={[
+          'inline-flex size-10 items-center justify-center rounded-lg transition-colors',
+          searchIsActive ? 'bg-secondary/70 dark:bg-secondary/50' : 'hover:bg-muted',
+        ]}
+        href={searchHref}
+        aria-label={searchAriaLabel}
+        aria-current={searchIsActive ? 'page' : undefined}
+      >
+        <Search
+          class="size-4"
+          aria-hidden="true"
+        />
+      </a>
+      <a
+        class="inline-flex size-10 items-center justify-center rounded-lg hover:bg-muted"
+        href={sourceHref}
+        target="_blank"
+        rel="noopener noreferrer"
+        aria-label={sourceAriaLabel}
+      >
+        <GitFork
+          class="size-4"
+          aria-hidden="true"
+        />
+      </a>
+      <ThemeControl storageKey={themeStorageKey} />
+      <slot name="desktop-actions" />
+    </div>
+
+    <details class:list={['group relative', responsiveClasses.mobile]}>
+      <summary
+        class="flex size-11 list-none items-center justify-center rounded-lg border border-input bg-background hover:bg-muted [&::-webkit-details-marker]:hidden"
+        aria-label={mobileMenuLabel}
+      >
+        <Menu
+          class="size-5"
+          aria-hidden="true"
+        />
+      </summary>
+      <div
+        class="surface-card absolute end-0 top-13 w-[min(20rem,calc(100vw-2rem))] space-y-1 p-3 shadow-raised"
+      >
+        <nav
+          class="grid gap-1"
+          aria-label={mobileNavigationAriaLabel ??
+            `Mobile ${navigationAriaLabel.toLocaleLowerCase()}`}
+        >
+          {
+            navigationItems.map(({ href, isActive, label }) => (
+              <a
+                class:list={[
+                  'rounded-lg px-3 py-3 transition-colors',
+                  isActive
+                    ? 'bg-secondary/70 font-bold text-foreground dark:bg-secondary/50'
+                    : 'font-semibold text-muted-foreground hover:bg-muted hover:text-foreground',
+                ]}
+                href={href}
+                aria-current={isActive ? 'page' : undefined}
+              >
+                {label}
+              </a>
+            ))
+          }
+          <a
+            class:list={[
+              'rounded-lg px-3 py-3 transition-colors',
+              searchIsActive
+                ? 'bg-secondary/70 font-bold text-foreground dark:bg-secondary/50'
+                : 'font-semibold text-muted-foreground hover:bg-muted hover:text-foreground',
+            ]}
+            href={searchHref}
+            aria-current={searchIsActive ? 'page' : undefined}
+          >
+            Search
+          </a>
+          <a
+            class="rounded-lg px-3 py-3 font-semibold hover:bg-muted"
+            href={sourceHref}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {sourceLabel}
+          </a>
+          <slot name="mobile-actions" />
+        </nav>
+        <div class="mt-3 border-t border-border pt-3">
+          <ThemeControl storageKey={themeStorageKey} />
+        </div>
+      </div>
+    </details>
+  </div>
+</header>

package/src/components/status-badge/status-badge.component.astro

@@ -0,0 +1,36 @@
+---
+export type IStatusBadgeTone = 'danger' | 'info' | 'neutral' | 'success' | 'warning';
+
+export interface Props {
+  borderStyle?: 'dashed' | 'dotted' | 'solid';
+  label: string;
+  tone: IStatusBadgeTone;
+  truncate?: boolean;
+}
+
+const { borderStyle = 'solid', label, tone, truncate = false } = Astro.props;
+const borderStyleClasses = {
+  dashed: 'border-dashed',
+  dotted: 'border-dotted',
+  solid: 'border-solid',
+} as const;
+const toneClasses = {
+  danger: 'border-destructive/40 bg-destructive/10 text-foreground',
+  info: 'border-info/40 bg-info/10 text-foreground',
+  neutral: 'border-border bg-muted text-muted-foreground',
+  success: 'border-foreground/25 bg-secondary text-foreground',
+  warning: 'border-warning/60 bg-warning/15 text-warning-foreground dark:text-foreground',
+} as const;
+---
+
+<span
+  class:list={[
+    'min-h-6 max-w-full rounded-full border px-2.5 py-1 text-start text-[0.68rem] font-bold tracking-[0.08em] uppercase',
+    truncate ? 'block min-w-0 truncate' : 'inline-flex items-center break-words whitespace-normal',
+    borderStyleClasses[borderStyle],
+    toneClasses[tone],
+  ]}
+  data-status-badge={tone}
+>
+  {label}
+</span>

package/src/components/tabbed-panels/tabbed-panels.component.astro

@@ -0,0 +1,149 @@
+---
+export interface ITabbedPanelItem {
+  id: string;
+  label: string;
+  slotName: string;
+}
+
+export interface Props {
+  ariaLabel: string;
+  id: string;
+  items: readonly ITabbedPanelItem[];
+}
+
+const { ariaLabel, id, items } = Astro.props;
+const isStableIdentifier = (candidate: string): boolean => /^[a-z][a-z0-9-]*$/u.test(candidate);
+const uniqueIds = new Set(items.map((item) => item.id));
+const uniqueSlots = new Set(items.map((item) => item.slotName));
+
+if (
+  !isStableIdentifier(id) ||
+  items.length < 2 ||
+  uniqueIds.size !== items.length ||
+  uniqueSlots.size !== items.length ||
+  items.some(
+    (item) =>
+      !isStableIdentifier(item.id) ||
+      !isStableIdentifier(item.slotName) ||
+      item.label.trim().length === 0,
+  )
+) {
+  throw new Error('Tabbed panel configuration is invalid.');
+}
+---
+
+<div
+  class="flex min-w-0 flex-col gap-2"
+  data-tabbed-panels-root
+>
+  <nav
+    class="inline-flex h-8 w-fit max-w-full items-center justify-start overflow-x-auto overflow-y-hidden rounded-lg bg-secondary p-1 text-secondary-foreground"
+    aria-label={ariaLabel}
+    data-tabbed-panels-controls
+  >
+    {
+      items.map((item, index) => {
+        const panelId = `${id}-${item.id}-panel`;
+
+        return (
+          <a
+            class="inline-flex h-6 shrink-0 items-center justify-center rounded-md border border-transparent px-2.5 text-sm font-medium whitespace-nowrap transition-colors outline-none select-none hover:[text-shadow:0_0_0_currentColor,0.02em_0_0_currentColor,-0.02em_0_0_currentColor] focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background data-active:bg-background data-active:text-foreground data-active:shadow-inset data-active:[text-shadow:0_0_0_currentColor,0.02em_0_0_currentColor,-0.02em_0_0_currentColor] dark:data-active:border-border dark:data-active:bg-border/30"
+            href={`#${panelId}`}
+            data-active={index === 0 ? true : undefined}
+            data-tabbed-panel-control
+            data-panel-id={panelId}
+          >
+            {item.label}
+          </a>
+        );
+      })
+    }
+  </nav>
+
+  {
+    items.map((item) => {
+      const panelId = `${id}-${item.id}-panel`;
+      const headingId = `${id}-${item.id}-heading`;
+
+      return (
+        <section
+          id={panelId}
+          class="scroll-mt-24 pt-4 outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+          aria-labelledby={headingId}
+          data-tabbed-panel
+        >
+          <h3
+            id={headingId}
+            class="sr-only"
+          >
+            {item.label}
+          </h3>
+          <slot name={item.slotName} />
+        </section>
+      );
+    })
+  }
+</div>
+
+<script>
+  const initializeTabbedPanels = (): void => {
+    const roots = document.querySelectorAll<HTMLElement>('[data-tabbed-panels-root]');
+
+    for (const root of roots) {
+      if (root.dataset['enhanced'] === 'true') continue;
+      const controls = root.querySelector<HTMLElement>('[data-tabbed-panels-controls]');
+      const tabs = [...root.querySelectorAll<HTMLAnchorElement>('[data-tabbed-panel-control]')];
+      const panels = [...root.querySelectorAll<HTMLElement>('[data-tabbed-panel]')];
+      if (controls === null || tabs.length < 2 || panels.length !== tabs.length) continue;
+
+      const selectTab = (selectedIndex: number, shouldFocus: boolean): void => {
+        for (const [index, tab] of tabs.entries()) {
+          const isSelected = index === selectedIndex;
+          tab.setAttribute('aria-selected', String(isSelected));
+          tab.tabIndex = isSelected ? 0 : -1;
+          tab.toggleAttribute('data-active', isSelected);
+          const panel = panels.find(({ id }) => id === tab.dataset['panelId']);
+          if (panel !== undefined) panel.hidden = !isSelected;
+        }
+        if (shouldFocus) tabs[selectedIndex]?.focus();
+      };
+
+      controls.setAttribute('role', 'tablist');
+      for (const [index, tab] of tabs.entries()) {
+        const panel = panels.find(({ id }) => id === tab.dataset['panelId']);
+        if (panel === undefined) continue;
+        const tabId = `${panel.id}-tab`;
+        tab.id = tabId;
+        tab.setAttribute('aria-controls', panel.id);
+        tab.setAttribute('role', 'tab');
+        panel.setAttribute('aria-labelledby', tabId);
+        panel.setAttribute('role', 'tabpanel');
+        tab.addEventListener('click', (event) => {
+          event.preventDefault();
+          selectTab(index, false);
+        });
+        tab.addEventListener('keydown', (event) => {
+          const nextIndex =
+            event.key === 'ArrowRight'
+              ? (index + 1) % tabs.length
+              : event.key === 'ArrowLeft'
+                ? (index - 1 + tabs.length) % tabs.length
+                : event.key === 'Home'
+                  ? 0
+                  : event.key === 'End'
+                    ? tabs.length - 1
+                    : null;
+          if (nextIndex === null) return;
+          event.preventDefault();
+          selectTab(nextIndex, true);
+        });
+      }
+
+      root.dataset['enhanced'] = 'true';
+      selectTab(0, false);
+    }
+  };
+
+  initializeTabbedPanels();
+  document.addEventListener('astro:page-load', initializeTabbedPanels);
+</script>

package/src/styles.css

@@ -3,6 +3,7 @@
 @import './tokens.css';
 
 @source './components/**/*.{astro,ts}';
+@source './markdown/**/*.ts';
 
 @layer base {
   * {
@@ -204,6 +205,11 @@
     @apply w-full border-collapse text-sm;
   }
 
+  .prose-moldea .table-scroll table {
+    /* let the frame own the rounded perimeter while collapsed cell borders draw the grid */
+    @apply my-0 border-hidden;
+  }
+
   .prose-moldea th {
     @apply bg-muted text-start font-semibold text-foreground;
   }
@@ -215,6 +221,27 @@
   .table-scroll {
     @apply my-5 max-w-full overflow-x-auto rounded-xl border focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background;
   }
+
+  .markdown-badge {
+    @apply inline-flex min-h-6 max-w-full items-center rounded-full border px-2.5 py-1 text-start align-middle text-[0.68rem] leading-none font-bold tracking-[0.08em] uppercase;
+  }
+
+  .replay-markdown {
+    @apply text-sm leading-6;
+  }
+
+  .replay-markdown :is(h1, h2, h3, h4, h5, h6) {
+    @apply mt-5 mb-2 border-0 pt-0 text-base leading-6 font-semibold;
+  }
+
+  .replay-markdown :is(p, ul, ol, pre, blockquote),
+  .replay-markdown .table-scroll {
+    @apply my-3;
+  }
+
+  .replay-markdown > :last-child {
+    @apply mb-0;
+  }
 }
 
 @media (prefers-color-scheme: dark) {