@nil-/doc 0.2.50 → 0.2.51

package/components/block/icons/Button.svelte.d.ts

@@ -0,0 +1,35 @@
+/** @typedef {typeof __propDef.props}  ButtonProps */
+/** @typedef {typeof __propDef.events}  ButtonEvents */
+/** @typedef {typeof __propDef.slots}  ButtonSlots */
+export default class Button extends SvelteComponentTyped<{
+    title?: string | undefined;
+    scale?: boolean | undefined;
+}, {
+    click: MouseEvent;
+    keypress: KeyboardEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type ButtonProps = typeof __propDef.props;
+export type ButtonEvents = typeof __propDef.events;
+export type ButtonSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        title?: string | undefined;
+        scale?: boolean | undefined;
+    };
+    events: {
+        click: MouseEvent;
+        keypress: KeyboardEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/components/block/icons/ControlView.svelte

@@ -0,0 +1,14 @@
+<script context="module"></script>
+
+<script>import { tweened } from "svelte/motion";
+export let mode = "prop";
+const v = tweened(mode === "event" ? 1 : 0, { duration: 150 });
+$:
+  $v = mode === "event" ? 1 : 0;
+</script>
+
+<svg viewBox="-50 -50 100 100">
+    <rect width="60" height="60" x="-30" y="-30" fill="transparent" />
+    <rect height="40" width="20" x={-$v * 20} y="-20" rx="2" ry="2" fill="transparent" />
+    <polygon transform="translate(5, 0)" points="-15,-2 1,-2, 1,-6 6,0 1,6 1,2 -15,2" />
+</svg>

package/components/block/icons/ControlView.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        mode?: "prop" | "event" | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ControlViewProps = typeof __propDef.props;
+export type ControlViewEvents = typeof __propDef.events;
+export type ControlViewSlots = typeof __propDef.slots;
+export default class ControlView extends SvelteComponentTyped<ControlViewProps, ControlViewEvents, ControlViewSlots> {
+}
+export {};

package/components/block/icons/Position.svelte

@@ -0,0 +1,50 @@
+<script context="module">const bottom = {
+  width: 60,
+  height: 20,
+  x: -30,
+  y: 10
+};
+const right = {
+  width: 20,
+  height: 60,
+  x: 10,
+  y: -30
+};
+const nobottom = {
+  width: 60,
+  height: 0,
+  x: -30,
+  y: 30
+};
+const noright = {
+  width: 0,
+  height: 60,
+  x: 30,
+  y: -30
+};
+const settings = {
+  hidden: [nobottom, noright],
+  bottom: [bottom, noright],
+  right: [nobottom, right]
+};
+</script>
+
+<script>import { tweened } from "svelte/motion";
+export let position = "hidden";
+const offset = tweened(settings[position], { duration: 150 });
+$:
+  $offset = settings[position];
+</script>
+
+<svg viewBox="-50 -50 100 100">
+    <rect width="60" height="60" x="-30" y="-30" fill="transparent" />
+    <rect {...$offset[0]} />
+    <rect {...$offset[1]} />
+</svg>
+
+<style>
+    svg {
+        stroke-width: 3;
+        fill: currentColor;
+    }
+</style>

package/components/block/icons/Position.svelte.d.ts

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

package/components/etc/Base.svelte

@@ -0,0 +1,58 @@
+<script>export let dark = true;
+</script>
+
+<div class:dark>
+    <slot />
+</div>
+
+<style>
+    @import url("https://fonts.googleapis.com/css?family=Fira%20Code");
+
+    div {
+        width: 100%;
+        height: 100%;
+        font-family: "Fira Code", "Courier New", Courier, monospace;
+
+        --i-nil-doc-nav-hovered: var(--nil-doc-nav-hovered, hsla(203, 98%, 50%, 0.07));
+        --i-nil-doc-nav-selected: var(--nil-doc-nav-selected, hsla(203, 98%, 50%, 0.822));
+        --i-nil-doc-nav-selected-color: var(--nil-doc-nav-selected-color, black);
+
+        --i-nil-doc-transition-time: var(--nil-doc-transition-time, 350ms);
+    }
+
+    div {
+        --i-nil-doc-color: var(--nil-doc-color, hsl(0, 0%, 0%));
+        --i-nil-doc-color-scheme: var(--nil-doc-color-scheme, light);
+
+        --i-nil-doc-bg-color: var(--nil-doc-bg-color, hsl(0, 0%, 98%));
+        --i-nil-doc-content-outline-color: var(--nil-doc-content-outline-color, hsla(0, 0%, 0%, 0.3));
+
+        --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-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%));
+
+        --i-nil-doc-controls-p: var(--nil-doc-controls-p, hsl(0, 0%, 100%));
+        --i-nil-doc-controls-s: var(--nil-doc-controls-s, hsl(210, 29%, 97%));
+        --i-nil-doc-controls-hover: var(--nil-doc-controls-hover, hsl(210, 100%, 90%));
+    }
+
+    div.dark {
+        --i-nil-doc-color: var(--nil-doc-color, hsl(0, 0%, 80%));
+        --i-nil-doc-color-scheme: var(--nil-doc-color-scheme, dark);
+    
+        --i-nil-doc-bg-color: var(--nil-doc-bg-color, hsl(210, 6%, 7%));
+        --i-nil-doc-content-outline-color: var(--nil-doc-content-outline-color, hsla(0, 0%, 100%, 0.3));
+    
+        --i-nil-doc-block-bg-color: var(--nil-doc-block-bg-color, hsla(200, 4%, 7%, 0.3));
+        --i-nil-doc-block-outline-color: var(--nil-doc-block-outline-color, hsla(0, 0%, 1000%, 0.3));
+
+        --i-nil-doc-container-p: var(--nil-doc-container-p, hsl(0, 2%, 40%));
+        --i-nil-doc-container-s: var(--nil-doc-container-s, hsl(0, 0%, 100%));
+
+        --i-nil-doc-controls-p: var(--nil-doc-controls-p, hsl(213, 26%, 7%));
+        --i-nil-doc-controls-s: var(--nil-doc-controls-s, hsl(213, 26%, 11%));
+        --i-nil-doc-controls-hover: var(--nil-doc-controls-hover, hsl(203, 100%, 15%));
+    }
+</style>

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

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

package/components/etc/Container.svelte

@@ -1,8 +1,6 @@
 <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;
@@ -18,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 {
@@ -36,18 +35,18 @@ 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>
@@ -56,7 +55,6 @@ const check = (v, flag, s) => {
     class="container"
     class:vertical
     class:b
-    class:dark={$dark}
     class:moving={$moving}
     bind:clientWidth={width}
     bind:clientHeight={height}
@@ -72,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,
@@ -91,10 +90,6 @@ const check = (v, flag, s) => {
 </div>
 
 <style>
-    div {
-        box-sizing: border-box;
-    }
-
     .container {
         width: 100%;
         height: 100%;
@@ -129,62 +124,54 @@ const check = (v, flag, s) => {
 
     .container > .divider > .overlay {
         width: 100%;
-        height: 20px;
+        height: 1.5rem;
         cursor: ns-resize;
         transform: translateY(-50%);
     }
 
     .container.vertical > .divider > .overlay {
-        width: 20px;
+        width: 1.5rem;
         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;
+        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(--color-p) solid 2.5px;
-        border-top: var(--color-p) solid 2.5px;
-        background-color: var(--color-p);
+        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(--color-p) solid 2.5px;
-        border-left: var(--color-p) solid 2.5px;
-        background-color: var(--color-p);
+        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(--color-s) solid 2.5px;
+        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(--color-s) solid 2.5px;
+        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(--color-s) solid 2.5px;
+        border-right: var(--i-nil-doc-container-s) solid var(--width);
     }
 
     .container.vertical.b > .divider:hover,
     .container.moving.vertical.b > .divider {
-        border-left: var(--color-s) solid 2.5px;
+        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/icons/NilDoc.svelte

@@ -32,7 +32,7 @@ $:
     svg {
         width: 100%;
         height: 100%;
-        stroke-width: 4;
+        stroke-width: 3;
         stroke-linejoin: miter;
         stroke: currentColor;
         fill: transparent;

package/components/icons/Theme.svelte

@@ -49,11 +49,6 @@ const index = indexer++;
     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,

package/components/navigation/Nav.svelte

@@ -88,28 +88,24 @@ $:
     .nav {
         width: 100%;
         height: 100%;
-        min-width: 200px;
+        min-width: 12.5rem;
         display: flex;
         flex-direction: column;
     }
 
     .search-bar {
-        padding: 5px;
+        padding: 0.3125rem;
     }
 
     input {
-        height: 30px;
+        font-size: 0.75rem;
+        height: 1.875rem;
         width: 100%;
-        padding: 0px 10px;
+        padding: 0px 0.625rem;
+        box-sizing: border-box;
     }
 
     input:focus {
         outline: none;
     }
-
-    * {
-        box-sizing: border-box;
-        padding: 0px;
-        margin: 0px;
-    }
 </style>

package/components/navigation/Node.svelte

@@ -68,29 +68,28 @@ const click = (link) => {
     }
 
     .header {
-        height: 30px;
+        height: 1.875rem;
         display: grid;
-        grid-template-columns: 15px 1fr;
+        grid-template-columns: 1rem 1fr;
         align-items: center;
         cursor: pointer;
-        gap: 5px;
-        box-sizing: border-box;
+        gap: 0.3125rem;
     }
 
     .header:hover {
-        background-color: hsla(203, 98%, 50%, 0.07);
+        background-color: var(--i-nil-doc-nav-hovered);
     }
 
     .header.selected {
-        background-color: hsla(203, 98%, 50%, 0.822);
-        color: black;
+        background-color: var(--i-nil-doc-nav-selected);
+        color: var(--i-nil-doc-nav-selected-color);
     }
 
     .icon {
         justify-content: center;
-        height: 15px;
-        width: 15px;
-        transition: transform 350ms;
+        height: 1rem;
+        width: 1rem;
+        transition: transform var(--i-nil-doc-transition-time);
     }
 
     .icon.expanded {

package/components/title/Icon.svelte

@@ -7,10 +7,10 @@
 
 <style>
     div {
-        width: 40px;
-        height: 40px;
+        width: 2.5rem;
+        height: 2.5rem;
         cursor: pointer;
-        transition: transform 350ms;
+        transition: transform var(--i-nil-doc-transition-time);
     }
 
     div:hover {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nil-/doc",
-  "version": "0.2.50",
+  "version": "0.2.51",
   "author": {
     "email": "njaldea@gmail.com",
     "name": "Neil Aldea"