@moldea.ai/website-ui 1.2.2 → 1.6.1

package/src/components/local-search/local-search.component.astro

@@ -14,6 +14,7 @@ export interface Props {
   noResultsMessage?: string;
   placeholder: string;
   searchIndexUrl: string;
+  shouldFocusOnLoad?: boolean;
 }
 
 const {
@@ -27,6 +28,7 @@ const {
   noResultsMessage = 'No matching documentation was found.',
   placeholder,
   searchIndexUrl,
+  shouldFocusOnLoad = false,
 } = Astro.props;
 ---
 
@@ -36,6 +38,7 @@ const {
   data-initial-prompt={initialPrompt}
   data-loading-message={loadingMessage}
   data-no-results-message={noResultsMessage}
+  data-search-focus-on-load={shouldFocusOnLoad ? 'true' : undefined}
 >
   <form
     class="mt-10"
@@ -116,6 +119,20 @@ const {
     return item;
   };
 
+  /**
+   * Loads and validates the shared index on the first submitted query.
+   * @returns The public search documents, or null when the index is unavailable.
+   */
+  const loadSearchDocuments = async (url: string): Promise<ISearchDocument[] | null> => {
+    try {
+      const response = await fetch(url);
+      if (!response.ok) return null;
+      return parseSearchDocuments(await response.json());
+    } catch {
+      return null;
+    }
+  };
+
   const initializeSearch = (root: HTMLElement): void => {
     const form = root.querySelector<HTMLFormElement>('[data-search-form]');
     const input = root.querySelector<HTMLInputElement>('[data-search-input]');
@@ -131,15 +148,12 @@ const {
     if (!searchIndexUrl) return;
 
     root.dataset.searchInitialized = 'true';
-    const documentsPromise = fetch(searchIndexUrl).then(async (response) => {
-      if (!response.ok) {
-        throw new Error('The documentation search index could not be loaded.');
-      }
-
-      return parseSearchDocuments(await response.json());
-    });
+    let documentsPromise: Promise<ISearchDocument[] | null> | undefined;
+    let latestRequest: symbol;
 
     const runSearch = async (query: string): Promise<void> => {
+      const request = Symbol();
+      latestRequest = request;
       results.replaceChildren();
 
       if (!query.trim()) {
@@ -149,19 +163,22 @@ const {
 
       status.textContent = root.dataset.loadingMessage ?? '';
 
-      try {
-        const matches = searchDocuments(query, await documentsPromise);
-
-        for (const match of matches) {
-          results.append(createSearchResult(match));
-        }
+      const pendingDocuments = (documentsPromise ??= loadSearchDocuments(searchIndexUrl));
+      const documents = await pendingDocuments;
+      if (documents === null && documentsPromise === pendingDocuments) documentsPromise = undefined;
+      // A replacement or cleared query owns the UI even while the index is still loading.
+      if (latestRequest !== request || !root.isConnected) return;
 
-        status.textContent = matches.length
-          ? `${matches.length} result${matches.length === 1 ? '' : 's'} for “${query}”.`
-          : (root.dataset.noResultsMessage ?? '');
-      } catch {
+      if (documents === null) {
         status.textContent = root.dataset.failureMessage ?? '';
+        return;
       }
+
+      const matches = searchDocuments(query, documents);
+      results.replaceChildren(...matches.map(createSearchResult));
+      status.textContent = matches.length
+        ? `${matches.length} result${matches.length === 1 ? '' : 's'} for “${query}”.`
+        : (root.dataset.noResultsMessage ?? '');
     };
 
     form.addEventListener('submit', (event) => {
@@ -180,6 +197,9 @@ const {
   const initializeLocalSearch = (): void => {
     for (const root of document.querySelectorAll<HTMLElement>('[data-local-search]')) {
       initializeSearch(root);
+      if (root.dataset.searchFocusOnLoad === 'true') {
+        root.querySelector<HTMLInputElement>('[data-search-input]')?.focus({ preventScroll: true });
+      }
     }
   };
 

package/src/components/result-summary/result-summary.component.astro

@@ -0,0 +1,64 @@
+---
+import InlineBrandText from '../inline-brand-text/inline-brand-text.component.astro';
+import type { IStatusBadgeTone } from '../status-badge/status-badge.component.astro';
+
+// balanced presentation shared by outcome cards and slotted dialog headings
+export interface Props {
+  title: string;
+  description: string;
+  tone?: IStatusBadgeTone;
+  headingId?: string;
+  as?: 'p' | 'h2' | 'h3';
+  hideIconOnMobile?: boolean;
+  ariaLabel?: string;
+}
+
+const {
+  title,
+  description,
+  tone = 'neutral',
+  headingId,
+  as: Title = 'p',
+  hideIconOnMobile = false,
+  ariaLabel = 'Result',
+} = Astro.props;
+const toneClasses = {
+  danger: 'border-destructive/40 bg-destructive/10',
+  info: 'border-info/40 bg-info/10',
+  neutral: 'border-border bg-muted',
+  success: 'border-border bg-secondary',
+  warning: 'border-warning/60 bg-warning/15',
+} as const;
+---
+
+<div
+  class="flex min-w-0 items-center gap-3"
+  role="group"
+  aria-label={ariaLabel}
+>
+  {
+    Astro.slots.has('icon') && (
+      <span
+        class:list={[
+          'size-10 shrink-0 items-center justify-center rounded-lg border',
+          hideIconOnMobile ? 'hidden sm:flex' : 'flex',
+          toneClasses[tone],
+        ]}
+        aria-hidden="true"
+      >
+        <slot name="icon" />
+      </span>
+    )
+  }
+  <div class="min-w-0 flex-1">
+    <div class="flex flex-wrap items-center gap-x-2 gap-y-1">
+      <Title
+        id={headingId}
+        class="text-sm leading-5 font-semibold"
+        ><InlineBrandText text={title} /></Title
+      >
+      <slot name="status" />
+    </div>
+    <p class="text-xs leading-5 text-muted-foreground"><InlineBrandText text={description} /></p>
+  </div>
+</div>

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

@@ -1,9 +1,11 @@
 ---
 import { GitFork, Menu, Search } from '@lucide/astro';
 
+import ActionLink from '../action-link/action-link.component.astro';
 import ThemeControl from '../theme-control/theme-control.component.astro';
 
 export interface ISiteHeaderNavigationItem {
+  compactLabel?: string;
   href: string;
   isActive: boolean;
   label: string;
@@ -51,7 +53,9 @@ const breakpointClasses = {
 const responsiveClasses = breakpointClasses[breakpoint];
 ---
 
-<header class="sticky top-0 z-50 border-b border-border bg-background/92 backdrop-blur-xl">
+<header
+  class="sticky top-0 z-50 border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/85"
+>
   <div class="page-shell flex min-h-16 items-center justify-between gap-4">
     <slot name="brand" />
 
@@ -60,29 +64,41 @@ const responsiveClasses = breakpointClasses[breakpoint];
       aria-label={navigationAriaLabel}
     >
       {
-        navigationItems.map(({ href, isActive, label }) => (
+        navigationItems.map(({ href, isActive, label, compactLabel }) => (
           <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',
-            ]}
+            class="rounded-lg navigation-link px-3 py-2 text-sm whitespace-nowrap"
             href={href}
+            aria-label={compactLabel ? label : undefined}
             aria-current={isActive ? 'page' : undefined}
           >
-            {label}
+            {compactLabel ? (
+              <>
+                <span
+                  class="xl:hidden"
+                  aria-hidden="true"
+                >
+                  {compactLabel}
+                </span>
+                <span
+                  class="hidden xl:inline"
+                  aria-hidden="true"
+                >
+                  {label}
+                </span>
+              </>
+            ) : (
+              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',
-        ]}
+      <ActionLink
+        size="icon"
+        variant="ghost"
+        class="aria-[current=page]:bg-secondary"
         href={searchHref}
         aria-label={searchAriaLabel}
         aria-current={searchIsActive ? 'page' : undefined}
@@ -91,9 +107,10 @@ const responsiveClasses = breakpointClasses[breakpoint];
           class="size-4"
           aria-hidden="true"
         />
-      </a>
-      <a
-        class="inline-flex size-10 items-center justify-center rounded-lg hover:bg-muted"
+      </ActionLink>
+      <ActionLink
+        size="icon"
+        variant="ghost"
         href={sourceHref}
         target="_blank"
         rel="noopener noreferrer"
@@ -103,14 +120,14 @@ const responsiveClasses = breakpointClasses[breakpoint];
           class="size-4"
           aria-hidden="true"
         />
-      </a>
+      </ActionLink>
       <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"
+        class="flex size-11 list-none items-center justify-center rounded-lg border border-input surface-link bg-background [&::-webkit-details-marker]:hidden"
         aria-label={mobileMenuLabel}
       >
         <Menu
@@ -129,12 +146,7 @@ const responsiveClasses = breakpointClasses[breakpoint];
           {
             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',
-                ]}
+                class="rounded-lg navigation-link px-3 py-3"
                 href={href}
                 aria-current={isActive ? 'page' : undefined}
               >
@@ -143,19 +155,14 @@ const responsiveClasses = breakpointClasses[breakpoint];
             ))
           }
           <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',
-            ]}
+            class="rounded-lg navigation-link px-3 py-3"
             href={searchHref}
             aria-current={searchIsActive ? 'page' : undefined}
           >
             Search
           </a>
           <a
-            class="rounded-lg px-3 py-3 font-semibold hover:bg-muted"
+            class="rounded-lg navigation-link px-3 py-3"
             href={sourceHref}
             target="_blank"
             rel="noopener noreferrer"

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

@@ -4,11 +4,16 @@ export type IStatusBadgeTone = 'danger' | 'info' | 'neutral' | 'success' | 'warn
 export interface Props {
   borderStyle?: 'dashed' | 'dotted' | 'solid';
   label: string;
+  size?: 'md' | 'sm';
   tone: IStatusBadgeTone;
   truncate?: boolean;
 }
 
-const { borderStyle = 'solid', label, tone, truncate = false } = Astro.props;
+const { borderStyle = 'solid', label, size = 'md', tone, truncate = false } = Astro.props;
+const sizeClasses = {
+  md: 'min-h-6 px-2.5 py-1 text-[0.68rem] font-bold tracking-[0.08em]',
+  sm: 'min-h-5 px-1.5 py-0 text-[0.625rem] leading-4 font-semibold tracking-wide',
+} as const;
 const borderStyleClasses = {
   dashed: 'border-dashed',
   dotted: 'border-dotted',
@@ -25,9 +30,10 @@ const toneClasses = {
 
 <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',
+    'max-w-full rounded-full border text-start uppercase',
     truncate ? 'block min-w-0 truncate' : 'inline-flex items-center break-words whitespace-normal',
     borderStyleClasses[borderStyle],
+    sizeClasses[size],
     toneClasses[tone],
   ]}
   data-status-badge={tone}

package/src/styles.css

@@ -21,7 +21,7 @@
   }
 
   body {
-    @apply min-w-80 bg-background text-foreground;
+    @apply bg-background text-foreground;
     margin: 0;
     overflow-wrap: break-word;
   }
@@ -98,7 +98,7 @@
   }
 
   .interactive-card {
-    @apply transition duration-200 ease-out hover:-translate-y-0.5 hover:border-foreground/25 active:translate-y-px motion-reduce:transform-none motion-reduce:transition-none;
+    @apply transition duration-200 ease-out hover:-translate-y-0.5 hover:border-foreground/25 focus-visible:ring-offset-0 active:translate-y-px motion-reduce:translate-none motion-reduce:transform-none motion-reduce:transition-none motion-reduce:hover:translate-none motion-reduce:active:translate-none;
   }
 
   .action-control {
@@ -125,6 +125,10 @@
     @apply border-transparent bg-transparent px-0! text-primary underline-offset-4 not-disabled:not-aria-disabled:hover:underline dark:text-primary-foreground dark:not-disabled:not-aria-disabled:hover:text-primary-foreground/80;
   }
 
+  .text-action-link {
+    @apply border-transparent bg-transparent px-0! font-semibold text-foreground link-feedback not-disabled:not-aria-disabled:active:not-aria-[haspopup]:translate-none;
+  }
+
   .action-size-sm {
     @apply min-h-8 gap-1.5 px-3 py-1.5 text-sm;
   }
@@ -185,11 +189,11 @@
     list-style: decimal;
   }
 
-  .prose-moldea a,
-  .text-link {
-    @apply font-medium text-link underline decoration-link/40 underline-offset-4 hover:decoration-current;
+  .prose-moldea a {
+    @apply text-link;
   }
 
+  .inline-code,
   .prose-moldea code:not(pre code) {
     @apply rounded-md bg-code px-1.5 py-1 font-mono text-[0.86em] font-semibold text-code-foreground;
   }
@@ -198,7 +202,18 @@
     @apply max-w-full overflow-x-auto rounded-xl border bg-code p-5 text-sm leading-6 text-code-foreground shadow-inset;
   }
 
-  .prose-moldea-wrap-code pre {
+  /* Preserve code, structured output, and file-tree alignment by default. */
+  .code-block,
+  .prose-moldea pre {
+    @apply max-w-full overflow-x-auto outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background;
+    white-space: pre;
+    overflow-wrap: normal;
+    word-break: normal;
+  }
+
+  /* Only explicitly identified plain text wraps; unlabelled fences remain lossless. */
+  .code-block[data-code-language='text'],
+  .prose-moldea pre:has(> code:is(.language-text, .language-txt, .language-plaintext)) {
     white-space: pre-wrap;
     overflow-wrap: anywhere;
   }
@@ -295,6 +310,37 @@
   }
 }
 
+/* platform TextLink feedback belongs to high-contrast text, not every linked surface */
+@utility link-feedback {
+  @apply not-disabled:not-aria-disabled:hover:opacity-70 focus-visible:ring-current focus-visible:ring-offset-0 not-disabled:not-aria-disabled:active:opacity-60;
+}
+
+@utility text-link {
+  /* keep the foreground opaque: a second dark-mode fade fails contrast when pressed */
+  color: var(--link);
+  @apply rounded-sm font-medium underline decoration-current underline-offset-4 link-feedback aria-[current=page]:font-semibold;
+}
+
+@utility plain-link {
+  @apply rounded-sm text-muted-foreground not-disabled:not-aria-disabled:hover:text-foreground focus-visible:ring-foreground focus-visible:ring-offset-0 not-disabled:not-aria-disabled:active:text-foreground;
+}
+
+@utility surface-link {
+  @apply not-disabled:not-aria-disabled:hover:bg-secondary not-disabled:not-aria-disabled:active:bg-secondary/80 aria-[current=page]:bg-secondary aria-[current=page]:font-semibold;
+}
+
+@utility surface-link-warning {
+  @apply border-warning/60 bg-warning/15 text-warning-foreground not-disabled:not-aria-disabled:hover:bg-warning/20 not-disabled:not-aria-disabled:active:bg-warning/25 dark:text-foreground;
+}
+
+@utility surface-link-danger {
+  @apply border-destructive/50 bg-destructive/10 not-disabled:not-aria-disabled:hover:bg-destructive/20 not-disabled:not-aria-disabled:active:bg-destructive/25 dark:bg-destructive/20 dark:not-disabled:not-aria-disabled:hover:bg-destructive/30 dark:not-disabled:not-aria-disabled:active:bg-destructive/25;
+}
+
+@utility navigation-link {
+  @apply font-semibold text-muted-foreground not-aria-[current=page]:hover:bg-secondary not-aria-[current=page]:hover:text-foreground not-aria-[current=page]:active:bg-secondary/80 aria-[current=page]:bg-secondary/70 aria-[current=page]:font-bold aria-[current=page]:text-foreground dark:aria-[current=page]:bg-secondary/50;
+}
+
 @media (prefers-color-scheme: dark) {
   html:not(.light):not(.dark) {
     color-scheme: dark;

package/src/tokens.css

@@ -130,7 +130,7 @@
   --info-foreground: oklch(99% 0.005 255);
   --sidebar: oklch(97.8% 0.005 198);
   --sidebar-foreground: var(--foreground);
-  --link: oklch(42% 0.12 255.341);
+  --link: var(--primary);
   --code-background: oklch(95.1% 0.007 226);
   --code-foreground: oklch(20% 0.026 232);
   --syntax-comment: oklch(51% 0.024 220);
@@ -174,7 +174,7 @@
   --info-foreground: oklch(20% 0.05 255);
   --sidebar: oklch(25.3% 0.031 258);
   --sidebar-foreground: var(--foreground);
-  --link: oklch(78% 0.1 244);
+  --link: var(--primary-foreground);
   --code-background: oklch(23.8% 0.027 258);
   --code-foreground: oklch(94% 0.01 215);
   --syntax-comment: oklch(72% 0.025 220);