@autono/open-pages 0.1.0

package/src/app/styles.css

@@ -0,0 +1,405 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+@import "@fontsource-variable/geist";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --font-sans: "Geist Variable", -apple-system, BlinkMacSystemFont, sans-serif;
+  --font-heading: "Geist Variable", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+  --font-serif:
+    ui-serif, "New York", "Iowan Old Style", "Apple Garamond", "Big Caslon", "Charter", Georgia,
+    serif;
+  --font-mono: ui-monospace, "JetBrains Mono", "SF Mono", "Menlo", "Cascadia Code", monospace;
+
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-hairline: var(--hairline);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --color-canvas: var(--canvas);
+  --color-foreground: var(--foreground);
+  --color-background: var(--background);
+  --color-brand: var(--brand);
+  --color-brand-foreground: var(--brand-foreground);
+  --color-brand-soft: var(--brand-soft);
+
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.85);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+
+  --shadow-edge: 0 0 0 0.5px oklch(0 0 0 / 0.06), 0 1px 0 oklch(0 0 0 / 0.025);
+  --shadow-floating:
+    0 0 0 0.5px oklch(0 0 0 / 0.08), 0 1px 1px oklch(0 0 0 / 0.04),
+    0 4px 16px -2px oklch(0 0 0 / 0.08);
+  --shadow-overlay:
+    0 0 0 0.5px oklch(0 0 0 / 0.1), 0 8px 28px -4px oklch(0 0 0 / 0.18),
+    0 24px 64px -12px oklch(0 0 0 / 0.2);
+}
+
+:root {
+  /* Pure neutral ramp — zero chroma, flat surfaces, hairline borders.
+     Near-white background with white cards floating on a slightly
+     recessed canvas. */
+  --background: oklch(0.99 0 0);
+  --foreground: oklch(0.145 0 0);
+  --canvas: oklch(0.975 0 0);
+
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+
+  --primary: oklch(0.185 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.96 0 0);
+  --secondary-foreground: oklch(0.185 0 0);
+  --muted: oklch(0.955 0 0);
+  --muted-foreground: oklch(0.5 0 0);
+  --accent: oklch(0.945 0 0);
+  --accent-foreground: oklch(0.185 0 0);
+  --destructive: oklch(0.58 0.22 27);
+
+  --border: oklch(0.92 0 0);
+  --hairline: oklch(0.885 0 0);
+  --input: oklch(0.92 0 0);
+  --ring: oklch(0.6 0.2 25);
+
+  /* Vermillion — the single signature accent on an otherwise neutral
+     surface; restraint is the point. */
+  --brand: oklch(0.6 0.2 25);
+  --brand-foreground: oklch(0.985 0 0);
+  --brand-soft: oklch(0.6 0.2 25 / 0.1);
+
+  --chart-1: oklch(0.6 0.2 25);
+  --chart-2: oklch(0.55 0.16 250);
+  --chart-3: oklch(0.55 0.15 285);
+  --chart-4: oklch(0.6 0.13 160);
+  --chart-5: oklch(0.5 0 0);
+
+  /* Tight, considered radius — drops the trendy 10px squish for 6px crisp. */
+  --radius: 0.375rem;
+
+  --sidebar: oklch(0.98 0 0);
+  --sidebar-foreground: oklch(0.185 0 0);
+  --sidebar-primary: oklch(0.185 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.94 0 0);
+  --sidebar-accent-foreground: oklch(0.185 0 0);
+  --sidebar-border: oklch(0.905 0 0);
+  --sidebar-ring: oklch(0.6 0.2 25);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.93 0 0);
+  --canvas: oklch(0.125 0 0);
+
+  --card: oklch(0.19 0 0);
+  --card-foreground: oklch(0.93 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.93 0 0);
+
+  --primary: oklch(0.925 0 0);
+  --primary-foreground: oklch(0.17 0 0);
+  --secondary: oklch(0.24 0 0);
+  --secondary-foreground: oklch(0.93 0 0);
+  --muted: oklch(0.23 0 0);
+  --muted-foreground: oklch(0.68 0 0);
+  --accent: oklch(0.265 0 0);
+  --accent-foreground: oklch(0.93 0 0);
+  --destructive: oklch(0.66 0.2 25);
+
+  --border: oklch(1 0 0 / 0.1);
+  --hairline: oklch(1 0 0 / 0.07);
+  --input: oklch(1 0 0 / 0.14);
+  --ring: oklch(0.63 0.19 25);
+
+  --brand: oklch(0.63 0.2 25);
+  --brand-foreground: oklch(0.985 0 0);
+  --brand-soft: oklch(0.63 0.2 25 / 0.16);
+
+  --chart-1: oklch(0.63 0.2 25);
+  --chart-2: oklch(0.65 0.15 250);
+  --chart-3: oklch(0.65 0.14 285);
+  --chart-4: oklch(0.7 0.13 160);
+  --chart-5: oklch(0.65 0 0);
+
+  --sidebar: oklch(0.17 0 0);
+  --sidebar-foreground: oklch(0.93 0 0);
+  --sidebar-primary: oklch(0.925 0 0);
+  --sidebar-primary-foreground: oklch(0.17 0 0);
+  --sidebar-accent: oklch(0.26 0 0);
+  --sidebar-accent-foreground: oklch(0.93 0 0);
+  --sidebar-border: oklch(1 0 0 / 0.1);
+  --sidebar-ring: oklch(0.63 0.19 25);
+}
+
+/* Tabular numerics — pages, counts, hex values, slider readouts.
+   Declared as a Tailwind v4 `@utility` so it can be `@apply`d (e.g. by
+   .folio below) and used as a className token. */
+@utility nums {
+  font-feature-settings:
+    "tnum" on,
+    "cv11" on;
+  font-variant-numeric: tabular-nums;
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  html {
+    @apply font-sans;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-feature-settings:
+      "ss01" on,
+      "cv11" on,
+      "calt" on;
+  }
+  body {
+    @apply bg-background text-foreground;
+    font-feature-settings:
+      "ss01" on,
+      "cv11" on,
+      "calt" on,
+      "tnum" off;
+    letter-spacing: -0.005em;
+  }
+  ::selection {
+    background: var(--brand-soft);
+    color: var(--foreground);
+  }
+}
+
+@layer components {
+  /*
+   * Eyebrow label — the single typographic gesture used for *every* section
+   * label across the app. Tracked-out small caps in muted ink.
+   */
+  .eyebrow {
+    @apply font-sans text-[11px] font-medium uppercase text-muted-foreground;
+    letter-spacing: 0.08em;
+  }
+
+  /* Hairline divider — 0.5px on retina, snaps to 1px elsewhere. */
+  .hairline {
+    background: var(--hairline);
+  }
+
+  /* Numeric folio-style page count. */
+  .folio {
+    @apply nums font-mono text-[10.5px] tracking-[0.08em] text-muted-foreground;
+  }
+}
+
+/*
+ * Comment input cue — kept from the original design but retoned to match
+ * the new palette (warm vermillion + amber instead of the AI-classic
+ * blue/violet halo). Plays once on first open, then settles.
+ */
+@property --comment-cue-angle {
+  syntax: "<angle>";
+  initial-value: 0deg;
+  inherits: false;
+}
+
+.comment-cue {
+  position: relative;
+  isolation: isolate;
+}
+
+.comment-cue::before {
+  content: "";
+  position: absolute;
+  inset: -1px;
+  border-radius: calc(var(--radius-md) + 1px);
+  padding: 1.25px;
+  background: conic-gradient(
+    from var(--comment-cue-angle),
+    transparent 0deg,
+    transparent 250deg,
+    oklch(0.78 0.14 60 / 0.55) 295deg,
+    oklch(0.62 0.2 28 / 0.85) 325deg,
+    oklch(0.78 0.14 60 / 0.55) 350deg,
+    transparent 360deg
+  );
+  -webkit-mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  mask-composite: exclude;
+  pointer-events: none;
+  opacity: 0;
+  z-index: 1;
+  animation: comment-cue-trace 1500ms cubic-bezier(0.22, 0.61, 0.36, 1) 220ms 1 both;
+}
+
+.comment-cue::after {
+  content: "";
+  position: absolute;
+  inset: -10px;
+  border-radius: calc(var(--radius-md) + 10px);
+  background:
+    radial-gradient(80% 60% at 30% 50%, oklch(0.62 0.2 28 / 0.18), transparent 70%),
+    radial-gradient(70% 60% at 75% 60%, oklch(0.78 0.14 60 / 0.16), transparent 70%);
+  filter: blur(14px);
+  opacity: 0;
+  z-index: -1;
+  pointer-events: none;
+  animation: comment-cue-halo 1700ms ease-out 180ms 1 both;
+}
+
+@keyframes comment-cue-trace {
+  0% {
+    --comment-cue-angle: 0deg;
+    opacity: 0;
+  }
+  18% {
+    opacity: 1;
+  }
+  82% {
+    opacity: 1;
+  }
+  100% {
+    --comment-cue-angle: 360deg;
+    opacity: 0;
+  }
+}
+
+@keyframes comment-cue-halo {
+  0% {
+    opacity: 0;
+    transform: scale(0.97);
+  }
+  40% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(1.015);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .comment-cue::before,
+  .comment-cue::after {
+    animation: none;
+  }
+}
+
+/*
+ * Indeterminate "line loader" — a hairline track with a short bar that
+ * glides back and forth. Used for full-screen loading states in place of
+ * a spinner; quieter, more typographic, easier on the eye.
+ */
+@keyframes osd-line-loader {
+  0% {
+    transform: translateX(0%);
+  }
+  50% {
+    transform: translateX(300%);
+  }
+  100% {
+    transform: translateX(0%);
+  }
+}
+
+.line-loader-bar {
+  animation: osd-line-loader 1.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .line-loader-bar {
+    animation: none;
+    transform: translateX(150%);
+  }
+}
+
+[data-osd-freeze-motion],
+[data-osd-freeze-motion] *,
+[data-osd-freeze-motion] *::before,
+[data-osd-freeze-motion] *::after {
+  /* biome-ignore lint/complexity/noImportantStyles: Thumbnail previews must override arbitrary page-authored motion, including inline styles. */
+  animation-duration: 1ms !important;
+  /* biome-ignore lint/complexity/noImportantStyles: Thumbnail previews must override arbitrary page-authored motion, including inline styles. */
+  animation-delay: 0s !important;
+  /* biome-ignore lint/complexity/noImportantStyles: Thumbnail previews must override arbitrary page-authored motion, including inline styles. */
+  animation-iteration-count: 1 !important;
+  /* biome-ignore lint/complexity/noImportantStyles: Thumbnail previews must override arbitrary page-authored motion, including inline styles. */
+  animation-fill-mode: forwards !important;
+  /* biome-ignore lint/complexity/noImportantStyles: Thumbnail previews must override arbitrary page-authored motion, including inline styles. */
+  transition: none !important;
+  /* biome-ignore lint/complexity/noImportantStyles: Thumbnail previews must override arbitrary page-authored motion, including inline styles. */
+  scroll-behavior: auto !important;
+  /* biome-ignore lint/complexity/noImportantStyles: Thumbnail previews must override arbitrary page-authored motion, including inline styles. */
+  view-transition-name: none !important;
+}
+
+/*
+ * Custom scrollbar — slim, ink-on-paper. Removes the chunky default that
+ * fights the calm surfaces.
+ */
+@media (pointer: fine) {
+  *::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+  *::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  *::-webkit-scrollbar-thumb {
+    background: oklch(0 0 0 / 0.1);
+    border: 3px solid transparent;
+    background-clip: content-box;
+    border-radius: 999px;
+  }
+  *::-webkit-scrollbar-thumb:hover {
+    background: oklch(0 0 0 / 0.18);
+    background-clip: content-box;
+  }
+  .dark *::-webkit-scrollbar-thumb {
+    background: oklch(1 0 0 / 0.1);
+    background-clip: content-box;
+  }
+  .dark *::-webkit-scrollbar-thumb:hover {
+    background: oklch(1 0 0 / 0.18);
+    background-clip: content-box;
+  }
+}

package/src/app/virtual.d.ts

@@ -0,0 +1,53 @@
+declare module 'virtual:open-pages/pages' {
+  import type { PageKind, PageModule } from './lib/sdk';
+  export const pageIds: string[];
+  export const pageKinds: Record<string, PageKind>;
+  export const pageThemes: Record<string, string>;
+  export const pageCreatedAt: Record<string, number>;
+  export function loadPage(id: string): Promise<PageModule>;
+}
+
+declare module 'virtual:open-pages/pages.css' {}
+
+declare module 'virtual:open-pages/config' {
+  import type { Locale } from '../locale/types';
+
+  const config: {
+    base?: string;
+    pagesDir?: string;
+    port?: number;
+    locale?: Locale;
+    version: string;
+    build: {
+      showPageBrowser: boolean;
+      showPageUi: boolean;
+    };
+  };
+  export default config;
+}
+
+declare module 'virtual:open-pages/folders' {
+  import type { FoldersManifest } from './lib/sdk';
+
+  const manifest: FoldersManifest;
+  export default manifest;
+}
+
+declare module 'virtual:open-pages/themes' {
+  import type { DesignSystem } from './lib/design';
+  import type { PageComponent } from './lib/sdk';
+
+  export type ThemeMeta = {
+    id: string;
+    name: string;
+    description: string;
+    body: string;
+    hasDemo: boolean;
+  };
+
+  export const themes: ThemeMeta[];
+  export function loadThemeDemo(id: string): Promise<{
+    default: PageComponent;
+    design?: DesignSystem;
+  }>;
+}

package/src/locale/en.ts

@@ -0,0 +1,218 @@
+import type { Locale } from './types';
+
+export const en: Locale = {
+  id: 'en',
+  common: {
+    cancel: 'Cancel',
+    save: 'Save',
+    delete: 'Delete',
+    rename: 'Rename',
+    move: 'Move',
+    add: 'Add',
+    done: 'Done',
+    tryAgain: 'Try again',
+    selected: 'Selected',
+  },
+  notFound: {
+    eyebrow: '404 · not found',
+    title: 'Page not found',
+  },
+  home: {
+    appTitle: 'open-pages',
+    draft: 'Draft',
+    duplicate: 'Duplicate',
+    themes: 'Themes',
+    assets: 'Assets',
+    folders: 'Folders',
+    pages: 'Pages',
+    menu: 'Menu',
+    newFolder: 'New folder',
+    folderName: 'Folder name',
+    updateAvailable: 'open-pages {version} is available',
+    updatePackage: 'Update',
+    updatingPackage: 'Updating',
+    updatePackageDone: 'Updated. Restart the dev server to use the new version.',
+    updatePackageFailed: 'Update failed. Check the dev server output.',
+    restartServer: 'Restart dev server',
+    restartingServer: 'Restarting',
+    restartServerFailed: 'Restart failed. Restart the dev server manually.',
+    changeIcon: 'Change icon',
+    iconEmojiTab: 'Emoji',
+    iconColorTab: 'Color',
+    folderActions: 'Folder actions',
+    searchPlaceholder: 'Search pages',
+    clearSearch: 'Clear search',
+    sortLabel: 'Sort',
+    sortByCreatedDesc: 'Newest',
+    sortByCreatedAsc: 'Oldest',
+    sortByTitleAsc: 'A–Z',
+    sortByTitleDesc: 'Z–A',
+    noMatches: 'No matches',
+    nothingMatchesPrefix: 'Nothing matches ',
+    nothingMatchesSuffix: ' in this folder.',
+    noDocsYet: 'No pages yet',
+    createDocHintPrefix: 'Run ',
+    createDocHintSuffix: ' in your agent to scaffold one.',
+    folderEmptyTitle: '{name} is empty',
+    folderEmptyHint: 'Drag a page from Draft into this folder in the sidebar.',
+    docActions: 'Page actions',
+    moveToFolder: 'Move to folder…',
+    renameDialogEyebrow: 'Rename',
+    renameDialogTitle: 'Rename page',
+    renameDialogDescription: 'Give this page a new display name.',
+    docNamePlaceholder: 'Page name',
+    moveDialogEyebrow: 'Move',
+    moveDialogTitle: 'Move page',
+    moveDialogDescriptionPrefix: 'Choose a folder for ',
+    moveDialogDescriptionSuffix: '.',
+    deleteDialogEyebrow: 'Destructive',
+    deleteDialogTitle: 'Delete page?',
+    deleteDialogDescriptionPrefix: 'This permanently removes ',
+    deleteDialogDescriptionMid: ' and its files from disk. ',
+    deleteDialogDescriptionSuffix: 'This action cannot be undone.',
+    toastFolderCreated: 'Created folder “{name}”',
+    toastFolderCreateFailed: 'Failed to create folder',
+    toastDocDuplicated: 'Duplicated “{page}” as {newDoc}',
+    toastDocDuplicateFailed: 'Could not duplicate page',
+    toastDocMoved: 'Moved “{page}” to {folder}',
+    toastDocMoveFailed: 'Failed to move page',
+    toastFolderDeleted: 'Deleted folder “{name}”',
+    toastFolderDeleteFailed: 'Failed to delete folder',
+    toastFolderReorderFailed: 'Failed to reorder folders',
+    pickIcon: 'Pick icon',
+  },
+  page: {
+    loadingEyebrow: 'Loading',
+  },
+  asset: {
+    devOnlyMessage: 'Asset management is only available in dev mode.',
+    sectionAria: 'Page assets',
+    eyebrow: 'Assets',
+    scopeDoc: 'This page',
+    scopeGlobal: 'Global',
+    fileCount: {
+      one: '{count} file',
+      other: '{count} files',
+    },
+    createdAt: 'Created',
+    modifiedAt: 'Modified',
+    nameColumn: 'Name',
+    typeColumn: 'Type',
+    sizeColumn: 'Size',
+    statusColumn: 'Status',
+    sortAria: 'Sort assets',
+    sortByColumn: 'Sort by {column}',
+    sortAscending: 'Ascending',
+    sortDescending: 'Descending',
+    assetSearchPlaceholder: 'Search assets…',
+    clearAssetSearch: 'Clear asset search',
+    usageFilterAria: 'Filter by usage',
+    usageAll: 'All usage',
+    usageUsed: 'Used',
+    usageUnused: 'Unused',
+    typeFilterAria: 'Filter by file type',
+    typeAll: 'All types',
+    typeImage: 'Images',
+    typeFont: 'Fonts',
+    typeVideo: 'Videos',
+    typeOther: 'Other',
+    gridViewAria: 'Grid view',
+    listViewAria: 'List view',
+    gridColumnsAria: 'Grid columns',
+    gridColumnsValue: '{count} columns',
+    noMatchingAssets: 'No matching assets',
+    noMatchingAssetsHint: 'Try adjusting your search or filters.',
+    clearFilters: 'Clear filters',
+    searchLogos: 'Search logos',
+    upload: 'Upload',
+    dropToUpload: 'Drop to upload',
+    loading: 'Loading…',
+    noAssetsYet: 'No assets yet',
+    noAssetsHintPrefix: 'Drop files anywhere here, or use ',
+    noAssetsHintSuffix: '.',
+    nameAlreadyExists: 'A file with that name already exists.',
+    previewAria: 'Preview {name}',
+    actionsAria: 'Actions for {name}',
+    previewMenuItem: 'Preview',
+    renameMenuItem: 'Rename',
+    deleteMenuItem: 'Delete',
+    conflictTitle: 'File already exists',
+    conflictDescription: '{name} is already in the assets folder.',
+    conflictReplace: 'Replace',
+    conflictRenameCopy: 'Rename copy',
+    deleteAssetTitle: 'Delete asset',
+    deleteAssetDescription: 'Delete {name}? Imports referencing this file in the page will break.',
+    deleteAssetInUseDescription: '{name} is used in {count} place(s) across {pages} page(s).',
+    deleteAssetInUseHint: 'Deleting will revert these usages back to image placeholders.',
+    deleteAndRevert: 'Delete & revert',
+    toastRevertFailed: "Couldn't revert usage in {pageId}",
+    toastDeletedWithRevert: 'Deleted {name} and reverted {count} usage(s)',
+    noPreview: 'No preview available',
+    importHintComment: 'import asset from ',
+    importHintSemi: ';',
+    logoSearchTitle: 'Search logos',
+    logoSearchPoweredByPrefix: 'Powered by ',
+    logoSearchPlaceholder: 'Search by brand…',
+    logoSearchErrorTitle: "Couldn't reach svgl",
+    logoSearchErrorBody: 'Check your connection and try again.',
+    logoSearchNoResults: 'No logos for "{query}"',
+    logoSearchEmpty: 'No logos available',
+    logoSearchEmptyHintPrefix: 'Try a different brand name, or browse the full catalog at ',
+    logoSearchEmptyHintSuffix: '.',
+    logoVariantLight: 'Light',
+    logoVariantDark: 'Dark',
+    toastUploadFailed: 'Upload failed ({status})',
+    toastReplaced: 'Replaced {name}',
+    toastUploadedAs: 'Uploaded as {name}',
+    toastUploaded: 'Uploaded {name}',
+    toastRenameFailed: 'Rename failed ({status})',
+    toastRenamed: 'Renamed to {name}',
+    toastDeleteFailed: 'Delete failed ({status})',
+    toastDeleted: 'Deleted {name}',
+    toastDownloadFailed: 'Failed to download logo',
+    toastSearchFailed: 'Search failed',
+  },
+  commandMenu: {
+    trigger: 'Commands',
+    triggerAria: 'Open command menu',
+    triggerTooltip: 'Search',
+    placeholder: 'Search pages or run a command…',
+    empty: 'No results.',
+    groupDocs: 'Pages',
+    groupFolders: 'Folders',
+    groupNavigation: 'Go to',
+    groupAppearance: 'Appearance',
+    groupDeveloper: 'Developer',
+    themeItem: 'Theme: {name}',
+    languageItem: 'Language: {name}',
+    hintNavigate: 'Navigate',
+    hintSelect: 'Select',
+    hintClose: 'Close',
+  },
+  themeToggle: {
+    toggleAria: 'Toggle theme',
+    title: 'Theme',
+    light: 'Light',
+    dark: 'Dark',
+    system: 'System',
+  },
+  languageToggle: {
+    toggleAria: 'Change language',
+    title: 'Language',
+  },
+  themes: {
+    title: 'Themes',
+    noThemesTitle: 'No themes yet',
+    noThemesHintPrefix: 'Run ',
+    noThemesHintSuffix: ' to author one — a markdown file under themes/ plus a sibling demo page.',
+    noDemoYet: 'No demo yet',
+    noDemoHintPrefix: 'Re-run ',
+    noDemoHintSuffix: ' for this theme to generate a preview page.',
+    backToGallery: 'Back to themes',
+    openThemeAria: 'Open theme {name}',
+    usedBy: 'Pages using this theme',
+    usedByEmpty: 'No pages use this theme yet.',
+    expandPromptAria: 'Expand prompt',
+    collapsePromptAria: 'Collapse prompt',
+  },
+};

package/src/locale/format.ts

@@ -0,0 +1,12 @@
+import type { Plural } from './types';
+
+export function format(template: string, vars: Record<string, string | number>): string {
+  return template.replace(/\{(\w+)\}/g, (m, key) => {
+    const v = vars[key];
+    return v === undefined ? m : String(v);
+  });
+}
+
+export function plural(count: number, forms: Plural): string {
+  return count === 1 ? forms.one : forms.other;
+}

package/src/locale/index.ts

@@ -0,0 +1,6 @@
+export { en } from './en';
+export { format, plural } from './format';
+export { ja } from './ja';
+export type { Locale, Plural } from './types';
+export { zhCN } from './zh-cn';
+export { zhTW } from './zh-tw';