element-book 7.0.8 → 9.0.0

package/dist/data/book-entry/book-element-example/book-element-example.d.ts

@@ -1,14 +1,15 @@
 import { Overwrite, RequireNonVoid, SetOptionalAndNullable } from '@augment-vir/common';
 import { PropertyInitMapBase, RenderParams, TypedEvent } from 'element-vir';
 import { CSSResult } from 'lit';
+import { GlobalValues } from '../../../ui/elements/element-book-app/element-book-config';
 import { BaseBookEntry } from '../base-book-entry';
 import { BookEntryTypeEnum } from '../book-entry-type';
 import { BookPage } from '../book-page/book-page';
 import { BookPageControlsInitBase, ControlsToValues } from '../book-page/book-page-controls';
-export type BookPageExampleRenderParams<ControlsInit extends BookPageControlsInitBase, StateInit extends PropertyInitMapBase> = Pick<RenderParams<any, any, StateInit, any, any, any>, 'state' | 'updateState'> & {
-    controls: ControlsToValues<ControlsInit>;
+export type BookPageExampleRenderParams<GlobalValuesType extends GlobalValues, ControlsInit extends BookPageControlsInitBase, StateInit extends PropertyInitMapBase> = Pick<RenderParams<any, any, StateInit, any, any, any>, 'state' | 'updateState'> & {
+    controls: ControlsToValues<ControlsInit> & GlobalValuesType;
 };
-export type BookElementExample<ControlsInit extends BookPageControlsInitBase = {}, StateInit extends PropertyInitMapBase = {}, RenderOutput = unknown> = Overwrite<BaseBookEntry, {
+export type BookElementExample<GlobalValuesType extends GlobalValues = {}, ControlsInit extends BookPageControlsInitBase = {}, StateInit extends PropertyInitMapBase = {}, RenderOutput = unknown> = Overwrite<BaseBookEntry, {
     parent: BookPage | undefined;
     entryType: BookEntryTypeEnum.ElementExample;
 } & {
@@ -22,10 +23,10 @@ export type BookElementExample<ControlsInit extends BookPageControlsInitBase = {
      */
     styles?: CSSResult | undefined;
     /** Render the example. */
-    renderCallback: RequireNonVoid<RenderOutput, (renderParams: BookPageExampleRenderParams<ControlsInit, StateInit>) => RenderOutput, 'renderCallback is missing a return statement'>;
+    renderCallback: RequireNonVoid<RenderOutput, (renderParams: BookPageExampleRenderParams<GlobalValuesType, ControlsInit, StateInit>) => RenderOutput, 'renderCallback is missing a return statement'>;
 }>;
 /**
  * The properties that are necessary to initialize an element example. Missing properties will be
  * filling in by the parent.
  */
-export type BookElementExampleInit<Controls extends BookPageControlsInitBase, StateInit extends PropertyInitMapBase, RenderOutput> = SetOptionalAndNullable<Omit<BookElementExample<Controls, StateInit, RenderOutput>, 'entryType' | 'parent' | 'errors'>, 'descriptionParagraphs'>;
+export type BookElementExampleInit<GlobalValuesType extends GlobalValues, Controls extends BookPageControlsInitBase, StateInit extends PropertyInitMapBase, RenderOutput> = SetOptionalAndNullable<Omit<BookElementExample<GlobalValuesType, Controls, StateInit, RenderOutput>, 'entryType' | 'parent' | 'errors'>, 'descriptionParagraphs'>;

package/dist/data/book-entry/book-page/book-page.d.ts

@@ -1,9 +1,10 @@
 import { Overwrite } from '@augment-vir/common';
+import { GlobalValues } from '../../../ui/elements/element-book-app/element-book-config';
 import { BaseBookEntry } from '../base-book-entry';
 import { BookElementExample } from '../book-element-example/book-element-example';
 import { BookEntryTypeEnum } from '../book-entry-type';
 import { BookPageControlsInitBase } from './book-page-controls';
-export type BookPage<ParentPage extends BookPage | undefined = any, ControlsInit extends BookPageControlsInitBase = BookPageControlsInitBase> = Overwrite<BaseBookEntry, {
+export type BookPage<GlobalValuesType extends GlobalValues = {}, ParentPage extends BookPage | undefined = any, ControlsInit extends BookPageControlsInitBase = BookPageControlsInitBase> = Overwrite<BaseBookEntry, {
     parent: ParentPage;
     entryType: BookEntryTypeEnum.Page;
 }> & {

package/dist/data/book-entry/book-page/current-controls.d.ts

@@ -1,3 +1,4 @@
+import { GlobalValues } from '../../../ui/elements/element-book-app/element-book-config';
 import { BookTreeNode } from '../../book-tree/book-tree-node';
 import { BookPageControlsValues } from './book-page-controls';
 export type ControlsWrapper = {
@@ -9,4 +10,4 @@ export type CurrentControls = {
 };
 export declare function traverseCurrentControls(currentControls: CurrentControls, fullUrlBreadcrumbs: ReadonlyArray<string>): BookPageControlsValues;
 export declare function createNewCurrentControls(currentControls: CurrentControls, fullUrlBreadcrumbs: ReadonlyArray<string>, newValues: BookPageControlsValues): CurrentControls;
-export declare function createControlsFromTree(node: BookTreeNode): CurrentControls;
+export declare function createControlsFromTree(node: BookTreeNode, globalValues: GlobalValues): CurrentControls;

package/dist/data/book-entry/book-page/current-controls.js

@@ -43,7 +43,7 @@ export function createNewCurrentControls(currentControls, fullUrlBreadcrumbs, ne
     internalTraverseCurrentControls(newCurrentControls, fullUrlBreadcrumbs, newValues);
     return newCurrentControls;
 }
-export function createControlsFromTree(node) {
+export function createControlsFromTree(node, globalValues) {
     const currentControls = mapObjectValues(node.children, (childName, child) => {
         if (!isBookTreeNode(child, BookEntryTypeEnum.Page)) {
             return {
@@ -52,10 +52,13 @@ export function createControlsFromTree(node) {
             };
         }
         return {
-            children: createControlsFromTree(child),
-            controls: mapObjectValues(child.entry.controls, (name, setup) => {
-                return setup.initValue;
-            }),
+            children: createControlsFromTree(child, {}),
+            controls: {
+                ...globalValues,
+                ...mapObjectValues(child.entry.controls, (name, setup) => {
+                    return setup.initValue;
+                }),
+            },
         };
     });
     return currentControls;

package/dist/data/book-entry/book-page/define-book-page.d.ts

@@ -1,18 +1,27 @@
 import { SetOptionalAndNullable } from '@augment-vir/common';
 import { PropertyInitMapBase } from 'element-vir';
+import { GlobalValues } from '../../../ui/elements/element-book-app/element-book-config';
 import { InfiniteRecursionLimiter } from '../../../util/type';
 import { BookElementExampleInit } from '../book-element-example/book-element-example';
 import { BookPage } from './book-page';
 import { BookPageControlsInitBase } from './book-page-controls';
-export type DefineExampleCallback<ControlsInit extends BookPageControlsInitBase = BookPageControlsInitBase> = <StateInit extends PropertyInitMapBase, RenderOutput>(exampleInit: BookElementExampleInit<ControlsInit, StateInit, RenderOutput>) => void;
-export type ElementExamplesDefiner<ControlsInit extends BookPageControlsInitBase = BookPageControlsInitBase> = (params: {
-    defineExample: DefineExampleCallback<ControlsInit>;
+export type DefineExampleCallback<GlobalValuesType extends GlobalValues = {}, ControlsInit extends BookPageControlsInitBase = BookPageControlsInitBase> = <StateInit extends PropertyInitMapBase, RenderOutput>(exampleInit: BookElementExampleInit<GlobalValuesType, ControlsInit, StateInit, RenderOutput>) => void;
+export type ElementExamplesDefiner<GlobalValuesType extends GlobalValues = {}, ControlsInit extends BookPageControlsInitBase = BookPageControlsInitBase> = (params: {
+    defineExample: DefineExampleCallback<GlobalValuesType, ControlsInit>;
 }) => void;
 type CollapseControlsInit<ParentPage extends BookPage | undefined, CurrentControlsInit extends BookPageControlsInitBase, 
 /** Prevent infinite recursion TypeScript errors. */
-RecursionDepth = InfiniteRecursionLimiter> = CurrentControlsInit & (RecursionDepth extends [any, ...infer RemainingDepth] ? ParentPage extends BookPage<infer GrandParentPage, infer ParentControls> ? CollapseControlsInit<GrandParentPage, ParentControls, RemainingDepth> : {} : {});
-export type BookPageInit<ParentPage extends BookPage | undefined, CurrentControlsInit extends BookPageControlsInitBase> = SetOptionalAndNullable<Omit<BookPage<ParentPage, CurrentControlsInit>, 'entryType' | 'elementExamples' | 'errors'>, 'controls' | 'descriptionParagraphs'> & {
-    elementExamplesCallback?: ElementExamplesDefiner<CollapseControlsInit<ParentPage, CurrentControlsInit>> | undefined;
+RecursionDepth = InfiniteRecursionLimiter> = CurrentControlsInit & (RecursionDepth extends [any, ...infer RemainingDepth] ? ParentPage extends BookPage<infer GlobalValuesType, infer GrandParentPage, infer ParentControls> ? CollapseControlsInit<GrandParentPage, ParentControls, RemainingDepth> : {} : {});
+type CollapseGlobalValuesType<ParentPage extends BookPage | undefined, GlobalValuesType extends GlobalValues, 
+/** Prevent infinite recursion TypeScript errors. */
+RecursionDepth = InfiniteRecursionLimiter> = GlobalValuesType & (RecursionDepth extends [any, ...infer RemainingDepth] ? ParentPage extends BookPage<infer GlobalValuesType, infer GrandParentPage, infer ParentControls> ? CollapseGlobalValuesType<GrandParentPage, GlobalValuesType, RemainingDepth> : {} : {});
+export type BookPageInit<GlobalValuesType extends GlobalValues, ParentPage extends BookPage | undefined, CurrentControlsInit extends BookPageControlsInitBase> = SetOptionalAndNullable<Omit<BookPage<any, ParentPage, CurrentControlsInit>, 'entryType' | 'elementExamples' | 'errors'>, 'controls' | 'descriptionParagraphs'> & {
+    elementExamplesCallback?: ElementExamplesDefiner<CollapseGlobalValuesType<ParentPage, GlobalValuesType>, CollapseControlsInit<ParentPage, CurrentControlsInit>> | undefined;
 };
-export declare function defineBookPage<const ParentPage extends BookPage | undefined, const ControlsInit extends BookPageControlsInitBase = {}>(pageInit: BookPageInit<ParentPage, ControlsInit>): BookPage<ParentPage, ControlsInit>;
+/**
+ * Allows insertion of the global values type to a page. This is not necessary if you aren't using
+ * global values in your element-book instance.
+ */
+export declare function defineBookPageWithGlobals<const GlobalValuesType extends GlobalValues = {}>(): <const ParentPage extends BookPage | undefined = undefined, const ControlsInit extends BookPageControlsInitBase = {}>(pageInit: BookPageInit<GlobalValuesType, ParentPage, ControlsInit>) => BookPage<GlobalValuesType, ParentPage, ControlsInit>;
+export declare function defineBookPage<const GlobalValuesType extends GlobalValues = {}, const ParentPage extends BookPage | undefined = undefined, const ControlsInit extends BookPageControlsInitBase = {}>(pageInit: BookPageInit<GlobalValuesType, ParentPage, ControlsInit>): BookPage<GlobalValuesType, ParentPage, ControlsInit>;
 export {};

package/dist/data/book-entry/book-page/define-book-page.js

@@ -1,6 +1,15 @@
 import { isTruthy } from '@augment-vir/common';
 import { BookEntryTypeEnum } from '../book-entry-type';
 import { titleToUrlBreadcrumb } from '../url-breadcrumbs';
+/**
+ * Allows insertion of the global values type to a page. This is not necessary if you aren't using
+ * global values in your element-book instance.
+ */
+export function defineBookPageWithGlobals() {
+    return (pageInit) => {
+        return defineBookPage(pageInit);
+    };
+}
 export function defineBookPage(pageInit) {
     const page = {
         ...pageInit,

package/dist/ui/elements/book-breadcrumbs.element.js

@@ -1,4 +1,4 @@
-import { assign, css, html } from 'element-vir';
+import { css, html } from 'element-vir';
 import { BookMainRoute } from '../../routing/book-routing';
 import { BookRouteLink } from './common/book-route-link.element';
 import { defineBookElement } from './define-book-element';
@@ -30,8 +30,7 @@ export const BookBreadcrumbs = defineBookElement()({
                       <span class="spacer">&gt;</span>
                   `;
             return html `
-                <${BookRouteLink}
-                    ${assign(BookRouteLink, {
+                <${BookRouteLink.assign({
                 route: {
                     hash: undefined,
                     search: undefined,
@@ -41,8 +40,7 @@ export const BookBreadcrumbs = defineBookElement()({
                     ],
                 },
                 router: inputs.router,
-            })}
-                >
+            })}>
                     ${currentPath}
                 </${BookRouteLink}>
                 ${spacer}

package/dist/ui/elements/book-nav.element.js

@@ -1,6 +1,6 @@
 import { checkIfEntirelyInScrollView, waitForAnimationFrame } from '@augment-vir/browser';
 import { areJsonEqual } from '@augment-vir/common';
-import { assign, classMap, css, html, renderIf } from 'element-vir';
+import { classMap, css, html, renderIf } from 'element-vir';
 import { Element16Icon, ViraIcon } from 'vira';
 import { BookEntryTypeEnum } from '../../data/book-entry/book-entry-type';
 import { isBookTreeNode } from '../../data/book-tree/book-tree';
@@ -76,8 +76,7 @@ export const BookNav = defineBookElement()({
             `;
             return html `
                 <li style=${liStyle}>
-                    <${BookRouteLink}
-                        ${assign(BookRouteLink, {
+                    <${BookRouteLink.assign({
                 router: inputs.router,
                 route: {
                     paths: [
@@ -95,9 +94,7 @@ export const BookNav = defineBookElement()({
                     >
                         <div class="title-text">
                             ${renderIf(isBookTreeNode(treeNode, BookEntryTypeEnum.ElementExample), html `
-                                    <${ViraIcon}
-                                        ${assign(ViraIcon, { icon: Element16Icon })}
-                                    ></${ViraIcon}>
+                                    <${ViraIcon.assign({ icon: Element16Icon })}></${ViraIcon}>
                                 `)}
                             ${treeNode.entry.title}
                         </div>

package/dist/ui/elements/element-book-app/element-book-app.element.d.ts

@@ -1,7 +1,7 @@
 import { CurrentControls } from '../../../data/book-entry/book-page/current-controls';
 import { ColorTheme } from '../../color-theme/color-theme';
 import { ThemeConfig } from '../../color-theme/create-color-theme';
-import { ElementBookConfig } from './element-book-config';
+import { ElementBookConfig, GlobalValues } from './element-book-config';
 type ColorThemeState = {
     config: ThemeConfig | undefined;
     theme: ColorTheme;
@@ -11,7 +11,8 @@ export declare const ElementBookApp: import("element-vir").DeclarativeElementDef
     router: Readonly<import("spa-router-vir").SpaRouter<import("../../../routing/book-routing").ValidBookPaths, Record<string, string> | undefined, undefined>> | undefined;
     colors: ColorThemeState;
     treeBasedCurrentControls: {
-        trigger: ElementBookConfig['entries'];
+        entries: ElementBookConfig['entries'];
+        globalValues: GlobalValues;
         currentControls: CurrentControls;
     } | undefined;
 }, {

package/dist/ui/elements/element-book-app/element-book-app.element.js

@@ -1,5 +1,5 @@
 import { areJsonEqual, extractErrorMessage } from '@augment-vir/common';
-import { assign, css, defineElement, defineElementEvent, html, listen } from 'element-vir';
+import { css, defineElement, defineElementEvent, html, listen } from 'element-vir';
 import { createControlsFromTree, createNewCurrentControls, } from '../../../data/book-entry/book-page/current-controls';
 import { createBookTreeFromEntries } from '../../../data/book-tree/book-tree';
 import { searchFlattenedNodes } from '../../../data/book-tree/search-nodes';
@@ -132,11 +132,13 @@ export const ElementBookApp = defineElement()({
                 debug,
             });
             if (!state.treeBasedCurrentControls ||
-                state.treeBasedCurrentControls.trigger !== inputs.entries) {
+                state.treeBasedCurrentControls.entries !== inputs.entries ||
+                state.treeBasedCurrentControls.globalValues !== inputs.globalValues) {
                 updateState({
                     treeBasedCurrentControls: {
-                        trigger: inputs.entries,
-                        currentControls: createControlsFromTree(originalTree.tree),
+                        entries: inputs.entries,
+                        globalValues: inputs.globalValues ?? {},
+                        currentControls: createControlsFromTree(originalTree.tree, inputs.globalValues ?? {}),
                     },
                 });
             }
@@ -152,9 +154,9 @@ export const ElementBookApp = defineElement()({
             const currentControls = state.treeBasedCurrentControls?.currentControls;
             if (!currentControls) {
                 return html `
-                    <${BookError}
-                        ${assign(BookError, { message: 'Failed to generate page controls.' })}
-                    ></${BookError}>
+                    <${BookError.assign({
+                    message: 'Failed to generate page controls.',
+                })}></${BookError}>
                 `;
             }
             if (inputs.debug) {
@@ -191,30 +193,24 @@ export const ElementBookApp = defineElement()({
                 });
             })}
                 >
-                    <${BookNav}
-                        ${assign(BookNav, {
+                    <${BookNav.assign({
                 flattenedNodes: originalTree.flattenedNodes,
                 router: state.router,
-                selectedPath: searchQuery
-                    ? undefined
-                    : state.currentRoute.paths.slice(1),
-            })}
-                    >
+                selectedPath: searchQuery ? undefined : state.currentRoute.paths.slice(1),
+            })}>
                         <slot
                             name=${ElementBookSlotName.NavHeader}
                             slot=${ElementBookSlotName.NavHeader}
                         ></slot>
                     </${BookNav}>
-                    <${BookEntryDisplay}
-                        ${assign(BookEntryDisplay, {
+                    <${BookEntryDisplay.assign({
                 currentRoute: state.currentRoute,
                 currentNodes,
                 router: state.router,
                 debug,
                 currentControls,
                 originalTree: originalTree.tree,
-            })}
-                    >
+            })}>
                         <slot
                             name=${ElementBookSlotName.Footer}
                             slot=${ElementBookSlotName.Footer}

package/dist/ui/elements/element-book-app/element-book-config.d.ts

@@ -5,6 +5,7 @@ export type ElementBookConfig = {
     /** All element-book entries in order. */
     entries: ReadonlyArray<BookEntry>;
 } & PartialAndUndefined<OptionalConfig>;
+export type GlobalValues = Readonly<Record<string, unknown>>;
 type OptionalConfig = {
     /** The base theme color from which all other element-book colors will be generated from. */
     themeColor: string;
@@ -12,6 +13,7 @@ type OptionalConfig = {
     everythingTitle: string;
     everythingDescriptionParagraphs: ReadonlyArray<string>;
     debug: boolean;
+    globalValues: GlobalValues;
 } & RequireExactlyOne<{
     /**
      * Set this internal router config if element-book is intended to be the current website's

package/dist/ui/elements/entry-display/book-breadcrumbs-bar.element.js

@@ -1,5 +1,5 @@
 import { wait } from '@augment-vir/common';
-import { assign, css, html, listen, renderIf } from 'element-vir';
+import { css, html, listen, renderIf } from 'element-vir';
 import { BookMainRoute, defaultBookFullRoute, } from '../../../routing/book-routing';
 import { colorThemeCssVars } from '../../color-theme/color-theme';
 import { ChangeRouteEvent } from '../../events/change-route.event';
@@ -26,12 +26,10 @@ export const BookBreadcrumbsBar = defineBookElement()({
             ${renderIf(!!inputs.currentSearch, html `
                      
                 `, html `
-                    <${BookBreadcrumbs}
-                        ${assign(BookBreadcrumbs, {
+                    <${BookBreadcrumbs.assign({
             currentRoute: inputs.currentRoute,
             router: inputs.router,
-        })}
-                    ></${BookBreadcrumbs}>
+        })}></${BookBreadcrumbs}>
                 `)}
             <input
                 placeholder="search"

package/dist/ui/elements/entry-display/book-entry-display.element.js

@@ -52,13 +52,11 @@ export const BookEntryDisplay = defineBookElement()({
             originalTree: inputs.originalTree,
         });
         return html `
-            <${BookBreadcrumbsBar}
-                ${assign(BookBreadcrumbsBar, {
+            <${BookBreadcrumbsBar.assign({
             currentSearch,
             currentRoute: inputs.currentRoute,
             router: inputs.router,
-        })}
-            ></${BookBreadcrumbsBar}>
+        })}></${BookBreadcrumbsBar}>
             <div class="all-book-entries-wrapper">${entryTemplates}</div>
             <slot name=${ElementBookSlotName.Footer}></slot>
         `;
@@ -114,39 +112,35 @@ function createNodeTemplates({ currentNodes, isTopLevel, router, isSearching, cu
         : undefined;
     const hiddenAncestorControlsTemplate = hiddenAncestorControls && isLengthAtLeast(currentNodes, 1)
         ? html `
-                  <${BookPageControls}
-                      ${assign(BookPageControls, {
+                  <${BookPageControls.assign({
             config: hiddenAncestorControls.config,
             currentValues: hiddenAncestorControls.current,
             fullUrlBreadcrumbs: hiddenAncestorControls.breadcrumbs,
-        })}
-                  ></${BookPageControls}>
+        })}></${BookPageControls}>
               `
         : '';
     const templates = repeat(currentNodes, (node) => node.fullUrlBreadcrumbs.join('>'), (currentNode, index) => {
         if (isBookTreeNode(currentNode, BookEntryTypeEnum.Page)) {
             return html `
-                    <${BookPageWrapper}
-                        class="block-entry"
-                        ${assign(BookPageWrapper, {
+                    <${BookPageWrapper.assign({
                 isTopLevel,
                 pageNode: currentNode,
                 currentControls,
                 router,
             })}
+                        class="block-entry"
                     ></${BookPageWrapper}>
                 `;
         }
         else if (isBookTreeNode(currentNode, BookEntryTypeEnum.ElementExample)) {
             const controlsForElementExample = traverseCurrentControls(currentControls, currentNode.fullUrlBreadcrumbs.slice(0, -1));
             return html `
-                    <${BookElementExampleWrapper}
-                        class="inline-entry"
-                        ${assign(BookElementExampleWrapper, {
+                    <${BookElementExampleWrapper.assign({
                 elementExampleNode: currentNode,
                 currentPageControls: controlsForElementExample,
                 router,
             })}
+                        class="inline-entry"
                     ></${BookElementExampleWrapper}>
                 `;
         }

package/dist/ui/elements/entry-display/book-page/book-page-controls.element.js

@@ -1,6 +1,6 @@
 import { extractEventTarget } from '@augment-vir/browser';
 import { isRuntimeTypeOf } from '@augment-vir/common';
-import { assign, css, defineElementEvent, html, listen, renderIf } from 'element-vir';
+import { css, defineElementEvent, html, listen, renderIf } from 'element-vir';
 import { Options24Icon, ViraIcon } from 'vira';
 import { BookPageControlTypeEnum, isControlInitType, } from '../../../../data/book-entry/book-page/book-page-controls';
 import { colorThemeCssVars } from '../../../color-theme/color-theme';
@@ -74,9 +74,8 @@ export const BookPageControls = defineBookElement()({
             return html `
                     <div class="control-wrapper">
                         ${renderIf(index === 0, html `
-                                <${ViraIcon}
+                                <${ViraIcon.assign({ icon: Options24Icon })}
                                     class="options-icon"
-                                    ${assign(ViraIcon, { icon: Options24Icon })}
                                 ></${ViraIcon}>
                             `)}
                         <label class="control-wrapper">

package/dist/ui/elements/entry-display/book-page/book-page-wrapper.element.js

@@ -1,5 +1,5 @@
 import { combineErrors } from '@augment-vir/common';
-import { assign, css, html } from 'element-vir';
+import { css, html } from 'element-vir';
 import { traverseCurrentControls, } from '../../../../data/book-entry/book-page/current-controls';
 import { BookMainRoute } from '../../../../routing/book-routing';
 import { BookError } from '../../common/book-error.element';
@@ -53,37 +53,29 @@ export const BookPageWrapper = defineBookElement()({
         return html `
             <div class="page-header block-entry">
                 <div class="title-group">
-                    <${BookRouteLink}
-                        ${assign(BookRouteLink, {
+                    <${BookRouteLink.assign({
             route: {
                 paths: linkPaths,
                 hash: undefined,
                 search: undefined,
             },
             router: inputs.router,
-        })}
-                    >
+        })}>
                         ${titleTemplate}
                     </${BookRouteLink}>
                     ${!!error
             ? html `
-                              <${BookError}
-                                  ${assign(BookError, { message: error.message })}
-                              ></${BookError}>
+                              <${BookError.assign({ message: error.message })}></${BookError}>
                           `
             : html `
-                              <${BookEntryDescription}
-                                  ${assign(BookEntryDescription, {
+                              <${BookEntryDescription.assign({
                 descriptionParagraphs: inputs.pageNode.entry.descriptionParagraphs ?? [],
-            })}
-                              ></${BookEntryDescription}>
-                              <${BookPageControls}
-                                  ${assign(BookPageControls, {
+            })}></${BookEntryDescription}>
+                              <${BookPageControls.assign({
                 config: inputs.pageNode.entry.controls,
                 currentValues: traverseCurrentControls(inputs.currentControls, inputs.pageNode.fullUrlBreadcrumbs),
                 fullUrlBreadcrumbs: inputs.pageNode.fullUrlBreadcrumbs,
-            })}
-                              ></${BookPageControls}>
+            })}></${BookPageControls}>
                           `}
                 </div>
             </div>

package/dist/ui/elements/entry-display/element-example/book-element-example-controls.element.js

@@ -1,4 +1,4 @@
-import { assign, css, html } from 'element-vir';
+import { css, html } from 'element-vir';
 import { BookMainRoute } from '../../../../routing/book-routing';
 import { colorThemeCssVars } from '../../../color-theme/color-theme';
 import { BookRouteLink } from '../../common/book-route-link.element';
@@ -19,16 +19,14 @@ export const BookElementExampleControls = defineBookElement()({
             ...inputs.elementExampleNode.fullUrlBreadcrumbs,
         ];
         return html `
-            <${BookRouteLink}
-                ${assign(BookRouteLink, {
+            <${BookRouteLink.assign({
             route: {
                 paths: linkPaths,
                 hash: undefined,
                 search: undefined,
             },
             router: inputs.router,
-        })}
-            >
+        })}>
                 ${inputs.elementExampleNode.entry.title}
             </${BookRouteLink}>
         `;

package/dist/ui/elements/entry-display/element-example/book-element-example-viewer.element.js

@@ -1,5 +1,5 @@
 import { combineErrors, extractErrorMessage } from '@augment-vir/common';
-import { assign, html, renderIf } from 'element-vir';
+import { html, renderIf } from 'element-vir';
 import { unsetInternalState } from '../../../../data/unset';
 import { BookError } from '../../common/book-error.element';
 import { defineBookElement } from '../../define-book-element';
@@ -43,11 +43,9 @@ export const BookElementExampleViewer = defineBookElement()({
         catch (error) {
             console.error(error);
             return html `
-                <${BookError}
-                    ${assign(BookError, {
+                <${BookError.assign({
                 message: `${inputs.elementExampleNode.entry.title} failed: ${extractErrorMessage(error)}`,
-            })}
-                ></${BookError}>
+            })}></${BookError}>
             `;
         }
     },

package/dist/ui/elements/entry-display/element-example/book-element-example-wrapper.element.js

@@ -1,4 +1,5 @@
-import { assign, css, html } from 'element-vir';
+import { omitObjectKeys } from '@augment-vir/common';
+import { css, html } from 'element-vir';
 import { colorThemeCssVars } from '../../../color-theme/color-theme';
 import { defineBookElement } from '../../define-book-element';
 import { BookElementExampleControls } from './book-element-example-controls.element';
@@ -41,12 +42,8 @@ export const BookElementExampleWrapper = defineBookElement()({
     renderCallback({ inputs }) {
         return html `
             <div class="individual-example-wrapper">
-                <${BookElementExampleControls}
-                    ${assign(BookElementExampleControls, inputs)}
-                ></${BookElementExampleControls}>
-                <${BookElementExampleViewer}
-                    ${assign(BookElementExampleViewer, inputs)}
-                ></${BookElementExampleViewer}>
+                <${BookElementExampleControls.assign(omitObjectKeys(inputs, ['currentPageControls']))}></${BookElementExampleControls}>
+                <${BookElementExampleViewer.assign(inputs)}></${BookElementExampleViewer}>
             </div>
         `;
     },

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "element-book",
-    "version": "7.0.8",
+    "version": "9.0.0",
     "keywords": [
         "book",
         "design system",
@@ -39,28 +39,28 @@
         "test:watch": "web-test-runner --color --watch --config configs/web-test-runner.config.mjs"
     },
     "dependencies": {
-        "@augment-vir/browser": "^15.3.0",
-        "@augment-vir/common": "^15.3.0",
+        "@augment-vir/browser": "^15.4.0",
+        "@augment-vir/common": "^15.4.0",
         "colorjs.io": "0.4.5",
-        "element-vir": "^14.0.3",
+        "element-vir": "^14.2.1",
         "lit-css-vars": "^2.0.3",
         "object-shape-tester": "^0.3.0",
         "spa-router-vir": "^2.1.1",
-        "typed-event-target": "^1.3.0",
-        "vira": "^0.6.0"
+        "typed-event-target": "^1.3.1",
+        "vira": "^0.6.1"
     },
     "devDependencies": {
-        "@augment-vir/browser-testing": "^15.3.0",
+        "@augment-vir/browser-testing": "^15.4.0",
         "@open-wc/testing": "^3.2.0",
         "@types/chai": "^4.3.5",
         "@types/mocha": "^10.0.1",
         "@web/dev-server-esbuild": "^0.4.1",
-        "@web/test-runner": "^0.16.1",
-        "@web/test-runner-commands": "^0.7.0",
+        "@web/test-runner": "^0.17.0",
+        "@web/test-runner-commands": "^0.8.0",
         "@web/test-runner-playwright": "^0.10.1",
-        "@web/test-runner-visual-regression": "^0.8.0",
+        "@web/test-runner-visual-regression": "^0.8.2",
         "istanbul-smart-text-reporter": "^1.1.2",
-        "type-fest": "^3.12.0",
+        "type-fest": "^4.0.0",
         "typescript": "^5.1.6"
     }
 }