@nil-/doc 0.2.48 → 0.2.50

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

@@ -1,41 +1,6 @@
-<style>
-    .input {
-        width: 100%;
-        display: grid;
-        grid-template-columns: 50px 1fr;
-        gap: 5px;
-        position: relative;
-    }
-
-    .input > div {
-        width: 100%;
-        height: 100%;
-        display: grid;
-        text-align: left;
-        align-items: center;
-        font-size: 0.8rem;
-        user-select: none;
-        margin: auto;
-    }
-
-    .tooltip {
-        width: 100%;
-        height: 100%;
-        left: -110%;
-        position: absolute;
-        visibility: hidden;
-        display: grid;
-        grid-template-columns: 85px 1fr;
-        padding: 0px 5px;
-    }
-
-    .input:hover > .tooltip:not(.disabled) {
-        visibility: visible;
-    }
-</style>
-
 <script>import { getDefault } from "./misc/defaulter";
 import NameHeader from "./misc/Name.svelte";
+import { nformat } from "./misc/nformat";
 export let value;
 export let info;
 export let depth;
@@ -57,29 +22,16 @@ $:
     max: info.max,
     step: info.step
   };
-const format = (v, base, digits) => {
-  const n = v.toExponential().split("e");
-  const ex = parseInt(n[1]);
-  const absex = Math.abs(ex);
-  const rest = base + (absex >= 10 ? 0 : 1) - (ex >= 0 ? 0 : 1);
-  return v.toLocaleString(void 0, {
-    signDisplay: "always",
-    useGrouping: false,
-    notation: absex > 2 + digits ? "scientific" : "standard",
-    maximumFractionDigits: rest,
-    minimumFractionDigits: rest
-  });
-};
 </script>
+
 {#if visible}
     <div>
         <NameHeader name={i.name} {depth} />
         <div class="input">
             <div class="tooltip" class:disabled={!enabled || disabled}>
-                <div>Current Value:</div>
-                <div>{format(ivalue, 6, 3)}</div>
+                Value: {nformat(ivalue, 6, 11)}
             </div>
-            <div>{format(ivalue, 1, 1)}</div>
+            <div>{nformat(ivalue, 3, 5)}</div>
             <input
                 type="range"
                 bind:value={ivalue}
@@ -93,3 +45,37 @@ const format = (v, base, digits) => {
     </div>
 {/if}
 
+<style>
+    .input {
+        width: 100%;
+        display: grid;
+        grid-template-columns: 65px 1fr;
+        gap: 5px;
+        position: relative;
+    }
+
+    .input > div {
+        width: 100%;
+        height: 100%;
+        display: grid;
+        text-align: left;
+        align-items: center;
+        font-size: 0.8rem;
+        user-select: none;
+        margin: auto;
+    }
+
+    .tooltip {
+        left: -110%;
+        width: 100%;
+        height: 100%;
+        display: grid;
+        visibility: hidden;
+        position: absolute;
+        place-items: center;
+    }
+
+    .input:hover > .tooltip:not(.disabled) {
+        visibility: visible;
+    }
+</style>

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

@@ -1,4 +1,3 @@
-
 <script>import { getDefault } from "./misc/defaulter";
 import NameHeader from "./misc/Name.svelte";
 export let value;
@@ -15,6 +14,7 @@ $:
 $:
   values = info instanceof Array ? info[2] : info.values;
 </script>
+
 {#if visible}
     <div>
         <NameHeader {name} {depth} />
@@ -28,3 +28,9 @@ $:
         <div><input type="checkbox" bind:checked={enabled} {disabled} /></div>
     </div>
 {/if}
+
+<style>
+    select {
+        text-align: center;
+    }
+</style>

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

@@ -1,4 +1,3 @@
-
 <script>import { getDefault } from "./misc/defaulter";
 import NameHeader from "./misc/Name.svelte";
 export let value;
@@ -13,6 +12,7 @@ $:
 $:
   name = info instanceof Array ? info[0] : info.name;
 </script>
+
 {#if visible}
     <div>
         <NameHeader {name} {depth} />

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

@@ -1,4 +1,3 @@
-
 <script>import { getDefault } from "./misc/defaulter";
 import NameHeader from "./misc/Name.svelte";
 export let value;
@@ -13,6 +12,7 @@ $:
 $:
   name = info instanceof Array ? info[0] : info.name;
 </script>
+
 {#if visible}
     <div>
         <NameHeader {name} {depth} />

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

@@ -1,4 +1,3 @@
-
 <script>import Component from "./Component.svelte";
 import Header from "./misc/GroupHeader.svelte";
 import { getDefault } from "./misc/defaulter";
@@ -17,7 +16,9 @@ $:
   name = info instanceof Array ? info[0] : info.name;
 let expand = info.values.length > 0 ? true : void 0;
 </script>
+
 <Header {name} bind:expand bind:checked={enabled} {depth} {disabled} {visible} />
+
 {#each values as v, i (i)}
     {#if v instanceof Array}
         <Component

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

@@ -1,9 +1,3 @@
-<style>
-    .value {
-        text-align: center;
-    }
-</style>
-
 <script>import Name from "./Name.svelte";
 export let name;
 export let depth;
@@ -19,6 +13,7 @@ const flip = () => {
   }
 };
 </script>
+
 {#if visible}
     <div class="root" on:click={flip} on:keypress={null}>
         <Name
@@ -33,3 +28,8 @@ const flip = () => {
     </div>
 {/if}
 
+<style>
+    .value {
+        text-align: center;
+    }
+</style>

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;
@@ -28,17 +42,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,6 +1,26 @@
 <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%;
@@ -15,6 +35,7 @@ const dark = getTheme();
     div :global(*::before),
     div :global(*::after) {
         box-sizing: inherit;
+        font-family: inherit;
     }
 
     div > :global(div) {
@@ -26,6 +47,7 @@ const dark = getTheme();
 
     div > :global(div:first-child) {
         text-align: center;
+        font-weight: bold;
     }
 
     div > :global(div > div:not(:first-child) > *) {
@@ -64,24 +86,3 @@ const dark = getTheme();
         outline: var(--outline-color) 1px solid;
     }
 </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/nformat.d.ts

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

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/components/etc/Container.svelte

@@ -1,3 +1,95 @@
+<script>import { writable } from "svelte/store";
+import { tweened } from "svelte/motion";
+import { createDraggable } from "./action";
+import { getTheme } from "../context";
+const dark = getTheme();
+export let vertical = false;
+export let offset = 0;
+export let b = false;
+let width;
+let height;
+const { position, draggable } = createDraggable(offset);
+$:
+  span = vertical ? width : height;
+const update = (limit, value) => {
+  if (null == span) {
+    return;
+  }
+  offset = Math.max(Math.min(value, span - limit), limit);
+};
+const off = tweened(offset, { duration: 50 });
+let last = [];
+$:
+  update(10, $position);
+$:
+  $off = offset;
+$:
+  style = !b ? `auto 5px ${$off}px` : `${$off}px 5px auto`;
+const moving = writable(false);
+const addLast = (v) => {
+  if (v > 10) {
+    if (last.length < 2) {
+      last = [...last, v];
+    } else {
+      last = [last[1], v];
+    }
+  }
+};
+const dbltap = () => {
+  if ($off > 10) {
+    addLast(offset);
+    offset = 10;
+  } else if (last.length > 0) {
+    offset = last.pop();
+  }
+};
+const check = (v, flag, s) => {
+  if (flag) {
+    return v < s - 10;
+  } else {
+    return v > 10;
+  }
+};
+</script>
+
+<div
+    class="container"
+    class:vertical
+    class:b
+    class:dark={$dark}
+    class:moving={$moving}
+    bind:clientWidth={width}
+    bind:clientHeight={height}
+    style:grid-template-columns={vertical ? style : null}
+    style:grid-template-rows={!vertical ? style : null}
+>
+    {#if width != null && height != null}
+        <div style:grid-area="A">
+            {#if check($off, !b, span)}
+                <slot name="A" />
+            {/if}
+        </div>
+        <div class="divider">
+            <div
+                class="overlay"
+                use:draggable={{
+                    reset: () => offset,
+                    reversed: !b,
+                    vertical,
+                    dbltap: dbltap,
+                    tap: () => addLast($off),
+                    moving
+                }}
+            />
+        </div>
+        <div style:grid-area="B">
+            {#if check($off, b, span)}
+                <slot name="B" />
+            {/if}
+        </div>
+    {/if}
+</div>
+
 <style>
     div {
         box-sizing: border-box;
@@ -96,95 +188,3 @@
         border-left: var(--color-s) solid 2.5px;
     }
 </style>
-
-<script>import { writable } from "svelte/store";
-import { tweened } from "svelte/motion";
-import { createDraggable } from "./action";
-import { getTheme } from "../context";
-const dark = getTheme();
-export let vertical = false;
-export let offset = 0;
-export let b = false;
-let width;
-let height;
-const { position, draggable } = createDraggable(offset);
-$:
-  span = vertical ? width : height;
-const update = (limit, value) => {
-  if (null == span) {
-    return;
-  }
-  offset = Math.max(Math.min(value, span - limit), limit);
-};
-const off = tweened(offset, { duration: 50 });
-let last = [];
-$:
-  update(10, $position);
-$:
-  $off = offset;
-$:
-  style = !b ? `auto 5px ${$off}px` : `${$off}px 5px auto`;
-const moving = writable(false);
-const addLast = (v) => {
-  if (v > 10) {
-    if (last.length < 2) {
-      last = [...last, v];
-    } else {
-      last = [last[1], v];
-    }
-  }
-};
-const dbltap = () => {
-  if ($off > 10) {
-    addLast(offset);
-    offset = 10;
-  } else if (last.length > 0) {
-    offset = last.pop();
-  }
-};
-const check = (v, flag, s) => {
-  if (flag) {
-    return v < s - 10;
-  } else {
-    return v > 10;
-  }
-};
-</script>
-<div
-    class="container"
-    class:vertical
-    class:b
-    class:dark={$dark}
-    class:moving={$moving}
-    bind:clientWidth={width}
-    bind:clientHeight={height}
-    style:grid-template-columns={vertical ? style : null}
-    style:grid-template-rows={!vertical ? style : null}
->
-    {#if width != null && height != null}
-        <div style:grid-area="A">
-            {#if check($off, !b, span)}
-                <slot name="A" />
-            {/if}
-        </div>
-        <div class="divider">
-            <div
-                class="overlay"
-                use:draggable={{
-                    reset: () => offset,
-                    reversed: !b,
-                    vertical,
-                    dbltap: dbltap,
-                    tap: () => addLast($off),
-                    moving
-                }}
-            />
-        </div>
-        <div style:grid-area="B">
-            {#if check($off, b, span)}
-                <slot name="B" />
-            {/if}
-        </div>
-    {/if}
-</div>
-

package/components/{etc/NilIcon.svelte → icons/NilDoc.svelte}

@@ -1,3 +1,10 @@
+<script context="module">const action = (p, length) => {
+  const update = (length2) => p.style.strokeDasharray = `${length2} 100`;
+  update(length);
+  return { update };
+};
+</script>
+
 <script>import { tweened } from "svelte/motion";
 const d = "M 0 -15 L 15 -15 L 15 0 L 0 0 -9 0 A 6 8 135 0 1 9 0";
 const length = tweened(100);
@@ -11,23 +18,7 @@ const trigger = () => {
 $:
   0 === $length && trigger();
 </script>
-<style>
-    svg {
-        width: 100%;
-        height: 100%;
-        stroke-width: 4;
-        stroke-linejoin: miter;
-        stroke: currentColor;
-        fill: transparent;
-    }
-</style>
 
-<script context="module">const action = (p, length) => {
-  const update = (length2) => p.style.strokeDasharray = `${length2} 100`;
-  update(length);
-  return { update };
-};
-</script>
 <svg viewBox="-35 -35 70 70" on:pointerenter={trigger}>
     <g transform="rotate(45 0 0)">
         <path {d} use:action={$length} />
@@ -37,3 +28,13 @@ $:
     </g>
 </svg>
 
+<style>
+    svg {
+        width: 100%;
+        height: 100%;
+        stroke-width: 4;
+        stroke-linejoin: miter;
+        stroke: currentColor;
+        fill: transparent;
+    }
+</style>

package/components/icons/NilDoc.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type NilDocProps = typeof __propDef.props;
+export type NilDocEvents = typeof __propDef.events;
+export type NilDocSlots = typeof __propDef.slots;
+export default class NilDoc extends SvelteComponentTyped<NilDocProps, NilDocEvents, NilDocSlots> {
+}
+export {};

package/components/{etc/ThemeIcon.svelte → icons/Theme.svelte}

@@ -1,34 +1,3 @@
-<script>import { tweened } from "svelte/motion";
-export let dark = true;
-const values = tweened(dark ? vdark : vlight);
-$:
-  $values = dark ? vdark : vlight;
-const index = indexer++;
-</script>
-<style>
-    svg {
-        fill: currentColor;
-        stroke: currentColor;
-
-        -webkit-tap-highlight-color: transparent;
-        -moz-tap-highlight-color: transparent;
-        -o-tap-highlight-color: transparent;
-        /* tap-highlight-color: transparent; */
-    }
-
-    svg,
-    rect {
-        width: 100%;
-        height: 100%;
-    }
-
-    line {
-        stroke-width: 2;
-        stroke-linecap: round;
-        stroke-linejoin: round;
-    }
-</style>
-
 <script context="module">let indexer = 0;
 const vlight = {
   rotate: 40,
@@ -43,6 +12,17 @@ const vdark = {
   v: 1
 };
 </script>
+
+<script>import { tweened } from "svelte/motion";
+export let theme = "dark";
+$:
+  dark = theme === "dark";
+const values = tweened(dark ? vdark : vlight);
+$:
+  $values = dark ? vdark : vlight;
+const index = indexer++;
+</script>
+
 <svg class:dark viewBox="-25 -25 50 50" transform={`rotate(${$values.rotate})`}>
     <mask id={`nil_doc_theme_icon_${index}`}>
         <rect x="-25" y="-25" fill="white" />
@@ -65,3 +45,26 @@ const vdark = {
     </g>
 </svg>
 
+<style>
+    svg {
+        fill: currentColor;
+        stroke: currentColor;
+
+        -webkit-tap-highlight-color: transparent;
+        -moz-tap-highlight-color: transparent;
+        -o-tap-highlight-color: transparent;
+        /* tap-highlight-color: transparent; */
+    }
+
+    svg,
+    rect {
+        width: 100%;
+        height: 100%;
+    }
+
+    line {
+        stroke-width: 2;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+    }
+</style>

package/components/icons/Theme.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Theme } from "../context";
+declare const __propDef: {
+    props: {
+        theme?: Theme;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ThemeProps = typeof __propDef.props;
+export type ThemeEvents = typeof __propDef.events;
+export type ThemeSlots = typeof __propDef.slots;
+export default class Theme extends SvelteComponentTyped<ThemeProps, ThemeEvents, ThemeSlots> {
+}
+export {};