@nil-/doc 2.0.0 → 2.0.2

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;

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

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

package/package/components/layout/icons/Nil.svelte.d.ts

@@ -1,3 +0,0 @@
-declare const Nil: import("svelte").Component<Record<string, never>, {}, "">;
-type Nil = ReturnType<typeof Nil>;
-export default Nil;

package/package/components/layout/icons/Theme.svelte

@@ -1,63 +0,0 @@
-<script lang="ts" module>let indexer = 0;
-</script>
-
-<script lang="ts">let { dark = true } = $props();
-const index = indexer++;
-</script>
-
-<svg viewBox="-25 -25 50 50" style:transform={dark ? "rotate(40deg)" : "rotate(180deg)"}>
-    <mask id={`nil_doc_theme_icon_${index}`}>
-        <rect x="-25" y="-25" fill="white" />
-        <circle r="11" cy={dark ? -8 : -24} fill="black" stroke="black" />
-    </mask>
-    <circle r={dark ? 10 : 5} mask={`url(#nil_doc_theme_icon_${index})`} />
-    <g opacity={dark ? 0 : 1}>
-        <g>
-            <line x1="0" y1="9" x2="0" y2="11" />
-            <line x1="9" y1="0" x2="11" y2="0" />
-            <line x1="0" y1="-11" x2="0" y2="-9" />
-            <line x1="-11" y1="0" x2="-9" y2="0" />
-        </g>
-        <g transform="rotate(45)">
-            <line x1="0" y1="9" x2="0" y2="11" />
-            <line x1="9" y1="0" x2="11" y2="0" />
-            <line x1="0" y1="-11" x2="0" y2="-9" />
-            <line x1="-11" y1="0" x2="-9" y2="0" />
-        </g>
-    </g>
-</svg>
-
-<style>
-    svg {
-        fill: currentColor;
-        stroke: currentColor;
-    }
-
-    svg,
-    rect {
-        width: 100%;
-        height: 100%;
-    }
-
-    line {
-        stroke-width: 2;
-        stroke-linecap: round;
-        stroke-linejoin: round;
-    }
-
-    svg {
-        transition: transform var(--i-nil-doc-transition-time);
-    }
-
-    svg > g {
-        transition: opacity var(--i-nil-doc-transition-time);
-    }
-
-    svg > mask > circle {
-        transition: cy var(--i-nil-doc-transition-time);
-    }
-
-    svg > circle {
-        transition: r var(--i-nil-doc-transition-time);
-    }
-</style>

package/package/components/layout/icons/Theme.svelte.d.ts

@@ -1,6 +0,0 @@
-type $$ComponentProps = {
-    dark?: boolean;
-};
-declare const Theme: import("svelte").Component<$$ComponentProps, {}, "">;
-type Theme = ReturnType<typeof Theme>;
-export default Theme;

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

@@ -1,13 +0,0 @@
-import type { Sorter, Renamer } from "./types";
-type $$ComponentProps = {
-    info: readonly string[];
-    selected: string;
-    sorter: Sorter;
-    renamer: Renamer;
-    onnavigate?: (e: {
-        detail: string;
-    }) => void;
-};
-declare const Nav: import("svelte").Component<$$ComponentProps, {}, "">;
-type Nav = ReturnType<typeof Nav>;
-export default Nav;

package/package/components/navigation/Node.svelte

@@ -1,113 +0,0 @@
-<script lang="ts">import { slide } from "svelte/transition";
-import { sort } from "./utils/sort";
-import Node from "./Node.svelte";
-let {
-  key,
-  value,
-  depth,
-  selected,
-  expand,
-  states = $bindable(),
-  sorter,
-  renamer,
-  onnavigate
-} = $props();
-let style = $derived(`padding-left: ${0.5 + depth}rem; padding-right: 0.5rem`);
-let hasChildren = $derived(Object.keys(value.sub).length > 0);
-const onclick = () => {
-  if (value.url != null && selected !== value.url) {
-    onnavigate?.({ detail: value.url });
-    if (hasChildren && !states.expanded) {
-      states.expanded = true;
-    }
-  } else if (hasChildren) {
-    states.expanded = !states.expanded;
-  }
-};
-</script>
-
-<div class="wrapper">
-    <div
-        class="header"
-        {onclick}
-        onkeypress={null}
-        role="none"
-        {style}
-        class:selected={selected === value.url}
-        class:paged={value.url != null}
-    >
-        <div class="icon" class:expanded={hasChildren && (expand || states.expanded)}>
-            <div>{Object.keys(value.sub).length > 0 ? ">" : "-"}</div>
-        </div>
-        <span>{renamer(key)}</span>
-    </div>
-    {#if expand || states.expanded}
-        <div class="sub" transition:slide>
-            {#each sort(value.sub, sorter) as [k, v] (k)}
-                <Node
-                    key={k}
-                    value={v}
-                    depth={depth + 1}
-                    {selected}
-                    {renamer}
-                    {sorter}
-                    {expand}
-                    bind:states={states.sub[k]}
-                    {onnavigate}
-                />
-            {/each}
-        </div>
-    {/if}
-</div>
-
-<style>
-    .wrapper {
-        user-select: none;
-    }
-
-    .wrapper,
-    .sub,
-    .icon {
-        display: flex;
-        flex-direction: column;
-    }
-
-    .header {
-        height: 1.75rem;
-        display: grid;
-        grid-template-columns: 1rem 1fr;
-        align-items: center;
-        cursor: pointer;
-        gap: 0.25rem;
-        white-space: nowrap;
-        padding-right: 0.5rem;
-    }
-
-    .header:hover {
-        background-color: var(--i-nil-doc-nav-hovered);
-    }
-
-    .header.paged:hover {
-        background-color: var(--i-nil-doc-nav-page-hovered);
-    }
-
-    .header.selected,
-    .header.selected:hover {
-        background-color: var(--i-nil-doc-nav-selected) !important;
-    }
-
-    .icon {
-        justify-content: center;
-        height: 1rem;
-        width: 1rem;
-        transition: transform var(--i-nil-doc-transition-time);
-    }
-
-    .icon.expanded {
-        transform: rotate(90deg);
-    }
-
-    .icon > div {
-        margin: auto;
-    }
-</style>

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

@@ -1,18 +0,0 @@
-import type { Tree, States, Sorter, Renamer } from "./types";
-import Node from "./Node.svelte";
-type $$ComponentProps = {
-    key: string;
-    value: Tree;
-    depth: number;
-    selected: string;
-    expand: boolean;
-    states: States;
-    sorter: Sorter;
-    renamer: Renamer;
-    onnavigate?: (v: {
-        detail?: string;
-    }) => void;
-};
-declare const Node: import("svelte").Component<$$ComponentProps, {}, "states">;
-type Node = ReturnType<typeof Node>;
-export default Node;

package/package/components/navigation/Tree.svelte

@@ -1,26 +0,0 @@
-<script lang="ts">import Node from "./Node.svelte";
-import { sort } from "./utils/sort";
-let {
-  tree,
-  states = $bindable(),
-  sorter,
-  renamer,
-  expand,
-  selected,
-  onnavigate
-} = $props();
-</script>
-
-{#each sort(tree, sorter) as [key, value] (key)}
-    <Node
-        {key}
-        {value}
-        depth={0}
-        {selected}
-        {sorter}
-        {renamer}
-        {expand}
-        bind:states={states[key]}
-        {onnavigate}
-    />
-{/each}

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

@@ -1,15 +0,0 @@
-import type { Tree, States, Sorter, Renamer } from "./types";
-type $$ComponentProps = {
-    tree: Record<string, Tree>;
-    states: Record<string, States>;
-    sorter: Sorter;
-    renamer: Renamer;
-    expand: boolean;
-    selected: string;
-    onnavigate?: (e: {
-        detail?: string;
-    }) => void;
-};
-declare const Tree: import("svelte").Component<$$ComponentProps, {}, "states">;
-type Tree = ReturnType<typeof Tree>;
-export default Tree;