@nil-/doc 1.0.0 → 2.0.0

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

@@ -0,0 +1,45 @@
+<script lang="ts">let {
+  depth,
+  name,
+  expand
+} = $props();
+</script>
+
+<div class="override" style:padding-left={`${depth}rem`} title={name}>
+    <div class="icon" class:expand={true === expand}>
+        <div>
+            {undefined === expand ? "-" : ">"}
+        </div>
+    </div>
+    <span>{name}</span>
+</div>
+
+<style>
+    .override {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        padding-right: 0.5rem;
+
+        display: grid;
+        grid-template-columns: 1.25rem 1fr;
+        align-items: center;
+    }
+
+    .icon {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        height: 1rem;
+        width: 1rem;
+        transition: transform var(--i-nil-doc-transition-time);
+    }
+
+    .icon.expand {
+        transform: rotate(90deg);
+    }
+
+    .icon > div {
+        margin: auto;
+    }
+</style>

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

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    depth: number;
+    name: string;
+    expand?: boolean;
+};
+declare const Name: import("svelte").Component<$$ComponentProps, {}, "">;
+type Name = ReturnType<typeof Name>;
+export default Name;

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

@@ -0,0 +1,90 @@
+<script lang="ts">import { getTheme } from "../../../../context";
+let {
+  disabled = false,
+  toggled = $bindable(false),
+  onkeypress
+} = $props();
+const onclick = (e) => {
+  e.stopPropagation();
+  if (!disabled) {
+    toggled = !toggled;
+  }
+};
+const dark = getTheme();
+</script>
+
+<div>
+    <svg
+        viewBox="-30 -30 60 60"
+        {onclick}
+        {onkeypress}
+        role="none"
+        class:disabled
+        class:dark={$dark}
+    >
+        <rect width="80" height="40" x="-40" y="-20" rx="20" ry="20" />
+        <circle r="16" cx={toggled ? 20 : -20} />
+    </svg>
+</div>
+
+<style>
+    div {
+        width: 2.5rem;
+        height: 1.25rem;
+    }
+
+    svg {
+        cursor: pointer;
+        width: 100%;
+        height: 100%;
+    }
+
+    rect {
+        stroke-width: 2;
+    }
+
+    .disabled {
+        cursor: not-allowed;
+        filter: opacity(0.5);
+    }
+
+    circle {
+        transition: cx 175ms;
+    }
+
+    rect {
+        stroke: hsl(0, 0%, 70%);
+        fill: hsl(0, 0%, 90%);
+    }
+
+    .dark > rect {
+        stroke: hsl(0, 0%, 52%);
+        fill: hsl(0, 0%, 23%);
+    }
+
+    .disabled > rect {
+        stroke: hsl(210, 2%, 81%);
+        fill: hsl(220, 14%, 96%);
+    }
+
+    .dark.disabled > rect {
+        stroke: hsl(0, 0%, 38%);
+        fill: hsl(0, 0%, 21%);
+    }
+
+    circle {
+        fill: hsl(212, 100%, 50%);
+    }
+
+    .dark > circle {
+        fill: hsl(212, 100%, 80%);
+    }
+
+    .disabled > circle {
+        fill: hsl(0, 0%, 80%);
+    }
+
+    .dark.disabled > circle {
+        fill: hsl(0, 0%, 46%);
+    }
+</style>

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

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    disabled?: boolean;
+    toggled?: boolean;
+    onkeypress?: (e: KeyboardEvent) => void;
+};
+declare const Toggle: import("svelte").Component<$$ComponentProps, {}, "toggled">;
+type Toggle = ReturnType<typeof Toggle>;
+export default Toggle;

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

@@ -0,0 +1,11 @@
+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<"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;
+export declare function defaulter(i: Unionized<PropType<"text">>): string;
+export declare function defaulter(i: Unionized<PropType<"toggle">>): boolean;
+export declare function defaulter(i: Unionized<PropType<"color">>): string;
+export declare function defaulter(i: Prop): ValueType;

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

@@ -0,0 +1,50 @@
+import { getType, getValues, getMin } from "./utils";
+// eslint-disable-next-line func-style
+export function defaulter(i) {
+    switch (getType(i)) {
+        case "table":
+            // eslint-disable-next-line no-use-before-define
+            return defaulterO(i);
+        case "tuple":
+            // eslint-disable-next-line no-use-before-define
+            return defaulterT(i);
+        case "text":
+            return "";
+        case "color":
+            return "#ffffffff";
+        case "select":
+            return getValues(i)[0] ?? "";
+        case "number":
+            return 0;
+        case "range":
+            return getMin(i);
+        default:
+            return false;
+    }
+}
+const defaulterO = (info) => {
+    const ret = {};
+    const values = info instanceof Array ? info[2] : info.values;
+    for (const v of values) {
+        if (v instanceof Array) {
+            ret[v[0]] = defaulter(v);
+        }
+        else {
+            ret[v.name] = defaulter(v);
+        }
+    }
+    return ret;
+};
+const defaulterT = (info) => {
+    const ret = [];
+    const values = info instanceof Array ? info[2] : info.values;
+    for (const [i, v] of values.entries()) {
+        if (v instanceof Array) {
+            ret.push(defaulter([`${i}`, ...v]));
+        }
+        else {
+            ret.push(defaulter({ name: `${i}`, ...v }));
+        }
+    }
+    return ret;
+};

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

@@ -0,0 +1 @@
+export declare const nformat: (v: number, fdigits: number, width: number) => string;

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

@@ -0,0 +1,16 @@
+export const nformat = (v, fdigits, width) => {
+    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/package/components/block/controls/props/misc/utils.d.ts

@@ -0,0 +1,13 @@
+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 declare function getValues(info: Unionized<PropType<"select">>): Values<"select">;
+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" | "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;
+export declare const addName: (name: string, info: NonNamedProp) => Prop;
+export {};

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

@@ -0,0 +1,22 @@
+// eslint-disable-next-line func-style
+export function getValues(info) {
+    return info instanceof Array ? info[2] : info.values;
+}
+export const getMin = (info) => {
+    return info instanceof Array ? info[2] : info.min;
+};
+export const getType = (info) => {
+    return info instanceof Array ? info[1] : info.type;
+};
+export const getFormat = (info) => {
+    return info instanceof Array ? info[2] : info.format;
+};
+export const getName = (info) => {
+    return info instanceof Array ? info[0] : info.name;
+};
+export const getClick = (info) => {
+    return info instanceof Array ? info[2] : info.click;
+};
+export const addName = (name, info) => {
+    return info instanceof Array ? [name, ...info] : { name, ...info };
+};

package/package/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/package/components/block/icons/Button.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">let {
+  title = "",
+  scale = false,
+  onclick,
+  onkeypress,
+  children
+} = $props();
+</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/package/components/block/icons/Button.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    title?: string;
+    scale?: boolean;
+    onclick?: (e: MouseEvent) => void;
+    onkeypress?: (e: KeyboardEvent) => void;
+    children?: Snippet;
+};
+declare const Button: import("svelte").Component<$$ComponentProps, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

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

@@ -0,0 +1,25 @@
+<script lang="ts">let {
+  mode = "props"
+} = $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/package/components/block/icons/ControlView.svelte.d.ts

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

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

@@ -0,0 +1,32 @@
+<script lang="ts">let {
+  position = "hidden"
+} = $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/package/components/block/icons/Position.svelte.d.ts

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

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

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

package/package/components/block/utils.d.ts

@@ -0,0 +1,4 @@
+import type { ValueType } from "./types";
+type VTObject = Record<string, ValueType>;
+export declare const resolve: <Args = Record<string, ValueType>>(destination: VTObject, override: VTObject) => Args;
+export {};

package/package/components/block/utils.js

@@ -0,0 +1,34 @@
+const resolveArray = (d, p) => {
+    const ret = [];
+    for (let i = 0; i < d.length; ++i) {
+        if (d[i] instanceof Array) {
+            ret.push(resolveArray(d[i], (p[i] ?? [])));
+        }
+        else if (d[i] instanceof Object) {
+            // eslint-disable-next-line no-use-before-define
+            ret.push(resolveObject(d[i], (p[i] ?? {})));
+        }
+        else {
+            ret.push(p[i] ?? d[i]);
+        }
+    }
+    return ret;
+};
+const resolveObject = (d, p) => {
+    const ret = {};
+    for (const [key, value] of Object.entries(d)) {
+        if (value instanceof Array) {
+            ret[key] = resolveArray(value, (p[key] ?? []));
+        }
+        else if (value instanceof Object) {
+            ret[key] = resolveObject(value, (p[key] ?? {}));
+        }
+        else {
+            ret[key] = p[key] ?? value;
+        }
+    }
+    return ret;
+};
+export const resolve = (destination, override) => {
+    return resolveObject(destination, override);
+};

package/package/components/context.d.ts

@@ -0,0 +1,4 @@
+import type { Writable } from "svelte/store";
+export type Theme = "light" | "dark";
+export declare const getTheme: () => Writable<boolean>;
+export declare const initTheme: () => Writable<boolean>;

package/package/components/context.js

@@ -0,0 +1,5 @@
+import { setContext, getContext } from "svelte";
+import { writable } from "svelte/store";
+const theme = Symbol();
+export const getTheme = () => getContext(theme) ?? writable(true);
+export const initTheme = () => setContext(theme, writable(true));