@nil-/doc 0.3.3 → 1.0.0

package/components/block/Block.svelte

@@ -1,19 +1,15 @@
 <script>import { initParams, initDefaults, initControls, initOrientation } from "./context";
 import Base from "../Base.svelte";
-import { getTheme, initTheme } from "../context";
+import { getTheme } from "../context";
 initParams();
 initDefaults();
 initControls();
 const columns = initOrientation();
-export let theme = void 0;
-const parentTheme = getTheme();
-const dark = initTheme();
-$:
-  $dark = theme === void 0 ? $parentTheme : "dark" === theme;
+const dark = getTheme();
 </script>
 
 <!--
-    @component
+    @component3-Block
     See [documentation](https://mono-doc.vercel.app/3-Components/2-Block) for more details.
 -->
 

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

@@ -1,9 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
-import { type Theme } from "../context";
 declare const __propDef: {
-    props: {
-        theme?: Theme;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
@@ -14,7 +11,10 @@ declare const __propDef: {
 export type BlockProps = typeof __propDef.props;
 export type BlockEvents = typeof __propDef.events;
 export type BlockSlots = typeof __propDef.slots;
-/** See [documentation](https://mono-doc.vercel.app/3-Components/2-Block) for more details. */
+/**
+ * 3-Block
+ * See [documentation](https://mono-doc.vercel.app/3-Components/2-Block) for more details.
+ */
 export default class Block extends SvelteComponentTyped<BlockProps, BlockEvents, BlockSlots> {
 }
 export {};

package/components/block/Controls.svelte

@@ -8,5 +8,5 @@ $:
 
 <!--
     @component
-    See [documentation](https://mono-doc.vercel.app/3-Components/2-Block/2-Controls) for more details.
+    See [documentation](https://mono-doc.vercel.app/3-Components/3-Block/2-Controls) for more details.
 -->

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

@@ -13,7 +13,7 @@ declare const __propDef: {
 export type ControlsProps = typeof __propDef.props;
 export type ControlsEvents = typeof __propDef.events;
 export type ControlsSlots = typeof __propDef.slots;
-/** See [documentation](https://mono-doc.vercel.app/3-Components/2-Block/2-Controls) for more details. */
+/** See [documentation](https://mono-doc.vercel.app/3-Components/3-Block/2-Controls) for more details. */
 export default class Controls extends SvelteComponentTyped<ControlsProps, ControlsEvents, ControlsSlots> {
 }
 export {};

package/components/block/Instance.svelte

@@ -9,7 +9,6 @@ export let defaults = void 0;
 export let noreset = false;
 let key = false;
 beforeUpdate(() => key = !key);
-const resolveArgs = resolve;
 const values = writable({ props: {}, events: [] });
 const updateBound = (d) => $values.props = resolve(d ?? {}, {});
 $:
@@ -31,14 +30,14 @@ const populate = (ext) => {
   const obj = {};
   const stringify = (detail) => {
     if (detail) {
-      if (typeof detail === "string") {
+      if ("string" === typeof detail) {
         return detail;
       }
       return JSON.stringify(detail);
     }
     return "";
   };
-  if (ext != null) {
+  if (null != ext) {
     for (const name of ext) {
       obj[name] = (ev) => {
         const detail = stringify(ev.detail);
@@ -60,34 +59,31 @@ const populate = (ext) => {
   }
   return obj;
 };
+$:
+  props = resolve(defaults ?? {}, $values.props);
+$:
+  events = populate($controls.events);
 </script>
 
 <!--
     @component
-    See [documentation](https://mono-doc.vercel.app/3-Components/2-Block/1-Content/1-Instance) for more details.
+    See [documentation](https://mono-doc.vercel.app/3-Components/3-Block/1-Content/1-Instance) for more details.
 -->
 
 <div
     class="instance"
     class:selected={$vv === values}
     class:controls={$controls.events.length > 0 || $controls.props.length > 0}
+    role="none"
     on:click={focus}
     on:keypress={null}
 >
     <div class="content">
         {#if noreset}
-            <slot
-                props={resolveArgs(defaults ?? {}, $values.props)}
-                events={populate($controls.events)}
-                {key}
-            />
+            <slot {props} {events} {key} />
         {:else}
             {#key key}
-                <slot
-                    props={resolveArgs(defaults ?? {}, $values.props)}
-                    events={populate($controls.events)}
-                    {key}
-                />
+                <slot {props} {events} {key} />
             {/key}
         {/if}
     </div>

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

@@ -18,7 +18,7 @@ declare class __sveltets_Render<PropArgs> {
 export type InstanceProps<PropArgs> = ReturnType<__sveltets_Render<PropArgs>['props']>;
 export type InstanceEvents<PropArgs> = ReturnType<__sveltets_Render<PropArgs>['events']>;
 export type InstanceSlots<PropArgs> = ReturnType<__sveltets_Render<PropArgs>['slots']>;
-/** See [documentation](https://mono-doc.vercel.app/3-Components/2-Block/1-Content/1-Instance) for more details. */
+/** See [documentation](https://mono-doc.vercel.app/3-Components/3-Block/1-Content/1-Instance) for more details. */
 export default class Instance<PropArgs> extends SvelteComponentTyped<InstanceProps<PropArgs>, InstanceEvents<PropArgs>, InstanceSlots<PropArgs>> {
 }
 export {};

package/components/block/Params.svelte

@@ -6,8 +6,8 @@ const params = getParams();
 const id = $params.length;
 $params.push({
   id,
-  tag: tag ?? `${id}`,
-  values: resolve(props, {})
+  tag: `${id}`,
+  values: {}
 });
 $:
   $params[id].tag = tag ?? `${id}`;
@@ -17,5 +17,5 @@ $:
 
 <!--
     @component
-    See [documentation](https://mono-doc.vercel.app/3-Components/2-Block/1-Content/2-Template/1-Params) for more details.
+    See [documentation](https://mono-doc.vercel.app/3-Components/3-Block/1-Content/2-Template/1-Params) for more details.
 -->

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

@@ -13,7 +13,7 @@ declare const __propDef: {
 export type ParamsProps = typeof __propDef.props;
 export type ParamsEvents = typeof __propDef.events;
 export type ParamsSlots = typeof __propDef.slots;
-/** See [documentation](https://mono-doc.vercel.app/3-Components/2-Block/1-Content/2-Template/1-Params) for more details. */
+/** See [documentation](https://mono-doc.vercel.app/3-Components/3-Block/1-Content/2-Template/1-Params) for more details. */
 export default class Params extends SvelteComponentTyped<ParamsProps, ParamsEvents, ParamsSlots> {
 }
 export {};

package/components/block/Template.svelte

@@ -15,12 +15,11 @@ $:
 let key = false;
 beforeUpdate(() => key = !key);
 const resolveArgs = resolve;
-const cast = (t) => t;
 </script>
 
 <!--
     @component
-    See [documentation](https://mono-doc.vercel.app/3-Components/2-Block/1-Content/2-Template) for more details.
+    See [documentation](https://mono-doc.vercel.app/3-Components/3-Block/1-Content/2-Template) for more details.
 -->
 
 {#each $params as param (param.id)}
@@ -31,6 +30,6 @@ const cast = (t) => t;
         let:props
         let:events
     >
-        <slot id={param.id} tag={param.tag} props={cast(props)} {events} {key} />
+        <slot id={param.id} tag={param.tag} {props} {events} {key} />
     </Instance>
 {/each}

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

@@ -12,7 +12,7 @@ declare class __sveltets_Render<Args> {
         default: {
             id: number;
             tag: string;
-            props: Args;
+            props: unknown;
             events: Record<string, (ev: CustomEvent<unknown>) => void>;
             key: boolean;
         };
@@ -21,7 +21,7 @@ declare class __sveltets_Render<Args> {
 export type TemplateProps<Args> = ReturnType<__sveltets_Render<Args>['props']>;
 export type TemplateEvents<Args> = ReturnType<__sveltets_Render<Args>['events']>;
 export type TemplateSlots<Args> = ReturnType<__sveltets_Render<Args>['slots']>;
-/** See [documentation](https://mono-doc.vercel.app/3-Components/2-Block/1-Content/2-Template) for more details. */
+/** See [documentation](https://mono-doc.vercel.app/3-Components/3-Block/1-Content/2-Template) for more details. */
 export default class Template<Args> extends SvelteComponentTyped<TemplateProps<Args>, TemplateEvents<Args>, TemplateSlots<Args>> {
 }
 export {};

package/components/block/controls/Controls.svelte

@@ -45,19 +45,19 @@ const cycleMode = () => {
                 <ControlView {mode} />
             </Button>
         </div>
-        {#if mode === "props"}
+        {#if "props" === mode}
             <div>Name</div>
             <div>Value</div>
             <div>Use</div>
-        {:else if mode === "events"}
+        {:else if "events" === mode}
             <div>Events</div>
             <div>Detail</div>
         {/if}
     </div>
     {#key $values && $controls}
         {#if cc != null && $cc != null && vv != null && $vv != null}
-            <Props infos={$cc.props} visible={mode === "props"} bind:values={$vv.props} />
-            <Events events={$vv.events} visible={mode === "events"} />
+            <Props infos={$cc.props} visible={"props" === mode} bind:values={$vv.props} />
+            <Events events={$vv.events} visible={"events" === mode} />
         {/if}
     {/key}
 </Styler>

package/components/block/controls/Styler.svelte

@@ -1,7 +1,7 @@
 <script>export let type;
 </script>
 
-<div class:props={type === "props"} class:events={type === "events"}>
+<div class:props={"props" === type} class:events={"events" === type}>
     <slot />
 </div>
 

package/components/block/controls/props/Color.svelte

@@ -11,6 +11,7 @@
     case "rgb":
       return color.rgbString;
     case "rgba":
+    default:
       return color.rgbaString;
   }
 };
@@ -34,7 +35,7 @@ const action = (d, { format, P }) => {
     popup: "left",
     editorFormat: format.substring(0, 3),
     editor: true,
-    alpha: format.length === 4,
+    alpha: 4 === format.length,
     onChange: (color) => {
       ivalue = colorSetter(getFormat(info), color);
       d.style.borderColor = ivalue;
@@ -44,7 +45,7 @@ const action = (d, { format, P }) => {
   return {
     update: (format2) => {
       picker.setOptions({
-        alpha: format2.length === 4,
+        alpha: 4 === format2.length,
         editorFormat: format2.substring(0, 3)
       });
     },

package/components/block/controls/props/Component.svelte

@@ -15,45 +15,41 @@ export let visible = false;
 </script>
 
 {#if info instanceof Array}
-    {@const type = info[1]}
-    {#if "object" === type}
+    {#if "object" === info[1]}
         <Object {info} bind:value {depth} {disabled} {visible} />
-    {:else if "tuple" === type}
+    {:else if "tuple" === info[1]}
         <Tuple {info} bind:value {depth} {disabled} {visible} />
-    {:else if "text" === type}
+    {:else if "text" === info[1]}
         <Text {info} bind:value {depth} {disabled} {visible} />
-    {:else if "color" === type}
+    {:else if "color" === info[1]}
         <Color {info} bind:value {depth} {disabled} {visible} />
-    {:else if "number" === type}
+    {:else if "number" === info[1]}
         <Number {info} bind:value {depth} {disabled} {visible} />
-    {:else if "range" === type}
+    {:else if "range" === info[1]}
         <Range {info} bind:value {depth} {disabled} {visible} />
-    {:else if "select" === type}
+    {:else if "select" === info[1]}
         <Select {info} bind:value {depth} {disabled} {visible} />
-    {:else if "toggle" === type}
+    {:else if "toggle" === info[1]}
         <Toggle {info} bind:value {depth} {disabled} {visible} />
-    {:else if "button" === type}
-        <Button {info} {visible} />
-    {/if}
-{:else}
-    {@const type = info.type}
-    {#if "object" === type}
-        <Object {info} bind:value {depth} {disabled} {visible} />
-    {:else if "tuple" === type}
-        <Tuple {info} bind:value {depth} {disabled} {visible} />
-    {:else if "text" === type}
-        <Text {info} bind:value {depth} {disabled} {visible} />
-    {:else if "color" === type}
-        <Color {info} bind:value {depth} {disabled} {visible} />
-    {:else if "number" === type}
-        <Number {info} bind:value {depth} {disabled} {visible} />
-    {:else if "range" === type}
-        <Range {info} bind:value {depth} {disabled} {visible} />
-    {:else if "select" === type}
-        <Select {info} bind:value {depth} {disabled} {visible} />
-    {:else if "toggle" === type}
-        <Toggle {info} bind:value {depth} {disabled} {visible} />
-    {:else if "button" === type}
+    {:else if "button" === info[1]}
         <Button {info} {visible} />
     {/if}
+{:else if "object" === info.type}
+    <Object {info} bind:value {depth} {disabled} {visible} />
+{:else if "tuple" === info.type}
+    <Tuple {info} bind:value {depth} {disabled} {visible} />
+{:else if "text" === info.type}
+    <Text {info} bind:value {depth} {disabled} {visible} />
+{:else if "color" === info.type}
+    <Color {info} bind:value {depth} {disabled} {visible} />
+{:else if "number" === info.type}
+    <Number {info} bind:value {depth} {disabled} {visible} />
+{:else if "range" === info.type}
+    <Range {info} bind:value {depth} {disabled} {visible} />
+{:else if "select" === info.type}
+    <Select {info} bind:value {depth} {disabled} {visible} />
+{:else if "toggle" === info.type}
+    <Toggle {info} bind:value {depth} {disabled} {visible} />
+{:else if "button" === info.type}
+    <Button {info} {visible} />
 {/if}

package/components/block/controls/props/Object.svelte

@@ -7,7 +7,7 @@ export let info;
 export let depth;
 export let disabled = false;
 export let visible = false;
-let ivalue = value ?? defaulter(info);
+const ivalue = value ?? defaulter(info);
 let enabled = value !== void 0;
 let expand = getValues(info).length > 0 ? true : void 0;
 $:

package/components/block/controls/props/Tuple.svelte

@@ -7,7 +7,7 @@ export let info;
 export let depth;
 export let disabled = false;
 export let visible = false;
-let ivalue = value ?? defaulter(info);
+const ivalue = value ?? defaulter(info);
 let enabled = value !== void 0;
 let expand = getValues(info).length > 0 ? true : void 0;
 $:

package/components/block/controls/props/misc/GroupHeader.svelte

@@ -16,7 +16,7 @@ const flip = () => {
 </script>
 
 {#if visible}
-    <div on:click={flip} on:keypress={null}>
+    <div on:click={flip} on:keypress={null} role="none">
         <Name
             expand={expand === undefined ? undefined : expand && checked && !disabled}
             {name}

package/components/block/controls/props/misc/Name.svelte

@@ -4,9 +4,9 @@ export let expand = void 0;
 </script>
 
 <div class="override" style:padding-left={`${depth}rem`} title={name}>
-    <div class="icon" class:expand={expand === true}>
+    <div class="icon" class:expand={true === expand}>
         <div>
-            {expand === undefined ? "-" : ">"}
+            {undefined === expand ? "-" : ">"}
         </div>
     </div>
     <span>{name}</span>

package/components/block/controls/props/misc/Toggle.svelte

@@ -14,6 +14,7 @@ const dark = getTheme();
         viewBox="-30 -30 60 60"
         on:click|stopPropagation={click}
         on:keypress
+        role="none"
         class:disabled
         class:dark={$dark}
     >

package/components/block/controls/types.d.ts

@@ -34,7 +34,7 @@ export type PropType<T extends Types> =
     ]
     : T extends "range" ? [
         [ name: string, type: T, min: number, max: number, step: number ],
-        { name: string; type: T; min: number; max: number, step: number; }
+        { name: string; type: T; min: number; max: number; step: number; }
     ]
     : T extends "tuple" ? [
         // eslint-disable-next-line no-use-before-define

package/components/block/icons/Button.svelte

@@ -3,7 +3,7 @@
     export let scale = false;
 </script>
 
-<div on:click on:keypress {title} class:scale>
+<div on:click on:keypress role="none" {title} class:scale>
     <slot />
 </div>
 

package/components/block/icons/ControlView.svelte

@@ -4,7 +4,7 @@
 <svg viewBox="-50 -50 100 100">
     <rect width="60" height="60" x="-30" y="-30" fill="transparent" />
     <rect
-        x={mode === "props" ? 0 : -20}
+        x={"props" === mode ? 0 : -20}
         class="mv"
         height="40"
         width="20"

package/components/block/icons/Position.svelte

@@ -1,8 +1,8 @@
 <script>export let position = "hidden";
 $:
-  bottom = position === "bottom";
+  bottom = "bottom" === position;
 $:
-  right = position === "right";
+  right = "right" === position;
 </script>
 
 <svg viewBox="-50 -50 100 100">

package/components/context.d.ts

@@ -1,4 +1,4 @@
 import type { Writable } from "svelte/store";
-export type Theme = undefined | "light" | "dark";
+export type Theme = "light" | "dark";
 export declare const getTheme: () => Writable<boolean>;
 export declare const initTheme: () => Writable<boolean>;

package/components/layout/Container.svelte

@@ -5,8 +5,8 @@ export let vertical = false;
 export let offset = 4;
 export let b = false;
 export let persistent = false;
-let width;
-let height;
+let width = null;
+let height = null;
 const { position, draggable } = createDraggable(offset);
 $:
   span = vertical ? width : height;
@@ -50,6 +50,12 @@ const check = (v, flag, s) => {
     return v > min;
   }
 };
+const title = (v, b2) => {
+  if (v) {
+    return b2 ? "left" : "right";
+  }
+  return b2 ? "top" : "bottom";
+};
 </script>
 
 <div
@@ -66,14 +72,14 @@ const check = (v, flag, s) => {
 >
     {#if width != null && height != null}
         <div style:grid-area="A">
-            {#if persistent || check($off, !b, span)}
+            {#if persistent || check($off, !b, span ?? 0)}
                 <slot name="A" />
             {/if}
         </div>
         <div class="divider">
             <div
                 class="overlay"
-                title={`Collapse ${vertical ? (b ? "left" : "right") : b ? "top" : "bottom"}`}
+                title={`Collapse ${title(vertical, b)}`}
                 use:draggable={{
                     reset: () => offset,
                     reversed: !b,
@@ -85,7 +91,7 @@ const check = (v, flag, s) => {
             />
         </div>
         <div style:grid-area="B">
-            {#if persistent || check($off, b, span)}
+            {#if persistent || check($off, b, span ?? 0)}
                 <slot name="B" />
             {/if}
         </div>

package/components/layout/DocLayout.svelte

@@ -0,0 +1,34 @@
+<script context="module"></script>
+
+<script>import Layout from "./Layout.svelte";
+import ThemeToggle from "./ThemeToggle.svelte";
+export let settings;
+export let sorter = void 0;
+export let renamer = void 0;
+let { data, current, theme, offset, panel, navigate } = settings;
+$: {
+  data = settings.data;
+  current = settings.current;
+  theme = settings.theme;
+  offset = settings.offset;
+  panel = settings.panel;
+  navigate = settings.navigate;
+}
+</script>
+
+<Layout
+    {data}
+    {sorter}
+    {renamer}
+    current={$current}
+    bind:theme={$theme}
+    bind:offset={$offset}
+    bind:panel={$panel}
+    on:navigate={navigate}
+>
+    <slot slot="title" name="title" />
+    <slot slot="title-misc" name="title-misc">
+        <ThemeToggle bind:theme={$theme} />
+    </slot>
+    <slot />
+</Layout>

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

@@ -0,0 +1,38 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Readable, Writable } from "svelte/store";
+type Settings = {
+    readonly data: readonly string[];
+    readonly current: Readable<string | null>;
+    readonly offset: Writable<number>;
+    readonly theme: Writable<"dark" | "light">;
+    readonly panel: Writable<"bottom" | "right">;
+    readonly navigate: (e: {
+        detail: string;
+    }) => Promise<void>;
+};
+import type { Renamer, Sorter } from "../navigation/types";
+declare const __propDef: {
+    props: {
+        settings: Settings;
+        sorter?: Sorter | undefined;
+        renamer?: Renamer | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        title: {
+            slot: string;
+        };
+        'title-misc': {
+            slot: string;
+        };
+        default: {};
+    };
+};
+export type DocLayoutProps = typeof __propDef.props;
+export type DocLayoutEvents = typeof __propDef.events;
+export type DocLayoutSlots = typeof __propDef.slots;
+export default class DocLayout extends SvelteComponentTyped<DocLayoutProps, DocLayoutEvents, DocLayoutSlots> {
+}
+export {};

package/components/layout/Layout.svelte

@@ -9,13 +9,12 @@ import Controls from "../block/controls/Controls.svelte";
 import Scrollable from "./Scrollable.svelte";
 import VerticalPanel from "./VerticalPanel.svelte";
 import Nav from "../navigation/Nav.svelte";
-import Icon from "./icons/Icon.svelte";
+import ThemeToggle from "./ThemeToggle.svelte";
 import {
   initControlInfo,
   initControlValue
 } from "../block/context";
 import { getTheme, initTheme } from "../context";
-import ThemeIcon from "./icons/Theme.svelte";
 import { get } from "svelte/store";
 export let data;
 export let current = null;
@@ -35,7 +34,7 @@ $:
 const panelChange = (info) => {
   if (info != null) {
     const i = get(info);
-    if (panelOffset == 4) {
+    if (4 === panelOffset) {
       if (i.props.length > 0) {
         panelOffset = 250;
         mode = "props";
@@ -50,13 +49,6 @@ const panelChange = (info) => {
 };
 $:
   panelChange($activeControl);
-const toggle = () => {
-  if (theme !== void 0) {
-    theme = $dark ? "light" : "dark";
-  } else {
-    $dark = !$dark;
-  }
-};
 </script>
 
 <!--
@@ -71,9 +63,7 @@ const toggle = () => {
                 <slot name="title" />
             </div>
             <slot name="title-misc">
-                <Icon on:click={toggle}>
-                    <ThemeIcon {theme} />
-                </Icon>
+                <ThemeToggle bind:theme />
             </slot>
         </div>
         <Container bind:offset vertical b>
@@ -91,7 +81,7 @@ const toggle = () => {
                 </Scrollable>
             </svelte:fragment>
             <svelte:fragment slot="B">
-                <Container vertical={panel === "right"} persistent bind:offset={panelOffset}>
+                <Container vertical={"right" === panel} persistent bind:offset={panelOffset}>
                     <svelte:fragment slot="A">
                         <Scrollable>
                             <Content>

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

@@ -3,16 +3,16 @@ import type { Sorter, Renamer } from "../navigation/types";
 import { type Theme } from "../context";
 declare const __propDef: {
     props: {
-        data: string[];
+        data: readonly string[];
         current?: string | null | undefined;
         sorter?: Sorter | null | undefined;
         renamer?: Renamer | null | undefined;
-        theme?: Theme;
+        theme?: Theme | undefined;
         offset?: number | undefined;
         panel?: "right" | "bottom" | undefined;
     };
     events: {
-        navigate: CustomEvent<any>;
+        navigate: CustomEvent<string>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/components/layout/ThemeToggle.svelte

@@ -0,0 +1,17 @@
+<script>import { getTheme } from "../context";
+import Icon from "./icons/Icon.svelte";
+import ThemeIcon from "./icons/Theme.svelte";
+export let theme;
+const dark = getTheme();
+const toggle = () => {
+  if (void 0 !== theme) {
+    theme = $dark ? "light" : "dark";
+  } else {
+    $dark = !$dark;
+  }
+};
+</script>
+
+<Icon on:click={toggle}>
+    <ThemeIcon dark={undefined === theme ? $dark : "dark" === theme} />
+</Icon>

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

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import { type Theme } from "../context";
+declare const __propDef: {
+    props: {
+        theme: Theme | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ThemeToggleProps = typeof __propDef.props;
+export type ThemeToggleEvents = typeof __propDef.events;
+export type ThemeToggleSlots = typeof __propDef.slots;
+export default class ThemeToggle extends SvelteComponentTyped<ThemeToggleProps, ThemeToggleEvents, ThemeToggleSlots> {
+}
+export {};

package/components/layout/icons/Icon.svelte

@@ -1,7 +1,7 @@
 <script>export let title = void 0;
 </script>
 
-<div class="icon" on:click on:keypress {title}>
+<div class="icon" on:click on:keypress {title} role="none">
     <slot />
 </div>
 

package/components/layout/icons/Theme.svelte

@@ -1,10 +1,8 @@
 <script context="module">let indexer = 0;
 </script>
 
-<script>export let theme = "dark";
+<script>export let dark = true;
 const index = indexer++;
-$:
-  dark = theme === "dark";
 </script>
 
 <svg viewBox="-25 -25 50 50" style:transform={dark ? "rotate(40deg)" : "rotate(180deg)"}>

package/components/layout/icons/Theme.svelte.d.ts

@@ -1,8 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
-import type { Theme } from "../../context";
 declare const __propDef: {
     props: {
-        theme?: Theme;
+        dark?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/navigation/Nav.svelte

@@ -9,7 +9,7 @@ const apply = (paths, init, pre, next, post) => {
     let t = retval;
     for (let i = 1; i < parts.length; ++i) {
       const part = parts[i];
-      if (null == t[part]) {
+      if (!(part in t)) {
         t[part] = init();
       }
       if (i !== parts.length - 1) {

package/components/navigation/Nav.svelte.d.ts

@@ -8,7 +8,7 @@ declare const __propDef: {
         renamer: Renamer;
     };
     events: {
-        navigate: CustomEvent<any>;
+        navigate: CustomEvent<string>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/components/navigation/Node.svelte

@@ -31,6 +31,7 @@ const click = (link) => {
         class="header"
         on:click={() => click(value.url)}
         on:keypress={null}
+        role="none"
         {style}
         class:selected={selected === value.url}
         class:paged={value.url != null}
@@ -41,7 +42,7 @@ const click = (link) => {
         <span>{renamer(key)}</span>
     </div>
     {#if expand || states.expanded}
-        <div class="sub" transition:slide|local>
+        <div class="sub" transition:slide>
             {#each sort(value.sub, sorter) as [k, v] (k)}
                 <svelte:self
                     key={k}

package/components/navigation/Node.svelte.d.ts

@@ -12,7 +12,7 @@ declare const __propDef: {
         renamer: Renamer;
     };
     events: {
-        navigate: CustomEvent<any>;
+        navigate: CustomEvent<string>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/components/navigation/Tree.svelte.d.ts

@@ -10,7 +10,7 @@ declare const __propDef: {
         selected: string;
     };
     events: {
-        navigate: CustomEvent<any>;
+        navigate: CustomEvent<string>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/index.d.ts

@@ -2,6 +2,7 @@ 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/Layout.svelte";
+export { default as DocLayout } from "./components/layout/DocLayout.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";

package/index.js

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

package/package.json

@@ -1,14 +1,13 @@
 {
   "name": "@nil-/doc",
-  "version": "0.3.3",
+  "version": "1.0.0",
   "author": {
     "email": "njaldea@gmail.com",
     "name": "Neil Aldea"
   },
   "license": "ISC",
   "peerDependencies": {
-    "@sveltejs/kit": "^1.15.0",
-    "svelte": "^3.58.0"
+    "svelte": "^4.0.3"
   },
   "keywords": [
     "svelte",
@@ -19,11 +18,10 @@
   "exports": {
     "./package.json": "./package.json",
     ".": {
-      "default": "./index.js",
+      "types": "./index.d.ts",
       "svelte": "./index.js",
-      "types": "./index.d.ts"
-    },
-    "./sveltekit": "./sveltekit/index.js"
+      "default": "./index.js"
+    }
   },
   "dependencies": {
     "vanilla-picker": "^2.12.1"

package/sveltekit/index.d.ts

@@ -1,37 +0,0 @@
-import { type Readable, type Writable } from "svelte/store";
-import type { Theme } from "../components/context";
-type Settings = {
-    /**
-     * List of routes
-     */
-    data: string[];
-    /**
-     * 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>) => Promise<void>;
-    /**
-     * A store that is responsible in keeping the theme in localStorage
-     * 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>;
-    panel: Writable<"bottom" | "right">;
-};
-/**
- * Dedicated helper method to be used for sveltekit
- * @param detail - vite's `import.meta.glob(...)`
- * @param prefix - only use when layout is not in the root route
- * @returns Settings
- */
-export declare const sveltekit: (detail: Record<string, unknown>, prefix?: string | null) => Settings;
-export {};

package/sveltekit/index.js

@@ -1,51 +0,0 @@
-import { derived, writable } from "svelte/store";
-import { page } from "$app/stores";
-import { goto } from "$app/navigation";
-import { browser } from "$app/environment";
-const toRoute = (p) => p.substring(1, p.lastIndexOf("/"));
-const routeHasLayoutGroup = /\(.*\)/;
-const collapseLayout = (p) => p
-    .split("/")
-    .filter((p) => null == routeHasLayoutGroup.exec(p))
-    .join("/");
-const isNotRoot = (p) => p !== "/";
-const routeIsDynamic = /.*\[.*\].*/;
-const isRouteDynamic = (p) => null == routeIsDynamic.exec(p);
-/**
- * Dedicated helper method to be used for sveltekit
- * @param detail - vite's `import.meta.glob(...)`
- * @param prefix - only use when layout is not in the root route
- * @returns Settings
- */
-export const sveltekit = (detail, prefix = null) => {
-    const keyTheme = "@nil-/doc/theme";
-    const theme = browser && "light" === localStorage.getItem(keyTheme) ? "light" : "dark";
-    const keyOffset = "@nil-/doc/offset";
-    const offset = browser ? parseFloat(localStorage.getItem(keyOffset) ?? "250") : 250;
-    const keyPos = "@nil-/doc/panel";
-    const panelPos = browser ? localStorage.getItem(keyPos) ?? "bottom" : "bottom";
-    const result = {
-        data: Object.keys(detail)
-            .map(toRoute)
-            .map(collapseLayout)
-            .filter(isNotRoot)
-            .filter(isRouteDynamic),
-        current: derived(page, ($page) => {
-            if ($page.route.id) {
-                if (prefix) {
-                    return collapseLayout($page.route.id.substring(prefix.length));
-                }
-                return collapseLayout($page.route.id);
-            }
-            return null;
-        }),
-        navigate: prefix ? (e) => goto(`${prefix}${e.detail}`) : (e) => goto(e.detail),
-        theme: writable(theme),
-        offset: writable(offset),
-        panel: writable(panelPos)
-    };
-    browser && result.theme.subscribe((v) => localStorage.setItem(keyTheme, v));
-    browser && result.offset.subscribe((v) => localStorage.setItem(keyOffset, `${v}`));
-    browser && result.panel.subscribe((v) => localStorage.setItem(keyPos, v));
-    return result;
-};