@usetheo/ui 0.1.0-next.0 → 0.1.0-next.1

package/dist/slide-deck/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/composites/slide-deck/transitions.css"],"sourcesContent":["/*\n * Slide deck transitions (ADR D8).\n *\n * Three presets via the `data-theo-slide-deck-transition` attribute on the\n * deck root: \"none\" | \"fade\" | \"slide\".\n *\n * Active transition direction is signaled via `data-theo-slide-deck-direction`\n * (\"none\" | \"next\" | \"prev\"). CSS animations are 250ms, GPU-accelerated.\n *\n * Respects `prefers-reduced-motion: reduce` — all durations collapse to 0ms,\n * effectively becoming \"none\" regardless of the prop.\n */\n\n.theo-slide-deck-slide-frame {\n  --theo-slide-deck-transition-duration: 250ms;\n  position: absolute;\n  inset: 0;\n}\n\n/* fade preset */\n.theo-slide-deck-slide-frame[data-theo-slide-deck-transition=\"fade\"]\n  > [data-theo-slide-deck-slide-state=\"incoming\"] {\n  animation: theo-slide-deck-fade-in var(--theo-slide-deck-transition-duration) ease-out;\n}\n\n@keyframes theo-slide-deck-fade-in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n/* slide preset */\n.theo-slide-deck-slide-frame[data-theo-slide-deck-transition=\"slide\"][data-theo-slide-deck-direction=\"next\"]\n  > [data-theo-slide-deck-slide-state=\"incoming\"] {\n  animation: theo-slide-deck-slide-in-right var(--theo-slide-deck-transition-duration) ease-out;\n}\n\n.theo-slide-deck-slide-frame[data-theo-slide-deck-transition=\"slide\"][data-theo-slide-deck-direction=\"prev\"]\n  > [data-theo-slide-deck-slide-state=\"incoming\"] {\n  animation: theo-slide-deck-slide-in-left var(--theo-slide-deck-transition-duration) ease-out;\n}\n\n@keyframes theo-slide-deck-slide-in-right {\n  from {\n    transform: translateX(30%);\n    opacity: 0;\n  }\n  to {\n    transform: translateX(0);\n    opacity: 1;\n  }\n}\n\n@keyframes theo-slide-deck-slide-in-left {\n  from {\n    transform: translateX(-30%);\n    opacity: 0;\n  }\n  to {\n    transform: translateX(0);\n    opacity: 1;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .theo-slide-deck-slide-frame,\n  .theo-slide-deck-slide-frame * {\n    animation-duration: 0ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0ms !important;\n  }\n}\n"],"mappings":";AAaA,CAAC;AACC,yCAAuC;AACvC,YAAU;AACV,SAAO;AACT;AAGA,CAPC,2BAO2B,CAAC,sCAC3B,EAAE,CAAC;AACH,aAAW,wBAAwB,IAAI,uCAAuC;AAChF;AAEA,WAHa;AAIX;AACE,aAAS;AACX;AACA;AACE,aAAS;AACX;AACF;AAGA,CAtBC,2BAsB2B,CAAC,sCAAwC,CAAC,qCACpE,EAAE,CAAC;AACH,aAAW,+BAA+B,IAAI,uCAAuC;AACvF;AAEA,CA3BC,2BA2B2B,CAAC,sCAAwC,CAAC,qCACpE,EAAE,CAAC;AACH,aAAW,8BAA8B,IAAI,uCAAuC;AACtF;AAEA,WARa;AASX;AACE,eAAW,WAAW;AACtB,aAAS;AACX;AACA;AACE,eAAW,WAAW;AACtB,aAAS;AACX;AACF;AAEA,WAda;AAeX;AACE,eAAW,WAAW;AACtB,aAAS;AACX;AACA;AACE,eAAW,WAAW;AACtB,aAAS;AACX;AACF;AAEA,QAAO,wBAAyB;AAC9B,GAvDD;AAAA,EAwDC,CAxDD,4BAwD8B;AAC3B,wBAAoB;AACpB,+BAA2B;AAC3B,yBAAqB;AACvB;AACF;","names":[]}

package/dist/slide-deck/index.d.ts

@@ -0,0 +1,377 @@
+import * as react from 'react';
+import { FC, ReactNode, Dispatch, RefObject } from 'react';
+import { a as SlidePlugin } from '../plugin-Atb0VKtr.js';
+import { z } from 'zod';
+import 'hast';
+import 'mdast';
+
+/**
+ * `<SlideDeck.Controls>` — prev/next buttons + slide indicator ("3 / 12").
+ */
+
+interface ControlsProps {
+    className?: string;
+}
+declare const Controls: FC<ControlsProps>;
+
+/**
+ * `<SlideDeck.PresenterView>` — inline split-screen panel.
+ *
+ * Pragmatic v0.4 scope: renders an in-page panel (current slide + next slide +
+ * speaker notes + timer) when `state.presenterMode === true`. The separate
+ * window via `window.open` + `BroadcastChannel` is deferred to v0.5 (consumer
+ * demand will trigger the upgrade — D6 of the plan is reduced to inline panel).
+ *
+ * Toggling presenter mode is dispatched via hotkey (n/N/p/P, see useDeckKeyboard).
+ */
+
+interface PresenterViewProps {
+    className?: string;
+}
+declare const PresenterView: FC<PresenterViewProps>;
+
+/**
+ * `<SlideDeck.ProgressBar>` — horizontal HTML5 progress element.
+ */
+
+interface ProgressBarProps {
+    className?: string;
+}
+declare const ProgressBar: FC<ProgressBarProps>;
+
+/**
+ * Zod schema for `<SlideDeck>` input.
+ *
+ * Two shapes accepted (ADR D4):
+ *   - `string` — full markdown, split internally by `splitDeck` (top-level
+ *     `thematicBreak`, see ADR D3 / D12 of Slide).
+ *   - `SlideDeckSlide[]` — pre-parsed array (CMS/DB consumers).
+ *
+ * See `.claude/knowledge-base/plans/slide-deck-composite-plan.md` §16.3.
+ */
+
+declare const slideDeckSlide: z.ZodObject<{
+    markdown: z.ZodString;
+    id: z.ZodOptional<z.ZodString>;
+    notes: z.ZodOptional<z.ZodString>;
+}, z.core.$strip>;
+/** Composed input — `slides` prop accepts either form. */
+declare const slideDeckInput: z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodObject<{
+    markdown: z.ZodString;
+    id: z.ZodOptional<z.ZodString>;
+    notes: z.ZodOptional<z.ZodString>;
+}, z.core.$strip>>]>;
+type SlideDeckSlide = z.infer<typeof slideDeckSlide>;
+type SlideDeckInput = z.infer<typeof slideDeckInput>;
+/** Transition presets. ADR D8. */
+declare const slideDeckTransition: z.ZodEnum<{
+    slide: "slide";
+    none: "none";
+    fade: "fade";
+}>;
+type SlideDeckTransition = z.infer<typeof slideDeckTransition>;
+
+/**
+ * `<SlideDeck.SlideNumber>` — decorative "N / Total" overlay.
+ *
+ * aria-hidden because the live indicator in <Controls> already announces the
+ * current position; this is purely visual chrome.
+ */
+
+interface SlideNumberProps {
+    className?: string;
+}
+declare const SlideNumber: FC<SlideNumberProps>;
+
+/**
+ * `<SlideDeck.Thumbnails>` — sidebar with mini Slide instances.
+ *
+ * Performance strategy:
+ *   - Each thumbnail renders the actual `<Slide>` inside a scaled wrapper (~0.18×).
+ *   - IntersectionObserver lazy-loads thumbnails — off-screen ones show a
+ *     placeholder skeleton instead of parsing the markdown.
+ *   - EC-13: when IntersectionObserver is undefined (legacy env / SSR), falls
+ *     back to eager render. Acceptable for decks ≤ 50 slides.
+ *
+ * Click handler dispatches JUMP_TO. Auto-scroll keeps current thumbnail visible.
+ */
+
+interface ThumbnailsProps {
+    className?: string;
+    /** Scale of each thumbnail. Default 0.18. */
+    scale?: number;
+}
+declare const Thumbnails: FC<ThumbnailsProps>;
+
+interface SlideDeckProps {
+    /** Markdown string (auto-split) or pre-parsed slide array. */
+    slides: SlideDeckInput;
+    /** Initial slide index (0-based). Default 0. */
+    initialIndex?: number;
+    /** Transition preset. Default "fade". */
+    transition?: SlideDeckTransition;
+    /** Enable keyboard navigation. Default true. */
+    enableKeyboard?: boolean;
+    /** Enable touch/pointer swipe navigation. Default true. */
+    enableTouch?: boolean;
+    /** Enable hash routing (#/N). Default true. */
+    enableHashRouting?: boolean;
+    /** Optional unique deck id (auto-generated UUID if absent). */
+    deckId?: string;
+    /** Called after each navigation. */
+    onIndexChange?: (index: number, slide: SlideDeckSlide | undefined) => void;
+    /** Headless mode: render custom chrome using `<SlideDeck.X>` sub-components. */
+    children?: ReactNode;
+    /** Outer className for the deck root. */
+    className?: string;
+    /** Accessible label for the deck region. Defaults to "Slide deck". */
+    "aria-label"?: string;
+    /**
+     * Rich-content plugins relayed to every inner `<Slide>` (D15 / RFC 0004).
+     * Pass MEMOIZED arrays to avoid re-parses on every render.
+     */
+    plugins?: SlidePlugin[];
+}
+type SlideDeckComponent = FC<SlideDeckProps> & {
+    Slides: FC<{
+        className?: string;
+    }>;
+    Controls: typeof Controls;
+    ProgressBar: typeof ProgressBar;
+    SlideNumber: typeof SlideNumber;
+    Thumbnails: typeof Thumbnails;
+    PresenterView: typeof PresenterView;
+    PresenterButton: FC<{
+        className?: string;
+    }>;
+    FullscreenButton: FC<{
+        className?: string;
+    }>;
+    PrintButton: FC<{
+        className?: string;
+    }>;
+};
+declare const SlideDeck: SlideDeckComponent;
+
+declare function splitDeck(markdown: string): Promise<SlideDeckSlide[]>;
+
+/**
+ * Speaker notes extractor (ADR D11).
+ *
+ * Sintaxe: HTML comments `<!-- notes: ... -->` ou `<!-- note: ... -->`.
+ * Aceita ambos singular e plural. Texto interno é plain (sem markdown nesting
+ * em v0.4 — pode vir em v0.5).
+ *
+ * Returns the body with comments removed and the aggregated notes string.
+ */
+interface ExtractNotesResult {
+    body: string;
+    notes: string | undefined;
+}
+declare function extractNotes(md: string): ExtractNotesResult;
+
+/**
+ * Progressive fragments detector (ADR D12).
+ *
+ * Marpit convention: lists with `*` (asterisco) marker — instead of `-` or `+`
+ * — become fragment-revealed lists. Each item is a step.
+ *
+ * Implementation: regex pre-pass on raw markdown counts top-of-line `* ` markers.
+ * Decision (EC-9): mixed `*` and `-` in the same list is rare; we count ONLY
+ * `* ` items as fragments. Plain `- item` lists remain non-fragmented.
+ *
+ * v0.4: counts only. CSS attribute application happens at render time inside
+ * `<SlideDeck.Slides>`, post-parse, by walking the rendered DOM.
+ */
+/**
+ * Count fragment markers in raw markdown.
+ *
+ * Detects only `*` at start of a line followed by space + non-whitespace.
+ * Avoids matching `**bold**`, `*italic*`, or `_ * _` patterns.
+ */
+declare function countFragmentsInMarkdown(markdown: string): number;
+
+/**
+ * Deck state machine (ADR D5).
+ *
+ * Single useReducer governs all deck-level state transitions: currentIndex,
+ * currentFragment, presenterMode, fullscreen, transitionDirection.
+ *
+ * NEXT_SLIDE advances fragment first if `currentFragment < totalFragmentsInCurrent`,
+ * else advances slide. PREV_SLIDE mirrors. JUMP_TO clamps to valid range.
+ *
+ * ADR D17: lazy init reads hash via `initFromHash` callback when provided —
+ * SSR-safe (callback guards `typeof window !== "undefined"`).
+ */
+
+interface DeckState {
+    currentIndex: number;
+    currentFragment: number;
+    presenterMode: boolean;
+    fullscreen: boolean;
+    transitionDirection: "none" | "next" | "prev";
+    totalSlides: number;
+    totalFragmentsInCurrent: number;
+}
+type DeckAction = {
+    type: "NEXT_SLIDE";
+} | {
+    type: "PREV_SLIDE";
+} | {
+    type: "JUMP_TO";
+    index: number;
+} | {
+    type: "NEXT_FRAGMENT";
+} | {
+    type: "PREV_FRAGMENT";
+} | {
+    type: "RESET_FRAGMENTS";
+} | {
+    type: "TOGGLE_PRESENTER";
+} | {
+    type: "SET_FULLSCREEN";
+    value: boolean;
+} | {
+    type: "UPDATE_TOTAL_SLIDES";
+    total: number;
+} | {
+    type: "UPDATE_TOTAL_FRAGMENTS";
+    total: number;
+} | {
+    type: "TRANSITION_END";
+};
+declare function deckReducer(state: DeckState, action: DeckAction): DeckState;
+interface UseDeckStateOptions {
+    initialIndex?: number;
+    totalSlides: number;
+    /** Lazy initializer hook (D17): returns initial index, e.g. parsing hash. */
+    initFromHash?: () => number | undefined;
+}
+declare function useDeckState(opts: UseDeckStateOptions): readonly [DeckState, Dispatch<DeckAction>];
+
+/**
+ * Hash routing hook (ADR D13).
+ *
+ * Pattern `#/N` (1-based). Bidirectional sync:
+ *   - Initial state: read via `useDeckState`'s lazy `initFromHash` (D17 SSR-safe).
+ *   - hashchange event → JUMP_TO.
+ *   - currentIndex change → `history.replaceState` (does NOT trigger hashchange,
+ *     so no infinite loop — verified in test EC-10).
+ */
+
+interface UseDeckHashRoutingOptions {
+    enabled?: boolean;
+    totalSlides: number;
+    currentIndex: number;
+}
+/** Read hash → return 0-based index, or undefined if not present/invalid. */
+declare function readHashIndex(hash: string): number | undefined;
+/** SSR-safe wrapper for initial hash read (D17). */
+declare function readInitialHash(): number | undefined;
+/** Format index → hash string. */
+declare function formatHash(zeroBasedIndex: number): string;
+declare function useDeckHashRouting(dispatch: Dispatch<DeckAction>, opts: UseDeckHashRoutingOptions): void;
+
+/**
+ * Keyboard navigation hook (ADR D9).
+ *
+ * Hardcoded bindings (no remap in v0.4):
+ *   ArrowRight, Space, PageDown → NEXT_SLIDE
+ *   ArrowLeft,  PageUp          → PREV_SLIDE
+ *   Home                        → JUMP_TO 0
+ *   End                         → JUMP_TO last
+ *   Escape                      → SET_FULLSCREEN false
+ *   f / F                       → toggleFullscreen callback
+ *   n / N / p / P               → TOGGLE_PRESENTER
+ *   Ctrl+P / Meta+P             → onPrint callback (preventDefault)
+ *
+ * Guards: ignora events quando target é INPUT, TEXTAREA, ou contentEditable
+ * (consumer pode ter inputs em modais sem conflito).
+ */
+
+interface UseDeckKeyboardOptions {
+    enabled?: boolean;
+    totalSlides: number;
+    onToggleFullscreen?: () => void;
+    onPrint?: () => void;
+}
+declare function useDeckKeyboard(dispatch: Dispatch<DeckAction>, opts: UseDeckKeyboardOptions): void;
+
+/**
+ * Touch swipe hook (ADR D10).
+ *
+ * Detecta swipe horizontal via Pointer Events nativos:
+ *   - threshold: 50px de deslocamento
+ *   - velocity: > 0.3 px/ms
+ *   - direction guard: |dx| > 2*|dy| (bloqueia swipe vertical / scroll)
+ *
+ * Swipe left (dx < 0) → NEXT_SLIDE
+ * Swipe right (dx > 0) → PREV_SLIDE
+ *
+ * EC-6: pointercancel limpa o tracking state (mobile browser pode cancelar mid-swipe).
+ * EC-7: tracking limita ao primeiro pointerId (multi-touch é ignorado).
+ */
+
+interface UseDeckSwipeOptions {
+    enabled?: boolean;
+}
+declare function useDeckSwipe(ref: RefObject<HTMLElement | null>, dispatch: Dispatch<DeckAction>, opts?: UseDeckSwipeOptions): void;
+
+/**
+ * Cross-browser fullscreen hook (ADR D6 area / EC-8).
+ *
+ * Wraps `Element.requestFullscreen()` + Safari `webkit*` prefix. Listens
+ * `fullscreenchange` (+ webkit) to sync state when user presses Esc via the
+ * native UI.
+ *
+ * EC-8: iOS Safari < 16 doesn't expose fullscreen on arbitrary elements (only
+ * `<video>`). Feature-detect — when unavailable, hook is a no-op and `toggle`
+ * is safe to call.
+ */
+
+interface UseFullscreenResult {
+    isFullscreen: boolean;
+    toggle: () => Promise<void>;
+    isSupported: boolean;
+}
+declare function useFullscreen(ref: RefObject<HTMLElement | null>): UseFullscreenResult;
+
+/**
+ * Print CSS injection (ADR D7).
+ *
+ * Injects a `<style id="theo-slide-deck-print">` element into the document
+ * head with `@page` + `@media print` rules that render `.theo-slide-deck-print-container`
+ * with one slide per page. Calls `window.print()`. Removes the style on the
+ * `afterprint` event (cleanup runs regardless of print cancel/complete).
+ */
+declare function injectPrintStyles(): HTMLStyleElement;
+declare function removePrintStyles(): void;
+interface PrintDeckOptions {
+    /** Optional callback fired after print dialog closes (success or cancel). */
+    onAfterPrint?: () => void;
+}
+/**
+ * Trigger native print dialog with deck-specific CSS injected.
+ *
+ * The `afterprint` event listener is cleaned up automatically. Idempotent —
+ * calling twice in quick succession is safe (style is reused).
+ */
+declare function printDeck(opts?: PrintDeckOptions): void;
+
+interface DeckContextValue {
+    state: DeckState;
+    dispatch: Dispatch<DeckAction>;
+    slides: SlideDeckSlide[];
+    transition: SlideDeckTransition;
+    deckId: string;
+    /** Rich-content plugins relayed to every inner `<Slide>` (D15). */
+    plugins?: SlidePlugin[];
+    /** Toggle browser fullscreen on the deck root. Safe to call when unsupported. */
+    toggleFullscreen: () => void | Promise<void>;
+    /** Trigger native print dialog with deck-specific @page CSS. */
+    print: () => void;
+}
+declare const DeckContext: react.Context<DeckContextValue | null>;
+declare function useDeckContext(): DeckContextValue;
+
+export { Controls, type DeckAction, DeckContext, type DeckContextValue, type DeckState, PresenterView, ProgressBar, SlideDeck, type SlideDeckInput, type SlideDeckProps, type SlideDeckSlide, type SlideDeckTransition, SlideNumber, Thumbnails, countFragmentsInMarkdown, deckReducer, extractNotes, formatHash, injectPrintStyles, printDeck, readHashIndex, readInitialHash, removePrintStyles, slideDeckInput, slideDeckSlide, slideDeckTransition, splitDeck, useDeckContext, useDeckHashRouting, useDeckKeyboard, useDeckState, useDeckSwipe, useFullscreen };