@nil-/doc 2.0.0 → 2.0.1

package/package/components/block/Instance.svelte

@@ -1,141 +0,0 @@
-<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

@@ -1,27 +0,0 @@
-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

@@ -1,31 +0,0 @@
-<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

@@ -1,9 +0,0 @@
-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

@@ -1,52 +0,0 @@
-<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

@@ -1,30 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,26 +0,0 @@
-/**
- *  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

@@ -1,26 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,84 +0,0 @@
-<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

@@ -1,7 +0,0 @@
-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

@@ -1,79 +0,0 @@
-<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

@@ -1,8 +0,0 @@
-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

@@ -1,39 +0,0 @@
-<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

@@ -1,11 +0,0 @@
-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

@@ -1,19 +0,0 @@
-<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

@@ -1,8 +0,0 @@
-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;