@anglefeint/astro-theme 0.2.0 → 0.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anglefeint/astro-theme",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "type": "module",
   "description": "Anglefeint core theme package for Astro",
   "keywords": [

package/src/cli-new-post.mjs

@@ -135,7 +135,7 @@ function extractThemeConfigObject(configSource) {
 }
 
 function localeKeyFromToken(key) {
-  return /^[a-z]{2,3}(?:-[a-z0-9]+)?$/i.test(key) ? key.toLowerCase() : '';
+  return /^[a-z]{2,3}(?:-[a-z0-9]+)?$/i.test(key) ? key : '';
 }
 
 function localeObjectIsEnabled(localeObjectSource) {

package/src/components/BaseHead.astro

@@ -107,6 +107,7 @@ const articleSchema = isArticle
 
 const extraSchemas = schema ? (Array.isArray(schema) ? schema : [schema]) : [];
 const jsonLdSchemas = [websiteSchema, personSchema, articleSchema, ...extraSchemas].filter(Boolean);
+const serializeJsonLd = (value: unknown) => JSON.stringify(value).replace(/</g, '\\u003c');
 ---
 
 <!-- Global Metadata -->
@@ -178,6 +179,6 @@ const jsonLdSchemas = [websiteSchema, personSchema, articleSchema, ...extraSchem
 
 {
   jsonLdSchemas.map((schemaItem) => (
-    <script is:inline type="application/ld+json" set:html={JSON.stringify(schemaItem)} />
+    <script is:inline type="application/ld+json" set:html={serializeJsonLd(schemaItem)} />
   ))
 }

package/src/components/Giscus.astro

@@ -25,6 +25,10 @@ type Props = {
 const { comments, resolvedLocale } = Astro.props;
 const normalizedCommentTerm = comments.TERM.trim();
 const normalizedCommentNumber = comments.NUMBER.trim();
+const GISCUS_LOCALE_MAP: Record<string, string> = {
+  zh: 'zh-CN',
+};
+const giscusLocale = comments.LANG || GISCUS_LOCALE_MAP[resolvedLocale] || resolvedLocale;
 ---
 
 <script
@@ -42,7 +46,7 @@ const normalizedCommentNumber = comments.NUMBER.trim();
   data-emit-metadata={comments.EMIT_METADATA}
   data-input-position={comments.INPUT_POSITION}
   data-theme={comments.THEME}
-  data-lang={comments.LANG || resolvedLocale}
+  data-lang={giscusLocale}
   data-loading={comments.LOADING}
   crossorigin={comments.CROSSORIGIN}
   async></script>

package/src/components/pagination/CyberPagination.astro

@@ -0,0 +1,235 @@
+---
+import type { PaginationModel } from '../../utils/pagination';
+import {
+  resolvePaginationItemVariant,
+  resolvePaginationVariant,
+} from '../../utils/pagination-style';
+
+interface Props {
+  model: PaginationModel;
+  locale: string;
+  blogRoot: string;
+  pathname: string;
+  labels: {
+    previous: string;
+    next: string;
+    paginationAria: string;
+    jumpTo: string;
+    jumpInputLabel: string;
+    jumpGo: string;
+  };
+  config: {
+    jump: {
+      enabled: boolean;
+      enterToGo: boolean;
+    };
+    style: {
+      enabled: boolean;
+      mode: 'random' | 'sequential' | 'fixed';
+      variants: number;
+      fixedVariant: number;
+    };
+  };
+}
+
+const { model, locale, blogRoot, pathname, labels, config } = Astro.props as Props;
+
+const pageHref = (pageNum: number) => (pageNum === 1 ? blogRoot : `${blogRoot}${pageNum}/`);
+const styleEnabled = config.style.enabled;
+const styleMode = config.style.mode;
+const styleVariants = Math.max(1, Math.min(12, Math.floor(config.style.variants)));
+const styleFixedVariant = Math.max(
+  1,
+  Math.min(styleVariants, Math.floor(config.style.fixedVariant))
+);
+const showJump = config.jump.enabled && model.showJump;
+
+const wrapVariant = resolvePaginationVariant({
+  currentPage: model.currentPage,
+  totalPages: model.totalPages,
+  locale,
+  pathname,
+  config: {
+    ENABLED: styleEnabled,
+    MODE: styleMode,
+    VARIANTS: styleVariants,
+    FIXED_VARIANT: styleFixedVariant,
+  },
+});
+
+const itemVariantClass = (seed: string, index: number) => {
+  if (!styleEnabled) return 'pg-var-1';
+  if (styleMode === 'random') return 'pg-var-random';
+  return resolvePaginationItemVariant({
+    seed,
+    index,
+    config: {
+      ENABLED: styleEnabled,
+      MODE: styleMode,
+      VARIANTS: styleVariants,
+      FIXED_VARIANT: styleFixedVariant,
+    },
+  }).className;
+};
+---
+
+{
+  model.totalPages > 1 && (
+    <div
+      class={`pagination-wrap ${wrapVariant.className}`}
+      data-pagination-component="cyber"
+      data-style-enabled={styleEnabled ? 'true' : 'false'}
+      data-style-mode={styleMode}
+      data-style-variants={String(styleVariants)}
+      data-style-fixed-variant={String(styleFixedVariant)}
+    >
+      <nav class="pagination" aria-label={labels.paginationAria}>
+        {model.currentPage > 1 && (
+          <a
+            class={`pg-item pg-nav ${itemVariantClass(`${locale}:prev:${model.currentPage}`, 0)}`}
+            href={pageHref(model.currentPage - 1)}
+            aria-label={labels.previous}
+          >
+            {labels.previous}
+          </a>
+        )}
+        {model.items.map((item, index) =>
+          item.kind === 'ellipsis' ? (
+            <span
+              class={`pg-item pg-ellipsis ${itemVariantClass(`${locale}:ellipsis:${item.id}`, index)}`}
+              aria-hidden="true"
+            >
+              ...
+            </span>
+          ) : (
+            <a
+              class={`pg-item ${itemVariantClass(`${locale}:page:${item.page}`, index)} ${item.page === model.currentPage ? 'current' : ''}`}
+              href={pageHref(item.page)}
+              aria-current={item.page === model.currentPage ? 'page' : undefined}
+            >
+              {item.page}
+            </a>
+          )
+        )}
+        {model.currentPage < model.totalPages && (
+          <a
+            class={`pg-item pg-nav ${itemVariantClass(`${locale}:next:${model.currentPage}`, model.items.length + 2)}`}
+            href={pageHref(model.currentPage + 1)}
+            aria-label={labels.next}
+          >
+            {labels.next}
+          </a>
+        )}
+      </nav>
+      {showJump && (
+        <form
+          class="pagination-jump"
+          data-blog-root={blogRoot}
+          data-total-pages={String(model.totalPages)}
+          data-enter-to-go={config.jump.enterToGo ? 'true' : 'false'}
+          aria-label={labels.jumpTo}
+        >
+          <label class="sr-only" for="pagination-jump-input">
+            {labels.jumpInputLabel}
+          </label>
+          <span class="pagination-jump-label">{labels.jumpTo}</span>
+          <input
+            id="pagination-jump-input"
+            class="pagination-jump-input"
+            type="text"
+            inputmode="numeric"
+            pattern="[0-9]*"
+            value={model.currentPage}
+          />
+          <button type="submit" class="pagination-jump-btn">
+            {labels.jumpGo}
+          </button>
+        </form>
+      )}
+    </div>
+  )
+}
+
+<script is:inline>
+  document.querySelectorAll('[data-pagination-component="cyber"]').forEach((wrap) => {
+    if (!(wrap instanceof HTMLElement)) return;
+    const toInt = (value, fallback) => {
+      const parsed = Number.parseInt(value ?? '', 10);
+      return Number.isFinite(parsed) ? parsed : fallback;
+    };
+    const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
+
+    const styleEnabled = wrap.dataset.styleEnabled === 'true';
+    const styleMode = wrap.dataset.styleMode || 'random';
+    const variants = clamp(toInt(wrap.dataset.styleVariants, 9), 1, 12);
+    const fixedVariant = clamp(toInt(wrap.dataset.styleFixedVariant, 1), 1, variants);
+
+    const items = wrap.querySelectorAll('.pagination .pg-item');
+
+    if (!styleEnabled) {
+      items.forEach((item) => {
+        item.className = item.className
+          .replace(/\bpg-var-\d+\b/g, '')
+          .replace(/\bpg-var-random\b/g, '')
+          .trim();
+        item.classList.add('pg-var-1');
+      });
+    } else if (styleMode === 'random') {
+      items.forEach((item) => {
+        item.className = item.className
+          .replace(/\bpg-var-\d+\b/g, '')
+          .replace(/\bpg-var-random\b/g, '')
+          .trim();
+        const variant = Math.floor(Math.random() * variants) + 1;
+        item.classList.add(`pg-var-${variant}`);
+      });
+    } else if (styleMode === 'fixed') {
+      items.forEach((item) => {
+        item.className = item.className
+          .replace(/\bpg-var-\d+\b/g, '')
+          .replace(/\bpg-var-random\b/g, '')
+          .trim();
+        item.classList.add(`pg-var-${fixedVariant}`);
+      });
+    }
+
+    const form = wrap.querySelector('.pagination-jump');
+    if (!(form instanceof HTMLFormElement)) return;
+
+    const blogRoot = form.getAttribute('data-blog-root') || '/blog/';
+    const totalPages = Math.max(1, parseInt(form.getAttribute('data-total-pages') || '1', 10));
+    const enterToGo = form.getAttribute('data-enter-to-go') !== 'false';
+    const input = form.querySelector('.pagination-jump-input');
+    if (!(input instanceof HTMLInputElement)) return;
+
+    const normalizeRoot = (root) => {
+      if (!root) return '/blog/';
+      return root.endsWith('/') ? root : `${root}/`;
+    };
+
+    const toHref = (pageNum) => {
+      const root = normalizeRoot(blogRoot);
+      return pageNum === 1 ? root : `${root}${pageNum}/`;
+    };
+
+    const runJump = () => {
+      const normalized = (input.value || '').replace(/[^\d]/g, '');
+      const value = Number.parseInt(normalized || '1', 10);
+      if (!Number.isFinite(value)) return;
+      const target = Math.max(1, Math.min(totalPages, Math.round(value)));
+      window.location.assign(toHref(target));
+    };
+
+    form.addEventListener('submit', (event) => {
+      event.preventDefault();
+      runJump();
+    });
+
+    if (!enterToGo) {
+      input.addEventListener('keydown', (event) => {
+        if (event.key !== 'Enter') return;
+        event.preventDefault();
+      });
+    }
+  });
+</script>

package/src/components/shared/CommonHeader.astro

@@ -80,7 +80,9 @@ const localeOptions = SUPPORTED_LOCALES.map((targetLocale) => ({
           <span class="nav-status-dot" aria-hidden="true"></span>
           <span class="nav-status-text">{labels.status}</span>
         </div>
-        <SocialMenu links={SOCIAL_LINKS} />
+        <div class="social-menu-wrap">
+          <SocialMenu links={SOCIAL_LINKS} />
+        </div>
       </div>
     </div>
   </nav>
@@ -244,6 +246,9 @@ const localeOptions = SUPPORTED_LOCALES.map((targetLocale) => ({
       display: none !important;
     }
     .social-links {
+      display: flex;
+    }
+    .social-menu-wrap {
       display: none;
     }
     .lang-switcher {

package/src/i18n/config.ts

@@ -32,7 +32,8 @@ export function localePath(locale: string, path = '/'): string {
 
 export function stripLocaleFromPath(pathname: string, locale: string): string {
   const prefix = `/${locale}`;
-  if (!pathname.startsWith(prefix)) return pathname;
+  if (pathname === prefix) return '/';
+  if (!pathname.startsWith(`${prefix}/`)) return pathname;
   const withoutLocale = pathname.slice(prefix.length);
   return withoutLocale || '/';
 }

package/src/i18n/messages.ts

@@ -96,7 +96,7 @@ export const DEFAULT_MESSAGES: Record<string, Messages> = {
       ethos: 'Hacker Ethos',
       now: 'Now',
       contact: 'Contact',
-      regenerate: 'Regenerate',
+      regenerate: 'Replay scan',
     },
     blog: {
       title: 'Blog',
@@ -130,7 +130,7 @@ export const DEFAULT_MESSAGES: Record<string, Messages> = {
       heroMonitor: 'neural monitor',
       heroSignalSync: 'signal sync active',
       heroModelOnline: 'model online',
-      regenerate: 'Regenerate',
+      regenerate: 'Replay scan',
       relatedAria: 'Related posts',
       backToBlogAria: 'Back to blog',
       paginationAria: 'Pagination',
@@ -165,7 +165,7 @@ export const DEFAULT_MESSAGES: Record<string, Messages> = {
       ethos: 'ハッカー精神',
       now: '現在',
       contact: '連絡先',
-      regenerate: '再生成',
+      regenerate: 'スキャン再生',
     },
     blog: {
       title: 'ブログ',
@@ -199,7 +199,7 @@ export const DEFAULT_MESSAGES: Record<string, Messages> = {
       heroMonitor: 'ニューラルモニター',
       heroSignalSync: 'シグナル同期中',
       heroModelOnline: 'モデルオンライン',
-      regenerate: '再生成',
+      regenerate: 'スキャン再生',
       relatedAria: '関連記事',
       backToBlogAria: 'ブログへ戻る',
       paginationAria: 'ページネーション',
@@ -234,7 +234,7 @@ export const DEFAULT_MESSAGES: Record<string, Messages> = {
       ethos: '해커 정신',
       now: '지금',
       contact: '연락처',
-      regenerate: '재생성',
+      regenerate: '스캔 재생',
     },
     blog: {
       title: '블로그',
@@ -268,7 +268,7 @@ export const DEFAULT_MESSAGES: Record<string, Messages> = {
       heroMonitor: '뉴럴 모니터',
       heroSignalSync: '신호 동기화 활성',
       heroModelOnline: '모델 온라인',
-      regenerate: '재생성',
+      regenerate: '스캔 재생',
       relatedAria: '관련 글',
       backToBlogAria: '블로그로 돌아가기',
       paginationAria: '페이지네이션',
@@ -303,7 +303,7 @@ export const DEFAULT_MESSAGES: Record<string, Messages> = {
       ethos: 'Ethos hacker',
       now: 'Ahora',
       contact: 'Contacto',
-      regenerate: 'Regenerar',
+      regenerate: 'Repetir escaneo',
     },
     blog: {
       title: 'Blog',
@@ -338,7 +338,7 @@ export const DEFAULT_MESSAGES: Record<string, Messages> = {
       heroMonitor: 'monitor neural',
       heroSignalSync: 'sincronización de señal activa',
       heroModelOnline: 'modelo en línea',
-      regenerate: 'Regenerar',
+      regenerate: 'Repetir escaneo',
       relatedAria: 'Publicaciones relacionadas',
       backToBlogAria: 'Volver al blog',
       paginationAria: 'Paginación',
@@ -373,7 +373,7 @@ export const DEFAULT_MESSAGES: Record<string, Messages> = {
       ethos: '黑客精神',
       now: '现在',
       contact: '联系',
-      regenerate: '重新生成',
+      regenerate: '重播扫描',
     },
     blog: {
       title: '博客',
@@ -407,7 +407,7 @@ export const DEFAULT_MESSAGES: Record<string, Messages> = {
       heroMonitor: '神经监视器',
       heroSignalSync: '信号同步中',
       heroModelOnline: '模型在线',
-      regenerate: '重新生成',
+      regenerate: '重播扫描',
       relatedAria: '相关文章',
       backToBlogAria: '返回博客',
       paginationAria: '分页导航',

package/src/layouts/BlogPost.astro

@@ -22,6 +22,8 @@ type Props = CollectionEntry<'blog'>['data'] & {
   locale?: string;
   related?: CollectionEntry<'blog'>[];
   localeHrefs?: Partial<Record<Locale, string>>;
+  aiLatencyEstimated?: boolean;
+  aiConfidenceEstimated?: boolean;
 };
 
 const {
@@ -37,7 +39,9 @@ const {
   aiMode,
   aiState,
   aiLatencyMs,
+  aiLatencyEstimated = false,
   aiConfidence,
+  aiConfidenceEstimated = false,
   wordCount,
   tokenCount,
   author,
@@ -169,7 +173,7 @@ const hasCommentsConfig = Boolean(
                   <Image
                     class="hero-base-image"
                     src={heroImage}
-                    alt={title}
+                    alt=""
                     loading="eager"
                     decoding="async"
                     fetchpriority="high"
@@ -257,12 +261,14 @@ const hasCommentsConfig = Boolean(
               <div class="ai-response-meta">
                 {aiLatencyMs !== undefined && (
                   <span>
-                    {messages.blog.latencyLabel} <strong>{aiLatencyMs}</strong> ms
+                    {messages.blog.latencyLabel}{' '}
+                    <strong>{aiLatencyEstimated ? `~${aiLatencyMs}` : aiLatencyMs}</strong> ms
                   </span>
                 )}
                 {confidenceText !== undefined && (
                   <span>
-                    {messages.blog.confidenceLabel} <strong>{confidenceText}</strong>
+                    {messages.blog.confidenceLabel}{' '}
+                    <strong>{aiConfidenceEstimated ? `~${confidenceText}` : confidenceText}</strong>
                   </span>
                 )}
               </div>
@@ -293,8 +299,11 @@ const hasCommentsConfig = Boolean(
           </div>
         )
       }
-      <button type="button" class="ai-regenerate" aria-label={messages.blog.regenerate}
-        >{messages.blog.regenerate}</button
+      <button
+        type="button"
+        class="ai-regenerate"
+        aria-label={messages.blog.regenerate}
+        title={messages.blog.regenerate}>{messages.blog.regenerate}</button
       >
     </div>
   </article>
@@ -310,7 +319,7 @@ const hasCommentsConfig = Boolean(
             >
               {p.data.heroImage ? (
                 <div class="ai-related-img">
-                  <Image width={320} height={180} src={p.data.heroImage} alt={p.data.title} />
+                  <Image width={320} height={180} src={p.data.heroImage} alt="" />
                 </div>
               ) : (
                 <div class="ai-related-placeholder">

package/src/scripts/about/modals.js

@@ -10,7 +10,19 @@ export function initAboutModals(runtimeConfig, prefersReducedMotion) {
   const modalOverlay = document.getElementById('hacker-modal');
   const modalBody = document.getElementById('hacker-modal-body');
   const modalTitle = document.querySelector('.hacker-modal-title');
+  const closeButton = document.querySelector('.hacker-modal-close');
   if (!modalOverlay || !modalBody || !modalTitle) return;
+  let lastFocusedElement = null;
+
+  function getFocusableElements() {
+    return Array.from(
+      modalOverlay.querySelectorAll(
+        'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
+      )
+    ).filter(
+      (element) => !element.hasAttribute('hidden') && element.getAttribute('aria-hidden') !== 'true'
+    );
+  }
 
   const decryptorKeysLabel =
     typeof runtimeConfig.decryptorKeysLabel === 'string' ? runtimeConfig.decryptorKeysLabel : '';
@@ -36,10 +48,15 @@ export function initAboutModals(runtimeConfig, prefersReducedMotion) {
     if (modalEl) modalEl.classList.remove('hacker-modal-wide');
     modalOverlay.classList.remove('open');
     modalOverlay.setAttribute('aria-hidden', 'true');
+    if (lastFocusedElement && typeof lastFocusedElement.focus === 'function') {
+      lastFocusedElement.focus();
+    }
   };
 
   const openModal = (data) => {
     if (!data) return;
+    lastFocusedElement =
+      document.activeElement instanceof HTMLElement ? document.activeElement : null;
 
     decryptor.stop();
     if (cleanupKeyboard) {
@@ -84,6 +101,13 @@ export function initAboutModals(runtimeConfig, prefersReducedMotion) {
 
     modalOverlay.classList.add('open');
     modalOverlay.setAttribute('aria-hidden', 'false');
+    window.requestAnimationFrame(() => {
+      const focusables = getFocusableElements();
+      const nextFocus = focusables[0] || closeButton || modalOverlay;
+      if (nextFocus && typeof nextFocus.focus === 'function') {
+        nextFocus.focus();
+      }
+    });
   };
 
   const folderButtons = Array.from(document.querySelectorAll('.hacker-folder[data-modal]'));
@@ -97,7 +121,6 @@ export function initAboutModals(runtimeConfig, prefersReducedMotion) {
     return [button, onClick];
   });
 
-  const closeButton = document.querySelector('.hacker-modal-close');
   if (closeButton) closeButton.addEventListener('click', closeModal);
 
   const onOverlayClick = (event) => {
@@ -106,7 +129,38 @@ export function initAboutModals(runtimeConfig, prefersReducedMotion) {
   modalOverlay.addEventListener('click', onOverlayClick);
 
   const onDocumentKeydown = (event) => {
-    if (event.key === 'Escape' && modalOverlay.classList.contains('open')) closeModal();
+    if (!modalOverlay.classList.contains('open')) return;
+    if (event.key === 'Escape') {
+      closeModal();
+      return;
+    }
+    if (event.key !== 'Tab') return;
+
+    const focusables = getFocusableElements();
+    if (focusables.length === 0) {
+      event.preventDefault();
+      if (closeButton && typeof closeButton.focus === 'function') {
+        closeButton.focus();
+      }
+      return;
+    }
+
+    const currentIndex = focusables.indexOf(document.activeElement);
+    const first = focusables[0];
+    const last = focusables[focusables.length - 1];
+
+    if (event.shiftKey) {
+      if (document.activeElement === first || currentIndex === -1) {
+        event.preventDefault();
+        last.focus();
+      }
+      return;
+    }
+
+    if (document.activeElement === last) {
+      event.preventDefault();
+      first.focus();
+    }
   };
   document.addEventListener('keydown', onDocumentKeydown);
 

package/src/scripts/about/reading-ui.js

@@ -6,9 +6,10 @@ export function initAboutReadingUi(runtimeConfig, prefersReducedMotion) {
     p60: 'inference stable',
     p90: 'output finalized',
   };
-  var toastMessages = runtimeConfig.effects && runtimeConfig.effects.scrollToasts
-    ? runtimeConfig.effects.scrollToasts
-    : fallbackToasts;
+  var toastMessages =
+    runtimeConfig.effects && runtimeConfig.effects.scrollToasts
+      ? runtimeConfig.effects.scrollToasts
+      : fallbackToasts;
   var stageSeen = { p30: false, p60: false, p90: false };
   var toastTimer = 0;
   var hasScrolled = false;
@@ -18,9 +19,9 @@ export function initAboutReadingUi(runtimeConfig, prefersReducedMotion) {
     toast.textContent = '> ' + msg;
     toast.classList.add('visible');
     clearTimeout(toastTimer);
-    toastTimer = setTimeout(function() {
+    toastTimer = setTimeout(function () {
       toast.classList.remove('visible');
-    }, 900);
+    }, 1800);
   }
 
   if (progress) {
@@ -53,7 +54,7 @@ export function initAboutReadingUi(runtimeConfig, prefersReducedMotion) {
 
   var backTop = document.querySelector('.hacker-back-to-top');
   if (backTop) {
-    backTop.addEventListener('click', function() {
+    backTop.addEventListener('click', function () {
       window.scrollTo({ top: 0, behavior: prefersReducedMotion ? 'auto' : 'smooth' });
     });
   }

package/src/scripts/blogpost/read-progress.js

@@ -23,9 +23,9 @@ export function initReadProgressAndBackToTop(prefersReducedMotion) {
     toast.textContent = msg;
     toast.classList.add('visible');
     clearTimeout(toastTimer);
-    toastTimer = setTimeout(function() {
+    toastTimer = setTimeout(function () {
       toast.classList.remove('visible');
-    }, 900);
+    }, 1800);
   }
 
   if (progress) {
@@ -62,7 +62,7 @@ export function initReadProgressAndBackToTop(prefersReducedMotion) {
 
   var backTop = document.querySelector('.ai-back-to-top');
   if (backTop) {
-    backTop.addEventListener('click', function() {
+    backTop.addEventListener('click', function () {
       window.scrollTo({ top: 0, behavior: prefersReducedMotion ? 'auto' : 'smooth' });
     });
   }

package/src/utils/number.ts

@@ -0,0 +1,8 @@
+export function clamp(value: number, min: number, max: number): number {
+  return Math.max(min, Math.min(max, value));
+}
+
+export function int(value: number): number {
+  if (!Number.isFinite(value)) return 0;
+  return Math.floor(value);
+}

package/src/utils/pagination-style.ts

@@ -0,0 +1,81 @@
+import { clamp, int } from './number';
+
+type PaginationStyleMode = 'random' | 'sequential' | 'fixed';
+
+interface PaginationStyleConfig {
+  ENABLED: boolean;
+  MODE: PaginationStyleMode;
+  VARIANTS: number;
+  FIXED_VARIANT: number;
+}
+
+interface ResolvePaginationVariantOptions {
+  currentPage: number;
+  totalPages: number;
+  locale: string;
+  pathname: string;
+  config: PaginationStyleConfig;
+}
+
+function hashString(value: string): number {
+  let hash = 5381;
+  for (let i = 0; i < value.length; i += 1) {
+    hash = (hash * 33) ^ value.charCodeAt(i);
+  }
+  return Math.abs(hash) >>> 0;
+}
+
+export function resolvePaginationVariant(options: ResolvePaginationVariantOptions): {
+  className: string;
+  variant: number;
+} {
+  const variants = clamp(int(options.config.VARIANTS), 1, 12);
+  if (!options.config.ENABLED) {
+    return { className: 'cyber-pg-v1', variant: 1 };
+  }
+
+  const mode = options.config.MODE;
+  let variant = 1;
+
+  if (mode === 'fixed') {
+    variant = clamp(int(options.config.FIXED_VARIANT), 1, variants);
+  } else if (mode === 'sequential') {
+    variant = ((Math.max(1, int(options.currentPage)) - 1) % variants) + 1;
+  } else {
+    const seedKey = `${options.locale}:${options.pathname}:${options.currentPage}:${options.totalPages}`;
+    variant = (hashString(seedKey) % variants) + 1;
+  }
+
+  return {
+    className: `cyber-pg-v${variant}`,
+    variant,
+  };
+}
+
+interface ResolvePaginationItemVariantOptions {
+  seed: string;
+  index: number;
+  config: PaginationStyleConfig;
+}
+
+export function resolvePaginationItemVariant(options: ResolvePaginationItemVariantOptions): {
+  className: string;
+  variant: number;
+} {
+  const variants = clamp(int(options.config.VARIANTS), 1, 12);
+  if (!options.config.ENABLED) {
+    return { className: 'pg-var-1', variant: 1 };
+  }
+
+  const mode = options.config.MODE;
+  let variant = 1;
+  if (mode === 'fixed') {
+    variant = clamp(int(options.config.FIXED_VARIANT), 1, variants);
+  } else if (mode === 'sequential') {
+    variant = (int(options.index) % variants) + 1;
+  } else {
+    variant = (hashString(options.seed) % variants) + 1;
+  }
+
+  return { className: `pg-var-${variant}`, variant };
+}

package/src/utils/pagination.ts

@@ -0,0 +1,67 @@
+import { clamp, int } from './number';
+
+export type PaginationItem = { kind: 'page'; page: number } | { kind: 'ellipsis'; id: string };
+
+export interface PaginationModel {
+  currentPage: number;
+  totalPages: number;
+  showJump: boolean;
+  items: PaginationItem[];
+}
+
+interface BuildPaginationModelOptions {
+  currentPage: number;
+  totalPages: number;
+  windowSize?: number;
+  showJumpThreshold?: number;
+}
+
+function addRange(set: Set<number>, start: number, end: number, totalPages: number) {
+  const s = clamp(int(start), 1, totalPages);
+  const e = clamp(int(end), 1, totalPages);
+  for (let page = s; page <= e; page += 1) set.add(page);
+}
+
+export function buildPaginationModel(options: BuildPaginationModelOptions): PaginationModel {
+  const totalPages = Math.max(1, int(options.totalPages));
+  const currentPage = clamp(int(options.currentPage), 1, totalPages);
+  const windowSize = clamp(int(options.windowSize ?? 7), 5, 21);
+  const showJumpThreshold = Math.max(1, int(options.showJumpThreshold ?? 12));
+  const showJump = totalPages > showJumpThreshold;
+
+  if (totalPages <= windowSize) {
+    return {
+      currentPage,
+      totalPages,
+      showJump,
+      items: Array.from({ length: totalPages }, (_, i) => ({ kind: 'page', page: i + 1 })),
+    };
+  }
+
+  const boundaryCount = 1;
+  const siblingCount = Math.max(1, Math.floor((windowSize - (boundaryCount * 2 + 3)) / 2));
+  const nearEdgeSlots = boundaryCount + siblingCount * 2 + 2;
+  const picked = new Set<number>();
+
+  addRange(picked, 1, boundaryCount, totalPages);
+  addRange(picked, totalPages - boundaryCount + 1, totalPages, totalPages);
+  addRange(picked, currentPage - siblingCount, currentPage + siblingCount, totalPages);
+
+  if (currentPage <= nearEdgeSlots) addRange(picked, 1, nearEdgeSlots + 1, totalPages);
+  if (currentPage >= totalPages - nearEdgeSlots + 1) {
+    addRange(picked, totalPages - nearEdgeSlots, totalPages, totalPages);
+  }
+
+  const pages = [...picked].sort((a, b) => a - b);
+  const items: PaginationItem[] = [];
+  for (let i = 0; i < pages.length; i += 1) {
+    const page = pages[i];
+    const prev = pages[i - 1];
+    if (typeof prev === 'number' && page - prev > 1) {
+      items.push({ kind: 'ellipsis', id: `ellipsis-${prev}-${page}` });
+    }
+    items.push({ kind: 'page', page });
+  }
+
+  return { currentPage, totalPages, showJump, items };
+}