@nil-/doc 0.2.57 → 0.3.1

package/components/Base.svelte

@@ -26,6 +26,7 @@ export let fill = false;
 
         --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-instance-selected-color: var(--nil-doc-instance-selected-color, hsla(203, 98%, 50%, 0.85));
 
         --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%));

package/components/block/Block.svelte

@@ -1,48 +1,15 @@
-<script>import {
-  initParams,
-  initDefaults,
-  initControls,
-  initControlsState,
-  initOrientation
-} from "./context";
+<script>import { initParams, initDefaults, initControls, initOrientation } from "./context";
 import Base from "../Base.svelte";
 import { getTheme, initTheme } from "../context";
-import Button from "./icons/Button.svelte";
-import Position from "./icons/Position.svelte";
-import ControlView from "./icons/ControlView.svelte";
 initParams();
 initDefaults();
 initControls();
-const state = initControlsState();
 const columns = initOrientation();
 export let theme = void 0;
 const parentTheme = getTheme();
 const dark = initTheme();
 $:
   $dark = theme === void 0 ? $parentTheme : "dark" === theme;
-const cyclePosition = () => {
-  switch ($state.position) {
-    case "hidden":
-      $state.position = "bottom";
-      break;
-    case "bottom":
-      $state.position = "right";
-      break;
-    case "right":
-      $state.position = "hidden";
-      break;
-  }
-};
-const cycleMode = () => {
-  switch ($state.mode) {
-    case "event":
-      $state.mode = "prop";
-      break;
-    case "prop":
-      $state.mode = "event";
-      break;
-  }
-};
 </script>
 
 <!--
@@ -50,17 +17,9 @@ const cycleMode = () => {
     See [documentation](https://mono-doc.vercel.app/3-Components/2-Block) for more details.
 -->
 
+<!-- <svelte:body on:click={unfocus}/> -->
+
 <Base dark={$dark}>
-    <div class="relative">
-        <div class="buttons">
-            <Button scale on:click={cycleMode} title={$state.mode}>
-                <ControlView mode={$state.mode} />
-            </Button>
-            <Button scale on:click={cyclePosition} title={$state.position}>
-                <Position position={$state.position} />
-            </Button>
-        </div>
-    </div>
     <div class="outer">
         <div class="scrollable block" class:columns={$columns}>
             <slot />
@@ -69,14 +28,8 @@ const cycleMode = () => {
 </Base>
 
 <style>
-    .block {
-        display: grid;
-        grid-auto-rows: 1fr;
-        grid-auto-columns: auto;
-        grid-auto-flow: row;
-    }
-
     .outer {
+        position: relative;
         border-radius: 0.5rem;
         padding: 1.75rem 0.2rem 0.75rem 0.2rem;
         min-width: 10rem;
@@ -84,9 +37,16 @@ const cycleMode = () => {
         outline: solid 1px white;
     }
 
-    .scrollable {
+    .block {
         width: 100%;
         height: 100%;
+        display: grid;
+        grid-auto-rows: 1fr;
+        grid-auto-columns: auto;
+        grid-auto-flow: row;
+    }
+
+    .scrollable {
         overflow: scroll;
         /* Firefox */
         scrollbar-width: none;
@@ -98,21 +58,6 @@ const cycleMode = () => {
         display: none;
     }
 
-    .relative {
-        z-index: 10;
-        position: relative;
-    }
-
-    .buttons {
-        position: absolute;
-        width: 3.5rem;
-        height: 1.75rem;
-        right: 1rem;
-        top: 0rem;
-        display: flex;
-        cursor: pointer;
-    }
-
     .block.columns {
         grid-auto-rows: auto;
         grid-auto-columns: 1fr;

package/components/block/Controls.svelte

@@ -1,14 +1,9 @@
-<script>import { getControls, getControlsState } from "./context";
+<script>import { getControls } from "./context";
 export let props = [];
 export let events = [];
-export let position = "bottom";
-export let mode = "prop";
 const controls = getControls();
 $:
   $controls = { props, events };
-const state = getControlsState();
-$:
-  $state = { position, mode };
 </script>
 
 <!--

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

@@ -4,8 +4,6 @@ declare const __propDef: {
     props: {
         props?: (Prop | SpecialProp)[] | undefined;
         events?: string[] | undefined;
-        position?: "right" | "bottom" | "hidden" | undefined;
-        mode?: "prop" | "event" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/block/Instance.svelte

@@ -1,22 +1,65 @@
-<script>import { beforeUpdate } from "svelte";
-import { getControls, getControlsState } from "./context";
-import Props from "./controls/props/Props.svelte";
-import Events from "./controls/events/Events.svelte";
+<script>import { beforeUpdate, onDestroy } from "svelte";
+import { writable } from "svelte/store";
 import { resolve } from "./utils";
+import { getControls, getControlInfo, getControlValue } from "./context";
 const controls = getControls();
-const controlsState = getControlsState();
-$:
-  expanded = $controlsState.position !== "hidden";
+const cc = getControlInfo();
+const vv = getControlValue();
 export let defaults = void 0;
 export let noreset = false;
 let key = false;
 beforeUpdate(() => key = !key);
 const resolveArgs = resolve;
-let bound = {};
-const updateBound = (d) => bound = resolve(d ?? {}, {});
+const values = writable({ props: {}, events: [] });
+const updateBound = (d) => $values.props = resolve(d ?? {}, {});
 $:
   updateBound(defaults);
-let handlers = {};
+const focus = () => {
+  if ($vv !== values) {
+    $cc = controls;
+    $vv = values;
+  }
+};
+const unfocus = () => {
+  if ($vv === values) {
+    $cc = null;
+    $vv = null;
+  }
+};
+onDestroy(unfocus);
+const populate = (ext) => {
+  const obj = {};
+  const stringify = (detail) => {
+    if (detail) {
+      if (typeof detail === "string") {
+        return detail;
+      }
+      return JSON.stringify(detail);
+    }
+    return "";
+  };
+  if (ext != null) {
+    for (const name of ext) {
+      obj[name] = (ev) => {
+        const detail = stringify(ev.detail);
+        if ($values.events.length > 0) {
+          const last = $values.events[0];
+          if (last.name === name && last.detail === detail && last.count < 99) {
+            last.count += 1;
+            $values.events = $values.events;
+            return;
+          }
+        }
+        $values.events.unshift({ name, detail, count: 1 });
+        if ($values.events.length > 50) {
+          $values.events.pop();
+        }
+        $values.events = $values.events;
+      };
+    }
+  }
+  return obj;
+};
 </script>
 
 <!--
@@ -24,41 +67,24 @@ let handlers = {};
     See [documentation](https://mono-doc.vercel.app/3-Components/2-Block/1-Content/1-Instance) for more details.
 -->
 
-<div class="instance" class:cside={expanded && "right" === $controlsState.position}>
+<div class="instance" on:click={focus} on:keypress={null} class:focused={$vv === values}>
     <div class="content">
         {#if noreset}
-            <slot props={resolveArgs(defaults ?? {}, bound)} events={handlers} {key} />
+            <slot
+                props={resolveArgs(defaults ?? {}, $values.props)}
+                events={populate($controls.events)}
+                {key}
+            />
         {:else}
             {#key key}
-                <slot props={resolveArgs(defaults ?? {}, bound)} events={handlers} {key} />
+                <slot
+                    props={resolveArgs(defaults ?? {}, $values.props)}
+                    events={populate($controls.events)}
+                    {key}
+                />
             {/key}
         {/if}
     </div>
-    {#if expanded}
-        <div class="misc">
-            <Props
-                infos={$controls.props}
-                bind:values={bound}
-                visible={$controlsState.mode === "prop"}
-            >
-                <div>
-                    <div>Name</div>
-                    <div>Value</div>
-                    <div>Use</div>
-                </div>
-            </Props>
-            <Events
-                events={$controls.events}
-                bind:handlers
-                visible={$controlsState.mode === "event"}
-            >
-                <div>
-                    <div>Events</div>
-                    <div>Detail</div>
-                </div>
-            </Events>
-        </div>
-    {/if}
 </div>
 
 <style>
@@ -67,21 +93,8 @@ let handlers = {};
         height: 100%;
     }
 
-    .cside {
-        display: grid;
-        grid-template-columns: 1fr 35rem;
-    }
-
     .content {
         min-height: 6.25rem;
-    }
-
-    .misc {
-        user-select: none;
-    }
-
-    .content,
-    .misc {
         border: 1px solid var(--i-nil-doc-block-outline-color);
     }
 
@@ -90,5 +103,13 @@ let handlers = {};
         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.focused {
+        border-color: var(--i-nil-doc-instance-selected-color);
     }
 </style>

package/components/block/context.d.ts

@@ -1,22 +1,26 @@
 import type { Writable } from "svelte/store";
-import type { SpecialProp, Prop, Event } from "./controls/types";
+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 type ControlState = {
-    position: "bottom" | "right" | "hidden";
-    mode: "prop" | "event";
-};
 export declare const initParams: () => Writable<Params[]>, getParams: () => Writable<Params[]>;
-type Controls = {
+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 initControlsState: () => Writable<ControlState>, getControlsState: () => Writable<ControlState>;
 export declare const initOrientation: () => Writable<boolean>, getOrientation: () => Writable<boolean>;
-export {};
+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/components/block/context.js

@@ -8,13 +8,13 @@ const create = (defaulter) => {
     };
 };
 export const { init: initParams, get: getParams } = create(() => []);
-export const { init: initControls, get: getControls } = create(() => ({
-    props: [],
-    events: []
-}));
+// prettier-ignore
+export const { init: initControls, get: getControls } = create(() => ({ props: [], events: [] }));
+// prettier-ignore
 export const { init: initDefaults, get: getDefaults } = create(() => ({}));
-export const { init: initControlsState, get: getControlsState } = create(() => ({
-    position: "hidden",
-    mode: "prop"
-}));
+// prettier-ignore
 export const { init: initOrientation, get: getOrientation } = create(() => false);
+// prettier-ignore
+export const { init: initControlInfo, get: getControlInfo } = create(() => writable());
+// prettier-ignore
+export const { init: initControlValue, get: getControlValue } = create(() => writable());

package/components/block/controls/Controls.svelte

@@ -0,0 +1,79 @@
+<script>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";
+const controls = getControlInfo();
+const values = getControlValue();
+$:
+  cc = $controls;
+$:
+  vv = $values;
+let mode = "props";
+export let position = "bottom";
+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;
+  }
+};
+</script>
+
+<Styler type={mode}>
+    <div class="header">
+        <div class="buttons">
+            <Button scale on:click={cyclePosition} title={position}>
+                <Position {position} />
+            </Button>
+            <Button scale on:click={cycleMode} title={mode}>
+                <ControlView {mode} />
+            </Button>
+        </div>
+        {#if mode === "props"}
+            <div>Name</div>
+            <div>Value</div>
+            <div>Use</div>
+        {:else if mode === "events"}
+            <div>Events</div>
+            <div>Detail</div>
+        {/if}
+    </div>
+    {#key $values && $controls}
+        {#if cc != null && $cc != null && vv != null && $vv != null}
+            <Props infos={$cc.props} visible={mode === "props"} bind:values={$vv.props} />
+            <Events events={$vv.events} visible={mode === "events"} />
+        {/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/components/block/controls/Controls.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        position?: "right" | "bottom" | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ControlsProps = typeof __propDef.props;
+export type ControlsEvents = typeof __propDef.events;
+export type ControlsSlots = typeof __propDef.slots;
+export default class Controls extends SvelteComponentTyped<ControlsProps, ControlsEvents, ControlsSlots> {
+}
+export {};

package/components/block/controls/Styler.svelte

@@ -9,19 +9,10 @@
     div {
         display: grid;
         min-width: 31.25rem;
+        height: 100%;
         grid-auto-rows: 2rem;
         box-sizing: border-box;
-    }
-
-    div.events {
-        height: 22rem;
-    }
-
-    div :global(*),
-    div :global(*::before),
-    div :global(*::after) {
-        box-sizing: inherit;
-        font-family: inherit;
+        user-select: none;
     }
 
     div > :global(div) {
@@ -51,9 +42,15 @@
         margin: auto;
     }
 
-    div > :global(div > div:not(:first-child) > *) {
+    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 */

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

@@ -1,62 +1,21 @@
-<script>import Styler from "../Styler.svelte";
-export let visible;
-export let events;
-export let handlers;
-let history = [];
-const stringify = (detail) => {
-  if (detail) {
-    if (typeof detail === "string") {
-      return detail;
-    }
-    return JSON.stringify(detail);
-  }
-  return "";
-};
-const wrap = (ext) => {
-  const obj = {};
-  if (ext != null) {
-    for (const name of ext) {
-      obj[name] = (ev) => {
-        const detail = stringify(ev.detail);
-        if (history.length > 0) {
-          const last = history[history.length - 1];
-          if (last.name === name && last.detail === detail && last.count < 99) {
-            last.count += 1;
-            history = history;
-            return;
-          }
-        }
-        history.push({ name, detail, count: 1 });
-        if (history.length > 10) {
-          history.shift();
-        }
-        history = history;
-      };
-    }
-  }
-  return obj;
-};
-$:
-  handlers = wrap(events);
+<script>export let visible;
+export let events = [];
 </script>
 
 {#if visible}
-    <Styler type={"events"}>
-        <slot />
-        {#each history 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>
+    {#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>
-        {/each}
-    </Styler>
+            <div>{detail}</div>
+        </div>
+    {/each}
 {/if}
 
 <style>

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

@@ -1,17 +1,17 @@
 import { SvelteComponentTyped } from "svelte";
-import type { Event } from "../types";
 declare const __propDef: {
     props: {
         visible: boolean;
-        events: Event[];
-        handlers: Record<string, (ev: CustomEvent<unknown>) => void> | undefined;
+        events?: {
+            name: string;
+            detail: string;
+            count: number;
+        }[] | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {};
-    };
+    slots: {};
 };
 export type EventsProps = typeof __propDef.props;
 export type EventsEvents = typeof __propDef.events;

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

@@ -1,12 +1,13 @@
 <script>import { getClick, getName } from "./misc/utils";
 export let info;
+export let visible = false;
 $:
   click = getClick(info)();
 </script>
 
-<div>
-    <button on:click={click}>{getName(info)}</button>
-</div>
+{#if visible}
+    <div><button on:click={click}>{getName(info)}</button></div>
+{/if}
 
 <style>
     button {

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

@@ -3,6 +3,7 @@ import type { Unionized, PropType } from "../types";
 declare const __propDef: {
     props: {
         info: Unionized<PropType<"button">>;
+        visible?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;