@nil-/doc 1.0.0 → 2.0.1

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/components/Base.svelte.d.ts

@@ -1,19 +1,9 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        dark?: boolean | undefined;
-        fill?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    dark?: boolean;
+    fill?: boolean;
+    children?: Snippet;
 };
-export type BaseProps = typeof __propDef.props;
-export type BaseEvents = typeof __propDef.events;
-export type BaseSlots = typeof __propDef.slots;
-export default class Base extends SvelteComponentTyped<BaseProps, BaseEvents, BaseSlots> {
-}
-export {};
+declare const Base: import("svelte").Component<$$ComponentProps, {}, "">;
+type Base = ReturnType<typeof Base>;
+export default Base;

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/components/block/Block.svelte.d.ts

@@ -1,20 +1,11 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    children: Snippet;
 };
-export type BlockProps = typeof __propDef.props;
-export type BlockEvents = typeof __propDef.events;
-export type BlockSlots = typeof __propDef.slots;
 /**
  * 3-Block
  * See [documentation](https://mono-doc.vercel.app/3-Components/2-Block) for more details.
  */
-export default class Block extends SvelteComponentTyped<BlockProps, BlockEvents, BlockSlots> {
-}
-export {};
+declare const Block: import("svelte").Component<$$ComponentProps, {}, "">;
+type Block = ReturnType<typeof Block>;
+export default Block;

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/components/block/Controls.svelte.d.ts

@@ -1,19 +1,9 @@
-import { SvelteComponentTyped } from "svelte";
-import type { SpecialProp, Prop } from "./controls/types";
-declare const __propDef: {
-    props: {
-        props?: (Prop | SpecialProp)[] | undefined;
-        events?: string[] | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
+import type { SpecialProp, Prop, Event } from "./controls/types";
+type $$ComponentProps = {
+    props?: (Prop | SpecialProp)[];
+    events?: Event[];
 };
-export type ControlsProps = typeof __propDef.props;
-export type ControlsEvents = typeof __propDef.events;
-export type ControlsSlots = typeof __propDef.slots;
 /** See [documentation](https://mono-doc.vercel.app/3-Components/3-Block/2-Controls) for more details. */
-export default class Controls extends SvelteComponentTyped<ControlsProps, ControlsEvents, ControlsSlots> {
-}
-export {};
+declare const Controls: import("svelte").Component<$$ComponentProps, {}, "">;
+type Controls = ReturnType<typeof Controls>;
+export default Controls;

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/components/block/Instance.svelte.d.ts

@@ -1,24 +1,27 @@
-import { SvelteComponentTyped } from "svelte";
-declare class __sveltets_Render<PropArgs> {
+import { type Snippet } from "svelte";
+declare class __sveltets_Render<Args> {
     props(): {
-        defaults?: PropArgs | undefined;
-        noreset?: boolean | undefined;
-    };
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots(): {
-        default: {
-            props: PropArgs;
-            events: Record<string, (ev: CustomEvent<unknown>) => void>;
+        defaults?: Args | undefined;
+        noreset?: boolean;
+        children?: Snippet<[{
+            values: Args;
+            events: Record<string, (ev?: any) => void>;
             key: boolean;
-        };
+        }]> | undefined;
     };
+    events(): {};
+    slots(): {};
+    bindings(): "";
+    exports(): {};
 }
-export type InstanceProps<PropArgs> = ReturnType<__sveltets_Render<PropArgs>['props']>;
-export type InstanceEvents<PropArgs> = ReturnType<__sveltets_Render<PropArgs>['events']>;
-export type InstanceSlots<PropArgs> = ReturnType<__sveltets_Render<PropArgs>['slots']>;
-/** See [documentation](https://mono-doc.vercel.app/3-Components/3-Block/1-Content/1-Instance) for more details. */
-export default class Instance<PropArgs> extends SvelteComponentTyped<InstanceProps<PropArgs>, InstanceEvents<PropArgs>, InstanceSlots<PropArgs>> {
+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']>;
 }
-export {};
+/** 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/components/block/Params.svelte

@@ -1,18 +1,28 @@
-<script>import { getParams } from "./context";
+<script lang="ts">import { getParams } from "./context";
 import { resolve } from "./utils";
-export let tag = void 0;
-export let props = {};
+import { get } from "svelte/store";
+let {
+  tag,
+  props = {}
+} = $props();
 const params = getParams();
-const id = $params.length;
-$params.push({
-  id,
-  tag: `${id}`,
-  values: {}
+const id = get(params).length;
+params.update((p) => {
+  p.push({
+    id,
+    tag: `${id}`,
+    values: {}
+  });
+  return p;
 });
-$:
-  $params[id].tag = tag ?? `${id}`;
-$:
-  $params[id].values = resolve(props, {});
+$effect(() => params.update((p) => {
+  p[id].tag = tag ?? `${id}`;
+  return p;
+}));
+$effect(() => params.update((p) => {
+  p[id].values = resolve(props, {});
+  return p;
+}));
 </script>
 
 <!--

package/components/block/Params.svelte.d.ts

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

package/components/block/Template.svelte

@@ -1,19 +1,31 @@
-<script>import { beforeUpdate } from "svelte";
-import { getDefaults, getParams, getOrientation } from "./context";
+<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();
-export let defaults = void 0;
-export let noreset = false;
-export let columns = false;
-$:
-  $defaultsStore = defaults ?? {};
-$:
-  $orientation = columns;
-let key = false;
-beforeUpdate(() => key = !key);
+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>
 
@@ -26,10 +38,15 @@ const resolveArgs = resolve;
     <Instance
         defaults={resolveArgs($defaultsStore, param.values)}
         {noreset}
-        let:key
-        let:props
-        let:events
     >
-        <slot id={param.id} tag={param.tag} {props} {events} {key} />
+        {#snippet children({ values, events, key })}
+            {@render cc?.({
+                id: param.id,
+                tag: param.tag,
+                values: values,
+                events: events,
+                key: key
+            })}
+        {/snippet}
     </Instance>
 {/each}

package/components/block/Template.svelte.d.ts

@@ -1,27 +1,30 @@
-import { SvelteComponentTyped } from "svelte";
+import { type Snippet } from "svelte";
 declare class __sveltets_Render<Args> {
     props(): {
         defaults?: Args | undefined;
-        noreset?: boolean | undefined;
-        columns?: boolean | undefined;
-    };
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots(): {
-        default: {
+        noreset?: boolean;
+        columns?: boolean;
+        children?: Snippet<[{
             id: number;
             tag: string;
-            props: unknown;
-            events: Record<string, (ev: CustomEvent<unknown>) => void>;
+            values: Args;
+            events: Record<string, (ev?: any) => void>;
             key: boolean;
-        };
+        }]> | undefined;
     };
+    events(): {};
+    slots(): {};
+    bindings(): "";
+    exports(): {};
 }
-export type TemplateProps<Args> = ReturnType<__sveltets_Render<Args>['props']>;
-export type TemplateEvents<Args> = ReturnType<__sveltets_Render<Args>['events']>;
-export type TemplateSlots<Args> = ReturnType<__sveltets_Render<Args>['slots']>;
-/** See [documentation](https://mono-doc.vercel.app/3-Components/3-Block/1-Content/2-Template) for more details. */
-export default class Template<Args> extends SvelteComponentTyped<TemplateProps<Args>, TemplateEvents<Args>, TemplateSlots<Args>> {
+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']>;
 }
-export {};
+/** 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/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/components/block/controls/Controls.svelte.d.ts

@@ -1,17 +1,7 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        mode?: "props" | "events" | undefined;
-        position?: "right" | "bottom" | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
+type $$ComponentProps = {
+    mode: "props" | "events";
+    position: "bottom" | "right";
 };
-export type ControlsProps = typeof __propDef.props;
-export type ControlsEvents = typeof __propDef.events;
-export type ControlsSlots = typeof __propDef.slots;
-export default class Controls extends SvelteComponentTyped<ControlsProps, ControlsEvents, ControlsSlots> {
-}
-export {};
+declare const Controls: import("svelte").Component<$$ComponentProps, {}, "position" | "mode">;
+type Controls = ReturnType<typeof Controls>;
+export default Controls;

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/components/block/controls/Styler.svelte.d.ts

@@ -1,18 +1,8 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        type: "props" | "events";
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    type: "props" | "events";
+    children?: Snippet;
 };
-export type StylerProps = typeof __propDef.props;
-export type StylerEvents = typeof __propDef.events;
-export type StylerSlots = typeof __propDef.slots;
-export default class Styler extends SvelteComponentTyped<StylerProps, StylerEvents, StylerSlots> {
-}
-export {};
+declare const Styler: import("svelte").Component<$$ComponentProps, {}, "">;
+type Styler = ReturnType<typeof Styler>;
+export default Styler;

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}