@moldea.ai/website-ui 1.6.1 → 1.7.0

package/README.md

@@ -7,7 +7,7 @@ The package owns the reusable design tokens, global website primitives, interact
 ## Install after release
 
 ```bash
-pnpm add @moldea.ai/website-ui@1.6.1
+pnpm add @moldea.ai/website-ui@1.7.0
 ```
 
 The package currently supports Astro `7.2.2` and Tailwind CSS `4.3.3` exactly. Import the shared stylesheet once from the website's global stylesheet:
@@ -25,7 +25,7 @@ Tailwind scans the shipped Astro components through the package stylesheet's exp
 - Use `HeroBackdrop` inside a `relative overflow-hidden` section, with foreground content positioned `relative`. It owns the static, theme-aware radial/grid background shared with the Skill website. Do not duplicate its gradients in page markup.
 - Section introductions may place the title on the left and a concise explanation on the right at `lg`, stacking on mobile. Alternate this with compact stacked introductions when the content warrants it; do not force every section into the same composition.
 - Demonstrations should show recognizable files, one visible connection or mismatch, and a concise outcome. Compose `FilePreview`, `ConnectionLabel`, `ResultSummary`, `StatusBadge`, `CodeBlock`, and `Dialog`. Keep the essential result visible without interaction; dialogs contain optional evidence. Use `Accordion` when several examples share a section.
-- Preserve semantic inline code for filenames, variables, operations, and package names using `inline-code`; use `InlineBrandText` for prose containing the product name. Keep code wrapping and interaction feedback in the shared policies below.
+- Preserve semantic inline code for filenames, variables, operations, and package names using `inline-code`; use `InlineBrandText` for prose containing the product name. Breadcrumbs, documentation navigation, the site header, and local-search results apply the same product-name treatment to their string labels. Keep code wrapping and interaction feedback in the shared policies below.
 - Verify compositions at 320px through desktop, in both themes, with keyboard focus and reduced motion. Flatten unnecessary mobile panels and preserve legible filenames, labels, and status text. Use icons and explicit text together rather than relying on color alone.
 
 ## Surface-aware selection
@@ -75,6 +75,7 @@ Every component has a dedicated public subpath:
 - `@moldea.ai/website-ui/brand-logo`
 - `@moldea.ai/website-ui/breadcrumbs`
 - `@moldea.ai/website-ui/code-block`
+- `@moldea.ai/website-ui/code-copy-controls`
 - `@moldea.ai/website-ui/connection-label`
 - `@moldea.ai/website-ui/documentation-shell`
 - `@moldea.ai/website-ui/dialog`
@@ -94,7 +95,7 @@ Every component has a dedicated public subpath:
 - `@moldea.ai/website-ui/theme-bootstrap`
 - `@moldea.ai/website-ui/theme-control`
 
-`ThemeBootstrap` belongs in the document head before rendered content. Pass the same app-owned storage key to `ThemeControl`. Mount `NavigationProgress` once near the start of the document body in websites that use Astro's `ClientRouter`; it reports client navigation preparation without taking ownership of the app's layout. `BrandLogo` receives app-owned asset paths and labels rather than embedding one site's identity. `LocalSearch` receives app-owned copy, routes, and the generated index URL.
+`ThemeBootstrap` belongs in the document head before rendered content. Pass the same app-owned storage key to `ThemeControl`. Mount `NavigationProgress` once near the start of the document body in websites that use Astro's `ClientRouter`; it reports client navigation preparation without taking ownership of the app's layout. Mount `CodeCopyControls` once in the body to add copy actions to eligible code blocks on direct loads and client navigation. `BrandLogo` receives app-owned asset paths and labels rather than embedding one site's identity. `LocalSearch` receives app-owned copy, routes, and the generated index URL.
 
 `SiteHeader`, `SiteFooter`, and `DocumentationShell` own responsive structure while consumers retain navigation data, accessible labels, copy, branding, actions, and page content. `TabbedPanels` keeps every panel readable without JavaScript and adds WAI-ARIA tab behavior, including Arrow Left, Arrow Right, Home, and End, after enhancement. `StatusBadge` exposes semantic tones and border treatments without defining domain status mappings.
 
@@ -163,7 +164,7 @@ The compiled `markdown` entry renders sanitized documents and fragments with sta
 
 ### Code and text wrapping
 
-`CodeBlock` receives literal `source`, optional `language`, and `variant="panel"` (default) or `variant="plain"` for use inside another surface. It owns compact typography, syntax highlighting, keyboard scrolling, and light/dark presentation. Pass raw code rather than constructing a Markdown fence; embedded fences and HTML remain literal source. `renderCodeBlock` from the public `markdown` subpath exposes the same rendering for non-component consumers.
+`CodeBlock` receives literal `source`, optional `language`, `copyable`, and `variant="panel"` (default) or `variant="plain"` for use inside another surface. It owns compact typography, syntax highlighting, keyboard scrolling, and light/dark presentation. Pass raw code rather than constructing a Markdown fence; embedded fences and HTML remain literal source. `renderCodeBlock` from the public `markdown` subpath exposes the same rendering for non-component consumers.
 
 ```astro
 ---
@@ -179,10 +180,19 @@ import CodeBlock from '@moldea.ai/website-ui/code-block';
   language="sh"
   variant="plain"
 />
+<CodeBlock
+  source="Illustrative excerpt"
+  language="text"
+  copyable={false}
+/>
 ```
 
 Code preserves its source line breaks and scrolls horizontally when needed. This includes JSON, YAML, shell commands, diffs, and Markdown source. Unlabelled fences also preserve lines, since they may contain code or aligned file trees. Only fences explicitly labelled `text`, `txt`, or `plaintext` wrap long lines while retaining their original line breaks. Use these labels for prose, not as a shortcut to force code to fit.
 
+With `CodeCopyControls` mounted, `CodeBlock` is copyable by default. Set `copyable={false}` for an illustrative or incomplete block that does not need a copy action. For rendered Markdown and hand-authored code, place `data-code-copy="false"` on the `pre` element or an owning container. An opted-out ancestor disables every code block inside it, while neighboring blocks remain eligible. Opted-out blocks have no toolbar or extra focus stop and remain selectable.
+
+The control copies the complete displayed code text, including indentation and blank lines, only after a visitor activates its button. Success is announced after the browser accepts the write. When clipboard access is unavailable or denied, the code stays selectable and the control explains how to copy it manually. The button keeps the stable accessible name “Copy code.”
+
 Markdown and literal code renderers apply this policy through `styles.css`. Rendered code blocks are named, keyboard-focusable regions with visible focus indicators. Hand-authored `<pre>` elements use the shared `code-block` class, `tabindex="0"`, `role="region"`, and a descriptive `aria-label`; add `data-code-language="text"` only for plain text. Do not add page-wide wrapping overrides to code, diagnostics, or replay content.
 
 ### Optional detail dialogs

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moldea.ai/website-ui",
-  "version": "1.6.1",
+  "version": "1.7.0",
   "description": "Shared Astro foundations for moldea public websites.",
   "homepage": "https://github.com/moldea-ai/packages/tree/main/projects/website-ui#readme",
   "bugs": {
@@ -65,6 +65,9 @@
     "./code-block": {
       "import": "./src/components/code-block/code-block.component.astro"
     },
+    "./code-copy-controls": {
+      "import": "./src/components/code-copy-controls/code-copy-controls.component.astro"
+    },
     "./connection-label": {
       "import": "./src/components/connection-label/connection-label.component.astro"
     },

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

@@ -3,6 +3,8 @@ import { ChevronRight } from '@lucide/astro';
 
 import { withBase } from '../../site/index.ts';
 
+import InlineBrandText from '../inline-brand-text/inline-brand-text.component.astro';
+
 export interface IBreadcrumb {
   href?: string;
   label: string;
@@ -35,14 +37,20 @@ const { basePath = import.meta.env.BASE_URL, items } = Astro.props;
               class="plain-link"
               href={withBase(item.href, basePath)}
             >
-              {item.label}
+              <InlineBrandText
+                text={item.label}
+                variant="compact"
+              />
             </a>
           ) : (
             <span
               class="min-w-0 font-medium text-foreground"
               aria-current="page"
             >
-              {item.label}
+              <InlineBrandText
+                text={item.label}
+                variant="compact"
+              />
             </span>
           )}
         </li>

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

@@ -3,15 +3,18 @@ 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 {
+  copyable?: boolean;
   source: string;
   language?: string;
   variant?: 'panel' | 'plain';
 }
-const { source, language, variant = 'panel' } = Astro.props;
+const { copyable = true, source, language, variant = 'panel' } = Astro.props;
 const html = await renderCodeBlock(source, language);
 ---
 
 <div
+  data-code-block
+  data-code-copy={copyable ? undefined : 'false'}
   class:list={[
     'prose-moldea min-w-0 text-sm [&_pre]:m-0 [&_pre]:text-xs [&_pre]:leading-6',
     variant === 'panel'

package/src/components/code-copy-controls/code-copy-controls.component.astro

@@ -0,0 +1,111 @@
+---
+import { Copy } from '@lucide/astro';
+
+import ActionButton from '../action-button/action-button.component.astro';
+---
+
+<template data-code-copy-controls-template>
+  <div
+    class="code-copy-toolbar flex min-h-8 min-w-0 flex-wrap items-center justify-end gap-x-2 gap-y-1"
+    data-code-copy-toolbar
+  >
+    <span
+      class="min-w-0 text-xs text-muted-foreground empty:hidden"
+      aria-live="polite"
+      aria-atomic="true"
+      data-code-copy-feedback
+    ></span>
+    <ActionButton
+      class="ms-auto"
+      size="sm"
+      variant="ghost"
+      aria-label="Copy code"
+      data-code-copy-button
+    >
+      <Copy
+        class="size-3.5"
+        aria-hidden="true"
+      />
+      <span aria-hidden="true">Copy</span>
+    </ActionButton>
+  </div>
+</template>
+
+<script>
+  const OPT_OUT_SELECTOR = '[data-code-copy="false"]';
+
+  /** Reports clipboard results beside the control without changing its accessible name. */
+  const setCopyFeedback = (feedback: HTMLElement, message: string): void => {
+    feedback.textContent = message;
+  };
+
+  /** Copies one block after an explicit button activation and reports the resolved outcome. */
+  const initializeCopyButton = (
+    button: HTMLButtonElement,
+    feedback: HTMLElement,
+    code: HTMLElement,
+  ): void => {
+    let latestRequest: symbol | undefined;
+
+    button.addEventListener('click', async () => {
+      const request = Symbol();
+      latestRequest = request;
+      setCopyFeedback(feedback, '');
+
+      const writeText = navigator.clipboard?.writeText;
+
+      if (writeText === undefined) {
+        setCopyFeedback(feedback, 'Copy is unavailable. Select the code, then copy it manually.');
+        return;
+      }
+
+      try {
+        await writeText.call(navigator.clipboard, code.textContent ?? '');
+
+        if (latestRequest === request && button.isConnected) {
+          setCopyFeedback(feedback, 'Copied.');
+        }
+      } catch {
+        if (latestRequest === request && button.isConnected) {
+          setCopyFeedback(feedback, 'Copy failed. Select the code, then copy it manually.');
+        }
+      }
+    });
+  };
+
+  /** Adds one copy toolbar to every eligible code block in the current document. */
+  const initializeCodeCopyControls = (): void => {
+    const template = document.querySelector<HTMLTemplateElement>(
+      '[data-code-copy-controls-template]',
+    );
+
+    if (template === null) return;
+
+    for (const pre of document.querySelectorAll<HTMLPreElement>('pre')) {
+      const code = pre.firstElementChild;
+
+      if (
+        !(code instanceof HTMLElement) ||
+        code.tagName !== 'CODE' ||
+        pre.dataset.codeCopyEnhanced === 'true' ||
+        pre.closest(OPT_OUT_SELECTOR) !== null
+      ) {
+        continue;
+      }
+
+      const fragment = template.content.cloneNode(true) as DocumentFragment;
+      const toolbar = fragment.querySelector<HTMLElement>('[data-code-copy-toolbar]');
+      const button = fragment.querySelector<HTMLButtonElement>('[data-code-copy-button]');
+      const feedback = fragment.querySelector<HTMLElement>('[data-code-copy-feedback]');
+
+      if (toolbar === null || button === null || feedback === null) continue;
+
+      initializeCopyButton(button, feedback, code);
+      pre.dataset.codeCopyEnhanced = 'true';
+      pre.before(toolbar);
+    }
+  };
+
+  document.addEventListener('astro:page-load', initializeCodeCopyControls);
+  initializeCodeCopyControls();
+</script>

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

@@ -1,5 +1,6 @@
 ---
 import type { IDocumentationOutlineHeading } from './documentation-shell.component.astro';
+import InlineBrandText from '../inline-brand-text/inline-brand-text.component.astro';
 
 interface Props {
   headings: readonly IDocumentationOutlineHeading[];
@@ -14,7 +15,10 @@ const { headings } = Astro.props;
       class:list={['plain-link text-sm leading-5', heading.depth === 3 && 'ps-3']}
       href={`#${heading.id}`}
     >
-      {heading.text}
+      <InlineBrandText
+        text={heading.text}
+        variant="compact"
+      />
     </a>
   ))
 }

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

@@ -3,6 +3,7 @@ import { ArrowLeft, ArrowRight, ChevronDown, Menu } from '@lucide/astro';
 
 import { withBase } from '../../site/index.ts';
 import Breadcrumbs, { type IBreadcrumb } from '../breadcrumbs/breadcrumbs.component.astro';
+import InlineBrandText from '../inline-brand-text/inline-brand-text.component.astro';
 
 import DocumentationOutline from './documentation-outline.component.astro';
 
@@ -77,7 +78,10 @@ const contentGridClass = hasNavigation
             class="size-4"
             aria-hidden="true"
           />
-          {mobileNavigationLabel}
+          <InlineBrandText
+            text={mobileNavigationLabel}
+            variant="compact"
+          />
         </summary>
         <nav
           class="grid gap-5 border-t border-border p-4"
@@ -85,7 +89,14 @@ const contentGridClass = hasNavigation
         >
           {navigationGroups.map((group) => (
             <div>
-              {group.label && <p class="eyebrow mb-2 px-2">{group.label}</p>}
+              {group.label && (
+                <p class="eyebrow mb-2 px-2">
+                  <InlineBrandText
+                    text={group.label}
+                    variant="compact"
+                  />
+                </p>
+              )}
               <div class="grid gap-1">
                 {group.items.map((item) => (
                   <a
@@ -93,7 +104,10 @@ const contentGridClass = hasNavigation
                     href={withBase(item.href, basePath)}
                     aria-current={item.href === currentRoute ? 'page' : undefined}
                   >
-                    {item.label}
+                    <InlineBrandText
+                      text={item.label}
+                      variant="compact"
+                    />
                   </a>
                 ))}
               </div>
@@ -108,7 +122,10 @@ const contentGridClass = hasNavigation
     hasOutline && (
       <details class="surface-card group sticky top-16 z-40 mt-3 xl:hidden">
         <summary class="flex min-h-12 cursor-pointer list-none items-center justify-between gap-3 px-4 font-semibold outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset [&::-webkit-details-marker]:hidden">
-          {outlineLabel}
+          <InlineBrandText
+            text={outlineLabel}
+            variant="compact"
+          />
           <ChevronDown
             class="size-4"
             aria-hidden="true"
@@ -135,7 +152,14 @@ const contentGridClass = hasNavigation
             >
               {navigationGroups.map((group) => (
                 <div>
-                  {group.label && <p class="eyebrow mb-2 px-2">{group.label}</p>}
+                  {group.label && (
+                    <p class="eyebrow mb-2 px-2">
+                      <InlineBrandText
+                        text={group.label}
+                        variant="compact"
+                      />
+                    </p>
+                  )}
                   <div class="grid gap-1">
                     {group.items.map((item) => (
                       <a
@@ -143,7 +167,10 @@ const contentGridClass = hasNavigation
                         href={withBase(item.href, basePath)}
                         aria-current={item.href === currentRoute ? 'page' : undefined}
                       >
-                        {item.label}
+                        <InlineBrandText
+                          text={item.label}
+                          variant="compact"
+                        />
                       </a>
                     ))}
                   </div>
@@ -178,7 +205,12 @@ const contentGridClass = hasNavigation
                   <span class="block text-xs font-bold tracking-wide text-muted-foreground uppercase">
                     Previous
                   </span>
-                  <span class="mt-1 block font-semibold">{previousPage.label}</span>
+                  <span class="mt-1 block font-semibold">
+                    <InlineBrandText
+                      text={previousPage.label}
+                      variant="compact"
+                    />
+                  </span>
                 </span>
               </a>
             ) : (
@@ -193,7 +225,12 @@ const contentGridClass = hasNavigation
                   <span class="block text-xs font-bold tracking-wide text-muted-foreground uppercase">
                     Next
                   </span>
-                  <span class="mt-1 block font-semibold">{nextPage.label}</span>
+                  <span class="mt-1 block font-semibold">
+                    <InlineBrandText
+                      text={nextPage.label}
+                      variant="compact"
+                    />
+                  </span>
                 </span>
                 <ArrowRight
                   class="size-4 shrink-0"
@@ -210,7 +247,12 @@ const contentGridClass = hasNavigation
       (hasOutline || hasNavigation) && (
         <aside class="hidden xl:block">
           <div class="sticky top-24 max-h-[calc(100vh-7rem)] overflow-y-auto pe-2">
-            <p class="eyebrow mb-4">{outlineLabel}</p>
+            <p class="eyebrow mb-4">
+              <InlineBrandText
+                text={outlineLabel}
+                variant="compact"
+              />
+            </p>
             {hasOutline ? (
               <nav
                 class="grid gap-2 border-s ps-4"
@@ -219,7 +261,9 @@ const contentGridClass = hasNavigation
                 <DocumentationOutline headings={headings} />
               </nav>
             ) : (
-              <p class="text-sm text-muted-foreground">{outlineEmptyLabel}</p>
+              <p class="text-sm text-muted-foreground">
+                <InlineBrandText text={outlineEmptyLabel} />
+              </p>
             )}
           </div>
         </aside>

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

@@ -2,6 +2,7 @@
 import { Search } from '@lucide/astro';
 
 import ActionButton from '../action-button/action-button.component.astro';
+import InlineBrandText from '../inline-brand-text/inline-brand-text.component.astro';
 
 export interface Props {
   action: string;
@@ -74,7 +75,10 @@ const {
         size="lg"
         type="submit"
       >
-        {buttonLabel}
+        <InlineBrandText
+          text={buttonLabel}
+          variant="compact"
+        />
       </ActionButton>
     </div>
   </form>
@@ -84,7 +88,7 @@ const {
     aria-live="polite"
     data-search-status
   >
-    {initialPrompt}
+    <InlineBrandText text={initialPrompt} />
   </p>
   <ol
     class="mt-8 grid gap-4"
@@ -100,6 +104,24 @@ const {
     type ISearchDocument,
   } from '../../search/index.ts';
 
+  /** Replaces text with escaped text and semantic code nodes for every product-name match. */
+  const renderInlineBrandText = (element: HTMLElement, text: string): void => {
+    const content = document.createDocumentFragment();
+
+    for (const segment of text.split(/(\bmoldea\b)/giu)) {
+      if (/^moldea$/iu.test(segment)) {
+        const code = document.createElement('code');
+        code.className = 'inline-code tracking-normal';
+        code.textContent = 'moldea';
+        content.append(code);
+      } else {
+        content.append(document.createTextNode(segment));
+      }
+    }
+
+    element.replaceChildren(content);
+  };
+
   const createSearchResult = (searchDocument: ISearchDocument): HTMLLIElement => {
     const item = document.createElement('li');
     const link = document.createElement('a');
@@ -110,9 +132,9 @@ const {
     link.className = 'block rounded-md';
     link.href = searchDocument.url;
     title.className = 'text-xl font-semibold tracking-tight';
-    title.textContent = searchDocument.title;
+    renderInlineBrandText(title, searchDocument.title);
     excerpt.className = 'mt-2 leading-6 text-muted-foreground';
-    excerpt.textContent = searchDocument.description;
+    renderInlineBrandText(excerpt, searchDocument.description);
     link.append(title, excerpt);
     item.append(link);
 
@@ -157,11 +179,11 @@ const {
       results.replaceChildren();
 
       if (!query.trim()) {
-        status.textContent = root.dataset.initialPrompt ?? '';
+        renderInlineBrandText(status, root.dataset.initialPrompt ?? '');
         return;
       }
 
-      status.textContent = root.dataset.loadingMessage ?? '';
+      renderInlineBrandText(status, root.dataset.loadingMessage ?? '');
 
       const pendingDocuments = (documentsPromise ??= loadSearchDocuments(searchIndexUrl));
       const documents = await pendingDocuments;
@@ -170,15 +192,18 @@ const {
       if (latestRequest !== request || !root.isConnected) return;
 
       if (documents === null) {
-        status.textContent = root.dataset.failureMessage ?? '';
+        renderInlineBrandText(status, 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 ?? '');
+      renderInlineBrandText(
+        status,
+        matches.length
+          ? `${matches.length} result${matches.length === 1 ? '' : 's'} for “${query}”.`
+          : (root.dataset.noResultsMessage ?? ''),
+      );
     };
 
     form.addEventListener('submit', (event) => {

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

@@ -2,6 +2,7 @@
 import { GitFork, Menu, Search } from '@lucide/astro';
 
 import ActionLink from '../action-link/action-link.component.astro';
+import InlineBrandText from '../inline-brand-text/inline-brand-text.component.astro';
 import ThemeControl from '../theme-control/theme-control.component.astro';
 
 export interface ISiteHeaderNavigationItem {
@@ -77,17 +78,26 @@ const responsiveClasses = breakpointClasses[breakpoint];
                   class="xl:hidden"
                   aria-hidden="true"
                 >
-                  {compactLabel}
+                  <InlineBrandText
+                    text={compactLabel}
+                    variant="compact"
+                  />
                 </span>
                 <span
                   class="hidden xl:inline"
                   aria-hidden="true"
                 >
-                  {label}
+                  <InlineBrandText
+                    text={label}
+                    variant="compact"
+                  />
                 </span>
               </>
             ) : (
-              label
+              <InlineBrandText
+                text={label}
+                variant="compact"
+              />
             )}
           </a>
         ))
@@ -150,7 +160,10 @@ const responsiveClasses = breakpointClasses[breakpoint];
                 href={href}
                 aria-current={isActive ? 'page' : undefined}
               >
-                {label}
+                <InlineBrandText
+                  text={label}
+                  variant="compact"
+                />
               </a>
             ))
           }
@@ -167,7 +180,10 @@ const responsiveClasses = breakpointClasses[breakpoint];
             target="_blank"
             rel="noopener noreferrer"
           >
-            {sourceLabel}
+            <InlineBrandText
+              text={sourceLabel}
+              variant="compact"
+            />
           </a>
           <slot name="mobile-actions" />
         </nav>

package/src/styles.css

@@ -202,6 +202,22 @@
     @apply max-w-full overflow-x-auto rounded-xl border bg-code p-5 text-sm leading-6 text-code-foreground shadow-inset;
   }
 
+  .code-copy-toolbar {
+    @apply mb-2;
+  }
+
+  .prose-moldea .code-copy-toolbar {
+    @apply mt-5;
+  }
+
+  .prose-moldea[data-code-block] .code-copy-toolbar {
+    @apply mt-0;
+  }
+
+  .code-copy-toolbar + pre {
+    margin-top: 0;
+  }
+
   /* Preserve code, structured output, and file-tree alignment by default. */
   .code-block,
   .prose-moldea pre {