@embedpdf/viewer-chrome 3.0.0-next.14 → 3.0.0-next.16

package/dist/chrome.js

@@ -1,258 +1,417 @@
-import { custom, defineChrome, group, item } from "@embedpdf/react/toolbar";
+import { createLayout } from "@embedpdf/core-ui";
 //#region src/config/chrome.ts
 /**
-* The chrome — structure only. No breakpoints, no show/hide lists, no locale
-* overrides, no dividers/spacers, no hand-written overflow menus. What fits is
-* measured and solved at runtime (@embedpdf/core-ui); the overflow menu is
-* derived. Compare to the v2 snippet's 1,950-line ui-schema.ts.
+* The default layout: every bar, menu and panel the viewer ships, as plain
+* data. Structure only: no breakpoints, no show/hide lists, no locale
+* overrides, no dividers or spacers, no hand-written overflow menus. What fits
+* is measured and solved at runtime (@embedpdf/core-ui); the "More" menu is
+* derived, and so are the mode tabs (the `modes` group lists one per bar with
+* a `mode`).
 *
-* `importance` (1 sheds first … 5 pinned) is the only responsive knob.
+* `importance` (1 makes room first … 5 never leaves the bar) is the only
+* responsive knob. The bar, group and menu ids are API: they don't change
+* between minor versions.
 */
-const style = group("style", { importance: 4 }, [item("panel:annotation-style")]);
-const history = group("history", { importance: 3 }, ["history:undo", "history:redo"]);
-const mainBar = {
-	id: "main",
-	sections: {
-		start: [
-			group("document", { importance: 5 }, [item("document:menu")]),
-			group("workspace", { importance: 4 }, [item("panel:sidebar", { importance: 5 }), item("page:settings")]),
-			group("zoom", { importance: 4 }, [custom("zoom-controls", {
-				variants: ["inline", "button"],
-				terminal: "zoom:menu"
-			})]),
-			group("tools", { importance: 2 }, ["pan:toggle", "pointer:toggle"])
-		],
-		center: [group("modes", {
-			role: "tabs",
-			shed: true,
-			collapse: "select",
-			importance: 4,
-			labelKey: "commands.mode.group",
-			items: [
-				item("mode:view", {
-					variants: ["label"],
-					importance: 1
-				}),
-				item("mode:annotate", {
-					variants: ["label"],
-					importance: 1
-				}),
-				item("mode:shapes", {
-					variants: ["label"],
-					importance: 1
-				}),
-				item("mode:insert", {
-					variants: ["label"],
-					importance: 1
-				}),
-				item("mode:form", {
-					variants: ["label"],
-					importance: 1
-				}),
-				item("mode:redact", {
-					variants: ["label"],
-					importance: 1
-				}),
-				item("mode:measure", {
-					variants: ["label"],
-					importance: 1
-				})
-			]
-		})],
-		end: [group("panels", { importance: 5 }, ["panel:search", "panel:comment"])]
-	}
-};
-const annotateBar = {
-	id: "annotate",
-	sections: { center: [
-		group("comment", { importance: 4 }, ["annotation:add-note", "annotation:add-link"]),
-		group("markup", { importance: 4 }, [
-			"annotation:add-highlight",
-			"annotation:add-strikeout",
-			"annotation:add-underline",
-			"annotation:add-squiggly"
-		]),
-		group("draw", { importance: 3 }, ["annotation:add-ink", "annotation:add-ink-highlight"]),
-		group("text", { importance: 2 }, [
-			"annotation:add-text",
-			"annotation:add-insert-text",
-			"annotation:add-replace-text",
-			"annotation:add-callout"
-		]),
-		style,
-		history
-	] }
-};
-const shapesBar = {
-	id: "shapes",
-	sections: { center: [
-		group("shapes", { importance: 4 }, [
-			"annotation:add-rectangle",
-			"annotation:add-circle",
-			"annotation:add-line",
-			"annotation:add-arrow"
-		]),
-		group("polygons", { importance: 2 }, ["annotation:add-polygon", "annotation:add-polyline"]),
-		style,
-		history
-	] }
+const style = {
+	id: "style",
+	items: ["panel:style"],
+	importance: 4,
+	dependent: true
 };
-const insertBar = {
-	id: "insert",
-	sections: { center: [
-		group("stamps", { importance: 4 }, [
-			"insert:add-stamp",
-			custom("quick-stamps", {
-				terminal: "insert:add-stamp",
-				importance: 3
-			}),
-			"insert:add-attachment",
-			"insert:add-signature",
-			"insert:add-image"
-		]),
-		style,
-		history
-	] }
+const history = {
+	id: "history",
+	items: ["history:undo", "history:redo"],
+	importance: 3,
+	dependent: true
 };
-const formBar = {
-	id: "form",
-	sections: { center: [
-		group("fields", { importance: 4 }, [
-			"form:add-textfield",
-			"form:add-checkbox",
-			"form:add-radio"
-		]),
-		group("choice-fields", { importance: 2 }, ["form:add-select", "form:add-listbox"]),
-		group("signature-fields", { importance: 2 }, ["form:add-signature"]),
-		history
-	] }
-};
-const measureBar = {
-	id: "measure",
-	sections: { center: [
-		group("measure", { importance: 5 }, [
-			"measurement:distance",
-			"measurement:perimeter",
-			"measurement:area",
-			"measurement:calibrate"
-		]),
-		group("scale", { importance: 4 }, [custom("measurement-scale", {
-			variants: ["inline"],
-			terminal: "panel:measurement"
-		})]),
-		style
-	] }
-};
-const redactBar = {
-	id: "redact",
-	sections: { center: [
-		group("redact", { importance: 4 }, ["redaction:redact", "panel:redaction"]),
-		style,
-		history
-	] }
-};
-const documentMenu = {
-	id: "document",
-	sections: [{ items: ["document:download", "document:print"] }, { items: ["document:fullscreen"] }]
-};
-const zoomMenu = {
-	id: "zoom",
-	sections: [
-		{
-			labelKey: "commands.zoom.level",
-			items: [
-				"zoom:50",
-				"zoom:100",
-				"zoom:150",
-				"zoom:200",
-				"zoom:400"
+const DEFAULT_LAYOUT = {
+	bars: {
+		main: {
+			place: "top",
+			start: [
+				{
+					id: "document",
+					items: ["menu:document"],
+					importance: 5
+				},
+				{
+					id: "view",
+					items: [{
+						command: "panel:thumbnails",
+						importance: 5
+					}, "menu:view"],
+					importance: 4
+				},
+				{
+					id: "zoom",
+					items: [{
+						custom: "zoom",
+						command: "menu:zoom",
+						variants: ["inline", "button"]
+					}],
+					importance: 4
+				},
+				{
+					id: "tools",
+					items: ["tool:pan", "tool:pointer"],
+					importance: 2
+				}
+			],
+			center: [{
+				id: "modes",
+				items: [],
+				shed: true,
+				collapse: "select",
+				importance: 4,
+				titleKey: "commands.mode.group"
+			}],
+			end: [{
+				id: "panels",
+				items: [
+					{
+						custom: "view-only",
+						variants: ["label", "icon"]
+					},
+					"panel:search",
+					"panel:comments"
+				],
+				importance: 5
+			}]
+		},
+		annotate: {
+			place: { with: "main" },
+			mode: "annotate",
+			titleKey: "commands.mode.annotate",
+			center: [
+				{
+					id: "comment",
+					items: ["tool:note", "tool:link"],
+					importance: 4
+				},
+				{
+					id: "markup",
+					items: [
+						"tool:highlight",
+						"tool:strikeout",
+						"tool:underline",
+						"tool:squiggly"
+					],
+					importance: 4
+				},
+				{
+					id: "draw",
+					items: ["tool:ink", "tool:ink-highlight"],
+					importance: 3
+				},
+				{
+					id: "text",
+					items: [
+						"tool:free-text",
+						"tool:insert-text",
+						"tool:replace-text",
+						"tool:callout"
+					],
+					importance: 2
+				},
+				style,
+				history
 			]
 		},
-		{ items: ["zoom:in", "zoom:out"] },
-		{ items: [
-			"zoom:fit-page",
-			"zoom:fit-width",
-			"zoom:automatic"
-		] }
-	]
-};
-const pageSettingsMenu = {
-	id: "page-settings",
-	sections: [
-		{
-			labelKey: "commands.spread.group",
-			items: [
-				"spread:none",
-				"spread:odd",
-				"spread:even"
+		shapes: {
+			place: { with: "main" },
+			mode: "shapes",
+			titleKey: "commands.mode.shapes",
+			center: [
+				{
+					id: "shapes",
+					items: [
+						"tool:square",
+						"tool:circle",
+						"tool:line",
+						"tool:arrow"
+					],
+					importance: 4
+				},
+				{
+					id: "polygons",
+					items: ["tool:polygon", "tool:polyline"],
+					importance: 2
+				},
+				style,
+				history
 			]
 		},
-		{
-			labelKey: "commands.scroll.group",
-			items: ["scroll:vertical", "scroll:horizontal"]
+		insert: {
+			place: { with: "main" },
+			mode: "insert",
+			titleKey: "commands.mode.insert",
+			center: [
+				{
+					id: "stamps",
+					items: [
+						"tool:stamp",
+						{
+							custom: "quick-stamps",
+							command: "tool:stamp",
+							importance: 3
+						},
+						"tool:attachment",
+						"tool:signature",
+						"tool:image"
+					],
+					importance: 4
+				},
+				style,
+				history
+			]
 		},
-		{
-			labelKey: "commands.rotate.group",
-			items: ["rotate:clockwise", "rotate:counter-clockwise"]
+		form: {
+			place: { with: "main" },
+			mode: "form",
+			titleKey: "commands.mode.form",
+			center: [
+				{
+					id: "design",
+					items: ["form:design"],
+					importance: 5
+				},
+				{
+					id: "fields",
+					items: [
+						"tool:text-field",
+						"tool:checkbox",
+						"tool:radio"
+					],
+					importance: 4
+				},
+				{
+					id: "choices",
+					items: ["tool:combo-box", "tool:list-box"],
+					importance: 2
+				},
+				{
+					id: "buttons",
+					items: ["tool:button"],
+					importance: 2
+				},
+				{
+					id: "signatures",
+					items: ["tool:signature-field"],
+					importance: 2
+				},
+				style,
+				history
+			]
 		},
-		{ items: ["document:fullscreen"] }
-	]
-};
-const annotationStrip = {
-	id: "annotation-strip",
-	sections: { center: [group("annotation-actions", { importance: 4 }, [
-		"annotation:comment",
-		"annotation:style",
-		"annotation:stamp-from-selection",
-		"annotation:link",
-		"annotation:goto-link",
-		"annotation:remove-link",
-		"annotation:group",
-		"annotation:ungroup"
-	]), group("annotation-danger", { importance: 5 }, ["annotation:delete"])] }
-};
-const selectionStrip = {
-	id: "selection-strip",
-	sections: { center: [group("selection-actions", { importance: 4 }, ["selection:copy"])] }
-};
-/**
-* The DEFAULT chrome — exported as a VALUE, which is the whole customization
-* model: consumers pass nothing and track this, transform it, or write their
-* own. It is never merged with anything.
-*/
-const defaultChrome = defineChrome({
-	bars: { main: mainBar },
-	modeBars: {
-		"mode:annotate": annotateBar,
-		"mode:shapes": shapesBar,
-		"mode:insert": insertBar,
-		"mode:form": formBar,
-		"mode:redact": redactBar,
-		"mode:measure": measureBar
+		redact: {
+			place: { with: "main" },
+			mode: "redact",
+			titleKey: "commands.mode.redact",
+			center: [
+				{
+					id: "redact",
+					items: ["tool:redact", "panel:redaction"],
+					importance: 4
+				},
+				style,
+				history
+			]
+		},
+		measure: {
+			place: { with: "main" },
+			mode: "measure",
+			titleKey: "commands.mode.measure",
+			center: [
+				{
+					id: "measure",
+					items: [
+						"tool:distance",
+						"tool:perimeter",
+						"tool:area",
+						"measurement:calibrate"
+					],
+					importance: 5
+				},
+				{
+					id: "scale",
+					items: [{
+						custom: "measurement-scale",
+						command: "panel:measurement",
+						variants: ["inline"]
+					}],
+					importance: 4
+				},
+				style
+			]
+		},
+		pager: {
+			place: { float: "bottom" },
+			center: [{
+				id: "pages",
+				items: [{ custom: "page-number" }]
+			}]
+		},
+		selection: {
+			place: { at: "selection" },
+			center: [{
+				id: "selection",
+				items: [
+					"selection:copy",
+					"selection:highlight",
+					"selection:underline",
+					"selection:strikeout"
+				],
+				importance: 4
+			}]
+		},
+		annotation: {
+			place: { at: "annotation" },
+			center: [{
+				id: "actions",
+				items: [
+					"annotation:comment",
+					"annotation:style",
+					"annotation:stamp-from-selection",
+					"annotation:link",
+					"annotation:goto-link",
+					"annotation:save-file",
+					"annotation:remove-link",
+					"annotation:group",
+					"annotation:ungroup"
+				],
+				importance: 4
+			}, {
+				id: "danger",
+				items: ["annotation:delete"],
+				importance: 5
+			}]
+		}
 	},
 	menus: {
-		document: documentMenu,
-		zoom: zoomMenu,
-		"page-settings": pageSettingsMenu
+		document: [[
+			"document:open",
+			"document:download",
+			"document:print"
+		], ["view:fullscreen"]],
+		view: [
+			{
+				titleKey: "commands.spread.group",
+				items: [
+					"view:single-page",
+					"view:two-pages",
+					"view:cover-page"
+				]
+			},
+			{
+				titleKey: "commands.scroll.group",
+				items: ["view:scroll-vertical", "view:scroll-horizontal"]
+			},
+			{
+				titleKey: "commands.rotate.group",
+				items: ["view:rotate-clockwise", "view:rotate-counterclockwise"]
+			},
+			["view:fullscreen"]
+		],
+		zoom: [
+			{
+				titleKey: "commands.zoom.level",
+				items: [
+					"zoom:50",
+					"zoom:100",
+					"zoom:150",
+					"zoom:200",
+					"zoom:400"
+				]
+			},
+			["zoom:in", "zoom:out"],
+			[
+				"zoom:fit-page",
+				"zoom:fit-width",
+				"zoom:automatic"
+			]
+		],
+		"outline-item": [
+			["outline:add", "outline:add-child"],
+			[
+				"outline:rename",
+				"outline:set-destination",
+				"outline:properties"
+			],
+			["outline:delete"]
+		],
+		"attachment-item": [["attachment:save", "attachment:go-to"], ["attachment:delete"]],
+		page: [
+			["page:rotate-clockwise", "page:rotate-counterclockwise"],
+			[
+				"page:insert-blank",
+				"page:insert-file",
+				"page:duplicate"
+			],
+			["page:extract"],
+			["page:delete"]
+		]
 	},
-	strips: {
-		annotation: annotationStrip,
-		selection: selectionStrip
+	panels: {
+		thumbnails: {
+			side: "start",
+			titleKey: "panels.thumbnails",
+			icon: "sidebar"
+		},
+		outline: {
+			side: "start",
+			titleKey: "panels.outline",
+			icon: "listTree"
+		},
+		attachments: {
+			side: "start",
+			titleKey: "panels.attachments",
+			icon: "paperclip"
+		},
+		search: {
+			side: "end",
+			titleKey: "panels.search",
+			icon: "search"
+		},
+		comments: {
+			side: "end",
+			titleKey: "panels.comments",
+			icon: "comment"
+		},
+		style: {
+			side: "end",
+			titleKey: "panels.style",
+			icon: "palette"
+		},
+		stamps: {
+			side: "end",
+			titleKey: "panels.stamps",
+			icon: "rubberStamp"
+		},
+		signatures: {
+			side: "end",
+			titleKey: "panels.signatures",
+			icon: "signature"
+		},
+		redaction: {
+			side: "end",
+			titleKey: "panels.redaction",
+			icon: "redactionSidebar"
+		},
+		measurement: {
+			side: "end",
+			titleKey: "panels.measurement",
+			icon: "updateScale"
+		},
+		"form-design": {
+			side: "end",
+			titleKey: "panels.formDesign",
+			icon: "formDesign"
+		}
 	}
-});
-/** Menu lookup by id (arbitrary string). */
-function getMenu(schema, id) {
-	return schema.menus?.[id];
-}
-/** Secondary band lookup by mode-surface id. */
-function getModeBar(schema, id) {
-	return schema.modeBars?.[id];
-}
-/** Contextual strip lookup by context id ('annotation', …). */
-function getStrip(schema, id) {
-	return schema.strips?.[id];
-}
+};
+/** The default layout, which the `layout` function gets. */
+const defaultLayout = createLayout(DEFAULT_LAYOUT);
 //#endregion
-export { defaultChrome, getMenu, getModeBar, getStrip };
+export { DEFAULT_LAYOUT, defaultLayout };
 
 //# sourceMappingURL=chrome.js.map