@moldea.ai/website-ui 1.2.2 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moldea.ai/website-ui",
-  "version": "1.2.2",
+  "version": "1.6.0",
   "description": "Shared Astro foundations for moldea public websites.",
   "homepage": "https://github.com/moldea-ai/packages/tree/main/projects/website-ui#readme",
   "bugs": {
@@ -47,6 +47,9 @@
       "types": "./dist/theme/index.d.ts",
       "import": "./dist/theme.js"
     },
+    "./accordion": {
+      "import": "./src/components/accordion/accordion.component.astro"
+    },
     "./action-button": {
       "import": "./src/components/action-button/action-button.component.astro"
     },
@@ -59,9 +62,18 @@
     "./breadcrumbs": {
       "import": "./src/components/breadcrumbs/breadcrumbs.component.astro"
     },
+    "./code-block": {
+      "import": "./src/components/code-block/code-block.component.astro"
+    },
+    "./connection-label": {
+      "import": "./src/components/connection-label/connection-label.component.astro"
+    },
     "./documentation-shell": {
       "import": "./src/components/documentation-shell/documentation-shell.component.astro"
     },
+    "./dialog": {
+      "import": "./src/components/dialog/dialog.component.astro"
+    },
     "./evaluation-replay": {
       "import": "./src/components/evaluation-replay/evaluation-replay.component.astro"
     },
@@ -69,6 +81,12 @@
       "types": "./dist/evaluation-replay/index.d.ts",
       "import": "./dist/evaluation-replay.js"
     },
+    "./file-preview": {
+      "import": "./src/components/file-preview/file-preview.component.astro"
+    },
+    "./hero-backdrop": {
+      "import": "./src/components/hero-backdrop/hero-backdrop.component.astro"
+    },
     "./inline-brand-text": {
       "import": "./src/components/inline-brand-text/inline-brand-text.component.astro"
     },
@@ -85,6 +103,9 @@
     "./site-footer": {
       "import": "./src/components/site-footer/site-footer.component.astro"
     },
+    "./result-summary": {
+      "import": "./src/components/result-summary/result-summary.component.astro"
+    },
     "./site-header": {
       "import": "./src/components/site-header/site-header.component.astro"
     },

package/src/components/accordion/accordion.component.astro

@@ -0,0 +1,103 @@
+---
+import { ChevronDown } from '@lucide/astro';
+import InlineBrandText from '../inline-brand-text/inline-brand-text.component.astro';
+
+// sibling items share a document-unique group name; at most one may be initially open
+export interface Props {
+  id: string;
+  group: string;
+  title: string;
+  description?: string;
+  isOpen?: boolean;
+}
+const { id, group, title, description, isOpen = false } = Astro.props;
+if (!id.trim() || !group.trim() || !title.trim())
+  throw new Error('Accordion requires an ID, group, and title.');
+---
+
+<details
+  id={id}
+  name={group}
+  open={isOpen}
+  class="group/accordion min-w-0 scroll-mt-24 border-y sm:rounded-xl sm:border sm:bg-card"
+  data-accordion-item
+>
+  <summary
+    class="flex min-h-12 list-none items-center gap-3 px-1 py-4 transition-colors outline-none hover:bg-secondary/60 focus-visible:ring-inset active:bg-secondary motion-reduce:transition-none sm:rounded-xl sm:px-5 [&::-webkit-details-marker]:hidden"
+    aria-labelledby={`${id}-title`}
+    aria-describedby={description ? `${id}-description` : undefined}
+  >
+    <span class="min-w-0 flex-1">
+      <span
+        id={`${id}-title`}
+        class="block text-sm leading-6 font-semibold sm:text-base"
+        ><InlineBrandText text={title} /></span
+      >
+      {
+        description && (
+          <span
+            id={`${id}-description`}
+            class="mt-1 block text-xs leading-5 text-muted-foreground"
+          >
+            <InlineBrandText text={description} />
+          </span>
+        )
+      }
+    </span>
+    <slot name="status" />
+    <ChevronDown
+      class="size-4 shrink-0 text-muted-foreground transition-transform duration-200 group-open/accordion:rotate-180 motion-reduce:transition-none"
+      aria-hidden="true"
+    />
+  </summary>
+  <div
+    class="accordion-panel min-w-0 px-1 pt-1 pb-5 sm:px-5"
+    data-accordion-panel
+  >
+    <slot />
+  </div>
+</details>
+
+<style>
+  /* Variable-height content fades without a height transition or page-wide movement. */
+  details[open] > .accordion-panel {
+    animation: accordion-reveal 160ms ease-out;
+  }
+  @keyframes accordion-reveal {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    details[open] > .accordion-panel {
+      animation: none;
+    }
+  }
+</style>
+
+<script>
+  /** Reveals hash-linked content after direct, history, and Astro client navigation. */
+  const revealAccordionAnchor = (): void => {
+    let anchorId: string;
+    try {
+      anchorId = decodeURIComponent(window.location.hash.slice(1));
+    } catch {
+      return;
+    }
+    if (!anchorId) return;
+    const target = document.getElementById(anchorId);
+    const item = target?.closest<HTMLDetailsElement>('details[data-accordion-item]');
+    if (!item) return;
+    item.open = true;
+    // opening an earlier item can change the anchor position after native hash scrolling
+    requestAnimationFrame(() => {
+      target?.scrollIntoView({ block: 'start', behavior: 'instant' });
+    });
+  };
+  revealAccordionAnchor();
+  window.addEventListener('hashchange', revealAccordionAnchor);
+  document.addEventListener('astro:page-load', revealAccordionAnchor);
+</script>

package/src/components/action-link/action-link.component.astro

@@ -11,7 +11,12 @@ const { class: className, size = 'md', variant = 'primary', ...attributes } = As
 ---
 
 <a
-  class:list={['action-control', `action-${variant}`, `action-size-${size}`, className]}
+  class:list={[
+    'action-control',
+    variant === 'link' ? 'text-action-link' : `action-${variant}`,
+    `action-size-${size}`,
+    className,
+  ]}
   {...attributes}
 >
   <slot />

package/src/components/breadcrumbs/breadcrumbs.component.astro

@@ -32,7 +32,7 @@ const { basePath = import.meta.env.BASE_URL, items } = Astro.props;
           )}
           {item.href ? (
             <a
-              class="rounded-sm underline-offset-4 hover:text-foreground hover:underline"
+              class="plain-link"
               href={withBase(item.href, basePath)}
             >
               {item.label}

package/src/components/code-block/code-block.component.astro

@@ -0,0 +1,22 @@
+---
+import { renderCodeBlock } from '@moldea.ai/website-ui/markdown';
+
+// highlighted source, with a panel by default or a flat surface for composition inside another panel
+export interface Props {
+  source: string;
+  language?: string;
+  variant?: 'panel' | 'plain';
+}
+const { source, language, variant = 'panel' } = Astro.props;
+const html = await renderCodeBlock(source, language);
+---
+
+<div
+  class:list={[
+    'prose-moldea min-w-0 text-sm [&_pre]:m-0 [&_pre]:text-xs [&_pre]:leading-6',
+    variant === 'panel'
+      ? '[&_pre]:p-4'
+      : '[&_pre]:rounded-none [&_pre]:border-0 [&_pre]:bg-transparent [&_pre]:p-0 [&_pre]:pb-1',
+  ]}
+  set:html={html}
+/>

package/src/components/connection-label/connection-label.component.astro

@@ -0,0 +1,26 @@
+---
+// visual relationship between examples; consumers supply its meaning and optional decorative icon
+export interface Props {
+  tone?: 'danger' | 'neutral';
+}
+const { tone = 'neutral' } = Astro.props;
+---
+
+<p
+  class:list={[
+    'flex items-center justify-center gap-2 py-3 text-xs',
+    tone === 'danger' ? 'text-destructive' : 'text-muted-foreground',
+  ]}
+>
+  {
+    Astro.slots.has('icon') && (
+      <span
+        class="shrink-0"
+        aria-hidden="true"
+      >
+        <slot name="icon" />
+      </span>
+    )
+  }
+  <span class="min-w-0"><slot /></span>
+</p>

package/src/components/dialog/dialog.component.astro

@@ -0,0 +1,266 @@
+---
+import { ArrowLeft, X } from '@lucide/astro';
+
+import ActionButton, {
+  type Props as IActionButtonProps,
+} from '../action-button/action-button.component.astro';
+
+// consumers own the unique document ID, trigger copy, and slotted dialog content
+export interface Props {
+  id: string;
+  title: string;
+  description?: string;
+  triggerLabel: string;
+  triggerAriaLabel?: string;
+  triggerVariant?: IActionButtonProps['variant'];
+  triggerSize?: 'compact' | Exclude<IActionButtonProps['size'], 'icon'>;
+  size?: 'medium' | 'large';
+  closeLabel?: string;
+  // matches the platform's opt-in dismissal for read-only content
+  isOverlayCloseEnabled?: boolean;
+}
+
+const {
+  id,
+  title,
+  description,
+  triggerLabel,
+  triggerAriaLabel,
+  triggerVariant = 'outline',
+  triggerSize = 'compact',
+  size = 'medium',
+  closeLabel = 'Close dialog',
+  isOverlayCloseEnabled = false,
+} = Astro.props;
+---
+
+<div data-dialog-root>
+  <ActionButton
+    variant={triggerVariant}
+    size={triggerSize === 'compact' ? 'sm' : triggerSize}
+    class={triggerSize === 'compact' ? 'py-1 text-xs [hidden]:hidden' : '[hidden]:hidden'}
+    aria-label={triggerAriaLabel}
+    aria-controls={id}
+    aria-haspopup="dialog"
+    data-dialog-trigger
+    hidden
+  >
+    {triggerLabel}
+  </ActionButton>
+  <dialog
+    id={id}
+    class:list={[
+      'fixed inset-0 m-0 h-dvh max-h-none w-full max-w-none grid-rows-[auto_minmax(0,1fr)] overflow-hidden border-0 bg-background p-0 text-foreground outline-none [--dialog-exit-duration:300ms] [--dialog-motion-transform:translateY(0.25rem)] backdrop:bg-black/45 open:grid sm:m-auto sm:h-fit sm:max-h-[calc(100dvh-2rem)] sm:w-[calc(100vw-2rem)] sm:rounded-xl sm:border sm:shadow-raised sm:[--dialog-exit-duration:200ms] sm:[--dialog-motion-transform:translateY(0.5rem)_scale(0.95)] sm:backdrop:backdrop-blur-xs dark:backdrop:bg-black/70',
+      size === 'large' ? 'sm:max-w-5xl' : 'sm:max-w-2xl',
+    ]}
+    aria-labelledby={`${id}-title`}
+    aria-describedby={description ? `${id}-description` : undefined}
+    data-website-ui-dialog
+    data-overlay-close-enabled={isOverlayCloseEnabled ? '' : undefined}
+  >
+    <header
+      class="grid grid-cols-[auto_minmax(0,1fr)] items-center gap-x-2 border-b pt-[max(0.5rem,env(safe-area-inset-top))] pr-[max(0.5rem,env(safe-area-inset-right))] pb-4 pl-[max(0.5rem,env(safe-area-inset-left))] sm:grid-cols-[minmax(0,1fr)_auto] sm:px-6 sm:py-4"
+    >
+      <div class="col-start-2 row-start-1 flex min-h-9 min-w-0 items-center sm:col-start-1">
+        <slot name="heading">
+          <h2
+            id={`${id}-title`}
+            class="min-w-0 text-lg font-semibold"
+          >
+            {title}
+          </h2>
+        </slot>
+      </div>
+      <form
+        method="dialog"
+        class="col-start-1 row-start-1 sm:col-start-2"
+        data-dialog-close-form
+      >
+        <ActionButton
+          type="submit"
+          variant="ghost"
+          size="icon"
+          class="size-9 sm:size-7 sm:rounded-md"
+          aria-label={closeLabel}
+          autofocus
+        >
+          <ArrowLeft
+            class="size-4 sm:hidden"
+            aria-hidden="true"
+          />
+          <X
+            class="hidden size-4 sm:block"
+            aria-hidden="true"
+          />
+        </ActionButton>
+      </form>
+      {
+        description && (
+          <p
+            id={`${id}-description`}
+            class="col-span-2 mt-1 px-2 text-sm leading-6 text-muted-foreground sm:px-0"
+          >
+            {description}
+          </p>
+        )
+      }
+    </header>
+    <div
+      class="min-h-0 min-w-0 overflow-y-auto overscroll-contain p-4 pb-[max(1rem,env(safe-area-inset-bottom))] sm:p-6"
+    >
+      <slot />
+    </div>
+  </dialog>
+</div>
+
+<script>
+  /** Enhances optional detail triggers while native dialogs own modality and keyboard focus. */
+  const initializeDialogs = (): void => {
+    for (const root of document.querySelectorAll<HTMLElement>('[data-dialog-root]')) {
+      if (root.dataset['enhanced'] === 'true') continue;
+      const trigger = root.querySelector<HTMLButtonElement>(':scope > [data-dialog-trigger]');
+      const dialog = root.querySelector<HTMLDialogElement>(':scope > dialog');
+      if (trigger === null || dialog === null || typeof dialog.showModal !== 'function') continue;
+
+      let closeRequest: symbol | undefined;
+      /**
+       * Keeps native modality until exit completes; navigation and reopening invalidate old exits.
+       * @returns A promise that resolves after dismissal or invalidation by a newer session.
+       */
+      const requestClose = async (): Promise<void> => {
+        if (!dialog.open || closeRequest !== undefined) return;
+        const request = Symbol();
+        closeRequest = request;
+        dialog.dataset['closing'] = '';
+        // cancellation (including reduced-motion changes) must still finish dismissal
+        await Promise.allSettled(dialog.getAnimations().map((animation) => animation.finished));
+        if (closeRequest === request && dialog.isConnected && dialog.open) dialog.close();
+      };
+      trigger.addEventListener('click', () => {
+        if (dialog.open) return;
+        closeRequest = undefined;
+        delete dialog.dataset['closing'];
+        dialog.showModal();
+      });
+      dialog.addEventListener('cancel', (event) => {
+        event.preventDefault();
+        void requestClose();
+      });
+      dialog.querySelector('[data-dialog-close-form]')?.addEventListener('submit', (event) => {
+        event.preventDefault();
+        void requestClose();
+      });
+      dialog.addEventListener('close', () => {
+        if (dialog.open) return;
+        closeRequest = undefined;
+        delete dialog.dataset['closing'];
+      });
+      if (dialog.hasAttribute('data-overlay-close-enabled')) {
+        let didPressOverlay = false;
+        /** Native backdrop events target the dialog, so exclude its panel bounds. */
+        const isOverlayEvent = (event: MouseEvent): boolean => {
+          if (event.target !== dialog) return false;
+          const bounds = dialog.getBoundingClientRect();
+          return (
+            event.clientX < bounds.left ||
+            event.clientX > bounds.right ||
+            event.clientY < bounds.top ||
+            event.clientY > bounds.bottom
+          );
+        };
+        dialog.addEventListener('pointerdown', (event) => {
+          didPressOverlay = event.isPrimary && event.button === 0 && isOverlayEvent(event);
+        });
+        dialog.addEventListener('pointercancel', () => {
+          didPressOverlay = false;
+        });
+        dialog.addEventListener('click', (event) => {
+          const shouldClose = didPressOverlay && event.button === 0 && isOverlayEvent(event);
+          didPressOverlay = false;
+          if (shouldClose) void requestClose();
+        });
+        dialog.addEventListener('close', () => {
+          didPressOverlay = false;
+        });
+      }
+      root.dataset['enhanced'] = 'true';
+      trigger.hidden = false;
+    }
+  };
+
+  initializeDialogs();
+  document.addEventListener('astro:page-load', initializeDialogs);
+  document.addEventListener('astro:before-swap', () => {
+    for (const dialog of document.querySelectorAll<HTMLDialogElement>(
+      '[data-website-ui-dialog]:modal',
+    )) {
+      dialog.close();
+    }
+  });
+</script>
+
+<style>
+  /* Native modality makes the page inert; also prevent background scrolling. */
+  :global(html:has([data-website-ui-dialog]:modal)) {
+    overflow: hidden;
+  }
+
+  /* Match platform dialog motion without animating content dimensions. */
+  @media (prefers-reduced-motion: no-preference) {
+    dialog:modal {
+      animation: dialog-enter 300ms ease-out both;
+    }
+
+    dialog:modal::backdrop {
+      animation: dialog-backdrop-enter 300ms ease-out both;
+    }
+
+    dialog[data-closing]:modal {
+      animation: dialog-exit var(--dialog-exit-duration) ease-in both;
+    }
+
+    dialog[data-closing]:modal::backdrop {
+      animation: dialog-backdrop-exit 200ms ease-in both;
+    }
+  }
+
+  @keyframes dialog-enter {
+    from {
+      opacity: 0;
+      transform: var(--dialog-motion-transform);
+    }
+    to {
+      opacity: 1;
+      transform: none;
+    }
+  }
+
+  @keyframes dialog-exit {
+    from {
+      opacity: 1;
+      transform: none;
+    }
+    to {
+      opacity: 0;
+      transform: var(--dialog-motion-transform);
+    }
+  }
+
+  @keyframes dialog-backdrop-enter {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes dialog-backdrop-exit {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+</style>

package/src/components/documentation-shell/documentation-outline.component.astro

@@ -11,10 +11,7 @@ const { headings } = Astro.props;
 {
   headings.map((heading) => (
     <a
-      class:list={[
-        'text-sm leading-5 text-muted-foreground hover:text-foreground',
-        heading.depth === 3 && 'ps-3',
-      ]}
+      class:list={['plain-link text-sm leading-5', heading.depth === 3 && 'ps-3']}
       href={`#${heading.id}`}
     >
       {heading.text}

package/src/components/documentation-shell/documentation-shell.component.astro

@@ -89,12 +89,7 @@ const contentGridClass = hasNavigation
               <div class="grid gap-1">
                 {group.items.map((item) => (
                   <a
-                    class:list={[
-                      'rounded-lg px-3 py-2.5 text-sm font-medium',
-                      item.href === currentRoute
-                        ? 'bg-accent text-accent-foreground'
-                        : 'hover:bg-muted',
-                    ]}
+                    class="rounded-lg navigation-link px-3 py-2.5 text-sm"
                     href={withBase(item.href, basePath)}
                     aria-current={item.href === currentRoute ? 'page' : undefined}
                   >
@@ -144,12 +139,7 @@ const contentGridClass = hasNavigation
                   <div class="grid gap-1">
                     {group.items.map((item) => (
                       <a
-                        class:list={[
-                          'rounded-lg px-3 py-2 text-sm font-medium',
-                          item.href === currentRoute
-                            ? 'bg-accent text-accent-foreground'
-                            : 'text-muted-foreground hover:bg-muted hover:text-foreground',
-                        ]}
+                        class="rounded-lg navigation-link px-3 py-2 text-sm"
                         href={withBase(item.href, basePath)}
                         aria-current={item.href === currentRoute ? 'page' : undefined}
                       >

package/src/components/evaluation-replay/evaluation-replay-markdown.component.astro

@@ -14,6 +14,6 @@ const html = await renderMarkdownFragment(markdown, {
 ---
 
 <div
-  class="prose-moldea prose-moldea-wrap-code replay-markdown min-w-0"
+  class="prose-moldea replay-markdown min-w-0"
   set:html={html}
 />

package/src/components/file-preview/file-preview.component.astro

@@ -0,0 +1,55 @@
+---
+import { FileText } from '@lucide/astro';
+
+import InlineBrandText from '../inline-brand-text/inline-brand-text.component.astro';
+import type { IStatusBadgeTone } from '../status-badge/status-badge.component.astro';
+
+// file presentation only; consumers own source selection, status, and body content
+export interface Props {
+  path: string;
+  label?: string;
+  tone?: IStatusBadgeTone;
+}
+
+const { path, label, tone = 'neutral' } = Astro.props;
+const filenameStart = path.lastIndexOf('/');
+const directory = filenameStart < 0 ? '' : path.slice(0, filenameStart);
+const filename = filenameStart < 0 ? path : path.slice(filenameStart);
+const toneClasses = {
+  danger: 'border-destructive/40 bg-destructive/10',
+  info: 'border-info/40 bg-info/10',
+  neutral: 'border-border bg-muted/30',
+  success: 'border-border bg-secondary',
+  warning: 'border-warning/60 bg-warning/15',
+} as const;
+---
+
+<div class="min-w-0 overflow-hidden rounded-lg border">
+  <div class:list={['flex items-center gap-3 border-b px-3 py-3', toneClasses[tone]]}>
+    <span
+      class="shrink-0 text-muted-foreground"
+      aria-hidden="true"
+    >
+      <slot name="icon"><FileText class="size-5" /></slot>
+    </span>
+    <div class="min-w-0 flex-1">
+      {
+        label && (
+          <p class="mb-1 text-xs text-muted-foreground">
+            <InlineBrandText text={label} />
+          </p>
+        )
+      }
+      <code
+        class="inline-code flex w-fit max-w-full text-xs whitespace-nowrap"
+        title={path}
+      >
+        <span class="min-w-0 truncate">{directory}</span><span
+          class="max-w-full shrink-0 break-all whitespace-normal">{filename}</span
+        >
+      </code>
+    </div>
+    <slot name="status" />
+  </div>
+  <slot />
+</div>

package/src/components/hero-backdrop/hero-backdrop.component.astro

@@ -0,0 +1,9 @@
+---
+// shared static brand backdrop; the consumer owns the positioned section and foreground content
+---
+
+<div
+  class="pointer-events-none absolute inset-0 [background-image:radial-gradient(circle_at_70%_18%,color-mix(in_oklch,var(--accent)_60%,transparent),transparent_30%),linear-gradient(to_right,color-mix(in_oklch,var(--border)_35%,transparent)_1px,transparent_1px),linear-gradient(to_bottom,color-mix(in_oklch,var(--border)_35%,transparent)_1px,transparent_1px)] [mask-image:linear-gradient(to_bottom,black,transparent_92%)] [background-size:auto,3rem_3rem,3rem_3rem] opacity-60"
+  aria-hidden="true"
+>
+</div>

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

@@ -13,7 +13,7 @@ const segments = text.split(/(\bmoldea\b)/giu);
     /^moldea$/iu.test(segment) ? (
       <code
         class:list={[
-          'font-mono font-semibold',
+          'font-mono font-semibold tracking-normal',
           variant === 'badge'
             ? 'rounded-md bg-code px-1.5 py-1 text-[0.86em] text-code-foreground'
             : 'text-[0.92em]',