@nil-/doc 0.2.46 → 0.2.48

package/CHANGELOG.md

@@ -1,10 +1,24 @@
 # @nil-/doc
 
+## 0.2.48
+
+### Patch Changes
+
+-   [doc][fix] Fix type support ([#81](https://github.com/njaldea/mono/pull/81))
+
+## 0.2.47
+
+### Patch Changes
+
+-   [doc][docu] minor adjustments to documentation ([#79](https://github.com/njaldea/mono/pull/79))
+
+-   [doc][new] added support for flattened prop schema ([#79](https://github.com/njaldea/mono/pull/79))
+
 ## 0.2.46
 
 ### Patch Changes
 
--   [doc][new] added event control support ([#77](https://github.com/njaldea/mono/pull/77))
+-   [doc][break] added event control support ([#77](https://github.com/njaldea/mono/pull/77))
 
 ## 0.2.45
 

package/components/block/Instance.svelte

@@ -107,6 +107,10 @@ $:
   updateBound(defaults);
 let handlers;
 </script>
+<!--
+    @component
+    See [documentation](https://mono-doc.vercel.app/3-Components/2-Block/1-Content/1-Instance) for more details.
+-->
 <div
     class="instance"
     class:scale

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

@@ -19,6 +19,7 @@ declare class __sveltets_Render<PropArgs> {
 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/2-Block/1-Content/1-Instance) for more details. */
 export default class Instance<PropArgs> extends SvelteComponentTyped<InstanceProps<PropArgs>, InstanceEvents<PropArgs>, InstanceSlots<PropArgs>> {
 }
 export {};

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

@@ -12,18 +12,38 @@ export let depth;
 export let disabled = false;
 export let visible = false;
 </script>
-{#if "object" === info.type}
-    <Object {info} bind:value {depth} {disabled} {visible} />
-{:else if "tuple" === info.type}
-    <Tuple {info} bind:value {depth} {disabled} {visible} />
-{:else if "text" === info.type}
-    <Text {info} bind:value {depth} {disabled} {visible} />
-{:else if "number" === info.type}
-    <Number {info} bind:value {depth} {disabled} {visible} />
-{:else if "range" === info.type}
-    <Range {info} bind:value {depth} {disabled} {visible} />
-{:else if "select" === info.type}
-    <Select {info} bind:value {depth} {disabled} {visible} />
-{:else if "switch" === info.type}
-    <Switch {info} bind:value {depth} {disabled} {visible} />
+{#if info instanceof Array}
+    {@const type = info[1]}
+    {#if "object" === type}
+        <Object {info} bind:value {depth} {disabled} {visible} />
+    {:else if "tuple" === type}
+        <Tuple {info} bind:value {depth} {disabled} {visible} />
+    {:else if "text" === type}
+        <Text {info} bind:value {depth} {disabled} {visible} />
+    {:else if "number" === type}
+        <Number {info} bind:value {depth} {disabled} {visible} />
+    {:else if "range" === type}
+        <Range {info} bind:value {depth} {disabled} {visible} />
+    {:else if "select" === type}
+        <Select {info} bind:value {depth} {disabled} {visible} />
+    {:else if "switch" === type}
+        <Switch {info} bind:value {depth} {disabled} {visible} />
+    {/if}
+{:else}
+    {@const type = info.type}
+    {#if "object" === type}
+        <Object {info} bind:value {depth} {disabled} {visible} />
+    {:else if "tuple" === type}
+        <Tuple {info} bind:value {depth} {disabled} {visible} />
+    {:else if "text" === type}
+        <Text {info} bind:value {depth} {disabled} {visible} />
+    {:else if "number" === type}
+        <Number {info} bind:value {depth} {disabled} {visible} />
+    {:else if "range" === type}
+        <Range {info} bind:value {depth} {disabled} {visible} />
+    {:else if "select" === type}
+        <Select {info} bind:value {depth} {disabled} {visible} />
+    {:else if "switch" === type}
+        <Switch {info} bind:value {depth} {disabled} {visible} />
+    {/if}
 {/if}

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

@@ -1,6 +1,6 @@
 
 <script>import { getDefault } from "./misc/defaulter";
-import Name from "./misc/Name.svelte";
+import NameHeader from "./misc/Name.svelte";
 export let value;
 export let info;
 export let depth;
@@ -10,10 +10,12 @@ let ivalue = value ?? getDefault(info);
 let enabled = value !== void 0;
 $:
   value = enabled && !disabled ? ivalue : void 0;
+$:
+  name = info instanceof Array ? info[0] : info.name;
 </script>
 {#if visible}
     <div>
-        <Name name={info.name} {depth} />
+        <NameHeader {name} {depth} />
         <div><input type="number" bind:value={ivalue} disabled={!enabled || disabled} /></div>
         <div><input type="checkbox" bind:checked={enabled} {disabled} /></div>
     </div>

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

@@ -1,9 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
-import type { PropNumber } from "../types";
+import type { Unionized, PropType } from "../types";
 declare const __propDef: {
     props: {
         value: number | undefined;
-        info: PropNumber;
+        info: Unionized<PropType<"number">>;
         depth: number;
         disabled?: boolean | undefined;
         visible?: boolean | undefined;

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

@@ -13,13 +13,15 @@ let expand = info.values.length > 0 ? true : void 0;
 $:
   value = !disabled && enabled ? ivalue : void 0;
 $:
-  values = info.values;
+  values = info instanceof Array ? info[2] : info.values;
+$:
+  name = info instanceof Array ? info[0] : info.name;
 </script>
-<Header name={info.name} bind:expand bind:checked={enabled} {depth} {disabled} {visible} />
+<Header {name} bind:expand bind:checked={enabled} {depth} {disabled} {visible} />
 {#each values as info, i (i)}
     <Component
         {info}
-        bind:value={ivalue[info.name]}
+        bind:value={ivalue[name]}
         depth={depth + 10}
         disabled={!enabled || disabled}
         visible={visible && expand && enabled && !disabled}

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

@@ -1,10 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
 import type { ValueType } from "../../types";
-import type { PropObject } from "../types";
+import type { Unionized, PropType } from "../types";
 declare const __propDef: {
     props: {
         value: Record<string, ValueType> | undefined;
-        info: PropObject;
+        info: Unionized<PropType<"object">>;
         depth: number;
         disabled?: boolean | undefined;
         visible?: boolean | undefined;

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

@@ -10,6 +10,10 @@ export let visible;
         <slot />
     {/if}
     {#each infos as info}
-        <Component {info} bind:value={values[info.name]} depth={10} {visible} />
+        {#if info instanceof Array}
+            <Component {info} bind:value={values[info[0]]} depth={10} {visible} />
+        {:else}
+            <Component {info} bind:value={values[info.name]} depth={10} {visible} />
+        {/if}
     {/each}
 </Styler>

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

@@ -2,7 +2,7 @@
     .input {
         width: 100%;
         display: grid;
-        grid-template-columns: 40px 1fr;
+        grid-template-columns: 50px 1fr;
         gap: 5px;
         position: relative;
     }
@@ -11,7 +11,7 @@
         width: 100%;
         height: 100%;
         display: grid;
-        text-align: right;
+        text-align: left;
         align-items: center;
         font-size: 0.8rem;
         user-select: none;
@@ -19,12 +19,14 @@
     }
 
     .tooltip {
-        padding-right: 10px;
         width: 100%;
         height: 100%;
         left: -110%;
         position: absolute;
         visibility: hidden;
+        display: grid;
+        grid-template-columns: 85px 1fr;
+        padding: 0px 5px;
     }
 
     .input:hover > .tooltip:not(.disabled) {
@@ -33,7 +35,7 @@
 </style>
 
 <script>import { getDefault } from "./misc/defaulter";
-import Name from "./misc/Name.svelte";
+import NameHeader from "./misc/Name.svelte";
 export let value;
 export let info;
 export let depth;
@@ -44,23 +46,47 @@ let enabled = value !== void 0;
 $:
   value = enabled && !disabled ? ivalue : void 0;
 $:
-  flag = !enabled || disabled;
+  i = info instanceof Array ? {
+    name: info[0],
+    min: info[2],
+    max: info[3],
+    step: info[4]
+  } : {
+    name: info.name,
+    min: info.min,
+    max: info.max,
+    step: info.step
+  };
+const format = (v, base, digits) => {
+  const n = v.toExponential().split("e");
+  const ex = parseInt(n[1]);
+  const absex = Math.abs(ex);
+  const rest = base + (absex >= 10 ? 0 : 1) - (ex >= 0 ? 0 : 1);
+  return v.toLocaleString(void 0, {
+    signDisplay: "always",
+    useGrouping: false,
+    notation: absex > 2 + digits ? "scientific" : "standard",
+    maximumFractionDigits: rest,
+    minimumFractionDigits: rest
+  });
+};
 </script>
 {#if visible}
     <div>
-        <Name name={info.name} {depth} />
+        <NameHeader name={i.name} {depth} />
         <div class="input">
-            <div class="tooltip" class:disabled={flag}>
-                Current Value: {ivalue}
+            <div class="tooltip" class:disabled={!enabled || disabled}>
+                <div>Current Value:</div>
+                <div>{format(ivalue, 6, 3)}</div>
             </div>
-            <div>{ivalue.toFixed(2)}</div>
+            <div>{format(ivalue, 1, 1)}</div>
             <input
                 type="range"
                 bind:value={ivalue}
-                min={info.min}
-                max={info.max}
-                step={info.step}
-                disabled={flag}
+                min={i.min}
+                max={i.max}
+                step={i.step}
+                disabled={!enabled || disabled}
             />
         </div>
         <div><input type="checkbox" bind:checked={enabled} {disabled} /></div>

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

@@ -1,9 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
-import type { PropRange } from "../types";
+import type { Unionized, PropType } from "../types";
 declare const __propDef: {
     props: {
         value: number | undefined;
-        info: PropRange;
+        info: Unionized<PropType<"range">>;
         depth: number;
         disabled?: boolean | undefined;
         visible?: boolean | undefined;

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

@@ -1,6 +1,6 @@
 
 <script>import { getDefault } from "./misc/defaulter";
-import Name from "./misc/Name.svelte";
+import NameHeader from "./misc/Name.svelte";
 export let value;
 export let info;
 export let depth;
@@ -10,14 +10,18 @@ let ivalue = value ?? getDefault(info);
 let enabled = value !== void 0;
 $:
   value = enabled && !disabled ? ivalue : void 0;
+$:
+  name = info instanceof Array ? info[0] : info.name;
+$:
+  values = info instanceof Array ? info[2] : info.values;
 </script>
 {#if visible}
     <div>
-        <Name name={info.name} {depth} />
+        <NameHeader {name} {depth} />
         <div>
             <select bind:value={ivalue} disabled={!enabled || disabled}>
-                {#each info.values as value}
-                    <option {value}>{value}</option>
+                {#each values as v}
+                    <option value={v}>{v}</option>
                 {/each}
             </select>
         </div>

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

@@ -1,9 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
-import type { PropSelect } from "../types";
+import type { Unionized, PropType } from "../types";
 declare const __propDef: {
     props: {
         value: string | undefined;
-        info: PropSelect;
+        info: Unionized<PropType<"select">>;
         depth: number;
         disabled?: boolean | undefined;
         visible?: boolean | undefined;

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

@@ -1,6 +1,6 @@
 
 <script>import { getDefault } from "./misc/defaulter";
-import Name from "./misc/Name.svelte";
+import NameHeader from "./misc/Name.svelte";
 export let value;
 export let info;
 export let depth;
@@ -10,10 +10,12 @@ let ivalue = value ?? getDefault(info);
 let enabled = value !== void 0;
 $:
   value = enabled && !disabled ? ivalue : void 0;
+$:
+  name = info instanceof Array ? info[0] : info.name;
 </script>
 {#if visible}
     <div>
-        <Name name={info.name} {depth} />
+        <NameHeader {name} {depth} />
         <div><input type="checkbox" bind:checked={ivalue} disabled={!enabled || disabled} /></div>
         <div><input type="checkbox" bind:checked={enabled} {disabled} /></div>
     </div>

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

@@ -1,9 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
-import type { PropSwitch } from "../types";
+import type { Unionized, PropType } from "../types";
 declare const __propDef: {
     props: {
         value: boolean | undefined;
-        info: PropSwitch;
+        info: Unionized<PropType<"switch">>;
         depth: number;
         disabled?: boolean | undefined;
         visible?: boolean | undefined;

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

@@ -1,6 +1,6 @@
 
 <script>import { getDefault } from "./misc/defaulter";
-import Name from "./misc/Name.svelte";
+import NameHeader from "./misc/Name.svelte";
 export let value;
 export let info;
 export let depth;
@@ -10,10 +10,12 @@ let ivalue = value ?? getDefault(info);
 let ienabled = value !== void 0;
 $:
   value = ienabled && !disabled ? ivalue : void 0;
+$:
+  name = info instanceof Array ? info[0] : info.name;
 </script>
 {#if visible}
     <div>
-        <Name name={info.name} {depth} />
+        <NameHeader {name} {depth} />
         <div><input type="text" bind:value={ivalue} disabled={!ienabled || disabled} /></div>
         <div><input type="checkbox" bind:checked={ienabled} {disabled} /></div>
     </div>

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

@@ -1,9 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
-import type { PropText } from "../types";
+import type { Unionized, PropType } from "../types";
 declare const __propDef: {
     props: {
         value: string | undefined;
-        info: PropText;
+        info: Unionized<PropType<"text">>;
         depth: number;
         disabled?: boolean | undefined;
         visible?: boolean | undefined;

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

@@ -12,16 +12,28 @@ let enabled = value !== void 0;
 $:
   value = !disabled && enabled ? ivalue : void 0;
 $:
-  values = info.values;
+  values = info instanceof Array ? info[2] : info.values;
+$:
+  name = info instanceof Array ? info[0] : info.name;
 let expand = info.values.length > 0 ? true : void 0;
 </script>
-<Header name={info.name} bind:expand bind:checked={enabled} {depth} {disabled} {visible} />
-{#each values as info, i (i)}
-    <Component
-        info={{ ...info, name: `${i}` }}
-        bind:value={ivalue[i]}
-        depth={depth + 10}
-        disabled={!enabled || disabled}
-        visible={visible && expand && enabled && !disabled}
-    />
+<Header {name} bind:expand bind:checked={enabled} {depth} {disabled} {visible} />
+{#each values as v, i (i)}
+    {#if v instanceof Array}
+        <Component
+            info={[`${i}`, ...v]}
+            bind:value={ivalue[i]}
+            depth={depth + 10}
+            disabled={!enabled || disabled}
+            visible={visible && expand && enabled && !disabled}
+        />
+    {:else}
+        <Component
+            info={{ ...v, name: `${i}` }}
+            bind:value={ivalue[i]}
+            depth={depth + 10}
+            disabled={!enabled || disabled}
+            visible={visible && expand && enabled && !disabled}
+        />
+    {/if}
 {/each}

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

@@ -1,10 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
 import type { ValueType } from "../../types";
-import type { PropTuple } from "../types";
+import type { Unionized, PropType } from "../types";
 declare const __propDef: {
     props: {
         value: ValueType[] | undefined;
-        info: PropTuple;
+        info: Unionized<PropType<"tuple">>;
         depth: number;
         disabled?: boolean | undefined;
         visible?: boolean | undefined;

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

@@ -1,10 +1,10 @@
 import type { ValueType } from "../../../types";
-import type { Prop, PropNumber, PropRange, PropSelect, PropSwitch, PropText, PropTuple, PropObject } from "../../types";
-export declare function getDefault(i: PropTuple): ValueType[];
-export declare function getDefault(i: PropObject): Record<string, ValueType>;
-export declare function getDefault(i: PropNumber): number;
-export declare function getDefault(i: PropRange): number;
-export declare function getDefault(i: PropSelect): string;
-export declare function getDefault(i: PropText): string;
-export declare function getDefault(i: PropSwitch): boolean;
+import type { Unionized, PropType, Prop } from "../../types";
+export declare function getDefault(i: Unionized<PropType<"tuple">>): ValueType[];
+export declare function getDefault(i: Unionized<PropType<"object">>): Record<string, ValueType>;
+export declare function getDefault(i: Unionized<PropType<"number">>): number;
+export declare function getDefault(i: Unionized<PropType<"range">>): number;
+export declare function getDefault(i: Unionized<PropType<"select">>): string;
+export declare function getDefault(i: Unionized<PropType<"text">>): string;
+export declare function getDefault(i: Unionized<PropType<"switch">>): boolean;
 export declare function getDefault(i: Prop): ValueType;

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

@@ -1,36 +1,71 @@
 // eslint-disable-next-line func-style
 export function getDefault(i) {
-    switch (i.type) {
-        case "object":
-            // eslint-disable-next-line no-use-before-define
-            return getObjectDefaults(i);
-        case "tuple":
-            // eslint-disable-next-line no-use-before-define
-            return getTupleDefaults(i);
-        case "text":
-            return "";
-        case "select":
-            return i.values.length > 0 ? i.values[0] : "";
-        case "number":
-            return 0;
-        case "range":
-            return i.min;
-        case "switch":
-        default:
-            return false;
+    if (i instanceof Array) {
+        switch (i[1]) {
+            case "object":
+                // eslint-disable-next-line no-use-before-define
+                return getObjectDefaults(i);
+            case "tuple":
+                // eslint-disable-next-line no-use-before-define
+                return getTupleDefaults(i);
+            case "text":
+                return "";
+            case "select":
+                return i[2].length > 0 ? i[2][0] : "";
+            case "number":
+                return 0;
+            case "range":
+                return i[2];
+            case "switch":
+            default:
+                return false;
+        }
+    }
+    else {
+        switch (i.type) {
+            case "object":
+                // eslint-disable-next-line no-use-before-define
+                return getObjectDefaults(i);
+            case "tuple":
+                // eslint-disable-next-line no-use-before-define
+                return getTupleDefaults(i);
+            case "text":
+                return "";
+            case "select":
+                return i.values.length > 0 ? i.values[0] : "";
+            case "number":
+                return 0;
+            case "range":
+                return i.min;
+            case "switch":
+            default:
+                return false;
+        }
     }
 }
 const getObjectDefaults = (info) => {
     const ret = {};
-    for (const i of info.values) {
-        ret[i.name] = getDefault(i);
+    const values = info instanceof Array ? info[2] : info.values;
+    for (const v of values) {
+        if (v instanceof Array) {
+            ret[v[0]] = getDefault(v);
+        }
+        else {
+            ret[v.name] = getDefault(v);
+        }
     }
     return ret;
 };
-const getTupleDefaults = (i) => {
+const getTupleDefaults = (info) => {
     const ret = [];
-    for (const info of i.values) {
-        ret.push(getDefault(info));
+    const values = info instanceof Array ? info[2] : info.values;
+    for (const [i, v] of values.entries()) {
+        if (v instanceof Array) {
+            ret.push(getDefault([`${i}`, ...v]));
+        }
+        else {
+            ret.push(getDefault({ name: `${i}`, ...v }));
+        }
     }
     return ret;
 };

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

@@ -1,62 +1,79 @@
-export type PropTuple = {
-    name: string;
-    type: "tuple";
-    // eslint-disable-next-line no-use-before-define
-    values: NonNamedProp[];
-};
-
-export type PropObject = {
-    name: string;
-    type: "object";
-    // eslint-disable-next-line no-use-before-define
-    values: Prop[];
-};
-
-export type PropText = {
-    name: string;
-    type: "text";
-};
+type Types = "text" | "number" | "select" | "range" | "switch" | "tuple" | "object";
 
-export type PropNumber = {
-    name: string;
-    type: "number";
-};
+// prettier-ignore
+export type PropType<T extends Types> =
+    T extends "text" ? [
+        [ name: string, type: T ],
+        { name: string; type: T; }
+    ]
+    : T extends "number" ? [
+        [ name: string, type: T ],
+        { name: string; type: T; }
+    ]
+    : T extends "switch" ? [
+        [ name: string, type: T ],
+        { name: string; type: T; }
+    ]
+    : T extends "select" ? [
+        [ name: string, type: T, values: string[] ],
+        { name: string; type: T; values: string[]; }
+    ]
+    : T extends "range" ? [
+        [ name: string, type: T, min: number, max: number, step: number ],
+        { name: string; type: T; min: number; max: number, step: number; }
+    ]
+    : T extends "tuple" ? [
+        // eslint-disable-next-line no-use-before-define
+        [ name: string, type: T, values: NonNamedProp[] ],
+        // eslint-disable-next-line no-use-before-define
+        { name: string; type: T; values: NonNamedProp[]; }
+    ]
+    : T extends "object" ? [
+        // eslint-disable-next-line no-use-before-define
+        [ name: string, type: T, values: Prop[] ],
+        // eslint-disable-next-line no-use-before-define
+        { name: string; type: T; values: Prop[]; }
+    ]
+    : never;
 
-export type PropRange = {
-    name: string;
-    type: "range";
-    min: number;
-    max: number;
-    step: number;
-};
-
-export type PropSelect = {
-    name: string;
-    type: "select";
-    values: string[];
-};
-
-export type PropSwitch = {
-    name: string;
-    type: "switch";
-};
+export type Flattened<T extends PropType> = T[0];
+export type Detailed<T extends PropType> = T[1];
+export type Unionized<T extends PropTyoe> = T[number];
 
+// prettier-ignore
 export type Prop =
-    | PropTuple
-    | PropObject
-    | PropText
-    | PropNumber
-    | PropRange
-    | PropSelect
-    | PropSwitch;
+    | [ name: string, type: "text" ]
+    | { name: string; type: "text"; }
+    | [ name: string, type: "number" ]
+    | { name: string; type: "number"; }
+    | [ name: string, type: "switch" ]
+    | { name: string; type: "switch"; }
+    | [ name: string, type: "select", values: string[] ]
+    | { name: string; type: "select"; values: string[]; }
+    | [ name: string, type: "range", min: number, max: number, step: number ]
+    | { name: string; type: "range"; min: number; max: number; step: number; }
+    // eslint-disable-next-line no-use-before-define
+    | [ 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[]; };
 
+// prettier-ignore
 type NonNamedProp =
-    | Omit<PropTuple, "name">
-    | Omit<PropObject, "name">
-    | Omit<PropText, "name">
-    | Omit<PropNumber, "name">
-    | Omit<PropRange, "name">
-    | Omit<PropSelect, "name">
-    | Omit<PropSwitch, "name">;
+    | [ type: "text" ]
+    | { type: "text"; }
+    | [ type: "number" ]
+    | { type: "number"; }
+    | [ type: "switch" ]
+    | { type: "switch"; }
+    | [ type: "select", values: string[] ]
+    | { type: "select"; values: string[]; }
+    | [ type: "range", min: number, max: number, step: number ]
+    | { type: "range"; min: number; max: number; step: number; }
+    | [ type: "tuple", values: NonNamedProp[] ]
+    | { type: "tuple"; values: NonNamedProp[]; }
+    | [ type: "object", values: Prop[] ]
+    | { type: "object"; values: Prop[]; };
 
 export type Event = string;

package/components/etc/Container.svelte

@@ -76,18 +76,22 @@
         background-color: var(--color-p);
     }
 
+    .container:not(.b):not(.vertical) > .divider:hover,
     .container.moving:not(.b):not(.vertical) > .divider {
         border-bottom: var(--color-s) solid 2.5px;
     }
 
+    .container.b:not(.vertical) > .divider:hover,
     .container.moving.b:not(.vertical) > .divider {
         border-top: var(--color-s) solid 2.5px;
     }
 
+    .container:not(.b).vertical > .divider:hover,
     .container.moving:not(.b).vertical > .divider {
         border-right: var(--color-s) solid 2.5px;
     }
 
+    .container.vertical.b > .divider:hover,
     .container.moving.vertical.b > .divider {
         border-left: var(--color-s) solid 2.5px;
     }

package/components/navigation/types.d.ts

@@ -8,5 +8,5 @@ export type States = {
     sub: Record<string, States>;
 };
 
-export type Sorter = (l: string, r: string) => 1 | 0 | -1;
+export type Sorter = (l: string, r: string) => -1 | 0 | 1;
 export type Renamer = (s: string) => string;

package/components/navigation/utils/renamer.d.ts

@@ -1,9 +1,5 @@
-import type { Renamer } from "../types";
 /**
  * If a text follows `<I>-<Name>` format,
  * this method simply removes the Prefix.
- *
- * @param text
- * @returns `<Name>`
  */
-export declare const renamer: Renamer;
+export declare const renamer: (text: string) => string;

package/components/navigation/utils/renamer.js

@@ -2,14 +2,11 @@ const match = /(\d+)-(.+)/;
 /**
  * If a text follows `<I>-<Name>` format,
  * this method simply removes the Prefix.
- *
- * @param text
- * @returns `<Name>`
  */
-export const renamer = (text) => {
+export const renamer = ((text) => {
     const m = match.exec(text);
     if (m) {
         return m[2];
     }
     return text;
-};
+});

package/components/navigation/utils/sorter.d.ts

@@ -1,4 +1,3 @@
-import type { Sorter } from "../types";
 /**
  * Compares two texts for sorting.
  *
@@ -9,9 +8,5 @@ import type { Sorter } from "../types";
  * the text that follows the format is considered as higher in order.
  *
  * Else comparison is done using built-in `string` comparison.
- *
- * @param l - left operand
- * @param r - right operand
- * @returns `-1 | 0 | +1`
  */
-export declare const sorter: Sorter;
+export declare const sorter: (l: string, r: string) => -1 | 0 | 1;

package/components/navigation/utils/sorter.js

@@ -18,12 +18,8 @@ const sorterT = (l, r) => {
  * the text that follows the format is considered as higher in order.
  *
  * Else comparison is done using built-in `string` comparison.
- *
- * @param l - left operand
- * @param r - right operand
- * @returns `-1 | 0 | +1`
  */
-export const sorter = (l, r) => {
+export const sorter = ((l, r) => {
     const lmatch = match.exec(l);
     const rmatch = match.exec(r);
     if (null == lmatch && null == rmatch) {
@@ -36,4 +32,4 @@ export const sorter = (l, r) => {
         return -1;
     }
     return sorterT(parseInt(lmatch[1]), parseInt(rmatch[1])) || sorterT(lmatch[2], rmatch[2]);
-};
+});

package/index.d.ts

@@ -1,6 +1,6 @@
 export { renamer } from "./components/navigation/utils/renamer";
 export { sorter } from "./components/navigation/utils/sorter";
-export type { Prop, Event } from "./components/block/controls/types";
+export type { Prop, Event, PropType, Detailed, Flattened, Unionized } from "./components/block/controls/types";
 export { default as Layout } from "./components/Layout.svelte";
 export { default as Instance } from "./components/block/Instance.svelte";
 export { default as Block } from "./components/block/Block.svelte";

package/package.json

@@ -1,26 +1,26 @@
 {
   "name": "@nil-/doc",
-  "version": "0.2.46",
+  "version": "0.2.48",
   "author": {
     "email": "njaldea@gmail.com",
     "name": "Neil Aldea"
   },
   "license": "ISC",
   "devDependencies": {
-    "@sveltejs/adapter-vercel": "^1.0.0",
-    "@sveltejs/kit": "^1.0.5",
+    "@sveltejs/adapter-vercel": "^1.0.5",
+    "@sveltejs/kit": "^1.3.2",
     "@sveltejs/package": "^1.0.2",
     "@vitest/coverage-c8": "^0.26.3",
     "mdsvex": "^0.10.6",
     "remark-admonitions": "^1.2.1",
     "svelte-check": "^2.10.3",
-    "tslib": "^2.4.1",
+    "tslib": "^2.5.0",
     "typescript": "^4.9.4",
     "vite": "^4.0.4",
     "vitest": "^0.26.3"
   },
   "peerDependencies": {
-    "svelte": "^3.55.0"
+    "svelte": "^3.55.1"
   },
   "publishConfig": {
     "linkDirectory": true