@nil-/doc 1.0.0 → 2.0.0

package/package/components/layout/icons/Nil.svelte

@@ -0,0 +1,43 @@
+<script lang="ts" module>const action = (p, length) => {
+  const update = (length2) => {
+    p.style.strokeDasharray = `${length2} 100`;
+  };
+  update(length);
+  return { update };
+};
+</script>
+
+<script lang="ts">import { Tween } from "svelte/motion";
+const d = "M 0 -15 L 15 -15 L 15 0 L 0 0 -9 0 A 6 8 135 0 1 9 0";
+const length = new Tween(100);
+const trigger = () => {
+  if (0 === length.current) {
+    length.set(100);
+  } else if (100 === length.current) {
+    length.set(0);
+  }
+};
+$effect(() => {
+  0 === length.current && trigger();
+});
+</script>
+
+<svg viewBox="-35 -35 70 70" onpointerenter={trigger}>
+    <g transform="rotate(45 0 0)">
+        <path {d} use:action={length.current} pathLength={100} />
+    </g>
+    <g transform="rotate(225 0 0)">
+        <path {d} use:action={length.current} pathLength={100} />
+    </g>
+</svg>
+
+<style>
+    svg {
+        width: 100%;
+        height: 100%;
+        stroke-width: 3;
+        stroke-linejoin: miter;
+        stroke: currentColor;
+        fill: transparent;
+    }
+</style>

package/package/components/layout/icons/Nil.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Nil: import("svelte").Component<Record<string, never>, {}, "">;
+type Nil = ReturnType<typeof Nil>;
+export default Nil;

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

@@ -0,0 +1,63 @@
+<script lang="ts" module>let indexer = 0;
+</script>
+
+<script lang="ts">let { dark = true } = $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/package/components/layout/icons/Theme.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    dark?: boolean;
+};
+declare const Theme: import("svelte").Component<$$ComponentProps, {}, "">;
+type Theme = ReturnType<typeof Theme>;
+export default Theme;

package/package/components/navigation/Nav.svelte

@@ -0,0 +1,113 @@
+<script lang="ts" module>import { fuzz } from "./utils/fuzz";
+const apply = (paths, init, pre, next, post) => {
+  const retval = {};
+  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, 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 lang="ts">import Tree from "./Tree.svelte";
+let {
+  info,
+  selected,
+  sorter,
+  renamer,
+  onnavigate
+} = $props();
+let filter = $state("");
+let states = $state(apply(
+  info,
+  () => ({ expanded: false, sub: {} }),
+  (t, path) => ({ expanded: t.expanded || selected === path, sub: t.sub }),
+  (t) => t.sub
+));
+const update = (selected2) => {
+  if (!info.includes(selected2)) {
+    return;
+  }
+  let node = states;
+  const paths = selected2.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/package/components/navigation/Nav.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Sorter, Renamer } from "./types";
+type $$ComponentProps = {
+    info: readonly string[];
+    selected: string;
+    sorter: Sorter;
+    renamer: Renamer;
+    onnavigate?: (e: {
+        detail: string;
+    }) => void;
+};
+declare const Nav: import("svelte").Component<$$ComponentProps, {}, "">;
+type Nav = ReturnType<typeof Nav>;
+export default Nav;

package/package/components/navigation/Node.svelte

@@ -0,0 +1,113 @@
+<script lang="ts">import { slide } from "svelte/transition";
+import { sort } from "./utils/sort";
+import Node from "./Node.svelte";
+let {
+  key,
+  value,
+  depth,
+  selected,
+  expand,
+  states = $bindable(),
+  sorter,
+  renamer,
+  onnavigate
+} = $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/package/components/navigation/Node.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Tree, States, Sorter, Renamer } from "./types";
+import Node from "./Node.svelte";
+type $$ComponentProps = {
+    key: string;
+    value: Tree;
+    depth: number;
+    selected: string;
+    expand: boolean;
+    states: States;
+    sorter: Sorter;
+    renamer: Renamer;
+    onnavigate?: (v: {
+        detail?: string;
+    }) => void;
+};
+declare const Node: import("svelte").Component<$$ComponentProps, {}, "states">;
+type Node = ReturnType<typeof Node>;
+export default Node;

package/package/components/navigation/Tree.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">import Node from "./Node.svelte";
+import { sort } from "./utils/sort";
+let {
+  tree,
+  states = $bindable(),
+  sorter,
+  renamer,
+  expand,
+  selected,
+  onnavigate
+} = $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/package/components/navigation/Tree.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Tree, States, Sorter, Renamer } from "./types";
+type $$ComponentProps = {
+    tree: Record<string, Tree>;
+    states: Record<string, States>;
+    sorter: Sorter;
+    renamer: Renamer;
+    expand: boolean;
+    selected: string;
+    onnavigate?: (e: {
+        detail?: string;
+    }) => void;
+};
+declare const Tree: import("svelte").Component<$$ComponentProps, {}, "states">;
+type Tree = ReturnType<typeof Tree>;
+export default Tree;

package/package/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/package/components/navigation/utils/fuzz.d.ts

@@ -0,0 +1,2 @@
+export declare const score: (target: string, query: string) => readonly [number, number[]];
+export declare const fuzz: (target: string, query: string) => boolean;

package/package/components/navigation/utils/fuzz.js

@@ -0,0 +1,122 @@
+/*---------------------------------------------------------------------------------------------
+ *  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] ?? 0, positions.reverse()];
+};
+export const score = (target, query) => {
+    const targetLength = target.length;
+    const queryLength = query.length;
+    if (targetLength < queryLength) {
+        return [0, []];
+    }
+    return doScoreFuzzy(query, query.toLowerCase(), queryLength, target, target.toLowerCase(), targetLength);
+};
+export const fuzz = (target, query) => {
+    return score(target, query)[0] > 0;
+};

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

@@ -0,0 +1,5 @@
+/**
+ * If a text follows `<I>-<Name>` format,
+ * this method simply removes the Prefix.
+ */
+export declare const renamer: (text: string) => string;

package/package/components/navigation/utils/renamer.js

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

package/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/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/package/components/navigation/utils/sorter.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Compares two texts for sorting.
+ *
+ * If the texts follows `<I>-<Name>` format,
+ * sorting is done by comparing the numbers in the prefix.
+ *
+ * If only one of the texts follows `<I>-<Name>` format,
+ * the text that follows the format is considered as higher in order.
+ *
+ * Else comparison is done using built-in `string` comparison.
+ */
+export declare const sorter: (l: string, r: string) => -1 | 0 | 1;

package/package/components/navigation/utils/sorter.js

@@ -0,0 +1,35 @@
+const match = /(\d+)-(.+)/;
+const sorterT = (l, r) => {
+    if (l < r) {
+        return -1;
+    }
+    if (l > r) {
+        return +1;
+    }
+    return 0;
+};
+/**
+ * Compares two texts for sorting.
+ *
+ * If the texts follows `<I>-<Name>` format,
+ * sorting is done by comparing the numbers in the prefix.
+ *
+ * If only one of the texts follows `<I>-<Name>` format,
+ * the text that follows the format is considered as higher in order.
+ *
+ * Else comparison is done using built-in `string` comparison.
+ */
+export const sorter = ((l, r) => {
+    const lmatch = match.exec(l);
+    const rmatch = match.exec(r);
+    if (null == lmatch && null == rmatch) {
+        return sorterT(l, r);
+    }
+    if (null == lmatch) {
+        return 1;
+    }
+    if (null == rmatch) {
+        return -1;
+    }
+    return sorterT(parseInt(lmatch[1]), parseInt(rmatch[1])) || sorterT(lmatch[2], rmatch[2]);
+});

package/package/index.d.ts

@@ -0,0 +1,13 @@
+export { renamer } from "./components/navigation/utils/renamer";
+export { sorter } from "./components/navigation/utils/sorter";
+export type { Prop, Event, PropType, Detailed, Flattened, Unionized } from "./components/block/controls/types";
+export { default as Layout } from "./components/layout/Layout.svelte";
+export { default as DocLayout } from "./components/layout/DocLayout.svelte";
+export { default as Instance } from "./components/block/Instance.svelte";
+export { default as Block } from "./components/block/Block.svelte";
+export { default as Template } from "./components/block/Template.svelte";
+export { default as Controls } from "./components/block/Controls.svelte";
+export { default as Params } from "./components/block/Params.svelte";
+export { default as Icon } from "./components/layout/icons/Icon.svelte";
+export { default as Nil } from "./components/layout/icons/Nil.svelte";
+export { default as Theme } from "./components/layout/icons/Theme.svelte";

package/package/index.js

@@ -0,0 +1,12 @@
+export { renamer } from "./components/navigation/utils/renamer";
+export { sorter } from "./components/navigation/utils/sorter";
+export { default as Layout } from "./components/layout/Layout.svelte";
+export { default as DocLayout } from "./components/layout/DocLayout.svelte";
+export { default as Instance } from "./components/block/Instance.svelte";
+export { default as Block } from "./components/block/Block.svelte";
+export { default as Template } from "./components/block/Template.svelte";
+export { default as Controls } from "./components/block/Controls.svelte";
+export { default as Params } from "./components/block/Params.svelte";
+export { default as Icon } from "./components/layout/icons/Icon.svelte";
+export { default as Nil } from "./components/layout/icons/Nil.svelte";
+export { default as Theme } from "./components/layout/icons/Theme.svelte";