@nil-/doc 2.0.0 → 2.0.2

package/src/lib/components/layout/Container.svelte

@@ -1,210 +0,0 @@
-<script lang="ts">
-    import { writable } from "svelte/store";
-    import { Tween } from "svelte/motion";
-
-    import { createDraggable } from "./action";
-    import type { Snippet } from "svelte";
-
-    let {
-        vertical = false,
-        offset = $bindable(4),
-        b = false,
-        persistent = false,
-        side_a,
-        side_b
-    }:  {
-        vertical?: boolean;
-        offset?: number;
-        b?: boolean;
-        persistent?: boolean;
-        side_a: Snippet;
-        side_b: Snippet;
-    } = $props();
-
-    let width: number | null = $state(null);
-    let height: number | null = $state(null);
-
-    const { position, draggable } = createDraggable(offset);
-
-    let span = $derived(vertical ? width : height);
-
-    const update = (limit: number, value: number) => {
-        if (null == span) {
-            return;
-        }
-
-        offset = Math.max(Math.min(value, span - limit), limit);
-    };
-
-    const off = new Tween(offset, { duration: 50 });
-    const min = 4;
-    let last: number[] = [];
-
-    $effect(() => update(min, $position));
-    $effect(() => { off.set(offset); });
-    let style = $derived(!b ? `auto 0.2rem ${off.current}px` : `${off.current}px 0.2rem auto`);
-
-    const moving = writable(false);
-
-    const addLast = (v: number) => {
-        if (v > min) {
-            if (last.length < 2) {
-                last = [...last, v];
-            } else {
-                last = [last[1], v];
-            }
-        }
-    };
-
-    const dbltap = () => {
-        if (off.current > min) {
-            addLast(offset);
-            offset = min;
-        } else if (last.length > 0) {
-            // eslint-disable-next-line @typescript-eslint/non-nullable-type-assertion-style
-            offset = last.pop() as number;
-        }
-    };
-
-    const check = (v: number, flag: boolean, s: number) => {
-        if (flag) {
-            return v < s - min;
-        } else {
-            return v > min;
-        }
-    };
-    const title = (v: boolean, b: boolean) => {
-        if (v) {
-            return b ? "left" : "right";
-        }
-        return b ? "top" : "bottom";
-    };
-</script>
-
-<div
-    class="container"
-    class:b
-    class:a={!b}
-    class:vertical
-    class:horizontal={!vertical}
-    class:moving={$moving}
-    bind:clientWidth={width}
-    bind:clientHeight={height}
-    style:grid-template-columns={vertical ? style : null}
-    style:grid-template-rows={!vertical ? style : null}
->
-    {#if width != null && height != null}
-        <div style:grid-area="A">
-            {#if persistent || check(off.current, !b, span ?? 0)}
-                {@render side_a()}
-            {/if}
-        </div>
-        <div class="divider">
-            <div
-                class="overlay"
-                title={`Collapse ${title(vertical, b)}`}
-                use:draggable={{
-                    reset: () => offset,
-                    reversed: !b,
-                    vertical,
-                    dbltap: dbltap,
-                    tap: () => addLast(off.current),
-                    moving
-                }}
-            ></div>
-        </div>
-        <div style:grid-area="B">
-            {#if persistent || check(off.current, b, span ?? 0)}
-                {@render side_b()}
-            {/if}
-        </div>
-    {/if}
-</div>
-
-<style>
-    .container {
-        width: 100%;
-        height: 100%;
-        display: grid;
-        grid-template-areas:
-            "A"
-            "divider"
-            "B";
-        overflow: hidden;
-    }
-
-    .container.vertical {
-        grid-template-areas: "A divider B";
-    }
-
-    .container > div {
-        width: 100%;
-        height: 100%;
-        overflow: hidden;
-    }
-
-    .container > .divider {
-        z-index: 10;
-        overflow: visible;
-        user-select: none;
-        grid-area: divider;
-    }
-
-    .overlay {
-        touch-action: none;
-    }
-
-    .container > .divider > .overlay {
-        width: 100%;
-        height: 1.5rem;
-        cursor: ns-resize;
-        transform: translateY(-50%);
-    }
-
-    .container.vertical > .divider > .overlay {
-        width: 1.5rem;
-        height: 100%;
-        cursor: ew-resize;
-        transform: translateX(-50%);
-    }
-
-    /* colors */
-    .divider {
-        transition:
-            border-color var(--i-nil-doc-transition-time),
-            background-color var(--i-nil-doc-transition-time);
-        --width: 0.0625rem;
-    }
-
-    .container.horizontal > .divider {
-        border-bottom: var(--i-nil-doc-container-p) solid var(--width);
-        border-top: var(--i-nil-doc-container-p) solid var(--width);
-        background-color: var(--i-nil-doc-container-p);
-    }
-
-    .container.vertical > .divider {
-        border-right: var(--i-nil-doc-container-p) solid var(--width);
-        border-left: var(--i-nil-doc-container-p) solid var(--width);
-        background-color: var(--i-nil-doc-container-p);
-    }
-
-    .container.a.horizontal > .divider:hover,
-    .container.moving.a.horizontal > .divider {
-        border-bottom: var(--i-nil-doc-container-s) solid var(--width);
-    }
-
-    .container.b.horizontal > .divider:hover,
-    .container.moving.b.horizontal > .divider {
-        border-top: var(--i-nil-doc-container-s) solid var(--width);
-    }
-
-    .container.a.vertical > .divider:hover,
-    .container.moving.a.vertical > .divider {
-        border-right: var(--i-nil-doc-container-s) solid var(--width);
-    }
-
-    .container.vertical.b > .divider:hover,
-    .container.moving.vertical.b > .divider {
-        border-left: var(--i-nil-doc-container-s) solid var(--width);
-    }
-</style>

package/src/lib/components/layout/Content.svelte

@@ -1,29 +0,0 @@
-<script lang="ts">
-    import type { Snippet } from "svelte";
-
-    let { children }: { children: Snippet } = $props();
-</script>
-
-<div>
-    {@render children?.()}
-</div>
-
-<style>
-    div {
-        display: flex;
-        box-sizing: border-box;
-        margin: 0.5rem;
-        padding: 0.5rem;
-        border-radius: 0.5rem;
-        width: min-content;
-        height: min-content;
-        min-width: calc(100% - 1rem);
-        min-height: calc(100% - 1rem);
-    }
-
-    /* color */
-    div {
-        border: solid 1px var(--i-nil-doc-content-outline-color);
-        box-shadow: 0 0 0.5rem 0 var(--i-nil-doc-content-outline-color);
-    }
-</style>

package/src/lib/components/layout/DocLayout.svelte

@@ -1,51 +0,0 @@
-<script lang="ts" module>
-    import type { Readable, Writable } from "svelte/store";
-
-    type Settings = {
-        readonly data: readonly string[];
-        readonly current: Readable<string | null>;
-        readonly offset: Writable<number>;
-        readonly theme: Writable<"dark" | "light">;
-        readonly panel: Writable<"bottom" | "right">;
-        readonly navigate: (e: { detail: string }) => Promise<void>;
-    };
-</script>
-
-<script lang="ts">
-    import Layout from "$lib/components/layout/Layout.svelte";
-    import type { Renamer, Sorter } from "../navigation/types";
-    import type { Snippet } from "svelte";
-
-    let {
-        settings,
-        sorter,
-        renamer,
-        title,
-        title_misc,
-        children
-    }: {
-        settings: Settings;
-        sorter?: Sorter;
-        renamer?: Renamer;
-        title: Snippet;
-        title_misc?: Snippet;
-        children?: Snippet;
-    } = $props();
-
-    let { data, current, theme, offset, panel, navigate } = $derived(settings);
-</script>
-
-<Layout
-    {data}
-    {sorter}
-    {renamer}
-    current={$current}
-    bind:theme={$theme}
-    bind:offset={$offset}
-    bind:panel={$panel}
-    onnavigate={navigate}
-    {title}
-    {title_misc}
-    {children}
->
-</Layout>

package/src/lib/components/layout/Layout.svelte

@@ -1,187 +0,0 @@
-<script lang="ts" module>
-    import type { Sorter, Renamer } from "../navigation/types";
-
-    type ThreeWay = -1 | 0 | 1;
-    const defaultSorter: Sorter = (l, r) => l.localeCompare(r) as ThreeWay;
-    const defaultRenamer: Renamer = (s) => s;
-</script>
-
-<script lang="ts">
-    import Base from "../Base.svelte";
-    import Container from "./Container.svelte";
-    import Content from "./Content.svelte";
-    import Controls from "../block/controls/Controls.svelte";
-    import Scrollable from "./Scrollable.svelte";
-    import VerticalPanel from "./VerticalPanel.svelte";
-
-    import Nav from "../navigation/Nav.svelte";
-    import ThemeToggle from "./ThemeToggle.svelte";
-
-    import {
-        initControlInfo,
-        initControlValue,
-        type Controls as ControlInfo
-    } from "../block/context";
-    import { getTheme, initTheme, type Theme } from "../context";
-
-    import { get, type Writable } from "svelte/store";
-    import { onDestroy, type Snippet } from "svelte";
-
-    let {
-        data,
-        current = null,
-        sorter = null,
-        renamer = null,
-        theme = $bindable(),
-        offset = $bindable(250),
-        panel = $bindable("bottom"),
-        title,
-        title_misc,
-        children,
-        onnavigate
-    }: {
-        data: readonly string[];
-        current?: string | null;
-        sorter?: Sorter | null;
-        renamer?: Renamer | null;
-        theme?: Theme;
-        offset?: number;
-        panel?: "bottom" | "right";
-        title: Snippet;
-        title_misc?: Snippet;
-        children?: Snippet,
-        onnavigate?: (e: { detail: string }) => void
-    } = $props();
-
-    let mode: "props" | "events" = $state("props");
-    let panelOffset = $state(4);
-
-    initControlValue();
-    const activeControl = initControlInfo();
-    const parentTheme = getTheme();
-    const dark = initTheme();
-
-    $effect(() => dark.set(theme === undefined ? $parentTheme : "dark" === theme));
-
-    const panelChange = (info: Writable<ControlInfo> | null) => {
-        if (info != null) {
-            const i = get(info);
-            if (4 === panelOffset) {
-                if (i.props.length > 0) {
-                    panelOffset = 250;
-                    mode = "props";
-                } else if (i.events.length > 0) {
-                    panelOffset = 250;
-                    mode = "events";
-                }
-            }
-            return;
-        }
-        panelOffset = 4;
-    };
-
-    onDestroy(activeControl.subscribe(v => panelChange(v)));
-</script>
-
-<!--
-    @component
-    See [documentation](https://mono-doc.vercel.app/3-Components/1-Layout) for more details.
--->
-
-<Base dark={$dark} fill>
-    <div class="fill layout">
-        <div class="top">
-            <div class="title">
-                {@render title()}
-            </div>
-            {#if title_misc}
-                {@render title_misc()}
-            {:else}
-                <ThemeToggle bind:theme />
-            {/if}
-        </div>
-        <Container bind:offset vertical b>
-            {#snippet side_a()}
-                <Scrollable>
-                    <!-- <VerticalPanel> -->
-                        <Nav
-                            info={data}
-                            selected={current ?? ""}
-                            sorter={sorter ?? defaultSorter}
-                            renamer={renamer ?? defaultRenamer}
-                            {onnavigate}
-                        />
-                    <!-- </VerticalPanel> -->
-                </Scrollable>
-            {/snippet}
-            {#snippet side_b()}
-                <Container vertical={"right" === panel} persistent bind:offset={panelOffset}>
-                    {#snippet side_a()}
-                        <Scrollable>
-                            <Content>
-                                {#key current}
-                                    {@render children?.()}
-                                {/key}
-                            </Content>
-                        </Scrollable>
-                    {/snippet}
-                    {#snippet side_b()}
-                        <Scrollable>
-                            <Controls bind:position={panel} bind:mode />
-                        </Scrollable>
-                    {/snippet}
-                </Container>
-            {/snippet}
-        </Container>
-    </div>
-</Base>
-
-<style>
-    .fill {
-        width: 100%;
-        height: 100%;
-    }
-
-    .layout {
-        display: grid;
-        grid-template-columns: 1fr;
-        grid-template-rows: minmax(2.5rem, auto) 1fr;
-    }
-
-    .top {
-        overflow: hidden;
-        font-size: 1rem;
-        display: grid;
-        grid-auto-flow: column;
-        grid-auto-columns: 2.5rem;
-        grid-template-columns: 1fr;
-        align-items: center;
-        padding-left: 0.5rem;
-        padding-right: 0.5rem;
-        border-bottom-width: 1px;
-        border-bottom-style: solid;
-        user-select: none;
-    }
-
-    .title {
-        display: grid;
-        grid-auto-flow: column;
-        align-items: center;
-        justify-content: left;
-        gap: 0.25rem;
-    }
-
-    .layout {
-        color-scheme: var(--i-nil-doc-color-scheme);
-        color: var(--i-nil-doc-color);
-        background-color: var(--i-nil-doc-bg-color);
-        transition:
-            color var(--i-nil-doc-transition-time),
-            background-color var(--i-nil-doc-transition-time);
-    }
-
-    .layout > .top {
-        transition: border-bottom-color var(--i-nil-doc-transition-time);
-        border-bottom-color: var(--i-nil-doc-container-p);
-    }
-</style>

package/src/lib/components/layout/Scrollable.svelte

@@ -1,25 +0,0 @@
-<script lang="ts">
-    import type { Snippet } from "svelte";
-
-    let { children }: { children: Snippet } = $props();
-</script>
-
-<div>
-    {@render children?.()}
-</div>
-
-<style>
-    div {
-        width: 100%;
-        height: 100%;
-        overflow: scroll;
-        /* Firefox */
-        scrollbar-width: none;
-        /* IE and Edge */
-        -ms-overflow-style: none;
-    }
-
-    div::-webkit-scrollbar {
-        display: none;
-    }
-</style>

package/src/lib/components/layout/ThemeToggle.svelte

@@ -1,25 +0,0 @@
-<script lang="ts">
-    import { getTheme, type Theme } from "../context";
-    import Icon from "./icons/Icon.svelte";
-    import ThemeIcon from "./icons/Theme.svelte";
-
-    let {
-        theme = $bindable()
-    }: {
-        theme?: Theme;
-    } = $props();
-
-    const dark = getTheme();
-
-    const toggle = () => {
-        if (undefined !== theme) {
-            theme = $dark ? "light" : "dark";
-        } else {
-            $dark = !$dark;
-        }
-    };
-</script>
-
-<Icon onclick={toggle}>
-    <ThemeIcon dark={undefined === theme ? $dark : "dark" === theme} />
-</Icon>

package/src/lib/components/layout/VerticalPanel.svelte

@@ -1,18 +0,0 @@
-<script lang="ts">
-    import type { Snippet } from "svelte";
-
-    let { children }: { children: Snippet } = $props();
-</script>
-
-<div>
-    {@render children?.()}
-</div>
-
-<style>
-    div {
-        width: 100%;
-        box-sizing: border-box;
-        min-width: min-content;
-        display: inline-block;
-    }
-</style>

package/src/lib/components/layout/action.ts

@@ -1,80 +0,0 @@
-import { get, writable, type Writable } from "svelte/store";
-import type { ActionReturn } from "svelte/action";
-
-type Parameter = {
-    reset: () => number;
-    vertical: boolean;
-    reversed: boolean;
-    dbltap?: () => void;
-    tap?: () => void;
-    moving: Writable<boolean>;
-};
-
-type Return = {
-    position: Writable<number>;
-    draggable: (div: HTMLDivElement, parameter: Parameter) => ActionReturn<Parameter>;
-};
-
-export const createDraggable = (offset: number): Return => {
-    const position = writable(offset);
-
-    const draggable = (div: HTMLDivElement, parameter: Parameter) => {
-        let tm = new Date().getTime();
-
-        let param = parameter;
-
-        position.set(param.reset());
-        let refPage = 0;
-
-        const disengage = () => param.moving.set(false);
-
-        const checkDoubleTap = () => {
-            const tm2 = new Date().getTime();
-            const diff = tm2 - tm;
-            tm = tm2;
-            return diff < 200;
-        };
-
-        const engage = (e: PointerEvent) => {
-            if (checkDoubleTap()) {
-                param.dbltap?.();
-                disengage();
-                return;
-            }
-
-            param.moving.set(true);
-            position.set(param.reset());
-            refPage = param.vertical ? e.pageX : e.pageY;
-            param.tap?.();
-        };
-
-        const move = (e: PointerEvent) => {
-            if (get(param.moving)) {
-                const page = param.vertical ? e.pageX : e.pageY;
-                position.update((v) => v + (page - refPage) * (param.reversed ? -1 : 1));
-                refPage = page;
-            }
-        };
-
-        div.addEventListener("pointerdown", engage);
-        window.addEventListener("pointerup", disengage);
-        window.addEventListener("pointercancel", disengage);
-        window.addEventListener("pointermove", move);
-        return {
-            update: (parameter: Parameter) => {
-                param = parameter;
-            },
-            destroy: () => {
-                div.removeEventListener("pointerdown", engage);
-                window.removeEventListener("pointerup", disengage);
-                window.removeEventListener("pointercancel", disengage);
-                window.removeEventListener("pointermove", move);
-            }
-        };
-    };
-
-    return {
-        position,
-        draggable
-    };
-};

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

@@ -1,32 +0,0 @@
-<script lang="ts">
-    import type { Snippet } from "svelte";
-
-    let {
-        title,
-        onclick,
-        onkeypress,
-        children
-    }: {
-        title?: string;
-        onclick?: (e: MouseEvent) => void
-        onkeypress?: (e: KeyboardEvent) => void
-        children?: Snippet
-    } = $props();
-</script>
-
-<div class="icon" {onclick} {onkeypress} {title} role="none">
-    {@render children?.()}
-</div>
-
-<style>
-    div {
-        width: 2.5rem;
-        height: 2.5rem;
-        cursor: pointer;
-        transition: transform var(--i-nil-doc-transition-time);
-    }
-
-    div:hover {
-        transform: scale(1.5);
-    }
-</style>

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

@@ -1,44 +0,0 @@
-<script lang="ts" module>
-    const action = (p: SVGPathElement, length: number) => {
-        const update = (length: number) => { p.style.strokeDasharray = `${length} 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>