@nil-/doc 1.0.0 → 2.0.0

package/src/lib/components/layout/icons/Theme.svelte

@@ -0,0 +1,66 @@
+<script lang="ts" module>
+    // temporary to create unique ids for mask
+    let indexer = 0;
+</script>
+
+<script lang="ts">
+    let { dark = true }: { dark?: boolean } = $props();
+    const index = indexer++;
+</script>
+
+<svg viewBox="-25 -25 50 50" style:transform={dark ? "rotate(40deg)" : "rotate(180deg)"}>
+    <mask id={`nil_doc_theme_icon_${index}`}>
+        <rect x="-25" y="-25" fill="white" />
+        <circle r="11" cy={dark ? -8 : -24} fill="black" stroke="black" />
+    </mask>
+    <circle r={dark ? 10 : 5} mask={`url(#nil_doc_theme_icon_${index})`} />
+    <g opacity={dark ? 0 : 1}>
+        <g>
+            <line x1="0" y1="9" x2="0" y2="11" />
+            <line x1="9" y1="0" x2="11" y2="0" />
+            <line x1="0" y1="-11" x2="0" y2="-9" />
+            <line x1="-11" y1="0" x2="-9" y2="0" />
+        </g>
+        <g transform="rotate(45)">
+            <line x1="0" y1="9" x2="0" y2="11" />
+            <line x1="9" y1="0" x2="11" y2="0" />
+            <line x1="0" y1="-11" x2="0" y2="-9" />
+            <line x1="-11" y1="0" x2="-9" y2="0" />
+        </g>
+    </g>
+</svg>
+
+<style>
+    svg {
+        fill: currentColor;
+        stroke: currentColor;
+    }
+
+    svg,
+    rect {
+        width: 100%;
+        height: 100%;
+    }
+
+    line {
+        stroke-width: 2;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+    }
+
+    svg {
+        transition: transform var(--i-nil-doc-transition-time);
+    }
+
+    svg > g {
+        transition: opacity var(--i-nil-doc-transition-time);
+    }
+
+    svg > mask > circle {
+        transition: cy var(--i-nil-doc-transition-time);
+    }
+
+    svg > circle {
+        transition: r var(--i-nil-doc-transition-time);
+    }
+</style>

package/src/lib/components/navigation/Nav.svelte

@@ -0,0 +1,144 @@
+<script lang="ts" module>
+    import type { Tree as Detail, States, Sorter, Renamer } from "./types";
+
+    import { fuzz } from "./utils/fuzz";
+
+    const apply = <T extends Detail | States>(
+        paths: readonly string[],
+        init: () => T,
+        pre: (t: T, path: string) => T,
+        next: (t: T) => Record<string, T>,
+        post?: (t: T, p: string) => void
+    ) => {
+        const retval: Record<string, T> = {};
+        for (const path of paths) {
+            const parts = path.split("/");
+            if (parts.length <= 1) {
+                continue;
+            }
+
+            let t = retval;
+            for (let i = 1; i < parts.length; ++i) {
+                const part = parts[i];
+                if (!(part in t)) {
+                    t[part] = init();
+                }
+
+                if (i !== parts.length - 1) {
+                    t[part] = pre(t[part], path);
+                }
+
+                if (i !== parts.length - 1) {
+                    t = next(t[part]);
+                } else if (post) {
+                    post(t[part], path);
+                }
+            }
+        }
+        return retval;
+    };
+
+    const filt = (path: string, filter: string, renamer: Renamer) => {
+        return fuzz(path, filter) || fuzz(path.split("/").map(renamer).join("/"), filter);
+    };
+
+    const populate = (
+        filter: string,
+        info: readonly string[],
+        renamer: Renamer
+    ): Record<string, Detail> => {
+        return apply<Detail>(
+            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 lang="ts">
+    import Tree from "./Tree.svelte";
+
+    let {
+        info,
+        selected,
+        sorter,
+        renamer,
+        onnavigate
+    }: {
+        info: readonly string[];
+        selected: string;
+        sorter: Sorter;
+        renamer: Renamer;
+        onnavigate?: (e: { detail: string }) => void
+    } = $props();
+
+    let filter = $state("");
+    let states = $state(apply<States>(
+        info,
+        () => ({ expanded: false, sub: {} }),
+        (t, path) => ({ expanded: t.expanded || selected === path, sub: t.sub }),
+        (t) => t.sub
+    ));
+
+    const update = (selected: string) => {
+        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;
+        }
+    };
+
+    $effect(() => update(selected));
+</script>
+
+<div class="nav">
+    <div class="search-bar">
+        <input bind:value={filter} type="text" placeholder="Search for page..." />
+    </div>
+    <div class="tree">
+        <Tree
+            tree={populate(filter, info, renamer)}
+            {selected}
+            {sorter}
+            {renamer}
+            {onnavigate}
+            bind:states
+            expand={filter.length > 0}
+        />
+    </div>
+</div>
+
+<style>
+    .nav {
+        width: 100%;
+        height: 100%;
+        min-width: 12.5rem;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .search-bar {
+        padding: 0.25rem;
+    }
+
+    input {
+        font-size: 0.75rem;
+        height: 1.75rem;
+        width: 100%;
+        padding: 0px 0.5rem;
+        box-sizing: border-box;
+    }
+
+    input:focus {
+        outline: none;
+    }
+</style>

package/src/lib/components/navigation/Node.svelte

@@ -0,0 +1,129 @@
+<script lang="ts">
+    import { slide } from "svelte/transition";
+    import { sort } from "./utils/sort";
+    import type { Tree, States, Sorter, Renamer } from "./types";
+
+    import Node from "./Node.svelte";
+
+    let {
+        key,
+        value,
+        depth,
+        selected,
+        expand,
+        states = $bindable(),
+        sorter,
+        renamer,
+        onnavigate
+    }: {
+        key: string;
+        value: Tree;
+        depth: number;
+        selected: string;
+        expand: boolean;
+        states: States;
+        sorter: Sorter;
+        renamer: Renamer;
+        onnavigate?: (v: { detail?: string } ) => void
+    } = $props();
+
+    let style = $derived(`padding-left: ${0.5 + depth}rem; padding-right: 0.5rem`);
+    let hasChildren = $derived(Object.keys(value.sub).length > 0);
+
+    const onclick = () => {
+        if (value.url != null && selected !== value.url) {
+            onnavigate?.({ detail: value.url });
+            if (hasChildren && !states.expanded) {
+                states.expanded = true;
+            }
+        } else if (hasChildren) {
+            states.expanded = !states.expanded;
+        }
+    };
+</script>
+
+<div class="wrapper">
+    <div
+        class="header"
+        {onclick}
+        onkeypress={null}
+        role="none"
+        {style}
+        class:selected={selected === value.url}
+        class:paged={value.url != null}
+    >
+        <div class="icon" class:expanded={hasChildren && (expand || states.expanded)}>
+            <div>{Object.keys(value.sub).length > 0 ? ">" : "-"}</div>
+        </div>
+        <span>{renamer(key)}</span>
+    </div>
+    {#if expand || states.expanded}
+        <div class="sub" transition:slide>
+            {#each sort(value.sub, sorter) as [k, v] (k)}
+                <Node
+                    key={k}
+                    value={v}
+                    depth={depth + 1}
+                    {selected}
+                    {renamer}
+                    {sorter}
+                    {expand}
+                    bind:states={states.sub[k]}
+                    {onnavigate}
+                />
+            {/each}
+        </div>
+    {/if}
+</div>
+
+<style>
+    .wrapper {
+        user-select: none;
+    }
+
+    .wrapper,
+    .sub,
+    .icon {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .header {
+        height: 1.75rem;
+        display: grid;
+        grid-template-columns: 1rem 1fr;
+        align-items: center;
+        cursor: pointer;
+        gap: 0.25rem;
+        white-space: nowrap;
+        padding-right: 0.5rem;
+    }
+
+    .header:hover {
+        background-color: var(--i-nil-doc-nav-hovered);
+    }
+
+    .header.paged:hover {
+        background-color: var(--i-nil-doc-nav-page-hovered);
+    }
+
+    .header.selected,
+    .header.selected:hover {
+        background-color: var(--i-nil-doc-nav-selected) !important;
+    }
+
+    .icon {
+        justify-content: center;
+        height: 1rem;
+        width: 1rem;
+        transition: transform var(--i-nil-doc-transition-time);
+    }
+
+    .icon.expanded {
+        transform: rotate(90deg);
+    }
+
+    .icon > div {
+        margin: auto;
+    }
+</style>

package/src/lib/components/navigation/Tree.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+    import Node from "./Node.svelte";
+    import type { Tree, States, Sorter, Renamer } from "./types";
+    import { sort } from "./utils/sort";
+
+    let {
+        tree,
+        states = $bindable(),
+        sorter,
+        renamer,
+        expand,
+        selected,
+        onnavigate
+    }: {
+        tree: Record<string, Tree>;
+        states: Record<string, States>;
+        sorter: Sorter;
+        renamer: Renamer;
+        expand: boolean;
+        selected: string;
+        onnavigate?: (e: { detail?: string }) => void
+    } = $props();
+</script>
+
+{#each sort(tree, sorter) as [key, value] (key)}
+    <Node
+        {key}
+        {value}
+        depth={0}
+        {selected}
+        {sorter}
+        {renamer}
+        {expand}
+        bind:states={states[key]}
+        {onnavigate}
+    />
+{/each}

package/src/lib/components/navigation/types.d.ts

@@ -0,0 +1,12 @@
+export type Tree = {
+    url: string | null;
+    sub: Record<string, Tree>;
+};
+
+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/src/lib/components/navigation/utils/fuzz.ts

@@ -0,0 +1,175 @@
+/*---------------------------------------------------------------------------------------------
+ *  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: number) => {
+    // A == 65
+    // Z == 90
+    return 65 <= code && code <= 90;
+};
+
+const scoreSeparatorAtPos = (charCode: number) => {
+    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: string,
+    queryLowerCharAtIndex: string,
+    target: string,
+    targetLower: string,
+    targetIndex: number,
+    matchesSequenceLength: number
+) => {
+    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: string,
+    queryLower: string,
+    queryLength: number,
+    target: string,
+    targetLower: string,
+    targetLength: number
+) => {
+    const scores: number[] = [];
+    const matches: number[] = [];
+
+    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] ?? 0, positions.reverse()] as const;
+};
+
+export const score = (target: string, query: string) => {
+    const targetLength = target.length;
+    const queryLength = query.length;
+
+    if (targetLength < queryLength) {
+        return [0, []] as [number, number[]];
+    }
+
+    return doScoreFuzzy(
+        query,
+        query.toLowerCase(),
+        queryLength,
+        target,
+        target.toLowerCase(),
+        targetLength
+    );
+};
+
+export const fuzz = (target: string, query: string): boolean => {
+    return score(target, query)[0] > 0;
+};

package/src/lib/components/navigation/utils/renamer.test.ts

@@ -0,0 +1,18 @@
+import { renamer as SUT } from "./renamer";
+
+import { describe, it, expect } from "vitest";
+
+describe("renamer", () => {
+    it("returns as it is", () => {
+        expect(SUT("this is a string")).is.equal("this is a string");
+        expect(SUT("-this is a string")).is.equal("-this is a string");
+        expect(SUT("pre-this is a string")).is.equal("pre-this is a string");
+
+        expect(SUT("123-this is a string")).is.not.equal("123-this is a string");
+    });
+
+    it("returns string without number prefix", () => {
+        expect(SUT("123-this is a string")).is.equal("this is a string");
+        expect(SUT("098-this is a string")).is.equal("this is a string");
+    });
+});

package/src/lib/components/navigation/utils/renamer.ts

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

package/src/lib/components/navigation/utils/sort.test.ts

@@ -0,0 +1,37 @@
+import { sort as SUT } from "./sort";
+
+import { describe, it, expect } from "vitest";
+
+const sorter = (l: string, r: string) => {
+    if (l < r) return -1;
+    if (l > r) return +1;
+    return 0;
+};
+
+describe("sort", () => {
+    it("returns sorted array of entries", () => {
+        expect(
+            SUT(
+                {
+                    key1: {
+                        url: "key1 url",
+                        sub: {}
+                    },
+                    key3: {
+                        url: "key0 url",
+                        sub: {}
+                    },
+                    key2: {
+                        url: "key2 url",
+                        sub: {}
+                    }
+                },
+                sorter
+            )
+        ).is.deep.equal([
+            ["key1", { url: "key1 url", sub: {} }],
+            ["key2", { url: "key2 url", sub: {} }],
+            ["key3", { url: "key0 url", sub: {} }]
+        ]);
+    });
+});

package/src/lib/components/navigation/utils/sort.ts

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

package/src/lib/components/navigation/utils/sorter.test.ts

@@ -0,0 +1,24 @@
+import { sorter as SUT } from "./sorter";
+
+import { describe, it, expect } from "vitest";
+
+describe("sorter", () => {
+    it("returns -1 when less", () => {
+        expect(SUT("this should be less", "this should be more")).is.equal(-1);
+        expect(SUT("123-this should be more", "124-this should be less")).is.equal(-1);
+        expect(SUT("100-this should be less", "100-this should be more")).is.equal(-1);
+        expect(SUT("200-this should be equal", "this should be equal")).is.equal(-1);
+    });
+
+    it("returns 1 when greater", () => {
+        expect(SUT("this should be more", "this should be less")).is.equal(1);
+        expect(SUT("124-this should be less", "123-this should be more")).is.equal(1);
+        expect(SUT("100-this should be more", "100-this should be less")).is.equal(1);
+        expect(SUT("this should be equal", "200-this should be equal")).is.equal(1);
+    });
+
+    it("returns 0 when equal", () => {
+        expect(SUT("this should be equal", "this should be equal")).is.equal(0);
+        expect(SUT("124-this should be equal", "124-this should be equal")).is.equal(0);
+    });
+});