@nil-/doc 0.2.49 → 0.2.51

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

@@ -1,3 +1,17 @@
+<script>export let depth;
+export let name;
+export let expand = void 0;
+</script>
+
+<div class="override" style:padding-left={`${depth}px`} title={name}>
+    <div class="icon" class:expand={expand === true}>
+        <div>
+            {expand === undefined ? "-" : ">"}
+        </div>
+    </div>
+    <span>{name}</span>
+</div>
+
 <style>
     .override {
         overflow: hidden;
@@ -8,7 +22,6 @@
         display: grid;
         grid-template-columns: 20px 1fr;
         align-items: center;
-        box-sizing: border-box;
     }
 
     .icon {
@@ -17,7 +30,7 @@
         justify-content: center;
         height: 15px;
         width: 15px;
-        transition: transform 350ms;
+        transition: transform var(--i-nil-doc-transition-time);
     }
 
     .icon.expand {
@@ -28,17 +41,3 @@
         margin: auto;
     }
 </style>
-
-<script>export let depth;
-export let name;
-export let expand = void 0;
-</script>
-<div class="override" style:padding-left={`${depth}px`} title={name}>
-    <div class="icon" class:expand={expand === true}>
-        <div>
-            {expand === undefined ? "-" : ">"}
-        </div>
-    </div>
-    <span>{name}</span>
-</div>
-

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

@@ -1,13 +1,32 @@
 <script>import { getTheme } from "../../../../context";
 const dark = getTheme();
 </script>
+
+<!--
+    <div> this component
+        <div> Header
+            <div></div>
+            <div></div>
+            <div></div>
+        </div>
+        <div> Controls
+            <div></div>
+            <div></div>
+            <div></div>
+        </div>
+        ...
+    </div>
+-->
+<div class:dark={$dark}>
+    <slot />
+</div>
+
 <style>
     div {
-        width: 100%;
-        min-width: 500px;
-        overflow: hidden;
         display: grid;
-        grid-auto-rows: 30px;
+        overflow: hidden;
+        min-width: 31.25rem;
+        grid-auto-rows: 2rem;
         box-sizing: border-box;
     }
 
@@ -20,70 +39,43 @@ const dark = getTheme();
 
     div > :global(div) {
         display: grid;
-        width: 100%;
-        padding: 2px 0px;
-        grid-template-columns: minmax(250px, 1fr) 200px 40px;
+        grid-template-columns: minmax(15rem, 1fr) 12.5rem 2.5rem;
     }
 
     div > :global(div:first-child) {
-        text-align: center;
         font-weight: bold;
+        place-items: center;
+    }
+
+    div > :global(div > div:not(:first-child)) {
+        display: grid;
+        place-items: center;
     }
 
     div > :global(div > div:not(:first-child) > *) {
         width: 100%;
-        height: 100%;
+        height: 80%;
+        font-size: 1rem;
     }
 
     /* colors */
     div {
-        --pri-color: hsl(0, 0%, 100%);
-        --sec-color: hsl(210, 29%, 97%);
-        --hover-color: hsl(210, 100%, 90%);
-        --outline-color: hsl(0, 0%, 0%);
-    }
-
-    div.dark {
-        --pri-color: hsl(213, 26%, 7%);
-        --sec-color: hsl(213, 26%, 11%);
-        --hover-color: hsl(203, 100%, 15%);
-        --outline-color: hsl(200, 6%, 80%);
-    }
-
-    div {
-        transition: background-color 150ms;
+        transition: background-color var(--i-nil-doc-transition-time);
         background-repeat: repeat;
-        background-size: 100% 60px;
-        background-image: linear-gradient(to bottom, var(--pri-color) 30px, var(--sec-color) 30px);
+        background-size: 100% 4rem;
+        background-image: linear-gradient(
+            to bottom,
+            var(--i-nil-doc-controls-p) 2rem,
+            var(--i-nil-doc-controls-s) 2rem
+        );
     }
 
     div > :global(div:nth-child(n + 2):hover) {
-        background-color: var(--hover-color);
+        background-color: var(--i-nil-doc-controls-hover);
     }
 
     div > :global(div:hover .tooltip) {
-        background-color: var(--pri-color);
-        outline: var(--outline-color) 1px solid;
+        background-color: var(--i-nil-doc-controls-p);
+        outline: 1px solid var(--i-nil-doc-block-outline-color);
     }
 </style>
-
-
-<!--
-    <div> this component
-        <div> Header
-            <div></div>
-            <div></div>
-            <div></div>
-        </div>
-        <div> Controls
-            <div></div>
-            <div></div>
-            <div></div>
-        </div>
-        ...
-    </div>
--->
-<div class:dark={$dark}>
-    <slot />
-</div>
-

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

@@ -1,10 +1,10 @@
 import type { ValueType } from "../../../types";
 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;
+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<"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<"switch">>): boolean;
+export declare function defaulter(i: Prop): ValueType;

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

@@ -1,70 +1,50 @@
+import { getType, getValues, getMin } from "./utils";
 // eslint-disable-next-line func-style
-export function getDefault(i) {
-    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;
-        }
+export function defaulter(i) {
+    switch (getType(i)) {
+        case "object":
+            // 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 "";
+        case "select":
+            return getValues(i)[0] ?? "";
+        case "number":
+            return 0;
+        case "range":
+            return getMin(i);
+        case "switch":
+        default:
+            return false;
     }
 }
-const getObjectDefaults = (info) => {
+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]] = getDefault(v);
+            ret[v[0]] = defaulter(v);
         }
         else {
-            ret[v.name] = getDefault(v);
+            ret[v.name] = defaulter(v);
         }
     }
     return ret;
 };
-const getTupleDefaults = (info) => {
+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(getDefault([`${i}`, ...v]));
+            ret.push(defaulter([`${i}`, ...v]));
         }
         else {
-            ret.push(getDefault({ name: `${i}`, ...v }));
+            ret.push(defaulter({ name: `${i}`, ...v }));
         }
     }
     return ret;

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

@@ -0,0 +1,11 @@
+import type { Detailed, Unionized, PropType, Prop, NonNamedProp } from "../../types";
+type TypesWithValue = "object" | "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<"tuple">>): Values<"tuple">;
+export declare const getMin: (info: Unionized<PropType<"range">>) => number;
+export declare const getType: (info: Prop) => "number" | "object" | "select" | "text" | "color" | "switch" | "range" | "tuple";
+export declare const getName: (info: Prop) => string;
+export declare const addName: (name: string, info: NonNamedProp) => Prop;
+export {};

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

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

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

@@ -1,4 +1,4 @@
-type Types = "text" | "number" | "select" | "range" | "switch" | "tuple" | "object";
+type Types = "text" | "color" | "number" | "select" | "range" | "switch" | "tuple" | "object";
 
 // prettier-ignore
 export type PropType<T extends Types> =
@@ -6,6 +6,10 @@ export type PropType<T extends Types> =
         [ name: string, type: T ],
         { name: string; type: T; }
     ]
+    : T extends "color" ? [
+        [ name: string, type: T ],
+        { name: string; type: T; }
+    ]
     : T extends "number" ? [
         [ name: string, type: T ],
         { name: string; type: T; }
@@ -44,6 +48,8 @@ export type Unionized<T extends PropTyoe> = T[number];
 export type Prop =
     | [ name: string, type: "text" ]
     | { name: string; type: "text"; }
+    | [ name: string, type: "color" ]
+    | { name: string; type: "color"; }
     | [ name: string, type: "number" ]
     | { name: string; type: "number"; }
     | [ name: string, type: "switch" ]
@@ -60,9 +66,11 @@ export type Prop =
     | { name: string; type: "object"; values: Prop[]; };
 
 // prettier-ignore
-type NonNamedProp =
+export type NonNamedProp =
     | [ type: "text" ]
     | { type: "text"; }
+    | [ type: "color" ]
+    | { type: "color"; }
     | [ type: "number" ]
     | { type: "number"; }
     | [ type: "switch" ]

package/components/block/icons/Button.svelte

@@ -0,0 +1,30 @@
+<script>
+    export let title = "";
+    export let scale = false;
+</script>
+
+<div on:click on:keypress {title} class:scale>
+    <slot />
+</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/components/block/icons/Button.svelte.d.ts

@@ -0,0 +1,35 @@
+/** @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: {};
+    };
+};
+export {};

package/components/block/icons/ControlView.svelte

@@ -0,0 +1,14 @@
+<script context="module"></script>
+
+<script>import { tweened } from "svelte/motion";
+export let mode = "prop";
+const v = tweened(mode === "event" ? 1 : 0, { duration: 150 });
+$:
+  $v = mode === "event" ? 1 : 0;
+</script>
+
+<svg viewBox="-50 -50 100 100">
+    <rect width="60" height="60" x="-30" y="-30" fill="transparent" />
+    <rect height="40" width="20" x={-$v * 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>

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

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        mode?: "prop" | "event" | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+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 {};

package/components/block/icons/Position.svelte

@@ -0,0 +1,50 @@
+<script context="module">const bottom = {
+  width: 60,
+  height: 20,
+  x: -30,
+  y: 10
+};
+const right = {
+  width: 20,
+  height: 60,
+  x: 10,
+  y: -30
+};
+const nobottom = {
+  width: 60,
+  height: 0,
+  x: -30,
+  y: 30
+};
+const noright = {
+  width: 0,
+  height: 60,
+  x: 30,
+  y: -30
+};
+const settings = {
+  hidden: [nobottom, noright],
+  bottom: [bottom, noright],
+  right: [nobottom, right]
+};
+</script>
+
+<script>import { tweened } from "svelte/motion";
+export let position = "hidden";
+const offset = tweened(settings[position], { duration: 150 });
+$:
+  $offset = settings[position];
+</script>
+
+<svg viewBox="-50 -50 100 100">
+    <rect width="60" height="60" x="-30" y="-30" fill="transparent" />
+    <rect {...$offset[0]} />
+    <rect {...$offset[1]} />
+</svg>
+
+<style>
+    svg {
+        stroke-width: 3;
+        fill: currentColor;
+    }
+</style>

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

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        position?: "bottom" | "right" | "hidden" | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+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 {};

package/components/etc/Base.svelte

@@ -0,0 +1,58 @@
+<script>export let dark = true;
+</script>
+
+<div class:dark>
+    <slot />
+</div>
+
+<style>
+    @import url("https://fonts.googleapis.com/css?family=Fira%20Code");
+
+    div {
+        width: 100%;
+        height: 100%;
+        font-family: "Fira Code", "Courier New", Courier, monospace;
+
+        --i-nil-doc-nav-hovered: var(--nil-doc-nav-hovered, hsla(203, 98%, 50%, 0.07));
+        --i-nil-doc-nav-selected: var(--nil-doc-nav-selected, hsla(203, 98%, 50%, 0.822));
+        --i-nil-doc-nav-selected-color: var(--nil-doc-nav-selected-color, black);
+
+        --i-nil-doc-transition-time: var(--nil-doc-transition-time, 350ms);
+    }
+
+    div {
+        --i-nil-doc-color: var(--nil-doc-color, hsl(0, 0%, 0%));
+        --i-nil-doc-color-scheme: var(--nil-doc-color-scheme, light);
+
+        --i-nil-doc-bg-color: var(--nil-doc-bg-color, hsl(0, 0%, 98%));
+        --i-nil-doc-content-outline-color: var(--nil-doc-content-outline-color, hsla(0, 0%, 0%, 0.3));
+
+        --i-nil-doc-block-bg-color: var(--nil-doc-block-bg-color, hsla(0, 0%, 98%, 0.3));
+        --i-nil-doc-block-outline-color: var(--nil-doc-block-outline-color, hsla(0, 0%, 0%, 0.3));
+
+        --i-nil-doc-container-p: var(--nil-doc-container-p, hsl(0, 2%, 70%));
+        --i-nil-doc-container-s: var(--nil-doc-container-s, hsl(0, 0%, 0%));
+
+        --i-nil-doc-controls-p: var(--nil-doc-controls-p, hsl(0, 0%, 100%));
+        --i-nil-doc-controls-s: var(--nil-doc-controls-s, hsl(210, 29%, 97%));
+        --i-nil-doc-controls-hover: var(--nil-doc-controls-hover, hsl(210, 100%, 90%));
+    }
+
+    div.dark {
+        --i-nil-doc-color: var(--nil-doc-color, hsl(0, 0%, 80%));
+        --i-nil-doc-color-scheme: var(--nil-doc-color-scheme, dark);
+    
+        --i-nil-doc-bg-color: var(--nil-doc-bg-color, hsl(210, 6%, 7%));
+        --i-nil-doc-content-outline-color: var(--nil-doc-content-outline-color, hsla(0, 0%, 100%, 0.3));
+    
+        --i-nil-doc-block-bg-color: var(--nil-doc-block-bg-color, hsla(200, 4%, 7%, 0.3));
+        --i-nil-doc-block-outline-color: var(--nil-doc-block-outline-color, hsla(0, 0%, 1000%, 0.3));
+
+        --i-nil-doc-container-p: var(--nil-doc-container-p, hsl(0, 2%, 40%));
+        --i-nil-doc-container-s: var(--nil-doc-container-s, hsl(0, 0%, 100%));
+
+        --i-nil-doc-controls-p: var(--nil-doc-controls-p, hsl(213, 26%, 7%));
+        --i-nil-doc-controls-s: var(--nil-doc-controls-s, hsl(213, 26%, 11%));
+        --i-nil-doc-controls-hover: var(--nil-doc-controls-hover, hsl(203, 100%, 15%));
+    }
+</style>

package/components/etc/Base.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        dark?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+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 {};