@nil-/doc 0.2.51 → 0.2.52

package/components/block/icons/Position.svelte

@@ -1,45 +1,10 @@
-<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>export let position = "hidden";
 </script>
 
 <svg viewBox="-50 -50 100 100">
     <rect width="60" height="60" x="-30" y="-30" fill="transparent" />
-    <rect {...$offset[0]} />
-    <rect {...$offset[1]} />
+    <rect class:show={position === "bottom"} />
+    <rect class:show={position === "right"} transform="rotate(-90)" />
 </svg>
 
 <style>
@@ -47,4 +12,18 @@ $:
         stroke-width: 3;
         fill: currentColor;
     }
+
+    rect:not(:first-child) {
+        transition: height 350ms, x 350ms, y 350ms;
+        width: 60px;
+        height: 0px;
+        x: -30px;
+        y: 30px;
+    }
+
+    rect:not(:first-child).show {
+        height: 20px;
+        x: -30px;
+        y: 10px;
+    }
 </style>

package/components/{etc → layout}/Container.svelte

@@ -70,7 +70,7 @@ const check = (v, flag, s) => {
         <div class="divider">
             <div
                 class="overlay"
-                title={`Collapse ${vertical ? (b ? "left" : "right"): (b ? "top" : "bottom")}`}
+                title={`Collapse ${vertical ? (b ? "left" : "right") : b ? "top" : "bottom"}`}
                 use:draggable={{
                     reset: () => offset,
                     reversed: !b,

package/components/layout/Content.svelte

@@ -0,0 +1,23 @@
+<div>
+    <slot />
+</div>
+
+<style>
+    div {
+        display: flex;
+        box-sizing: border-box;
+        margin: 0.5rem;
+        padding: 0.5rem;
+        border-radius: 0.5rem;
+        width: min-content;
+        height: min-content;
+        min-width: calc(100% - 1rem);
+        min-height: calc(100% - 1rem);
+    }
+
+    /* color */
+    div {
+        border: solid 1px var(--i-nil-doc-content-outline-color);
+        box-shadow: 0 0 0.5rem 0 var(--i-nil-doc-content-outline-color);
+    }
+</style>

package/components/{etc → layout}/Content.svelte.d.ts

@@ -1,7 +1,21 @@
+/** @typedef {typeof __propDef.props}  ContentProps */
+/** @typedef {typeof __propDef.events}  ContentEvents */
+/** @typedef {typeof __propDef.slots}  ContentSlots */
+export default class Content extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type ContentProps = typeof __propDef.props;
+export type ContentEvents = typeof __propDef.events;
+export type ContentSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        flat?: boolean | undefined;
+        [x: string]: never;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -10,9 +24,4 @@ declare const __propDef: {
         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/{Layout.svelte → layout/Layout.svelte}

@@ -2,18 +2,21 @@
 const defaultRenamer = (s) => s;
 </script>
 
-<script>import Base from "./etc/Base.svelte";
-import Container from "./etc/Container.svelte";
-import Nav from "./navigation/Nav.svelte";
-import Icon from "./title/Icon.svelte";
-import { getTheme, initTheme } from "./context";
+<script>import Base from "../Base.svelte";
+import Container from "./Container.svelte";
+import Content from "./Content.svelte";
+import Scrollable from "./Scrollable.svelte";
+import VerticalPanel from "./VerticalPanel.svelte";
+import Nav from "../navigation/Nav.svelte";
+import Icon from "./icons/Icon.svelte";
+import { getTheme, initTheme } from "../context";
 import ThemeIcon from "./icons/Theme.svelte";
-import Content from "./etc/Content.svelte";
 export let data;
 export let current = null;
 export let sorter = null;
 export let renamer = null;
 export let theme = void 0;
+export let offset = 250;
 const parentTheme = getTheme();
 const dark = initTheme();
 $:
@@ -32,7 +35,7 @@ const toggle = () => {
     See [documentation](https://mono-doc.vercel.app/3-Components/1-Layout) for more details.
 -->
 
-<Base dark={$dark}>
+<Base dark={$dark} fill>
     <div class="fill layout">
         <div class="top">
             <div class="title">
@@ -44,24 +47,28 @@ const toggle = () => {
                 </Icon>
             </slot>
         </div>
-        <Container offset={250} vertical b>
+        <Container bind:offset vertical b>
             <svelte:fragment slot="A">
-                <Content flat>
-                    <Nav
-                        info={data}
-                        selected={current ?? ""}
-                        sorter={sorter ?? defaultSorter}
-                        renamer={renamer ?? defaultRenamer}
-                        on:navigate
-                    />
-                </Content>
+                <Scrollable>
+                    <VerticalPanel>
+                        <Nav
+                            info={data}
+                            selected={current ?? ""}
+                            sorter={sorter ?? defaultSorter}
+                            renamer={renamer ?? defaultRenamer}
+                            on:navigate
+                        />
+                    </VerticalPanel>
+                </Scrollable>
             </svelte:fragment>
             <svelte:fragment slot="B">
-                <Content>
-                    {#key current}
-                        <slot />
-                    {/key}
-                </Content>
+                <Scrollable>
+                    <Content>
+                        {#key current}
+                            <slot />
+                        {/key}
+                    </Content>
+                </Scrollable>
             </svelte:fragment>
         </Container>
     </div>
@@ -87,8 +94,8 @@ const toggle = () => {
         grid-auto-columns: 2.5rem;
         grid-template-columns: 1fr;
         align-items: center;
-        padding-left: 0.625rem;
-        padding-right: 0.625rem;
+        padding-left: 0.5rem;
+        padding-right: 0.5rem;
         border-bottom-width: 1px;
         border-bottom-style: solid;
         user-select: none;
@@ -99,7 +106,7 @@ const toggle = () => {
         grid-auto-flow: column;
         align-items: center;
         justify-content: left;
-        gap: 0.3125rem;
+        gap: 0.25rem;
     }
 
     .layout {

package/components/{Layout.svelte.d.ts → layout/Layout.svelte.d.ts}

@@ -1,6 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
-import type { Sorter, Renamer } from "./navigation/types";
-import { type Theme } from "./context";
+import type { Sorter, Renamer } from "../navigation/types";
+import { type Theme } from "../context";
 declare const __propDef: {
     props: {
         data: string[];
@@ -8,6 +8,7 @@ declare const __propDef: {
         sorter?: Sorter | null | undefined;
         renamer?: Renamer | null | undefined;
         theme?: Theme;
+        offset?: number | undefined;
     };
     events: {
         navigate: CustomEvent<any>;

package/components/layout/Scrollable.svelte

@@ -0,0 +1,20 @@
+<div>
+    <slot />
+</div>
+
+<style>
+    /* scrollable */
+    div {
+        width: 100%;
+        height: 100%;
+        overflow: scroll;
+        /* Firefox */
+        scrollbar-width: none;
+        /* IE and Edge */
+        -ms-overflow-style: none;
+    }
+
+    div::-webkit-scrollbar {
+        display: none;
+    }
+</style>

package/components/layout/Scrollable.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  ScrollableProps */
+/** @typedef {typeof __propDef.events}  ScrollableEvents */
+/** @typedef {typeof __propDef.slots}  ScrollableSlots */
+export default class Scrollable extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type ScrollableProps = typeof __propDef.props;
+export type ScrollableEvents = typeof __propDef.events;
+export type ScrollableSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/components/layout/VerticalPanel.svelte

@@ -0,0 +1,12 @@
+<div>
+    <slot />
+</div>
+
+<style>
+    div {
+        width: 100%;
+        box-sizing: border-box;
+        min-width: min-content;
+        display: inline-block;
+    }
+</style>

package/components/layout/VerticalPanel.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  VerticalPanelProps */
+/** @typedef {typeof __propDef.events}  VerticalPanelEvents */
+/** @typedef {typeof __propDef.slots}  VerticalPanelSlots */
+export default class VerticalPanel extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type VerticalPanelProps = typeof __propDef.props;
+export type VerticalPanelEvents = typeof __propDef.events;
+export type VerticalPanelSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/components/{icons/NilDoc.svelte → layout/icons/Nil.svelte}

@@ -21,10 +21,10 @@ $:
 
 <svg viewBox="-35 -35 70 70" on:pointerenter={trigger}>
     <g transform="rotate(45 0 0)">
-        <path {d} use:action={$length} />
+        <path {d} use:action={$length} pathLength={100} />
     </g>
     <g transform="rotate(225 0 0)">
-        <path {d} use:action={$length} />
+        <path {d} use:action={$length} pathLength={100} />
     </g>
 </svg>
 

package/components/layout/icons/Nil.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 NilProps = typeof __propDef.props;
+export type NilEvents = typeof __propDef.events;
+export type NilSlots = typeof __propDef.slots;
+export default class Nil extends SvelteComponentTyped<NilProps, NilEvents, NilSlots> {
+}
+export {};

package/components/{icons → layout/icons}/Theme.svelte

@@ -1,35 +1,17 @@
 <script context="module">let indexer = 0;
-const vlight = {
-  rotate: 40,
-  mcy: -8,
-  cr: 10,
-  v: 0
-};
-const vdark = {
-  rotate: 180,
-  mcy: -24,
-  cr: 5,
-  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;
+<script>export let theme = "dark";
 const index = indexer++;
 </script>
 
-<svg class:dark viewBox="-25 -25 50 50" transform={`rotate(${$values.rotate})`}>
+<svg viewBox="-25 -25 50 50" class:dark={theme === "light"}>
     <mask id={`nil_doc_theme_icon_${index}`}>
         <rect x="-25" y="-25" fill="white" />
-        <circle cy={$values.mcy} r="11" />
+        <circle r="11" fill="black" stroke="black" />
     </mask>
-    <circle r={$values.cr} mask={`url(#nil_doc_theme_icon_${index})`} />
-    <g style={`opacity: ${$values.v}`}>
+    <circle mask={`url(#nil_doc_theme_icon_${index})`} />
+    <g>
         <g>
             <line x1="0" y1="9" x2="0" y2="11" />
             <line x1="9" y1="0" x2="11" y2="0" />
@@ -62,4 +44,40 @@ const index = indexer++;
         stroke-linecap: round;
         stroke-linejoin: round;
     }
+
+    svg {
+        transition: transform 350ms;
+        transform: rotate(40deg);
+    }
+
+    svg > g {
+        transition: opacity 350ms;
+        opacity: 0;
+    }
+
+    svg > mask > circle {
+        transition: cy 350ms;
+        cy: -8px;
+    }
+
+    svg > circle {
+        transition: r 350ms;
+        r: 10px;
+    }
+
+    svg.dark {
+        transform: rotate(180deg);
+    }
+
+    svg.dark > g {
+        opacity: 1;
+    }
+
+    svg.dark > mask > circle {
+        cy: -24px;
+    }
+
+    svg.dark > circle {
+        r: 5px;
+    }
 </style>

package/components/{icons → layout/icons}/Theme.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import type { Theme } from "../context";
+import type { Theme } from "../../context";
 declare const __propDef: {
     props: {
         theme?: Theme;

package/components/navigation/Nav.svelte

@@ -94,14 +94,14 @@ $:
     }
 
     .search-bar {
-        padding: 0.3125rem;
+        padding: 0.25rem;
     }
 
     input {
         font-size: 0.75rem;
-        height: 1.875rem;
+        height: 1.75rem;
         width: 100%;
-        padding: 0px 0.625rem;
+        padding: 0px 0.5rem;
         box-sizing: border-box;
     }
 

package/components/navigation/Node.svelte

@@ -11,12 +11,15 @@ export let sorter;
 export let renamer;
 const dispatch = createEventDispatcher();
 $:
-  style = `padding-left: ${10 + depth * 10}px;`;
+  style = `padding-left: ${0.5 + depth}rem; padding-right: 0.5rem`;
 $:
   hasChildren = Object.keys(value.sub).length > 0;
 const click = (link) => {
   if (link != null && selected !== link) {
     dispatch("navigate", link);
+    if (hasChildren && !states.expanded) {
+      states.expanded = true;
+    }
   } else if (hasChildren) {
     states.expanded = !states.expanded;
   }
@@ -30,6 +33,7 @@ const click = (link) => {
         on:keypress={null}
         {style}
         class:selected={selected === value.url}
+        class:paged={value.url != null}
     >
         <div class="icon" class:expanded={hasChildren && (expand || states.expanded)}>
             <div>{Object.keys(value.sub).length > 0 ? ">" : "-"}</div>
@@ -68,21 +72,26 @@ const click = (link) => {
     }
 
     .header {
-        height: 1.875rem;
+        height: 1.75rem;
         display: grid;
         grid-template-columns: 1rem 1fr;
         align-items: center;
         cursor: pointer;
-        gap: 0.3125rem;
+        gap: 0.25rem;
+        white-space: nowrap;
+        padding-right: 0.5rem;
     }
 
     .header:hover {
         background-color: var(--i-nil-doc-nav-hovered);
     }
 
+    .header.paged:hover {
+        background-color: var(--i-nil-doc-nav-page-hovered);
+    }
+
     .header.selected {
-        background-color: var(--i-nil-doc-nav-selected);
-        color: var(--i-nil-doc-nav-selected-color);
+        background-color: var(--i-nil-doc-nav-selected) !important;
     }
 
     .icon {

package/index.d.ts

@@ -1,12 +1,12 @@
 export { renamer } from "./components/navigation/utils/renamer";
 export { sorter } from "./components/navigation/utils/sorter";
 export type { Prop, Event, PropType, Detailed, Flattened, Unionized } from "./components/block/controls/types";
-export { default as Layout } from "./components/Layout.svelte";
+export { default as Layout } from "./components/layout/Layout.svelte";
 export { default as Instance } from "./components/block/Instance.svelte";
 export { default as Block } from "./components/block/Block.svelte";
 export { default as Template } from "./components/block/Template.svelte";
 export { default as Controls } from "./components/block/Controls.svelte";
 export { default as Params } from "./components/block/Params.svelte";
-export { default as Icon } from "./components/title/Icon.svelte";
-export { default as NilDoc } from "./components/icons/NilDoc.svelte";
-export { default as Theme } from "./components/icons/Theme.svelte";
+export { default as Icon } from "./components/layout/icons/Icon.svelte";
+export { default as Nil } from "./components/layout/icons/Nil.svelte";
+export { default as Theme } from "./components/layout/icons/Theme.svelte";

package/index.js

@@ -1,11 +1,11 @@
 export { renamer } from "./components/navigation/utils/renamer";
 export { sorter } from "./components/navigation/utils/sorter";
-export { default as Layout } from "./components/Layout.svelte";
+export { default as Layout } from "./components/layout/Layout.svelte";
 export { default as Instance } from "./components/block/Instance.svelte";
 export { default as Block } from "./components/block/Block.svelte";
 export { default as Template } from "./components/block/Template.svelte";
 export { default as Controls } from "./components/block/Controls.svelte";
 export { default as Params } from "./components/block/Params.svelte";
-export { default as Icon } from "./components/title/Icon.svelte";
-export { default as NilDoc } from "./components/icons/NilDoc.svelte";
-export { default as Theme } from "./components/icons/Theme.svelte";
+export { default as Icon } from "./components/layout/icons/Icon.svelte";
+export { default as Nil } from "./components/layout/icons/Nil.svelte";
+export { default as Theme } from "./components/layout/icons/Theme.svelte";

package/package.json

@@ -1,22 +1,22 @@
 {
   "name": "@nil-/doc",
-  "version": "0.2.51",
+  "version": "0.2.52",
   "author": {
     "email": "njaldea@gmail.com",
     "name": "Neil Aldea"
   },
   "license": "ISC",
   "devDependencies": {
-    "@sveltejs/adapter-vercel": "^1.0.5",
-    "@sveltejs/kit": "^1.3.2",
+    "@sveltejs/adapter-vercel": "^1.0.6",
+    "@sveltejs/kit": "^1.5.5",
     "@sveltejs/package": "^1.0.2",
     "@vitest/coverage-c8": "^0.26.3",
     "mdsvex": "^0.10.6",
     "remark-admonitions": "^1.2.1",
     "svelte-check": "^2.10.3",
     "tslib": "^2.5.0",
-    "typescript": "^4.9.4",
-    "vite": "^4.0.4",
+    "typescript": "^4.9.5",
+    "vite": "^4.1.1",
     "vitest": "^0.26.3"
   },
   "peerDependencies": {
@@ -31,6 +31,9 @@
     "component"
   ],
   "type": "module",
+  "dependencies": {
+    "vanilla-picker": "^2.12.1"
+  },
   "exports": {
     "./package.json": "./package.json",
     ".": "./index.js",

package/sveltekit/index.d.ts

@@ -19,10 +19,16 @@ type Settings = {
      * Default is "dark"
      */
     theme: Writable<Exclude<Theme, undefined>>;
+    /**
+     * A store that is responsible in keeping the offset in localStorage
+     * offset is the width of the navigation panel.
+     * Default is 250px
+     */
+    offset: Writable<number>;
 };
 /**
  * Dedicated helper method to be used for sveltekit
- * @param detail - vite's `import.meta.glob(..., { eager: true })`
+ * @param detail - vite's `import.meta.glob(...)`
  * @param prefix - only use when layout is not in the root route
  * @returns Settings
  */