element-book 9.0.0 → 10.0.0

package/dist/data/book-tree/book-tree.d.ts

@@ -4,11 +4,9 @@ import { BookTree, BookTreeNode } from './book-tree-node';
 export declare function doesNodeHaveEntryType<const EntryType extends BookEntryTypeEnum>(node: BookTreeNode<any>, entryType: EntryType): node is BookTreeNode<EntryType>;
 export declare function isBookTreeNode<const SpecificType extends BookEntryTypeEnum>(input: unknown, entryType: SpecificType): input is BookTreeNode<SpecificType>;
 export declare function isAnyBookTreeNode(input: unknown): input is BookTreeNode<BookEntryTypeEnum>;
-export declare function createEmptyBookTreeRoot(title: string | undefined, descriptionParagraphs: ReadonlyArray<string>): BookTreeNode<BookEntryTypeEnum.Root>;
-export declare function createBookTreeFromEntries({ entries, everythingTitle, everythingDescriptionParagraphs, debug, }: {
+export declare function createEmptyBookTreeRoot(): BookTreeNode<BookEntryTypeEnum.Root>;
+export declare function createBookTreeFromEntries({ entries, debug, }: {
     entries: ReadonlyArray<BookEntry>;
-    everythingTitle: string | undefined;
-    everythingDescriptionParagraphs: ReadonlyArray<string>;
     debug: boolean;
 }): BookTree;
 export declare function traverseToImmediateParent(entryOrNode: Readonly<BookEntry> | BookTreeNode, currentTree: Readonly<BookTreeNode>): BookTreeNode | undefined;

package/dist/data/book-tree/book-tree.js

@@ -1,4 +1,4 @@
-import { makeWritable, typedHasProperties } from '@augment-vir/common';
+import { typedHasProperties } from '@augment-vir/common';
 import { isBookEntry } from '../book-entry/book-entry';
 import { BookEntryTypeEnum } from '../book-entry/book-entry-type';
 import { listUrlBreadcrumbs, titleToUrlBreadcrumb } from '../book-entry/url-breadcrumbs';
@@ -17,15 +17,15 @@ export function isAnyBookTreeNode(input) {
         'entry',
     ]) && input[isBookTreeNodeMarker]);
 }
-export function createEmptyBookTreeRoot(title, descriptionParagraphs) {
+export function createEmptyBookTreeRoot() {
     const rootNode = {
         [isBookTreeNodeMarker]: true,
         entry: {
             entryType: BookEntryTypeEnum.Root,
-            title: title || 'Everything',
+            title: '',
             parent: undefined,
             errors: [],
-            descriptionParagraphs: makeWritable(descriptionParagraphs),
+            descriptionParagraphs: [],
         },
         urlBreadcrumb: '',
         fullUrlBreadcrumbs: [],
@@ -34,12 +34,12 @@ export function createEmptyBookTreeRoot(title, descriptionParagraphs) {
     };
     return rootNode;
 }
-export function createBookTreeFromEntries({ entries, everythingTitle, everythingDescriptionParagraphs, debug, }) {
+export function createBookTreeFromEntries({ entries, debug, }) {
     const cachedTree = getTreeFromCache(entries);
     if (cachedTree) {
         return cachedTree;
     }
-    const tree = createEmptyBookTreeRoot(everythingTitle, everythingDescriptionParagraphs);
+    const tree = createEmptyBookTreeRoot();
     entries.forEach((newEntry) => addEntryToTree({ tree, newEntry, debug, manuallyAdded: true }));
     const flattenedNodes = flattenTree(tree);
     const bookTree = {

package/dist/data/book-tree/search-nodes.js

@@ -25,8 +25,16 @@ function isSearchingForErrors(searchQuery) {
 }
 export function searchFlattenedNodes({ flattenedNodes, searchQuery, }) {
     const includeInSearchResults = {};
+    function addChildren(treeNode) {
+        const childrenKeys = Object.values(treeNode.children).map((child) => {
+            addChildren(child);
+            return createBreadcrumbsSearchKey(child.fullUrlBreadcrumbs);
+        });
+        childrenKeys.forEach((keyToInclude) => (includeInSearchResults[keyToInclude] = true));
+    }
     flattenedNodes.forEach((treeNode) => {
         const matchesErrors = treeNode.entry.errors.length && isSearchingForErrors(searchQuery);
+        const currentNodeSearchKey = createBreadcrumbsSearchKey(treeNode.fullUrlBreadcrumbs);
         const shouldInclude = fuzzySearch({
             searchIn: [
                 treeNode.entry.title,
@@ -35,14 +43,16 @@ export function searchFlattenedNodes({ flattenedNodes, searchQuery, }) {
                 .join(' ')
                 .toLowerCase(),
             searchQuery: searchQuery.toLowerCase(),
-        }) || matchesErrors;
+        }) ||
+            matchesErrors ||
+            includeInSearchResults[currentNodeSearchKey];
         if (shouldInclude) {
             const keysToInclude = getFullTreeKeysToInclude(treeNode.fullUrlBreadcrumbs);
+            addChildren(treeNode);
             keysToInclude.forEach((keyToInclude) => (includeInSearchResults[keyToInclude] = true));
         }
         else {
-            const currentNodeKey = createBreadcrumbsSearchKey(treeNode.fullUrlBreadcrumbs);
-            includeInSearchResults[currentNodeKey] = false;
+            includeInSearchResults[currentNodeSearchKey] = false;
         }
     });
     return flattenedNodes.filter((treeNode) => {

package/dist/ui/elements/book-nav/book-nav-filter.d.ts

@@ -0,0 +1,2 @@
+import { BookTreeNode } from '../../../data/book-tree/book-tree-node';
+export declare function shouldShowTreeNodeInNav(currentNode: Readonly<BookTreeNode>, selectedPath: undefined | ReadonlyArray<string>): boolean;

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

@@ -0,0 +1,19 @@
+import { areJsonEqual } from '@augment-vir/common';
+import { BookEntryTypeEnum } from '../../../data/book-entry/book-entry-type';
+export function shouldShowTreeNodeInNav(currentNode, selectedPath) {
+    if (currentNode.entry.entryType === BookEntryTypeEnum.Root) {
+        return false;
+    }
+    if (currentNode.entry.entryType === BookEntryTypeEnum.Page) {
+        return true;
+    }
+    const isParentSelected = areJsonEqual(selectedPath, currentNode.fullUrlBreadcrumbs.slice(0, -1));
+    if (isParentSelected) {
+        return true;
+    }
+    const isSiblingSelected = areJsonEqual(selectedPath?.slice(0, -1), currentNode.fullUrlBreadcrumbs.slice(0, -1));
+    if (isSiblingSelected) {
+        return true;
+    }
+    return false;
+}

package/dist/ui/elements/{book-nav.element.d.ts → book-nav/book-nav.element.d.ts}

@@ -1,5 +1,5 @@
-import { BookTreeNode } from '../../data/book-tree/book-tree-node';
-import { BookRouter } from '../../routing/book-routing';
+import { BookTreeNode } from '../../../data/book-tree/book-tree-node';
+import { BookRouter } from '../../../routing/book-routing';
 export declare const BookNav: import("element-vir").DeclarativeElementDefinition<"book-nav", {
     flattenedNodes: ReadonlyArray<Readonly<BookTreeNode>>;
     selectedPath: ReadonlyArray<string> | undefined;

package/dist/ui/elements/{book-nav.element.js → book-nav/book-nav.element.js}

@@ -2,13 +2,14 @@ import { checkIfEntirelyInScrollView, waitForAnimationFrame } from '@augment-vir
 import { areJsonEqual } from '@augment-vir/common';
 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';
-import { BookMainRoute } from '../../routing/book-routing';
-import { colorThemeCssVars } from '../color-theme/color-theme';
-import { BookRouteLink } from './common/book-route-link.element';
-import { defineBookElement } from './define-book-element';
-import { ElementBookSlotName } from './element-book-app/element-book-app-slots';
+import { BookEntryTypeEnum } from '../../../data/book-entry/book-entry-type';
+import { isBookTreeNode } from '../../../data/book-tree/book-tree';
+import { BookMainRoute, defaultBookFullRoute } from '../../../routing/book-routing';
+import { colorThemeCssVars } from '../../color-theme/color-theme';
+import { BookRouteLink } from '../common/book-route-link.element';
+import { defineBookElement } from '../define-book-element';
+import { ElementBookSlotName } from '../element-book-app/element-book-app-slots';
+import { shouldShowTreeNodeInNav } from './book-nav-filter';
 export const BookNav = defineBookElement()({
     tagName: 'book-nav',
     cssVars: {
@@ -71,8 +72,11 @@ export const BookNav = defineBookElement()({
     `,
     renderCallback({ inputs }) {
         const navTreeTemplates = inputs.flattenedNodes.map((treeNode) => {
+            if (!shouldShowTreeNodeInNav(treeNode, inputs.selectedPath)) {
+                return;
+            }
             const liStyle = css `
-                --book-nav-internal-indent: ${treeNode.fullUrlBreadcrumbs.length};
+                --book-nav-internal-indent: ${treeNode.fullUrlBreadcrumbs.length - 1};
             `;
             return html `
                 <li style=${liStyle}>
@@ -103,7 +107,12 @@ export const BookNav = defineBookElement()({
             `;
         });
         return html `
-            <slot name=${ElementBookSlotName.NavHeader}></slot>
+            <${BookRouteLink.assign({
+            route: defaultBookFullRoute,
+            router: inputs.router,
+        })}>
+                <slot name=${ElementBookSlotName.NavHeader}>Book</slot>
+            </${BookRouteLink}>
             <ul>
                 ${navTreeTemplates}
             </ul>

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

@@ -9,6 +9,7 @@ type ColorThemeState = {
 export declare const ElementBookApp: import("element-vir").DeclarativeElementDefinition<"element-book-app", ElementBookConfig, {
     currentRoute: Readonly<Required<Readonly<import("spa-router-vir").FullRoute<import("../../../routing/book-routing").ValidBookPaths, Record<string, string> | undefined, undefined>>>>;
     router: Readonly<import("spa-router-vir").SpaRouter<import("../../../routing/book-routing").ValidBookPaths, Record<string, string> | undefined, undefined>> | undefined;
+    loading: boolean;
     colors: ColorThemeState;
     treeBasedCurrentControls: {
         entries: ElementBookConfig['entries'];

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

@@ -1,3 +1,4 @@
+import { waitForAnimationFrame } from '@augment-vir/browser';
 import { areJsonEqual, extractErrorMessage } from '@augment-vir/common';
 import { css, defineElement, defineElementEvent, html, listen } from 'element-vir';
 import { createControlsFromTree, createNewCurrentControls, } from '../../../data/book-entry/book-page/current-controls';
@@ -8,7 +9,7 @@ import { createBookRouter } from '../../../routing/create-book-router';
 import { colorThemeCssVars, setThemeCssVars } from '../../color-theme/color-theme';
 import { createTheme } from '../../color-theme/create-color-theme';
 import { ChangeRouteEvent } from '../../events/change-route.event';
-import { BookNav, scrollSelectedNavElementIntoView } from '../book-nav.element';
+import { BookNav, scrollSelectedNavElementIntoView } from '../book-nav/book-nav.element';
 import { BookError } from '../common/book-error.element';
 import { BookEntryDisplay } from '../entry-display/book-entry-display.element';
 import { BookPageControls } from '../entry-display/book-page/book-page-controls.element';
@@ -22,6 +23,7 @@ export const ElementBookApp = defineElement()({
     stateInitStatic: {
         currentRoute: defaultBookFullRoute,
         router: undefined,
+        loading: false,
         colors: {
             config: undefined,
             theme: createTheme(undefined),
@@ -63,11 +65,16 @@ export const ElementBookApp = defineElement()({
             overflow-y: auto;
             max-height: 100%;
             top: 0;
+            max-width: min(400px, 40%);
+        }
+
+        .loading {
+            padding: 64px;
         }
     `,
-    initCallback({ host }) {
+    initCallback({ host, state }) {
         setTimeout(() => {
-            scrollNav(host);
+            scrollNav(host, extractSearchQuery(state.currentRoute.paths), state.currentRoute);
         }, 1000);
     },
     cleanupCallback({ state, updateState }) {
@@ -124,11 +131,9 @@ export const ElementBookApp = defineElement()({
                 });
                 setThemeCssVars(host, newTheme);
             }
-            const debug = inputs.debug ?? false;
+            const debug = inputs._debug ?? false;
             const originalTree = createBookTreeFromEntries({
                 entries: inputs.entries,
-                everythingTitle: inputs.everythingTitle,
-                everythingDescriptionParagraphs: inputs.everythingDescriptionParagraphs ?? [],
                 debug,
             });
             if (!state.treeBasedCurrentControls ||
@@ -159,14 +164,21 @@ export const ElementBookApp = defineElement()({
                 })}></${BookError}>
                 `;
             }
-            if (inputs.debug) {
+            if (inputs._debug) {
                 console.info({ currentControls });
             }
             return html `
                 <div
                     class="root"
-                    ${listen(ChangeRouteEvent, (event) => {
+                    ${listen(ChangeRouteEvent, async (event) => {
                 const entryDisplay = host.shadowRoot.querySelector(BookEntryDisplay.tagName);
+                updateState({ loading: true });
+                /** Wait for the loading div to show up. */
+                while (!host.shadowRoot.querySelector('.loading')) {
+                    console.log('waiting');
+                    await waitForAnimationFrame();
+                }
+                await waitForAnimationFrame();
                 if (entryDisplay) {
                     entryDisplay.scroll({ top: 0, behavior: 'smooth' });
                 }
@@ -178,7 +190,8 @@ export const ElementBookApp = defineElement()({
                 if (!(navElement instanceof BookNav)) {
                     throw new Error(`Failed to find child '${BookNav.tagName}'`);
                 }
-                scrollNav(host);
+                updateState({ loading: false });
+                scrollNav(host, searchQuery, state.currentRoute);
             })}
                     ${listen(BookPageControls.events.controlValueChange, (event) => {
                 if (!state.treeBasedCurrentControls) {
@@ -203,19 +216,25 @@ export const ElementBookApp = defineElement()({
                             slot=${ElementBookSlotName.NavHeader}
                         ></slot>
                     </${BookNav}>
-                    <${BookEntryDisplay.assign({
-                currentRoute: state.currentRoute,
-                currentNodes,
-                router: state.router,
-                debug,
-                currentControls,
-                originalTree: originalTree.tree,
-            })}>
-                        <slot
-                            name=${ElementBookSlotName.Footer}
-                            slot=${ElementBookSlotName.Footer}
-                        ></slot>
-                    </${BookEntryDisplay}>
+                    ${state.loading
+                ? html `
+                              <div class="loading">Loading...</div>
+                          `
+                : html `
+                              <${BookEntryDisplay.assign({
+                    currentRoute: state.currentRoute,
+                    currentNodes,
+                    router: state.router,
+                    debug,
+                    currentControls,
+                    originalTree: originalTree.tree,
+                })}>
+                                  <slot
+                                      name=${ElementBookSlotName.Footer}
+                                      slot=${ElementBookSlotName.Footer}
+                                  ></slot>
+                              </${BookEntryDisplay}>
+                          `}
                 </div>
             `;
         }
@@ -227,7 +246,14 @@ export const ElementBookApp = defineElement()({
         }
     },
 });
-async function scrollNav(host) {
+async function scrollNav(host, searchQuery, currentRoutes) {
+    /** If there is a search query, then there will be no selected nav to scroll to. */
+    if (searchQuery) {
+        return;
+    }
+    if (currentRoutes.paths.length <= 1) {
+        return;
+    }
     const navElement = host.shadowRoot.querySelector(BookNav.tagName);
     if (!(navElement instanceof BookNav)) {
         throw new Error(`Failed to find child '${BookNav.tagName}'`);

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

@@ -9,10 +9,7 @@ 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;
-    /** The title to use for the "Everything" nav link. */
-    everythingTitle: string;
-    everythingDescriptionParagraphs: ReadonlyArray<string>;
-    debug: boolean;
+    _debug: boolean;
     globalValues: GlobalValues;
 } & RequireExactlyOne<{
     /**

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

@@ -110,7 +110,9 @@ function createNodeTemplates({ currentNodes, isTopLevel, router, isSearching, cu
     const hiddenAncestorControls = isLengthAtLeast(currentNodes, 1)
         ? getFlattenedControlsFromHiddenParents(currentNodes, currentControls, currentNodes[0], originalTree)
         : undefined;
-    const hiddenAncestorControlsTemplate = hiddenAncestorControls && isLengthAtLeast(currentNodes, 1)
+    const hiddenAncestorControlsTemplate = hiddenAncestorControls &&
+        Object.values(hiddenAncestorControls.config).length &&
+        isLengthAtLeast(currentNodes, 1)
         ? html `
                   <${BookPageControls.assign({
             config: hiddenAncestorControls.config,
@@ -145,9 +147,7 @@ function createNodeTemplates({ currentNodes, isTopLevel, router, isSearching, cu
                 `;
         }
         else if (isBookTreeNode(currentNode, BookEntryTypeEnum.Root)) {
-            return html `
-                    <h1>${currentNode.entry.title}</h1>
-                `;
+            return html ``;
         }
         else {
             return html `

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "element-book",
-    "version": "9.0.0",
+    "version": "10.0.0",
     "keywords": [
         "book",
         "design system",
@@ -39,18 +39,18 @@
         "test:watch": "web-test-runner --color --watch --config configs/web-test-runner.config.mjs"
     },
     "dependencies": {
-        "@augment-vir/browser": "^15.4.0",
-        "@augment-vir/common": "^15.4.0",
+        "@augment-vir/browser": "^15.5.0",
+        "@augment-vir/common": "^15.5.0",
         "colorjs.io": "0.4.5",
-        "element-vir": "^14.2.1",
+        "element-vir": "^16.0.0",
         "lit-css-vars": "^2.0.3",
-        "object-shape-tester": "^0.3.0",
+        "object-shape-tester": "^0.4.0",
         "spa-router-vir": "^2.1.1",
         "typed-event-target": "^1.3.1",
-        "vira": "^0.6.1"
+        "vira": "^0.6.4"
     },
     "devDependencies": {
-        "@augment-vir/browser-testing": "^15.4.0",
+        "@augment-vir/browser-testing": "^15.5.0",
         "@open-wc/testing": "^3.2.0",
         "@types/chai": "^4.3.5",
         "@types/mocha": "^10.0.1",