pptx-svelte-viewer 0.1.0

package/dist/i18n.d.ts

@@ -0,0 +1,62 @@
+/** Build a {@link Translator} bound to a (lazily-read) locale. */
+export declare function createTranslator(getLocale: () => string): Translator;
+
+/** Interpolate `{{name}}` placeholders (the shared-dictionary convention). */
+export declare function interpolate(message: string, params: Record<string, string | number> | undefined): string;
+
+/**
+ * Convert a dotted translation key to a human-readable label when no
+ * explicit dictionary entry exists yet. Takes the last segment and converts
+ * camelCase to Title Case, e.g. "pptx.slideSorter.zoomIn" -> "Zoom In".
+ */
+export declare function keyToLabel(key: string): string;
+
+/**
+ * Register (or extend) the dictionary for a locale. Later registrations are
+ * merged over earlier ones, so hosts can override individual keys.
+ */
+export declare function registerTranslations(locale: string, dictionary: TranslationDictionary): void;
+
+/**
+ * Translate a key for a locale: exact locale dictionary, then its base
+ * language (`fr-CA` falls back to `fr`), then English, then the humanised
+ * `keyToLabel` fallback so missing keys never render as raw dotted paths.
+ */
+export declare function translate(locale: string, key: string, params?: Record<string, string | number>): string;
+
+/**
+ * Minimal, dependency-free translation layer for the Svelte binding.
+ *
+ * The canonical English dictionary lives in `pptx-viewer-shared/i18n` (shared
+ * with the React, Vue, and Angular bindings, which each plug it into their
+ * framework's i18n library). Svelte has no blessed i18n runtime, so this
+ * module implements the small subset the viewer needs: dictionary lookup by
+ * locale with English fallback, `{{name}}` interpolation, and the shared
+ * `keyToLabel` humanised fallback for missing keys.
+ */
+/** A flat dictionary of dotted `pptx.*` keys to display strings. */
+export declare type TranslationDictionary = Record<string, string>;
+
+/**
+ * Every key in the English dictionary. A new locale dictionary typed as
+ * `Record<TranslationKey, string>` gets a compile error for any key it's
+ * missing or misspells, so translation contributions stay complete without a
+ * separate parity test.
+ */
+export declare type TranslationKey = keyof typeof translationsEn;
+
+/**
+ * The canonical English UI-string dictionary for pptx-viewer. None of the
+ * React/Vue/Angular binding packages ship translations themselves - each
+ * only calls its framework's translation function (react-i18next's `t()`,
+ * vue-i18n's `t()`, ngx-translate's `TranslateService`/`translate` pipe)
+ * against dotted `pptx.*` keys. The host app supplies the dictionary; this
+ * module is that dictionary for the demos, shared so all three stay in sync
+ * instead of drifting into three separate copies.
+ */
+export declare const translationsEn: Record<string, string>;
+
+/** Translate `key`, interpolating `{{name}}` placeholders from `params`. */
+export declare type Translator = (key: string, params?: Record<string, string | number>) => string;
+
+export { }

package/dist/i18n.js

@@ -0,0 +1,9 @@
+import { a as r, i as s, n as t, o as e, r as n, t as o } from "./translator-C44zS1dl.js";
+export {
+  o as createTranslator,
+  t as interpolate,
+  r as keyToLabel,
+  n as registerTranslations,
+  s as translate,
+  e as translationsEn
+};

package/dist/index.d.ts

@@ -0,0 +1,209 @@
+import { Component } from 'svelte';
+
+/**
+ * Framework-agnostic public types shared by the viewer bindings.
+ *
+ * These were duplicated in the React (`types-ui.ts`) and Vue (`viewer/types.ts`)
+ * packages; this is the canonical copy. Each binding layers its own
+ * framework-specific prop/event/handle types on top of these.
+ */
+
+/** Canvas dimensions in pixels. */
+export declare interface CanvasSize {
+    width: number;
+    height: number;
+}
+
+/**
+ * Build the complete set of CSS custom properties with all defaults.
+ * Useful for generating a full fallback stylesheet.
+ */
+export declare function defaultCssVars(): Record<string, string>;
+
+/** Default border-radius. */
+export declare const defaultRadius = "0.5rem";
+
+/**
+ * Default dark-theme color values.
+ *
+ * These correspond to the built-in dark UI of the PowerPoint viewer and
+ * use Tailwind's gray palette as the neutral scale with indigo as the
+ * primary accent.
+ */
+export declare const defaultThemeColors: ViewerThemeColors;
+
+/**
+ * Explicitly-typed public export of the viewer component.
+ *
+ * `svelte-check` types the `.svelte` import precisely, but the plain
+ * TypeScript pass that emits the published declaration files resolves
+ * `.svelte` modules through a loose ambient shim (`src/shims-svelte.d.ts`).
+ * Re-exporting through this annotated constant keeps the published `.d.ts`
+ * fully typed regardless of which compiler produced it.
+ */
+export declare const PowerPointViewer: Component<PowerPointViewerProps>;
+
+/** Props for `<PowerPointViewer>`. */
+export declare interface PowerPointViewerProps {
+    /** PowerPoint content as `Uint8Array` (or `ArrayBuffer`). */
+    source: Uint8Array | ArrayBuffer | null | undefined;
+    /**
+     * Theme configuration for customising the viewer's appearance. Accepts
+     * partial color overrides, a custom border-radius, and arbitrary CSS
+     * custom properties. Unset values fall back to the built-in defaults.
+     */
+    theme?: ViewerTheme;
+    /** UI locale (BCP 47). English ships built in; register others via `pptx-svelte-viewer/i18n`. */
+    locale?: string;
+    /** Slide shown after load (0-based, clamped). Default 0. */
+    initialSlide?: number;
+    /** Show the thumbnail sidebar. Default true. */
+    showThumbnails?: boolean;
+    /** Show the navigation/zoom toolbar. Default true. */
+    showToolbar?: boolean;
+    /** Optional class name applied to the root element. */
+    class?: string;
+    /** Fired after a presentation finishes loading. */
+    onload?: (detail: ViewerLoadDetail) => void;
+    /** Fired when a load fails (message is human-readable). */
+    onerror?: (message: string) => void;
+    /** Fired when the active slide changes (0-based index). */
+    onslidechange?: (index: number) => void;
+}
+
+/**
+ * Register (or extend) the dictionary for a locale. Later registrations are
+ * merged over earlier ones, so hosts can override individual keys.
+ */
+export declare function registerTranslations(locale: string, dictionary: TranslationDictionary): void;
+
+/**
+ * Convert a `ViewerTheme` into a flat `Record<string, string>` of CSS
+ * custom properties (including the `--` prefix) ready to be spread onto
+ * a `style` attribute.
+ *
+ * Only properties that differ from the built-in defaults are emitted when
+ * `omitDefaults` is true (the default).
+ */
+export declare function themeToCssVars(theme: ViewerTheme | undefined, omitDefaults?: boolean): Record<string, string>;
+
+/**
+ * Minimal, dependency-free translation layer for the Svelte binding.
+ *
+ * The canonical English dictionary lives in `pptx-viewer-shared/i18n` (shared
+ * with the React, Vue, and Angular bindings, which each plug it into their
+ * framework's i18n library). Svelte has no blessed i18n runtime, so this
+ * module implements the small subset the viewer needs: dictionary lookup by
+ * locale with English fallback, `{{name}}` interpolation, and the shared
+ * `keyToLabel` humanised fallback for missing keys.
+ */
+/** A flat dictionary of dotted `pptx.*` keys to display strings. */
+export declare type TranslationDictionary = Record<string, string>;
+
+/** Translate `key`, interpolating `{{name}}` placeholders from `params`. */
+export declare type Translator = (key: string, params?: Record<string, string | number>) => string;
+
+/** Dark "presenter" palette: the presenter room with the lights down. */
+export declare const vermilionDarkColors: ViewerThemeColors;
+
+/** Dark vermilion theme, ready for the viewer's `theme` prop. */
+export declare const vermilionDarkTheme: ViewerTheme;
+
+/** Light "paper" palette: a projection screen in a bright room. */
+export declare const vermilionLightColors: ViewerThemeColors;
+
+/** Light vermilion theme, ready for the viewer's `theme` prop. */
+export declare const vermilionLightTheme: ViewerTheme;
+
+/** Shared border-radius for the vermilion presets (slightly sharper than the default). */
+export declare const vermilionRadius = "0.375rem";
+
+/** Payload for the `onload` callback. */
+export declare interface ViewerLoadDetail {
+    /** Number of slides in the loaded presentation. */
+    slideCount: number;
+    /** Slide canvas size in pixels. */
+    canvasSize: CanvasSize;
+}
+
+/**
+ * Full viewer theme configuration.
+ *
+ * Every property is optional — unset values fall back to the built-in
+ * dark theme defaults.
+ */
+export declare interface ViewerTheme {
+    /** Semantic UI colors. Each key maps to a `--pptx-<key>` CSS custom property. */
+    colors?: Partial<ViewerThemeColors>;
+    /** Base border-radius value (e.g. `"0.5rem"`, `"8px"`). */
+    radius?: string;
+    /**
+     * Escape hatch: arbitrary CSS custom properties to set on the viewer
+     * root element. Keys should include the `--` prefix.
+     *
+     * @example
+     * ```ts
+     * { "--my-custom-shadow": "0 4px 12px rgba(0,0,0,0.5)" }
+     * ```
+     */
+    cssVars?: Record<string, string>;
+}
+
+/**
+ * Theme configuration types for the PowerPoint viewer.
+ *
+ * All color values accept any valid CSS color string:
+ * hex (`#6366f1`), rgb (`rgb(99 102 241)`), hsl (`hsl(239 84% 67%)`),
+ * oklch (`oklch(0.585 0.233 277)`), named colors, etc.
+ *
+ * Framework-agnostic — shared by the React, Vue, and Angular bindings.
+ */
+/**
+ * Semantic color tokens for the viewer UI.
+ *
+ * These map to CSS custom properties (`--pptx-<token>`) and drive all
+ * UI component colors. The naming follows the shadcn/ui convention so
+ * that Tailwind + shadcn users get a familiar experience.
+ */
+export declare interface ViewerThemeColors {
+    /** Page / root background */
+    background: string;
+    /** Default text color */
+    foreground: string;
+    /** Card / panel surface */
+    card: string;
+    /** Text on card surfaces */
+    cardForeground: string;
+    /** Popover / dropdown surface */
+    popover: string;
+    /** Text inside popovers */
+    popoverForeground: string;
+    /** Primary action color (buttons, active indicators) */
+    primary: string;
+    /** Text on primary-colored backgrounds */
+    primaryForeground: string;
+    /** Secondary / subdued action color */
+    secondary: string;
+    /** Text on secondary backgrounds */
+    secondaryForeground: string;
+    /** Muted / disabled surface */
+    muted: string;
+    /** Text on muted surfaces (also used for secondary text) */
+    mutedForeground: string;
+    /** Accent / hover-highlight surface */
+    accent: string;
+    /** Text on accent surfaces */
+    accentForeground: string;
+    /** Destructive / danger action color */
+    destructive: string;
+    /** Text on destructive backgrounds */
+    destructiveForeground: string;
+    /** Default border color */
+    border: string;
+    /** Input field border color */
+    input: string;
+    /** Focus ring color */
+    ring: string;
+}
+
+export { }

package/dist/index.js

@@ -0,0 +1,16 @@
+import { _ as r, d as a, f as e, g as i, h as o, l as m, m as t, p as l, t as n, u as h } from "./component-CacEu31z.js";
+import { r as f } from "./translator-C44zS1dl.js";
+import "./i18n.js";
+export {
+  n as PowerPointViewer,
+  m as defaultCssVars,
+  h as defaultRadius,
+  a as defaultThemeColors,
+  f as registerTranslations,
+  e as themeToCssVars,
+  l as vermilionDarkColors,
+  t as vermilionDarkTheme,
+  o as vermilionLightColors,
+  i as vermilionLightTheme,
+  r as vermilionRadius
+};