@nil-/doc 2.0.0 → 2.0.1

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,122 +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) => {
-    // 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

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

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

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

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

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

@@ -1,12 +0,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 declare const sorter: (l: string, r: string) => -1 | 0 | 1;

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

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

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

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