@nil-/doc 2.0.1 → 2.0.2

package/components/Base.svelte

@@ -11,16 +11,13 @@
 
 <!-- prettier-ignore -->
 <style>
-    div {
-        font-family: var(--nil-doc-font-family, ""), Consolas, Courier, 'Courier New', monospace;
-    }
-
     .fill {
         width: 100%;
         height: 100%;
     }
 
     div {
+        font-family: var(--nil-doc-font-family, ""), Consolas, Courier, 'Courier New', monospace;
         --i-nil-doc-color: var(--nil-doc-color, hsl(0, 0%, 0%));
         --i-nil-doc-color-scheme: var(--nil-doc-color-scheme, light);
 

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

@@ -1,16 +1,23 @@
 import { type Snippet } from "svelte";
-declare class __sveltets_Render<Args> {
-    props(): {
-        defaults?: Args | undefined;
+declare function $$render<Args>(): {
+    props: {
+        defaults?: Args;
         noreset?: boolean;
         children?: Snippet<[{
             values: Args;
             events: Record<string, (ev?: any) => void>;
             key: boolean;
-        }]> | undefined;
+        }]>;
     };
-    events(): {};
-    slots(): {};
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Args> {
+    props(): ReturnType<typeof $$render<Args>>['props'];
+    events(): ReturnType<typeof $$render<Args>>['events'];
+    slots(): ReturnType<typeof $$render<Args>>['slots'];
     bindings(): "";
     exports(): {};
 }

package/components/block/Params.svelte

@@ -15,14 +15,18 @@ params.update((p) => {
   });
   return p;
 });
-$effect(() => params.update((p) => {
-  p[id].tag = tag ?? `${id}`;
-  return p;
-}));
-$effect(() => params.update((p) => {
-  p[id].values = resolve(props, {});
-  return p;
-}));
+$effect(
+  () => params.update((p) => {
+    p[id].tag = tag ?? `${id}`;
+    return p;
+  })
+);
+$effect(
+  () => params.update((p) => {
+    p[id].values = resolve(props, {});
+    return p;
+  })
+);
 </script>
 
 <!--

package/components/block/Template.svelte

@@ -35,10 +35,7 @@ const resolveArgs = resolve;
 -->
 
 {#each $params as param (param.id)}
-    <Instance
-        defaults={resolveArgs($defaultsStore, param.values)}
-        {noreset}
-    >
+    <Instance defaults={resolveArgs($defaultsStore, param.values)} {noreset}>
         {#snippet children({ values, events, key })}
             {@render cc?.({
                 id: param.id,

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

@@ -1,7 +1,7 @@
 import { type Snippet } from "svelte";
-declare class __sveltets_Render<Args> {
-    props(): {
-        defaults?: Args | undefined;
+declare function $$render<Args>(): {
+    props: {
+        defaults?: Args;
         noreset?: boolean;
         columns?: boolean;
         children?: Snippet<[{
@@ -10,10 +10,17 @@ declare class __sveltets_Render<Args> {
             values: Args;
             events: Record<string, (ev?: any) => void>;
             key: boolean;
-        }]> | undefined;
+        }]>;
     };
-    events(): {};
-    slots(): {};
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Args> {
+    props(): ReturnType<typeof $$render<Args>>['props'];
+    events(): ReturnType<typeof $$render<Args>>['events'];
+    slots(): ReturnType<typeof $$render<Args>>['slots'];
     bindings(): "";
     exports(): {};
 }

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

@@ -8,10 +8,5 @@ let {
 </script>
 
 {#each infos as info}
-    <Component
-        {info}
-        depth={1}
-        {visible} 
-        bind:value={$values.props[getName(info)]}
-    />
+    <Component {info} depth={1} {visible} bind:value={$values.props[getName(info)]} />
 {/each}

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

@@ -16,15 +16,17 @@ const set_value = (v) => {
   value = v;
 };
 $effect(() => set_value(enabled && !disabled ? ivalue : void 0));
-let i = $derived(info instanceof Array ? {
-  min: info[2],
-  max: info[3],
-  step: info[4]
-} : {
-  min: info.min,
-  max: info.max,
-  step: info.step
-});
+let i = $derived(
+  info instanceof Array ? {
+    min: info[2],
+    max: info[3],
+    step: info[4]
+  } : {
+    min: info.min,
+    max: info.max,
+    step: info.step
+  }
+);
 </script>
 
 {#if visible}

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

@@ -32,4 +32,3 @@ const flip = () => {
         color: hsl(0, 0%, 50%);
     }
 </style>
-    

package/components/block/icons/Button.svelte

@@ -7,7 +7,7 @@
 } = $props();
 </script>
 
-<div onclick={onclick} onkeypress={onkeypress} role="none" {title} class:scale>
+<div {onclick} {onkeypress} role="none" {title} class:scale>
     {@render children?.()}
 </div>
 

package/components/layout/Body.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">import Split from "./Split.svelte";
+import Content from "./Content.svelte";
+import Controls from "../block/controls/Controls.svelte";
+import Scrollable from "./Scrollable.svelte";
+import Nav from "../navigation/Nav.svelte";
+let {
+  data,
+  current,
+  sorter,
+  renamer,
+  onnavigate,
+  offset = $bindable(250),
+  panelOffset = $bindable(4),
+  panel = $bindable(),
+  mode = $bindable("props"),
+  children
+} = $props();
+</script>
+
+<Split bind:offset vertical b persistent>
+    {#snippet side_a()}
+        <Scrollable>
+            <Nav
+                info={data}
+                selected={current ?? ""}
+                {sorter}
+                {renamer}
+                {onnavigate}
+            />
+        </Scrollable>
+    {/snippet}
+    {#snippet side_b()}
+        {#if panel == null}
+            <Scrollable>
+                <Content>
+                    {#key current}
+                        {@render children?.()}
+                    {/key}
+                </Content>
+            </Scrollable>
+        {:else}
+            <Split vertical={"right" === panel} persistent bind:offset={panelOffset}>
+                {#snippet side_a()}
+                    <Scrollable>
+                        <Content>
+                            {#key current}
+                                {@render children?.()}
+                            {/key}
+                        </Content>
+                    </Scrollable>
+                {/snippet}
+                {#snippet side_b()}
+                    <Scrollable>
+                        <Controls bind:position={panel} bind:mode />
+                    </Scrollable>
+                {/snippet}
+            </Split>
+        {/if}
+    {/snippet}
+</Split>

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

@@ -0,0 +1,19 @@
+import type { Sorter, Renamer } from "../navigation/types";
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    data: readonly string[];
+    current: string | null;
+    sorter: Sorter;
+    renamer: Renamer;
+    onnavigate?: (e: {
+        detail: string;
+    }) => void;
+    offset?: number;
+    panelOffset?: number;
+    panel?: "bottom" | "right";
+    mode?: "props" | "events";
+    children?: Snippet;
+};
+declare const Body: import("svelte").Component<$$ComponentProps, {}, "offset" | "mode" | "panelOffset" | "panel">;
+type Body = ReturnType<typeof Body>;
+export default Body;

package/components/layout/Content.svelte

@@ -16,10 +16,6 @@
         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);
     }

package/components/layout/DocLayout.svelte

@@ -24,5 +24,4 @@ let { data, current, theme, offset, panel, navigate } = $derived(settings);
     {title}
     {title_misc}
     {children}
->
-</Layout>
+></Layout>

package/components/layout/Header.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">import ThemeToggle from "./ThemeToggle.svelte";
+let {
+  title,
+  title_misc,
+  theme = $bindable()
+} = $props();
+</script>
+
+<div class="top">
+    <div class="title">
+        {@render title()}
+    </div>
+    {#if title_misc}
+        {@render title_misc()}
+    {:else}
+        <ThemeToggle bind:theme />
+    {/if}
+</div>
+
+<style>
+    .top {
+        overflow: hidden;
+        font-size: 1rem;
+        display: grid;
+        grid-auto-flow: column;
+        grid-auto-columns: 2.5rem;
+        grid-template-columns: 1fr;
+        align-items: center;
+        padding-left: 0.5rem;
+        padding-right: 0.5rem;
+        border-bottom-width: 1px;
+        border-bottom-style: solid;
+        user-select: none;
+        transition: border-bottom-color var(--i-nil-doc-transition-time);
+        border-bottom-color: var(--i-nil-doc-container-p);
+    }
+
+    .title {
+        display: grid;
+        grid-auto-flow: column;
+        align-items: center;
+        justify-content: left;
+        gap: 0.25rem;
+    }
+</style>

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

@@ -0,0 +1,9 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    title: Snippet;
+    title_misc?: Snippet;
+    theme?: "light" | "dark";
+};
+declare const Header: import("svelte").Component<$$ComponentProps, {}, "theme">;
+type Header = ReturnType<typeof Header>;
+export default Header;

package/components/layout/Layout.svelte

@@ -3,13 +3,8 @@ const defaultRenamer = (s) => s;
 </script>
 
 <script lang="ts">import Base from "../Base.svelte";
-import Container from "./Container.svelte";
-import Content from "./Content.svelte";
-import Controls from "../block/controls/Controls.svelte";
-import Scrollable from "./Scrollable.svelte";
-import VerticalPanel from "./VerticalPanel.svelte";
-import Nav from "../navigation/Nav.svelte";
-import ThemeToggle from "./ThemeToggle.svelte";
+import Body from "./Body.svelte";
+import Header from "./Header.svelte";
 import {
   initControlInfo,
   initControlValue
@@ -24,7 +19,7 @@ let {
   renamer = null,
   theme = $bindable(),
   offset = $bindable(250),
-  panel = $bindable("bottom"),
+  panel = $bindable(),
   title,
   title_misc,
   children,
@@ -63,49 +58,20 @@ onDestroy(activeControl.subscribe((v) => panelChange(v)));
 
 <Base dark={$dark} fill>
     <div class="fill layout">
-        <div class="top">
-            <div class="title">
-                {@render title()}
-            </div>
-            {#if title_misc}
-                {@render title_misc()}
-            {:else}
-                <ThemeToggle bind:theme />
-            {/if}
-        </div>
-        <Container bind:offset vertical b>
-            {#snippet side_a()}
-                <Scrollable>
-                    <!-- <VerticalPanel> -->
-                        <Nav
-                            info={data}
-                            selected={current ?? ""}
-                            sorter={sorter ?? defaultSorter}
-                            renamer={renamer ?? defaultRenamer}
-                            {onnavigate}
-                        />
-                    <!-- </VerticalPanel> -->
-                </Scrollable>
-            {/snippet}
-            {#snippet side_b()}
-                <Container vertical={"right" === panel} persistent bind:offset={panelOffset}>
-                    {#snippet side_a()}
-                        <Scrollable>
-                            <Content>
-                                {#key current}
-                                    {@render children?.()}
-                                {/key}
-                            </Content>
-                        </Scrollable>
-                    {/snippet}
-                    {#snippet side_b()}
-                        <Scrollable>
-                            <Controls bind:position={panel} bind:mode />
-                        </Scrollable>
-                    {/snippet}
-                </Container>
-            {/snippet}
-        </Container>
+        <Header {title} {title_misc} bind:theme />
+        <Body
+            data={data}
+            current={current}
+            sorter={sorter ?? defaultSorter}
+            renamer={renamer ?? defaultRenamer}
+            {onnavigate}
+            bind:offset
+            bind:panelOffset
+            bind:panel
+            bind:mode
+        >
+            {@render children?.()}
+        </Body>
     </div>
 </Base>
 
@@ -119,32 +85,6 @@ onDestroy(activeControl.subscribe((v) => panelChange(v)));
         display: grid;
         grid-template-columns: 1fr;
         grid-template-rows: minmax(2.5rem, auto) 1fr;
-    }
-
-    .top {
-        overflow: hidden;
-        font-size: 1rem;
-        display: grid;
-        grid-auto-flow: column;
-        grid-auto-columns: 2.5rem;
-        grid-template-columns: 1fr;
-        align-items: center;
-        padding-left: 0.5rem;
-        padding-right: 0.5rem;
-        border-bottom-width: 1px;
-        border-bottom-style: solid;
-        user-select: none;
-    }
-
-    .title {
-        display: grid;
-        grid-auto-flow: column;
-        align-items: center;
-        justify-content: left;
-        gap: 0.25rem;
-    }
-
-    .layout {
         color-scheme: var(--i-nil-doc-color-scheme);
         color: var(--i-nil-doc-color);
         background-color: var(--i-nil-doc-bg-color);
@@ -153,8 +93,4 @@ onDestroy(activeControl.subscribe((v) => panelChange(v)));
             background-color var(--i-nil-doc-transition-time);
     }
 
-    .layout > .top {
-        transition: border-bottom-color var(--i-nil-doc-transition-time);
-        border-bottom-color: var(--i-nil-doc-container-p);
-    }
 </style>

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

@@ -17,6 +17,6 @@ type $$ComponentProps = {
     }) => void;
 };
 /** See [documentation](https://mono-doc.vercel.app/3-Components/1-Layout) for more details. */
-declare const Layout: import("svelte").Component<$$ComponentProps, {}, "offset" | "theme" | "panel">;
+declare const Layout: import("svelte").Component<$$ComponentProps, {}, "offset" | "panel" | "theme">;
 type Layout = ReturnType<typeof Layout>;
 export default Layout;

package/components/layout/{Container.svelte.d.ts → Split.svelte.d.ts}

@@ -7,6 +7,6 @@ type $$ComponentProps = {
     side_a: Snippet;
     side_b: Snippet;
 };
-declare const Container: import("svelte").Component<$$ComponentProps, {}, "offset">;
-type Container = ReturnType<typeof Container>;
-export default Container;
+declare const Split: import("svelte").Component<$$ComponentProps, {}, "offset">;
+type Split = ReturnType<typeof Split>;
+export default Split;

package/components/navigation/Nav.svelte

@@ -47,12 +47,14 @@ let {
   onnavigate
 } = $props();
 let filter = $state("");
-let states = $state(apply(
-  info,
-  () => ({ expanded: false, sub: {} }),
-  (t, path) => ({ expanded: t.expanded || selected === path, sub: t.sub }),
-  (t) => t.sub
-));
+let states = $state(
+  apply(
+    info,
+    () => ({ expanded: false, sub: {} }),
+    (t, path) => ({ expanded: t.expanded || selected === path, sub: t.sub }),
+    (t) => t.sub
+  )
+);
 const update = (selected2) => {
   if (!info.includes(selected2)) {
     return;

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

@@ -5,7 +5,7 @@ type $$ComponentProps = {
     sorter: Sorter;
     renamer: Renamer;
     onnavigate?: (e: {
-        detail: string;
+        detail?: string;
     }) => void;
 };
 declare const Nav: import("svelte").Component<$$ComponentProps, {}, "">;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nil-/doc",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "author": {
     "email": "njaldea@gmail.com",
     "name": "Neil Aldea"
@@ -21,7 +21,11 @@
       "types": "./index.d.ts",
       "svelte": "./index.js",
       "default": "./index.js"
-    }
+    },
+    "./components/*": "./components/*",
+    "./layout/*": "./components/layout/*",
+    "./navigation/*": "./components/navigation/*",
+    "./block/*": "./components/block/*"
   },
   "dependencies": {
     "vanilla-picker": "^2.12.3"

package/components/layout/VerticalPanel.svelte

@@ -1,15 +0,0 @@
-<script lang="ts">let { children } = $props();
-</script>
-
-<div>
-    {@render children?.()}
-</div>
-
-<style>
-    div {
-        width: 100%;
-        box-sizing: border-box;
-        min-width: min-content;
-        display: inline-block;
-    }
-</style>

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

@@ -1,7 +0,0 @@
-import type { Snippet } from "svelte";
-type $$ComponentProps = {
-    children: Snippet;
-};
-declare const VerticalPanel: import("svelte").Component<$$ComponentProps, {}, "">;
-type VerticalPanel = ReturnType<typeof VerticalPanel>;
-export default VerticalPanel;