element-book 0.0.3 → 0.0.4

package/dist/augments/type.d.ts

@@ -0,0 +1,3 @@
+export type NestedType<SubType> = {
+    [prop: PropertyKey]: SubType | NestedType<SubType>;
+};

package/dist/augments/type.js

@@ -0,0 +1 @@
+export {};

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

@@ -1,5 +1,5 @@
 import { ElementBookEntryTypeEnum } from '../element-book-entry-type';
-import { listTitleBreadcrumbs } from '../entry-tree/entry-tree';
+import { listBreadcrumbs } from '../entry-tree/entry-tree';
 export function defineElementBookPage(pageSetup) {
     if (!pageSetup.title) {
         throw new Error(`Cannot have an element-book page with an empty title.`);
@@ -8,7 +8,7 @@ export function defineElementBookPage(pageSetup) {
         type: ElementBookEntryTypeEnum.Page,
         ...pageSetup,
     };
-    const pageBreadcrumbs = listTitleBreadcrumbs(page, true);
+    const pageBreadcrumbs = listBreadcrumbs(page, true);
     const exampleTitlesSet = new Set();
     pageSetup.examples.forEach((example) => {
         const failureMessage = `Failed to define example '${pageBreadcrumbs

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

@@ -5,10 +5,11 @@ export type EntryTreeNode<EntryType extends ElementBookEntryTypeEnum = ElementBo
     entry: Extract<ElementBookEntry, {
         type: EntryType;
     }>;
+    breadcrumb: string;
     children: Record<string, EntryTreeNode>;
 };
 export declare function createEmptyEntryTreeRoot(): EntryTreeNode;
+export declare function titleToBreadcrumb(title: string): string;
 export declare function entriesToTree(entries: ReadonlyArray<ElementBookEntry>): EntryTreeNode<ElementBookEntryTypeEnum>;
-export declare function traverseToImmediateParent(entry: Readonly<ElementBookEntry>, currentTree: Readonly<EntryTreeNode>): Readonly<EntryTreeNode<ElementBookEntryTypeEnum>>;
-export declare function listTitleBreadcrumbs(entry: ElementBookEntry, includeSelf?: boolean): string[];
-export declare function findEntryByBreadcrumbs(titles: ReadonlyArray<string>, tree: Readonly<EntryTreeNode>): Readonly<EntryTreeNode>;
+export declare function listBreadcrumbs(entry: ElementBookEntry, includeSelf?: boolean): string[];
+export declare function findEntryByBreadcrumbs(breadcrumbs: ReadonlyArray<string>, tree: Readonly<EntryTreeNode>): Readonly<EntryTreeNode> | undefined;

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

@@ -1,4 +1,4 @@
-import { isLengthAtLeast } from '@augment-vir/common';
+import { collapseWhiteSpace, isLengthAtLeast } from '@augment-vir/common';
 import { ElementBookEntryTypeEnum } from '../element-book-entry-type';
 export function doesNodeHaveEntryType(node, type) {
     return node.entry.type === type;
@@ -10,60 +10,67 @@ export function createEmptyEntryTreeRoot() {
             title: 'element book tree root',
             parent: undefined,
         },
+        breadcrumb: '',
         children: {},
     };
     return rootNode;
 }
+export function titleToBreadcrumb(title) {
+    return collapseWhiteSpace(title).replaceAll(/\s/g, '-');
+}
 export function entriesToTree(entries) {
     const tree = createEmptyEntryTreeRoot();
     entries.forEach((newEntry) => {
         const immediateParent = traverseToImmediateParent(newEntry, tree);
-        if (newEntry.title in immediateParent.children) {
-            throw new Error(`Cannot create duplicate entry titled '${newEntry.title}' in parent '${immediateParent.entry.title}'.`);
+        const breadcrumb = titleToBreadcrumb(newEntry.title);
+        if (breadcrumb in immediateParent.children) {
+            throw new Error(`Cannot create duplicate entry '${breadcrumb}' in parent '${immediateParent.breadcrumb}'.`);
         }
         const newNode = {
             children: {},
+            breadcrumb,
             entry: newEntry,
         };
-        immediateParent.children[newEntry.title] = newNode;
+        immediateParent.children[breadcrumb] = newNode;
     });
     return tree;
 }
-export function traverseToImmediateParent(entry, currentTree) {
-    const topDownAncestryChain = listTitleBreadcrumbs(entry)
+function traverseToImmediateParent(entry, currentTree) {
+    const topDownAncestryChain = listBreadcrumbs(entry)
         // reverse so we get the top most ancestor first in the list
         .reverse();
-    const immediateParentNode = topDownAncestryChain.reduce((currentParent, currentTitle) => {
-        const nextParent = currentParent.children[currentTitle];
-        if (!nextParent) {
-            throw new Error(`Failed to find parent ElementBookEntry by name of '${currentTitle}' in entry '${currentParent.entry.title}'`);
+    const immediateParentNode = topDownAncestryChain.reduce((currentAncestor, nextBreadcrumb) => {
+        const nextAncestor = currentAncestor.children[nextBreadcrumb];
+        if (!nextAncestor) {
+            throw new Error(`Failed to find parent ElementBookEntry by name of '${nextBreadcrumb}' in entry '${currentAncestor.entry.title}'`);
         }
-        return nextParent;
+        return nextAncestor;
     }, currentTree);
     return immediateParentNode;
 }
-export function listTitleBreadcrumbs(entry, includeSelf) {
+export function listBreadcrumbs(entry, includeSelf) {
+    const entryBreadcrumb = titleToBreadcrumb(entry.title);
     if (entry.parent) {
         return [
-            entry.parent.title,
-            ...listTitleBreadcrumbs(entry.parent, false),
-        ].concat(includeSelf ? [entry.title] : []);
+            titleToBreadcrumb(entry.parent.title),
+            ...listBreadcrumbs(entry.parent, false),
+        ].concat(includeSelf ? [entryBreadcrumb] : []);
     }
     else if (includeSelf) {
-        return [entry.title];
+        return [entryBreadcrumb];
     }
     else {
         return [];
     }
 }
-export function findEntryByBreadcrumbs(titles, tree) {
-    if (!isLengthAtLeast(titles, 1)) {
+export function findEntryByBreadcrumbs(breadcrumbs, tree) {
+    if (!isLengthAtLeast(breadcrumbs, 1)) {
         return tree;
     }
-    const nextEntryTitle = titles[0];
-    const nextTree = tree.children[nextEntryTitle];
+    const nextBreadcrumb = breadcrumbs[0];
+    const nextTree = tree.children[nextBreadcrumb];
     if (!nextTree) {
-        throw new Error(`Failed to find '${tree.entry.title}' > '${nextEntryTitle}'.`);
+        return undefined;
     }
-    return findEntryByBreadcrumbs(titles.slice(1), nextTree);
+    return findEntryByBreadcrumbs(breadcrumbs.slice(1), nextTree);
 }

package/dist/data/element-book-entry/entry-tree/walk-entry-tree.js

@@ -1,5 +1,5 @@
 import { ElementBookEntryTypeEnum } from '../element-book-entry-type';
-import { doesNodeHaveEntryType, listTitleBreadcrumbs } from './entry-tree';
+import { doesNodeHaveEntryType, listBreadcrumbs } from './entry-tree';
 export function findFirstPageBreadcrumbs(entryTree) {
     let pageEntry;
     walkEntryTree(entryTree, (node) => {
@@ -12,7 +12,7 @@ export function findFirstPageBreadcrumbs(entryTree) {
     if (!pageEntry) {
         return [];
     }
-    return listTitleBreadcrumbs(pageEntry.entry).concat(pageEntry.entry.title);
+    return listBreadcrumbs(pageEntry.entry).concat(pageEntry.breadcrumb);
 }
 /**
  * Walk the whole given tree, calling callback on each node. If callback returns the boolean false

package/dist/ui/color-theme/color-theme.d.ts

@@ -0,0 +1,25 @@
+import { CSSResult } from 'lit';
+export type ColorPair = {
+    background: CSSResult;
+    foreground: CSSResult;
+};
+export type ColorTheme = {
+    nav: {
+        hover: ColorPair;
+        active: ColorPair;
+        selected: ColorPair;
+    };
+    accent: {
+        icon: CSSResult;
+    };
+};
+export declare const colorThemeCssVars: import("lit-css-vars").CssVarDefinitions<{
+    'element-book-nav-hover-background-color': string;
+    'element-book-nav-hover-foreground-color': string;
+    'element-book-nav-active-background-color': string;
+    'element-book-nav-active-foreground-color': string;
+    'element-book-nav-selected-background-color': string;
+    'element-book-nav-selected-foreground-color': string;
+    'element-book-accent-icon-color': string;
+}>;
+export declare function setThemeCssVars(element: HTMLElement, theme: ColorTheme): void;

package/dist/ui/color-theme/color-theme.js

@@ -0,0 +1,70 @@
+import { isRuntimeTypeOf, typedHasProperties, typedHasProperty } from '@augment-vir/common';
+import { defineCssVars, setCssVarValue } from 'lit-css-vars';
+export const colorThemeCssVars = defineCssVars({
+    'element-book-nav-hover-background-color': 'grey',
+    'element-book-nav-hover-foreground-color': 'grey',
+    'element-book-nav-active-background-color': 'grey',
+    'element-book-nav-active-foreground-color': 'grey',
+    'element-book-nav-selected-background-color': 'grey',
+    'element-book-nav-selected-foreground-color': 'grey',
+    'element-book-accent-icon-color': 'grey',
+});
+const colorThemeCssVarMapping = {
+    nav: {
+        hover: {
+            background: colorThemeCssVars['element-book-nav-hover-background-color'],
+            foreground: colorThemeCssVars['element-book-nav-hover-foreground-color'],
+        },
+        active: {
+            background: colorThemeCssVars['element-book-nav-active-background-color'],
+            foreground: colorThemeCssVars['element-book-nav-active-foreground-color'],
+        },
+        selected: {
+            background: colorThemeCssVars['element-book-nav-selected-background-color'],
+            foreground: colorThemeCssVars['element-book-nav-selected-foreground-color'],
+        },
+    },
+    accent: {
+        icon: colorThemeCssVars['element-book-accent-icon-color'],
+    },
+};
+export function setThemeCssVars(element, theme) {
+    recursiveSetThemeCssVars(element, theme, colorThemeCssVarMapping);
+}
+function isCssResult(input) {
+    return typedHasProperty(input, '_$cssResult$');
+}
+function isCssVarDefinition(input) {
+    return (typedHasProperties(input, [
+        'name',
+        'value',
+        'default',
+    ]) &&
+        isRuntimeTypeOf(input.default, 'string') &&
+        isCssResult(input.name) &&
+        isCssResult(input.value));
+}
+function recursiveSetThemeCssVars(element, nestedCssResult, nestedCssVars) {
+    Object.entries(nestedCssResult).forEach(([key, value,]) => {
+        const nestedCssVar = nestedCssVars[key];
+        if (!nestedCssVar) {
+            throw new Error(`no nestedCssVar at key '${key}'`);
+        }
+        if (isCssResult(value)) {
+            if (!isCssVarDefinition(nestedCssVar)) {
+                throw new Error(`got a CSS result at '${key}' but no CSS var`);
+            }
+            setCssVarValue({
+                forCssVar: nestedCssVar,
+                onElement: element,
+                toValue: String(value),
+            });
+        }
+        else {
+            if (isCssVarDefinition(nestedCssVar)) {
+                throw new Error(`got no CSS result at '${key}' but did find a CSS var`);
+            }
+            recursiveSetThemeCssVars(element, value, nestedCssVar);
+        }
+    });
+}

package/dist/ui/color-theme/create-color-theme.d.ts

@@ -0,0 +1,3 @@
+import { ColorTheme } from './color-theme';
+export declare const defaultThemeStartColor = "dodgerblue";
+export declare function createTheme(startColorString?: string): ColorTheme;

package/dist/ui/color-theme/create-color-theme.js

@@ -0,0 +1,42 @@
+import { mapObjectValues } from '@augment-vir/common';
+import Color from 'colorjs.io';
+import { unsafeCSS } from 'lit';
+function colorsObjectToCssResult(colors) {
+    return mapObjectValues(colors, (key, value) => {
+        if (value instanceof Color) {
+            return unsafeCSS(value.toString({ format: 'hex' }));
+        }
+        else {
+            return colorsObjectToCssResult(value);
+        }
+    });
+}
+export const defaultThemeStartColor = 'dodgerblue';
+function calculateTextColor(color) {
+    const onWhite = Math.abs(color.contrast('white', 'APCA'));
+    const onBlack = Math.abs(color.contrast('black', 'APCA'));
+    const textColorString = onWhite > onBlack ? 'white' : 'black';
+    return new Color(textColorString);
+}
+function createColorPair({ background, foreground, }) {
+    return {
+        background: background ?? calculateTextColor(foreground),
+        foreground: foreground ?? calculateTextColor(background),
+    };
+}
+export function createTheme(startColorString = defaultThemeStartColor) {
+    // as cast because colorjs.io's types for itself are wrong
+    const original = new Color(startColorString);
+    const colors = {
+        nav: {
+            hover: createColorPair({ background: original.clone().set({ 'hsl.l': 93 }) }),
+            active: createColorPair({ background: original.clone().set({ 'hsl.l': 90 }) }),
+            selected: createColorPair({ background: original.clone().set({ 'hsl.l': 85 }) }),
+        },
+        accent: {
+            icon: original.clone().set({ 'hsl.l': 40 }),
+        },
+    };
+    const convertedToCssResults = colorsObjectToCssResult(colors);
+    return convertedToCssResults;
+}

package/dist/ui/elements/common/element-book-route-link.element.d.ts

@@ -2,4 +2,4 @@ import { ElementBookFullRoute, ElementBookRouter } from '../../../routing/elemen
 export declare const ElementBookRouteLink: import("element-vir").DeclarativeElementDefinition<"element-book-route-link", {
     route: Partial<ElementBookFullRoute>;
     router: ElementBookRouter | undefined;
-}, {}, {}, string, "anchorPadding", import("lit-html").HTMLTemplateResult>;
+}, {}, {}, string, "anchorPadding", import("lit-html").HTMLTemplateResult, undefined>;

package/dist/ui/elements/common/element-book-route-link.element.js

@@ -9,6 +9,7 @@ export const ElementBookRouteLink = defineElementBookElement()({
     },
     styles: ({ cssVarValues }) => css `
         a {
+            box-sizing: border-box;
             display: block;
             padding: ${cssVarValues.anchorPadding};
             text-decoration: inherit;

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

@@ -1,2 +1,2 @@
 export type BookTagName = `element-book-${string}`;
-export declare const defineElementBookElement: <InputsGeneric extends {}>() => <TagNameGeneric extends `element-book-${string}`, StateInitGeneric extends {}, EventsInitGeneric extends {}, HostClassKeysGeneric extends string, CssVarKeysGeneric extends string, RenderOutputGeneric extends any>(inputs: import("element-vir").DeclarativeElementInit<TagNameGeneric, InputsGeneric, StateInitGeneric, EventsInitGeneric, HostClassKeysGeneric, CssVarKeysGeneric, RenderOutputGeneric>) => import("element-vir").DeclarativeElementDefinition<TagNameGeneric, InputsGeneric, StateInitGeneric, EventsInitGeneric, HostClassKeysGeneric, CssVarKeysGeneric, RenderOutputGeneric>, defineElementBookElementNoInputs: <TagNameGeneric_1 extends `element-book-${string}`, InputsGeneric_1 extends {}, StateInitGeneric_1 extends {}, EventsInitGeneric_1 extends {}, HostClassKeysGeneric_1 extends string, CssVarKeysGeneric_1 extends string, RenderOutputGeneric_1 extends any>(inputs: import("element-vir").DeclarativeElementInit<TagNameGeneric_1, InputsGeneric_1, StateInitGeneric_1, EventsInitGeneric_1, HostClassKeysGeneric_1, CssVarKeysGeneric_1, RenderOutputGeneric_1>) => import("element-vir").DeclarativeElementDefinition<TagNameGeneric_1, InputsGeneric_1, StateInitGeneric_1, EventsInitGeneric_1, HostClassKeysGeneric_1, CssVarKeysGeneric_1, RenderOutputGeneric_1>;
+export declare const defineElementBookElement: <InputsGeneric extends {}>() => <TagNameGeneric extends `element-book-${string}`, StateInitGeneric extends {}, EventsInitGeneric extends {}, HostClassKeysGeneric extends string, CssVarKeysGeneric extends string, RenderOutputGeneric extends any, InputsDefinerFunctionGeneric extends undefined>(inputs: import("element-vir").DeclarativeElementInit<TagNameGeneric, InputsGeneric, StateInitGeneric, EventsInitGeneric, HostClassKeysGeneric, CssVarKeysGeneric, RenderOutputGeneric, InputsDefinerFunctionGeneric>) => import("element-vir").DeclarativeElementDefinition<TagNameGeneric, InputsGeneric, StateInitGeneric, EventsInitGeneric, HostClassKeysGeneric, CssVarKeysGeneric, RenderOutputGeneric, undefined>, defineElementBookElementNoInputs: <TagNameGeneric_1 extends `element-book-${string}`, InputsGeneric_1 extends {}, StateInitGeneric_1 extends {}, EventsInitGeneric_1 extends {}, HostClassKeysGeneric_1 extends string, CssVarKeysGeneric_1 extends string, RenderOutputGeneric_1 extends any, InputsDefinerFunctionGeneric_1 extends undefined>(inputs: import("element-vir").DeclarativeElementInit<TagNameGeneric_1, InputsGeneric_1, StateInitGeneric_1, EventsInitGeneric_1, HostClassKeysGeneric_1, CssVarKeysGeneric_1, RenderOutputGeneric_1, InputsDefinerFunctionGeneric_1>) => import("element-vir").DeclarativeElementDefinition<TagNameGeneric_1, InputsGeneric_1, StateInitGeneric_1, EventsInitGeneric_1, HostClassKeysGeneric_1, CssVarKeysGeneric_1, RenderOutputGeneric_1, InputsDefinerFunctionGeneric_1>;

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

@@ -1,9 +1,17 @@
 import { ElementBookEntry } from '../../data/element-book-entry/element-book-entry';
+import { ColorTheme } from '../color-theme/color-theme';
+type ColorThemeState = {
+    original: string | undefined;
+    theme: ColorTheme;
+};
 export declare const ElementBookApp: import("element-vir").DeclarativeElementDefinition<"element-book-app", {
     entries: ReadonlyArray<ElementBookEntry>;
-    baseRoute?: string;
-    defaultPath?: ReadonlyArray<string>;
+    baseRoute?: string | undefined;
+    defaultPath?: ReadonlyArray<string> | undefined;
+    themeColor?: string | undefined;
 }, {
     currentRoute: Readonly<Required<Readonly<import("spa-router-vir").FullRoute<import("../../routing/element-book-routing").ValidElementBookPaths, undefined, undefined>>>>;
     router: Readonly<import("spa-router-vir").SpaRouter<import("../../routing/element-book-routing").ValidElementBookPaths, undefined, undefined>> | undefined;
-}, {}, "", "", import("lit-html").HTMLTemplateResult>;
+    colors: ColorThemeState;
+}, {}, "", "", import("lit-html").HTMLTemplateResult, undefined>;
+export {};

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

@@ -3,6 +3,8 @@ import { entriesToTree, findEntryByBreadcrumbs, } from '../../data/element-book-
 import { findFirstPageBreadcrumbs } from '../../data/element-book-entry/entry-tree/walk-entry-tree';
 import { createElementBookRouter } from '../../routing/create-element-book-router';
 import { emptyElementBookFullRoute, } from '../../routing/element-book-routing';
+import { setThemeCssVars } from '../color-theme/color-theme';
+import { createTheme } from '../color-theme/create-color-theme';
 import { ChangeRouteEvent } from '../events/change-route.event';
 import { ElementBookNav } from './element-book-nav.element';
 import { ElementBookEntryDisplay } from './entry-display/element-book-entry-display.element';
@@ -11,6 +13,10 @@ export const ElementBookApp = defineElement()({
     stateInit: {
         currentRoute: emptyElementBookFullRoute,
         router: undefined,
+        colors: {
+            original: undefined,
+            theme: createTheme(undefined),
+        },
     },
     styles: css `
         :host {
@@ -20,17 +26,33 @@ export const ElementBookApp = defineElement()({
             font-family: sans-serif;
         }
 
+        .error {
+            color: red;
+        }
+
         .root {
-            height: 100%;
-            width: 100%;
+            max-height: 100%;
+            max-width: 100%;
             display: flex;
+            position: relative;
         }
 
         ${ElementBookEntryDisplay} {
             flex-grow: 1;
+            overflow-x: hidden;
+            overflow-y: auto;
+            max-height: 100%;
+        }
+
+        ${ElementBookNav} {
+            position: sticky;
+            overflow-x: hidden;
+            overflow-y: auto;
+            max-height: 100%;
+            top: 0;
         }
     `,
-    initCallback({ updateState, state, inputs }) {
+    initCallback({ updateState, state, inputs, host }) {
         if (inputs.baseRoute && !state.router) {
             const router = createElementBookRouter(inputs.baseRoute);
             updateState({ router });
@@ -40,8 +62,19 @@ export const ElementBookApp = defineElement()({
                 });
             });
         }
+        setThemeCssVars(host, state.colors.theme);
     },
-    renderCallback: ({ state, inputs, updateState }) => {
+    renderCallback: ({ state, inputs, host, updateState }) => {
+        if (inputs.themeColor !== state.colors?.original) {
+            const newTheme = createTheme(inputs.themeColor);
+            updateState({
+                colors: {
+                    original: inputs.themeColor,
+                    theme: newTheme,
+                },
+            });
+            setThemeCssVars(host, newTheme);
+        }
         function updateRoutes(newRoute) {
             if (state.router) {
                 state.router.setRoutes(newRoute);
@@ -56,7 +89,7 @@ export const ElementBookApp = defineElement()({
             }
         }
         const entriesTree = entriesToTree(inputs.entries);
-        if (!state.currentRoute.paths.length) {
+        if (!findEntryByBreadcrumbs(state.currentRoute.paths, entriesTree)) {
             const firstPageBreadcrumbs = findFirstPageBreadcrumbs(entriesTree);
             const defaultPath = inputs.defaultPath ??
                 (firstPageBreadcrumbs.length ? firstPageBreadcrumbs : undefined);
@@ -67,7 +100,15 @@ export const ElementBookApp = defineElement()({
                 updateRoutes(newRoute);
             }
         }
-        const currentEntry = findEntryByBreadcrumbs(state.currentRoute.paths, entriesTree).entry;
+        const currentNode = findEntryByBreadcrumbs(state.currentRoute.paths, entriesTree);
+        if (!currentNode) {
+            return html `
+                <p class="error">
+                    Tried to self-correct for invalid path ${state.currentRoute.paths.join('/')} but
+                    failed to do so.
+                </p>
+            `;
+        }
         return html `
             <div
                 class="root"
@@ -85,7 +126,7 @@ export const ElementBookApp = defineElement()({
                 <${ElementBookEntryDisplay}
                     ${assign(ElementBookEntryDisplay, {
             currentRoute: state.currentRoute,
-            currentEntry,
+            currentNode,
         })}
                 ></${ElementBookEntryDisplay}>
             </div>

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

@@ -1,4 +1,4 @@
 import { ElementBookFullRoute } from '../../routing/element-book-routing';
 export declare const ElementBookBreadcrumbs: import("element-vir").DeclarativeElementDefinition<"element-book-breadcrumbs", {
     currentRoute: Readonly<ElementBookFullRoute>;
-}, {}, {}, string, string, import("lit-html").HTMLTemplateResult[]>;
+}, {}, {}, string, string, import("lit-html").HTMLTemplateResult[], undefined>;

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

@@ -4,4 +4,4 @@ export declare const ElementBookNav: import("element-vir").DeclarativeElementDef
     tree: EntryTreeNode;
     selectedPath: ReadonlyArray<string>;
     router: ElementBookRouter | undefined;
-}, {}, {}, string, string, import("lit-html").HTMLTemplateResult>;
+}, {}, {}, string, string, import("lit-html").HTMLTemplateResult, undefined>;

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

@@ -1,5 +1,9 @@
 import { areJsonEqual } from '@augment-vir/common';
-import { assign, classMap, css, html } from 'element-vir';
+import { VirIcon } from '@electrovir/icon-element';
+import { assign, classMap, css, html, renderIf } from 'element-vir';
+import { ElementBookEntryTypeEnum } from '../../data/element-book-entry/element-book-entry-type';
+import { colorThemeCssVars } from '../color-theme/color-theme';
+import { Element16Icon } from '../icons/element-16.icon';
 import { ElementBookRouteLink } from './common/element-book-route-link.element';
 import { defineElementBookElement } from './define-book-element';
 export const ElementBookNav = defineElementBookElement()({
@@ -13,10 +17,18 @@ export const ElementBookNav = defineElementBookElement()({
         }
 
         .title-row:hover {
-            background-color: #ccc;
+            background-color: ${colorThemeCssVars['element-book-nav-hover-background-color'].value};
+            color: ${colorThemeCssVars['element-book-nav-hover-foreground-color'].value};
+        }
+
+        .title-row:active {
+            background-color: ${colorThemeCssVars['element-book-nav-active-background-color']
+        .value};
+            color: ${colorThemeCssVars['element-book-nav-active-foreground-color'].value};
         }
 
         .title-row {
+            padding-right: 24px;
             display: block;
             ${ElementBookRouteLink.cssVarNames
         .anchorPadding}: 4px 24px 4px calc(calc(16px * var(--indent, 0)) + 24px);
@@ -32,8 +44,25 @@ export const ElementBookNav = defineElementBookElement()({
             margin: 0;
         }
 
-        .selected {
-            background-color: #ddd;
+        .selected,
+        .selected:hover {
+            background-color: ${colorThemeCssVars['element-book-nav-selected-background-color']
+        .value};
+            color: ${colorThemeCssVars['element-book-nav-selected-foreground-color'].value};
+            pointer-events: none;
+        }
+
+        .title-text {
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            display: inline-flex;
+            gap: 8px;
+            align-items: center;
+        }
+
+        ${VirIcon} {
+            display: inline-flex;
+            color: ${colorThemeCssVars['element-book-accent-icon-color'].value};
         }
     `,
     renderCallback({ inputs }) {
@@ -56,7 +85,7 @@ function createNavigationTree({ indent, tree, rootPath, selectedPath, router, })
         return [];
     }
     return Object.values(tree.children).map((child) => {
-        const childPath = rootPath.concat(child.entry.title);
+        const childPath = rootPath.concat(child.breadcrumb);
         const childTemplates = createNavigationTree({
             indent: indent + 1,
             tree: child,
@@ -64,6 +93,7 @@ function createNavigationTree({ indent, tree, rootPath, selectedPath, router, })
             selectedPath,
             router,
         });
+        const hasExamples = child.entry.type === ElementBookEntryTypeEnum.Page;
         return html `
             <div class="nav-tree-entry" style="--indent: ${indent};">
                 <li class=${child.entry.type}>
@@ -79,7 +109,14 @@ function createNavigationTree({ indent, tree, rootPath, selectedPath, router, })
             selected: areJsonEqual(selectedPath, childPath),
         })}
                     >
-                        ${child.entry.title}
+                        <div class="title-text">
+                            ${renderIf(hasExamples, html `
+                                    <${VirIcon}
+                                        ${assign(VirIcon, { icon: Element16Icon })}
+                                    ></${VirIcon}>
+                                `)}
+                            ${child.entry.title}
+                        </div>
                     </${ElementBookRouteLink}>
                 </li>
                 ${childTemplates}

package/dist/ui/elements/entry-display/element-book-entry-display.element.d.ts

@@ -1,6 +1,6 @@
-import { ElementBookEntry } from '../../../data/element-book-entry/element-book-entry';
+import { EntryTreeNode } from '../../../data/element-book-entry/entry-tree/entry-tree';
 import { ElementBookFullRoute } from '../../../routing/element-book-routing';
 export declare const ElementBookEntryDisplay: import("element-vir").DeclarativeElementDefinition<"element-book-entry-display", {
     currentRoute: Readonly<ElementBookFullRoute>;
-    currentEntry: Readonly<ElementBookEntry>;
-}, {}, {}, string, string, import("lit-html").HTMLTemplateResult>;
+    currentNode: Readonly<EntryTreeNode>;
+}, {}, {}, string, string, import("lit-html").HTMLTemplateResult, undefined>;

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

@@ -1,10 +1,12 @@
-import { assign, classMap, css, html, renderIf } from 'element-vir';
+import { VirIcon } from '@electrovir/icon-element';
+import { assign, css, html, renderIf } from 'element-vir';
 import { ElementBookEntryTypeEnum } from '../../../data/element-book-entry/element-book-entry-type';
-import { listTitleBreadcrumbs } from '../../../data/element-book-entry/entry-tree/entry-tree';
+import { listBreadcrumbs, } from '../../../data/element-book-entry/entry-tree/entry-tree';
+import { colorThemeCssVars } from '../../color-theme/color-theme';
+import { Element24Icon } from '../../icons/element-24.icon';
 import { defineElementBookElement } from '../define-book-element';
 import { ElementBookBreadcrumbs } from '../element-book-breadcrumbs.element';
-import { ElementBookExampleControls } from './element-book-example-controls.element';
-import { ElementBookExampleViewer } from './element-book-example-viewer.element';
+import { ElementBookPageExamples } from './element-book-page-examples.element';
 export const ElementBookEntryDisplay = defineElementBookElement()({
     tagName: 'element-book-entry-display',
     styles: css `
@@ -14,62 +16,68 @@ export const ElementBookEntryDisplay = defineElementBookElement()({
         }
 
         .title-bar {
+            position: sticky;
+            top: 0;
             border-bottom: 1px solid #f8f8f8;
             padding: 4px 8px;
+            background-color: white;
         }
 
-        .examples-wrapper {
+        .all-examples-wrapper {
             padding: 32px;
             display: flex;
-            gap: 32px;
-            flex-wrap: wrap;
+            flex-direction: column;
+            gap: 64px;
         }
 
-        .individual-example-wrapper {
+        h2 {
+            margin: 0;
+            margin-bottom: 24px;
+            padding: 0;
             display: flex;
-            flex-direction: column;
-            gap: 24px;
+            gap: 16px;
+            align-items: center;
         }
 
-        .hidden-controls {
-            pointer-events: none;
-            visibility: hidden;
+        ${VirIcon} {
+            color: ${colorThemeCssVars['element-book-accent-icon-color'].value};
         }
     `,
     renderCallback: ({ inputs }) => {
-        const examples = inputs.currentEntry.type === ElementBookEntryTypeEnum.Page
-            ? inputs.currentEntry.examples
-            : [];
-        const entryBreadcrumbs = listTitleBreadcrumbs(inputs.currentEntry, true);
-        const exampleTemplates = makeExampleTemplates(examples, entryBreadcrumbs);
+        const descendantPages = extractAllDescendantPages(inputs.currentNode);
+        const entryBreadcrumbs = listBreadcrumbs(inputs.currentNode.entry, true);
+        const showPageTitles = inputs.currentNode.entry.type !== ElementBookEntryTypeEnum.Page;
+        const exampleTemplates = descendantPages.map((descendantPage) => {
+            return html `
+                <div class="page-examples">
+                    ${renderIf(showPageTitles, html `
+                            <h2>
+                                <${VirIcon} ${assign(VirIcon, { icon: Element24Icon })}></${VirIcon}>
+                                ${descendantPage.title}
+                            </h2>
+                        `)}
+                    <${ElementBookPageExamples}
+                        ${assign(ElementBookPageExamples, {
+                page: descendantPage,
+                parentBreadcrumbs: entryBreadcrumbs,
+            })}
+                    ></${ElementBookPageExamples}>
+                </div>
+            `;
+        });
         return html `
             <div class="title-bar">
                 <${ElementBookBreadcrumbs}
                     ${assign(ElementBookBreadcrumbs, { currentRoute: inputs.currentRoute })}
                 ></${ElementBookBreadcrumbs}>
             </div>
-            <div class="examples-wrapper">${exampleTemplates}</div>
+            <div class="all-examples-wrapper">${exampleTemplates}</div>
         `;
     },
 });
-function makeExampleTemplates(examples, parentBreadcrumbs) {
-    const allControlsHidden = examples.every((example) => example.hideControls);
-    return examples.map((example) => {
-        return html `
-            <div class="individual-example-wrapper">
-                ${renderIf(!allControlsHidden, html `
-                        <${ElementBookExampleControls}
-                            class=${classMap({ 'hidden-controls': !!example.hideControls })}
-                            ${assign(ElementBookExampleControls, { example })}
-                        ></${ElementBookExampleControls}>
-                    `)}
-                <${ElementBookExampleViewer}
-                    ${assign(ElementBookExampleViewer, {
-            example,
-            parentBreadcrumbs,
-        })}
-                ></${ElementBookExampleViewer}>
-            </div>
-        `;
-    });
+function extractAllDescendantPages(node) {
+    if (node.entry.type === ElementBookEntryTypeEnum.Page) {
+        return [node.entry];
+    }
+    return Object.values(node.children).map(extractAllDescendantPages).flat();
 }

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

@@ -1,4 +1,4 @@
 import { ElementBookPageExample } from '../../../data/element-book-entry/element-book-page/element-book-page-example';
 export declare const ElementBookExampleControls: import("element-vir").DeclarativeElementDefinition<"element-book-example-controls", {
     example: ElementBookPageExample;
-}, {}, {}, string, string, import("lit-html").HTMLTemplateResult>;
+}, {}, {}, string, string, import("lit-html").HTMLTemplateResult, undefined>;

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

@@ -4,4 +4,4 @@ export declare const ElementBookExampleViewer: import("element-vir").Declarative
     parentBreadcrumbs: ReadonlyArray<string>;
 }, {
     internalState: any;
-}, {}, string, string, string | import("lit-html").HTMLTemplateResult>;
+}, {}, string, string, string | import("lit-html").HTMLTemplateResult, undefined>;

package/dist/ui/elements/entry-display/element-book-page-examples.element.d.ts

@@ -0,0 +1,5 @@
+import { ElementBookPage } from '../../../data/element-book-entry/element-book-page/element-book-page';
+export declare const ElementBookPageExamples: import("element-vir").DeclarativeElementDefinition<"element-book-page-examples", {
+    page: ElementBookPage;
+    parentBreadcrumbs: ReadonlyArray<string>;
+}, {}, {}, string, string, import("lit-html").HTMLTemplateResult[], undefined>;

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

@@ -0,0 +1,46 @@
+import { assign, classMap, css, html, renderIf } from 'element-vir';
+import { defineElementBookElement } from '../define-book-element';
+import { ElementBookExampleControls } from './element-book-example-controls.element';
+import { ElementBookExampleViewer } from './element-book-example-viewer.element';
+export const ElementBookPageExamples = defineElementBookElement()({
+    tagName: 'element-book-page-examples',
+    styles: css `
+        :host {
+            display: flex;
+            gap: 32px;
+            flex-wrap: wrap;
+        }
+        .individual-example-wrapper {
+            display: flex;
+            flex-direction: column;
+            gap: 24px;
+        }
+
+        .hidden-controls {
+            pointer-events: none;
+            visibility: hidden;
+        }
+    `,
+    renderCallback({ inputs }) {
+        const examples = inputs.page.examples;
+        const allControlsHidden = examples.every((example) => example.hideControls);
+        return examples.map((example) => {
+            return html `
+                <div class="individual-example-wrapper">
+                    ${renderIf(!allControlsHidden, html `
+                            <${ElementBookExampleControls}
+                                class=${classMap({ 'hidden-controls': !!example.hideControls })}
+                                ${assign(ElementBookExampleControls, { example })}
+                            ></${ElementBookExampleControls}>
+                        `)}
+                    <${ElementBookExampleViewer}
+                        ${assign(ElementBookExampleViewer, {
+                example,
+                parentBreadcrumbs: inputs.parentBreadcrumbs,
+            })}
+                    ></${ElementBookExampleViewer}>
+                </div>
+            `;
+        });
+    },
+});

package/dist/ui/icons/element-16.icon.d.ts

@@ -0,0 +1 @@
+export declare const Element16Icon: import("@electrovir/icon-element").IconSvg;

package/dist/ui/icons/element-16.icon.js

@@ -0,0 +1,18 @@
+import { defineIconSvg } from '@electrovir/icon-element';
+import { html } from 'element-vir';
+export const Element16Icon = defineIconSvg({
+    name: 'Element16Icon',
+    svgTemplate: html `
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            xml:space="preserve"
+            fill="none"
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            stroke-width="1px"
+        >
+            <path d="M4 5 1 8l3 3m8-6 3 3-3 3m-5 0 2-6" />
+        </svg>
+    `,
+});

package/dist/ui/icons/element-24.icon.d.ts

@@ -0,0 +1 @@
+export declare const Element24Icon: import("@electrovir/icon-element").IconSvg;

package/dist/ui/icons/element-24.icon.js

@@ -0,0 +1,18 @@
+import { defineIconSvg } from '@electrovir/icon-element';
+import { html } from 'element-vir';
+export const Element24Icon = defineIconSvg({
+    name: 'Element24Icon',
+    svgTemplate: html `
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            xml:space="preserve"
+            viewBox="0 0 24 24"
+            fill="none"
+            width="24"
+            height="24"
+            stroke-width="1px"
+        >
+            <path d="m7 7-5 5 5 5M17 7l5 5-5 5m-6 0 2-10" />
+        </svg>
+    `,
+});

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "element-book",
-    "version": "0.0.3",
+    "version": "0.0.4",
     "keywords": [
         "book",
         "design system",