@nil-/doc 1.0.0 → 2.0.0

package/package/components/block/Instance.svelte

@@ -0,0 +1,141 @@
+<script lang="ts" module></script>
+
+<script lang="ts" generics="Args">import { onDestroy } from "svelte";
+import { writable } from "svelte/store";
+import { resolve } from "./utils";
+import { getControls, getControlInfo, getControlValue } from "./context";
+const controls = getControls();
+const cc = getControlInfo();
+const vv = getControlValue();
+let {
+  defaults,
+  noreset = false,
+  children
+} = $props();
+let key = $state(false);
+$effect(() => {
+  key;
+  return () => {
+    key = !key;
+  };
+});
+const s_values = writable({ props: {}, events: [] });
+const updateBound = (d) => $s_values.props = resolve(d ?? {}, {});
+$effect(() => {
+  updateBound(defaults);
+});
+const focus = () => {
+  if ($vv !== s_values) {
+    $cc = controls;
+    $vv = s_values;
+  }
+};
+const unfocus = () => {
+  if ($vv === s_values) {
+    $cc = null;
+    $vv = null;
+  }
+};
+onDestroy(unfocus);
+const populate = (ext) => {
+  const obj = {};
+  const stringify = (detail) => {
+    if (detail) {
+      if ("string" === typeof detail) {
+        return detail;
+      }
+      return JSON.stringify(detail);
+    }
+    return "";
+  };
+  if (null != ext) {
+    for (const name of ext) {
+      obj[name] = (param) => {
+        const detail = stringify(param);
+        if ($s_values.events.length > 0) {
+          const last = $s_values.events[0];
+          if (last.name === name && last.detail === detail && last.count < 99) {
+            last.count += 1;
+            $s_values.events = $s_values.events;
+            return;
+          }
+        }
+        $s_values.events.unshift({ name, detail, count: 1 });
+        if ($s_values.events.length > 50) {
+          $s_values.events.pop();
+        }
+        $s_values.events = $s_values.events;
+      };
+    }
+  }
+  return obj;
+};
+let values = $state(resolve(defaults ?? {}, $s_values.props));
+let events = $state(populate($controls.events));
+const unsubs = [];
+unsubs.push(s_values.subscribe((v) => values = resolve(defaults ?? {}, v.props)));
+unsubs.push(controls.subscribe((v) => events = populate(v.events)));
+onDestroy(() => unsubs.forEach((v) => v()));
+</script>
+
+<!--
+    @component
+    See [documentation](https://mono-doc.vercel.app/3-Components/3-Block/1-Content/1-Instance) for more details.
+-->
+
+<div
+    class="instance"
+    class:selected={$vv === s_values}
+    class:controls={$controls.events.length > 0 || $controls.props.length > 0}
+    role="none"
+    onclick={focus}
+    onkeypress={null}
+>
+    <div class="content">
+        {#if children}
+            {#if noreset}
+                {@render children({ values, events, key })}
+            {:else}
+                {#key key}
+                    {@render children({ values, events, key })}
+                {/key}
+            {/if}
+        {/if}
+    </div>
+</div>
+
+<style>
+    .instance {
+        width: 100%;
+        height: 100%;
+    }
+
+    .content {
+        min-height: 6.25rem;
+        border: 1px solid var(--i-nil-doc-block-outline-color);
+    }
+
+    /* colors */
+    .instance {
+        transition: background-color var(--i-nil-doc-transition-time);
+        color: var(--i-nil-doc-color);
+        background-color: var(--i-nil-doc-bg-color);
+        border-width: 2px;
+        border-style: solid;
+        border-color: transparent;
+        box-sizing: border-box;
+    }
+
+    .instance:hover {
+        border-color: var(--i-nil-doc-instance-hovered);
+    }
+
+    .instance.controls:hover {
+        border-color: var(--i-nil-doc-instance-control-hovered);
+    }
+
+    .instance.selected,
+    .instance.selected:hover {
+        border-color: var(--i-nil-doc-instance-selected-color);
+    }
+</style>

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

@@ -0,0 +1,27 @@
+import { type Snippet } from "svelte";
+declare class __sveltets_Render<Args> {
+    props(): {
+        defaults?: Args | undefined;
+        noreset?: boolean;
+        children?: Snippet<[{
+            values: Args;
+            events: Record<string, (ev?: any) => void>;
+            key: boolean;
+        }]> | undefined;
+    };
+    events(): {};
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Args>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Args>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Args>['props']>, ReturnType<__sveltets_Render<Args>['events']>, ReturnType<__sveltets_Render<Args>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Args>['bindings']>;
+    } & ReturnType<__sveltets_Render<Args>['exports']>;
+    <Args>(internal: unknown, props: ReturnType<__sveltets_Render<Args>['props']> & {}): ReturnType<__sveltets_Render<Args>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/** See [documentation](https://mono-doc.vercel.app/3-Components/3-Block/1-Content/1-Instance) for more details. */
+declare const Instance: $$IsomorphicComponent;
+type Instance<Args> = InstanceType<typeof Instance<Args>>;
+export default Instance;

package/package/components/block/Params.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">import { getParams } from "./context";
+import { resolve } from "./utils";
+import { get } from "svelte/store";
+let {
+  tag,
+  props = {}
+} = $props();
+const params = getParams();
+const id = get(params).length;
+params.update((p) => {
+  p.push({
+    id,
+    tag: `${id}`,
+    values: {}
+  });
+  return p;
+});
+$effect(() => params.update((p) => {
+  p[id].tag = tag ?? `${id}`;
+  return p;
+}));
+$effect(() => params.update((p) => {
+  p[id].values = resolve(props, {});
+  return p;
+}));
+</script>
+
+<!--
+    @component
+    See [documentation](https://mono-doc.vercel.app/3-Components/3-Block/1-Content/2-Template/1-Params) for more details.
+-->

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

@@ -0,0 +1,9 @@
+import type { ValueType } from "./types";
+type $$ComponentProps = {
+    tag?: string | undefined;
+    props?: Record<string, ValueType>;
+};
+/** See [documentation](https://mono-doc.vercel.app/3-Components/3-Block/1-Content/2-Template/1-Params) for more details. */
+declare const Params: import("svelte").Component<$$ComponentProps, {}, "">;
+type Params = ReturnType<typeof Params>;
+export default Params;

package/package/components/block/Template.svelte

@@ -0,0 +1,52 @@
+<script lang="ts" module></script>
+
+<script lang="ts" generics="Args">import { getDefaults, getParams, getOrientation } from "./context";
+import { resolve } from "./utils";
+import Instance from "./Instance.svelte";
+import {} from "svelte";
+const params = getParams();
+const defaultsStore = getDefaults();
+const orientation = getOrientation();
+let {
+  defaults,
+  noreset = false,
+  columns = false,
+  children: cc
+} = $props();
+$effect(() => {
+  defaultsStore?.set(defaults ?? {});
+});
+$effect(() => {
+  orientation.set(columns);
+});
+let key = $state(false);
+$effect(() => {
+  key;
+  return () => {
+    key = !key;
+  };
+});
+const resolveArgs = resolve;
+</script>
+
+<!--
+    @component
+    See [documentation](https://mono-doc.vercel.app/3-Components/3-Block/1-Content/2-Template) for more details.
+-->
+
+{#each $params as param (param.id)}
+    <Instance
+        defaults={resolveArgs($defaultsStore, param.values)}
+        {noreset}
+    >
+        {#snippet children({ values, events, key })}
+            {@render cc?.({
+                id: param.id,
+                tag: param.tag,
+                values: values,
+                events: events,
+                key: key
+            })}
+        {/snippet}
+    </Instance>
+{/each}

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

@@ -0,0 +1,30 @@
+import { type Snippet } from "svelte";
+declare class __sveltets_Render<Args> {
+    props(): {
+        defaults?: Args | undefined;
+        noreset?: boolean;
+        columns?: boolean;
+        children?: Snippet<[{
+            id: number;
+            tag: string;
+            values: Args;
+            events: Record<string, (ev?: any) => void>;
+            key: boolean;
+        }]> | undefined;
+    };
+    events(): {};
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Args>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Args>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Args>['props']>, ReturnType<__sveltets_Render<Args>['events']>, ReturnType<__sveltets_Render<Args>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Args>['bindings']>;
+    } & ReturnType<__sveltets_Render<Args>['exports']>;
+    <Args>(internal: unknown, props: ReturnType<__sveltets_Render<Args>['props']> & {}): ReturnType<__sveltets_Render<Args>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/** See [documentation](https://mono-doc.vercel.app/3-Components/3-Block/1-Content/2-Template) for more details. */
+declare const Template: $$IsomorphicComponent;
+type Template<Args> = InstanceType<typeof Template<Args>>;
+export default Template;

package/package/components/block/action.d.ts

@@ -0,0 +1,12 @@
+import type { ActionReturn } from "svelte/action";
+type Options = {
+    class: string;
+    min: number;
+    w: boolean;
+    enabled: boolean;
+};
+/**
+ *  Temporary support for container query until svelte supports it
+ */
+export declare const cquery: (div: HTMLDivElement, options: Options) => ActionReturn<Options>;
+export {};

package/package/components/block/action.js

@@ -0,0 +1,26 @@
+/**
+ *  Temporary support for container query until svelte supports it
+ */
+export const cquery = (div, options) => {
+    let o = options;
+    const check = () => div.classList.toggle(o.class, (o.w ? div.clientWidth : div.clientHeight) > o.min);
+    const observer = new ResizeObserver(check);
+    if (o.enabled) {
+        observer.observe(div);
+    }
+    return {
+        update: (options) => {
+            if (o.enabled !== options.enabled) {
+                if (!o.enabled && options.enabled) {
+                    observer.observe(div);
+                }
+                else {
+                    observer.disconnect();
+                }
+            }
+            o = options;
+            check();
+        },
+        destroy: () => o.enabled && observer.disconnect()
+    };
+};

package/package/components/block/context.d.ts

@@ -0,0 +1,26 @@
+import type { Writable } from "svelte/store";
+import type { Prop, SpecialProp, Event } from "./controls/types";
+import type { ValueType } from "./types";
+export type Params = {
+    id: number;
+    tag: string;
+    values: Record<string, ValueType>;
+};
+export declare const initParams: () => Writable<Params[]>, getParams: () => Writable<Params[]>;
+export type Controls = {
+    props: (Prop | SpecialProp)[];
+    events: Event[];
+};
+export type ControlValue = {
+    props: Record<string, any>;
+    events: {
+        name: string;
+        detail: string;
+        count: number;
+    }[];
+};
+export declare const initControls: () => Writable<Controls>, getControls: () => Writable<Controls>;
+export declare const initDefaults: () => Writable<Record<string, ValueType>>, getDefaults: () => Writable<Record<string, ValueType>>;
+export declare const initOrientation: () => Writable<boolean>, getOrientation: () => Writable<boolean>;
+export declare const initControlInfo: () => Writable<Writable<Controls> | null>, getControlInfo: () => Writable<Writable<Controls> | null>;
+export declare const initControlValue: () => Writable<Writable<ControlValue> | null>, getControlValue: () => Writable<Writable<ControlValue> | null>;

package/package/components/block/context.js

@@ -0,0 +1,20 @@
+import { getContext, setContext } from "svelte";
+import { writable } from "svelte/store";
+const create = (defaulter) => {
+    const symbol = Symbol();
+    return {
+        init: () => setContext(symbol, writable(defaulter())),
+        get: () => getContext(symbol)
+    };
+};
+export const { init: initParams, get: getParams } = create(() => []);
+// prettier-ignore
+export const { init: initControls, get: getControls } = create(() => ({ props: [], events: [] }));
+// prettier-ignore
+export const { init: initDefaults, get: getDefaults } = create(() => ({}));
+// prettier-ignore
+export const { init: initOrientation, get: getOrientation } = create(() => false);
+// prettier-ignore
+export const { init: initControlInfo, get: getControlInfo } = create(() => null);
+// prettier-ignore
+export const { init: initControlValue, get: getControlValue } = create(() => null);

package/package/components/block/controls/Controls.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">import Styler from "./Styler.svelte";
+import Props from "./props/Props.svelte";
+import Events from "./events/Events.svelte";
+import { getControlInfo, getControlValue } from "../context";
+import Button from "../icons/Button.svelte";
+import ControlView from "../icons/ControlView.svelte";
+import Position from "../icons/Position.svelte";
+import { onDestroy } from "svelte";
+const controls = getControlInfo();
+const values = getControlValue();
+let cc = $state($controls);
+let vv = $state($values);
+const unsubs = [];
+unsubs.push(controls.subscribe((v) => cc = v));
+unsubs.push(values.subscribe((v) => vv = v));
+let {
+  mode = $bindable("props"),
+  position = $bindable("bottom")
+} = $props();
+const cyclePosition = () => {
+  switch (position) {
+    case "bottom":
+      position = "right";
+      break;
+    case "right":
+      position = "bottom";
+      break;
+  }
+};
+const cycleMode = () => {
+  switch (mode) {
+    case "events":
+      mode = "props";
+      break;
+    case "props":
+      mode = "events";
+      break;
+  }
+};
+onDestroy(() => unsubs.forEach((v) => v()));
+</script>
+
+<Styler type={mode}>
+    <div class="header">
+        <div class="buttons">
+            <Button scale onclick={cyclePosition} title={position}>
+                <Position {position} />
+            </Button>
+            <Button scale onclick={cycleMode} title={mode}>
+                <ControlView {mode} />
+            </Button>
+        </div>
+        {#if "props" === mode}
+            <div>Name</div>
+            <div>Value</div>
+            <div>Use</div>
+        {:else if "events" === mode}
+            <div>Events</div>
+            <div>Detail</div>
+        {/if}
+    </div>
+    {#key $values && $controls}
+        {#if cc != null && $cc != null && vv != null && $vv != null}
+            <Props values={vv} infos={$cc.props} visible={"props" === mode} />
+            <Events events={$vv.events} visible={"events" === mode} />
+        {/if}
+    {/key}
+</Styler>
+
+<style>
+    .header {
+        position: relative;
+    }
+
+    .buttons {
+        position: absolute;
+        width: 3.5rem;
+        height: 1.75rem;
+        left: 0.3rem;
+        top: 0.15rem;
+        display: flex;
+        cursor: pointer;
+    }
+</style>

package/package/components/block/controls/Controls.svelte.d.ts

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

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

@@ -0,0 +1,79 @@
+<script lang="ts">let {
+  type,
+  children
+} = $props();
+</script>
+
+<div class:props={"props" === type} class:events={"events" === type}>
+    {@render children?.()}
+</div>
+
+<style>
+    div {
+        display: grid;
+        min-width: 31.25rem;
+        height: 100%;
+        grid-auto-rows: 2rem;
+        box-sizing: border-box;
+        user-select: none;
+    }
+
+    div > :global(div) {
+        display: grid;
+    }
+
+    div.props > :global(div) {
+        grid-template-columns: minmax(15rem, 1fr) 12.5rem 2.5rem;
+    }
+
+    div.events > :global(div) {
+        grid-template-columns: 2fr 3fr;
+        align-items: center;
+    }
+
+    div > :global(div:first-child) {
+        font-weight: bold;
+        place-items: center;
+    }
+
+    div.props > :global(div > div:nth-child(2)) {
+        display: grid;
+        place-items: center;
+    }
+
+    div.props > :global(div > div:nth-child(3)) {
+        margin: auto;
+    }
+
+    div > :global(div > div > .control) {
+        width: 100%;
+        height: 80%;
+        box-sizing: border-box;
+    }
+
+    div > :global(div > div > .control[disabled]) {
+        cursor: not-allowed;
+        filter: opacity(0.5);
+    }
+
+    /* colors */
+    div {
+        transition: background-color var(--i-nil-doc-transition-time);
+        background-repeat: repeat;
+        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(--i-nil-doc-controls-hover);
+    }
+
+    div > :global(div:hover .tooltip) {
+        background-color: var(--i-nil-doc-controls-p);
+        outline: 1px solid var(--i-nil-doc-block-outline-color);
+    }
+</style>

package/package/components/block/controls/Styler.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    type: "props" | "events";
+    children?: Snippet;
+};
+declare const Styler: import("svelte").Component<$$ComponentProps, {}, "">;
+type Styler = ReturnType<typeof Styler>;
+export default Styler;

package/package/components/block/controls/events/Events.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">let {
+  visible,
+  events = []
+} = $props();
+</script>
+
+{#if visible}
+    {#each events as { count, detail, name }, i (i)}
+        <div>
+            <div class="name">
+                <div>{name}</div>
+                {#if count > 1}
+                    <div class="count">
+                        [{count.toString().padStart(2, "0")}]
+                    </div>
+                {/if}
+            </div>
+            <div>{detail}</div>
+        </div>
+    {/each}
+{/if}
+
+<style>
+    .name {
+        padding: 0rem 0.5rem;
+        display: grid;
+        place-content: center;
+        grid-auto-flow: column;
+        grid-auto-columns: 1.875rem;
+        grid-template-columns: 1fr;
+    }
+
+    .count {
+        display: grid;
+        place-items: center;
+        text-align: center;
+        font-size: 0.8rem;
+    }
+</style>

package/package/components/block/controls/events/Events.svelte.d.ts

@@ -0,0 +1,11 @@
+type $$ComponentProps = {
+    visible: boolean;
+    events?: {
+        name: string;
+        detail: string;
+        count: number;
+    }[];
+};
+declare const Events: import("svelte").Component<$$ComponentProps, {}, "">;
+type Events = ReturnType<typeof Events>;
+export default Events;

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

@@ -0,0 +1,19 @@
+<script lang="ts">import { getClick, getName } from "./misc/utils";
+let {
+  info,
+  visible = false
+} = $props();
+let click = $derived(getClick(info)());
+</script>
+
+{#if visible}
+    <div><button onclick={click}>{getName(info)}</button></div>
+{/if}
+
+<style>
+    button {
+        grid-column: 1 / 4;
+        box-sizing: border-box;
+        margin: 0.15rem 0.3rem;
+    }
+</style>

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

@@ -0,0 +1,8 @@
+import type { Unionized, PropType } from "../types";
+type $$ComponentProps = {
+    info: Unionized<PropType<"button">>;
+    visible?: boolean;
+};
+declare const Button: import("svelte").Component<$$ComponentProps, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;