@nil-/doc 0.2.34 → 0.2.36

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @nil-/doc
 
+## 0.2.36
+
+### Patch Changes
+
+-   [doc][fix] color changes and transition ([#55](https://github.com/njaldea/mono/pull/55))
+
+-   [all] added html meta details ([#55](https://github.com/njaldea/mono/pull/55))
+
+## 0.2.35
+
+### Patch Changes
+
+-   [doc] changed Control "side" flag to "position" prop ([#53](https://github.com/njaldea/mono/pull/53))
+
+-   [misc] added nil icon ([#53](https://github.com/njaldea/mono/pull/53))
+
 ## 0.2.34
 
 ### Patch Changes

package/components/Layout.svelte

@@ -5,6 +5,7 @@
         display: grid;
         grid-template-columns: 1fr;
         grid-template-rows: minmax(40px, auto) 1fr;
+        gap: 1px;
         width: 100%;
         height: 100%;
         font-family: "Fira Code", "Courier New", Courier, monospace;
@@ -12,14 +13,19 @@
 
     .top {
         display: grid;
-        grid-template-columns: 1fr 40px;
+        grid-template-columns: 1fr 40px 40px;
         align-items: center;
-        padding-left: 20px;
-        padding-right: 20px;
+        padding-left: 10px;
+        padding-right: 10px;
         box-sizing: border-box;
         user-select: none;
     }
 
+    .main {
+        height: 100%;
+        overflow: hidden;
+    }
+
     .content {
         height: 100%;
         padding: 5px;
@@ -49,24 +55,25 @@
 
     /* colors */
     .layout {
-        transition: color 350ms, background-color 350ms;
-        background-color: hsl(0, 0%, 100%);
-        color: hsl(0, 100%, 0%);
         color-scheme: light;
+        color: hsl(0, 0%, 0%);
+        background-color: hsl(0, 2%, 70%);
+        transition: color 350ms, background-color 350ms;
     }
 
-    .layout > .top {
-        border-bottom: hsl(0, 2%, 70%) solid 1px;
+    .layout.dark {
+        color-scheme: dark;
+        color: hsl(0, 0%, 80%);
+        background-color: hsl(0, 2%, 40%);
     }
 
-    .layout.dark > .top {
-        border-bottom: hsl(0, 2%, 38%) solid 1px;
+    .layout > div {
+        background-color: hsl(0, 0%, 100%);
+        transition: background-color 350ms;
     }
 
-    .layout.dark {
+    .layout.dark > div {
         background-color: hsl(200, 4%, 14%);
-        color: hsl(200, 6%, 80%);
-        color-scheme: dark;
     }
 </style>
 
@@ -76,6 +83,7 @@
 import Nav from "./navigation/Nav.svelte";
 import { inRoot, getTheme, initTheme, evalTheme } from "./context";
 import ThemeIcon from "./etc/ThemeIcon.svelte";
+import NilIcon from "./etc/NilIcon.svelte";
 export let data;
 export let current = null;
 export let sorter = null;
@@ -91,26 +99,29 @@ $:
     <div class="top">
         <slot name="title"><span>@nil-/doc</span></slot>
         <ThemeIcon bind:dark={$isDark} />
+        <NilIcon />
+    </div>
+    <div class="main">
+        <Container offset={250} vertical secondary>
+            <svelte:fragment slot="primary">
+                <div class="content scrollable">
+                    <Nav
+                        info={data}
+                        selected={current ?? ""}
+                        sorter={sorter ?? defaultSorter}
+                        renamer={renamer ?? ((s) => s)}
+                        on:navigate
+                    />
+                </div>
+            </svelte:fragment>
+            <svelte:fragment slot="secondary">
+                <div class="content scrollable">
+                    {#key current}
+                        <slot />
+                    {/key}
+                </div>
+            </svelte:fragment>
+        </Container>
     </div>
-    <Container offset={250} vertical secondary>
-        <svelte:fragment slot="primary">
-            <div class="content scrollable">
-                <Nav
-                    info={data}
-                    selected={current ?? ""}
-                    sorter={sorter ?? defaultSorter}
-                    renamer={renamer ?? ((s) => s)}
-                    on:navigate
-                />
-            </div>
-        </svelte:fragment>
-        <svelte:fragment slot="secondary">
-            <div class="content scrollable">
-                {#key current}
-                    <slot />
-                {/key}
-            </div>
-        </svelte:fragment>
-    </Container>
 </div>
 

package/components/block/Block.svelte

@@ -19,6 +19,7 @@
     div {
         color-scheme: light;
         color: hsl(0, 100%, 0%);
+        transition: color 350ms;
     }
 
     div.dark {

package/components/block/Controls.svelte

@@ -2,12 +2,12 @@
 <script>import { getControls, getControlsState } from "./context";
 export let props = [];
 export let hide = false;
-export let side = false;
+export let position = void 0;
 const controls = getControls();
 $controls = props;
 const state = getControlsState();
 $:
   $state.hide = hide;
 $:
-  $state.side = side;
+  $state.position = position;
 </script>

package/components/block/Controls.svelte.d.ts

@@ -4,7 +4,7 @@ declare const __propDef: {
     props: {
         props?: Control[] | undefined;
         hide?: boolean | undefined;
-        side?: boolean | undefined;
+        position?: undefined | "bottom" | "right";
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/block/Template.svelte

@@ -1,12 +1,16 @@
 <style>
+    div {
+        box-sizing: border-box;
+    }
+
     .template {
         display: grid;
-        gap: 5px;
         padding-bottom: 10px;
         padding-top: 10px;
         grid-auto-rows: 1fr;
         grid-auto-columns: auto;
         grid-auto-flow: row;
+        border-radius: 5px;
     }
 
     .template.columns {
@@ -22,7 +26,7 @@
 
     .content {
         min-height: 100px;
-        border-radius: 5px 5px 5px 5px;
+        border-radius: 5px;
     }
 
     div:not(.cside) > .misc {
@@ -31,14 +35,22 @@
         user-select: none;
     }
 
-    .cside > .misc {
+    .template > .cside > .misc {
         border-top-right-radius: 5px;
         border-bottom-right-radius: 5px;
         user-select: none;
     }
 
-    .template > div > div {
+    .instance {
+        overflow: hidden;
+    }
+
+    .content,
+    .misc {
         margin: 3px;
+        border-style: solid;
+        border-width: 1px;
+        padding: 1px;
     }
 
     /* scrollable */
@@ -53,22 +65,29 @@
     }
 
     /* colors */
-    .content {
-        border: hsl(0, 2%, 60%) solid 1px;
-        background-color: hsl(0, 0%, 100%);
+    .template {
+        color: hsl(0, 0%, 0%);
+        background-color: hsl(0, 2%, 70%);
+        transition: color 350ms, background-color 350ms;
     }
 
-    .misc {
-        border: hsl(0, 2%, 60%) solid 1px;
+    .template.dark {
+        color-scheme: dark;
+        color: hsl(0, 0%, 80%);
+        background-color: hsl(0, 2%, 40%);
     }
 
-    .content.dark {
-        border: hsl(0, 2%, 40%) solid 1px;
-        background-color: hsl(200, 4%, 14%);
+    .content,
+    .misc {
+        border-color: hsl(0, 2%, 60%);
+        background-color: hsl(0, 0%, 100%);
+        transition: border-color 350ms, background-color 350ms;
     }
 
-    .misc.dark {
-        outline: hsl(0, 2%, 40%) solid 1px;
+    .dark .content,
+    .dark .misc {
+        border-color: hsl(0, 2%, 40%);
+        background-color: hsl(200, 4%, 14%);
     }
 </style>
 
@@ -77,6 +96,7 @@ import { getControls, getControlsState } from "./context";
 import { resolve } from "./utils";
 import { getTheme } from "../context";
 import Controls from "./controls/Controls.svelte";
+import { cquery } from "./action";
 import { beforeUpdate } from "svelte";
 const params = getParams();
 const controls = getControls();
@@ -92,15 +112,24 @@ const reset = () => {
 };
 $:
   $defaultsStore, reset();
-let key = false;
-beforeUpdate(() => key = !key);
 const resolveArgs = resolve;
 $:
   expanded = $controls.length > 0 && !$controlsState.hide;
+let key = false;
+beforeUpdate(() => key = !key);
 </script>
-<div class="template" class:columns>
+<div class="template" class:columns class:dark={$isDark}>
     {#each $params as param (param.id)}
-        <div class="scrollable" class:cside={$controlsState.side && expanded}>
+        <div
+            class="instance"
+            class:cside={expanded && "right" === $controlsState.position}
+            use:cquery={{
+                class: "cside",
+                min: 1000,
+                w: true,
+                enabled: expanded && $controlsState.position === undefined
+            }}
+        >
             {#if noreset}
                 <div class="content scrollable" class:dark={$isDark}>
                     <slot

package/components/block/action.d.ts

@@ -0,0 +1,12 @@
+import type { ActionReturn } from "svelte/action";
+type Options = {
+    class: string;
+    min: number;
+    w: boolean;
+    enabled: boolean;
+};
+/**
+ *  Temporary support for container query until svelte supports it
+ */
+export declare const cquery: (div: HTMLDivElement, options: Options) => ActionReturn<Options>;
+export {};

package/components/block/action.js

@@ -0,0 +1,26 @@
+/**
+ *  Temporary support for container query until svelte supports it
+ */
+export const cquery = (div, options) => {
+    let o = options;
+    const check = () => div.classList.toggle(o.class, (o.w ? div.clientWidth : div.clientHeight) > o.min);
+    const observer = new ResizeObserver(check);
+    if (o.enabled) {
+        observer.observe(div);
+    }
+    return {
+        update: (options) => {
+            if (o.enabled !== options.enabled) {
+                if (!o.enabled && options.enabled) {
+                    observer.observe(div);
+                }
+                else {
+                    observer.disconnect();
+                }
+            }
+            o = options;
+            check();
+        },
+        destroy: () => o.enabled && observer.disconnect()
+    };
+};

package/components/block/context.d.ts

@@ -11,7 +11,7 @@ export type Params = {
 };
 export type ControlState = {
     hide: boolean;
-    side: boolean;
+    position?: "bottom" | "right";
 };
 export declare const initParams: () => Writable<Params[]>, getParams: () => Writable<Params[]>;
 export declare const initControls: () => Writable<Control[]>, getControls: () => Writable<Control[]>;

package/components/block/context.js

@@ -11,6 +11,5 @@ export const { init: initParams, get: getParams } = create(() => []);
 export const { init: initControls, get: getControls } = create(() => []);
 export const { init: initDefaults, get: getDefaults } = create(() => null);
 export const { init: initControlsState, get: getControlsState } = create(() => ({
-    hide: false,
-    side: false
+    hide: false
 }));

package/components/etc/Container.svelte

@@ -56,10 +56,14 @@
     }
 
     .container.dark {
-        --color-p: hsl(0, 2%, 38%);
+        --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;

package/components/etc/NilIcon.svelte

@@ -0,0 +1,47 @@
+<style>
+    svg {
+        width: 100%;
+        height: 100%;
+        fill: transparent;
+        stroke: currentColor;
+        stroke-width: 4;
+        stroke-linejoin: miter;
+        cursor: pointer;
+    }
+</style>
+
+<script>import { tweened } from "svelte/motion";
+const action = (p, options) => {
+  const total = p.getTotalLength();
+  p.style.strokeDasharray = `${total * options.length} ${total}`;
+  return {
+    update: (options2) => {
+      const total2 = p.getTotalLength();
+      p.style.strokeDasharray = `${total2 * options2.length} ${total2}`;
+    }
+  };
+};
+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(0);
+let out = false;
+const click = () => {
+  if (0 === $length) {
+    $length = 1;
+    out = false;
+  } else if (!out) {
+    $length = 0;
+    out = true;
+  }
+};
+$:
+  0 === $length && click();
+</script>
+<svg viewBox="-35 -35 70 70" on:click={click} on:keypress={null}>
+    <g transform="rotate(45 0 0)">
+        <path {d} use:action={{ length: $length }} />
+    </g>
+    <g transform="rotate(225 0 0)">
+        <path {d} use:action={{ length: $length }} />
+    </g>
+</svg>
+

package/components/etc/NilIcon.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 NilIconProps = typeof __propDef.props;
+export type NilIconEvents = typeof __propDef.events;
+export type NilIconSlots = typeof __propDef.slots;
+export default class NilIcon extends SvelteComponentTyped<NilIconProps, NilIconEvents, NilIconSlots> {
+}
+export {};

package/components/etc/ThemeIcon.svelte

@@ -1,7 +1,6 @@
 <script>import { tweened } from "svelte/motion";
-import { elasticOut } from "svelte/easing";
 export let dark = true;
-const values = tweened(dark ? vdark : vlight, { duration: 1e3, easing: elasticOut });
+const values = tweened(dark ? vdark : vlight);
 $:
   $values = dark ? vdark : vlight;
 const index = indexer++;
@@ -49,7 +48,6 @@ const vdark = {
     class:dark
     viewBox="-25 -25 50 50"
     transform={`rotate(${$values.rotate})`}
-    style={`color: hsl(0, 0%, ${$values.v * 100}%);`}
     on:click={() => (dark = !dark)}
     on:keypress={null}
 >

package/components/navigation/Nav.svelte

@@ -2,6 +2,7 @@
     .nav {
         width: 100%;
         height: 100%;
+        min-width: 200px;
         gap: 10px;
         display: flex;
         flex-direction: column;

package/package.json

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