@nil-/doc 2.0.0 → 2.0.1

package/package/components/layout/Container.svelte

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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