element-book 0.0.0 → 0.0.1

package/README.md

@@ -1,5 +1,19 @@
 # element-book
 
-Because Storybook is madness and uncomposable.
+An [`element-vir`](https://npmjs.com/element-vir) drop-in element for building, testing, and demonstrating a collection of elements (or a design system).
 
-WIP
+Currently in MVP form. Functional, but WIP.
+
+# Installation
+
+```bash
+npm i element-book
+```
+
+# Terminology
+
+-   **section**:
+
+# Why not Storybook?
+
+Because Storybook is un-composable, impossible to debug, and full of behind-the-scenes \*magic\* that you can't backtrack without deeply understand the inner workings of Storybook. With `element-book`, it's all just imports that you can directly follow with the TypeScript compiler.

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

@@ -0,0 +1,10 @@
+import { ElementBookEntryTypeEnum } from '../element-book-entry-type';
+export type ElementBookChapter = {
+    type: ElementBookEntryTypeEnum.Chapter;
+    title: string;
+    parent?: ElementBookChapter | undefined;
+};
+export declare function defineElementBookChapter({ title, parent, }: {
+    title: string;
+    parent?: ElementBookChapter['parent'];
+}): ElementBookChapter;

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

@@ -0,0 +1,12 @@
+import { ElementBookEntryTypeEnum } from '../element-book-entry-type';
+export function defineElementBookChapter({ title, parent, }) {
+    if (!title) {
+        throw new Error(`Cannot have an element-book chapter with an empty title.`);
+    }
+    const chapter = {
+        type: ElementBookEntryTypeEnum.Chapter,
+        title,
+        parent,
+    };
+    return chapter;
+}

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

@@ -0,0 +1,8 @@
+export declare enum ElementBookEntryTypeEnum {
+    /** A group of pages or sub-chapters. */
+    Chapter = "chapter",
+    /** An individual book page full of element examples. */
+    Page = "page",
+    /** Tree root. Not for external use. */
+    Root = "root"
+}

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

@@ -0,0 +1,9 @@
+export var ElementBookEntryTypeEnum;
+(function (ElementBookEntryTypeEnum) {
+    /** A group of pages or sub-chapters. */
+    ElementBookEntryTypeEnum["Chapter"] = "chapter";
+    /** An individual book page full of element examples. */
+    ElementBookEntryTypeEnum["Page"] = "page";
+    /** Tree root. Not for external use. */
+    ElementBookEntryTypeEnum["Root"] = "root";
+})(ElementBookEntryTypeEnum || (ElementBookEntryTypeEnum = {}));

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

@@ -0,0 +1,9 @@
+import { ElementBookChapter } from './element-book-chapter/element-book-chapter';
+import { ElementBookEntryTypeEnum } from './element-book-entry-type';
+import { ElementBookPage } from './element-book-page/element-book-page';
+export type ElementBookRoot = {
+    type: ElementBookEntryTypeEnum.Root;
+    title: 'element book tree root';
+    parent: undefined;
+};
+export type ElementBookEntry = ElementBookChapter | ElementBookPage | ElementBookRoot;

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

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

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

@@ -0,0 +1,22 @@
+import { PropertyInitMapBase, TypedEvent } from 'element-vir';
+import { CSSResult } from 'lit';
+export type ElementBookPageExample<StateInit extends PropertyInitMapBase = any> = {
+    title: string;
+    /** Initialize the state for this example. */
+    stateInit?: StateInit;
+    /** Specify which events this example should intercept (so the user can see them). */
+    capturedEvents?: ReadonlyArray<string | TypedEvent>;
+    /**
+     * Style the example. You can even use the :host selector to style this specific example's
+     * wrapper element!
+     */
+    styles?: CSSResult;
+    /** Set to true to hide the example controls (example title and buttons). */
+    hideControls?: boolean | undefined;
+    /** Render the example. */
+    render: (renderParams: {
+        state: StateInit;
+        updateState: (newState: Partial<StateInit>) => void;
+    }) => unknown;
+};
+export declare function createExample<StateInit extends PropertyInitMapBase>(example: ElementBookPageExample<StateInit>): ElementBookPageExample<StateInit>;

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

@@ -0,0 +1,3 @@
+export function createExample(example) {
+    return example;
+}

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

@@ -0,0 +1,10 @@
+import { ElementBookChapter } from '../element-book-chapter/element-book-chapter';
+import { ElementBookEntryTypeEnum } from '../element-book-entry-type';
+import { ElementBookPageExample } from './element-book-page-example';
+export type ElementBookPage = {
+    type: ElementBookEntryTypeEnum.Page;
+    title: string;
+    parent?: ElementBookChapter | undefined;
+    examples: ReadonlyArray<ElementBookPageExample>;
+};
+export declare function defineElementBookPage(pageSetup: Omit<ElementBookPage, 'type'>): ElementBookPage;

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

@@ -0,0 +1,26 @@
+import { ElementBookEntryTypeEnum } from '../element-book-entry-type';
+import { listTitleBreadcrumbs } 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.`);
+    }
+    const page = {
+        type: ElementBookEntryTypeEnum.Page,
+        ...pageSetup,
+    };
+    const pageBreadcrumbs = listTitleBreadcrumbs(page, true);
+    const exampleTitlesSet = new Set();
+    pageSetup.examples.forEach((example) => {
+        const failureMessage = `Failed to define example '${pageBreadcrumbs
+            .concat(example.title)
+            .join(' > ')}'`;
+        if (exampleTitlesSet.has(example.title)) {
+            throw new Error(`${failureMessage}: example title '${example.title}' is already being used.`);
+        }
+        else if (!example.title) {
+            throw new Error(`${failureMessage}: example title is missing or empty.`);
+        }
+        exampleTitlesSet.add(example.title);
+    });
+    return page;
+}

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

@@ -0,0 +1,14 @@
+import { ElementBookEntry } from '../element-book-entry';
+import { ElementBookEntryTypeEnum } from '../element-book-entry-type';
+export declare function doesNodeHaveEntryType<EntryType extends ElementBookEntryTypeEnum>(node: EntryTreeNode<any>, type: EntryType): node is EntryTreeNode<EntryType>;
+export type EntryTreeNode<EntryType extends ElementBookEntryTypeEnum = ElementBookEntryTypeEnum> = {
+    entry: Extract<ElementBookEntry, {
+        type: EntryType;
+    }>;
+    children: Record<string, EntryTreeNode>;
+};
+export declare function createEmptyEntryTreeRoot(): EntryTreeNode;
+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>;

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

@@ -0,0 +1,69 @@
+import { isLengthAtLeast } from '@augment-vir/common';
+import { ElementBookEntryTypeEnum } from '../element-book-entry-type';
+export function doesNodeHaveEntryType(node, type) {
+    return node.entry.type === type;
+}
+export function createEmptyEntryTreeRoot() {
+    const rootNode = {
+        entry: {
+            type: ElementBookEntryTypeEnum.Root,
+            title: 'element book tree root',
+            parent: undefined,
+        },
+        children: {},
+    };
+    return rootNode;
+}
+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 newNode = {
+            children: {},
+            entry: newEntry,
+        };
+        immediateParent.children[newEntry.title] = newNode;
+    });
+    return tree;
+}
+export function traverseToImmediateParent(entry, currentTree) {
+    const topDownAncestryChain = listTitleBreadcrumbs(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}'`);
+        }
+        return nextParent;
+    }, currentTree);
+    return immediateParentNode;
+}
+export function listTitleBreadcrumbs(entry, includeSelf) {
+    if (entry.parent) {
+        return [
+            entry.parent.title,
+            ...listTitleBreadcrumbs(entry.parent, false),
+        ].concat(includeSelf ? [entry.title] : []);
+    }
+    else if (includeSelf) {
+        return [entry.title];
+    }
+    else {
+        return [];
+    }
+}
+export function findEntryByBreadcrumbs(titles, tree) {
+    if (!isLengthAtLeast(titles, 1)) {
+        return tree;
+    }
+    const nextEntryTitle = titles[0];
+    const nextTree = tree.children[nextEntryTitle];
+    if (!nextTree) {
+        throw new Error(`Failed to find '${tree.entry.title}' > '${nextEntryTitle}'.`);
+    }
+    return findEntryByBreadcrumbs(titles.slice(1), nextTree);
+}

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

@@ -0,0 +1,9 @@
+import { MaybePromise } from '@augment-vir/common';
+import { EntryTreeNode } from './entry-tree';
+export declare function findFirstPageBreadcrumbs(entryTree: Readonly<EntryTreeNode>): string[];
+/**
+ * Walk the whole given tree, calling callback on each node. If callback returns the boolean false
+ * exactly, then all walking will abort. If callback returns a promise, this function will return a
+ * promise. Otherwise, it will not return a promise.
+ */
+export declare function walkEntryTree<CallbackReturn extends MaybePromise<void | boolean>>(startNode: Readonly<EntryTreeNode>, callback: (node: Readonly<EntryTreeNode>) => CallbackReturn): CallbackReturn;

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

@@ -0,0 +1,101 @@
+import { ElementBookEntryTypeEnum } from '../element-book-entry-type';
+import { doesNodeHaveEntryType, listTitleBreadcrumbs } from './entry-tree';
+export function findFirstPageBreadcrumbs(entryTree) {
+    let pageEntry;
+    walkEntryTree(entryTree, (node) => {
+        if (doesNodeHaveEntryType(node, ElementBookEntryTypeEnum.Page)) {
+            pageEntry = node;
+            return false;
+        }
+        return;
+    });
+    if (!pageEntry) {
+        return [];
+    }
+    return listTitleBreadcrumbs(pageEntry.entry).concat(pageEntry.entry.title);
+}
+/**
+ * Walk the whole given tree, calling callback on each node. If callback returns the boolean false
+ * exactly, then all walking will abort. If callback returns a promise, this function will return a
+ * promise. Otherwise, it will not return a promise.
+ */
+export function walkEntryTree(startNode, callback) {
+    // this inner function is for easier typing purposes
+    function innerWalk() {
+        const outerResult = callback(startNode);
+        if (outerResult === false) {
+            return false;
+        }
+        let abort = false;
+        if (outerResult instanceof Promise) {
+            return new Promise(async (resolve, reject) => {
+                try {
+                    const outerResolvedResult = await outerResult;
+                    if (outerResolvedResult === false) {
+                        return;
+                    }
+                    await Promise.all(Object.values(startNode.children).map(async (child) => {
+                        if (abort) {
+                            return false;
+                        }
+                        const result = await walkEntryTree(child, callback);
+                        if (result === false) {
+                            abort = true;
+                            return false;
+                        }
+                        return result;
+                    }));
+                    if (abort) {
+                        return resolve(false);
+                    }
+                    else {
+                        return resolve();
+                    }
+                }
+                catch (error) {
+                    return reject(error);
+                }
+            });
+        }
+        else {
+            let gotPromise = false;
+            const childResults = Object.values(startNode.children).map((child) => {
+                if (abort) {
+                    return false;
+                }
+                const result = walkEntryTree(child, callback);
+                if (result === false) {
+                    abort = true;
+                }
+                else if (result instanceof Promise) {
+                    gotPromise = true;
+                }
+                return result;
+            });
+            if (gotPromise) {
+                return new Promise(async (resolve, reject) => {
+                    try {
+                        if (abort) {
+                            return resolve(false);
+                        }
+                        const results = await Promise.all(childResults);
+                        if (results.some((result) => result === false)) {
+                            return resolve(false);
+                        }
+                        else {
+                            return resolve();
+                        }
+                    }
+                    catch (error) {
+                        return reject(error);
+                    }
+                });
+            }
+            else if (abort) {
+                return false;
+            }
+            return;
+        }
+    }
+    return innerWalk();
+}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export * from './data/element-book-entry/element-book-chapter/element-book-chapter';
+export * from './data/element-book-entry/element-book-page/element-book-page';
+export * from './data/element-book-entry/element-book-page/element-book-page-example';
+export * from './ui/elements/element-book-app.element';

package/dist/index.js

@@ -0,0 +1,4 @@
+export * from './data/element-book-entry/element-book-chapter/element-book-chapter';
+export * from './data/element-book-entry/element-book-page/element-book-page';
+export * from './data/element-book-entry/element-book-page/element-book-page-example';
+export * from './ui/elements/element-book-app.element';

package/dist/routing/create-element-book-router.d.ts

@@ -0,0 +1,2 @@
+import { ElementBookRouter } from './element-book-routing';
+export declare function createElementBookRouter(baseRoute: string): ElementBookRouter;

package/dist/routing/create-element-book-router.js

@@ -0,0 +1,6 @@
+import { createSpaRouter } from 'spa-router-vir';
+export function createElementBookRouter(baseRoute) {
+    return createSpaRouter({
+        routeBase: baseRoute,
+    });
+}

package/dist/routing/element-book-routing.d.ts

@@ -0,0 +1,5 @@
+import { FullRoute, SpaRouter } from 'spa-router-vir';
+export type ValidElementBookPaths = string[];
+export type ElementBookFullRoute = Required<Readonly<FullRoute<ValidElementBookPaths, undefined, undefined>>>;
+export declare const emptyElementBookFullRoute: Readonly<ElementBookFullRoute>;
+export type ElementBookRouter = Readonly<SpaRouter<ValidElementBookPaths, undefined, undefined>>;

package/dist/routing/element-book-routing.js

@@ -0,0 +1,5 @@
+export const emptyElementBookFullRoute = {
+    hash: undefined,
+    paths: [],
+    search: undefined,
+};

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

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

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

@@ -0,0 +1,40 @@
+import { css, html, listen } from 'element-vir';
+import { shouldMouseEventTriggerRoutes } from 'spa-router-vir';
+import { ChangeRouteEvent } from '../../events/change-route.event';
+import { defineElementBookElement } from '../define-book-element';
+export const ElementBookRouteLink = defineElementBookElement()({
+    tagName: 'element-book-route-link',
+    cssVars: {
+        anchorPadding: '',
+    },
+    styles: ({ cssVarValues }) => css `
+        a {
+            display: block;
+            padding: ${cssVarValues.anchorPadding};
+            text-decoration: inherit;
+            color: inherit;
+            height: 100%;
+            width: 100%;
+        }
+    `,
+    renderCallback: ({ inputs, dispatch }) => {
+        const linkUrl = inputs.router?.createRoutesUrl({
+            ...inputs.router?.getCurrentRawRoutes(),
+            ...inputs.route,
+        }) ?? '#';
+        return html `
+            <a
+                href=${linkUrl}
+                ${listen('click', (clickEvent) => {
+            if (!inputs.router || shouldMouseEventTriggerRoutes(clickEvent)) {
+                clickEvent.preventDefault();
+                window.scrollTo(0, 0);
+                dispatch(new ChangeRouteEvent(inputs.route));
+            }
+        })}
+            >
+                <slot></slot>
+            </a>
+        `;
+    },
+});

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

@@ -0,0 +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>;

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

@@ -0,0 +1,2 @@
+import { wrapDefineElement } from 'element-vir';
+export const { defineElement: defineElementBookElement, defineElementNoInputs: defineElementBookElementNoInputs, } = wrapDefineElement();

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

@@ -0,0 +1,9 @@
+import { ElementBookEntry } from '../../data/element-book-entry/element-book-entry';
+export declare const ElementBookApp: import("element-vir").DeclarativeElementDefinition<"element-book-app", {
+    entries: ReadonlyArray<ElementBookEntry>;
+    baseRoute?: string;
+    defaultPath?: ReadonlyArray<string>;
+}, {
+    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>;

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

@@ -0,0 +1,94 @@
+import { assign, css, defineElement, html, listen } from 'element-vir';
+import { entriesToTree, findEntryByBreadcrumbs, } from '../../data/element-book-entry/entry-tree/entry-tree';
+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 { ChangeRouteEvent } from '../events/change-route.event';
+import { ElementBookNav } from './element-book-nav.element';
+import { ElementBookEntryDisplay } from './entry-display/element-book-entry-display.element';
+export const ElementBookApp = defineElement()({
+    tagName: 'element-book-app',
+    stateInit: {
+        currentRoute: emptyElementBookFullRoute,
+        router: undefined,
+    },
+    styles: css `
+        :host {
+            display: block;
+            height: 100%;
+            width: 100%;
+            font-family: sans-serif;
+        }
+
+        .root {
+            height: 100%;
+            width: 100%;
+            display: flex;
+        }
+
+        ${ElementBookEntryDisplay} {
+            flex-grow: 1;
+        }
+    `,
+    initCallback({ updateState, state, inputs }) {
+        if (inputs.baseRoute && !state.router) {
+            const router = createElementBookRouter(inputs.baseRoute);
+            updateState({ router });
+            router.addRouteListener(true, (fullRoute) => {
+                updateState({
+                    currentRoute: fullRoute,
+                });
+            });
+        }
+    },
+    renderCallback: ({ state, inputs, updateState }) => {
+        function updateRoutes(newRoute) {
+            if (state.router) {
+                state.router.setRoutes(newRoute);
+            }
+            else {
+                updateState({
+                    currentRoute: {
+                        ...state.currentRoute,
+                        ...newRoute,
+                    },
+                });
+            }
+        }
+        const entriesTree = entriesToTree(inputs.entries);
+        if (!state.currentRoute.paths.length) {
+            const firstPageBreadcrumbs = findFirstPageBreadcrumbs(entriesTree);
+            const defaultPath = inputs.defaultPath ??
+                (firstPageBreadcrumbs.length ? firstPageBreadcrumbs : undefined);
+            if (defaultPath && defaultPath.length) {
+                const newRoute = {
+                    paths: defaultPath,
+                };
+                updateRoutes(newRoute);
+            }
+        }
+        const currentEntry = findEntryByBreadcrumbs(state.currentRoute.paths, entriesTree).entry;
+        return html `
+            <div
+                class="root"
+                ${listen(ChangeRouteEvent, (event) => {
+            updateRoutes(event.detail);
+        })}
+            >
+                <${ElementBookNav}
+                    ${assign(ElementBookNav, {
+            tree: entriesTree,
+            router: state.router,
+            selectedPath: state.currentRoute.paths,
+        })}
+                ></${ElementBookNav}>
+                <${ElementBookEntryDisplay}
+                    ${assign(ElementBookEntryDisplay, {
+            currentRoute: state.currentRoute,
+            currentEntry,
+        })}
+                ></${ElementBookEntryDisplay}>
+            </div>
+        `;
+    },
+});

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

@@ -0,0 +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[]>;

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

@@ -0,0 +1,24 @@
+import { css, html } from 'element-vir';
+import { defineElementBookElement } from './define-book-element';
+export const ElementBookBreadcrumbs = defineElementBookElement()({
+    tagName: 'element-book-breadcrumbs',
+    styles: css `
+        :host {
+            display: flex;
+            color: #999;
+        }
+    `,
+    renderCallback: ({ inputs }) => {
+        return inputs.currentRoute.paths.map((currentPath, pathIndex) => {
+            const isLastPath = pathIndex >= inputs.currentRoute.paths.length - 1;
+            const spacer = isLastPath
+                ? ''
+                : html `
+                      >
+                  `;
+            return html `
+                ${currentPath} ${spacer}
+            `;
+        });
+    },
+});

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

@@ -0,0 +1,7 @@
+import { EntryTreeNode } from '../../data/element-book-entry/entry-tree/entry-tree';
+import { ElementBookRouter } from '../../routing/element-book-routing';
+export declare const ElementBookNav: import("element-vir").DeclarativeElementDefinition<"element-book-nav", {
+    tree: EntryTreeNode;
+    selectedPath: ReadonlyArray<string>;
+    router: ElementBookRouter | undefined;
+}, {}, {}, string, string, import("lit-html").HTMLTemplateResult>;

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

@@ -0,0 +1,89 @@
+import { areJsonEqual } from '@augment-vir/common';
+import { assign, classMap, css, html } from 'element-vir';
+import { ElementBookRouteLink } from './common/element-book-route-link.element';
+import { defineElementBookElement } from './define-book-element';
+export const ElementBookNav = defineElementBookElement()({
+    tagName: 'element-book-nav',
+    styles: css `
+        :host {
+            display: flex;
+            flex-direction: column;
+            padding: 16px 0;
+            background-color: #f8f8f8;
+        }
+
+        .title-row:hover {
+            background-color: #ccc;
+        }
+
+        .title-row {
+            display: block;
+            ${ElementBookRouteLink.cssVarNames
+        .anchorPadding}: 4px 24px 4px calc(calc(16px * var(--indent, 0)) + 24px);
+        }
+
+        ${ElementBookRouteLink} {
+            font-size: 20px;
+        }
+
+        ul {
+            list-style: none;
+            padding: 0;
+            margin: 0;
+        }
+
+        .selected {
+            background-color: #ddd;
+        }
+    `,
+    renderCallback({ inputs }) {
+        const navTree = createNavigationTree({
+            indent: 0,
+            tree: inputs.tree,
+            rootPath: [],
+            router: inputs.router,
+            selectedPath: inputs.selectedPath,
+        });
+        return html `
+            <ul>
+                ${navTree}
+            </ul>
+        `;
+    },
+});
+function createNavigationTree({ indent, tree, rootPath, selectedPath, router, }) {
+    if (!tree.children) {
+        return [];
+    }
+    return Object.values(tree.children).map((child) => {
+        const childPath = rootPath.concat(child.entry.title);
+        const childTemplates = createNavigationTree({
+            indent: indent + 1,
+            tree: child,
+            rootPath: childPath,
+            selectedPath,
+            router,
+        });
+        return html `
+            <div class="nav-tree-entry" style="--indent: ${indent};">
+                <li class=${child.entry.type}>
+                    <${ElementBookRouteLink}
+                        ${assign(ElementBookRouteLink, {
+            router: router,
+            route: {
+                paths: childPath,
+            },
+        })}
+                        class=${classMap({
+            'title-row': true,
+            selected: areJsonEqual(selectedPath, childPath),
+        })}
+                    >
+                        ${child.entry.title}
+                    </${ElementBookRouteLink}>
+                </li>
+                ${childTemplates}
+            </div>
+        `;
+    });
+}

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

@@ -0,0 +1,6 @@
+import { ElementBookEntry } from '../../../data/element-book-entry/element-book-entry';
+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>;

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

@@ -0,0 +1,75 @@
+import { assign, classMap, 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 { 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';
+export const ElementBookEntryDisplay = defineElementBookElement()({
+    tagName: 'element-book-entry-display',
+    styles: css `
+        :host {
+            display: flex;
+            flex-direction: column;
+        }
+
+        .title-bar {
+            border-bottom: 1px solid #f8f8f8;
+            padding: 4px 8px;
+        }
+
+        .examples-wrapper {
+            padding: 32px;
+            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.currentEntry.type === ElementBookEntryTypeEnum.Page
+            ? inputs.currentEntry.examples
+            : [];
+        const entryBreadcrumbs = listTitleBreadcrumbs(inputs.currentEntry, true);
+        const exampleTemplates = makeExampleTemplates(examples, entryBreadcrumbs);
+        return html `
+            <div class="title-bar">
+                <${ElementBookBreadcrumbs}
+                    ${assign(ElementBookBreadcrumbs, { currentRoute: inputs.currentRoute })}
+                ></${ElementBookBreadcrumbs}>
+            </div>
+            <div class="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>
+        `;
+    });
+}

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

@@ -0,0 +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>;

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

@@ -0,0 +1,25 @@
+import { css, html } from 'element-vir';
+import { defineElementBookElement } from '../define-book-element';
+export const ElementBookExampleControls = defineElementBookElement()({
+    tagName: 'element-book-example-controls',
+    styles: css `
+        :host {
+            display: flex;
+            color: #bbb;
+            border-bottom: 1px solid currentColor;
+            padding: 0 8px 4px;
+        }
+
+        :host(:hover) {
+            color: black;
+        }
+    `,
+    renderCallback({ inputs }) {
+        return html `
+            <span>
+                ${inputs.example.title}
+                <span></span>
+            </span>
+        `;
+    },
+});

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

@@ -0,0 +1,7 @@
+import { ElementBookPageExample } from '../../../data/element-book-entry/element-book-page/element-book-page-example';
+export declare const ElementBookExampleViewer: import("element-vir").DeclarativeElementDefinition<"element-book-example-viewer", {
+    example: ElementBookPageExample;
+    parentBreadcrumbs: ReadonlyArray<string>;
+}, {
+    internalState: any;
+}, {}, string, string, string | import("lit-html").HTMLTemplateResult>;

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

@@ -0,0 +1,41 @@
+import { extractErrorMessage } from '@augment-vir/common';
+import { html, renderIf } from 'element-vir';
+import { defineElementBookElement } from '../define-book-element';
+const unsetInternalState = Symbol('unset-internal-state');
+export const ElementBookExampleViewer = defineElementBookElement()({
+    tagName: 'element-book-example-viewer',
+    stateInit: {
+        internalState: unsetInternalState,
+    },
+    renderCallback({ state, inputs, updateState }) {
+        const fullExampleBreadcrumbs = inputs.parentBreadcrumbs.concat(inputs.example.title);
+        if (state.internalState === unsetInternalState) {
+            updateState({ internalState: inputs.example.stateInit });
+        }
+        try {
+            const output = inputs.example.render({
+                state: state.internalState,
+                updateState: (newState) => {
+                    updateState({
+                        internalState: {
+                            ...state.internalState,
+                            ...newState,
+                        },
+                    });
+                },
+            });
+            return html `
+                ${renderIf(!!inputs.example.styles, html `
+                        <style>
+                            ${inputs.example.styles}
+                        </style>
+                    `)}
+                ${output}
+            `;
+        }
+        catch (error) {
+            console.error(error);
+            return `${fullExampleBreadcrumbs.join(' > ')} failed: ${extractErrorMessage(error)}`;
+        }
+    },
+});

package/dist/ui/events/change-route.event.d.ts

@@ -0,0 +1 @@
+export declare const ChangeRouteEvent: import("element-vir").DefinedTypedEvent<"change-page", Partial<Required<Readonly<import("spa-router-vir").FullRoute<import("../../routing/element-book-routing").ValidElementBookPaths, undefined, undefined>>>>>;

package/dist/ui/events/change-route.event.js

@@ -0,0 +1,2 @@
+import { defineTypedEvent } from 'element-vir';
+export const ChangeRouteEvent = defineTypedEvent()('change-page');

package/package.json

@@ -1,6 +1,19 @@
 {
     "name": "element-book",
-    "version": "0.0.0",
+    "version": "0.0.1",
+    "keywords": [
+        "book",
+        "design system",
+        "design",
+        "element-vir",
+        "element",
+        "es module",
+        "esm",
+        "lit-element",
+        "lit",
+        "storybook",
+        "system"
+    ],
     "homepage": "https://github.com/electrovir/element-book",
     "bugs": {
         "url": "https://github.com/electrovir/element-book/issues"
@@ -9,38 +22,38 @@
         "type": "git",
         "url": "https://github.com/electrovir/element-book"
     },
-    "license": "MIT",
+    "license": "(MIT or CC0 1.0)",
     "author": {
         "name": "electrovir",
         "url": "https://github.com/electrovir"
     },
     "main": "dist/index.js",
+    "module": "dist/index.js",
     "types": "dist/index.d.ts",
     "scripts": {
-        "build": "virmator frontend build",
-        "compile": "rm -rf dist && virmator compile",
-        "docs:update": "virmator code-in-markdown",
-        "format": "virmator format",
-        "preview": "virmator frontend preview",
-        "publish": "virmator publish \"npm run compile && npm run test:all\"",
-        "start": "npm install && virmator frontend",
-        "test": "virmator test",
-        "test:all": "npm run test:types && npm run test:coverage && npm run test:spelling && npm run test:format && npm run test:docs",
+        "compile": "tsc",
+        "compile:clean": "rm -rf dist && npm run compile",
+        "test": "virmator test-web",
         "test:coverage": "npm run test coverage",
-        "test:docs": "virmator code-in-markdown check",
-        "test:format": "virmator format check",
-        "test:spelling": "virmator spellcheck",
-        "test:types": "tsc --noEmit",
-        "test:web": "virmator test-web"
+        "test:types": "tsc --noEmit"
+    },
+    "dependencies": {
+        "@augment-vir/common": "^13.3.0",
+        "element-vir": "^12.2.0",
+        "spa-router-vir": "^2.0.0",
+        "typed-event-target": "^1.2.0"
     },
     "devDependencies": {
-        "prettier": "^2.8.3",
-        "prettier-plugin-jsdoc": "^0.4.2",
-        "prettier-plugin-multiline-arrays": "^1.1.3",
-        "prettier-plugin-organize-imports": "^3.2.2",
-        "prettier-plugin-packagejson": "^2.3.0",
-        "prettier-plugin-sort-json": "^1.0.0",
-        "prettier-plugin-toml": "^0.3.1",
-        "virmator": "^5.4.0"
+        "@augment-vir/browser-testing": "^13.3.0",
+        "@open-wc/testing": "^3.1.8",
+        "@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-playwright": "^0.10.0",
+        "@web/test-runner-visual-regression": "^0.8.0",
+        "istanbul-smart-text-reporter": "^1.1.1",
+        "type-fest": "^3.9.0",
+        "typescript": "^5.0.4"
     }
 }

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2023 electrovir
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.