@nil-/doc 1.0.0 → 2.0.1

package/components/block/controls/props/Toggle.svelte

@@ -1,16 +1,20 @@
-<script>import { getName } from "./misc/utils";
+<script lang="ts">import { getName } 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;
-$:
-  value = enabled && !disabled ? ivalue : 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 set_value = (v) => {
+  value = v;
+};
+$effect(() => set_value(enabled && !disabled ? ivalue : void 0));
 </script>
 
 {#if visible}

package/components/block/controls/props/Toggle.svelte.d.ts

@@ -1,21 +1,12 @@
-import { SvelteComponentTyped } from "svelte";
+import Toggle from "./misc/Toggle.svelte";
 import type { Unionized, PropType } from "../types";
-declare const __propDef: {
-    props: {
-        value: boolean | undefined;
-        info: Unionized<PropType<"toggle">>;
-        depth: number;
-        disabled?: boolean | undefined;
-        visible?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
+type $$ComponentProps = {
+    value: boolean | undefined;
+    info: Unionized<PropType<"toggle">>;
+    depth: number;
+    disabled?: boolean;
+    visible?: boolean;
 };
-export type ToggleProps = typeof __propDef.props;
-export type ToggleEvents = typeof __propDef.events;
-export type ToggleSlots = typeof __propDef.slots;
-export default class Toggle extends SvelteComponentTyped<ToggleProps, ToggleEvents, ToggleSlots> {
-}
-export {};
+declare const Toggle: import("svelte").Component<$$ComponentProps, {}, "value">;
+type Toggle = ReturnType<typeof Toggle>;
+export default Toggle;

package/components/block/controls/props/Tuple.svelte

@@ -1,17 +1,21 @@
-<script>import Component from "./Component.svelte";
+<script lang="ts">import Component from "./Component.svelte";
 import Header from "./misc/GroupHeader.svelte";
 import { defaulter } from "./misc/defaulter";
 import { getValues, getName, addName } from "./misc/utils";
-export let value;
-export let info;
-export let depth;
-export let disabled = false;
-export let visible = false;
-const ivalue = value ?? defaulter(info);
-let enabled = value !== void 0;
-let expand = getValues(info).length > 0 ? true : void 0;
-$:
-  value = !disabled && enabled ? ivalue : void 0;
+let {
+  value = $bindable(),
+  info,
+  depth,
+  disabled = false,
+  visible = false
+} = $props();
+let ivalue = $state(value ?? defaulter(info));
+let enabled = $state(value !== void 0);
+let expand = $state(getValues(info).length > 0 ? true : void 0);
+const set_value = (v) => {
+  value = v;
+};
+$effect(() => set_value(enabled && !disabled ? ivalue : void 0));
 </script>
 
 <Header name={getName(info)} bind:expand bind:checked={enabled} {depth} {disabled} {visible} />

package/components/block/controls/props/Tuple.svelte.d.ts

@@ -1,22 +1,12 @@
-import { SvelteComponentTyped } from "svelte";
 import type { ValueType } from "../../types";
 import type { Unionized, PropType } from "../types";
-declare const __propDef: {
-    props: {
-        value: ValueType[] | undefined;
-        info: Unionized<PropType<"tuple">>;
-        depth: number;
-        disabled?: boolean | undefined;
-        visible?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
+type $$ComponentProps = {
+    value: ValueType[] | undefined;
+    info: Unionized<PropType<"tuple">>;
+    depth: number;
+    disabled?: boolean;
+    visible?: boolean;
 };
-export type TupleProps = typeof __propDef.props;
-export type TupleEvents = typeof __propDef.events;
-export type TupleSlots = typeof __propDef.slots;
-export default class Tuple extends SvelteComponentTyped<TupleProps, TupleEvents, TupleSlots> {
-}
-export {};
+declare const Tuple: import("svelte").Component<$$ComponentProps, {}, "value">;
+type Tuple = ReturnType<typeof Tuple>;
+export default Tuple;

package/components/block/controls/props/misc/GroupHeader.svelte

@@ -1,22 +1,22 @@
-<script>import Name from "./Name.svelte";
+<script lang="ts">import Name from "./Name.svelte";
 import Toggle from "./Toggle.svelte";
-export let name;
-export let depth;
-export let checked;
-export let disabled = false;
-export let expand = void 0;
-export let visible = false;
+let {
+  name,
+  depth,
+  checked = $bindable(),
+  disabled = false,
+  expand = $bindable(false),
+  visible = false
+} = $props();
 const flip = () => {
   if (!disabled && checked) {
-    if (expand !== void 0) {
-      expand = !expand;
-    }
+    expand = !expand;
   }
 };
 </script>
 
 {#if visible}
-    <div on:click={flip} on:keypress={null} role="none">
+    <div onclick={flip} onkeypress={null} role="none">
         <Name
             expand={expand === undefined ? undefined : expand && checked && !disabled}
             {name}
@@ -32,3 +32,4 @@ const flip = () => {
         color: hsl(0, 0%, 50%);
     }
 </style>
+    

package/components/block/controls/props/misc/GroupHeader.svelte.d.ts

@@ -1,21 +1,11 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        name: string;
-        depth: number;
-        checked: boolean;
-        disabled?: boolean | undefined;
-        expand?: boolean | undefined;
-        visible?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
+type $$ComponentProps = {
+    name: string;
+    depth: number;
+    checked?: boolean;
+    disabled?: boolean;
+    expand?: boolean;
+    visible?: boolean;
 };
-export type GroupHeaderProps = typeof __propDef.props;
-export type GroupHeaderEvents = typeof __propDef.events;
-export type GroupHeaderSlots = typeof __propDef.slots;
-export default class GroupHeader extends SvelteComponentTyped<GroupHeaderProps, GroupHeaderEvents, GroupHeaderSlots> {
-}
-export {};
+declare const GroupHeader: import("svelte").Component<$$ComponentProps, {}, "expand" | "checked">;
+type GroupHeader = ReturnType<typeof GroupHeader>;
+export default GroupHeader;

package/components/block/controls/props/misc/Name.svelte

@@ -1,6 +1,8 @@
-<script>export let depth;
-export let name;
-export let expand = void 0;
+<script lang="ts">let {
+  depth,
+  name,
+  expand
+} = $props();
 </script>
 
 <div class="override" style:padding-left={`${depth}rem`} title={name}>

package/components/block/controls/props/misc/Name.svelte.d.ts

@@ -1,18 +1,8 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        depth: number;
-        name: string;
-        expand?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
+type $$ComponentProps = {
+    depth: number;
+    name: string;
+    expand?: boolean;
 };
-export type NameProps = typeof __propDef.props;
-export type NameEvents = typeof __propDef.events;
-export type NameSlots = typeof __propDef.slots;
-export default class Name extends SvelteComponentTyped<NameProps, NameEvents, NameSlots> {
-}
-export {};
+declare const Name: import("svelte").Component<$$ComponentProps, {}, "">;
+type Name = ReturnType<typeof Name>;
+export default Name;

package/components/block/controls/props/misc/Toggle.svelte

@@ -1,7 +1,11 @@
-<script>import { getTheme } from "../../../../context";
-export let disabled = false;
-export let toggled = false;
-const click = () => {
+<script lang="ts">import { getTheme } from "../../../../context";
+let {
+  disabled = false,
+  toggled = $bindable(false),
+  onkeypress
+} = $props();
+const onclick = (e) => {
+  e.stopPropagation();
   if (!disabled) {
     toggled = !toggled;
   }
@@ -12,8 +16,8 @@ const dark = getTheme();
 <div>
     <svg
         viewBox="-30 -30 60 60"
-        on:click|stopPropagation={click}
-        on:keypress
+        {onclick}
+        {onkeypress}
         role="none"
         class:disabled
         class:dark={$dark}

package/components/block/controls/props/misc/Toggle.svelte.d.ts

@@ -1,19 +1,8 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        disabled?: boolean | undefined;
-        toggled?: boolean | undefined;
-    };
-    events: {
-        keypress: KeyboardEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
+type $$ComponentProps = {
+    disabled?: boolean;
+    toggled?: boolean;
+    onkeypress?: (e: KeyboardEvent) => void;
 };
-export type ToggleProps = typeof __propDef.props;
-export type ToggleEvents = typeof __propDef.events;
-export type ToggleSlots = typeof __propDef.slots;
-export default class Toggle extends SvelteComponentTyped<ToggleProps, ToggleEvents, ToggleSlots> {
-}
-export {};
+declare const Toggle: import("svelte").Component<$$ComponentProps, {}, "toggled">;
+type Toggle = ReturnType<typeof Toggle>;
+export default Toggle;

package/components/block/controls/props/misc/defaulter.d.ts

@@ -1,7 +1,7 @@
 import type { ValueType } from "../../../types";
 import type { Unionized, PropType, Prop } from "../../types";
 export declare function defaulter(i: Unionized<PropType<"tuple">>): ValueType[];
-export declare function defaulter(i: Unionized<PropType<"object">>): Record<string, ValueType>;
+export declare function defaulter(i: Unionized<PropType<"table">>): Record<string, ValueType>;
 export declare function defaulter(i: Unionized<PropType<"number">>): number;
 export declare function defaulter(i: Unionized<PropType<"range">>): number;
 export declare function defaulter(i: Unionized<PropType<"select">>): string;

package/components/block/controls/props/misc/defaulter.js

@@ -2,7 +2,7 @@ import { getType, getValues, getMin } from "./utils";
 // eslint-disable-next-line func-style
 export function defaulter(i) {
     switch (getType(i)) {
-        case "object":
+        case "table":
             // eslint-disable-next-line no-use-before-define
             return defaulterO(i);
         case "tuple":

package/components/block/controls/props/misc/utils.d.ts

@@ -1,11 +1,11 @@
 import type { Detailed, Unionized, PropType, Prop, NonNamedProp, SpecialProp } from "../../types";
-type TypesWithValue = "object" | "tuple" | "select";
+type TypesWithValue = "table" | "tuple" | "select";
 type Values<T extends TypesWithValue> = Detailed<PropType<T>>["values"];
 export declare function getValues(info: Unionized<PropType<"select">>): Values<"select">;
-export declare function getValues(info: Unionized<PropType<"object">>): Values<"object">;
+export declare function getValues(info: Unionized<PropType<"table">>): Values<"table">;
 export declare function getValues(info: Unionized<PropType<"tuple">>): Values<"tuple">;
 export declare const getMin: (info: Unionized<PropType<"range">>) => number;
-export declare const getType: (info: Prop | SpecialProp) => "number" | "object" | "select" | "toggle" | "button" | "tuple" | "text" | "color" | "range";
+export declare const getType: (info: Prop | SpecialProp) => "number" | "select" | "toggle" | "button" | "table" | "tuple" | "text" | "color" | "range";
 export declare const getFormat: (info: Unionized<PropType<"color">>) => import("../../types").ColorFormat;
 export declare const getName: (info: Prop | SpecialProp) => string;
 export declare const getClick: (info: SpecialProp) => () => () => void;

package/components/block/controls/types.d.ts

@@ -6,7 +6,7 @@ type Types =
     | "range"
     | "toggle"
     | "tuple"
-    | "object"
+    | "table"
     | "button";
 type ColorFormat = "hsl" | "hsla" | "rgb" | "rgba" | "hex" | "hexa";
 
@@ -42,7 +42,7 @@ export type PropType<T extends Types> =
         // eslint-disable-next-line no-use-before-define
         { name: string; type: T; values: NonNamedProp[]; }
     ]
-    : T extends "object" ? [
+    : T extends "table" ? [
         // eslint-disable-next-line no-use-before-define
         [ name: string, type: T, values: Prop[] ],
         // eslint-disable-next-line no-use-before-define
@@ -76,8 +76,8 @@ export type Prop =
     | [ name: string, type: "tuple", values: NonNamedProp[] ]
     // eslint-disable-next-line no-use-before-define
     | { name: string; type: "tuple"; values: NonNamedProp[]; }
-    | [ name: string, type: "object", values: Prop[] ]
-    | { name: string; type: "object"; values: Prop[]; };
+    | [ name: string, type: "table", values: Prop[] ]
+    | { name: string; type: "table"; values: Prop[]; };
 
 export type SpecialProp =
     | [name: string, type: "button", click: () => () => void]
@@ -99,7 +99,7 @@ export type NonNamedProp =
     | { type: "range"; min: number; max: number; step: number; }
     | [ type: "tuple", values: NonNamedProp[] ]
     | { type: "tuple"; values: NonNamedProp[]; }
-    | [ type: "object", values: Prop[] ]
-    | { type: "object"; values: Prop[]; };
+    | [ type: "table", values: Prop[] ]
+    | { type: "table"; values: Prop[]; };
 
 export type Event = string;

package/components/block/icons/Button.svelte

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

package/components/block/icons/Button.svelte.d.ts

@@ -1,35 +1,11 @@
-/** @typedef {typeof __propDef.props}  ButtonProps */
-/** @typedef {typeof __propDef.events}  ButtonEvents */
-/** @typedef {typeof __propDef.slots}  ButtonSlots */
-export default class Button extends SvelteComponentTyped<{
-    title?: string | undefined;
-    scale?: boolean | undefined;
-}, {
-    click: MouseEvent;
-    keypress: KeyboardEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type ButtonProps = typeof __propDef.props;
-export type ButtonEvents = typeof __propDef.events;
-export type ButtonSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        title?: string | undefined;
-        scale?: boolean | undefined;
-    };
-    events: {
-        click: MouseEvent;
-        keypress: KeyboardEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    title?: string;
+    scale?: boolean;
+    onclick?: (e: MouseEvent) => void;
+    onkeypress?: (e: KeyboardEvent) => void;
+    children?: Snippet;
 };
-export {};
+declare const Button: import("svelte").Component<$$ComponentProps, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/components/block/icons/ControlView.svelte

@@ -1,4 +1,6 @@
-<script>export let mode = "props";
+<script lang="ts">let {
+  mode = "props"
+} = $props();
 </script>
 
 <svg viewBox="-50 -50 100 100">

package/components/block/icons/ControlView.svelte.d.ts

@@ -1,16 +1,6 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        mode?: "props" | "events" | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
+type $$ComponentProps = {
+    mode: "props" | "events";
 };
-export type ControlViewProps = typeof __propDef.props;
-export type ControlViewEvents = typeof __propDef.events;
-export type ControlViewSlots = typeof __propDef.slots;
-export default class ControlView extends SvelteComponentTyped<ControlViewProps, ControlViewEvents, ControlViewSlots> {
-}
-export {};
+declare const ControlView: import("svelte").Component<$$ComponentProps, {}, "">;
+type ControlView = ReturnType<typeof ControlView>;
+export default ControlView;

package/components/block/icons/Position.svelte

@@ -1,8 +1,8 @@
-<script>export let position = "hidden";
-$:
-  bottom = "bottom" === position;
-$:
-  right = "right" === position;
+<script lang="ts">let {
+  position = "hidden"
+} = $props();
+let bottom = $derived("bottom" === position);
+let right = $derived("right" === position);
 </script>
 
 <svg viewBox="-50 -50 100 100">
@@ -24,7 +24,9 @@ $:
     }
 
     rect:nth-child(n + 2) {
-        transition: height var(--i-nil-doc-transition-time), x var(--i-nil-doc-transition-time),
+        transition:
+            height var(--i-nil-doc-transition-time),
+            x var(--i-nil-doc-transition-time),
             y var(--i-nil-doc-transition-time);
     }
 </style>

package/components/block/icons/Position.svelte.d.ts

@@ -1,16 +1,6 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        position?: "right" | "bottom" | "hidden" | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
+type $$ComponentProps = {
+    position: "hidden" | "bottom" | "right";
 };
-export type PositionProps = typeof __propDef.props;
-export type PositionEvents = typeof __propDef.events;
-export type PositionSlots = typeof __propDef.slots;
-export default class Position extends SvelteComponentTyped<PositionProps, PositionEvents, PositionSlots> {
-}
-export {};
+declare const Position: import("svelte").Component<$$ComponentProps, {}, "">;
+type Position = ReturnType<typeof Position>;
+export default Position;

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;
     }