@nil-/doc 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @nil-/doc
+
+## 0.1.0
+
+### Minor Changes
+
+-   Alpha release

package/components/Layout.svelte

@@ -0,0 +1,63 @@
+<style>
+    .wrapper {
+        width: 100%;
+        height: 100%;
+        font-family: "Fira Code", "Courier New", Courier, monospace;
+    }
+
+    .wrapper {
+        overflow: hidden;
+        background-color: rgb(34, 36, 37);
+        color: rgb(201, 205, 207);
+    }
+
+    .content {
+        height: 100%;
+        padding: 5px;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .scrollable {
+        overflow: scroll;
+        scrollbar-width: none; /* Firefox */
+        -ms-overflow-style: none; /* IE and Edge */
+    }
+
+    .scrollable::-webkit-scrollbar {
+        display: none;
+    }
+</style>
+
+<script>import Container from "./etc/Container.svelte";
+import Nav from "./navigation/Nav.svelte";
+import Font from "./etc/Font.svelte";
+export let data;
+export let current = null;
+export let sorter = null;
+export let renamer = null;
+</script>
+<Font />
+<div class="wrapper">
+    <Container offset={250} padding={250} vertical>
+        <svelte:fragment slot="a">
+            <Nav
+                info={data}
+                selected={current ?? ""}
+                sorter={sorter ?? ((l, r) => (l < r ? -1 : l > r ? +1 : 0))}
+                renamer={renamer ?? ((s) => s)}
+                on:navigate
+            >
+                <slot name="title">@nil-/doc</slot>
+            </Nav>
+        </svelte:fragment>
+        <svelte:fragment slot="b">
+            <div class="content scrollable">
+                {#key current}
+                    <slot name="content" />
+                {/key}
+            </div>
+        </svelte:fragment>
+    </Container>
+</div>
+

package/components/Layout.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Sorter, Renamer } from "./navigation/types";
+declare const __propDef: {
+    props: {
+        data: string[];
+        current?: string | null | undefined;
+        sorter?: Sorter | null | undefined;
+        renamer?: Renamer | null | undefined;
+    };
+    events: {
+        navigate: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        title: {};
+        content: {};
+    };
+};
+export declare type LayoutProps = typeof __propDef.props;
+export declare type LayoutEvents = typeof __propDef.events;
+export declare type LayoutSlots = typeof __propDef.slots;
+export default class Layout extends SvelteComponentTyped<LayoutProps, LayoutEvents, LayoutSlots> {
+}
+export {};

package/components/block/Block.svelte

@@ -0,0 +1,18 @@
+<script>import { initCurrent, initParams, initControls } from "./context";
+initParams();
+initCurrent();
+initControls();
+</script>
+<style>
+    div {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+    }
+</style>
+
+
+<div>
+    <slot />
+</div>
+

package/components/block/Block.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type BlockProps = typeof __propDef.props;
+export declare type BlockEvents = typeof __propDef.events;
+export declare type BlockSlots = typeof __propDef.slots;
+export default class Block extends SvelteComponentTyped<BlockProps, BlockEvents, BlockSlots> {
+}
+export {};

package/components/block/Controls.svelte

@@ -0,0 +1,5 @@
+
+<script>import { getControls } from "./context";
+export let props = [];
+getControls().set(props);
+</script>

package/components/block/Controls.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Control } from "./controls/types";
+declare const __propDef: {
+    props: {
+        props?: Control[] | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type ControlsProps = typeof __propDef.props;
+export declare type ControlsEvents = typeof __propDef.events;
+export declare type ControlsSlots = typeof __propDef.slots;
+export default class Controls extends SvelteComponentTyped<ControlsProps, ControlsEvents, ControlsSlots> {
+}
+export {};

package/components/block/Params.svelte

@@ -0,0 +1,6 @@
+
+<script>import { getParams } from "./context";
+export let tag;
+export let props = {};
+getParams().update((v) => [...v, { id: v.length, tag, values: props }]);
+</script>

package/components/block/Params.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        tag: string;
+        props?: Record<string, unknown> | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type ParamsProps = typeof __propDef.props;
+export declare type ParamsEvents = typeof __propDef.events;
+export declare type ParamsSlots = typeof __propDef.slots;
+export default class Params extends SvelteComponentTyped<ParamsProps, ParamsEvents, ParamsSlots> {
+}
+export {};

package/components/block/Template.svelte

@@ -0,0 +1,139 @@
+<style>
+    .template {
+        display: flex;
+        flex-direction: column;
+        font-family: "Fira Code", "Courier New", Courier, monospace;
+        gap: 20px;
+        padding-bottom: 10px;
+        padding-top: 10px;
+    }
+
+    .instance {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .content {
+        padding: 10px;
+        min-height: 100px;
+        border-radius: 5px 5px 5px 5px;
+        background-color: rgb(100, 96, 96);
+    }
+
+    .scrollable {
+        width: 100%;
+        overflow: scroll;
+        scrollbar-width: none; /* Firefox */
+        -ms-overflow-style: none; /* IE and Edge */
+    }
+
+    .scrollable::-webkit-scrollbar {
+        display: none;
+    }
+
+    .misc {
+        margin-top: 5px;
+        padding: 5px;
+        background-color: rgb(100, 96, 96);
+        border-bottom-left-radius: 5px;
+        border-bottom-right-radius: 5px;
+        user-select: none;
+    }
+
+    .misc > .controls {
+        width: 100%;
+        display: grid;
+        grid-template-columns: 1fr 200px 75px;
+        grid-auto-rows: 1fr;
+    }
+
+    .misc > .controls > .header {
+        text-align: center;
+    }
+</style>
+<svelte:window on:click={() => ($current = null)} />
+
+<script>import { beforeUpdate } from "svelte";
+import { getParams, getCurrent, getControls } from "./context";
+import Text from "./controls/Text.svelte";
+import Number from "./controls/Number.svelte";
+import Range from "./controls/Range.svelte";
+import Switch from "./controls/Switch.svelte";
+import Select from "./controls/Select.svelte";
+import Font from "../etc/Font.svelte";
+import { slide } from "svelte/transition";
+const params = getParams();
+const current = getCurrent();
+const controls = getControls();
+export let defaults;
+$: keys = Object.keys(defaults);
+function resolve(d, p) {
+    if (d === undefined) {
+        return {};
+    }
+    const temporary = { ...d };
+    for (const key of keys) {
+        if (key in p && p[key] !== undefined) {
+            temporary[key] = p[key];
+        }
+    }
+    return temporary;
+}
+let hovered = null;
+/**
+ * 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 rerender = false;
+beforeUpdate(() => (rerender = !rerender));
+</script>
+<Font />
+<div class="template">
+    {#each $params as { id, tag, values } (id)}
+        <div
+            class="instance"
+            on:click|stopPropagation={() => ($current = id)}
+            on:mouseenter={() => (hovered = id)}
+            on:mouseleave={() => (hovered = null)}
+            on:keypress={null}
+        >
+            {#key rerender}
+                <div class="content scrollable">
+                    <slot {tag} props={resolve(defaults, values)} />
+                </div>
+            {/key}
+            {#if $controls.length > 0 && ($current === id || hovered === id)}
+                <div class="misc scrollable" transition:slide>
+                    <div class="controls">
+                        <div class="header">Name</div>
+                        <div class="header">Value</div>
+                        <div class="header">In Use</div>
+                        {#each $controls as info}
+                            {@const type = info.type}
+                            {@const name = info.name}
+                            {#if type === "text"}
+                                <Text {info} bind:value={values[name]} />
+                            {:else if type === "number"}
+                                <Number {info} bind:value={values[name]} />
+                            {:else if type === "range"}
+                                <Range {info} bind:value={values[name]} />
+                            {:else if type === "select"}
+                                <Select {info} bind:value={values[name]} />
+                            {:else if type === "switch"}
+                                <Switch {info} bind:value={values[name]} />
+                            {/if}
+                        {/each}
+                    </div>
+                </div>
+            {/if}
+        </div>
+    {/each}
+</div>
+

package/components/block/Template.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare class __sveltets_Render<Args> {
+    props(): {
+        defaults: Args;
+    };
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {
+        default: {
+            tag: string;
+            props: Args;
+        };
+    };
+}
+export declare type TemplateProps<Args> = ReturnType<__sveltets_Render<Args>['props']>;
+export declare type TemplateEvents<Args> = ReturnType<__sveltets_Render<Args>['events']>;
+export declare type TemplateSlots<Args> = ReturnType<__sveltets_Render<Args>['slots']>;
+export default class Template<Args> extends SvelteComponentTyped<TemplateProps<Args>, TemplateEvents<Args>, TemplateSlots<Args>> {
+}
+export {};

package/components/block/context.d.ts

@@ -0,0 +1,11 @@
+import type { Control } from "./controls/types";
+import type { Writable } from "svelte/store";
+export declare type ParamValues = Record<string, any>;
+export declare type Params = {
+    id: number;
+    tag: string;
+    values: ParamValues;
+};
+export declare const initCurrent: () => Writable<number | null>, getCurrent: () => Writable<number | null>;
+export declare const initParams: () => Writable<Params[]>, getParams: () => Writable<Params[]>;
+export declare const initControls: () => Writable<Control[]>, getControls: () => Writable<Control[]>;

package/components/block/context.js

@@ -0,0 +1,12 @@
+import { getContext, setContext } from "svelte";
+import { writable } from "svelte/store";
+function create(defaulter) {
+    const symbol = Symbol();
+    return {
+        init: () => setContext(symbol, writable(defaulter())),
+        get: () => getContext(symbol)
+    };
+}
+export const { init: initCurrent, get: getCurrent } = create(() => null);
+export const { init: initParams, get: getParams } = create(() => []);
+export const { init: initControls, get: getControls } = create(() => []);

package/components/block/controls/Number.svelte

@@ -0,0 +1,10 @@
+
+<script>export let value;
+export let info;
+let ivalue = value ?? 0;
+let enabled = value !== undefined;
+$: value = enabled ? ivalue : undefined;
+</script>
+<span>{info.name}</span>
+<input type="number" bind:value={ivalue} disabled={!enabled} />
+<input type="checkbox" bind:checked={enabled} />

package/components/block/controls/Number.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ControlNumber } from "./types";
+declare const __propDef: {
+    props: {
+        value: number | undefined;
+        info: ControlNumber;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type NumberProps = typeof __propDef.props;
+export declare type NumberEvents = typeof __propDef.events;
+export declare type NumberSlots = typeof __propDef.slots;
+export default class Number extends SvelteComponentTyped<NumberProps, NumberEvents, NumberSlots> {
+}
+export {};

package/components/block/controls/Range.svelte

@@ -0,0 +1,32 @@
+<style>
+    div {
+        width: 100%;
+        display: grid;
+        grid-template-columns: 40px 1fr;
+    }
+
+    div > span {
+        text-align: center;
+    }
+</style>
+
+<script>export let value;
+export let info;
+let ivalue = value ?? info.min;
+let enabled = value !== undefined;
+$: value = enabled ? ivalue : undefined;
+</script>
+<span>{info.name}</span>
+<div>
+    <span>{ivalue}</span>
+    <input
+        type="range"
+        bind:value={ivalue}
+        min={info.min}
+        max={info.max}
+        step={info.step}
+        disabled={!enabled}
+    />
+</div>
+<input type="checkbox" bind:checked={enabled} />
+

package/components/block/controls/Range.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ControlRange } from "./types";
+declare const __propDef: {
+    props: {
+        value: number | undefined;
+        info: ControlRange;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type RangeProps = typeof __propDef.props;
+export declare type RangeEvents = typeof __propDef.events;
+export declare type RangeSlots = typeof __propDef.slots;
+export default class Range extends SvelteComponentTyped<RangeProps, RangeEvents, RangeSlots> {
+}
+export {};

package/components/block/controls/Select.svelte

@@ -0,0 +1,14 @@
+
+<script>export let value;
+export let info;
+let ivalue = value ?? (info.values.length > 0 ? info.values[0] : undefined);
+let enabled = value !== undefined;
+$: value = enabled ? ivalue : undefined;
+</script>
+<span>{info.name}</span>
+<select bind:value={ivalue} disabled={!enabled}>
+    {#each info.values as value}
+        <option {value}>{value}</option>
+    {/each}
+</select>
+<input type="checkbox" bind:checked={enabled} />

package/components/block/controls/Select.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ControlSelect } from "./types";
+declare const __propDef: {
+    props: {
+        value: string | undefined;
+        info: ControlSelect;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type SelectProps = typeof __propDef.props;
+export declare type SelectEvents = typeof __propDef.events;
+export declare type SelectSlots = typeof __propDef.slots;
+export default class Select extends SvelteComponentTyped<SelectProps, SelectEvents, SelectSlots> {
+}
+export {};

package/components/block/controls/Switch.svelte

@@ -0,0 +1,10 @@
+
+<script>export let value;
+export let info;
+let ivalue = value ?? false;
+let enabled = value !== undefined;
+$: value = enabled ? ivalue : undefined;
+</script>
+<span>{info.name}</span>
+<input type="checkbox" bind:checked={ivalue} disabled={!enabled} />
+<input type="checkbox" bind:checked={enabled} />

package/components/block/controls/Switch.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ControlSwitch } from "./types";
+declare const __propDef: {
+    props: {
+        value: boolean | undefined;
+        info: ControlSwitch;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type SwitchProps = typeof __propDef.props;
+export declare type SwitchEvents = typeof __propDef.events;
+export declare type SwitchSlots = typeof __propDef.slots;
+export default class Switch extends SvelteComponentTyped<SwitchProps, SwitchEvents, SwitchSlots> {
+}
+export {};

package/components/block/controls/Text.svelte

@@ -0,0 +1,10 @@
+
+<script>export let value;
+export let info;
+let ivalue = value ?? "";
+let enabled = value !== undefined;
+$: value = enabled ? ivalue : undefined;
+</script>
+<span>{info.name}</span>
+<input type="text" bind:value={ivalue} disabled={!enabled} />
+<input type="checkbox" bind:checked={enabled} />

package/components/block/controls/Text.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ControlText } from "./types";
+declare const __propDef: {
+    props: {
+        value: string | undefined;
+        info: ControlText;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type TextProps = typeof __propDef.props;
+export declare type TextEvents = typeof __propDef.events;
+export declare type TextSlots = typeof __propDef.slots;
+export default class Text extends SvelteComponentTyped<TextProps, TextEvents, TextSlots> {
+}
+export {};

package/components/block/controls/types.d.ts

@@ -0,0 +1,30 @@
+export type ControlText = {
+    name: string;
+    type: "text";
+};
+
+export type ControlNumber = {
+    name: string;
+    type: "number";
+};
+
+export type ControlRange = {
+    name: string;
+    type: "range";
+    min: number;
+    max: number;
+    step: number;
+};
+
+export type ControlSelect = {
+    name: string;
+    type: "select";
+    values: string[];
+};
+
+export type ControlSwitch = {
+    name: string;
+    type: "switch";
+};
+
+export type Control = ControlText | ControlNumber | ControlRange | ControlSelect | ControlSwitch;

package/components/etc/Container.svelte

@@ -0,0 +1,102 @@
+<style>
+    .root {
+        display: flex;
+        position: relative;
+        width: 100%;
+        height: 100%;
+    }
+
+    .primary {
+        flex-shrink: 0;
+    }
+
+    .secondary {
+        flex-grow: 1;
+        flex-basis: auto;
+    }
+
+    .divider {
+        z-index: 1;
+        user-select: none;
+    }
+
+    .root > div {
+        outline: white solid 1px;
+    }
+</style>
+
+<script>import { createDraggable } from "./action";
+// orientation of the layout
+export let vertical = false;
+// initial value where the divider is located
+export let offset = 0;
+// which position is offset located
+// if true, the reference content is from slot="b"
+// if false, the reference content is from slot="a"
+export let reversed = false;
+// size of the "draggable" divider
+export let thickness = 10;
+// min distance of divider to the edges
+export let padding = 0;
+let width;
+let height;
+const { position, draggable } = createDraggable(offset);
+function update(w, h, limit, value) {
+    if (w == null || h == null) {
+        return;
+    }
+    const span = vertical ? w : h;
+    offset = Math.max(Math.min(value, span - limit), limit);
+}
+$: update(width, height, padding, $position);
+$: offsetpx = `${offset}px`;
+$: thicknesspx = `${thickness}px`;
+</script>
+<div
+    class="root"
+    bind:clientHeight={height}
+    bind:clientWidth={width}
+    style:flex-direction={vertical ? "row" : "column"}
+>
+    {#if width != null && height != null}
+        <div
+            class:primary={!reversed}
+            class:secondary={reversed}
+            style:min-height={!vertical ? `${padding}px` : null}
+            style:max-height={!vertical ? `${height - padding}px` : null}
+            style:min-width={vertical ? `${padding}px` : null}
+            style:max-width={vertical ? `${width - padding}px` : null}
+            style:width={!reversed && vertical ? offsetpx : null}
+            style:height={!reversed && !vertical ? offsetpx : null}
+        >
+            <slot name="a" />
+        </div>
+        <div
+            class="divider"
+            style:width={vertical ? "0px" : null}
+            style:height={!vertical ? "0px" : null}
+        >
+            <div
+                class="overlay"
+                style:width={vertical ? thicknesspx : "100%"}
+                style:height={!vertical ? thicknesspx : "100%"}
+                style:cursor={vertical ? "col-resize" : "row-resize"}
+                style:transform={vertical ? "translateX(-50%)" : "translateY(-50%)"}
+                use:draggable={{ reset: () => offset, reversed, vertical }}
+            />
+        </div>
+        <div
+            class:primary={reversed}
+            class:secondary={!reversed}
+            style:min-height={!vertical ? `${padding}px` : null}
+            style:max-height={!vertical ? `${height - padding}px` : null}
+            style:min-width={vertical ? `${padding}px` : null}
+            style:max-width={vertical ? `${width - padding}px` : null}
+            style:width={reversed && vertical ? offsetpx : null}
+            style:height={reversed && !vertical ? offsetpx : null}
+        >
+            <slot name="b" />
+        </div>
+    {/if}
+</div>
+

package/components/etc/Container.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        vertical?: boolean | undefined;
+        offset?: number | undefined;
+        reversed?: boolean | undefined;
+        thickness?: number | undefined;
+        padding?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        a: {};
+        b: {};
+    };
+};
+export declare type ContainerProps = typeof __propDef.props;
+export declare type ContainerEvents = typeof __propDef.events;
+export declare type ContainerSlots = typeof __propDef.slots;
+export default class Container extends SvelteComponentTyped<ContainerProps, ContainerEvents, ContainerSlots> {
+}
+export {};

package/components/etc/Font.svelte

@@ -0,0 +1,5 @@
+<svelte:head>
+    <link href="https://fonts.googleapis.com/css?family=Fira Code" rel="stylesheet" />
+</svelte:head>
+
+

package/components/etc/Font.svelte.d.ts

@@ -0,0 +1,19 @@
+/** @typedef {typeof __propDef.props}  FontProps */
+/** @typedef {typeof __propDef.events}  FontEvents */
+/** @typedef {typeof __propDef.slots}  FontSlots */
+export default class Font extends SvelteComponentTyped<{}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type FontProps = typeof __propDef.props;
+export type FontEvents = typeof __propDef.events;
+export type FontSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/etc/action.d.ts

@@ -0,0 +1,13 @@
+import { type Writable } from "svelte/store";
+import type { ActionReturn } from "svelte/action";
+declare type Parameter = {
+    reset: () => number;
+    vertical: boolean;
+    reversed: boolean;
+};
+declare type Return = {
+    position: Writable<number>;
+    draggable: (div: HTMLDivElement, parameter: Parameter) => ActionReturn<Parameter>;
+};
+export declare const createDraggable: (offset: number) => Return;
+export {};

package/components/etc/action.js

@@ -0,0 +1,47 @@
+import { writable } from "svelte/store";
+export const createDraggable = (offset) => {
+    const position = writable(offset);
+    function draggable(div, parameter) {
+        let param = parameter ?? { reset: () => 0, vertical: true, reversed: false };
+        let moving = false;
+        position.set(param.reset());
+        let current_page = 0;
+        function engage(e) {
+            moving = true;
+            position.set(param.reset());
+            current_page = param.vertical ? e.pageX : e.pageY;
+        }
+        function disengage() {
+            moving = false;
+        }
+        function move(e) {
+            if (moving) {
+                const page = param.vertical ? e.pageX : e.pageY;
+                position.update((v) => v + (page - current_page) * (param.reversed ? -1 : 1));
+                current_page = page;
+            }
+        }
+        div.addEventListener("mousedown", engage);
+        document.addEventListener("mouseup", disengage);
+        document.addEventListener("mousemove", move);
+        return {
+            update: (parameter) => {
+                if (param.reversed !== parameter.reversed ||
+                    param.vertical !== parameter.vertical) {
+                    moving = false;
+                }
+                param = parameter;
+                position.set(param.reset());
+            },
+            destroy: () => {
+                div.removeEventListener("mousedown", engage);
+                document.removeEventListener("mouseup", disengage);
+                document.removeEventListener("mousemove", move);
+            }
+        };
+    }
+    return {
+        position,
+        draggable
+    };
+};

package/components/load.d.ts

@@ -0,0 +1 @@
+export declare function load(files_from_import_meta: Record<string, unknown>): string[];

package/components/load.js

@@ -0,0 +1,8 @@
+export function load(files_from_import_meta) {
+    const prefix = ".".length;
+    const suffix = "/+page.svelte".length;
+    const rootlen = "./+page.svelte".length;
+    return Object.keys(files_from_import_meta)
+        .filter((p) => p.length > rootlen) // remove root page
+        .map((p) => p.substring(prefix, p.length - suffix));
+}

package/components/navigation/Nav.svelte

@@ -0,0 +1,79 @@
+<style>
+    .root {
+        gap: 10px;
+        padding-top: 20px;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .logo,
+    .search-bar {
+        padding-left: 20px;
+        padding-right: 20px;
+    }
+
+    input {
+        height: 20px;
+        width: 100%;
+    }
+</style>
+
+<script context="module">"use strict";
+function 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 (t[part] == null) {
+                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;
+}
+</script>
+<script>import Tree from "./Tree.svelte";
+export let info;
+export let selected;
+export let sorter;
+export let renamer;
+let filter = "";
+let states = apply(info, () => ({ expanded: false, sub: {} }), (t, path) => ({ expanded: t.expanded || selected === path, sub: t.sub }), (t) => t.sub);
+function populate(f, i) {
+    return apply(f.length > 0 ? i.filter((d) => d.includes(f)) : i, () => ({ url: null, sub: {} }), (t) => t, (t) => t.sub, (t, p) => {
+        t.url = p;
+    });
+}
+</script>
+<div class="root">
+    <div class="logo"><slot /></div>
+    <div class="search-bar">
+        <input bind:value={filter} type="text" />
+    </div>
+    <div class="tree">
+        <Tree
+            tree={populate(filter, info)}
+            {selected}
+            {sorter}
+            {renamer}
+            bind:states
+            on:navigate
+            force_expand={filter.length > 0}
+        />
+    </div>
+</div>
+

package/components/navigation/Nav.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Sorter, Renamer } from "./types";
+declare const __propDef: {
+    props: {
+        info: string[];
+        selected: string;
+        sorter: Sorter;
+        renamer: Renamer;
+    };
+    events: {
+        navigate: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type NavProps = typeof __propDef.props;
+export declare type NavEvents = typeof __propDef.events;
+export declare type NavSlots = typeof __propDef.slots;
+export default class Nav extends SvelteComponentTyped<NavProps, NavEvents, NavSlots> {
+}
+export {};

package/components/navigation/Node.svelte

@@ -0,0 +1,104 @@
+<style>
+    .wrapper {
+        user-select: none;
+    }
+
+    .wrapper,
+    .sub,
+    .icon {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .header {
+        height: 30px;
+        display: grid;
+        grid-template-columns: 15px 1fr;
+        align-items: center;
+        cursor: pointer;
+    }
+
+    .header > div {
+        justify-content: center;
+        height: 15px;
+        width: 15px;
+    }
+
+    .header > div.expanded {
+        transform: rotate(90deg);
+    }
+
+    .header > div > div {
+        margin: auto;
+    }
+
+    .header:hover {
+        background-color: rgba(2, 156, 253, 0.07);
+    }
+
+    .header.selected {
+        background-color: rgba(2, 157, 253, 0.822);
+    }
+</style>
+
+<script>import { slide } from "svelte/transition";
+import { sort } from "./utils";
+import { createEventDispatcher } from "svelte";
+export let key;
+export let value;
+export let depth;
+export let selected;
+export let force_expand;
+export let states;
+export let sorter;
+export let renamer;
+const dispatch = createEventDispatcher();
+$: style = `padding-left: ${10 + depth * 10}px;`;
+$: has_children = Object.keys(value.sub).length > 0;
+function click(link) {
+    if (link != null && selected !== link) {
+        dispatch("navigate", link);
+    }
+    else if (has_children) {
+        states.expanded = !states.expanded;
+    }
+}
+</script>
+<div class="wrapper">
+    <div
+        class="header"
+        on:click={() => click(value.url)}
+        on:keypress={null}
+        {style}
+        class:selected={selected === value.url}
+    >
+        <div class="icon" class:expanded={has_children && states.expanded}>
+            <div>
+                {#if Object.keys(value.sub).length > 0}
+                    >
+                {:else}
+                    -
+                {/if}
+            </div>
+        </div>
+        <span>{renamer(key)}</span>
+    </div>
+    {#if force_expand || states.expanded}
+        <div class="sub" transition:slide|local>
+            {#each sort(value.sub, sorter) as [k, v] (k)}
+                <svelte:self
+                    key={k}
+                    value={v}
+                    depth={depth + 1}
+                    {selected}
+                    {renamer}
+                    {sorter}
+                    {force_expand}
+                    bind:states={states.sub[k]}
+                    on:navigate
+                />
+            {/each}
+        </div>
+    {/if}
+</div>
+

package/components/navigation/Node.svelte.d.ts

@@ -0,0 +1,26 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Tree, States, Sorter, Renamer } from "./types";
+declare const __propDef: {
+    props: {
+        key: string;
+        value: Tree;
+        depth: number;
+        selected: string;
+        force_expand: boolean;
+        states: States;
+        sorter: Sorter;
+        renamer: Renamer;
+    };
+    events: {
+        navigate: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type NodeProps = typeof __propDef.props;
+export declare type NodeEvents = typeof __propDef.events;
+export declare type NodeSlots = typeof __propDef.slots;
+export default class Node extends SvelteComponentTyped<NodeProps, NodeEvents, NodeSlots> {
+}
+export {};

package/components/navigation/Tree.svelte

@@ -0,0 +1,23 @@
+
+<script>import Node from "./Node.svelte";
+import { sort } from "./utils";
+export let tree;
+export let states;
+export let sorter;
+export let renamer;
+export let force_expand;
+export let selected;
+</script>
+{#each sort(tree, sorter) as [key, value] (key)}
+    <Node
+        {key}
+        {value}
+        depth={0}
+        {selected}
+        {sorter}
+        {renamer}
+        {force_expand}
+        bind:states={states[key]}
+        on:navigate
+    />
+{/each}

package/components/navigation/Tree.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Tree, States, Sorter, Renamer } from "./types";
+declare const __propDef: {
+    props: {
+        tree: Record<string, Tree>;
+        states: Record<string, States>;
+        sorter: Sorter;
+        renamer: Renamer;
+        force_expand: boolean;
+        selected: string;
+    };
+    events: {
+        navigate: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type TreeProps = typeof __propDef.props;
+export declare type TreeEvents = typeof __propDef.events;
+export declare type TreeSlots = typeof __propDef.slots;
+export default class Tree extends SvelteComponentTyped<TreeProps, TreeEvents, TreeSlots> {
+}
+export {};

package/components/navigation/types.d.ts

@@ -0,0 +1,12 @@
+export interface Tree {
+    url: string | null;
+    sub: Record<string, Tree>;
+}
+
+export interface States {
+    expanded: boolean;
+    sub: Record<string, States>;
+}
+
+export type Sorter = (l: string, r: string) => 1 | 0 | -1;
+export type Renamer = (s: string) => string;

package/components/navigation/utils.d.ts

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

package/components/navigation/utils.js

@@ -0,0 +1,35 @@
+const match = /(\d+)-(.+)/;
+function sorterT(l, r) {
+    if (l < r) {
+        return -1;
+    }
+    if (l > r) {
+        return +1;
+    }
+    return 0;
+}
+const sorter = (l, r) => {
+    const lmatch = match.exec(l);
+    const rmatch = match.exec(r);
+    if (lmatch == null && rmatch == null) {
+        return sorterT(l, r);
+    }
+    if (lmatch == null) {
+        return 1;
+    }
+    if (rmatch == null) {
+        return -1;
+    }
+    return sorterT(parseInt(lmatch[1]), parseInt(rmatch[1]));
+};
+const renamer = (t) => {
+    const m = match.exec(t);
+    if (m) {
+        return m[2];
+    }
+    return t;
+};
+export function sort(t, order) {
+    return Object.entries(t).sort(([l], [r]) => order(l, r));
+}
+export { sorter, renamer };

package/index.d.ts

@@ -0,0 +1,8 @@
+export { load } from "./components/load";
+export { renamer, sorter } from "./components/navigation/utils";
+export type { Control } from "./components/block/controls/types";
+export { default as Layout } from "./components/Layout.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";

package/index.js

@@ -0,0 +1,7 @@
+export { load } from "./components/load";
+export { renamer, sorter } from "./components/navigation/utils";
+export { default as Layout } from "./components/Layout.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";

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@nil-/doc",
+  "version": "0.1.0",
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "1.0.0-next.87",
+    "@sveltejs/kit": "1.0.0-next.553",
+    "@sveltejs/package": "next",
+    "mdsvex": "^0.10.6",
+    "svelte": "^3.53.1",
+    "svelte-check": "^2.9.2",
+    "svelte-markdown": "^0.2.3",
+    "svelte-preprocess": "^4.10.7",
+    "tslib": "^2.4.1",
+    "typescript": "^4.8.4",
+    "vite": "^3.2.4"
+  },
+  "type": "module",
+  "publishConfig": {
+    "linkDirectory": true
+  },
+  "exports": {
+    "./package.json": "./package.json",
+    ".": "./index.js"
+  },
+  "svelte": "./index.js"
+}