@open-slide/core 1.0.4 → 1.0.6

package/src/app/components/style-panel/style-panel.tsx

@@ -2,6 +2,7 @@ import { Palette, X } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import { Field, NumberField, Section } from '@/components/panel/panel-fields';
 import { PanelShell, usePanelMount } from '@/components/panel/panel-shell';
+import { useLocale } from '@/lib/use-locale';
 import { Button } from '../ui/button';
 import { Input } from '../ui/input';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select';
@@ -29,6 +30,7 @@ type DesignPanelProps = {
 export function DesignPanel({ open, onClose }: DesignPanelProps) {
   const { draft, exists, warning, loaded, dirty, update } = useDesignPanelState();
   const { mounted, animVisible } = usePanelMount(open);
+  const t = useLocale();
 
   if (!loaded) return null;
   if (!mounted) return null;
@@ -43,15 +45,19 @@ export function DesignPanel({ open, onClose }: DesignPanelProps) {
           <div className="flex min-w-0 items-center gap-2">
             <Palette className="size-3.5 text-muted-foreground" />
             <span className="font-heading text-[12px] font-semibold tracking-tight">
-              Design tokens
+              {t.stylePanel.designTokens}
             </span>
             {!exists && (
               <span className="rounded-[3px] border border-hairline bg-muted/60 px-1.5 py-px font-mono text-[9.5px] uppercase tracking-[0.08em] text-muted-foreground">
-                draft
+                {t.stylePanel.draftBadge}
               </span>
             )}
             {dirty && (
-              <span className="size-1.5 rounded-full bg-brand" title="Unsaved" aria-hidden />
+              <span
+                className="size-1.5 rounded-full bg-brand"
+                title={t.stylePanel.unsavedTitle}
+                aria-hidden
+              />
             )}
           </div>
           <Button
@@ -59,7 +65,7 @@ export function DesignPanel({ open, onClose }: DesignPanelProps) {
             size="icon-sm"
             className="text-muted-foreground hover:text-foreground"
             onClick={onClose}
-            aria-label="Close design panel"
+            aria-label={t.stylePanel.closePanelAria}
           >
             <X className="size-3.5" />
           </Button>
@@ -74,9 +80,9 @@ export function DesignPanel({ open, onClose }: DesignPanelProps) {
         )
       }
     >
-      <Section title="Colors">
+      <Section title={t.stylePanel.colorsSection}>
         <ColorField
-          label="Background"
+          label={t.stylePanel.backgroundLabel}
           value={draft.palette.bg}
           onChange={(v) =>
             update((d) => {
@@ -85,7 +91,7 @@ export function DesignPanel({ open, onClose }: DesignPanelProps) {
           }
         />
         <ColorField
-          label="Text"
+          label={t.stylePanel.textLabel}
           value={draft.palette.text}
           onChange={(v) =>
             update((d) => {
@@ -94,7 +100,7 @@ export function DesignPanel({ open, onClose }: DesignPanelProps) {
           }
         />
         <ColorField
-          label="Accent"
+          label={t.stylePanel.accentLabel}
           value={draft.palette.accent}
           onChange={(v) =>
             update((d) => {
@@ -106,9 +112,9 @@ export function DesignPanel({ open, onClose }: DesignPanelProps) {
 
       <Separator />
 
-      <Section title="Typography">
+      <Section title={t.stylePanel.typographySection}>
         <FontField
-          label="Display"
+          label={t.stylePanel.displayFontLabel}
           value={draft.fonts.display}
           onChange={(v) =>
             update((d) => {
@@ -117,7 +123,7 @@ export function DesignPanel({ open, onClose }: DesignPanelProps) {
           }
         />
         <FontField
-          label="Body"
+          label={t.stylePanel.bodyFontLabel}
           value={draft.fonts.body}
           onChange={(v) =>
             update((d) => {
@@ -126,7 +132,7 @@ export function DesignPanel({ open, onClose }: DesignPanelProps) {
           }
         />
         <SliderField
-          label="Hero"
+          label={t.stylePanel.heroLabel}
           value={draft.typeScale.hero}
           min={48}
           max={240}
@@ -139,7 +145,7 @@ export function DesignPanel({ open, onClose }: DesignPanelProps) {
           }
         />
         <SliderField
-          label="Body"
+          label={t.stylePanel.bodyLabel}
           value={draft.typeScale.body}
           min={16}
           max={72}
@@ -155,9 +161,9 @@ export function DesignPanel({ open, onClose }: DesignPanelProps) {
 
       <Separator />
 
-      <Section title="Shape">
+      <Section title={t.stylePanel.shapeSection}>
         <SliderField
-          label="Radius"
+          label={t.stylePanel.radiusLabel}
           value={draft.radius}
           min={0}
           max={80}
@@ -181,6 +187,7 @@ export function DesignToggleButton({
   active: boolean;
   onToggle: () => void;
 }) {
+  const t = useLocale();
   if (import.meta.env.PROD) return null;
   return (
     <Button
@@ -188,10 +195,10 @@ export function DesignToggleButton({
       variant={active ? 'default' : 'ghost'}
       onClick={onToggle}
       data-design-ui
-      title="Design tokens"
+      title={t.stylePanel.designToggleTitle}
     >
       <Palette className="size-3.5" />
-      <span className="hidden md:inline">Design</span>
+      <span className="hidden md:inline">{t.stylePanel.designToggle}</span>
     </Button>
   );
 }
@@ -247,6 +254,7 @@ function FontField({
   onChange: (v: string) => void;
 }) {
   const matched = FONT_PRESETS.find((p) => p.value === value);
+  const tFont = useLocale();
   return (
     <Field label={label}>
       <Select
@@ -266,7 +274,7 @@ function FontField({
           ))}
           {!matched && (
             <SelectItem value="__custom__" className="text-xs">
-              Custom…
+              {tFont.stylePanel.fontPresetCustom}
             </SelectItem>
           )}
         </SelectContent>

package/src/app/components/theme-toggle.tsx

@@ -8,11 +8,13 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
+import { useLocale } from '@/lib/use-locale';
 import { cn } from '@/lib/utils';
 
 export function ThemeToggle() {
   const { theme, setTheme } = useTheme();
   const [mounted, setMounted] = useState(false);
+  const t = useLocale();
 
   useEffect(() => {
     setMounted(true);
@@ -22,8 +24,8 @@ export function ThemeToggle() {
     <DropdownMenu>
       <DropdownMenuTrigger
         type="button"
-        aria-label="Toggle theme"
-        title="Theme"
+        aria-label={t.themeToggle.toggleAria}
+        title={t.themeToggle.title}
         className={cn(buttonVariants({ variant: 'ghost', size: 'icon-sm' }), 'relative')}
       >
         <Sun className="size-3.5 scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
@@ -35,21 +37,21 @@ export function ThemeToggle() {
           data-active={mounted && theme === 'light'}
         >
           <Sun />
-          Light
+          {t.themeToggle.light}
         </DropdownMenuItem>
         <DropdownMenuItem
           onSelect={() => setTheme('dark')}
           data-active={mounted && theme === 'dark'}
         >
           <Moon />
-          Dark
+          {t.themeToggle.dark}
         </DropdownMenuItem>
         <DropdownMenuItem
           onSelect={() => setTheme('system')}
           data-active={mounted && theme === 'system'}
         >
           <Monitor />
-          System
+          {t.themeToggle.system}
         </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>

package/src/app/components/thumbnail-rail.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useRef } from 'react';
 import { ScrollArea } from '@/components/ui/scroll-area';
+import { format, useLocale } from '@/lib/use-locale';
 import { cn } from '@/lib/utils';
 import type { DesignSystem } from '../lib/design';
 import type { Page } from '../lib/sdk';
@@ -27,6 +28,7 @@ export function ThumbnailRail({
   orientation = 'vertical',
 }: Props) {
   const activeRef = useRef<HTMLButtonElement | null>(null);
+  const t = useLocale();
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: `current` triggers re-scroll on selection change
   useEffect(() => {
@@ -55,7 +57,7 @@ export function ThumbnailRail({
                   type="button"
                   ref={active ? activeRef : undefined}
                   onClick={() => onSelect(i)}
-                  aria-label={`Go to page ${i + 1}`}
+                  aria-label={format(t.thumbnailRail.goToPageAria, { n: i + 1 })}
                   aria-current={active ? 'true' : undefined}
                   className={cn('group/thumb relative flex shrink-0 flex-col items-center gap-1.5')}
                 >
@@ -95,7 +97,7 @@ export function ThumbnailRail({
     <ScrollArea className="h-full border-r border-hairline bg-sidebar">
       <aside className="flex flex-col gap-2 px-3 py-3">
         <div className="flex items-baseline justify-between px-1 pb-1">
-          <span className="eyebrow">Pages</span>
+          <span className="eyebrow">{t.thumbnailRail.pages}</span>
           <span className="folio">{pages.length.toString().padStart(2, '0')}</span>
         </div>
         {pages.map((PageComp, i) => {

package/src/app/lib/export-html.ts

@@ -1,8 +1,3 @@
-// Exports a slide as a standalone HTML file (or a .zip bundle if the slide
-// references bundled assets). The export is a static snapshot of each page's
-// post-mount DOM — runtime interactivity (useState click handlers, timers,
-// etc.) is captured at snapshot time only.
-
 import { createElement } from 'react';
 import { createRoot } from 'react-dom/client';
 import { designToCssVars } from './design';
@@ -39,9 +34,7 @@ export async function exportSlideAsHtml(slide: SlideModule, slideId: string): Pr
       const buf = new Uint8Array(await res.arrayBuffer());
       const name = uniqueAssetName(absolute, usedNames);
       assets.set(url, { name, bytes: buf });
-    } catch {
-      // ignore unreachable assets
-    }
+    } catch {}
   }
 
   const rewrittenPages = pagesHtml.map((html) => rewriteUrls(html, assets, 'html'));
@@ -175,7 +168,6 @@ function looksLikeAsset(url: string): boolean {
   if (url.startsWith('mailto:') || url.startsWith('javascript:')) return false;
   const abs = toAbsolute(url);
   if (!abs) return false;
-  // Same-origin only: we can only fetch local assets.
   try {
     const u = new URL(abs);
     if (u.origin !== window.location.origin) return false;

package/src/app/lib/export-pdf.ts

@@ -1,8 +1,3 @@
-// Exports a slide as a PDF via the browser's native print engine.
-// Each page in `slide.default` becomes one PDF page at 1920×1080.
-// Text stays selectable and inline SVG remains vector — `window.print()`
-// preserves both. The user picks "Save as PDF" in the print dialog.
-
 import { createElement } from 'react';
 import { createRoot, type Root } from 'react-dom/client';
 import { designToCssVars } from './design';

package/src/app/lib/inspector/use-editor.ts

@@ -2,12 +2,14 @@ import { useCallback } from 'react';
 
 export type EditOp =
   | { kind: 'set-style'; key: string; value: string | null }
-  | { kind: 'set-text'; value: string }
+  | { kind: 'set-text'; value: string; prevText?: string }
   | { kind: 'set-attr-asset'; attr: string; assetPath: string; previewUrl: string }
   | { kind: 'replace-placeholder-with-image'; assetPath: string };
 
 export type Edit = { line: number; column: number; ops: EditOp[] };
 
+export type EditResult = { ok: boolean; error?: string };
+
 export class NoOpEditError extends Error {
   constructor() {
     super(
@@ -37,9 +39,11 @@ export function useEditor(slideId: string) {
   );
 
   // Batch many element edits into one file write and one HMR tick.
+  // Returns one result per input edit so callers can keep failed
+  // edits buffered while clearing the ones that landed.
   const applyEdits = useCallback(
-    async (edits: Edit[]) => {
-      if (edits.length === 0) return;
+    async (edits: Edit[]): Promise<EditResult[]> => {
+      if (edits.length === 0) return [];
       const res = await fetch('/__edit/batch', {
         method: 'POST',
         headers: { 'content-type': 'application/json' },
@@ -47,14 +51,12 @@ export function useEditor(slideId: string) {
       });
       const body = (await res.json().catch(() => ({}))) as {
         error?: string;
-        changed?: boolean;
-        results?: Array<{ ok: boolean; error?: string }>;
+        results?: EditResult[];
       };
       if (!res.ok) {
         throw new Error(body.error ?? `POST /__edit/batch → ${res.status}`);
       }
-      const failed = body.results?.find((r) => !r.ok);
-      if (failed?.error) throw new Error(failed.error);
+      return body.results ?? [];
     },
     [slideId],
   );

package/src/app/lib/print-ready.ts

@@ -1,6 +1,3 @@
-// Helpers used by the PDF export flow to wait for the page to settle before
-// invoking window.print(). Browser-only — no Node / headless dependency.
-
 const DEFAULT_WAITFOR_TIMEOUT_MS = 10_000;
 
 export async function waitForFonts(): Promise<void> {
@@ -38,7 +35,6 @@ export async function waitForDataWaitfor(
   );
 }
 
-/** Returns true if `frame` has no running finite-iteration animations. */
 export function isFrameAnimationSettled(frame: Element): boolean {
   if (typeof document.getAnimations !== 'function') return true;
   for (const anim of document.getAnimations()) {

package/src/app/lib/sdk.ts

@@ -11,8 +11,7 @@ export type SlideModule = {
   default: Page[];
   meta?: SlideMeta;
   design?: DesignSystem;
-  // Index-aligned with `default`. Each entry is the speaker note for the
-  // page at the same position. Used by Presenter View only.
+  // Index-aligned with `default`.
   notes?: (string | undefined)[];
 };
 

package/src/app/lib/use-locale.ts

@@ -0,0 +1,20 @@
+import config from 'virtual:open-slide/config';
+import { en } from '../../locale/en';
+import type { Locale, Plural } from '../../locale/types';
+
+const resolved: Locale = (config.locale as Locale | undefined) ?? en;
+
+export function useLocale(): Locale {
+  return resolved;
+}
+
+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;
+}