@nil-/doc 0.2.12 → 0.2.14

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @nil-/doc
 
+## 0.2.14
+
+### Patch Changes
+
+-   6265fa6: [doc] added Tuple and Object Controls
+    [doc] added temporary internal doc
+
+## 0.2.13
+
+### Patch Changes
+
+-   39dbce9: [doc] navigation now automatically opens when redirected to a route that is still collapsed
+
 ## 0.2.12
 
 ### Patch Changes

package/components/block/Block.svelte

@@ -1,8 +1,9 @@
-<script>import { initCurrent, initParams, initControls } from "./context";
+<script>import { initCurrent, initParams, initControls, initDefaults } from "./context";
 import { inRoot } from "../context";
 initParams();
 initCurrent();
 initControls();
+initDefaults();
 const r = inRoot();
 </script>
 <style>

package/components/block/Params.svelte

@@ -1,6 +1,13 @@
 
-<script>import { getParams } from "./context";
+<script>import { getParams, getDefaults } from "./context";
 export let tag;
 export let props = {};
-getParams().update((v) => [...v, { id: v.length, tag, values: props }]);
+const defaults = getDefaults();
+const params = getParams();
+function set(tag, props) {
+    if ($defaults != null) {
+        $params[tag] = { ...$defaults, ...props };
+    }
+}
+$: set(tag, props);
 </script>

package/components/block/Template.svelte

@@ -23,10 +23,6 @@
         background-color: rgb(33, 36, 37);
     }
 
-    .content > :global(*) {
-        all: initial;
-    }
-
     .misc {
         margin-top: 2px;
         outline: rgb(100, 96, 96) solid 1px;
@@ -38,13 +34,14 @@
 <svelte:window on:click={() => ($current = null)} />
 
 <script>import { beforeUpdate } from "svelte";
-import { getParams, getCurrent, getControls } from "./context";
-import Controls from "./controls/Component.svelte";
+import { getParams, getCurrent, getControls, getDefaults } from "./context";
+import Controls from "./controls/Controls.svelte";
 import { slide } from "svelte/transition";
 const params = getParams();
 const current = getCurrent();
 const controls = getControls();
 export let defaults;
+getDefaults().set(defaults);
 $: keys = Object.keys(defaults);
 function resolve(d, p) {
     if (d === undefined) {
@@ -75,28 +72,28 @@ let key = false;
 beforeUpdate(() => (key = !key));
 </script>
 <div class="template">
-    {#each $params as { id, tag, values } (id)}
+    {#each Object.keys($params) as tag (tag)}
         <div
             class="instance"
-            on:click|stopPropagation={() => ($current = id)}
-            on:mouseenter={() => (hovered = id)}
+            on:click|stopPropagation={() => ($current = tag)}
+            on:mouseenter={() => (hovered = tag)}
             on:mouseleave={() => (hovered = null)}
             on:keypress={null}
         >
             {#if noreset}
                 <div class="content nil-doc-scrollable">
-                    <slot {tag} props={resolve(defaults, values)} />
+                    <slot {tag} props={resolve(defaults, $params[tag])} />
                 </div>
             {:else}
                 {#key key}
                     <div class="content nil-doc-scrollable">
-                        <slot {tag} props={resolve(defaults, values)} />
+                        <slot {tag} props={resolve(defaults, $params[tag])} />
                     </div>
                 {/key}
             {/if}
-            {#if $controls.length > 0 && ($current === id || hovered === id)}
+            {#if $controls.length > 0 && ($current === tag || hovered === tag)}
                 <div class="misc nil-doc-scrollable" transition:slide>
-                    <Controls infos={$controls} bind:values />
+                    <Controls infos={$controls} bind:values={$params[tag]} />
                 </div>
             {/if}
         </div>

package/components/block/context.d.ts

@@ -1,11 +1,7 @@
 import type { Control } from "./controls/types";
 import type { Writable } from "svelte/store";
-export type ParamValues = Record<string, any>;
-export type Params = {
-    id: number;
-    tag: string;
-    values: ParamValues;
-};
-export declare const initCurrent: () => Writable<number | null>, getCurrent: () => Writable<number | null>;
-export declare const initParams: () => Writable<Params[]>, getParams: () => Writable<Params[]>;
+export type Params = Record<string, any>;
+export declare const initCurrent: () => Writable<string | null>, getCurrent: () => Writable<string | null>;
+export declare const initParams: () => Writable<Params>, getParams: () => Writable<Params>;
 export declare const initControls: () => Writable<Control[]>, getControls: () => Writable<Control[]>;
+export declare const initDefaults: () => Writable<Params | null>, getDefaults: () => Writable<Params | null>;

package/components/block/context.js

@@ -8,5 +8,6 @@ function create(defaulter) {
     };
 }
 export const { init: initCurrent, get: getCurrent } = create(() => null);
-export const { init: initParams, get: getParams } = create(() => []);
+export const { init: initParams, get: getParams } = create(() => ({}));
 export const { init: initControls, get: getControls } = create(() => []);
+export const { init: initDefaults, get: getDefaults } = create(() => null);

package/components/block/controls/Component.svelte

@@ -1,71 +1,29 @@
-<style>
-    .controls {
-        width: 100%;
-        display: grid;
-        grid-auto-rows: 1fr;
-    }
-
-    .header {
-        text-align: center;
-    }
-
-    .row {
-        width: 100%;
-        display: grid;
-        padding: 2px 0px;
-        grid-template-columns: 1fr 200px 75px;
-        background-color: hsl(205, 50%, 5%);
-    }
-
-    .row:nth-child(even) {
-        background-color: hsl(205, 15%, 15%);
-    }
-
-    .row > :global(div:nth-child(1)) {
-        padding-left: 10px;
-    }
-
-    .row > :global(div) {
-        display: grid;
-        align-items: center;
-    }
-
-    .row > :global(div > *) {
-        width: 100%;
-        height: 100%;
-    }
-</style>
 
 <script>import Text from "./Text.svelte";
 import Number from "./Number.svelte";
 import Range from "./Range.svelte";
 import Switch from "./Switch.svelte";
 import Select from "./Select.svelte";
-export let infos;
-export let values;
+import Tuple from "./Tuple.svelte";
+import Object from "./Object.svelte";
+export let info;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export let value;
+export let depth = 10;
+export let disabled = false;
 </script>
-<div class="controls">
-    <div class="row">
-        <div class="header">Name</div>
-        <div class="header">Value</div>
-        <div class="header">Use</div>
-    </div>
-    {#each infos as info}
-        {@const type = info.type}
-        {@const name = info.name}
-        <div class="row">
-            {#if type === "text"}
-                <Text {info} bind:value={values[name]} />
-            {:else if type === "number"}
-                <Number {info} bind:value={values[name]} />
-            {:else if type === "range"}
-                <Range {info} bind:value={values[name]} />
-            {:else if type === "select"}
-                <Select {info} bind:value={values[name]} />
-            {:else if type === "switch"}
-                <Switch {info} bind:value={values[name]} />
-            {/if}
-        </div>
-    {/each}
-</div>
-
+{#if info.type === "object"}
+    <Object {info} bind:value {depth} {disabled} />
+{:else if info.type === "tuple"}
+    <Tuple {info} bind:value {depth} {disabled} />
+{:else if info.type === "text"}
+    <Text {info} bind:value {depth} {disabled} />
+{:else if info.type === "number"}
+    <Number {info} bind:value {depth} {disabled} />
+{:else if info.type === "range"}
+    <Range {info} bind:value {depth} {disabled} />
+{:else if info.type === "select"}
+    <Select {info} bind:value {depth} {disabled} />
+{:else if info.type === "switch"}
+    <Switch {info} bind:value {depth} {disabled} />
+{/if}

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

@@ -1,10 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
 import type { Control } from "./types";
-import type { ParamValues } from "../context";
 declare const __propDef: {
     props: {
-        infos: Control[];
-        values: ParamValues;
+        info: Control;
+        value: any;
+        depth?: number | undefined;
+        disabled?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/block/controls/Controls.svelte

@@ -0,0 +1,42 @@
+<style>
+    .controls {
+        width: 100%;
+        display: grid;
+        grid-auto-rows: 1fr;
+    }
+
+    .controls > :global(div) {
+        width: 100%;
+        display: grid;
+        padding: 2px 0px;
+        grid-template-columns: 1fr 200px 75px;
+        background-color: hsl(205, 50%, 5%);
+    }
+
+    .controls > :global(div:nth-child(even)) {
+        background-color: hsl(205, 15%, 15%);
+    }
+
+    .controls > :global(div > div) {
+        display: grid;
+        align-items: center;
+    }
+
+    .controls > :global(div > div > *) {
+        width: 100%;
+        height: 100%;
+    }
+</style>
+
+<script>import Header from "./Header.svelte";
+import Component from "./Component.svelte";
+export let infos;
+export let values;
+</script>
+<div class="controls">
+    <Header />
+    {#each infos as info}
+        <Component {info} bind:value={values[info.name]} />
+    {/each}
+</div>
+

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

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Control } from "./types";
+import type { Params } from "../context";
+declare const __propDef: {
+    props: {
+        infos: Control[];
+        values: Params;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ControlsProps = typeof __propDef.props;
+export type ControlsEvents = typeof __propDef.events;
+export type ControlsSlots = typeof __propDef.slots;
+export default class Controls extends SvelteComponentTyped<ControlsProps, ControlsEvents, ControlsSlots> {
+}
+export {};

package/components/block/controls/Header.svelte

@@ -0,0 +1,12 @@
+<style>
+    div > div {
+        text-align: center;
+    }
+</style>
+
+<div>
+    <div>Name</div>
+    <div>Value</div>
+    <div>Use</div>
+</div>
+

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

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  HeaderProps */
+/** @typedef {typeof __propDef.events}  HeaderEvents */
+/** @typedef {typeof __propDef.slots}  HeaderSlots */
+export default class Header extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type HeaderProps = typeof __propDef.props;
+export type HeaderEvents = typeof __propDef.events;
+export type HeaderSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/block/controls/Number.svelte

@@ -1,10 +1,14 @@
 
 <script>export let value;
 export let info;
+export let depth;
+export let disabled = false;
 let ivalue = value ?? 0;
 let enabled = value !== undefined;
-$: value = enabled ? ivalue : undefined;
+$: value = enabled && !disabled ? ivalue : undefined;
 </script>
-<div>{info.name}</div>
-<div><input type="number" bind:value={ivalue} disabled={!enabled} /></div>
-<div><input type="checkbox" bind:checked={enabled} /></div>
+<div>
+    <div style:padding-left={`${depth}px`}>- {info.name}</div>
+    <div><input type="number" bind:value={ivalue} disabled={!enabled || disabled} /></div>
+    <div><input type="checkbox" bind:checked={enabled} {disabled} /></div>
+</div>

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

@@ -4,6 +4,8 @@ declare const __propDef: {
     props: {
         value: number | undefined;
         info: ControlNumber;
+        depth: number;
+        disabled?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/block/controls/Object.svelte

@@ -0,0 +1,29 @@
+
+<script>import Component from "./Component.svelte";
+import { getObjectDefaults } from "./defaulter";
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export let value;
+export let info;
+export let depth;
+export let disabled = false;
+let ivalue = value ?? getObjectDefaults(info);
+let enabled = value !== undefined;
+$: value = !disabled && enabled ? ivalue : undefined;
+</script>
+<div>
+    <div style:padding-left={`${depth}px`}>
+        > {info.name}
+    </div>
+    <div>-</div>
+    <div><input type="checkbox" bind:checked={enabled} {disabled} /></div>
+</div>
+{#if enabled && !disabled}
+    {#each info.values as info, i (i)}
+        <Component
+            {info}
+            bind:value={ivalue[info.name]}
+            depth={depth + 10}
+            disabled={!enabled || disabled}
+        />
+    {/each}
+{/if}

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

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ControlObject } from "./types";
+declare const __propDef: {
+    props: {
+        value: Record<string, any> | undefined;
+        info: ControlObject;
+        depth: number;
+        disabled?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ObjectProps = typeof __propDef.props;
+export type ObjectEvents = typeof __propDef.events;
+export type ObjectSlots = typeof __propDef.slots;
+export default class Object extends SvelteComponentTyped<ObjectProps, ObjectEvents, ObjectSlots> {
+}
+export {};

package/components/block/controls/Range.svelte

@@ -5,28 +5,38 @@
         grid-template-columns: 40px 1fr;
     }
 
-    .input > span {
+    .input > div {
+        width: 100%;
+        height: 100%;
+        display: grid;
         text-align: center;
+        align-items: center;
+        font-size: 0.8rem;
+        margin: auto;
     }
 </style>
 
 <script>export let value;
 export let info;
+export let depth;
+export let disabled = false;
 let ivalue = value ?? info.min;
 let enabled = value !== undefined;
-$: value = enabled ? ivalue : undefined;
+$: value = enabled && !disabled ? ivalue : undefined;
 </script>
-<div>{info.name}</div>
-<div class="input">
-    <span>{ivalue}</span>
-    <input
-        type="range"
-        bind:value={ivalue}
-        min={info.min}
-        max={info.max}
-        step={info.step}
-        disabled={!enabled}
-    />
+<div>
+    <div style:padding-left={`${depth}px`}>- {info.name}</div>
+    <div class="input">
+        <div>{ivalue}</div>
+        <input
+            type="range"
+            bind:value={ivalue}
+            min={info.min}
+            max={info.max}
+            step={info.step}
+            disabled={!enabled || disabled}
+        />
+    </div>
+    <div><input type="checkbox" bind:checked={enabled} {disabled} /></div>
 </div>
-<div><input type="checkbox" bind:checked={enabled} /></div>
 

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

@@ -4,6 +4,8 @@ declare const __propDef: {
     props: {
         value: number | undefined;
         info: ControlRange;
+        depth: number;
+        disabled?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/block/controls/Select.svelte

@@ -1,16 +1,20 @@
 
 <script>export let value;
 export let info;
+export let depth;
+export let disabled = false;
 let ivalue = value ?? (info.values.length > 0 ? info.values[0] : undefined);
 let enabled = value !== undefined;
-$: value = enabled ? ivalue : undefined;
+$: value = enabled && !disabled ? ivalue : undefined;
 </script>
-<div>{info.name}</div>
 <div>
-    <select bind:value={ivalue} disabled={!enabled}>
-        {#each info.values as value}
-            <option {value}>{value}</option>
-        {/each}
-    </select>
+    <div style:padding-left={`${depth}px`}>- {info.name}</div>
+    <div>
+        <select bind:value={ivalue} disabled={!enabled || disabled}>
+            {#each info.values as value}
+                <option {value}>{value}</option>
+            {/each}
+        </select>
+    </div>
+    <div><input type="checkbox" bind:checked={enabled} {disabled} /></div>
 </div>
-<div><input type="checkbox" bind:checked={enabled} /></div>

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

@@ -4,6 +4,8 @@ declare const __propDef: {
     props: {
         value: string | undefined;
         info: ControlSelect;
+        depth: number;
+        disabled?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/block/controls/Switch.svelte

@@ -1,10 +1,14 @@
 
 <script>export let value;
 export let info;
+export let depth;
+export let disabled = false;
 let ivalue = value ?? false;
 let enabled = value !== undefined;
-$: value = enabled ? ivalue : undefined;
+$: value = enabled && !disabled ? ivalue : undefined;
 </script>
-<div>{info.name}</div>
-<div><input type="checkbox" bind:checked={ivalue} disabled={!enabled} /></div>
-<div><input type="checkbox" bind:checked={enabled} /></div>
+<div>
+    <div style:padding-left={`${depth}px`}>- {info.name}</div>
+    <div><input type="checkbox" bind:checked={ivalue} disabled={!enabled || disabled} /></div>
+    <div><input type="checkbox" bind:checked={enabled} {disabled} /></div>
+</div>

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

@@ -4,6 +4,8 @@ declare const __propDef: {
     props: {
         value: boolean | undefined;
         info: ControlSwitch;
+        depth: number;
+        disabled?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/block/controls/Text.svelte

@@ -1,10 +1,14 @@
 
 <script>export let value;
 export let info;
+export let depth;
+export let disabled = false;
 let ivalue = value ?? "";
-let enabled = value !== undefined;
-$: value = enabled ? ivalue : undefined;
+let ienabled = value !== undefined;
+$: value = ienabled && !disabled ? ivalue : undefined;
 </script>
-<div>{info.name}</div>
-<div><input type="text" bind:value={ivalue} disabled={!enabled} /></div>
-<div><input type="checkbox" bind:checked={enabled} /></div>
+<div>
+    <div style:padding-left={`${depth}px`}>- {info.name}</div>
+    <div><input type="text" bind:value={ivalue} disabled={!ienabled || disabled} /></div>
+    <div><input type="checkbox" bind:checked={ienabled} {disabled} /></div>
+</div>

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

@@ -4,6 +4,8 @@ declare const __propDef: {
     props: {
         value: string | undefined;
         info: ControlText;
+        depth: number;
+        disabled?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/block/controls/Tuple.svelte

@@ -0,0 +1,29 @@
+
+<script>import Component from "./Component.svelte";
+import { getTupleDefaults } from "./defaulter";
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export let value;
+export let info;
+export let depth;
+export let disabled = false;
+let ivalue = value ?? getTupleDefaults(info);
+let enabled = value !== undefined;
+$: value = !disabled && enabled ? ivalue : undefined;
+</script>
+<div>
+    <div style:padding-left={`${depth}px`}>
+        > {info.name}
+    </div>
+    <div>-</div>
+    <div><input type="checkbox" bind:checked={enabled} {disabled} /></div>
+</div>
+{#if enabled && !disabled}
+    {#each info.values as info, i (i)}
+        <Component
+            info={{ ...info, name: `${i}` }}
+            bind:value={ivalue[i]}
+            depth={depth + 10}
+            disabled={!enabled || disabled}
+        />
+    {/each}
+{/if}

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

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ControlTuple } from "./types";
+declare const __propDef: {
+    props: {
+        value: any[] | undefined;
+        info: ControlTuple;
+        depth: number;
+        disabled?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TupleProps = typeof __propDef.props;
+export type TupleEvents = typeof __propDef.events;
+export type TupleSlots = typeof __propDef.slots;
+export default class Tuple extends SvelteComponentTyped<TupleProps, TupleEvents, TupleSlots> {
+}
+export {};

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

@@ -0,0 +1,4 @@
+import type { Control, ControlTuple, ControlObject } from "./types";
+export declare function getObjectDefaults(info: ControlObject): Record<string, any>;
+export declare function getTupleDefaults(i: ControlTuple): any[];
+export declare function getDefault(i: Control): any;

package/components/block/controls/defaulter.js

@@ -0,0 +1,35 @@
+export function getObjectDefaults(info) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const ret = {};
+    for (const i of info.values) {
+        ret[i.name] = getDefault(i);
+    }
+    return ret;
+}
+export function getTupleDefaults(i) {
+    const ret = [];
+    for (const info of i.values) {
+        ret.push(getDefault(info));
+    }
+    return ret;
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function getDefault(i) {
+    if (i.type === "number") {
+        return 0;
+    }
+    if (i.type === "range") {
+        return i.min;
+    }
+    if (i.type === "switch") {
+        return false;
+    }
+    if (i.type === "tuple") {
+        return [...getTupleDefaults(i)];
+    }
+    if (i.type === "object") {
+        return getObjectDefaults(i);
+    }
+    // "select" | "text"
+    return "";
+}

package/components/block/controls/types.d.ts

@@ -1,3 +1,25 @@
+export type NonNamed<T> = Omit<T, "name">;
+export type NonNamedControl =
+    | NonNamed<ControlTuple>
+    | NonNamed<ControlObject>
+    | NonNamed<ControlText>
+    | NonNamed<ControlNumber>
+    | NonNamed<ControlRange>
+    | NonNamed<ControlSelect>
+    | NonNamed<ControlSwitch>;
+
+export type ControlTuple = {
+    name: string;
+    type: "tuple";
+    values: NonNamedControl[];
+};
+
+export type ControlObject = {
+    name: string;
+    type: "object";
+    values: Control[];
+};
+
 export type ControlText = {
     name: string;
     type: "text";
@@ -27,4 +49,11 @@ export type ControlSwitch = {
     type: "switch";
 };
 
-export type Control = ControlText | ControlNumber | ControlRange | ControlSelect | ControlSwitch;
+export type Control =
+    | ControlTuple
+    | ControlObject
+    | ControlText
+    | ControlNumber
+    | ControlRange
+    | ControlSelect
+    | ControlSwitch;

package/components/load.js

@@ -1,9 +1,26 @@
+const prefix = ".".length;
+const suffix = "/+page.svelte".length;
+function toRoute(p) {
+    return p.substring(prefix, p.length - suffix);
+}
+const route_advanced_layout_match = /\(.*\)/;
+function collapseLayout(p) {
+    return p
+        .split("/")
+        .filter((p) => route_advanced_layout_match.exec(p) == null)
+        .join("/");
+}
+function isNotRoot(p) {
+    return p !== "/";
+}
+const route_rest_match = /.*\[.*\].*/;
+function isRouteDynamic(p) {
+    return route_rest_match.exec(p) == null;
+}
 export function load(files_from_import_meta) {
-    const prefix = ".".length;
-    const suffix = "/+page.svelte".length;
-    const rootlen = "./+page.svelte".length;
     return Object.keys(files_from_import_meta)
-        .filter((p) => p.length > rootlen) // remove root page
-        .filter((p) => /.*\[.*\].*/.exec(p) == null)
-        .map((p) => p.substring(prefix, p.length - suffix));
+        .map(toRoute)
+        .map(collapseLayout)
+        .filter(isNotRoot)
+        .filter(isRouteDynamic);
 }

package/components/navigation/Nav.svelte

@@ -63,6 +63,20 @@ export let sorter;
 export let renamer;
 let filter = "";
 let states = apply(info, () => ({ expanded: false, sub: {} }), (t, path) => ({ expanded: t.expanded || selected === path, sub: t.sub }), (t) => t.sub);
+function update(selected) {
+    if (!info.includes(selected)) {
+        return;
+    }
+    let node = states;
+    const paths = selected.split("/").slice(1);
+    for (const [i, p] of paths.entries()) {
+        if (i < paths.length - 1) {
+            node[p].expanded = true;
+        }
+        node = node[p].sub;
+    }
+}
+$: update(selected);
 </script>
 <div class="nav">
     <div class="logo"><slot /></div>

package/components/navigation/Node.svelte

@@ -18,28 +18,28 @@
         cursor: pointer;
     }
 
-    .header > div {
+    .header:hover {
+        background-color: rgba(2, 156, 253, 0.07);
+    }
+
+    .header.selected {
+        background-color: rgba(2, 157, 253, 0.822);
+        color: black;
+    }
+
+    .icon {
         justify-content: center;
         height: 15px;
         width: 15px;
     }
 
-    .header > div.expanded {
+    .icon.expanded {
         transform: rotate(90deg);
     }
 
-    .header > div > div {
+    .icon > div {
         margin: auto;
     }
-
-    .header:hover {
-        background-color: rgba(2, 156, 253, 0.07);
-    }
-
-    .header.selected {
-        background-color: rgba(2, 157, 253, 0.822);
-        color: black;
-    }
 </style>
 
 <script>import { slide } from "svelte/transition";
@@ -74,13 +74,7 @@ function click(link) {
         class:selected={selected === value.url}
     >
         <div class="icon" class:expanded={has_children && states.expanded}>
-            <div>
-                {#if Object.keys(value.sub).length > 0}
-                    >
-                {:else}
-                    -
-                {/if}
-            </div>
+            <div>{Object.keys(value.sub).length > 0 ? ">" : "-"}</div>
         </div>
         <span>{renamer(key)}</span>
     </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nil-/doc",
-  "version": "0.2.12",
+  "version": "0.2.14",
   "author": {
     "email": "njaldea@gmail.com",
     "name": "Neil Aldea"
@@ -10,13 +10,13 @@
     "@sveltejs/kit": "next",
     "@sveltejs/package": "next",
     "mdsvex": "^0.10.6",
-    "svelte": "^3.53.1",
-    "svelte-check": "^2.10.0",
+    "svelte": "^3.54.0",
+    "svelte-check": "^2.10.2",
     "svelte-markdown": "^0.2.3",
     "svelte-preprocess": "^4.10.7",
     "tslib": "^2.4.1",
-    "typescript": "^4.9.3",
-    "vite": "^3.2.4"
+    "typescript": "^4.9.4",
+    "vite": "^4.0.0"
   },
   "type": "module",
   "publishConfig": {

package/components/etc/Font.svelte

@@ -1,5 +0,0 @@
-<svelte:head>
-    <link href="https://fonts.googleapis.com/css?family=Fira Code" rel="stylesheet" />
-</svelte:head>
-
-

package/components/etc/Font.svelte.d.ts

@@ -1,23 +0,0 @@
-/** @typedef {typeof __propDef.props}  FontProps */
-/** @typedef {typeof __propDef.events}  FontEvents */
-/** @typedef {typeof __propDef.slots}  FontSlots */
-export default class Font extends SvelteComponentTyped<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type FontProps = typeof __propDef.props;
-export type FontEvents = typeof __propDef.events;
-export type FontSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export {};