@nil-/doc 0.2.37 → 0.2.39

package/CHANGELOG.md

@@ -1,30 +1,47 @@
 # @nil-/doc
 
+## 0.2.39
+
+### Patch Changes
+
+-   [doc][fix] force state of navigation expand icon when filtering ([#61](https://github.com/njaldea/mono/pull/61))
+
+-   [doc][patch] tighter eslint ([#61](https://github.com/njaldea/mono/pull/61))
+
+-   [doc][patch] added tests for non-UI related code ([#61](https://github.com/njaldea/mono/pull/61))
+
+-   [doc][patch] moved type definition ([#61](https://github.com/njaldea/mono/pull/61))
+
+-   [doc][patch] enabled typescript eslint rules ([#61](https://github.com/njaldea/mono/pull/61))
+
+## 0.2.38
+
+### Patch Changes
+
+-   [doc][new] added fuzzy match for nav filter ([#59](https://github.com/njaldea/mono/pull/59))
+
 ## 0.2.37
 
 ### Patch Changes
 
 -   [doc][fix] params prop is now reactive ([#57](https://github.com/njaldea/mono/pull/57))
-    [doc] added component documentation link to deployment
-    [doc] removed inRoot
-
--   [doc][cleanup] refactored Instance/Template/Params ([#57](https://github.com/njaldea/mono/pull/57))
+-   [doc][docu] added component documentation link to deployment ([#57](https://github.com/njaldea/mono/pull/57))
+-   [doc][patch] removed inRoot ([#57](https://github.com/njaldea/mono/pull/57))
+-   [doc][patch] refactored Instance/Template/Params ([#57](https://github.com/njaldea/mono/pull/57))
 
 ## 0.2.36
 
 ### Patch Changes
 
 -   [doc][fix] color changes and transition ([#55](https://github.com/njaldea/mono/pull/55))
-
--   [all] added html meta details ([#55](https://github.com/njaldea/mono/pull/55))
+-   [doc][patch] added html meta details ([#55](https://github.com/njaldea/mono/pull/55))
 
 ## 0.2.35
 
 ### Patch Changes
 
--   [doc] changed Control "side" flag to "position" prop ([#53](https://github.com/njaldea/mono/pull/53))
-
--   [misc] added nil icon ([#53](https://github.com/njaldea/mono/pull/53))
+-   [doc][break] changed Control "side" flag to "position" prop ([#53](https://github.com/njaldea/mono/pull/53))
+-   [doc][new] added nil icon ([#53](https://github.com/njaldea/mono/pull/53))
 
 ## 0.2.34
 
@@ -38,21 +55,20 @@
 
 ### Patch Changes
 
--   [doc] update formatting (camel case use) ([#49](https://github.com/njaldea/mono/pull/49))
+-   [doc][patch] update formatting (camel case use) ([#49](https://github.com/njaldea/mono/pull/49))
 
 ## 0.2.32
 
 ### Patch Changes
 
--   [doc] relaxed file extension for sveltekit helper ([#47](https://github.com/njaldea/mono/pull/47))
+-   [doc][new] relaxed file extension for sveltekit helper ([#47](https://github.com/njaldea/mono/pull/47))
 
 ## 0.2.31
 
 ### Patch Changes
 
--   [doc] better container style ([#45](https://github.com/njaldea/mono/pull/45))
-
--   [doc] improved ThemeIcon ([#45](https://github.com/njaldea/mono/pull/45))
+-   [doc][patch] better container style ([#45](https://github.com/njaldea/mono/pull/45))
+-   [doc][patch] improved ThemeIcon ([#45](https://github.com/njaldea/mono/pull/45))
 
 ## 0.2.30
 
@@ -79,56 +95,56 @@
 
 ### Patch Changes
 
--   [doc] fix fira code css import ([#35](https://github.com/njaldea/mono/pull/35))
+-   [doc][fix] fix fira code css import ([#35](https://github.com/njaldea/mono/pull/35))
 
 ## 0.2.26
 
 ### Patch Changes
 
--   [doc] removed fallback page in documentation ([#30](https://github.com/njaldea/mono/pull/30))
+-   [doc][docu] removed fallback page in documentation ([#30](https://github.com/njaldea/mono/pull/30))
 
 ## 0.2.25
 
 ### Patch Changes
 
--   186187c: [doc][breaking] removed layout slot prop for content. all unnamed slots will be part of the default slot
--   186187c: [doc] fix range tooltip styling
--   a82c0de: [doc] support dark/light mode
+-   186187c: [doc][new] removed layout slot prop for content. all unnamed slots will be part of the default slot
+-   186187c: [doc][fix] fix range tooltip styling
+-   a82c0de: [doc][new] support dark/light mode
 
 ## 0.2.24
 
 ### Patch Changes
 
--   782e6fa: [doc][breaking] simplified sveltekit glue layer
--   782e6fa: [doc] added documentation to public methods
+-   782e6fa: [doc][new] simplified sveltekit glue layer
+-   782e6fa: [doc][docu] added documentation to public methods
 
 ## 0.2.23
 
 ### Patch Changes
 
--   5655f86: [feature] added slot prop `key` to Template component
--   5655f86: [Dependencies] moved some devDependencies to peerDependencies
+-   5655f86: [doc][new] added slot prop `key` to Template component
+-   5655f86: [doc][patch] moved some devDependencies to peerDependencies
 
 ## 0.2.22
 
 ### Patch Changes
 
--   3ce0a62: [doc] support for touch event via pointerevent (draggable container)
+-   3ce0a62: [doc][new] support for touch event via pointerevent (draggable container)
 
 ## 0.2.21
 
 ### Patch Changes
 
 -   0398a72: [doc][fix] remove dependency on box-sizing
-    [doc][fix] control min width
-    [doc][feature] made template configurable by column prop
+-   0398a72: [doc][fix] control min width
+-   0398a72: [doc][new] made template configurable by column prop
 
 ## 0.2.20
 
 ### Patch Changes
 
 -   3eee0ce: [doc][fix] removed setting of margin/padding
-    [doc][fix] only propagate box-sizing (inherit)
+-   3eee0ce: [doc][fix] only propagate box-sizing (inherit)
 
 ## 0.2.19
 
@@ -146,68 +162,62 @@
 
 ### Patch Changes
 
--   af86341: [doc] moved default mapping in a common lib
-    [doc] fix typing
-    [doc] if Param's tag is not provided, use stringified id
+-   af86341: [doc][fix] moved default mapping in a common lib
+-   af86341: [doc][fix] fix typing
+-   af86341: [doc][patch] if Param's tag is not provided, use stringified id
 
 ## 0.2.16
 
 ### Patch Changes
 
--   650eb4b: [doc] revived proper ordering of params
-    [doc] each param now has its own defaults (which is resolved from template's default and pram's props)
+-   650eb4b: [doc][fix] revived proper ordering of params
+-   650eb4b: [doc][new] each param now has its own defaults (which is resolved from template's default and pram's props)
 
 ## 0.2.15
 
 ### Patch Changes
 
--   44a7113: [doc] added documentation for internal Container
-    [doc] adjusted api for load (now `routes`)
-    [doc] fix for layout group route
+-   44a7113: [doc][docu] added documentation for internal Container
+-   44a7113: [doc][new] adjusted api for load (now `routes`)
+-   44a7113: [doc][fix] fix for layout group route
 
 ## 0.2.14
 
 ### Patch Changes
 
--   6265fa6: [doc] added Tuple and Object Controls
-    [doc] added temporary internal doc
+-   6265fa6: [doc][new] added Tuple and Object Controls
+-   6265fa6: [doc][docu] added temporary internal doc
 
 ## 0.2.13
 
 ### Patch Changes
 
--   39dbce9: [doc] navigation now automatically opens when redirected to a route that is still collapsed
+-   39dbce9: [doc][new] navigation now automatically opens when redirected to a route that is still collapsed
 
 ## 0.2.12
 
 ### Patch Changes
 
--   6c2d946: [fix] Nav now is not scrollable
-    [fix] Removes Container's "reversed" flag
-    [fix] Adds "secondary" flag to Container
-    [fix] Changes Container slot name (primary is top or left, seconadry is bottom or right)
-    [fix] load now removes routes with parameters
-    [fix] Template now supports `noreset`
-    [fix] Updates documentation
-
-## 0.2.11
-
-### Patch Changes
-
--   8d16322: noop
+-   6c2d946: [doc][fix] Nav now is not scrollable
+-   6c2d946: [doc][fix] Removes Container's "reversed" flag
+-   6c2d946: [doc][fix] Adds "secondary" flag to Container
+-   6c2d946: [doc][fix] Changes Container slot name (primary is top or left, seconadry is bottom or right)
+-   6c2d946: [doc][fix] load now removes routes with parameters
+-   6c2d946: [doc][fix] Template now supports `noreset`
+-   6c2d946: [doc][fix] Updates documentation
 
 ## 0.2.10
 
 ### Patch Changes
 
--   c6de380: [feature] container collapsing now supported
-    [cleanup] styling of container now uses grid for easier handling
+-   c6de380: [doc][new] container collapsing now supported
+-   c6de380: [doc][patch] styling of container now uses grid for easier handling
 
 ## 0.2.9
 
 ### Patch Changes
 
--   5c10f11: [fix] layout fill height
+-   5c10f11: [doc][patch] layout fill height
 
 ## 0.2.8
 

package/components/Layout.svelte

@@ -27,6 +27,16 @@
         overflow: hidden;
     }
 
+    .icon {
+        width: 100%;
+        height: 100%;
+        transition: transform 350ms;
+    }
+
+    .icon:hover {
+        transform: scale(1.5);
+    }
+
     .content {
         height: 100%;
         padding: 5px;
@@ -74,7 +84,7 @@
 </script>
 <script>import Container from "./etc/Container.svelte";
 import Nav from "./navigation/Nav.svelte";
-import { getTheme, initTheme, evalTheme } from "./context";
+import { getTheme, initTheme } from "./context";
 import ThemeIcon from "./etc/ThemeIcon.svelte";
 import NilIcon from "./etc/NilIcon.svelte";
 export let data;
@@ -85,7 +95,7 @@ export let theme = void 0;
 const parentTheme = getTheme();
 const dark = initTheme();
 $:
-  $dark = evalTheme(parentTheme ? $parentTheme : true, theme);
+  $dark = theme === void 0 ? $parentTheme : "dark" === theme;
 </script>
 <!--
     @component
@@ -94,8 +104,16 @@ $:
 <div class="layout" class:dark={$dark}>
     <div class="top">
         <slot name="title"><span>@nil-/doc</span></slot>
-        <ThemeIcon bind:dark={$dark} />
-        <NilIcon />
+        <div class="icon" on:click={() => ($dark = !$dark)} on:keypress={null}>
+            <ThemeIcon bind:dark={$dark} />
+        </div>
+        <div
+            class="icon"
+            title="Double click to open repo: https://github.com/njaldea/mono"
+            on:dblclick={() => window.open("https://github.com/njaldea/mono", "_blank")}
+        >
+            <NilIcon />
+        </div>
     </div>
     <div class="main">
         <Container offset={250} vertical b>

package/components/block/Block.svelte

@@ -10,7 +10,7 @@
 
         box-sizing: border-box;
         font-family: "Fira Code", "Courier New", Courier, monospace;
-        padding: 3px;
+        padding: 13px 3px;
         gap: 3px;
     }
 
@@ -42,7 +42,7 @@
   initControlsState,
   initOrientation
 } from "./context";
-import { getTheme, initTheme, evalTheme } from "../context";
+import { getTheme, initTheme } from "../context";
 initParams();
 initDefaults();
 initControls();
@@ -52,7 +52,7 @@ export let theme = void 0;
 const parentTheme = getTheme();
 const dark = initTheme();
 $:
-  $dark = evalTheme(parentTheme ? $parentTheme : false, theme);
+  $dark = theme === void 0 ? $parentTheme : "dark" === theme;
 </script>
 <!--
     @component

package/components/block/Params.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import { type ValueType } from "./context";
+import type { ValueType } from "./types";
 declare const __propDef: {
     props: {
         tag?: string | undefined;

package/components/block/Template.svelte

@@ -1,10 +1,6 @@
 
 <script>import { beforeUpdate } from "svelte";
-import {
-  getDefaults,
-  getParams,
-  getOrientation
-} from "./context";
+import { getDefaults, getParams, getOrientation } from "./context";
 import { resolve } from "./utils";
 import Instance from "./Instance.svelte";
 const params = getParams();
@@ -17,9 +13,9 @@ $:
   $defaultsStore = defaults ?? {};
 $:
   $orientation = columns;
-const resolveArgs = resolve;
 let key = false;
 beforeUpdate(() => key = !key);
+const resolveArgs = resolve;
 const cast = (t) => t;
 </script>
 <!--

package/components/block/context.d.ts

@@ -1,8 +1,6 @@
-import type { Control } from "./controls/types";
 import type { Writable } from "svelte/store";
-export type ValueType = undefined | boolean | number | string | ValueType[] | {
-    [key: string]: ValueType;
-};
+import type { Control } from "./controls/types";
+import type { ValueType } from "./types";
 export type Params = {
     id: number;
     tag: string;

package/components/block/controls/Controls.svelte.d.ts

@@ -1,6 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
+import type { ValueType } from "../types";
 import type { Control } from "./types";
-import type { ValueType } from "../context";
 declare const __propDef: {
     props: {
         infos: Control[];

package/components/block/controls/Object.svelte

@@ -1,19 +1,21 @@
 
 <script>import Component from "./Component.svelte";
 import Header from "./misc/GroupHeader.svelte";
-import { getObjectDefaults } from "./misc/defaulter";
+import { getDefault } from "./misc/defaulter";
 export let value;
 export let info;
 export let depth;
 export let disabled = false;
-let ivalue = value ?? getObjectDefaults(info);
+let ivalue = value ?? getDefault(info);
 let enabled = value !== void 0;
 $:
   value = !disabled && enabled ? ivalue : void 0;
+$:
+  values = info.values;
 </script>
 <Header name={info.name} bind:checked={enabled} {depth} {disabled} />
 {#if enabled && !disabled}
-    {#each info.values as info, i (i)}
+    {#each values as info, i (i)}
         <Component
             {info}
             bind:value={ivalue[info.name]}

package/components/block/controls/Object.svelte.d.ts

@@ -1,6 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
+import type { ValueType } from "../types";
 import type { ControlObject } from "./types";
-import type { ValueType } from "../context";
 declare const __propDef: {
     props: {
         value: Record<string, ValueType> | undefined;

package/components/block/controls/Tuple.svelte

@@ -1,19 +1,21 @@
 
 <script>import Component from "./Component.svelte";
 import Header from "./misc/GroupHeader.svelte";
-import { getTupleDefaults } from "./misc/defaulter";
+import { getDefault } from "./misc/defaulter";
 export let value;
 export let info;
 export let depth;
 export let disabled = false;
-let ivalue = value ?? getTupleDefaults(info);
+let ivalue = value ?? getDefault(info);
 let enabled = value !== void 0;
 $:
   value = !disabled && enabled ? ivalue : void 0;
+$:
+  values = info.values;
 </script>
 <Header name={info.name} bind:checked={enabled} {depth} {disabled} />
 {#if enabled && !disabled}
-    {#each info.values as info, i (i)}
+    {#each values as info, i (i)}
         <Component
             info={{ ...info, name: `${i}` }}
             bind:value={ivalue[i]}

package/components/block/controls/Tuple.svelte.d.ts

@@ -1,6 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
+import type { ValueType } from "../types";
 import type { ControlTuple } from "./types";
-import type { ValueType } from "../context";
 declare const __propDef: {
     props: {
         value: ValueType[] | undefined;

package/components/block/controls/misc/Styler.svelte

@@ -36,6 +36,7 @@ const dark = getTheme();
 
     /* colors */
     div > :global(div) {
+        transition: background-color 350ms;
         background-color: hsl(0, 0%, 100%);
     }
 

package/components/block/controls/misc/defaulter.d.ts

@@ -1,5 +1,10 @@
-import type { ValueType } from "../../context";
-import type { Control, ControlTuple, ControlObject } from "../types";
-export declare const getDefault: (i: Control) => ValueType;
-export declare const getObjectDefaults: (info: ControlObject) => Record<string, ValueType>;
-export declare const getTupleDefaults: (i: ControlTuple) => ValueType[];
+import type { ValueType } from "../../types";
+import type { Control, ControlNumber, ControlRange, ControlSelect, ControlSwitch, ControlText, ControlTuple, ControlObject } from "../types";
+export declare function getDefault(i: ControlTuple): ValueType[];
+export declare function getDefault(i: ControlObject): Record<string, ValueType>;
+export declare function getDefault(i: ControlNumber): number;
+export declare function getDefault(i: ControlRange): number;
+export declare function getDefault(i: ControlSelect): string;
+export declare function getDefault(i: ControlText): string;
+export declare function getDefault(i: ControlSwitch): boolean;
+export declare function getDefault(i: Control): ValueType;

package/components/block/controls/misc/defaulter.js

@@ -1,37 +1,33 @@
-export const getDefault = (i) => {
-    if ("switch" === i.type) {
-        return false;
-    }
-    if ("number" === i.type) {
-        return 0;
-    }
-    if ("range" === i.type) {
-        return i.min;
-    }
-    if ("text" === i.type) {
-        return "";
-    }
-    if ("select" === i.type) {
-        return i.values.length > 0 ? i.values[0] : "";
-    }
-    if ("tuple" === i.type) {
-        // eslint-disable-next-line no-use-before-define
-        return [...getTupleDefaults(i)];
-    }
-    if ("object" === i.type) {
-        // eslint-disable-next-line no-use-before-define
-        return getObjectDefaults(i);
-    }
-    return undefined;
-};
-export const getObjectDefaults = (info) => {
+// eslint-disable-next-line func-style
+export function getDefault(i) {
+    switch (i.type) {
+        case "object":
+            // eslint-disable-next-line no-use-before-define
+            return getObjectDefaults(i);
+        case "tuple":
+            // eslint-disable-next-line no-use-before-define
+            return getTupleDefaults(i);
+        case "text":
+            return "";
+        case "select":
+            return i.values.length > 0 ? i.values[0] : "";
+        case "number":
+            return 0;
+        case "range":
+            return i.min;
+        case "switch":
+        default:
+            return false;
+    }
+}
+const getObjectDefaults = (info) => {
     const ret = {};
     for (const i of info.values) {
         ret[i.name] = getDefault(i);
     }
     return ret;
 };
-export const getTupleDefaults = (i) => {
+const getTupleDefaults = (i) => {
     const ret = [];
     for (const info of i.values) {
         ret.push(getDefault(info));

package/components/block/types.d.ts

@@ -0,0 +1,9 @@
+export type ValueType =
+    | undefined
+    | boolean
+    | number
+    | string
+    | ValueType[]
+    | {
+          [key: string]: ValueType;
+      };

package/components/block/utils.d.ts

@@ -1,6 +1,4 @@
-import type { ValueType } from "./context";
-type VTObject = {
-    [key: string]: ValueType;
-};
-export declare const resolve: <Args>(d: VTObject | undefined, p: VTObject) => Args;
+import type { ValueType } from "./types";
+type VTObject = Record<string, ValueType>;
+export declare const resolve: <Args = Record<string, ValueType>>(destination: VTObject, override: VTObject) => Args;
 export {};

package/components/block/utils.js

@@ -1,15 +1,12 @@
 const resolveArray = (d, p) => {
-    if (d === undefined) {
-        return undefined;
-    }
     const ret = [];
-    for (const i in d) {
+    for (let i = 0; i < d.length; ++i) {
         if (d[i] instanceof Array) {
-            ret.push(resolveArray(d[i], p[i] ?? []));
+            ret.push(resolveArray(d[i], (p[i] ?? [])));
         }
         else if (d[i] instanceof Object) {
             // eslint-disable-next-line no-use-before-define
-            ret.push(resolveObject(d[i], p[i] ?? {}));
+            ret.push(resolveObject(d[i], (p[i] ?? {})));
         }
         else {
             ret.push(p[i] ?? d[i]);
@@ -18,16 +15,13 @@ const resolveArray = (d, p) => {
     return ret;
 };
 const resolveObject = (d, p) => {
-    if (d === undefined) {
-        return undefined;
-    }
     const ret = {};
     for (const [key, value] of Object.entries(d)) {
         if (value instanceof Array) {
-            ret[key] = resolveArray(value, p[key] ?? []);
+            ret[key] = resolveArray(value, (p[key] ?? []));
         }
         else if (value instanceof Object) {
-            ret[key] = resolveObject(value, p[key] ?? {});
+            ret[key] = resolveObject(value, (p[key] ?? {}));
         }
         else {
             ret[key] = p[key] ?? value;
@@ -35,6 +29,6 @@ const resolveObject = (d, p) => {
     }
     return ret;
 };
-export const resolve = (d, p) => {
-    return resolveObject(d ?? {}, p);
+export const resolve = (destination, override) => {
+    return resolveObject(destination, override);
 };

package/components/context.d.ts

@@ -2,4 +2,3 @@ import type { Writable } from "svelte/store";
 export type Theme = undefined | "light" | "dark";
 export declare const getTheme: () => Writable<boolean>;
 export declare const initTheme: () => Writable<boolean>;
-export declare const evalTheme: (parent: boolean, theme: Theme) => boolean;

package/components/context.js

@@ -1,11 +1,5 @@
 import { setContext, getContext } from "svelte";
 import { writable } from "svelte/store";
 const theme = Symbol();
-export const getTheme = () => getContext(theme);
+export const getTheme = () => getContext(theme) ?? writable(true);
 export const initTheme = () => setContext(theme, writable(true));
-export const evalTheme = (parent, theme) => {
-    if (theme === undefined) {
-        return parent;
-    }
-    return "dark" === theme;
-};

package/components/etc/ThemeIcon.svelte

@@ -44,13 +44,7 @@ const vdark = {
   v: 1
 };
 </script>
-<svg
-    class:dark
-    viewBox="-25 -25 50 50"
-    transform={`rotate(${$values.rotate})`}
-    on:click={() => (dark = !dark)}
-    on:keypress={null}
->
+<svg class:dark viewBox="-25 -25 50 50" transform={`rotate(${$values.rotate})`}>
     <mask id={`nil_doc_theme_icon_${index}`}>
         <rect x="-25" y="-25" fill="white" />
         <circle cy={$values.mcy} r="11" />

package/components/etc/action.js

@@ -3,7 +3,7 @@ export const createDraggable = (offset) => {
     const position = writable(offset);
     const draggable = (div, parameter) => {
         let tm = new Date().getTime();
-        let param = parameter ?? { reset: () => 0, vertical: true, reversed: false };
+        let param = parameter;
         position.set(param.reset());
         let refPage = 0;
         const disengage = () => param.moving.set(false);
@@ -15,14 +15,14 @@ export const createDraggable = (offset) => {
         };
         const engage = (e) => {
             if (checkDoubleTap()) {
-                param?.dbltap?.();
+                param.dbltap?.();
                 disengage();
                 return;
             }
             param.moving.set(true);
             position.set(param.reset());
             refPage = param.vertical ? e.pageX : e.pageY;
-            param?.tap?.();
+            param.tap?.();
         };
         const move = (e) => {
             if (get(param.moving)) {

package/components/navigation/Nav.svelte

@@ -3,20 +3,22 @@
         width: 100%;
         height: 100%;
         min-width: 200px;
-        gap: 10px;
         display: flex;
         flex-direction: column;
     }
 
-    .logo,
     .search-bar {
-        padding-left: 20px;
-        padding-right: 20px;
+        padding: 5px;
     }
 
     input {
-        height: 20px;
+        height: 30px;
         width: 100%;
+        padding: 0px 10px;
+    }
+
+    input:focus {
+        outline: none;
     }
 
     * {
@@ -26,7 +28,8 @@
     }
 </style>
 
-<script context="module">const apply = (paths, init, pre, next, post) => {
+<script context="module">import { fuzz } from "./utils/fuzz";
+const apply = (paths, init, pre, next, post) => {
   const retval = {};
   for (const path of paths) {
     const parts = path.split("/");
@@ -51,16 +54,18 @@
   }
   return retval;
 };
-const filt = (path, filter, renamer) => path.includes(filter) || path.split("/").map(renamer).join("/").includes(filter);
-const populate = (filter, info, renamer) => apply(
-  filter.length > 0 ? info.filter((path) => filt(path, filter, renamer)) : info,
-  () => ({ url: null, sub: {} }),
-  (t) => t,
-  (t) => t.sub,
-  (t, p) => {
-    t.url = p;
-  }
-);
+const filt = (path, filter, renamer) => {
+  return fuzz(path, filter) || fuzz(path.split("/").map(renamer).join("/"), filter);
+};
+const populate = (filter, info, renamer) => {
+  return apply(
+    filter.length > 0 ? info.filter((path) => filt(path, filter, renamer)) : info,
+    () => ({ url: null, sub: {} }),
+    (t) => t,
+    (t) => t.sub,
+    (t, p) => void (t.url = p)
+  );
+};
 </script>
 <script>import Tree from "./Tree.svelte";
 export let info;
@@ -91,7 +96,6 @@ $:
   update(selected);
 </script>
 <div class="nav">
-    <div class="logo"><slot /></div>
     <div class="search-bar">
         <input bind:value={filter} type="text" />
     </div>

package/components/navigation/Nav.svelte.d.ts

@@ -12,9 +12,7 @@ declare const __propDef: {
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {};
-    };
+    slots: {};
 };
 export type NavProps = typeof __propDef.props;
 export type NavEvents = typeof __propDef.events;

package/components/navigation/Node.svelte

@@ -43,7 +43,7 @@
 </style>
 
 <script>import { slide } from "svelte/transition";
-import { sort } from "./utils";
+import { sort } from "./utils/sort";
 import { createEventDispatcher } from "svelte";
 export let key;
 export let value;
@@ -74,7 +74,7 @@ const click = (link) => {
         {style}
         class:selected={selected === value.url}
     >
-        <div class="icon" class:expanded={hasChildren && states.expanded}>
+        <div class="icon" class:expanded={hasChildren && (expand || states.expanded)}>
             <div>{Object.keys(value.sub).length > 0 ? ">" : "-"}</div>
         </div>
         <span>{renamer(key)}</span>

package/components/navigation/Tree.svelte

@@ -1,6 +1,6 @@
 
 <script>import Node from "./Node.svelte";
-import { sort } from "./utils";
+import { sort } from "./utils/sort";
 export let tree;
 export let states;
 export let sorter;

package/components/navigation/types.d.ts

@@ -1,12 +1,12 @@
-export interface Tree {
+export type Tree = {
     url: string | null;
     sub: Record<string, Tree>;
-}
+};
 
-export interface States {
+export type States = {
     expanded: boolean;
     sub: Record<string, States>;
-}
+};
 
 export type Sorter = (l: string, r: string) => 1 | 0 | -1;
 export type Renamer = (s: string) => string;

package/components/navigation/utils/fuzz.d.ts

@@ -0,0 +1 @@
+export declare const fuzz: (target: string, query: string) => boolean;

package/components/navigation/utils/fuzz.js

@@ -0,0 +1,119 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License.
+ *  See License.txt in https://github.com/microsoft/vscode/blob/main/LICENSE.txt
+ *--------------------------------------------------------------------------------------------*/
+/*
+ *  This implementation is inspired by:
+ *      https://github.com/microsoft/vscode/blob/main/src/vs/base/common/fuzzyScorer.ts
+ *
+ *  It is simplified to fit the use case for @nil-/doc
+ */
+const isUpper = (code) => {
+    // A == 65
+    // Z == 90
+    return 65 <= code && code <= 90;
+};
+const scoreSeparatorAtPos = (charCode) => {
+    switch (charCode) {
+        case 47: // Slash
+            // prefer path separators...
+            return 5;
+        case 95: // Underline
+        case 45: // Dash
+        case 46: // Period
+        case 32: // Space
+        case 58: // Colon:
+            // ...over other separators
+            return 4;
+        default:
+            return 0;
+    }
+};
+const computeCharScore = (queryCharAtIndex, queryLowerCharAtIndex, target, targetLower, targetIndex, matchesSequenceLength) => {
+    let score = 0;
+    if (queryLowerCharAtIndex !== targetLower[targetIndex]) {
+        // no match of characters
+        return score;
+    }
+    // Character match bonus
+    score += 1;
+    // Consecutive match bonus
+    if (matchesSequenceLength > 0) {
+        score += matchesSequenceLength * 5;
+    }
+    // Same case bonus
+    if (queryCharAtIndex === target[targetIndex]) {
+        score += 1;
+    }
+    // Start of word bonus
+    if (0 === targetIndex) {
+        score += 8;
+    }
+    else {
+        const separatorBonus = scoreSeparatorAtPos(target.charCodeAt(targetIndex - 1));
+        if (separatorBonus) {
+            score += separatorBonus;
+        }
+        else if (isUpper(target.charCodeAt(targetIndex)) && 0 === matchesSequenceLength) {
+            score += 2;
+        }
+    }
+    return score;
+};
+const doScoreFuzzy = (query, queryLower, queryLength, target, targetLower, targetLength) => {
+    const scores = [];
+    const matches = [];
+    for (let queryIndex = 0; queryIndex < queryLength; queryIndex++) {
+        const queryIndexOffset = queryIndex * targetLength;
+        const queryIndexPreviousOffset = queryIndexOffset - targetLength;
+        const queryIndexGtNull = queryIndex > 0;
+        const queryCharAtIndex = query[queryIndex];
+        const queryLowerCharAtIndex = queryLower[queryIndex];
+        for (let targetIndex = 0; targetIndex < targetLength; targetIndex++) {
+            const targetIndexGtNull = targetIndex > 0;
+            const currentIndex = queryIndexOffset + targetIndex;
+            const leftIndex = currentIndex - 1;
+            const diagIndex = queryIndexPreviousOffset + targetIndex - 1;
+            const leftScore = targetIndexGtNull ? scores[leftIndex] : 0;
+            const diagScore = queryIndexGtNull && targetIndexGtNull ? scores[diagIndex] : 0;
+            const matchesSequenceLength = queryIndexGtNull && targetIndexGtNull ? matches[diagIndex] : 0;
+            const score = !diagScore && queryIndexGtNull
+                ? 0
+                : computeCharScore(queryCharAtIndex, queryLowerCharAtIndex, target, targetLower, targetIndex, matchesSequenceLength);
+            const isValidScore = score && diagScore + score >= leftScore;
+            if (isValidScore) {
+                matches[currentIndex] = matchesSequenceLength + 1;
+                scores[currentIndex] = diagScore + score;
+            }
+            else {
+                matches[currentIndex] = 0;
+                scores[currentIndex] = leftScore;
+            }
+        }
+    }
+    const positions = [];
+    let queryIndex = queryLength - 1;
+    let targetIndex = targetLength - 1;
+    while (queryIndex >= 0 && targetIndex >= 0) {
+        const currentIndex = queryIndex * targetLength + targetIndex;
+        const match = matches[currentIndex];
+        if (0 === match) {
+            targetIndex--;
+        }
+        else {
+            positions.push(targetIndex);
+            queryIndex--;
+            targetIndex--;
+        }
+    }
+    return [scores[queryLength * targetLength - 1], positions.reverse()];
+};
+export const fuzz = (target, query) => {
+    const targetLength = target.length;
+    const queryLength = query.length;
+    if (targetLength < queryLength) {
+        return false;
+    }
+    return (doScoreFuzzy(query, query.toLowerCase(), queryLength, target, target.toLowerCase(), targetLength)[0] > 0);
+};

package/components/navigation/utils/renamer.d.ts

@@ -0,0 +1,9 @@
+import type { Renamer } from "../types";
+/**
+ * If a text follows `<I>-<Name>` format,
+ * this method simply removes the Prefix.
+ *
+ * @param text
+ * @returns `<Name>`
+ */
+export declare const renamer: Renamer;

package/components/navigation/utils/renamer.js

@@ -0,0 +1,15 @@
+const match = /(\d+)-(.+)/;
+/**
+ * If a text follows `<I>-<Name>` format,
+ * this method simply removes the Prefix.
+ *
+ * @param text
+ * @returns `<Name>`
+ */
+export const renamer = (text) => {
+    const m = match.exec(text);
+    if (m) {
+        return m[2];
+    }
+    return text;
+};

package/components/navigation/utils/sort.d.ts

@@ -0,0 +1,2 @@
+import type { Tree } from "../types";
+export declare const sort: (t: Record<string, Tree>, order: (l: string, r: string) => 1 | 0 | -1) => [string, Tree][];

package/components/navigation/utils/sort.js

@@ -0,0 +1,3 @@
+export const sort = (t, order) => {
+    return Object.entries(t).sort(([l], [r]) => order(l, r));
+};

package/components/navigation/{utils.d.ts → utils/sorter.d.ts}

@@ -1,4 +1,4 @@
-import type { Tree, Sorter, Renamer } from "./types";
+import type { Sorter } from "../types";
 /**
  * Compares two texts for sorting.
  *
@@ -14,14 +14,4 @@ import type { Tree, Sorter, Renamer } from "./types";
  * @param r - right operand
  * @returns `-1 | 0 | +1`
  */
-declare const sorter: Sorter;
-/**
- * If a text follows `<I>-<Name>` format,
- * this method simply removes the Prefix.
- *
- * @param text
- * @returns `<Name>`
- */
-declare const renamer: Renamer;
-export declare const sort: (t: Record<string, Tree>, order: (l: string, r: string) => 1 | 0 | -1) => [string, Tree][];
-export { sorter, renamer };
+export declare const sorter: Sorter;

package/components/navigation/{utils.js → utils/sorter.js}

@@ -23,7 +23,7 @@ const sorterT = (l, r) => {
  * @param r - right operand
  * @returns `-1 | 0 | +1`
  */
-const sorter = (l, r) => {
+export const sorter = (l, r) => {
     const lmatch = match.exec(l);
     const rmatch = match.exec(r);
     if (null == lmatch && null == rmatch) {
@@ -35,21 +35,5 @@ const sorter = (l, r) => {
     if (null == rmatch) {
         return -1;
     }
-    return sorterT(parseInt(lmatch[1]), parseInt(rmatch[1]));
+    return sorterT(parseInt(lmatch[1]), parseInt(rmatch[1])) || sorterT(lmatch[2], rmatch[2]);
 };
-/**
- * If a text follows `<I>-<Name>` format,
- * this method simply removes the Prefix.
- *
- * @param text
- * @returns `<Name>`
- */
-const renamer = (text) => {
-    const m = match.exec(text);
-    if (m) {
-        return m[2];
-    }
-    return text;
-};
-export const sort = (t, order) => Object.entries(t).sort(([l], [r]) => order(l, r));
-export { sorter, renamer };

package/index.d.ts

@@ -1,4 +1,5 @@
-export { renamer, sorter } from "./components/navigation/utils";
+export { renamer } from "./components/navigation/utils/renamer";
+export { sorter } from "./components/navigation/utils/sorter";
 export type { Control } from "./components/block/controls/types";
 export { default as Layout } from "./components/Layout.svelte";
 export { default as Instance } from "./components/block/Instance.svelte";

package/index.js

@@ -1,4 +1,5 @@
-export { renamer, sorter } from "./components/navigation/utils";
+export { renamer } from "./components/navigation/utils/renamer";
+export { sorter } from "./components/navigation/utils/sorter";
 export { default as Layout } from "./components/Layout.svelte";
 export { default as Instance } from "./components/block/Instance.svelte";
 export { default as Block } from "./components/block/Block.svelte";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nil-/doc",
-  "version": "0.2.37",
+  "version": "0.2.39",
   "author": {
     "email": "njaldea@gmail.com",
     "name": "Neil Aldea"
@@ -10,11 +10,13 @@
     "@sveltejs/adapter-vercel": "^1.0.0",
     "@sveltejs/kit": "^1.0.1",
     "@sveltejs/package": "^1.0.1",
+    "@vitest/coverage-c8": "^0.26.3",
     "mdsvex": "^0.10.6",
     "svelte-check": "^2.10.3",
     "tslib": "^2.4.1",
     "typescript": "^4.9.4",
-    "vite": "^4.0.3"
+    "vite": "^4.0.3",
+    "vitest": "^0.26.3"
   },
   "peerDependencies": {
     "svelte": "^3.55.0"

package/sveltekit/index.d.ts

@@ -12,7 +12,7 @@ type Routes = {
      * Callback to navigate to other pages
      * @param e - event that contains detail about the target url
      */
-    navigate: (e: CustomEvent<string>) => void;
+    navigate: (e: CustomEvent<string>) => Promise<void>;
 };
 /**
  * Dedicated helper method to be used for sveltekit