@nil-/doc 1.0.0 → 2.0.0

package/{components → .svelte-kit/__package__/components}/layout/Container.svelte

@@ -1,30 +1,32 @@
-<script>import { writable } from "svelte/store";
-import { tweened } from "svelte/motion";
+<script lang="ts">import { writable } from "svelte/store";
+import { Tween } from "svelte/motion";
 import { createDraggable } from "./action";
-export let vertical = false;
-export let offset = 4;
-export let b = false;
-export let persistent = false;
-let width = null;
-let height = null;
+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);
-$:
-  span = vertical ? width : height;
+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 = tweened(offset, { duration: 50 });
+const off = new Tween(offset, { duration: 50 });
 const min = 4;
 let last = [];
-$:
-  update(min, $position);
-$:
-  $off = offset;
-$:
-  style = !b ? `auto 0.2rem ${$off}px` : `${$off}px 0.2rem auto`;
+$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) {
@@ -36,7 +38,7 @@ const addLast = (v) => {
   }
 };
 const dbltap = () => {
-  if ($off > min) {
+  if (off.current > min) {
     addLast(offset);
     offset = min;
   } else if (last.length > 0) {
@@ -72,8 +74,8 @@ const title = (v, b2) => {
 >
     {#if width != null && height != null}
         <div style:grid-area="A">
-            {#if persistent || check($off, !b, span ?? 0)}
-                <slot name="A" />
+            {#if persistent || check(off.current, !b, span ?? 0)}
+                {@render side_a()}
             {/if}
         </div>
         <div class="divider">
@@ -85,14 +87,14 @@ const title = (v, b2) => {
                     reversed: !b,
                     vertical,
                     dbltap: dbltap,
-                    tap: () => addLast($off),
+                    tap: () => addLast(off.current),
                     moving
                 }}
-            />
+            ></div>
         </div>
         <div style:grid-area="B">
-            {#if persistent || check($off, b, span ?? 0)}
-                <slot name="B" />
+            {#if persistent || check(off.current, b, span ?? 0)}
+                {@render side_b()}
             {/if}
         </div>
     {/if}
@@ -147,7 +149,8 @@ const title = (v, b2) => {
 
     /* colors */
     .divider {
-        transition: border-color var(--i-nil-doc-transition-time),
+        transition:
+            border-color var(--i-nil-doc-transition-time),
             background-color var(--i-nil-doc-transition-time);
         --width: 0.0625rem;
     }

package/.svelte-kit/__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/{components → .svelte-kit/__package__/components}/layout/Content.svelte

@@ -1,5 +1,8 @@
+<script lang="ts">let { children } = $props();
+</script>
+
 <div>
-    <slot />
+    {@render children?.()}
 </div>
 
 <style>

package/.svelte-kit/__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/.svelte-kit/__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/.svelte-kit/__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/{components → .svelte-kit/__package__/components}/layout/Layout.svelte

@@ -1,8 +1,8 @@
-<script context="module">const defaultSorter = (l, r) => l.localeCompare(r);
+<script lang="ts" module>const defaultSorter = (l, r) => l.localeCompare(r);
 const defaultRenamer = (s) => s;
 </script>
 
-<script>import Base from "../Base.svelte";
+<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";
@@ -16,21 +16,27 @@ import {
 } from "../block/context";
 import { getTheme, initTheme } from "../context";
 import { get } from "svelte/store";
-export let data;
-export let current = null;
-export let sorter = null;
-export let renamer = null;
-export let theme = void 0;
-export let offset = 250;
-export let panel = "bottom";
-let mode = "props";
-let panelOffset = 4;
+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();
-$:
-  $dark = theme === void 0 ? $parentTheme : "dark" === theme;
+$effect(() => dark.set(theme === void 0 ? $parentTheme : "dark" === theme));
 const panelChange = (info) => {
   if (info != null) {
     const i = get(info);
@@ -47,8 +53,7 @@ const panelChange = (info) => {
   }
   panelOffset = 4;
 };
-$:
-  panelChange($activeControl);
+onDestroy(activeControl.subscribe((v) => panelChange(v)));
 </script>
 
 <!--
@@ -60,42 +65,46 @@ $:
     <div class="fill layout">
         <div class="top">
             <div class="title">
-                <slot name="title" />
+                {@render title()}
             </div>
-            <slot name="title-misc">
+            {#if title_misc}
+                {@render title_misc()}
+            {:else}
                 <ThemeToggle bind:theme />
-            </slot>
+            {/if}
         </div>
         <Container bind:offset vertical b>
-            <svelte:fragment slot="A">
+            {#snippet side_a()}
                 <Scrollable>
-                    <VerticalPanel>
+                    <!-- <VerticalPanel> -->
                         <Nav
                             info={data}
                             selected={current ?? ""}
                             sorter={sorter ?? defaultSorter}
                             renamer={renamer ?? defaultRenamer}
-                            on:navigate
+                            {onnavigate}
                         />
-                    </VerticalPanel>
+                    <!-- </VerticalPanel> -->
                 </Scrollable>
-            </svelte:fragment>
-            <svelte:fragment slot="B">
+            {/snippet}
+            {#snippet side_b()}
                 <Container vertical={"right" === panel} persistent bind:offset={panelOffset}>
-                    <svelte:fragment slot="A">
+                    {#snippet side_a()}
                         <Scrollable>
                             <Content>
                                 {#key current}
-                                    <slot />
+                                    {@render children?.()}
                                 {/key}
                             </Content>
                         </Scrollable>
-                    </svelte:fragment>
-                    <svelte:fragment slot="B">
-                        <Controls bind:position={panel} bind:mode />
-                    </svelte:fragment>
+                    {/snippet}
+                    {#snippet side_b()}
+                        <Scrollable>
+                            <Controls bind:position={panel} bind:mode />
+                        </Scrollable>
+                    {/snippet}
                 </Container>
-            </svelte:fragment>
+            {/snippet}
         </Container>
     </div>
 </Base>
@@ -139,7 +148,8 @@ $:
         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),
+        transition:
+            color var(--i-nil-doc-transition-time),
             background-color var(--i-nil-doc-transition-time);
     }
 

package/.svelte-kit/__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/{components → .svelte-kit/__package__/components}/layout/Scrollable.svelte

@@ -1,5 +1,8 @@
+<script lang="ts">let { children } = $props();
+</script>
+
 <div>
-    <slot />
+    {@render children?.()}
 </div>
 
 <style>

package/.svelte-kit/__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/{components → .svelte-kit/__package__/components}/layout/ThemeToggle.svelte

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

package/.svelte-kit/__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/{components → .svelte-kit/__package__/components}/layout/VerticalPanel.svelte

@@ -1,5 +1,8 @@
+<script lang="ts">let { children } = $props();
+</script>
+
 <div>
-    <slot />
+    {@render children?.()}
 </div>
 
 <style>

package/.svelte-kit/__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/{components → .svelte-kit/__package__/components}/layout/icons/Icon.svelte

@@ -1,8 +1,13 @@
-<script>export let title = void 0;
+<script lang="ts">let {
+  title,
+  onclick,
+  onkeypress,
+  children
+} = $props();
 </script>
 
-<div class="icon" on:click on:keypress {title} role="none">
-    <slot />
+<div class="icon" {onclick} {onkeypress} {title} role="none">
+    {@render children?.()}
 </div>
 
 <style>

package/.svelte-kit/__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;

package/.svelte-kit/__package__/components/layout/icons/Nil.svelte

@@ -0,0 +1,43 @@
+<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/.svelte-kit/__package__/components/layout/icons/Nil.svelte.d.ts

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

package/{components → .svelte-kit/__package__/components}/layout/icons/Theme.svelte

@@ -1,7 +1,7 @@
-<script context="module">let indexer = 0;
+<script lang="ts" module>let indexer = 0;
 </script>
 
-<script>export let dark = true;
+<script lang="ts">let { dark = true } = $props();
 const index = indexer++;
 </script>
 

package/.svelte-kit/__package__/components/layout/icons/Theme.svelte.d.ts

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

package/{components → .svelte-kit/__package__/components}/navigation/Nav.svelte

@@ -1,4 +1,4 @@
-<script context="module">import { fuzz } from "./utils/fuzz";
+<script lang="ts" module>import { fuzz } from "./utils/fuzz";
 const apply = (paths, init, pre, next, post) => {
   const retval = {};
   for (const path of paths) {
@@ -38,18 +38,21 @@ const populate = (filter, info, renamer) => {
 };
 </script>
 
-<script>import Tree from "./Tree.svelte";
-export let info;
-export let selected;
-export let sorter;
-export let renamer;
-let filter = "";
-let states = apply(
+<script lang="ts">import Tree from "./Tree.svelte";
+let {
+  info,
+  selected,
+  sorter,
+  renamer,
+  onnavigate
+} = $props();
+let filter = $state("");
+let states = $state(apply(
   info,
   () => ({ expanded: false, sub: {} }),
   (t, path) => ({ expanded: t.expanded || selected === path, sub: t.sub }),
   (t) => t.sub
-);
+));
 const update = (selected2) => {
   if (!info.includes(selected2)) {
     return;
@@ -63,8 +66,7 @@ const update = (selected2) => {
     node = node[p].sub;
   }
 };
-$:
-  update(selected);
+$effect(() => update(selected));
 </script>
 
 <div class="nav">
@@ -77,8 +79,8 @@ $:
             {selected}
             {sorter}
             {renamer}
+            {onnavigate}
             bind:states
-            on:navigate
             expand={filter.length > 0}
         />
     </div>

package/.svelte-kit/__package__/components/navigation/Nav.svelte.d.ts

@@ -0,0 +1,13 @@
+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/{components → .svelte-kit/__package__/components}/navigation/Node.svelte

@@ -1,22 +1,22 @@
-<script>import { slide } from "svelte/transition";
+<script lang="ts">import { slide } from "svelte/transition";
 import { sort } from "./utils/sort";
-import { createEventDispatcher } from "svelte";
-export let key;
-export let value;
-export let depth;
-export let selected;
-export let expand;
-export let states;
-export let sorter;
-export let renamer;
-const dispatch = createEventDispatcher();
-$:
-  style = `padding-left: ${0.5 + depth}rem; padding-right: 0.5rem`;
-$:
-  hasChildren = Object.keys(value.sub).length > 0;
-const click = (link) => {
-  if (link != null && selected !== link) {
-    dispatch("navigate", link);
+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;
     }
@@ -29,8 +29,8 @@ const click = (link) => {
 <div class="wrapper">
     <div
         class="header"
-        on:click={() => click(value.url)}
-        on:keypress={null}
+        {onclick}
+        onkeypress={null}
         role="none"
         {style}
         class:selected={selected === value.url}
@@ -44,7 +44,7 @@ const click = (link) => {
     {#if expand || states.expanded}
         <div class="sub" transition:slide>
             {#each sort(value.sub, sorter) as [k, v] (k)}
-                <svelte:self
+                <Node
                     key={k}
                     value={v}
                     depth={depth + 1}
@@ -53,7 +53,7 @@ const click = (link) => {
                     {sorter}
                     {expand}
                     bind:states={states.sub[k]}
-                    on:navigate
+                    {onnavigate}
                 />
             {/each}
         </div>

package/.svelte-kit/__package__/components/navigation/Node.svelte.d.ts

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