@nil-/doc 1.0.0 → 2.0.0

package/src/lib/components/block/controls/props/misc/nformat.test.ts

@@ -0,0 +1,204 @@
+import { nformat as SUT } from "./nformat";
+
+import { describe, it, expect } from "vitest";
+
+describe("nformat", () => {
+    it("setup for short", () => {
+        expect(SUT(1.1e1, 3, 5))
+            .is.eq("+11.0000")
+            .and.lengthOf(8);
+        expect(SUT(-1.1e1, 3, 5))
+            .is.eq("-11.0000")
+            .and.lengthOf(8);
+        expect(SUT(1.1e-1, 3, 5))
+            .is.eq("+0.11000")
+            .and.lengthOf(8);
+        expect(SUT(-1.1e-1, 3, 5))
+            .is.eq("-0.11000")
+            .and.lengthOf(8);
+
+        expect(SUT(1.1e2, 3, 5))
+            .is.eq("+110.000")
+            .and.lengthOf(8);
+        expect(SUT(-1.1e2, 3, 5))
+            .is.eq("-110.000")
+            .and.lengthOf(8);
+        expect(SUT(1.1e-2, 3, 5))
+            .is.eq("+0.01100")
+            .and.lengthOf(8);
+        expect(SUT(-1.1e-2, 3, 5))
+            .is.eq("-0.01100")
+            .and.lengthOf(8);
+
+        expect(SUT(1.1e3, 3, 5))
+            .is.eq("+1.100E3")
+            .and.lengthOf(8);
+        expect(SUT(-1.1e3, 3, 5))
+            .is.eq("-1.100E3")
+            .and.lengthOf(8);
+        expect(SUT(1.1e-3, 3, 5))
+            .is.eq("+1.10E-3")
+            .and.lengthOf(8);
+        expect(SUT(-1.1e-3, 3, 5))
+            .is.eq("-1.10E-3")
+            .and.lengthOf(8);
+
+        expect(SUT(1.1e4, 3, 5))
+            .is.eq("+1.100E4")
+            .and.lengthOf(8);
+        expect(SUT(-1.1e4, 3, 5))
+            .is.eq("-1.100E4")
+            .and.lengthOf(8);
+        expect(SUT(1.1e-4, 3, 5))
+            .is.eq("+1.10E-4")
+            .and.lengthOf(8);
+        expect(SUT(-1.1e-4, 3, 5))
+            .is.eq("-1.10E-4")
+            .and.lengthOf(8);
+
+        expect(SUT(1.1e9, 3, 5))
+            .is.eq("+1.100E9")
+            .and.lengthOf(8);
+        expect(SUT(-1.1e9, 3, 5))
+            .is.eq("-1.100E9")
+            .and.lengthOf(8);
+        expect(SUT(1.1e-9, 3, 5))
+            .is.eq("+1.10E-9")
+            .and.lengthOf(8);
+        expect(SUT(-1.1e-9, 3, 5))
+            .is.eq("-1.10E-9")
+            .and.lengthOf(8);
+
+        expect(SUT(1.1e10, 3, 5))
+            .is.eq("+1.10E10")
+            .and.lengthOf(8);
+        expect(SUT(-1.1e10, 3, 5))
+            .is.eq("-1.10E10")
+            .and.lengthOf(8);
+        expect(SUT(1.1e-10, 3, 5))
+            .is.eq("+1.1E-10")
+            .and.lengthOf(8);
+        expect(SUT(-1.1e-10, 3, 5))
+            .is.eq("-1.1E-10")
+            .and.lengthOf(8);
+    });
+
+    it("setup for long", () => {
+        expect(SUT(1.1e1, 6, 11))
+            .is.eq("+11.0000000000")
+            .and.lengthOf(14);
+        expect(SUT(-1.1e1, 6, 11))
+            .is.eq("-11.0000000000")
+            .and.lengthOf(14);
+        expect(SUT(1.1e-1, 6, 11))
+            .is.eq("+0.11000000000")
+            .and.lengthOf(14);
+        expect(SUT(-1.1e-1, 6, 11))
+            .is.eq("-0.11000000000")
+            .and.lengthOf(14);
+
+        expect(SUT(1.1e2, 6, 11))
+            .is.eq("+110.000000000")
+            .and.lengthOf(14);
+        expect(SUT(-1.1e2, 6, 11))
+            .is.eq("-110.000000000")
+            .and.lengthOf(14);
+        expect(SUT(1.1e-2, 6, 11))
+            .is.eq("+0.01100000000")
+            .and.lengthOf(14);
+        expect(SUT(-1.1e-2, 6, 11))
+            .is.eq("-0.01100000000")
+            .and.lengthOf(14);
+
+        expect(SUT(1.1e3, 6, 11))
+            .is.eq("+1100.00000000")
+            .and.lengthOf(14);
+        expect(SUT(-1.1e3, 6, 11))
+            .is.eq("-1100.00000000")
+            .and.lengthOf(14);
+        expect(SUT(1.1e-3, 6, 11))
+            .is.eq("+0.00110000000")
+            .and.lengthOf(14);
+        expect(SUT(-1.1e-3, 6, 11))
+            .is.eq("-0.00110000000")
+            .and.lengthOf(14);
+
+        expect(SUT(1.1e4, 6, 11))
+            .is.eq("+11000.0000000")
+            .and.lengthOf(14);
+        expect(SUT(-1.1e4, 6, 11))
+            .is.eq("-11000.0000000")
+            .and.lengthOf(14);
+        expect(SUT(1.1e-4, 6, 11))
+            .is.eq("+0.00011000000")
+            .and.lengthOf(14);
+        expect(SUT(-1.1e-4, 6, 11))
+            .is.eq("-0.00011000000")
+            .and.lengthOf(14);
+
+        expect(SUT(1.1e5, 6, 11))
+            .is.eq("+110000.000000")
+            .and.lengthOf(14);
+        expect(SUT(-1.1e5, 6, 11))
+            .is.eq("-110000.000000")
+            .and.lengthOf(14);
+        expect(SUT(1.1e-5, 6, 11))
+            .is.eq("+0.00001100000")
+            .and.lengthOf(14);
+        expect(SUT(-1.1e-5, 6, 11))
+            .is.eq("-0.00001100000")
+            .and.lengthOf(14);
+
+        expect(SUT(1.1e6, 6, 11))
+            .is.eq("+1.100000000E6")
+            .and.lengthOf(14);
+        expect(SUT(-1.1e6, 6, 11))
+            .is.eq("-1.100000000E6")
+            .and.lengthOf(14);
+        expect(SUT(1.1e-6, 6, 11))
+            .is.eq("+1.10000000E-6")
+            .and.lengthOf(14);
+        expect(SUT(-1.1e-6, 6, 11))
+            .is.eq("-1.10000000E-6")
+            .and.lengthOf(14);
+
+        expect(SUT(1.1e7, 6, 11))
+            .is.eq("+1.100000000E7")
+            .and.lengthOf(14);
+        expect(SUT(-1.1e7, 6, 11))
+            .is.eq("-1.100000000E7")
+            .and.lengthOf(14);
+        expect(SUT(1.1e-7, 6, 11))
+            .is.eq("+1.10000000E-7")
+            .and.lengthOf(14);
+        expect(SUT(-1.1e-7, 6, 11))
+            .is.eq("-1.10000000E-7")
+            .and.lengthOf(14);
+
+        expect(SUT(1.1e9, 6, 11))
+            .is.eq("+1.100000000E9")
+            .and.lengthOf(14);
+        expect(SUT(-1.1e9, 6, 11))
+            .is.eq("-1.100000000E9")
+            .and.lengthOf(14);
+        expect(SUT(1.1e-9, 6, 11))
+            .is.eq("+1.10000000E-9")
+            .and.lengthOf(14);
+        expect(SUT(-1.1e-9, 6, 11))
+            .is.eq("-1.10000000E-9")
+            .and.lengthOf(14);
+
+        expect(SUT(1.1e10, 6, 11))
+            .is.eq("+1.10000000E10")
+            .and.lengthOf(14);
+        expect(SUT(-1.1e10, 6, 11))
+            .is.eq("-1.10000000E10")
+            .and.lengthOf(14);
+        expect(SUT(1.1e-10, 6, 11))
+            .is.eq("+1.1000000E-10")
+            .and.lengthOf(14);
+        expect(SUT(-1.1e-10, 6, 11))
+            .is.eq("-1.1000000E-10")
+            .and.lengthOf(14);
+    });
+});

package/src/lib/components/block/controls/props/misc/nformat.ts

@@ -0,0 +1,16 @@
+export const nformat = (v: number, fdigits: number, width: number) => {
+    const n = v.toExponential().split("e");
+    const ex = parseInt(n[1]);
+    const absex = Math.abs(ex);
+    const short = absex >= fdigits;
+    const rest = short
+        ? width - 3 + (absex >= 10 ? 0 : 1) - (ex < 0 ? 1 : 0)
+        : width - absex + (ex < 0 ? -ex : 0);
+    return v.toLocaleString(undefined, {
+        signDisplay: "always",
+        useGrouping: false,
+        notation: short ? "scientific" : "standard",
+        maximumFractionDigits: rest,
+        minimumFractionDigits: rest
+    });
+};

package/src/lib/components/block/controls/props/misc/utils.ts

@@ -0,0 +1,38 @@
+import type { Detailed, Unionized, PropType, Prop, NonNamedProp, SpecialProp } from "../../types";
+
+type TypesWithValue = "table" | "tuple" | "select";
+type Values<T extends TypesWithValue> = Detailed<PropType<T>>["values"];
+
+export function getValues(info: Unionized<PropType<"select">>): Values<"select">;
+export function getValues(info: Unionized<PropType<"table">>): Values<"table">;
+export function getValues(info: Unionized<PropType<"tuple">>): Values<"tuple">;
+// eslint-disable-next-line func-style
+export function getValues(
+    info: Unionized<PropType<TypesWithValue>>
+): Detailed<PropType<TypesWithValue>>["values"] {
+    return info instanceof Array ? info[2] : info.values;
+}
+
+export const getMin = (info: Unionized<PropType<"range">>): number => {
+    return info instanceof Array ? info[2] : info.min;
+};
+
+export const getType = (info: Prop | SpecialProp) => {
+    return info instanceof Array ? info[1] : info.type;
+};
+
+export const getFormat = (info: Unionized<PropType<"color">>) => {
+    return info instanceof Array ? info[2] : info.format;
+};
+
+export const getName = (info: Prop | SpecialProp) => {
+    return info instanceof Array ? info[0] : info.name;
+};
+
+export const getClick = (info: SpecialProp) => {
+    return info instanceof Array ? info[2] : info.click;
+};
+
+export const addName = (name: string, info: NonNamedProp): Prop => {
+    return info instanceof Array ? [name, ...info] : { name, ...info };
+};

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

@@ -0,0 +1,105 @@
+type Types =
+    | "text"
+    | "color"
+    | "number"
+    | "select"
+    | "range"
+    | "toggle"
+    | "tuple"
+    | "table"
+    | "button";
+type ColorFormat = "hsl" | "hsla" | "rgb" | "rgba" | "hex" | "hexa";
+
+// prettier-ignore
+export type PropType<T extends Types> =
+    T extends "text" ? [
+        [ name: string, type: T ],
+        { name: string; type: T; }
+    ]
+    : T extends "color" ? [
+        [ name: string, type: T, format: ColorFormat ],
+        { name: string; type: T; format: ColorFormat; }
+    ]
+    : T extends "number" ? [
+        [ name: string, type: T ],
+        { name: string; type: T; }
+    ]
+    : T extends "toggle" ? [
+        [ 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 "table" ? [
+        // 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[]; }
+    ]
+    : T extends "button" ? [
+        [ name: string, type: "button", click: () => (() => void) ],
+        { name: string; type: "button"; click: () => (() => void); }
+    ]
+    : never;
+
+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 =
+    | [ name: string, type: "text" ]
+    | { name: string; type: "text"; }
+    | [ name: string, type: "color", format: ColorFormat ]
+    | { name: string; type: "color"; format: ColorFormat; }
+    | [ name: string, type: "number" ]
+    | { name: string; type: "number"; }
+    | [ name: string, type: "toggle" ]
+    | { name: string; type: "toggle"; }
+    | [ 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: "table", values: Prop[] ]
+    | { name: string; type: "table"; values: Prop[]; };
+
+export type SpecialProp =
+    | [name: string, type: "button", click: () => () => void]
+    | { name: string; type: "button"; click: () => () => void };
+
+// prettier-ignore
+export type NonNamedProp =
+    | [ type: "text" ]
+    | { type: "text"; }
+    | [ type: "color", format: ColorFormat ]
+    | { type: "color"; format: ColorFormat; }
+    | [ type: "number" ]
+    | { type: "number"; }
+    | [ type: "toggle" ]
+    | { type: "toggle"; }
+    | [ 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: "table", values: Prop[] ]
+    | { type: "table"; values: Prop[]; };
+
+export type Event = string;

package/src/lib/components/block/icons/Button.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    let {
+        title = "",
+        scale = false,
+        onclick,
+        onkeypress,
+        children
+    } = $props<{
+        title?: string;
+        scale?: boolean;
+        onclick?: (e: MouseEvent) => void;
+        onkeypress?: (e:  KeyboardEvent) => void;
+        children?: Snippet
+    }>();
+</script>
+
+<div onclick={onclick} onkeypress={onkeypress} role="none" {title} class:scale>
+    {@render children?.()}
+</div>
+
+<style>
+    div {
+        width: 100%;
+        height: 100%;
+        display: grid;
+        place-items: center;
+        transition: transform var(--i-nil-doc-transition-time);
+    }
+
+    div.scale:hover {
+        transform: scale(1.5);
+    }
+
+    div > :global(svg) {
+        width: 100%;
+        height: 100%;
+        stroke-width: 3;
+        stroke: currentColor;
+        fill: currentColor;
+    }
+</style>

package/src/lib/components/block/icons/ControlView.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+    let {
+        mode = "props"
+    }: {
+        mode: "props" | "events"
+    } = $props();
+</script>
+
+<svg viewBox="-50 -50 100 100">
+    <rect width="60" height="60" x="-30" y="-30" fill="transparent" />
+    <rect
+        x={"props" === mode ? 0 : -20}
+        class="mv"
+        height="40"
+        width="20"
+        y="-20"
+        rx="2"
+        ry="2"
+        fill="transparent"
+    />
+    <polygon transform="translate(5, 0)" points="-15,-2 1,-2, 1,-6 6,0 1,6 1,2 -15,2" />
+</svg>
+
+<style>
+    .mv {
+        transition: x var(--i-nil-doc-transition-time);
+    }
+</style>

package/src/lib/components/block/icons/Position.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+    let {
+        position = "hidden"
+    }: {
+        position: "hidden" | "bottom" | "right";
+    } = $props();
+
+    let bottom = $derived("bottom" === position);
+    let right = $derived("right" === position);
+</script>
+
+<svg viewBox="-50 -50 100 100">
+    <rect width="60" x="-30" height="60" y="-30" fill="transparent" />
+    <rect width="60" x="-30" height={bottom ? "20" : "0"} y={bottom ? "10" : "30"} />
+    <rect
+        width="60"
+        x="-30"
+        height={right ? "20" : "0"}
+        y={right ? "10" : "30"}
+        transform="rotate(-90)"
+    />
+</svg>
+
+<style>
+    svg {
+        stroke-width: 3;
+        fill: currentColor;
+    }
+
+    rect:nth-child(n + 2) {
+        transition:
+            height var(--i-nil-doc-transition-time),
+            x var(--i-nil-doc-transition-time),
+            y var(--i-nil-doc-transition-time);
+    }
+</style>

package/src/lib/components/block/types.d.ts

@@ -0,0 +1,9 @@
+export type ValueType =
+    | undefined
+    | boolean
+    | number
+    | string
+    | ValueType[]
+    | {
+          [key: string]: ValueType;
+      };

package/src/lib/components/block/utils.test.ts

@@ -0,0 +1,82 @@
+import { resolve as SUT } from "./utils";
+
+import { describe, it, expect } from "vitest";
+
+describe("resolve basic", () => {
+    it("returns a copy of an object", () => {
+        const input = {
+            dummy: "value",
+            nest: {
+                object: { key: "object" },
+                array: [{ key: 1 }, { key: "1" }]
+            }
+        };
+        const output: typeof input = SUT(input, {});
+        // not equal means that they are not of the same object reference
+        expect(output).is.not.equal(input);
+        // deep equal means that they are compared recursively (deep check)
+        expect(output).is.deep.equal(input);
+        expect(output.nest).is.not.equal(input.nest);
+        expect(output.nest).is.deep.equal(input.nest);
+        expect(output.nest.object).is.not.equal(input.nest.object);
+        expect(output.nest.object).is.deep.equal(input.nest.object);
+        expect(output.nest.array).is.not.equal(input.nest.array);
+        expect(output.nest.array).is.deep.equal(input.nest.array);
+        expect(output.nest.array[0]).is.not.equal(input.nest.array[0]);
+        expect(output.nest.array[0]).is.deep.equal(input.nest.array[0]);
+        expect(output.nest.array[1]).is.not.equal(input.nest.array[1]);
+        expect(output.nest.array[1]).is.deep.equal(input.nest.array[1]);
+    });
+
+    it("returns a values with full override", () => {
+        const input = {
+            dummy: "value",
+            nest: {
+                object: { key: "object" },
+                array: [{ key: 1 }, ["in_array"]]
+            }
+        };
+        const override = {
+            dummy: "value_override",
+            nest: {
+                object: { key: "object_override" },
+                array: [{ key: 2 }, ["in_array_override"]]
+            }
+        };
+        const output = SUT(input, override);
+
+        const check = {
+            dummy: "value_override",
+            nest: {
+                object: { key: "object_override" },
+                array: [{ key: 2 }, ["in_array_override"]]
+            }
+        };
+        expect(output).is.deep.equal(check);
+    });
+
+    it("returns a values with partial override", () => {
+        const input = {
+            dummy: "value",
+            nest: {
+                object: { key: "object" },
+                array: [{ key: 1 }, ["in_array"]]
+            }
+        };
+        const override = {
+            nest: {
+                array: [{ key: 200 }]
+            }
+        };
+        const output = SUT(input, override);
+
+        const check = {
+            dummy: "value",
+            nest: {
+                object: { key: "object" },
+                array: [{ key: 200 }, ["in_array"]]
+            }
+        };
+        expect(output).is.deep.equal(check);
+    });
+});

package/src/lib/components/block/utils.ts

@@ -0,0 +1,40 @@
+import type { ValueType } from "./types";
+
+type VTArray = ValueType[];
+type VTObject = Record<string, ValueType>;
+
+const resolveArray = (d: VTArray, p: VTArray) => {
+    const ret: VTArray = [];
+    for (let i = 0; i < d.length; ++i) {
+        if (d[i] instanceof Array) {
+            ret.push(resolveArray(d[i] as VTArray, (p[i] ?? []) as VTArray));
+        } else if (d[i] instanceof Object) {
+            // eslint-disable-next-line no-use-before-define
+            ret.push(resolveObject(d[i] as VTObject, (p[i] ?? {}) as VTObject));
+        } else {
+            ret.push(p[i] ?? d[i]);
+        }
+    }
+    return ret;
+};
+
+const resolveObject = (d: VTObject, p: VTObject) => {
+    const ret: VTObject = {};
+    for (const [key, value] of Object.entries(d)) {
+        if (value instanceof Array) {
+            ret[key] = resolveArray(value, (p[key] ?? []) as VTArray);
+        } else if (value instanceof Object) {
+            ret[key] = resolveObject(value, (p[key] ?? {}) as VTObject);
+        } else {
+            ret[key] = p[key] ?? value;
+        }
+    }
+    return ret;
+};
+
+export const resolve = <Args = Record<string, ValueType>>(
+    destination: VTObject,
+    override: VTObject
+) => {
+    return resolveObject(destination, override) as Args;
+};

package/src/lib/components/context.ts

@@ -0,0 +1,10 @@
+import { setContext, getContext } from "svelte";
+import { writable } from "svelte/store";
+import type { Writable } from "svelte/store";
+
+const theme = Symbol();
+
+export type Theme = "light" | "dark";
+
+export const getTheme = () => getContext<Writable<boolean> | undefined>(theme) ?? writable(true);
+export const initTheme = () => setContext<Writable<boolean>>(theme, writable(true));