@open-slide/core 1.0.4 → 1.0.6

package/src/app/routes/slide.tsx

@@ -25,6 +25,7 @@ import {
 } from '@/components/ui/dropdown-menu';
 import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { useFolders } from '@/lib/folders';
+import { useLocale } from '@/lib/use-locale';
 import { useWheelPageNavigation } from '@/lib/use-wheel-page-navigation';
 import { cn } from '@/lib/utils';
 import { ClickNavZones } from '../components/click-nav-zones';
@@ -49,6 +50,7 @@ export function Slide() {
   const [designOpen, setDesignOpen] = useState(false);
   const { renameSlide } = useFolders();
   const slideViewportRef = useRef<HTMLElement>(null);
+  const t = useLocale();
 
   useEffect(() => {
     let cancelled = false;
@@ -110,12 +112,12 @@ export function Slide() {
       <div className="mx-auto max-w-3xl px-8 py-16 text-muted-foreground">
         {showSlideBrowser && (
           <Link to="/" className="text-[12px] font-medium text-foreground/70 hover:text-foreground">
-            ← Home
+            ← {t.common.home}
           </Link>
         )}
-        <span className="mt-6 block eyebrow text-destructive/80">Load failed</span>
+        <span className="mt-6 block eyebrow text-destructive/80">{t.common.loadFailed}</span>
         <h2 className="mt-2 font-heading text-xl font-semibold tracking-tight text-foreground">
-          Failed to load slide
+          {t.common.failedToLoadSlide}
         </h2>
         <pre className="mt-4 overflow-auto rounded-[6px] border border-border bg-card p-4 text-[11.5px] leading-relaxed whitespace-pre-wrap shadow-edge">
           {error}
@@ -126,9 +128,19 @@ export function Slide() {
 
   if (!slide) {
     return (
-      <div className="mx-auto max-w-3xl px-8 py-16 text-[12.5px] text-muted-foreground">
-        <span className="eyebrow">Loading</span>
-        <p className="mt-2 font-mono">{slideId}</p>
+      <div className="grid min-h-dvh place-items-center px-8 text-muted-foreground">
+        <div className="flex flex-col items-center gap-4">
+          <div className="relative h-px w-56 overflow-hidden bg-hairline">
+            <span
+              aria-hidden
+              className="line-loader-bar absolute inset-y-[-0.5px] left-0 w-1/4 bg-foreground"
+            />
+          </div>
+          <div className="flex flex-wrap items-baseline justify-center gap-x-2 text-[11.5px]">
+            <span className="eyebrow">{t.slide.loadingEyebrow}</span>
+            <span className="font-mono">{slideId}</span>
+          </div>
+        </div>
       </div>
     );
   }
@@ -138,22 +150,22 @@ export function Slide() {
       <div className="mx-auto max-w-3xl px-8 py-16 text-muted-foreground">
         {showSlideBrowser && (
           <Link to="/" className="text-[12px] font-medium text-foreground/70 hover:text-foreground">
-            ← Home
+            ← {t.common.home}
           </Link>
         )}
-        <span className="mt-6 block eyebrow">Empty</span>
+        <span className="mt-6 block eyebrow">{t.slide.emptyEyebrow}</span>
         <h2 className="mt-2 font-heading text-xl font-semibold tracking-tight text-foreground">
-          Nothing to show.
+          {t.slide.nothingToShow}
         </h2>
         <p className="mt-3 text-[13px] leading-relaxed">
           <code className="rounded-[4px] bg-muted px-1.5 py-0.5 font-mono text-[11.5px]">
             slides/{slideId}/index.tsx
-          </code>{' '}
-          must{' '}
+          </code>
+          {t.slide.emptyHintMust}
           <code className="rounded-[4px] bg-muted px-1.5 py-0.5 font-mono text-[11.5px]">
             export default
-          </code>{' '}
-          a non-empty array of components.
+          </code>
+          {t.slide.emptyHintSuffix}
         </p>
       </div>
     );
@@ -197,8 +209,8 @@ export function Slide() {
           <header className="relative flex h-12 shrink-0 items-center justify-between border-b border-hairline bg-sidebar/85 px-2 backdrop-blur-md md:px-3">
             <div className="flex items-center gap-1.5 md:gap-2">
               {showSlideBrowser && (
-                <Button asChild variant="ghost" size="icon-sm" title="Home">
-                  <Link to="/" aria-label="Back to home">
+                <Button asChild variant="ghost" size="icon-sm" title={t.slide.home}>
+                  <Link to="/" aria-label={t.slide.backToHome}>
                     <ChevronLeft className="size-4" />
                   </Link>
                 </Button>
@@ -220,8 +232,8 @@ export function Slide() {
                   }}
                 >
                   <TabsList>
-                    <TabsTrigger value="slides">Slides</TabsTrigger>
-                    <TabsTrigger value="assets">Assets</TabsTrigger>
+                    <TabsTrigger value="slides">{t.slide.slidesTab}</TabsTrigger>
+                    <TabsTrigger value="assets">{t.slide.assetsTab}</TabsTrigger>
                   </TabsList>
                 </Tabs>
               )}
@@ -240,8 +252,8 @@ export function Slide() {
                   <DropdownMenuTrigger
                     type="button"
                     disabled={exporting}
-                    aria-label="Download"
-                    title="Download"
+                    aria-label={t.slide.download}
+                    title={t.slide.download}
                     className={cn(buttonVariants({ variant: 'ghost', size: 'icon-sm' }))}
                   >
                     {exporting ? (
@@ -266,7 +278,7 @@ export function Slide() {
                       }}
                     >
                       <FileCode2 />
-                      Export as HTML
+                      {t.slide.exportAsHtml}
                     </DropdownMenuItem>
                     <DropdownMenuItem
                       disabled={exporting}
@@ -296,7 +308,7 @@ export function Slide() {
                           });
                         } catch (err) {
                           console.error('[open-slide] pdf export failed', err);
-                          toast.error('PDF export failed', { id: toastId, duration: 4000 });
+                          toast.error(t.slide.pdfExportFailed, { id: toastId, duration: 4000 });
                         } finally {
                           setExporting(false);
                           toast.dismiss(toastId);
@@ -304,7 +316,7 @@ export function Slide() {
                       }}
                     >
                       <FileText />
-                      Export as PDF
+                      {t.slide.exportAsPdf}
                     </DropdownMenuItem>
                   </DropdownMenuContent>
                 </DropdownMenu>
@@ -322,7 +334,7 @@ export function Slide() {
                   className="px-2.5 md:px-3"
                 >
                   <Play className="size-3.5 fill-current" />
-                  <span className="hidden md:inline">Present</span>
+                  <span className="hidden md:inline">{t.slide.present}</span>
                   <kbd className="ml-1 hidden rounded-[3px] bg-brand-foreground/15 px-1 font-mono text-[9.5px] tracking-[0.04em] md:inline">
                     F
                   </kbd>
@@ -434,6 +446,7 @@ function InlineTitleEditor({
   const [value, setValue] = useState(title);
   const [saving, setSaving] = useState(false);
   const inputRef = useRef<HTMLInputElement | null>(null);
+  const t = useLocale();
 
   useEffect(() => {
     if (!editing) setValue(title);
@@ -505,7 +518,7 @@ function InlineTitleEditor({
         <button
           type="button"
           onClick={() => setEditing(true)}
-          aria-label="Rename slide"
+          aria-label={t.slide.renameSlide}
           className={cn(
             'flex size-5 shrink-0 items-center justify-center rounded-[4px] text-muted-foreground transition-opacity hover:bg-muted hover:text-foreground',
             'opacity-0 group-hover/title:opacity-100 focus-visible:opacity-100',

package/src/app/styles.css

@@ -348,6 +348,34 @@
   }
 }
 
+/*
+ * 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,

package/src/app/virtual.d.ts

@@ -5,9 +5,12 @@ declare module 'virtual:open-slide/slides' {
 }
 
 declare module 'virtual:open-slide/config' {
+  import type { Locale } from '../locale/types';
+
   const config: {
     slidesDir?: string;
     port?: number;
+    locale?: Locale;
     build: {
       showSlideBrowser: boolean;
       showSlideUi: boolean;
@@ -19,6 +22,7 @@ declare module 'virtual:open-slide/config' {
 
 declare module 'virtual:open-slide/folders' {
   import type { FoldersManifest } from './lib/sdk';
+
   const manifest: FoldersManifest;
   export default manifest;
 }

package/src/locale/en.ts

@@ -0,0 +1,303 @@
+import type { Locale } from './types';
+
+export const en: Locale = {
+  id: 'en',
+
+  common: {
+    cancel: 'Cancel',
+    save: 'Save',
+    saving: 'Saving',
+    saved: 'Saved',
+    discard: 'Discard',
+    delete: 'Delete',
+    rename: 'Rename',
+    move: 'Move',
+    close: 'Close',
+    loading: 'Loading',
+    loadFailed: 'Load failed',
+    failedToLoadSlide: 'Failed to load slide',
+    home: 'Home',
+    backToHome: 'Back to home',
+    preview: 'Preview',
+    add: 'Add',
+    done: 'Done',
+    tryAgain: 'Try again',
+    undo: 'Undo',
+    redo: 'Redo',
+    light: 'Light',
+    dark: 'Dark',
+    system: 'System',
+    selected: 'Selected',
+  },
+
+  notFound: {
+    eyebrow: '404 · not found',
+    title: 'Page not found',
+  },
+
+  home: {
+    appTitle: 'open-slide',
+    draft: 'Draft',
+    folders: 'Folders',
+    newFolder: 'New folder',
+    folderName: 'Folder name',
+    changeIcon: 'Change icon',
+    iconEmojiTab: 'Emoji',
+    iconColorTab: 'Color',
+    folderActions: 'Folder actions',
+    searchPlaceholder: 'Search slides',
+    clearSearch: 'Clear search',
+    noMatches: 'No matches',
+    nothingMatchesPrefix: 'Nothing matches ',
+    nothingMatchesSuffix: ' in this folder.',
+    noSlidesYet: 'No slides yet',
+    createSlideHintPrefix: 'Create ',
+    createSlideHintMid: ' that ',
+    createSlideHintSuffix: '.',
+    folderEmptyTitle: '{name} is empty',
+    folderEmptyHint: 'Drag a slide from Draft into this folder in the sidebar.',
+    slideActions: 'Slide actions',
+    moveToFolder: 'Move to folder…',
+    renameDialogEyebrow: 'Rename',
+    renameDialogTitle: 'Rename slide',
+    renameDialogDescription: 'Give this slide a new display name.',
+    slideNamePlaceholder: 'Slide name',
+    moveDialogEyebrow: 'Move',
+    moveDialogTitle: 'Move slide',
+    moveDialogDescriptionPrefix: 'Choose a folder for ',
+    moveDialogDescriptionSuffix: '.',
+    deleteDialogEyebrow: 'Destructive',
+    deleteDialogTitle: 'Delete slide?',
+    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',
+    toastSlideMoved: 'Moved “{slide}” to {folder}',
+    toastSlideMoveFailed: 'Failed to move slide',
+    toastFolderDeleted: 'Deleted folder “{name}”',
+    toastFolderDeleteFailed: 'Failed to delete folder',
+    pickIcon: 'Pick icon',
+  },
+
+  slide: {
+    home: 'Home',
+    backToHome: 'Back to home',
+    download: 'Download',
+    exportAsHtml: 'Export as HTML',
+    exportAsPdf: 'Export as PDF',
+    pdfExportFailed: 'PDF export failed',
+    present: 'Present',
+    slidesTab: 'Slides',
+    assetsTab: 'Assets',
+    renameSlide: 'Rename slide',
+    loadingEyebrow: 'Loading',
+    emptyEyebrow: 'Empty',
+    nothingToShow: 'Nothing to show.',
+    emptyHintPrefix: '',
+    emptyHintMust: ' must ',
+    emptyHintSuffix: ' a non-empty array of components.',
+  },
+
+  presenter: {
+    eyebrow: 'Presenter',
+    notLinked: 'Not linked',
+    nowShowing: 'Now showing',
+    upNext: 'Up next',
+    lastSlide: 'Last slide',
+    endOfDeck: 'End of deck',
+    speakerNotes: 'Speaker notes',
+    noNotesPrefix: 'No speaker notes for this slide. Add ',
+    noNotesSuffix: ' to your slide module to see notes here.',
+    blackScreen: 'Black screen',
+    whiteScreen: 'White screen',
+    prev: 'Prev',
+    next: 'Next',
+    black: 'Black',
+    white: 'White',
+    reset: 'Reset',
+    resetTimer: 'Reset timer',
+    currentTime: 'Current time',
+    elapsed: 'Elapsed',
+    jump: 'Jump',
+    loadingSlide: 'Loading {slideId}…',
+  },
+
+  present: {
+    prevSlideAria: 'Previous slide (←)',
+    nextSlideAria: 'Next slide (→)',
+    overviewAria: 'Slide overview (O)',
+    blackoutAria: 'Black screen (B)',
+    whiteoutAria: 'White screen (W)',
+    laserAria: 'Laser pointer (L)',
+    presenterAria: 'Presenter view (P)',
+    helpAria: 'Keyboard shortcuts (?)',
+    exitAria: 'Exit (Esc)',
+    elapsedTime: 'Elapsed time',
+    helpEyebrow: 'Present mode',
+    helpTitle: 'Keyboard shortcuts',
+    shortcutNext: 'Next slide',
+    shortcutPrev: 'Previous slide',
+    shortcutFirstLast: 'First / last slide',
+    shortcutJump: 'Jump to slide',
+    shortcutOverview: 'Slide overview',
+    shortcutBlack: 'Black screen',
+    shortcutWhite: 'White screen',
+    shortcutLaser: 'Laser pointer',
+    shortcutPresenter: 'Open Presenter View',
+    shortcutToggleHelp: 'Toggle this help',
+    shortcutCloseExit: 'Close overlay / exit',
+    overviewDialogAria: 'Slide overview',
+    overviewEyebrow: 'Overview',
+    overviewGoToAria: 'Go to slide {n}',
+    nowBadge: 'Now',
+  },
+
+  inspector: {
+    inspect: 'Inspect',
+    deselect: 'Deselect',
+    contentSection: 'Content',
+    typographySection: 'Typography',
+    colorSection: 'Color',
+    textColor: 'Text',
+    backgroundColor: 'Background',
+    imageSection: 'Image',
+    imagePlaceholderSection: 'Image placeholder',
+    elementTextPlaceholder: 'Element text',
+    sizeLabel: 'Size',
+    weightLabel: 'Weight',
+    weightLight: 'Light · 300',
+    weightRegular: 'Regular · 400',
+    weightMedium: 'Medium · 500',
+    weightSemibold: 'Semibold · 600',
+    weightBold: 'Bold · 700',
+    weightExtrabold: 'Extrabold · 800',
+    styleLabel: 'Style',
+    boldAria: 'Bold',
+    italicAria: 'Italic',
+    lineHeightLabel: 'Line height',
+    trackingLabel: 'Tracking',
+    alignLabel: 'Align',
+    clearAria: 'Clear',
+    replace: 'Replace…',
+    replaceImageDialogTitle: 'Replace image',
+    replaceImageDescription: 'Pick an asset from {path}.',
+    pickerLoading: 'Loading…',
+    pickerEmpty: "No images in this slide's assets folder yet. Add some from the Assets tab.",
+    placeholderHintLabel: 'Hint:',
+    noteForAgent: 'Note for the agent',
+    noteAgentPlaceholder: 'Describe a change for the agent…',
+    noteShortcutHint: '⌘↵ to send',
+    addNote: 'Add note',
+    unsavedChanges: {
+      one: '{count} unsaved change',
+      other: '{count} unsaved changes',
+    },
+    commentsCount: {
+      one: '{count} comment',
+      other: '{count} comments',
+    },
+    commentLineLabel: 'line {n}',
+    commentsEmpty: 'No comments yet. Toggle Inspect and click a slide element.',
+    commentsApplyHintPrefix: 'Run ',
+    commentsApplyHintSuffix: ' in your agent to apply these.',
+    commentDeleteAria: 'Delete',
+    saveFailed: "Couldn't save:",
+  },
+
+  stylePanel: {
+    designTokens: 'Design tokens',
+    draftBadge: 'draft',
+    unsavedTitle: 'Unsaved',
+    closePanelAria: 'Close design panel',
+    colorsSection: 'Colors',
+    typographySection: 'Typography',
+    shapeSection: 'Shape',
+    backgroundLabel: 'Background',
+    textLabel: 'Text',
+    accentLabel: 'Accent',
+    displayFontLabel: 'Display',
+    bodyFontLabel: 'Body',
+    heroLabel: 'Hero',
+    bodyLabel: 'Body',
+    radiusLabel: 'Radius',
+    designToggle: 'Design',
+    designToggleTitle: 'Design tokens',
+    fontPresetCustom: 'Custom…',
+  },
+
+  asset: {
+    devOnlyMessage: 'Asset management is only available in dev mode.',
+    sectionAria: 'Slide assets',
+    eyebrow: 'Assets',
+    fileCount: { one: '{count} file', other: '{count} files' },
+    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 this slide's assets folder.",
+    conflictReplace: 'Replace',
+    conflictRenameCopy: 'Rename copy',
+    deleteAssetTitle: 'Delete asset',
+    deleteAssetDescription: 'Delete {name}? Imports referencing this file in the slide will break.',
+    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',
+  },
+
+  thumbnailRail: {
+    pages: 'Pages',
+    goToPageAria: 'Go to page {n}',
+  },
+
+  pdfToast: {
+    title: 'Exporting PDF',
+    processing: 'Processing page {current} of {total}',
+    printing: 'Opening print dialog…',
+    done: 'Done',
+  },
+
+  themeToggle: {
+    toggleAria: 'Toggle theme',
+    title: 'Theme',
+    light: 'Light',
+    dark: 'Dark',
+    system: 'System',
+  },
+
+  clickNav: {
+    prevAria: 'Previous page',
+    nextAria: 'Next page',
+  },
+};

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';