@segnavia/react 0.19.0 → 0.21.0

package/dist/elements.d.ts

@@ -1,7 +1,7 @@
-import { CaptionProps, CaptionsProps, CounterProps, FullscreenProps, MuteProps, NotesProps, PlayProps, PlayerProps, RailProps, StageProps, StepProps, ThumbnailProps, TimeProps, TrackProps } from "./props.js";
+import { CaptionProps, CaptionsProps, CounterProps, DocumentProps, FullscreenProps, MuteProps, NotesProps, PageProps, PaperPickerProps, PaperProps, PlayProps, PlayerProps, RailProps, StageProps, StepProps, ThumbnailProps, TimeProps, TrackProps } from "./props.js";
 import { SegnaviaPlayer } from "@segnavia/frame/player";
-import { SegnaviaStage, SegnaviaThumbnail } from "@segnavia/frame";
-import { SegnaviaCaption, SegnaviaCaptions, SegnaviaCounter, SegnaviaFullscreen, SegnaviaMute, SegnaviaNotes, SegnaviaPlay, SegnaviaRail, SegnaviaStep, SegnaviaTime, SegnaviaTrack } from "@segnavia/frame/controls";
+import { SegnaviaDocument, SegnaviaPage, SegnaviaPaper, SegnaviaStage, SegnaviaThumbnail } from "@segnavia/frame";
+import { SegnaviaCaption, SegnaviaCaptions, SegnaviaCounter, SegnaviaFullscreen, SegnaviaMute, SegnaviaNotes, SegnaviaPaperPicker, SegnaviaPlay, SegnaviaRail, SegnaviaStep, SegnaviaTime, SegnaviaTrack } from "@segnavia/frame/controls";
 //#region src/elements.d.ts
 export interface RuntimeElementDescriptor {
   tag: `segnavia-${string}`;
@@ -19,6 +19,10 @@ export declare const ELEMENTS: {
   readonly player: ElementDescriptor<SegnaviaPlayer, PlayerProps, "segnavia-player">;
   readonly stage: ElementDescriptor<SegnaviaStage, StageProps, "segnavia-stage">;
   readonly thumbnail: ElementDescriptor<SegnaviaThumbnail, ThumbnailProps, "segnavia-thumbnail">;
+  readonly paperPicker: ElementDescriptor<SegnaviaPaperPicker, PaperPickerProps, "segnavia-paper-picker">;
+  readonly page: ElementDescriptor<SegnaviaPage, PageProps, "segnavia-page">;
+  readonly paper: ElementDescriptor<SegnaviaPaper, PaperProps, "segnavia-paper">;
+  readonly document: ElementDescriptor<SegnaviaDocument, DocumentProps, "segnavia-document">;
   readonly play: ElementDescriptor<SegnaviaPlay, PlayProps, "segnavia-play">;
   readonly step: ElementDescriptor<SegnaviaStep, StepProps, "segnavia-step">;
   readonly track: ElementDescriptor<SegnaviaTrack, TrackProps, "segnavia-track">;

package/dist/elements.js

@@ -30,12 +30,32 @@ const ELEMENTS = {
 	}),
 	thumbnail: element(HEADLESS_ELEMENTS.thumbnail, [
 		"deck",
+		"page",
+		"print",
 		"index",
 		"resolveSlide",
 		"base",
 		"css",
 		"mountMargin"
 	], { onSegnaviaThumbnailError: "segnavia-thumbnail-error" }),
+	paperPicker: element(STYLED_ELEMENTS.paperPicker, ["value", "labels"], { onChange: "change" }),
+	page: element(HEADLESS_ELEMENTS.page, [
+		"page",
+		"css",
+		"cspExtra"
+	], {}),
+	paper: element(HEADLESS_ELEMENTS.paper, [
+		"paper",
+		"side",
+		"css",
+		"cspExtra"
+	], {}),
+	document: element(HEADLESS_ELEMENTS.document, [
+		"css",
+		"cspExtra",
+		"pages",
+		"print"
+	], {}),
 	play: element(STYLED_ELEMENTS.play, controlProperties, {}),
 	step: element(STYLED_ELEMENTS.step, controlProperties, {}),
 	track: element(STYLED_ELEMENTS.track, controlProperties, {}),

package/dist/index.d.ts

@@ -1,10 +1,11 @@
-import { CaptionProps, CaptionsProps, CounterProps, FullscreenProps, MuteProps, NotesProps, PlayProps, PlayerProps, RailProps, StageProps, StepProps, ThumbnailProps, TimeProps, TrackProps } from "./props.js";
+import { CaptionProps, CaptionsProps, CounterProps, DocumentProps, FullscreenProps, MuteProps, NotesProps, PageProps, PaperPickerProps, PaperProps, PlayProps, PlayerProps, RailProps, StageProps, StepProps, ThumbnailProps, TimeProps, TrackProps } from "./props.js";
 import { AnyElementDescriptor, ElementFor, PropsFor } from "./elements.js";
 import { SegnaviaIntrinsicElements } from "./jsx.js";
 import { AuthoringController, AuthoringController as AuthoringController$1, AuthoringErrorDetail, AuthoringHandlers, AuthoringHandlers as AuthoringHandlers$1, AuthoringOptions, AuthoringOptions as AuthoringOptions$1, DirtyChangeDetail, SaveNotesInput, SavePrintMomentInput } from "@segnavia/frame/authoring";
+import { DocumentAuthoringController, DocumentAuthoringController as DocumentAuthoringController$1, DocumentAuthoringErrorDetail, DocumentAuthoringHandlers, DocumentAuthoringHandlers as DocumentAuthoringHandlers$1, MovePageHandler, MovePageInput } from "@segnavia/frame/document-authoring";
 import { SegnaviaPlayer } from "@segnavia/frame/player";
 import { ReactNode } from "react";
-import { DeckController } from "@segnavia/frame";
+import { DeckController, SegnaviaDocument } from "@segnavia/frame";
 //#region src/index.d.ts
 type ElementWithController = HTMLElement & {
   controller?: DeckController | null;
@@ -21,6 +22,31 @@ export declare const Stage: import("react").ForwardRefExoticComponent<StageProps
 export declare const Thumbnail: import("react").ForwardRefExoticComponent<ThumbnailProps & {
   children?: ReactNode;
 } & import("react").RefAttributes<import("@segnavia/frame").SegnaviaThumbnail>>;
+export declare const PaperPicker: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").HTMLAttributes<import("@segnavia/frame/controls").SegnaviaPaperPicker>, "children"> & {
+  children?: ReactNode;
+}, "onChange"> & {
+  value?: import("@segnavia/frame/controls").SegnaviaPaperPicker["value"];
+  labels?: import("@segnavia/frame/controls").PaperPickerLabelOverrides;
+  onChange?: (event: CustomEvent<{
+    paper: "dl" | "letter" | "legal" | "tabloid" | "a3" | "a4" | "a5" | "business-card-us" | "business-card-eu" | "business-card-square-us" | "business-card-slim-us" | "postcard-4x6" | "postcard-5x7" | "postcard-6x9" | "postcard-6x11" | "card-square-4in" | "half-letter" | "a6" | "rack-card-4x9" | "rack-card-3.5x8.5" | "poster-12x18" | "poster-16x20" | "poster-18x24" | "poster-24x36" | "a2" | "a1" | "a0" | {
+      width: number;
+      height: number;
+      unit: "mm" | "in" | "pt";
+    };
+    orientation: "portrait" | "landscape";
+  }>) => void;
+} & {
+  children?: ReactNode;
+} & import("react").RefAttributes<import("@segnavia/frame/controls").SegnaviaPaperPicker>>;
+export declare const Page: import("react").ForwardRefExoticComponent<PageProps & {
+  children?: ReactNode;
+} & import("react").RefAttributes<import("@segnavia/frame").SegnaviaPage>>;
+export declare const Paper: import("react").ForwardRefExoticComponent<PaperProps & {
+  children?: ReactNode;
+} & import("react").RefAttributes<import("@segnavia/frame").SegnaviaPaper>>;
+export declare const Document: import("react").ForwardRefExoticComponent<DocumentProps & {
+  children?: ReactNode;
+} & import("react").RefAttributes<SegnaviaDocument>>;
 export declare const Play: import("react").ForwardRefExoticComponent<Omit<import("react").HTMLAttributes<import("@segnavia/frame/controls").SegnaviaPlay>, "children"> & {
   children?: ReactNode;
 } & {
@@ -130,5 +156,6 @@ export declare const Rail: import("react").ForwardRefExoticComponent<Omit<import
 } & import("react").RefAttributes<import("@segnavia/frame/controls").SegnaviaRail>>;
 export declare function useDeckController(element: ElementWithController | null): DeckController | null;
 export declare function useAuthoring(player: SegnaviaPlayer | null, handlers: AuthoringHandlers$1, options?: AuthoringOptions$1): AuthoringController$1 | null;
+export declare function useDocumentAuthoring(document: SegnaviaDocument | null, handlers: DocumentAuthoringHandlers$1): DocumentAuthoringController$1 | null;
 //#endregion
-export type { AuthoringController, AuthoringErrorDetail, AuthoringHandlers, AuthoringOptions, CaptionProps, CaptionsProps, CounterProps, DirtyChangeDetail, FullscreenProps, MuteProps, NotesProps, PlayProps, PlayerProps, RailProps, SaveNotesInput, SavePrintMomentInput, SegnaviaIntrinsicElements, StageProps, StepProps, ThumbnailProps, TimeProps, TrackProps };
+export type { AuthoringController, AuthoringErrorDetail, AuthoringHandlers, AuthoringOptions, CaptionProps, CaptionsProps, CounterProps, DirtyChangeDetail, DocumentAuthoringController, DocumentAuthoringErrorDetail, DocumentAuthoringHandlers, DocumentProps, FullscreenProps, MovePageHandler, MovePageInput, MuteProps, NotesProps, PageProps, PaperPickerProps, PaperProps, PlayProps, PlayerProps, RailProps, SaveNotesInput, SavePrintMomentInput, SegnaviaIntrinsicElements, StageProps, StepProps, ThumbnailProps, TimeProps, TrackProps };

package/dist/index.js

@@ -1,6 +1,7 @@
 import { ELEMENTS } from "./elements.js";
 import { syncElementProps } from "./react-props.js";
 import { attachAuthoring } from "@segnavia/frame/authoring";
+import { attachDocumentAuthoring } from "@segnavia/frame/document-authoring";
 import "@segnavia/frame/player";
 import { createElement, forwardRef, useCallback, useEffect, useRef, useState } from "react";
 //#region src/index.ts
@@ -37,6 +38,10 @@ function createComponent(descriptor) {
 const Player = createComponent(ELEMENTS.player);
 const Stage = createComponent(ELEMENTS.stage);
 const Thumbnail = createComponent(ELEMENTS.thumbnail);
+const PaperPicker = createComponent(ELEMENTS.paperPicker);
+const Page = createComponent(ELEMENTS.page);
+const Paper = createComponent(ELEMENTS.paper);
+const Document = createComponent(ELEMENTS.document);
 const Play = createComponent(ELEMENTS.play);
 const Step = createComponent(ELEMENTS.step);
 const Track = createComponent(ELEMENTS.track);
@@ -85,5 +90,21 @@ function useAuthoring(player, handlers, options) {
 	]);
 	return controller;
 }
+function useDocumentAuthoring(document, handlers) {
+	const [controller, setController] = useState(null);
+	const latestHandlers = useRef(handlers);
+	latestHandlers.current = handlers;
+	useEffect(() => {
+		if (!document) return;
+		const attached = attachDocumentAuthoring(document, latestHandlers.current);
+		setController(attached);
+		return () => {
+			attached.detach();
+			setController(null);
+		};
+	}, [document]);
+	useEffect(() => controller?.update(handlers), [controller, handlers]);
+	return controller;
+}
 //#endregion
-export { Caption, Captions, Counter, Fullscreen, Mute, Notes, Play, Player, Rail, Stage, Step, Thumbnail, Time, Track, createComponent, useAuthoring, useDeckController };
+export { Caption, Captions, Counter, Document, Fullscreen, Mute, Notes, Page, Paper, PaperPicker, Play, Player, Rail, Stage, Step, Thumbnail, Time, Track, createComponent, useAuthoring, useDeckController, useDocumentAuthoring };

package/dist/props.d.ts

@@ -1,7 +1,7 @@
 import { PlayerControls, PlayerFit, SegnaviaPlayer } from "@segnavia/frame/player";
 import { HTMLAttributes, ReactNode } from "react";
-import { ControllerOptions, DeckController, FittedSize, HostTransition, SegnaviaStage, SegnaviaThumbnail, StageReserve } from "@segnavia/frame";
-import { PlayerLabels, SegnaviaCaption, SegnaviaCaptions, SegnaviaCounter, SegnaviaFullscreen, SegnaviaMute, SegnaviaNotes, SegnaviaPlay, SegnaviaRail, SegnaviaStep, SegnaviaTime, SegnaviaTrack } from "@segnavia/frame/controls";
+import { ControllerOptions, DeckController, FittedSize, HostTransition, PageInput, PrintInput, SegnaviaDocument, SegnaviaPage, SegnaviaPaper, SegnaviaStage, SegnaviaThumbnail, StageReserve } from "@segnavia/frame";
+import { PaperPickerLabelOverrides, PlayerLabels, SegnaviaCaption, SegnaviaCaptions, SegnaviaCounter, SegnaviaFullscreen, SegnaviaMute, SegnaviaNotes, SegnaviaPaperPicker, SegnaviaPlay, SegnaviaRail, SegnaviaStep, SegnaviaTime, SegnaviaTrack } from "@segnavia/frame/controls";
 //#region src/props.d.ts
 type ElementProps<E extends HTMLElement> = Omit<HTMLAttributes<E>, 'children'> & {
   children?: ReactNode;
@@ -51,6 +51,8 @@ export interface StageProps extends ElementProps<SegnaviaStage> {
 }
 export interface ThumbnailProps extends ElementProps<SegnaviaThumbnail> {
   deck?: SegnaviaThumbnail['deck'];
+  page?: PageInput | null;
+  print?: PrintInput | null;
   index?: number;
   resolveSlide?: ControllerOptions['resolveSlide'];
   base?: string;
@@ -58,6 +60,32 @@ export interface ThumbnailProps extends ElementProps<SegnaviaThumbnail> {
   mountMargin?: number;
   onSegnaviaThumbnailError?: CustomEventProp<unknown>;
 }
+export type PaperPickerProps = Omit<ElementProps<SegnaviaPaperPicker>, 'onChange'> & {
+  value?: SegnaviaPaperPicker['value'];
+  labels?: PaperPickerLabelOverrides;
+  onChange?: CustomEventProp<SegnaviaPaperPicker['value']>;
+};
+export interface PageProps extends ElementProps<SegnaviaPage> {
+  page?: PageInput | null;
+  css?: string;
+  cspExtra?: string;
+  src?: string;
+  unstyled?: boolean;
+}
+export interface PaperProps extends ElementProps<SegnaviaPaper> {
+  paper?: number;
+  side?: SegnaviaPaper['side'];
+  css?: string;
+  cspExtra?: string;
+  unstyled?: boolean;
+}
+export interface DocumentProps extends ElementProps<SegnaviaDocument> {
+  pages?: PageInput[];
+  print?: PrintInput | null;
+  css?: string;
+  cspExtra?: string;
+  unstyled?: boolean;
+}
 export type PlayProps = ControlProps<SegnaviaPlay>;
 export type StepProps = ControlProps<SegnaviaStep> & {
   to?: 'previous' | 'next';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@segnavia/react",
-  "version": "0.19.0",
+  "version": "0.21.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -26,7 +26,7 @@
     }
   },
   "dependencies": {
-    "@segnavia/frame": "0.19.0"
+    "@segnavia/frame": "0.21.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",