@nil-/doc 1.0.0 → 2.0.0

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

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

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

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

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

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

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

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

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

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

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