@nil-/doc 0.2.49 → 0.2.50

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

@@ -1,9 +1,3 @@
-<style>
-    select {
-        text-align: center;
-    }
-</style>
-
 <script>import { getDefault } from "./misc/defaulter";
 import NameHeader from "./misc/Name.svelte";
 export let value;
@@ -20,6 +14,7 @@ $:
 $:
   values = info instanceof Array ? info[2] : info.values;
 </script>
+
 {#if visible}
     <div>
         <NameHeader {name} {depth} />
@@ -34,3 +29,8 @@ $:
     </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%;
@@ -66,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/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 {};

package/components/navigation/Nav.svelte

@@ -1,33 +1,3 @@
-<style>
-    .nav {
-        width: 100%;
-        height: 100%;
-        min-width: 200px;
-        display: flex;
-        flex-direction: column;
-    }
-
-    .search-bar {
-        padding: 5px;
-    }
-
-    input {
-        height: 30px;
-        width: 100%;
-        padding: 0px 10px;
-    }
-
-    input:focus {
-        outline: none;
-    }
-
-    * {
-        box-sizing: border-box;
-        padding: 0px;
-        margin: 0px;
-    }
-</style>
-
 <script context="module">import { fuzz } from "./utils/fuzz";
 const apply = (paths, init, pre, next, post) => {
   const retval = {};
@@ -67,6 +37,7 @@ const populate = (filter, info, renamer) => {
   );
 };
 </script>
+
 <script>import Tree from "./Tree.svelte";
 export let info;
 export let selected;
@@ -95,6 +66,7 @@ const update = (selected2) => {
 $:
   update(selected);
 </script>
+
 <div class="nav">
     <div class="search-bar">
         <input bind:value={filter} type="text" placeholder="Search for page..." />
@@ -112,3 +84,32 @@ $:
     </div>
 </div>
 
+<style>
+    .nav {
+        width: 100%;
+        height: 100%;
+        min-width: 200px;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .search-bar {
+        padding: 5px;
+    }
+
+    input {
+        height: 30px;
+        width: 100%;
+        padding: 0px 10px;
+    }
+
+    input:focus {
+        outline: none;
+    }
+
+    * {
+        box-sizing: border-box;
+        padding: 0px;
+        margin: 0px;
+    }
+</style>