@nil-/doc 0.2.49 → 0.2.51

package/components/etc/Container.svelte

@@ -1,107 +1,6 @@
-<style>
-    div {
-        box-sizing: border-box;
-    }
-
-    .container {
-        width: 100%;
-        height: 100%;
-        display: grid;
-        grid-template-areas:
-            "A"
-            "divider"
-            "B";
-        overflow: hidden;
-    }
-
-    .container.vertical {
-        grid-template-areas: "A divider B";
-    }
-
-    .container > div {
-        width: 100%;
-        height: 100%;
-        overflow: hidden;
-    }
-
-    .container > .divider {
-        z-index: 10;
-        overflow: visible;
-        user-select: none;
-        grid-area: divider;
-    }
-
-    .overlay {
-        touch-action: none;
-    }
-
-    .container > .divider > .overlay {
-        width: 100%;
-        height: 20px;
-        cursor: ns-resize;
-        transform: translateY(-50%);
-    }
-
-    .container.vertical > .divider > .overlay {
-        width: 20px;
-        height: 100%;
-        cursor: ew-resize;
-        transform: translateX(-50%);
-    }
-
-    /* colors */
-    .container {
-        --color-p: hsl(0, 2%, 70%);
-        --color-s: hsl(0, 0%, 0%);
-    }
-
-    .container.dark {
-        --color-p: hsl(0, 2%, 40%);
-        --color-s: hsl(0, 0%, 100%);
-    }
-
-    .divider {
-        transition: border-color 350ms, background-color 350ms;
-    }
-
-    .container:not(.vertical) > .divider {
-        border-bottom: var(--color-p) solid 2.5px;
-        border-top: var(--color-p) solid 2.5px;
-        background-color: var(--color-p);
-    }
-
-    .container.vertical > .divider {
-        border-right: var(--color-p) solid 2.5px;
-        border-left: var(--color-p) solid 2.5px;
-        background-color: var(--color-p);
-    }
-
-    .container:not(.b):not(.vertical) > .divider:hover,
-    .container.moving:not(.b):not(.vertical) > .divider {
-        border-bottom: var(--color-s) solid 2.5px;
-    }
-
-    .container.b:not(.vertical) > .divider:hover,
-    .container.moving.b:not(.vertical) > .divider {
-        border-top: var(--color-s) solid 2.5px;
-    }
-
-    .container:not(.b).vertical > .divider:hover,
-    .container.moving:not(.b).vertical > .divider {
-        border-right: var(--color-s) solid 2.5px;
-    }
-
-    .container.vertical.b > .divider:hover,
-    .container.moving.vertical.b > .divider {
-        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;
@@ -117,16 +16,17 @@ const update = (limit, value) => {
   offset = Math.max(Math.min(value, span - limit), limit);
 };
 const off = tweened(offset, { duration: 50 });
+const min = 4;
 let last = [];
 $:
-  update(10, $position);
+  update(min, $position);
 $:
   $off = offset;
 $:
-  style = !b ? `auto 5px ${$off}px` : `${$off}px 5px auto`;
+  style = !b ? `auto 0.2rem ${$off}px` : `${$off}px 0.2rem auto`;
 const moving = writable(false);
 const addLast = (v) => {
-  if (v > 10) {
+  if (v > min) {
     if (last.length < 2) {
       last = [...last, v];
     } else {
@@ -135,26 +35,26 @@ const addLast = (v) => {
   }
 };
 const dbltap = () => {
-  if ($off > 10) {
+  if ($off > min) {
     addLast(offset);
-    offset = 10;
+    offset = min;
   } else if (last.length > 0) {
     offset = last.pop();
   }
 };
 const check = (v, flag, s) => {
   if (flag) {
-    return v < s - 10;
+    return v < s - min;
   } else {
-    return v > 10;
+    return v > min;
   }
 };
 </script>
+
 <div
     class="container"
     class:vertical
     class:b
-    class:dark={$dark}
     class:moving={$moving}
     bind:clientWidth={width}
     bind:clientHeight={height}
@@ -170,6 +70,7 @@ const check = (v, flag, s) => {
         <div class="divider">
             <div
                 class="overlay"
+                title={`Collapse ${vertical ? (b ? "left" : "right"): (b ? "top" : "bottom")}`}
                 use:draggable={{
                     reset: () => offset,
                     reversed: !b,
@@ -188,3 +89,89 @@ const check = (v, flag, s) => {
     {/if}
 </div>
 
+<style>
+    .container {
+        width: 100%;
+        height: 100%;
+        display: grid;
+        grid-template-areas:
+            "A"
+            "divider"
+            "B";
+        overflow: hidden;
+    }
+
+    .container.vertical {
+        grid-template-areas: "A divider B";
+    }
+
+    .container > div {
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+    }
+
+    .container > .divider {
+        z-index: 10;
+        overflow: visible;
+        user-select: none;
+        grid-area: divider;
+    }
+
+    .overlay {
+        touch-action: none;
+    }
+
+    .container > .divider > .overlay {
+        width: 100%;
+        height: 1.5rem;
+        cursor: ns-resize;
+        transform: translateY(-50%);
+    }
+
+    .container.vertical > .divider > .overlay {
+        width: 1.5rem;
+        height: 100%;
+        cursor: ew-resize;
+        transform: translateX(-50%);
+    }
+
+    /* colors */
+    .divider {
+        transition: border-color var(--i-nil-doc-transition-time),
+            background-color var(--i-nil-doc-transition-time);
+        --width: 0.0625rem;
+    }
+
+    .container:not(.vertical) > .divider {
+        border-bottom: var(--i-nil-doc-container-p) solid var(--width);
+        border-top: var(--i-nil-doc-container-p) solid var(--width);
+        background-color: var(--i-nil-doc-container-p);
+    }
+
+    .container.vertical > .divider {
+        border-right: var(--i-nil-doc-container-p) solid var(--width);
+        border-left: var(--i-nil-doc-container-p) solid var(--width);
+        background-color: var(--i-nil-doc-container-p);
+    }
+
+    .container:not(.b):not(.vertical) > .divider:hover,
+    .container.moving:not(.b):not(.vertical) > .divider {
+        border-bottom: var(--i-nil-doc-container-s) solid var(--width);
+    }
+
+    .container.b:not(.vertical) > .divider:hover,
+    .container.moving.b:not(.vertical) > .divider {
+        border-top: var(--i-nil-doc-container-s) solid var(--width);
+    }
+
+    .container:not(.b).vertical > .divider:hover,
+    .container.moving:not(.b).vertical > .divider {
+        border-right: var(--i-nil-doc-container-s) solid var(--width);
+    }
+
+    .container.vertical.b > .divider:hover,
+    .container.moving.vertical.b > .divider {
+        border-left: var(--i-nil-doc-container-s) solid var(--width);
+    }
+</style>

package/components/etc/Content.svelte

@@ -0,0 +1,45 @@
+<script>export let flat = false;
+</script>
+
+<div class="scrollable">
+    {#if flat}
+        <slot />
+    {:else}
+        <div class="wrapper">
+            <slot />
+        </div>
+    {/if}
+</div>
+
+<style>
+    .wrapper {
+        display: inline-block;
+        box-sizing: border-box;
+        margin: 0.5rem;
+        padding: 0.5rem;
+        border-radius: 0.5rem;
+        min-width: calc(100% - 1rem);
+        min-height: calc(100% - 1rem);
+    }
+
+    /* scrollable */
+    .scrollable {
+        width: 100%;
+        height: 100%;
+        overflow: scroll;
+        /* Firefox */
+        scrollbar-width: none;
+        /* IE and Edge */
+        -ms-overflow-style: none;
+    }
+
+    .scrollable::-webkit-scrollbar {
+        display: none;
+    }
+
+    /* color */
+    .wrapper {
+        border: solid 1px var(--i-nil-doc-content-outline-color);
+        box-shadow: 0px 0px 5px 0px var(--i-nil-doc-content-outline-color);
+    }
+</style>

package/components/etc/Content.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        flat?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type ContentProps = typeof __propDef.props;
+export type ContentEvents = typeof __propDef.events;
+export type ContentSlots = typeof __propDef.slots;
+export default class Content extends SvelteComponentTyped<ContentProps, ContentEvents, ContentSlots> {
+}
+export {};

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: 3;
+        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,21 @@ const vdark = {
     </g>
 </svg>
 
+<style>
+    svg {
+        fill: currentColor;
+        stroke: currentColor;
+    }
+
+    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,28 @@ $:
     </div>
 </div>
 
+<style>
+    .nav {
+        width: 100%;
+        height: 100%;
+        min-width: 12.5rem;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .search-bar {
+        padding: 0.3125rem;
+    }
+
+    input {
+        font-size: 0.75rem;
+        height: 1.875rem;
+        width: 100%;
+        padding: 0px 0.625rem;
+        box-sizing: border-box;
+    }
+
+    input:focus {
+        outline: none;
+    }
+</style>

package/components/navigation/Node.svelte

@@ -1,50 +1,3 @@
-<style>
-    .wrapper {
-        user-select: none;
-    }
-
-    .wrapper,
-    .sub,
-    .icon {
-        display: flex;
-        flex-direction: column;
-    }
-
-    .header {
-        height: 30px;
-        display: grid;
-        grid-template-columns: 15px 1fr;
-        align-items: center;
-        cursor: pointer;
-        gap: 5px;
-        box-sizing: border-box;
-    }
-
-    .header:hover {
-        background-color: hsla(203, 98%, 50%, 0.07);
-    }
-
-    .header.selected {
-        background-color: hsla(203, 98%, 50%, 0.822);
-        color: black;
-    }
-
-    .icon {
-        justify-content: center;
-        height: 15px;
-        width: 15px;
-        transition: transform 350ms;
-    }
-
-    .icon.expanded {
-        transform: rotate(90deg);
-    }
-
-    .icon > div {
-        margin: auto;
-    }
-</style>
-
 <script>import { slide } from "svelte/transition";
 import { sort } from "./utils/sort";
 import { createEventDispatcher } from "svelte";
@@ -69,6 +22,7 @@ const click = (link) => {
   }
 };
 </script>
+
 <div class="wrapper">
     <div
         class="header"
@@ -101,3 +55,48 @@ const click = (link) => {
     {/if}
 </div>
 
+<style>
+    .wrapper {
+        user-select: none;
+    }
+
+    .wrapper,
+    .sub,
+    .icon {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .header {
+        height: 1.875rem;
+        display: grid;
+        grid-template-columns: 1rem 1fr;
+        align-items: center;
+        cursor: pointer;
+        gap: 0.3125rem;
+    }
+
+    .header:hover {
+        background-color: var(--i-nil-doc-nav-hovered);
+    }
+
+    .header.selected {
+        background-color: var(--i-nil-doc-nav-selected);
+        color: var(--i-nil-doc-nav-selected-color);
+    }
+
+    .icon {
+        justify-content: center;
+        height: 1rem;
+        width: 1rem;
+        transition: transform var(--i-nil-doc-transition-time);
+    }
+
+    .icon.expanded {
+        transform: rotate(90deg);
+    }
+
+    .icon > div {
+        margin: auto;
+    }
+</style>

package/components/navigation/Tree.svelte

@@ -1,4 +1,3 @@
-
 <script>import Node from "./Node.svelte";
 import { sort } from "./utils/sort";
 export let tree;
@@ -8,6 +7,7 @@ export let renamer;
 export let expand;
 export let selected;
 </script>
+
 {#each sort(tree, sorter) as [key, value] (key)}
     <Node
         {key}

package/components/title/Icon.svelte

@@ -0,0 +1,19 @@
+<script>export let title = void 0;
+</script>
+
+<div class="icon" on:click on:keypress {title}>
+    <slot />
+</div>
+
+<style>
+    div {
+        width: 2.5rem;
+        height: 2.5rem;
+        cursor: pointer;
+        transition: transform var(--i-nil-doc-transition-time);
+    }
+
+    div:hover {
+        transform: scale(1.5);
+    }
+</style>