@nil-/doc 1.0.0 → 2.0.0

package/package/components/layout/Container.svelte

@@ -0,0 +1,189 @@
+<script lang="ts">import { writable } from "svelte/store";
+import { Tween } from "svelte/motion";
+import { createDraggable } from "./action";
+let {
+  vertical = false,
+  offset = $bindable(4),
+  b = false,
+  persistent = false,
+  side_a,
+  side_b
+} = $props();
+let width = $state(null);
+let height = $state(null);
+const { position, draggable } = createDraggable(offset);
+let span = $derived(vertical ? width : height);
+const update = (limit, value) => {
+  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 = [];
+$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) => {
+  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) {
+    offset = last.pop();
+  }
+};
+const check = (v, flag, s) => {
+  if (flag) {
+    return v < s - min;
+  } else {
+    return v > min;
+  }
+};
+const title = (v, b2) => {
+  if (v) {
+    return b2 ? "left" : "right";
+  }
+  return b2 ? "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/package/components/layout/Container.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    vertical?: boolean;
+    offset?: number;
+    b?: boolean;
+    persistent?: boolean;
+    side_a: Snippet;
+    side_b: Snippet;
+};
+declare const Container: import("svelte").Component<$$ComponentProps, {}, "offset">;
+type Container = ReturnType<typeof Container>;
+export default Container;

package/package/components/layout/Content.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">let { children } = $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/package/components/layout/Content.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    children: Snippet;
+};
+declare const Content: import("svelte").Component<$$ComponentProps, {}, "">;
+type Content = ReturnType<typeof Content>;
+export default Content;

package/package/components/layout/DocLayout.svelte

@@ -0,0 +1,28 @@
+<script lang="ts" module></script>
+
+<script lang="ts">import Layout from "./Layout.svelte";
+let {
+  settings,
+  sorter,
+  renamer,
+  title,
+  title_misc,
+  children
+} = $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/package/components/layout/DocLayout.svelte.d.ts

@@ -0,0 +1,24 @@
+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>;
+};
+import type { Renamer, Sorter } from "../navigation/types";
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    settings: Settings;
+    sorter?: Sorter;
+    renamer?: Renamer;
+    title: Snippet;
+    title_misc?: Snippet;
+    children?: Snippet;
+};
+declare const DocLayout: import("svelte").Component<$$ComponentProps, {}, "">;
+type DocLayout = ReturnType<typeof DocLayout>;
+export default DocLayout;

package/package/components/layout/Layout.svelte

@@ -0,0 +1,160 @@
+<script lang="ts" module>const defaultSorter = (l, r) => l.localeCompare(r);
+const defaultRenamer = (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
+} from "../block/context";
+import { getTheme, initTheme } from "../context";
+import { get } from "svelte/store";
+import { onDestroy } from "svelte";
+let {
+  data,
+  current = null,
+  sorter = null,
+  renamer = null,
+  theme = $bindable(),
+  offset = $bindable(250),
+  panel = $bindable("bottom"),
+  title,
+  title_misc,
+  children,
+  onnavigate
+} = $props();
+let mode = $state("props");
+let panelOffset = $state(4);
+initControlValue();
+const activeControl = initControlInfo();
+const parentTheme = getTheme();
+const dark = initTheme();
+$effect(() => dark.set(theme === void 0 ? $parentTheme : "dark" === theme));
+const panelChange = (info) => {
+  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/package/components/layout/Layout.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { Sorter, Renamer } from "../navigation/types";
+import { type Theme } from "../context";
+import { type Snippet } from "svelte";
+type $$ComponentProps = {
+    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;
+};
+/** See [documentation](https://mono-doc.vercel.app/3-Components/1-Layout) for more details. */
+declare const Layout: import("svelte").Component<$$ComponentProps, {}, "offset" | "theme" | "panel">;
+type Layout = ReturnType<typeof Layout>;
+export default Layout;

package/package/components/layout/Scrollable.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">let { children } = $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/package/components/layout/Scrollable.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    children: Snippet;
+};
+declare const Scrollable: import("svelte").Component<$$ComponentProps, {}, "">;
+type Scrollable = ReturnType<typeof Scrollable>;
+export default Scrollable;

package/package/components/layout/ThemeToggle.svelte

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

package/package/components/layout/ThemeToggle.svelte.d.ts

@@ -0,0 +1,7 @@
+import { type Theme } from "../context";
+type $$ComponentProps = {
+    theme?: Theme;
+};
+declare const ThemeToggle: import("svelte").Component<$$ComponentProps, {}, "theme">;
+type ThemeToggle = ReturnType<typeof ThemeToggle>;
+export default ThemeToggle;

package/package/components/layout/VerticalPanel.svelte

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

package/package/components/layout/VerticalPanel.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    children: Snippet;
+};
+declare const VerticalPanel: import("svelte").Component<$$ComponentProps, {}, "">;
+type VerticalPanel = ReturnType<typeof VerticalPanel>;
+export default VerticalPanel;

package/package/components/layout/action.d.ts

@@ -0,0 +1,16 @@
+import { 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 declare const createDraggable: (offset: number) => Return;
+export {};

package/package/components/layout/action.js

@@ -0,0 +1,54 @@
+import { get, writable } from "svelte/store";
+export const createDraggable = (offset) => {
+    const position = writable(offset);
+    const draggable = (div, 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) => {
+            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) => {
+            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) => {
+                param = parameter;
+            },
+            destroy: () => {
+                div.removeEventListener("pointerdown", engage);
+                window.removeEventListener("pointerup", disengage);
+                window.removeEventListener("pointercancel", disengage);
+                window.removeEventListener("pointermove", move);
+            }
+        };
+    };
+    return {
+        position,
+        draggable
+    };
+};

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

@@ -0,0 +1,24 @@
+<script lang="ts">let {
+  title,
+  onclick,
+  onkeypress,
+  children
+} = $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/package/components/layout/icons/Icon.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    title?: string;
+    onclick?: (e: MouseEvent) => void;
+    onkeypress?: (e: KeyboardEvent) => void;
+    children?: Snippet;
+};
+declare const Icon: import("svelte").Component<$$ComponentProps, {}, "">;
+type Icon = ReturnType<typeof Icon>;
+export default Icon;