@nil-/doc 1.0.0 → 2.0.0

package/.eslintrc.cjs

@@ -0,0 +1 @@
+module.exports = require("../../.eslintrc.cjs");

package/{components → .svelte-kit/__package__/components}/Base.svelte

@@ -1,9 +1,12 @@
-<script>export let dark = false;
-export let fill = false;
+<script lang="ts">let {
+  dark = false,
+  fill = false,
+  children
+} = $props();
 </script>
 
 <div class:dark class:fill>
-    <slot />
+    {@render children?.()}
 </div>
 
 <!-- prettier-ignore -->

package/.svelte-kit/__package__/components/Base.svelte.d.ts

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

package/{components → .svelte-kit/__package__/components}/block/Block.svelte

@@ -1,4 +1,4 @@
-<script>import { initParams, initDefaults, initControls, initOrientation } from "./context";
+<script lang="ts">import { initParams, initDefaults, initControls, initOrientation } from "./context";
 import Base from "../Base.svelte";
 import { getTheme } from "../context";
 initParams();
@@ -6,6 +6,7 @@ initDefaults();
 initControls();
 const columns = initOrientation();
 const dark = getTheme();
+let { children } = $props();
 </script>
 
 <!--
@@ -18,7 +19,7 @@ const dark = getTheme();
 <Base dark={$dark}>
     <div class="outer">
         <div class="scrollable block" class:columns={$columns}>
-            <slot />
+            {@render children?.()}
         </div>
     </div>
 </Base>
@@ -66,7 +67,8 @@ const dark = getTheme();
         background-color: var(--i-nil-doc-block-bg-color);
         box-shadow: 0 0 0.5rem 0 var(--i-nil-doc-block-outline-color);
         outline: 1px solid var(--i-nil-doc-block-outline-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/block/Block.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    children: Snippet;
+};
+/**
+ * 3-Block
+ * See [documentation](https://mono-doc.vercel.app/3-Components/2-Block) for more details.
+ */
+declare const Block: import("svelte").Component<$$ComponentProps, {}, "">;
+type Block = ReturnType<typeof Block>;
+export default Block;

package/{components → .svelte-kit/__package__/components}/block/Controls.svelte

@@ -1,9 +1,10 @@
-<script>import { getControls } from "./context";
-export let props = [];
-export let events = [];
+<script lang="ts">import { getControls } from "./context";
+let {
+  props = [],
+  events = []
+} = $props();
 const controls = getControls();
-$:
-  $controls = { props, events };
+$effect(() => controls.set({ props, events }));
 </script>
 
 <!--

package/.svelte-kit/__package__/components/block/Controls.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { SpecialProp, Prop, Event } from "./controls/types";
+type $$ComponentProps = {
+    props?: (Prop | SpecialProp)[];
+    events?: Event[];
+};
+/** See [documentation](https://mono-doc.vercel.app/3-Components/3-Block/2-Controls) for more details. */
+declare const Controls: import("svelte").Component<$$ComponentProps, {}, "">;
+type Controls = ReturnType<typeof Controls>;
+export default Controls;

package/{components → .svelte-kit/__package__/components}/block/Instance.svelte

@@ -1,26 +1,37 @@
-<script>import { beforeUpdate, onDestroy } from "svelte";
+<script lang="ts" module></script>
+
+<script lang="ts" generics="Args">import { onDestroy } from "svelte";
 import { writable } from "svelte/store";
 import { resolve } from "./utils";
 import { getControls, getControlInfo, getControlValue } from "./context";
 const controls = getControls();
 const cc = getControlInfo();
 const vv = getControlValue();
-export let defaults = void 0;
-export let noreset = false;
-let key = false;
-beforeUpdate(() => key = !key);
-const values = writable({ props: {}, events: [] });
-const updateBound = (d) => $values.props = resolve(d ?? {}, {});
-$:
+let {
+  defaults,
+  noreset = false,
+  children
+} = $props();
+let key = $state(false);
+$effect(() => {
+  key;
+  return () => {
+    key = !key;
+  };
+});
+const s_values = writable({ props: {}, events: [] });
+const updateBound = (d) => $s_values.props = resolve(d ?? {}, {});
+$effect(() => {
   updateBound(defaults);
+});
 const focus = () => {
-  if ($vv !== values) {
+  if ($vv !== s_values) {
     $cc = controls;
-    $vv = values;
+    $vv = s_values;
   }
 };
 const unfocus = () => {
-  if ($vv === values) {
+  if ($vv === s_values) {
     $cc = null;
     $vv = null;
   }
@@ -39,30 +50,32 @@ const populate = (ext) => {
   };
   if (null != ext) {
     for (const name of ext) {
-      obj[name] = (ev) => {
-        const detail = stringify(ev.detail);
-        if ($values.events.length > 0) {
-          const last = $values.events[0];
+      obj[name] = (param) => {
+        const detail = stringify(param);
+        if ($s_values.events.length > 0) {
+          const last = $s_values.events[0];
           if (last.name === name && last.detail === detail && last.count < 99) {
             last.count += 1;
-            $values.events = $values.events;
+            $s_values.events = $s_values.events;
             return;
           }
         }
-        $values.events.unshift({ name, detail, count: 1 });
-        if ($values.events.length > 50) {
-          $values.events.pop();
+        $s_values.events.unshift({ name, detail, count: 1 });
+        if ($s_values.events.length > 50) {
+          $s_values.events.pop();
         }
-        $values.events = $values.events;
+        $s_values.events = $s_values.events;
       };
     }
   }
   return obj;
 };
-$:
-  props = resolve(defaults ?? {}, $values.props);
-$:
-  events = populate($controls.events);
+let values = $state(resolve(defaults ?? {}, $s_values.props));
+let events = $state(populate($controls.events));
+const unsubs = [];
+unsubs.push(s_values.subscribe((v) => values = resolve(defaults ?? {}, v.props)));
+unsubs.push(controls.subscribe((v) => events = populate(v.events)));
+onDestroy(() => unsubs.forEach((v) => v()));
 </script>
 
 <!--
@@ -72,19 +85,21 @@ $:
 
 <div
     class="instance"
-    class:selected={$vv === values}
+    class:selected={$vv === s_values}
     class:controls={$controls.events.length > 0 || $controls.props.length > 0}
     role="none"
-    on:click={focus}
-    on:keypress={null}
+    onclick={focus}
+    onkeypress={null}
 >
     <div class="content">
-        {#if noreset}
-            <slot {props} {events} {key} />
-        {:else}
-            {#key key}
-                <slot {props} {events} {key} />
-            {/key}
+        {#if children}
+            {#if noreset}
+                {@render children({ values, events, key })}
+            {:else}
+                {#key key}
+                    {@render children({ values, events, key })}
+                {/key}
+            {/if}
         {/if}
     </div>
 </div>

package/.svelte-kit/__package__/components/block/Instance.svelte.d.ts

@@ -0,0 +1,27 @@
+import { type Snippet } from "svelte";
+declare class __sveltets_Render<Args> {
+    props(): {
+        defaults?: Args | undefined;
+        noreset?: boolean;
+        children?: Snippet<[{
+            values: Args;
+            events: Record<string, (ev?: any) => void>;
+            key: boolean;
+        }]> | undefined;
+    };
+    events(): {};
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Args>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Args>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Args>['props']>, ReturnType<__sveltets_Render<Args>['events']>, ReturnType<__sveltets_Render<Args>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Args>['bindings']>;
+    } & ReturnType<__sveltets_Render<Args>['exports']>;
+    <Args>(internal: unknown, props: ReturnType<__sveltets_Render<Args>['props']> & {}): ReturnType<__sveltets_Render<Args>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/** See [documentation](https://mono-doc.vercel.app/3-Components/3-Block/1-Content/1-Instance) for more details. */
+declare const Instance: $$IsomorphicComponent;
+type Instance<Args> = InstanceType<typeof Instance<Args>>;
+export default Instance;

package/.svelte-kit/__package__/components/block/Params.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">import { getParams } from "./context";
+import { resolve } from "./utils";
+import { get } from "svelte/store";
+let {
+  tag,
+  props = {}
+} = $props();
+const params = getParams();
+const id = get(params).length;
+params.update((p) => {
+  p.push({
+    id,
+    tag: `${id}`,
+    values: {}
+  });
+  return p;
+});
+$effect(() => params.update((p) => {
+  p[id].tag = tag ?? `${id}`;
+  return p;
+}));
+$effect(() => params.update((p) => {
+  p[id].values = resolve(props, {});
+  return p;
+}));
+</script>
+
+<!--
+    @component
+    See [documentation](https://mono-doc.vercel.app/3-Components/3-Block/1-Content/2-Template/1-Params) for more details.
+-->

package/.svelte-kit/__package__/components/block/Params.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { ValueType } from "./types";
+type $$ComponentProps = {
+    tag?: string | undefined;
+    props?: Record<string, ValueType>;
+};
+/** See [documentation](https://mono-doc.vercel.app/3-Components/3-Block/1-Content/2-Template/1-Params) for more details. */
+declare const Params: import("svelte").Component<$$ComponentProps, {}, "">;
+type Params = ReturnType<typeof Params>;
+export default Params;

package/.svelte-kit/__package__/components/block/Template.svelte

@@ -0,0 +1,52 @@
+<script lang="ts" module></script>
+
+<script lang="ts" generics="Args">import { getDefaults, getParams, getOrientation } from "./context";
+import { resolve } from "./utils";
+import Instance from "./Instance.svelte";
+import {} from "svelte";
+const params = getParams();
+const defaultsStore = getDefaults();
+const orientation = getOrientation();
+let {
+  defaults,
+  noreset = false,
+  columns = false,
+  children: cc
+} = $props();
+$effect(() => {
+  defaultsStore?.set(defaults ?? {});
+});
+$effect(() => {
+  orientation.set(columns);
+});
+let key = $state(false);
+$effect(() => {
+  key;
+  return () => {
+    key = !key;
+  };
+});
+const resolveArgs = resolve;
+</script>
+
+<!--
+    @component
+    See [documentation](https://mono-doc.vercel.app/3-Components/3-Block/1-Content/2-Template) for more details.
+-->
+
+{#each $params as param (param.id)}
+    <Instance
+        defaults={resolveArgs($defaultsStore, param.values)}
+        {noreset}
+    >
+        {#snippet children({ values, events, key })}
+            {@render cc?.({
+                id: param.id,
+                tag: param.tag,
+                values: values,
+                events: events,
+                key: key
+            })}
+        {/snippet}
+    </Instance>
+{/each}

package/.svelte-kit/__package__/components/block/Template.svelte.d.ts

@@ -0,0 +1,30 @@
+import { type Snippet } from "svelte";
+declare class __sveltets_Render<Args> {
+    props(): {
+        defaults?: Args | undefined;
+        noreset?: boolean;
+        columns?: boolean;
+        children?: Snippet<[{
+            id: number;
+            tag: string;
+            values: Args;
+            events: Record<string, (ev?: any) => void>;
+            key: boolean;
+        }]> | undefined;
+    };
+    events(): {};
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Args>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Args>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Args>['props']>, ReturnType<__sveltets_Render<Args>['events']>, ReturnType<__sveltets_Render<Args>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Args>['bindings']>;
+    } & ReturnType<__sveltets_Render<Args>['exports']>;
+    <Args>(internal: unknown, props: ReturnType<__sveltets_Render<Args>['props']> & {}): ReturnType<__sveltets_Render<Args>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/** See [documentation](https://mono-doc.vercel.app/3-Components/3-Block/1-Content/2-Template) for more details. */
+declare const Template: $$IsomorphicComponent;
+type Template<Args> = InstanceType<typeof Template<Args>>;
+export default Template;

package/{components → .svelte-kit/__package__/components}/block/controls/Controls.svelte

@@ -1,18 +1,22 @@
-<script>import Styler from "./Styler.svelte";
+<script lang="ts">import Styler from "./Styler.svelte";
 import Props from "./props/Props.svelte";
 import Events from "./events/Events.svelte";
 import { getControlInfo, getControlValue } from "../context";
 import Button from "../icons/Button.svelte";
 import ControlView from "../icons/ControlView.svelte";
 import Position from "../icons/Position.svelte";
+import { onDestroy } from "svelte";
 const controls = getControlInfo();
 const values = getControlValue();
-$:
-  cc = $controls;
-$:
-  vv = $values;
-export let mode = "props";
-export let position = "bottom";
+let cc = $state($controls);
+let vv = $state($values);
+const unsubs = [];
+unsubs.push(controls.subscribe((v) => cc = v));
+unsubs.push(values.subscribe((v) => vv = v));
+let {
+  mode = $bindable("props"),
+  position = $bindable("bottom")
+} = $props();
 const cyclePosition = () => {
   switch (position) {
     case "bottom":
@@ -33,15 +37,16 @@ const cycleMode = () => {
       break;
   }
 };
+onDestroy(() => unsubs.forEach((v) => v()));
 </script>
 
 <Styler type={mode}>
     <div class="header">
         <div class="buttons">
-            <Button scale on:click={cyclePosition} title={position}>
+            <Button scale onclick={cyclePosition} title={position}>
                 <Position {position} />
             </Button>
-            <Button scale on:click={cycleMode} title={mode}>
+            <Button scale onclick={cycleMode} title={mode}>
                 <ControlView {mode} />
             </Button>
         </div>
@@ -56,7 +61,7 @@ const cycleMode = () => {
     </div>
     {#key $values && $controls}
         {#if cc != null && $cc != null && vv != null && $vv != null}
-            <Props infos={$cc.props} visible={"props" === mode} bind:values={$vv.props} />
+            <Props values={vv} infos={$cc.props} visible={"props" === mode} />
             <Events events={$vv.events} visible={"events" === mode} />
         {/if}
     {/key}

package/.svelte-kit/__package__/components/block/controls/Controls.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    mode: "props" | "events";
+    position: "bottom" | "right";
+};
+declare const Controls: import("svelte").Component<$$ComponentProps, {}, "position" | "mode">;
+type Controls = ReturnType<typeof Controls>;
+export default Controls;

package/{components → .svelte-kit/__package__/components}/block/controls/Styler.svelte

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

package/.svelte-kit/__package__/components/block/controls/Styler.svelte.d.ts

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

package/{components → .svelte-kit/__package__/components}/block/controls/events/Events.svelte

@@ -1,5 +1,7 @@
-<script>export let visible;
-export let events = [];
+<script lang="ts">let {
+  visible,
+  events = []
+} = $props();
 </script>
 
 {#if visible}

package/.svelte-kit/__package__/components/block/controls/events/Events.svelte.d.ts

@@ -0,0 +1,11 @@
+type $$ComponentProps = {
+    visible: boolean;
+    events?: {
+        name: string;
+        detail: string;
+        count: number;
+    }[];
+};
+declare const Events: import("svelte").Component<$$ComponentProps, {}, "">;
+type Events = ReturnType<typeof Events>;
+export default Events;

package/.svelte-kit/__package__/components/block/controls/props/Button.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">import { getClick, getName } from "./misc/utils";
+let {
+  info,
+  visible = false
+} = $props();
+let click = $derived(getClick(info)());
+</script>
+
+{#if visible}
+    <div><button onclick={click}>{getName(info)}</button></div>
+{/if}
+
+<style>
+    button {
+        grid-column: 1 / 4;
+        box-sizing: border-box;
+        margin: 0.15rem 0.3rem;
+    }
+</style>

package/.svelte-kit/__package__/components/block/controls/props/Button.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Unionized, PropType } from "../types";
+type $$ComponentProps = {
+    info: Unionized<PropType<"button">>;
+    visible?: boolean;
+};
+declare const Button: import("svelte").Component<$$ComponentProps, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/{components → .svelte-kit/__package__/components}/block/controls/props/Color.svelte

@@ -1,4 +1,4 @@
-<script context="module">const colorSetter = (format, color) => {
+<script lang="ts" module>const colorSetter = (format, color) => {
   switch (format) {
     case "hex":
       return color.hex.substring(0, 7);
@@ -17,17 +17,19 @@
 };
 </script>
 
-<script>import { getName, getFormat } from "./misc/utils";
+<script lang="ts">import { getName, getFormat } from "./misc/utils";
 import { defaulter } from "./misc/defaulter";
 import NameHeader from "./misc/Name.svelte";
 import Toggle from "./misc/Toggle.svelte";
-export let value;
-export let info;
-export let depth;
-export let disabled = false;
-export let visible = false;
-let ivalue = value ?? defaulter(info);
-let enabled = value !== void 0;
+let {
+  value = $bindable(),
+  info,
+  depth,
+  disabled = false,
+  visible = false
+} = $props();
+let ivalue = $state(value ?? defaulter(info));
+let enabled = $state(value !== void 0);
 const action = (d, { format, P }) => {
   d.style.borderColor = ivalue;
   const picker = new P({
@@ -52,8 +54,10 @@ const action = (d, { format, P }) => {
     destroy: () => picker.destroy()
   };
 };
-$:
-  value = enabled && !disabled ? ivalue : void 0;
+const set_value = (v) => {
+  value = v;
+};
+$effect(() => set_value(enabled && !disabled ? ivalue : void 0));
 </script>
 
 {#if visible}
@@ -81,7 +85,6 @@ $:
 
 <style>
     button {
-        position: absolute;
         font-size: 0.7rem;
         border-top-width: 1px;
         border-bottom-width: 1px;

package/.svelte-kit/__package__/components/block/controls/props/Color.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Unionized, PropType } from "../types";
+type $$ComponentProps = {
+    value: string | undefined;
+    info: Unionized<PropType<"color">>;
+    depth: number;
+    disabled?: boolean;
+    visible?: boolean;
+};
+declare const Color: import("svelte").Component<$$ComponentProps, {}, "value">;
+type Color = ReturnType<typeof Color>;
+export default Color;

package/{components → .svelte-kit/__package__/components}/block/controls/props/Component.svelte

@@ -1,22 +1,24 @@
-<script>import Text from "./Text.svelte";
+<script lang="ts">import Text from "./Text.svelte";
 import Number from "./Number.svelte";
 import Range from "./Range.svelte";
 import Toggle from "./Toggle.svelte";
 import Select from "./Select.svelte";
 import Tuple from "./Tuple.svelte";
-import Object from "./Object.svelte";
+import Table from "./Table.svelte";
 import Color from "./Color.svelte";
 import Button from "./Button.svelte";
-export let value;
-export let info;
-export let depth;
-export let disabled = false;
-export let visible = false;
+let {
+  value = $bindable(),
+  info,
+  depth,
+  disabled = false,
+  visible = false
+} = $props();
 </script>
 
 {#if info instanceof Array}
-    {#if "object" === info[1]}
-        <Object {info} bind:value {depth} {disabled} {visible} />
+    {#if "table" === info[1]}
+        <Table {info} bind:value {depth} {disabled} {visible} />
     {:else if "tuple" === info[1]}
         <Tuple {info} bind:value {depth} {disabled} {visible} />
     {:else if "text" === info[1]}
@@ -34,8 +36,8 @@ export let visible = false;
     {:else if "button" === info[1]}
         <Button {info} {visible} />
     {/if}
-{:else if "object" === info.type}
-    <Object {info} bind:value {depth} {disabled} {visible} />
+{:else if "table" === info.type}
+    <Table {info} bind:value {depth} {disabled} {visible} />
 {:else if "tuple" === info.type}
     <Tuple {info} bind:value {depth} {disabled} {visible} />
 {:else if "text" === info.type}

package/.svelte-kit/__package__/components/block/controls/props/Component.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { SpecialProp, Prop } from "../types";
+type $$ComponentProps = {
+    value: any;
+    info: Prop | SpecialProp;
+    depth: number;
+    disabled?: boolean;
+    visible?: boolean;
+};
+declare const Component: import("svelte").Component<$$ComponentProps, {}, "value">;
+type Component = ReturnType<typeof Component>;
+export default Component;