@nil-/doc 2.0.0 → 2.0.2

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";

package/package/package.json

@@ -1,29 +0,0 @@
-{
-    "name": "@nil-/doc",
-    "version": "2.0.0",
-    "author": {
-        "email": "njaldea@gmail.com",
-        "name": "Neil Aldea"
-    },
-    "license": "ISC",
-    "peerDependencies": {
-        "svelte": "^5.7.1"
-    },
-    "keywords": [
-        "svelte",
-        "documentation",
-        "component"
-    ],
-    "type": "module",
-    "exports": {
-        "./package.json": "./package.json",
-        ".": {
-            "types": "./index.d.ts",
-            "svelte": "./index.js",
-            "default": "./index.js"
-        }
-    },
-    "dependencies": {
-        "vanilla-picker": "^2.12.3"
-    }
-}

package/src/app.d.ts

@@ -1,10 +0,0 @@
-/// <reference types="@sveltejs/kit" />
-
-// See https://kit.svelte.dev/docs/types#the-app-namespace
-// for information about these interfaces
-declare namespace App {
-    // interface Error {}
-    // interface Locals {}
-    // interface PageData {}
-    // interface Platform {}
-}

package/src/app.html

@@ -1,33 +0,0 @@
-<!doctype html>
-<html lang="en">
-    <head>
-        <meta charset="utf-8" />
-        <meta name="author" content="Neil Aldea" />
-        <meta name="description" content="@nil-/doc" />
-        <meta name="keywords" content="svelte, documentation, component" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <meta property="og:title" content="@nil-/doc" />
-        <meta
-            property="og:description"
-            content="A Svelte component library to help documentation. Framework agnostic with an adapter library to SvelteKit."
-        />
-        <meta property="og:image" content="https://mono-doc.vercel.app/assets/icon.png" />
-        <meta property="og:type" content="website" />
-        <meta property="og:url" content="https://mono-doc.vercel.app" />
-        <link rel="icon" href="%sveltekit.assets%/assets/favicon.svg" />
-        %sveltekit.head%
-        <style>
-            html,
-            body {
-                width: 100%;
-                height: 100%;
-                margin: 0px;
-                padding: 0px;
-            }
-        </style>
-    </head>
-
-    <body>
-        <div style="display: contents">%sveltekit.body%</div>
-    </body>
-</html>

package/src/lib/components/Base.svelte

@@ -1,77 +0,0 @@
-<script lang="ts">
-    import type { Snippet } from "svelte";
-
-    let {
-        dark = false,
-        fill = false,
-        children
-    }: {
-        dark?: boolean;
-        fill?: boolean;
-        children?: Snippet
-    } = $props();
-</script>
-
-<div class:dark class:fill>
-    {@render children?.()}
-</div>
-
-<!-- prettier-ignore -->
-<style>
-    div {
-        font-family: var(--nil-doc-font-family, ""), Consolas, Courier, 'Courier New', monospace;
-    }
-
-    .fill {
-        width: 100%;
-        height: 100%;
-    }
-
-    div {
-        --i-nil-doc-color: var(--nil-doc-color, hsl(0, 0%, 0%));
-        --i-nil-doc-color-scheme: var(--nil-doc-color-scheme, light);
-
-        --i-nil-doc-bg-color: var(--nil-doc-bg-color, hsl(0, 0%, 98%));
-        --i-nil-doc-content-outline-color: var(--nil-doc-content-outline-color, hsla(0, 0%, 0%, 0.3));
-
-        --i-nil-doc-block-bg-color: var(--nil-doc-block-bg-color, hsla(0, 0%, 98%, 0.3));
-        --i-nil-doc-block-outline-color: var(--nil-doc-block-outline-color, hsla(0, 0%, 0%, 0.3));
-
-        --i-nil-doc-container-p: var(--nil-doc-container-p, hsl(0, 2%, 70%));
-        --i-nil-doc-container-s: var(--nil-doc-container-s, hsl(0, 0%, 0%));
-
-        --i-nil-doc-controls-p: var(--nil-doc-controls-p, hsl(0, 0%, 100%));
-        --i-nil-doc-controls-s: var(--nil-doc-controls-s, hsl(210, 29%, 97%));
-        --i-nil-doc-controls-hover: var(--nil-doc-controls-hover, hsl(210, 100%, 90%));
-    }
-
-    div.dark {
-        --i-nil-doc-color: var(--nil-doc-color, hsl(0, 0%, 80%));
-        --i-nil-doc-color-scheme: var(--nil-doc-color-scheme, dark);
-
-        --i-nil-doc-bg-color: var(--nil-doc-bg-color, hsl(210, 6%, 7%));
-        --i-nil-doc-content-outline-color: var(--nil-doc-content-outline-color, hsla(0, 0%, 100%, 0.3));
-
-        --i-nil-doc-block-bg-color: var(--nil-doc-block-bg-color, hsla(200, 4%, 7%, 0.3));
-        --i-nil-doc-block-outline-color: var(--nil-doc-block-outline-color, hsla(0, 0%, 1000%, 0.3));
-
-        --i-nil-doc-container-p: var(--nil-doc-container-p, hsl(0, 2%, 40%));
-        --i-nil-doc-container-s: var(--nil-doc-container-s, hsl(0, 0%, 100%));
-
-        --i-nil-doc-controls-p: var(--nil-doc-controls-p, hsl(213, 26%, 7%));
-        --i-nil-doc-controls-s: var(--nil-doc-controls-s, hsl(213, 26%, 11%));
-        --i-nil-doc-controls-hover: var(--nil-doc-controls-hover, hsl(203, 100%, 15%));
-    }
-
-    div {
-        --i-nil-doc-nav-hovered: var(--nil-doc-nav-hovered, hsla(203, 98%, 50%, 0.25));
-        --i-nil-doc-nav-page-hovered: var(--nil-doc-nav-page-hovered, hsla(203, 98%, 50%, 0.6));
-        --i-nil-doc-nav-selected: var(--nil-doc-nav-selected, hsla(203, 98%, 50%, 0.85));
-
-        --i-nil-doc-instance-hovered: var(--nil-doc-instance-hovered, hsla(203, 98%, 50%, 0.25));
-        --i-nil-doc-instance-control-hovered: var(--nil-doc-instance-control-hovered, hsla(203, 98%, 50%, 0.6));
-        --i-nil-doc-instance-selected-color: var(--nil-doc-instance-selected-color, hsla(203, 98%, 50%, 0.85));
-
-        --i-nil-doc-transition-time: var(--nil-doc-transition-time, 350ms);
-    }
-</style>

package/src/lib/components/block/Block.svelte

@@ -1,84 +0,0 @@
-<script lang="ts">
-    import { initParams, initDefaults, initControls, initOrientation } from "./context";
-
-    import Base from "../Base.svelte";
-    import { getTheme } from "../context";
-    import type { Snippet } from "svelte";
-
-    initParams();
-    initDefaults();
-    initControls();
-
-    const columns = initOrientation();
-    const dark = getTheme();
-
-    let { children }: { children: Snippet } = $props();
-</script>
-
-<!--
-    @component3-Block
-    See [documentation](https://mono-doc.vercel.app/3-Components/2-Block) for more details.
--->
-
-<!-- <svelte:body on:click={unfocus}/> -->
-
-<Base dark={$dark}>
-    <div class="outer">
-        <div class="scrollable block" class:columns={$columns}>
-            {@render children?.()}
-        </div>
-    </div>
-</Base>
-
-<style>
-    .outer {
-        position: relative;
-        border-radius: 0.5rem;
-        padding: 1rem 0.2rem 1rem 0.2rem;
-        min-width: 10rem;
-        margin: 1px;
-        outline: solid 1px white;
-    }
-
-    .block {
-        width: 100%;
-        height: 100%;
-        display: grid;
-        grid-auto-rows: 1fr;
-        grid-auto-columns: auto;
-        grid-auto-flow: row;
-    }
-
-    .scrollable {
-        overflow: scroll;
-        /* Firefox */
-        scrollbar-width: none;
-        /* IE and Edge */
-        -ms-overflow-style: none;
-    }
-
-    .scrollable::-webkit-scrollbar {
-        display: none;
-    }
-
-    .block.columns {
-        grid-auto-rows: auto;
-        grid-auto-columns: 1fr;
-        grid-auto-flow: column;
-    }
-
-    .outer {
-        color: var(--i-nil-doc-color);
-        color-scheme: var(--i-nil-doc-color-scheme);
-        background-color: var(--i-nil-doc-block-bg-color);
-        box-shadow: 0 0 0.5rem 0 var(--i-nil-doc-block-outline-color);
-        outline: 1px solid var(--i-nil-doc-block-outline-color);
-        transition:
-            color var(--i-nil-doc-transition-time),
-            background-color var(--i-nil-doc-transition-time);
-    }
-
-    .block {
-        outline: 1px solid var(--i-nil-doc-block-outline-color);
-    }
-</style>

package/src/lib/components/block/Controls.svelte

@@ -1,20 +0,0 @@
-<script lang="ts">
-    import type { SpecialProp, Prop, Event } from "./controls/types";
-    import { getControls } from "./context";
-
-    let {
-        props = [],
-        events = []
-    }: {
-        props?: (Prop | SpecialProp)[];
-        events?: Event[];
-    } = $props();
-
-    const controls = getControls();
-    $effect(() => controls.set({ props, events }));
-</script>
-
-<!--
-    @component
-    See [documentation](https://mono-doc.vercel.app/3-Components/3-Block/2-Controls) for more details.
--->

package/src/lib/components/block/Instance.svelte

@@ -1,172 +0,0 @@
-<script lang="ts" module>
-    import type { ValueType } from "./types";
-</script>
-
-<script lang="ts" generics="Args">
-    import { onDestroy, type Snippet } from "svelte";
-    import { writable } from "svelte/store";
-
-    import { resolve } from "./utils";
-    import { getControls, getControlInfo, getControlValue, type ControlValue } from "./context";
-
-    const controls = getControls();
-    const cc = getControlInfo();
-    const vv = getControlValue();
-
-    let {
-        defaults,
-        noreset =  false,
-        children
-    }: {
-        defaults?: Args;
-        noreset?: boolean;
-        children?: Snippet<[{
-            values: Args;
-            events: Record<string, (ev?: any) => void>;
-            key: boolean
-        }]>;
-    } = $props();
-
-    /**
-     * This flag is to rerender the whole slot component.
-     * If the control is disabled, we use the default value provided from the defaults field.
-     * If the value of a prop is undefined, we will have to forward this value to the slot.
-     * Problem is, if the slot component has a default value set, it is only
-     * evaluated during component creation, not in subsequent updates.
-     *
-     * The solution is to rerender the whole slot whenever there is an control update.
-     *
-     * Similar case to: https://github.com/sveltejs/svelte/issues/4442
-     */
-    let key = $state(false);
-    $effect(() => {
-        key;
-        return () => { key = !key; }
-    });
-
-    const s_values = writable<ControlValue>({ props: {}, events: [] });
-
-    // Need to hide bound from svelte reactivity logic since bound variable is also modified by the control bindings
-    // eslint-disable-next-line
-    const updateBound = (d: Args | undefined) => ($s_values.props = resolve(d ?? {}, {}));
-    $effect(() => { updateBound(defaults); });
-
-    const focus = () => {
-        if ($vv !== s_values) {
-            $cc = controls;
-            $vv = s_values;
-        }
-    };
-    const unfocus = () => {
-        if ($vv === s_values) {
-            $cc = null;
-            $vv = null;
-        }
-    };
-    onDestroy(unfocus);
-
-    const populate = (ext: string[] | null): Record<string, (ev: CustomEvent<unknown>) => void> => {
-        const obj: Record<string, (ev: CustomEvent<unknown>) => void> = {};
-        const stringify = (detail: unknown) => {
-            if (detail) {
-                if ("string" === typeof detail) {
-                    return detail;
-                }
-                return JSON.stringify(detail);
-            }
-            return "";
-        };
-        if (null != ext) {
-            for (const name of ext) {
-                obj[name] = (param) => {
-                    const detail = stringify(param);
-                    if ($s_values.events.length > 0) {
-                        const last = $s_values.events[0];
-                        if (last.name === name && last.detail === detail && last.count < 99) {
-                            last.count += 1;
-                            $s_values.events = $s_values.events;
-                            return;
-                        }
-                    }
-                    $s_values.events.unshift({ name, detail, count: 1 });
-                    if ($s_values.events.length > 50) {
-                        $s_values.events.pop();
-                    }
-                    $s_values.events = $s_values.events;
-                };
-            }
-        }
-        return obj;
-    };
-
-    let values = $state(resolve<Args>(defaults ?? {}, $s_values.props));
-    let events = $state(populate($controls.events));
-
-    const unsubs: (() => void)[] = [];
-    unsubs.push(s_values.subscribe(v => values = resolve<Args>(defaults ?? {}, v.props)));
-    unsubs.push(controls.subscribe(v => events = populate(v.events)));
-
-    onDestroy(() => unsubs.forEach(v => v()));
-</script>
-
-<!--
-    @component
-    See [documentation](https://mono-doc.vercel.app/3-Components/3-Block/1-Content/1-Instance) for more details.
--->
-
-<div
-    class="instance"
-    class:selected={$vv === s_values}
-    class:controls={$controls.events.length > 0 || $controls.props.length > 0}
-    role="none"
-    onclick={focus}
-    onkeypress={null}
->
-    <div class="content">
-        {#if children}
-            {#if noreset}
-                {@render children({ values, events, key })}
-            {:else}
-                {#key key}
-                    {@render children({ values, events, key })}
-                {/key}
-            {/if}
-        {/if}
-    </div>
-</div>
-
-<style>
-    .instance {
-        width: 100%;
-        height: 100%;
-    }
-
-    .content {
-        min-height: 6.25rem;
-        border: 1px solid var(--i-nil-doc-block-outline-color);
-    }
-
-    /* colors */
-    .instance {
-        transition: background-color var(--i-nil-doc-transition-time);
-        color: var(--i-nil-doc-color);
-        background-color: var(--i-nil-doc-bg-color);
-        border-width: 2px;
-        border-style: solid;
-        border-color: transparent;
-        box-sizing: border-box;
-    }
-
-    .instance:hover {
-        border-color: var(--i-nil-doc-instance-hovered);
-    }
-
-    .instance.controls:hover {
-        border-color: var(--i-nil-doc-instance-control-hovered);
-    }
-
-    .instance.selected,
-    .instance.selected:hover {
-        border-color: var(--i-nil-doc-instance-selected-color);
-    }
-</style>