@segnavia/react 0.21.0 → 0.23.0

package/dist/elements.d.ts

@@ -1,4 +1,5 @@
-import { CaptionProps, CaptionsProps, CounterProps, DocumentProps, FullscreenProps, MuteProps, NotesProps, PageProps, PaperPickerProps, PaperProps, PlayProps, PlayerProps, RailProps, StageProps, StepProps, ThumbnailProps, TimeProps, TrackProps } from "./props.js";
+import { CaptionProps, CaptionsProps, CounterProps, DocumentProps, FullscreenProps, ItemSettingsProps, MuteProps, NotesProps, PageProps, PaperPickerProps, PaperProps, PlayProps, PlayerProps, RailProps, StageProps, StepProps, ThumbnailProps, TimeProps, TrackProps } from "./props.js";
+import { SegnaviaItemSettings } from "@segnavia/frame/item-settings";
 import { SegnaviaPlayer } from "@segnavia/frame/player";
 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";
@@ -20,6 +21,7 @@ export declare const ELEMENTS: {
   readonly stage: ElementDescriptor<SegnaviaStage, StageProps, "segnavia-stage">;
   readonly thumbnail: ElementDescriptor<SegnaviaThumbnail, ThumbnailProps, "segnavia-thumbnail">;
   readonly paperPicker: ElementDescriptor<SegnaviaPaperPicker, PaperPickerProps, "segnavia-paper-picker">;
+  readonly itemSettings: ElementDescriptor<SegnaviaItemSettings, ItemSettingsProps, "segnavia-item-settings">;
   readonly page: ElementDescriptor<SegnaviaPage, PageProps, "segnavia-page">;
   readonly paper: ElementDescriptor<SegnaviaPaper, PaperProps, "segnavia-paper">;
   readonly document: ElementDescriptor<SegnaviaDocument, DocumentProps, "segnavia-document">;

package/dist/elements.js

@@ -15,7 +15,8 @@ const ELEMENTS = {
 		"css",
 		"cspExtra",
 		"resolveSlide",
-		"transition"
+		"transition",
+		"slots"
 	], { onSegnaviaLabels: "segnavia-labels" }),
 	stage: element(HEADLESS_ELEMENTS.stage, [
 		"controller",
@@ -23,7 +24,8 @@ const ELEMENTS = {
 		"cspExtra",
 		"frameTitle",
 		"transition",
-		"reserve"
+		"reserve",
+		"slots"
 	], {
 		onSegnaviaController: "segnavia-controller",
 		onSegnaviaFit: "segnavia-fit"
@@ -36,25 +38,37 @@ const ELEMENTS = {
 		"resolveSlide",
 		"base",
 		"css",
-		"mountMargin"
+		"mountMargin",
+		"slots"
 	], { onSegnaviaThumbnailError: "segnavia-thumbnail-error" }),
 	paperPicker: element(STYLED_ELEMENTS.paperPicker, ["value", "labels"], { onChange: "change" }),
+	itemSettings: element("segnavia-item-settings", [
+		"declarations",
+		"fills",
+		"fill",
+		"source",
+		"report",
+		"labels"
+	], { onSegnaviaFillSelect: "segnavia-fill-select" }),
 	page: element(HEADLESS_ELEMENTS.page, [
 		"page",
 		"css",
-		"cspExtra"
+		"cspExtra",
+		"slots"
 	], {}),
 	paper: element(HEADLESS_ELEMENTS.paper, [
 		"paper",
 		"side",
 		"css",
-		"cspExtra"
+		"cspExtra",
+		"slots"
 	], {}),
 	document: element(HEADLESS_ELEMENTS.document, [
 		"css",
 		"cspExtra",
 		"pages",
-		"print"
+		"print",
+		"slots"
 	], {}),
 	play: element(STYLED_ELEMENTS.play, controlProperties, {}),
 	step: element(STYLED_ELEMENTS.step, controlProperties, {}),

package/dist/index.d.ts

@@ -1,8 +1,9 @@
-import { CaptionProps, CaptionsProps, CounterProps, DocumentProps, FullscreenProps, MuteProps, NotesProps, PageProps, PaperPickerProps, PaperProps, PlayProps, PlayerProps, RailProps, StageProps, StepProps, ThumbnailProps, TimeProps, TrackProps } from "./props.js";
+import { CaptionProps, CaptionsProps, CounterProps, DocumentProps, FullscreenProps, ItemSettingsProps, 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 { ItemSettingsController, ItemSettingsController as ItemSettingsController$1, ItemSettingsErrorDetail, ItemSettingsHandlers, ItemSettingsHandlers as ItemSettingsHandlers$1, ItemSettingsLabels, ItemSettingsSection, ItemSettingsSectionContext, SegnaviaItemSettings } from "@segnavia/frame/item-settings";
 import { SegnaviaPlayer } from "@segnavia/frame/player";
 import { ReactNode } from "react";
 import { DeckController, SegnaviaDocument } from "@segnavia/frame";
@@ -38,6 +39,19 @@ export declare const PaperPicker: import("react").ForwardRefExoticComponent<Omit
 } & {
   children?: ReactNode;
 } & import("react").RefAttributes<import("@segnavia/frame/controls").SegnaviaPaperPicker>>;
+export declare const ItemSettings: import("react").ForwardRefExoticComponent<Omit<import("react").HTMLAttributes<SegnaviaItemSettings>, "children"> & {
+  children?: ReactNode;
+} & {
+  declarations?: SegnaviaItemSettings["declarations"];
+  fills?: SegnaviaItemSettings["fills"];
+  fill?: SegnaviaItemSettings["fill"];
+  source?: SegnaviaItemSettings["source"];
+  report?: SegnaviaItemSettings["report"];
+  labels?: Partial<import("@segnavia/frame/item-settings").ItemSettingsLabels>;
+  onSegnaviaFillSelect?: (event: CustomEvent<string>) => void;
+} & {
+  children?: ReactNode;
+} & import("react").RefAttributes<SegnaviaItemSettings>>;
 export declare const Page: import("react").ForwardRefExoticComponent<PageProps & {
   children?: ReactNode;
 } & import("react").RefAttributes<import("@segnavia/frame").SegnaviaPage>>;
@@ -157,5 +171,6 @@ export declare const Rail: import("react").ForwardRefExoticComponent<Omit<import
 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;
+export declare function useItemSettings(element: SegnaviaItemSettings | null, handlers: ItemSettingsHandlers$1): ItemSettingsController$1 | null;
 //#endregion
-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 };
+export type { AuthoringController, AuthoringErrorDetail, AuthoringHandlers, AuthoringOptions, CaptionProps, CaptionsProps, CounterProps, DirtyChangeDetail, DocumentAuthoringController, DocumentAuthoringErrorDetail, DocumentAuthoringHandlers, DocumentProps, FullscreenProps, ItemSettingsController, ItemSettingsErrorDetail, ItemSettingsHandlers, ItemSettingsLabels, ItemSettingsProps, ItemSettingsSection, ItemSettingsSectionContext, MovePageHandler, MovePageInput, MuteProps, NotesProps, PageProps, PaperPickerProps, PaperProps, PlayProps, PlayerProps, RailProps, SaveNotesInput, SavePrintMomentInput, SegnaviaIntrinsicElements, StageProps, StepProps, ThumbnailProps, TimeProps, TrackProps };

package/dist/index.js

@@ -2,6 +2,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 { attachItemSettings } from "@segnavia/frame/item-settings";
 import "@segnavia/frame/player";
 import { createElement, forwardRef, useCallback, useEffect, useRef, useState } from "react";
 //#region src/index.ts
@@ -39,6 +40,7 @@ const Player = createComponent(ELEMENTS.player);
 const Stage = createComponent(ELEMENTS.stage);
 const Thumbnail = createComponent(ELEMENTS.thumbnail);
 const PaperPicker = createComponent(ELEMENTS.paperPicker);
+const ItemSettings = createComponent(ELEMENTS.itemSettings);
 const Page = createComponent(ELEMENTS.page);
 const Paper = createComponent(ELEMENTS.paper);
 const Document = createComponent(ELEMENTS.document);
@@ -106,5 +108,21 @@ function useDocumentAuthoring(document, handlers) {
 	useEffect(() => controller?.update(handlers), [controller, handlers]);
 	return controller;
 }
+function useItemSettings(element, handlers) {
+	const [controller, setController] = useState(null);
+	const latestHandlers = useRef(handlers);
+	latestHandlers.current = handlers;
+	useEffect(() => {
+		if (!element) return;
+		const attached = attachItemSettings(element, latestHandlers.current);
+		setController(attached);
+		return () => {
+			attached.detach();
+			setController(null);
+		};
+	}, [element]);
+	useEffect(() => controller?.update(handlers), [controller, handlers]);
+	return controller;
+}
 //#endregion
-export { Caption, Captions, Counter, Document, Fullscreen, Mute, Notes, Page, Paper, PaperPicker, Play, Player, Rail, Stage, Step, Thumbnail, Time, Track, createComponent, useAuthoring, useDeckController, useDocumentAuthoring };
+export { Caption, Captions, Counter, Document, Fullscreen, ItemSettings, Mute, Notes, Page, Paper, PaperPicker, Play, Player, Rail, Stage, Step, Thumbnail, Time, Track, createComponent, useAuthoring, useDeckController, useDocumentAuthoring, useItemSettings };

package/dist/props.d.ts

@@ -1,3 +1,4 @@
+import { ItemSettingsLabels, SegnaviaItemSettings } from "@segnavia/frame/item-settings";
 import { PlayerControls, PlayerFit, SegnaviaPlayer } from "@segnavia/frame/player";
 import { HTMLAttributes, ReactNode } from "react";
 import { ControllerOptions, DeckController, FittedSize, HostTransition, PageInput, PrintInput, SegnaviaDocument, SegnaviaPage, SegnaviaPaper, SegnaviaStage, SegnaviaThumbnail, StageReserve } from "@segnavia/frame";
@@ -18,6 +19,7 @@ export interface PlayerProps extends ElementProps<SegnaviaPlayer> {
   cspExtra?: string;
   resolveSlide?: ControllerOptions['resolveSlide'];
   transition?: HostTransition;
+  slots?: SegnaviaPlayer['slots'];
   src?: string;
   theme?: string;
   notes?: boolean;
@@ -39,6 +41,7 @@ export interface StageProps extends ElementProps<SegnaviaStage> {
   frameTitle?: SegnaviaStage['frameTitle'];
   transition?: HostTransition;
   reserve?: StageReserve;
+  slots?: SegnaviaStage['slots'];
   src?: string;
   hash?: string;
   prefetch?: boolean;
@@ -58,6 +61,7 @@ export interface ThumbnailProps extends ElementProps<SegnaviaThumbnail> {
   base?: string;
   css?: string;
   mountMargin?: number;
+  slots?: SegnaviaThumbnail['slots'];
   onSegnaviaThumbnailError?: CustomEventProp<unknown>;
 }
 export type PaperPickerProps = Omit<ElementProps<SegnaviaPaperPicker>, 'onChange'> & {
@@ -65,10 +69,20 @@ export type PaperPickerProps = Omit<ElementProps<SegnaviaPaperPicker>, 'onChange
   labels?: PaperPickerLabelOverrides;
   onChange?: CustomEventProp<SegnaviaPaperPicker['value']>;
 };
+export type ItemSettingsProps = ElementProps<SegnaviaItemSettings> & {
+  declarations?: SegnaviaItemSettings['declarations'];
+  fills?: SegnaviaItemSettings['fills'];
+  fill?: SegnaviaItemSettings['fill'];
+  source?: SegnaviaItemSettings['source'];
+  report?: SegnaviaItemSettings['report'];
+  labels?: Partial<ItemSettingsLabels>;
+  onSegnaviaFillSelect?: CustomEventProp<string>;
+};
 export interface PageProps extends ElementProps<SegnaviaPage> {
   page?: PageInput | null;
   css?: string;
   cspExtra?: string;
+  slots?: SegnaviaPage['slots'];
   src?: string;
   unstyled?: boolean;
 }
@@ -77,6 +91,7 @@ export interface PaperProps extends ElementProps<SegnaviaPaper> {
   side?: SegnaviaPaper['side'];
   css?: string;
   cspExtra?: string;
+  slots?: SegnaviaPaper['slots'];
   unstyled?: boolean;
 }
 export interface DocumentProps extends ElementProps<SegnaviaDocument> {
@@ -84,6 +99,7 @@ export interface DocumentProps extends ElementProps<SegnaviaDocument> {
   print?: PrintInput | null;
   css?: string;
   cspExtra?: string;
+  slots?: SegnaviaDocument['slots'];
   unstyled?: boolean;
 }
 export type PlayProps = ControlProps<SegnaviaPlay>;

package/package.json

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