@hagicode/hagilight-starlight 0.1.0-dev.148.1.e0c630e

package/AIDisclosureNotice.astro

@@ -0,0 +1,12 @@
+---
+import { getAIDisclosureCopy } from './dist/ai-disclosures.js';
+const { kind, lang, sourceHref } = Astro.props;
+const copy = getAIDisclosureCopy(lang);
+---
+
+<aside class="hagilight-ai-disclosure" role="note">
+  {kind === 'author' ? copy.author : copy.translation}
+  {kind === 'translation' && sourceHref && (
+    <> <a href={sourceHref}>{copy.source}</a></>
+  )}
+</aside>

package/ArticlePromotion.astro

@@ -0,0 +1,630 @@
+---
+import { Picture } from 'astro:assets';
+import { gaEventAttributes } from '@hagicode/hagilight-core/analytics-events';
+import { resolveSiteLinks } from '@hagicode/hagilight-core/links';
+import { getArticlePromotionCopy } from './dist/article-promotion.js';
+import { randomPoolAttribute, randomPoolFromManifest } from '@hagicode/hagilight-core/random-image';
+import {
+  resolveMicrosoftStoreBadgeLanguage,
+  resolveMicrosoftStoreProductId,
+} from './dist/windows-download.js';
+import heroAvatar from './assets/showcase/hero-avatar.webp';
+import heroes from './assets/showcase/heroes.webp';
+import pillarEfficient from './assets/showcase/pillar-efficient.svg';
+import pillarFun from './assets/showcase/pillar-fun.svg';
+import pillarSmart from './assets/showcase/pillar-smart.svg';
+import proposalWorkflow from './assets/showcase/proposal-workflow.webp';
+import workbench from './assets/showcase/workbench.webp';
+import showcaseManifest from './assets/showcase/manifest.json';
+import ArticlePromotionPicker from './ArticlePromotionPicker.astro';
+
+interface Props {
+  lang?: string;
+  /** Swap the illustration for one random pool entry per page view. Defaults to `true`. */
+  randomAvatar?: boolean;
+}
+
+const { lang, randomAvatar = true } = Astro.props;
+if (typeof randomAvatar !== 'boolean') throw new TypeError('Hagilight hagicodePromotion randomAvatar option must be a boolean.');
+const copy = getArticlePromotionCopy(lang);
+const siteLinks = resolveSiteLinks(lang);
+const linkHref = (id: string, fallback: string) =>
+  [...siteLinks.header, ...siteLinks.quick].find((link) => link.id === id)?.href ?? fallback;
+const homeHref = linkHref('home', 'https://www.hagicode.com/');
+const docsHref = linkHref('productDocs', 'https://docs.hagicode.com/');
+const storeHref = linkHref('microsoftStore', 'https://apps.microsoft.com/detail/9N3PM0N3SVDW');
+const downloadsHref = linkHref('downloadClient', 'https://www.hagicode.com/');
+const storeProductId = resolveMicrosoftStoreProductId(storeHref);
+const badgeLanguage = resolveMicrosoftStoreBadgeLanguage(lang);
+const showcaseTag = (category: 'download' | 'store' | 'navigation', label: string, url?: string) =>
+  gaEventAttributes({ category, label, location: 'article_promotion', url });
+
+// Keyed by the ids in assets/showcase/manifest.json and in the copy catalog's gallery.
+const galleryImages: Record<string, ImageMetadata> = {
+  workbench,
+  'proposal-workflow': proposalWorkflow,
+  heroes,
+  'hero-avatar': heroAvatar,
+};
+// The illustration slot is the only gallery image that may change; its pool lives in the showcase manifest.
+const AVATAR_ID = 'hero-avatar';
+const avatarEntry = showcaseManifest.assets.find(({ id }) => id === AVATAR_ID);
+const avatarPool = randomAvatar && avatarEntry && 'pool' in avatarEntry ? randomPoolFromManifest(avatarEntry.pool) : undefined;
+const pillarIcons: Record<string, ImageMetadata> = {
+  smart: pillarSmart,
+  efficient: pillarEfficient,
+  fun: pillarFun,
+};
+const gallery = copy.gallery.flatMap((item) => {
+  const image = galleryImages[item.id];
+  return image ? [{ ...item, image }] : [];
+});
+---
+
+<section class="hagilight-article-promotion" aria-labelledby="hagilight-article-promotion-title">
+  <div class="hagilight-article-promotion__pitch">
+    <div class="hagilight-article-promotion__intro">
+      <h2 id="hagilight-article-promotion-title">{copy.title}</h2>
+      <p class="hagilight-article-promotion__lead">{copy.lead}</p>
+      <p class="hagilight-article-promotion__tagline">{copy.subheadline}</p>
+      <div class="hagilight-article-promotion__actions">
+        <a
+          class="hagilight-article-promotion__cta hagilight-article-promotion__cta--primary"
+          href={homeHref}
+          {...showcaseTag('navigation', 'home')}
+        >
+          <span>{copy.visitLabel}</span>
+          <svg class="hagilight-article-promotion__arrow" aria-hidden="true" focusable="false" viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 10h11M11 5l5 5-5 5" /></svg>
+        </a>
+        <a
+          class="hagilight-article-promotion__cta hagilight-article-promotion__cta--secondary"
+          href={docsHref}
+          {...showcaseTag('navigation', 'productDocs')}
+        >
+          {copy.docsLabel}
+        </a>
+      </div>
+    </div>
+
+    <ul class="hagilight-article-promotion__features" aria-label={copy.title}>
+      {copy.features.map((feature) => (
+        <li>
+          <span
+            class="hagilight-article-promotion__icon"
+            aria-hidden="true"
+            style={`--hagilight-pillar-icon: url(${pillarIcons[feature.id]?.src})`}
+          ></span>
+          <strong>{feature.label}</strong>
+          <span class="hagilight-article-promotion__feature-text">{feature.description}</span>
+        </li>
+      ))}
+    </ul>
+  </div>
+
+  <div class="hagilight-article-promotion__gallery-block">
+    <h3 id="hagilight-article-promotion-gallery-title">{copy.galleryHeading}</h3>
+    <ul class="hagilight-article-promotion__gallery" aria-labelledby="hagilight-article-promotion-gallery-title">
+      {gallery.map((item) => (
+        <li>
+          <figure data-random-pool={item.id === AVATAR_ID && avatarPool ? randomPoolAttribute(avatarPool) : undefined}>
+            <Picture
+              src={item.image}
+              alt={item.alt}
+              width={item.image.width}
+              height={item.image.height}
+              formats={['avif', 'webp']}
+              fallbackFormat="jpeg"
+              widths={[480, 800, item.image.width]}
+              sizes="(min-width: 50rem) 560px, 100vw"
+              loading="lazy"
+              decoding="async"
+              fetchpriority="low"
+            />
+            <figcaption>{item.caption}</figcaption>
+          </figure>
+        </li>
+      ))}
+    </ul>
+  </div>
+
+  {avatarPool && <ArticlePromotionPicker />}
+
+  <div class="hagilight-article-promotion__closing">
+    <div class="hagilight-article-promotion__windows">
+      <h3 id="hagilight-article-promotion-windows-title" class="hagilight-article-promotion__windows-label">{copy.windowsLabel}</h3>
+      <div class="hagilight-article-promotion__windows-actions">
+        <ms-store-badge
+          productid={storeProductId}
+          productname="HagiCode"
+          window-mode="direct"
+          theme="auto"
+          size="large"
+          animation="on"
+          language={badgeLanguage}
+          aria-label={copy.windowsStoreAriaLabel}
+          title={copy.windowsStoreAriaLabel}
+          {...showcaseTag('store', 'microsoftStore', storeHref)}
+        >
+          <a
+            class="hagilight-article-promotion__store-fallback"
+            href={storeHref}
+            aria-label={copy.windowsStoreAriaLabel}
+            title={copy.windowsStoreAriaLabel}
+          >{copy.windowsStoreLabel}</a>
+        </ms-store-badge>
+        <a
+          class="hagilight-article-promotion__downloads"
+          href={downloadsHref}
+          {...showcaseTag('download', 'downloadClient')}
+        ><span>{copy.allDownloadsLabel}</span><svg class="hagilight-article-promotion__arrow" aria-hidden="true" focusable="false" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 10h11M11 5l5 5-5 5" /></svg></a>
+      </div>
+    </div>
+
+    <div class="hagilight-article-promotion__share">
+      <h3 id="hagilight-article-promotion-share-title">{copy.shareLabel}</h3>
+      <p class="hagilight-article-promotion__share-text">{copy.shareText}</p>
+    </div>
+  </div>
+</section>
+<script type="module" src="https://get.microsoft.com/badge/ms-store-badge.bundled.js" is:inline></script>
+
+<style>
+  /*
+   * One stage, four beats, top to bottom: pitch (what it is, the way in, the three pillars),
+   * gallery (proof), closing band (get it, share it). The stage is tinted from the active theme's
+   * accent so it reads as a deliberate HagiCode moment against the article's neutral page, and the
+   * closing band bleeds to the stage edges so "get it" is the last, heaviest surface. Pillars are
+   * separated by accent rules rather than boxes. The topology follows the section's own width, so
+   * the wide-content toggle and the sidebar layouts reflow it, not just the viewport. Mobile-first:
+   * the base rules are the single-column layout, which is also what a browser without container
+   * queries renders. Every color derives from Starlight's tokens, so all themes and both modes work.
+   */
+  .hagilight-article-promotion {
+    --hagilight-promo-pad: 1.5rem;
+    --hagilight-promo-edge: color-mix(in srgb, var(--sl-color-text-accent) 38%, var(--sl-color-gray-5));
+    --hagilight-promo-tint: color-mix(in srgb, var(--sl-color-accent-low) 55%, var(--sl-color-bg-nav));
+    position: relative;
+    container-type: inline-size;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: 2.25rem;
+    margin: 3rem auto 2rem;
+    padding: calc(var(--hagilight-promo-pad) + 0.25rem) var(--hagilight-promo-pad) var(--hagilight-promo-pad);
+    overflow: clip;
+    border: 1px solid var(--hagilight-promo-edge);
+    border-radius: var(--sl-radius-lg, 0.75rem);
+    background:
+      radial-gradient(70% 45% at 0% 0%, color-mix(in srgb, var(--sl-color-text-accent) 16%, transparent), transparent 70%),
+      linear-gradient(180deg, var(--hagilight-promo-tint), var(--sl-color-bg-nav) 55%);
+    color: var(--sl-color-text);
+  }
+
+  /* The accent rule across the top edge: the stage's signature, drawn in on scroll where supported. */
+  .hagilight-article-promotion::before {
+    content: '';
+    position: absolute;
+    inset: 0 0 auto;
+    height: 4px;
+    background: linear-gradient(90deg, var(--sl-color-text-accent), color-mix(in srgb, var(--sl-color-text-accent) 20%, transparent));
+    transform-origin: left center;
+    pointer-events: none;
+  }
+
+  .hagilight-article-promotion ::selection {
+    background: color-mix(in srgb, var(--sl-color-text-accent) 38%, transparent);
+    color: var(--sl-color-white);
+  }
+
+  .hagilight-article-promotion h2,
+  .hagilight-article-promotion h3 {
+    margin: 0;
+    color: var(--sl-color-white);
+    line-height: 1.2;
+    text-wrap: balance;
+  }
+
+  .hagilight-article-promotion h2 {
+    font-size: clamp(2rem, 1.3rem + 3.2cqi, 3rem);
+    font-weight: 800;
+    letter-spacing: -0.02em;
+  }
+
+  .hagilight-article-promotion h3 {
+    font-size: var(--sl-text-xl, 1.25rem);
+    font-weight: 700;
+  }
+
+  .hagilight-article-promotion p {
+    margin: 0;
+    line-height: 1.6;
+    text-wrap: pretty;
+  }
+
+  .hagilight-article-promotion ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .hagilight-article-promotion a:focus-visible {
+    outline: 2px solid var(--sl-color-text-accent);
+    outline-offset: 3px;
+  }
+
+  /* Pitch: headline, one emphasized promise, the way in, then the pillars. */
+  .hagilight-article-promotion__pitch {
+    display: grid;
+    gap: 2rem;
+  }
+
+  .hagilight-article-promotion__intro {
+    display: grid;
+    align-content: start;
+    justify-items: start;
+    gap: 0.875rem;
+  }
+
+  .hagilight-article-promotion__lead,
+  .hagilight-article-promotion__tagline {
+    max-inline-size: 68ch;
+  }
+
+  .hagilight-article-promotion__lead {
+    color: var(--sl-color-gray-2);
+  }
+
+  .hagilight-article-promotion__tagline {
+    color: var(--sl-color-white);
+    font-size: var(--sl-text-lg, 1.125rem);
+    font-weight: 650;
+    line-height: 1.45;
+  }
+
+  .hagilight-article-promotion__actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.75rem;
+    margin-block-start: 0.5rem;
+  }
+
+  .hagilight-article-promotion__cta {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    min-height: 2.75rem;
+    padding: 0.5rem 1.25rem;
+    border: 1px solid var(--sl-color-text-accent);
+    border-radius: var(--sl-radius-sm, 0.375rem);
+    font-weight: 700;
+    text-decoration: none;
+    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.2s;
+  }
+
+  /* The one loud control: bigger than its sibling, lifted, with an arrow that leans forward on hover. */
+  .hagilight-article-promotion__cta--primary {
+    min-height: 3.25rem;
+    padding-inline: 1.625rem;
+    background: var(--sl-color-text-accent);
+    color: var(--sl-color-bg);
+    font-size: var(--sl-text-lg, 1.125rem);
+    box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--sl-color-text-accent) 70%, transparent);
+  }
+
+  .hagilight-article-promotion__cta--secondary {
+    background: transparent;
+    color: var(--sl-color-white);
+    border-color: var(--sl-color-gray-3);
+  }
+
+  .hagilight-article-promotion__arrow {
+    flex: none;
+    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
+  }
+
+  .hagilight-article-promotion__cta--primary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 12px 24px -8px color-mix(in srgb, var(--sl-color-text-accent) 80%, transparent);
+  }
+
+  .hagilight-article-promotion__cta--primary:active {
+    transform: translateY(0);
+  }
+
+  .hagilight-article-promotion__cta--secondary:hover {
+    border-color: var(--sl-color-text-accent);
+    color: var(--sl-color-text-accent);
+  }
+
+  .hagilight-article-promotion__cta:hover .hagilight-article-promotion__arrow,
+  .hagilight-article-promotion__downloads:hover .hagilight-article-promotion__arrow {
+    transform: translateX(3px);
+  }
+
+  /* Pillars: each opens with an accent rule; the pillar word is the loudest text after the title. */
+  .hagilight-article-promotion__features {
+    display: grid;
+    gap: 1.25rem 1.5rem;
+  }
+
+  .hagilight-article-promotion__features li {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    align-content: start;
+    align-items: center;
+    gap: 0.625rem 0.75rem;
+    min-width: 0;
+    padding-block-start: 1rem;
+    border-block-start: 2px solid color-mix(in srgb, var(--sl-color-text-accent) 55%, transparent);
+  }
+
+  .hagilight-article-promotion__features strong {
+    color: var(--sl-color-text-accent);
+    font-size: var(--sl-text-xl, 1.25rem);
+    font-weight: 750;
+    line-height: 1.2;
+  }
+
+  .hagilight-article-promotion__feature-text {
+    grid-column: 1 / -1;
+    font-size: var(--sl-text-sm, 0.875rem);
+    line-height: 1.55;
+  }
+
+  .hagilight-article-promotion__icon {
+    position: relative;
+    display: grid;
+    place-items: center;
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: var(--sl-radius-md, 0.5rem);
+    background: color-mix(in srgb, var(--sl-color-text-accent) 18%, transparent);
+  }
+
+  .hagilight-article-promotion__icon::after {
+    content: '';
+    width: 1.5rem;
+    height: 1.5rem;
+    background: var(--sl-color-text-accent);
+    mask: var(--hagilight-pillar-icon) center / contain no-repeat;
+    -webkit-mask: var(--hagilight-pillar-icon) center / contain no-repeat;
+  }
+
+  /* Gallery: three audited screenshots, kept in the catalog's narrative order. */
+  .hagilight-article-promotion__gallery-block {
+    display: grid;
+    gap: 1.125rem;
+  }
+
+  .hagilight-article-promotion__gallery {
+    display: grid;
+    gap: 1.5rem 1.25rem;
+  }
+
+  .hagilight-article-promotion__gallery li {
+    min-width: 0;
+  }
+
+  .hagilight-article-promotion figure {
+    display: grid;
+    gap: 0.625rem;
+    margin: 0;
+  }
+
+  .hagilight-article-promotion picture {
+    display: block;
+  }
+
+  .hagilight-article-promotion img {
+    display: block;
+    width: 100%;
+    height: auto;
+    border: 1px solid var(--hagilight-promo-edge);
+    border-radius: var(--sl-radius-md, 0.5rem);
+    box-shadow: 0 18px 32px -18px color-mix(in srgb, var(--sl-color-black) 80%, transparent);
+    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.35s;
+  }
+
+  .hagilight-article-promotion figure:hover img {
+    transform: translateY(-3px);
+    border-color: var(--sl-color-text-accent);
+  }
+
+  .hagilight-article-promotion figcaption {
+    color: var(--sl-color-gray-1);
+    font-size: var(--sl-text-sm, 0.875rem);
+    line-height: 1.5;
+  }
+
+  /* The illustration is a small square with its caption beside it, so it reads as an avatar, not a screenshot. */
+  .hagilight-article-promotion__gallery li:nth-child(4) picture {
+    max-width: 12rem;
+  }
+
+  /* Closing: a full-bleed band, the heaviest surface, so "get it" is where the eye lands last. */
+  .hagilight-article-promotion__closing {
+    display: grid;
+    gap: 1.75rem;
+    margin: 0 calc(var(--hagilight-promo-pad) * -1) calc(var(--hagilight-promo-pad) * -1);
+    padding: var(--hagilight-promo-pad);
+    border-block-start: 1px solid var(--hagilight-promo-edge);
+    background: color-mix(in srgb, var(--sl-color-accent-low) 80%, var(--sl-color-bg));
+  }
+
+  .hagilight-article-promotion__windows,
+  .hagilight-article-promotion__share {
+    display: grid;
+    align-content: start;
+    justify-items: start;
+    gap: 0.625rem;
+    min-width: 0;
+  }
+
+  /* Reserve the large badge's height (104px) so it replaces the fallback link without a layout jump. */
+  .hagilight-article-promotion__windows-actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0 1.5rem;
+    max-width: 100%;
+  }
+
+  .hagilight-article-promotion__windows ms-store-badge {
+    display: inline-flex;
+    align-items: center;
+    max-width: 100%;
+    min-height: 6.5rem;
+  }
+
+  /* Keep the badge's fixed height and shrink it to the slot on narrow screens without distortion. */
+  .hagilight-article-promotion__windows ms-store-badge::part(img) {
+    max-width: 100%;
+    object-fit: contain;
+    object-position: left center;
+  }
+
+  .hagilight-article-promotion__store-fallback,
+  .hagilight-article-promotion__downloads {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    min-height: 2.75rem;
+    color: var(--sl-color-text-accent);
+    font-weight: 650;
+    text-decoration-thickness: 1px;
+    text-underline-offset: 0.25em;
+  }
+
+  .hagilight-article-promotion__share-text {
+    justify-self: stretch;
+    padding: 0.75rem 1rem;
+    border: 1px dashed var(--sl-color-text-accent);
+    border-radius: var(--sl-radius-md, 0.5rem);
+    background: var(--sl-color-bg);
+    overflow-wrap: anywhere;
+    user-select: all;
+  }
+
+  /* Medium: pillars become a three-up row, the gallery a mosaic, the closing two columns. */
+  @container (min-width: 36rem) {
+    .hagilight-article-promotion__features {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+
+    /*
+     * Mosaic in reading order: the workbench and the proposal strip stack in the left column
+     * beside the tall Hero Scenario panel. The 1.1fr split lands the image bottoms of both columns within
+     * a caption's height of each other for the current screenshots; the placement assumes exactly
+     * three gallery images.
+     */
+    .hagilight-article-promotion__gallery {
+      grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
+      align-items: start;
+    }
+
+    .hagilight-article-promotion__gallery li:nth-child(1) {
+      grid-column: 1;
+      grid-row: 1;
+    }
+
+    .hagilight-article-promotion__gallery li:nth-child(2) {
+      grid-column: 1;
+      grid-row: 2;
+    }
+
+    .hagilight-article-promotion__gallery li:nth-child(3) {
+      grid-column: 2;
+      grid-row: 1 / span 2;
+    }
+
+    .hagilight-article-promotion__closing {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 2rem;
+    }
+
+    .hagilight-article-promotion__gallery li:nth-child(4) {
+      grid-column: 1 / -1;
+    }
+
+    .hagilight-article-promotion__gallery li:nth-child(4) figure {
+      grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
+      align-items: end;
+    }
+  }
+
+  /* Wide: the pitch takes the left column and the pillars stack beside it. */
+  @container (min-width: 56rem) {
+    .hagilight-article-promotion__pitch {
+      grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
+      gap: 3rem;
+      align-items: start;
+    }
+
+    .hagilight-article-promotion__features {
+      grid-template-columns: minmax(0, 1fr);
+    }
+  }
+
+  @media (max-width: 30rem) {
+    .hagilight-article-promotion__actions {
+      flex-direction: column;
+      flex-wrap: nowrap;
+      align-items: stretch;
+      justify-self: stretch;
+    }
+  }
+
+  /*
+   * The one authored moment: as the stage scrolls into view its accent rule draws across and the
+   * screenshots rise into place one after another. Scroll-driven, so there is no JS and nothing
+   * replays; engines without view timelines, and readers who ask for less motion, get the final
+   * state. The animations start at 0.35 opacity, so a tall item that never reaches its full entry
+   * range is still readable.
+   */
+  @media (prefers-reduced-motion: no-preference) {
+    @supports (animation-timeline: view()) {
+      .hagilight-article-promotion::before {
+        animation-name: hagilight-promotion-rule;
+        animation-timing-function: linear;
+        animation-fill-mode: both;
+        animation-timeline: view();
+        animation-range: entry 0% entry 80%;
+      }
+
+      .hagilight-article-promotion__gallery li {
+        animation-name: hagilight-promotion-rise;
+        animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
+        animation-fill-mode: both;
+        animation-timeline: view();
+        animation-range: entry 5% entry 45%;
+      }
+
+      .hagilight-article-promotion__gallery li:nth-child(2) {
+        animation-range: entry 12% entry 52%;
+      }
+
+      .hagilight-article-promotion__gallery li:nth-child(3) {
+        animation-range: entry 19% entry 59%;
+      }
+
+      .hagilight-article-promotion__gallery li:nth-child(4) {
+        animation-range: entry 26% entry 66%;
+      }
+    }
+  }
+
+  @keyframes hagilight-promotion-rule {
+    from {
+      transform: scaleX(0.04);
+    }
+  }
+
+  @keyframes hagilight-promotion-rise {
+    from {
+      opacity: 0.35;
+      translate: 0 1.75rem;
+      scale: 0.97;
+    }
+  }
+</style>

package/ArticlePromotionPicker.astro

@@ -0,0 +1,9 @@
+---
+// Rendered only when the showcase's random option is on, so a site that turns it off ships no picker script.
+---
+
+<script>
+  import { mountRandomImages } from '@hagicode/hagilight-core/random-image';
+
+  void mountRandomImages(document);
+</script>

package/ContentLayoutToggle.astro

@@ -0,0 +1,31 @@
+---
+import { getContentWidthLabels } from './dist/content-width-i18n.js';
+const { lang } = Astro.locals.starlightRoute;
+const labels = getContentWidthLabels(lang);
+---
+
+<div class="hagilight-content-width-toggle" role="group" aria-label={labels.group}>
+  <button type="button" data-hagilight-content-width-choice="wide" aria-pressed="true">
+    {labels.wide}
+  </button>
+  <button type="button" data-hagilight-content-width-choice="narrow" aria-pressed="false">
+    {labels.narrow}
+  </button>
+</div>
+
+<script>
+  import {
+    restoreContentWidth,
+    setContentWidth,
+    synchronizeContentWidthFromStorage,
+  } from './dist/content-width.js';
+
+  const root = document.documentElement;
+  restoreContentWidth(root);
+  document.querySelectorAll('[data-hagilight-content-width-choice]').forEach((button) => {
+    button.addEventListener('click', () => {
+      setContentWidth(button.dataset.hagilightContentWidthChoice, root);
+    });
+  });
+  window.addEventListener('storage', (event) => synchronizeContentWidthFromStorage(event, root));
+</script>