@nil-/doc 0.2.28 → 0.2.30

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @nil-/doc
 
+## 0.2.30
+
+### Patch Changes
+
+-   [doc] Added color transition in Layout ([#43](https://github.com/njaldea/mono/pull/43))
+
+-   [doc] added Instance component ([#43](https://github.com/njaldea/mono/pull/43))
+
+## 0.2.29
+
+### Patch Changes
+
+-   [doc][feature] ThemeIcon ([#41](https://github.com/njaldea/mono/pull/41))
+    [doc][feature] added top bar to separate title and other controls
+
 ## 0.2.28
 
 ### Patch Changes

package/components/Layout.svelte

@@ -2,11 +2,24 @@
     @import url("https://fonts.googleapis.com/css?family=Fira%20Code");
 
     .layout {
+        display: grid;
+        grid-template-columns: 1fr;
+        grid-template-rows: minmax(40px, auto) 1fr;
         width: 100%;
         height: 100%;
         font-family: "Fira Code", "Courier New", Courier, monospace;
     }
 
+    .top {
+        display: grid;
+        grid-template-columns: 1fr 40px;
+        align-items: center;
+        padding-left: 20px;
+        padding-right: 20px;
+        box-sizing: border-box;
+        user-select: none;
+    }
+
     .content {
         height: 100%;
         padding: 5px;
@@ -36,11 +49,20 @@
 
     /* colors */
     .layout {
+        transition: color 350ms, background-color 350ms;
         background-color: hsl(0, 0%, 100%);
         color: hsl(0, 100%, 0%);
         color-scheme: light;
     }
 
+    .layout > .top {
+        border-bottom: hsl(0, 2%, 70%) solid 1px;
+    }
+
+    .layout.dark > .top {
+        border-bottom: hsl(0, 2%, 38%) solid 1px;
+    }
+
     .layout.dark {
         background-color: hsl(200, 4%, 14%);
         color: hsl(200, 6%, 80%);
@@ -51,6 +73,7 @@
 <script>import Container from "./etc/Container.svelte";
 import Nav from "./navigation/Nav.svelte";
 import { inRoot, getTheme, initTheme, evalTheme } from "./context";
+import ThemeIcon from "./etc/ThemeIcon.svelte";
 export let data;
 export let current = null;
 export let sorter = null;
@@ -63,6 +86,10 @@ $:
   $isDark = evalTheme(parentTheme ? $parentTheme : true, theme);
 </script>
 <div class="layout" class:reset={r} class:dark={$isDark}>
+    <div class="top">
+        <slot name="title"><span>@nil-/doc</span></slot>
+        <ThemeIcon bind:dark={$isDark} />
+    </div>
     <Container offset={250} padding={250} vertical secondary>
         <svelte:fragment slot="primary">
             <div class="content scrollable">
@@ -72,9 +99,7 @@ $:
                     sorter={sorter ?? ((l, r) => (l === r ? 0 : l < r ? -1 : +1))}
                     renamer={renamer ?? ((s) => s)}
                     on:navigate
-                >
-                    <slot name="title">@nil-/doc</slot>
-                </Nav>
+                />
             </div>
         </svelte:fragment>
         <svelte:fragment slot="secondary">

package/components/block/Instance.svelte

@@ -0,0 +1,11 @@
+
+<script>import Template from "./Template.svelte";
+import Params from "./Params.svelte";
+export let defaults = void 0;
+export let noreset = false;
+const cast = (t) => t;
+</script>
+<Template {defaults} {noreset} let:props let:key>
+    <slot props={cast(props)} {key} />
+</Template>
+<Params />

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

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+declare class __sveltets_Render<Args> {
+    props(): {
+        defaults?: Args | undefined;
+        noreset?: boolean | undefined;
+    };
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {
+        default: {
+            props: Args;
+            key: boolean;
+        };
+    };
+}
+export type InstanceProps<Args> = ReturnType<__sveltets_Render<Args>['props']>;
+export type InstanceEvents<Args> = ReturnType<__sveltets_Render<Args>['events']>;
+export type InstanceSlots<Args> = ReturnType<__sveltets_Render<Args>['slots']>;
+export default class Instance<Args> extends SvelteComponentTyped<InstanceProps<Args>, InstanceEvents<Args>, InstanceSlots<Args>> {
+}
+export {};

package/components/etc/ThemeIcon.svelte

@@ -0,0 +1,78 @@
+<script>export let dark = true;
+import { tweened } from "svelte/motion";
+const values = tweened(dark ? vdark : vlight, { duration: 350 });
+$:
+  values.set(dark ? vdark : vlight);
+const index = indexer++;
+</script>
+<style>
+    svg {
+        all: unset;
+        width: 50%;
+        height: 50%;
+        margin: auto;
+
+        cursor: pointer;
+        color: black;
+        fill: none;
+
+        stroke: currentColor;
+        stroke-width: 2;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+
+        -webkit-tap-highlight-color: transparent;
+        -moz-tap-highlight-color: transparent;
+        -o-tap-highlight-color: transparent;
+        tap-highlight-color: transparent;
+    }
+
+    svg.dark {
+        color: white;
+    }
+</style>
+
+<script context="module">let indexer = 0;
+const vlight = {
+  rotate: 40,
+  mask: {
+    cx: 12,
+    cy: 4
+  },
+  cr: 10,
+  opacity: 0
+};
+const vdark = {
+  rotate: 180,
+  mask: {
+    cx: 30,
+    cy: 0
+  },
+  cr: 5,
+  opacity: 1
+};
+</script>
+<svg
+    class:dark
+    viewBox="0 0 24 24"
+    style={`transform: rotate(${$values.rotate}deg)`}
+    on:click={() => (dark = !dark)}
+    on:keypress={null}
+>
+    <mask id={`theme_icon_${index}`}>
+        <rect x="0" y="0" width="100%" height="100%" fill="white" />
+        <circle cx={$values.mask.cx} cy={$values.mask.cy} r="11" fill="currentColor" />
+    </mask>
+    <circle cx="12" cy="12" r={$values.cr} fill="currentColor" mask={`url(#theme_icon_${index})`} />
+    <g style={`opacity: ${$values.opacity}`}>
+        <line x1="12" y1="1" x2="12" y2="3" />
+        <line x1="12" y1="21" x2="12" y2="23" />
+        <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+        <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+        <line x1="1" y1="12" x2="3" y2="12" />
+        <line x1="21" y1="12" x2="23" y2="12" />
+        <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+        <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+    </g>
+</svg>
+

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

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

package/components/navigation/utils.d.ts

@@ -10,8 +10,8 @@ import type { Tree, Sorter, Renamer } from "./types";
  *
  * Else comparison is done using built-in `string` comparison.
  *
- * @param {string} l
- * @param {string} r
+ * @param l - left operand
+ * @param r - right operand
  * @returns `-1 | 0 | +1`
  */
 declare const sorter: Sorter;
@@ -19,7 +19,7 @@ declare const sorter: Sorter;
  * If a text follows `<I>-<Name>` format,
  * this method simply removes the Prefix.
  *
- * @param {string} text
+ * @param text
  * @returns `<Name>`
  */
 declare const renamer: Renamer;

package/components/navigation/utils.js

@@ -19,8 +19,8 @@ function sorterT(l, r) {
  *
  * Else comparison is done using built-in `string` comparison.
  *
- * @param {string} l
- * @param {string} r
+ * @param l - left operand
+ * @param r - right operand
  * @returns `-1 | 0 | +1`
  */
 const sorter = (l, r) => {
@@ -41,7 +41,7 @@ const sorter = (l, r) => {
  * If a text follows `<I>-<Name>` format,
  * this method simply removes the Prefix.
  *
- * @param {string} text
+ * @param text
  * @returns `<Name>`
  */
 const renamer = (text) => {

package/index.d.ts

@@ -1,6 +1,7 @@
 export { renamer, sorter } from "./components/navigation/utils";
 export type { Control } from "./components/block/controls/types";
 export { default as Layout } from "./components/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";

package/index.js

@@ -1,5 +1,6 @@
 export { renamer, sorter } from "./components/navigation/utils";
 export { default as Layout } from "./components/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";

package/package.json

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

package/sveltekit/index.d.ts

@@ -1,15 +1,17 @@
 import { type Readable } from "svelte/store";
 type Routes = {
     /**
-     * Routes
+     * List of routes
      */
     data: string[];
     /**
-     * Removes unneeded group layout in the route
-     * @param {string} route
-     * @returns
+     * Current route but removes unneeded group layout in the route
      */
     current: Readable<string | null>;
+    /**
+     * Callback to navigate to other pages
+     * @param e - event that contains detail about the target url
+     */
     navigate: (e: CustomEvent<string>) => void;
 };
 /**