@nil-/doc 2.0.0 → 2.0.2

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

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

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

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

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

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

@@ -1,175 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- *  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

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

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

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

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

@@ -1,24 +0,0 @@
-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);
-    });
-});