@nil-/doc 2.0.0 → 2.0.2

package/{package/components → 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/{.svelte-kit/__package__/components → 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/{.svelte-kit/__package__/components → 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/{.svelte-kit/__package__/components → 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/{.svelte-kit/__package__/components → 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/{.svelte-kit/__package__/components → 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/{package/components → 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/{package/components → components}/block/controls/props/misc/GroupHeader.svelte

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

package/{package/components → 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/{.svelte-kit/__package__/components → 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/{.svelte-kit/__package__/components → 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

@@ -0,0 +1,96 @@
+<script lang="ts" module>const defaultSorter = (l, r) => l.localeCompare(r);
+const defaultRenamer = (s) => s;
+</script>
+
+<script lang="ts">import Base from "../Base.svelte";
+import Body from "./Body.svelte";
+import Header from "./Header.svelte";
+import {
+  initControlInfo,
+  initControlValue
+} from "../block/context";
+import { getTheme, initTheme } from "../context";
+import { get } from "svelte/store";
+import { onDestroy } from "svelte";
+let {
+  data,
+  current = null,
+  sorter = null,
+  renamer = null,
+  theme = $bindable(),
+  offset = $bindable(250),
+  panel = $bindable(),
+  title,
+  title_misc,
+  children,
+  onnavigate
+} = $props();
+let mode = $state("props");
+let panelOffset = $state(4);
+initControlValue();
+const activeControl = initControlInfo();
+const parentTheme = getTheme();
+const dark = initTheme();
+$effect(() => dark.set(theme === void 0 ? $parentTheme : "dark" === theme));
+const panelChange = (info) => {
+  if (info != null) {
+    const i = get(info);
+    if (4 === panelOffset) {
+      if (i.props.length > 0) {
+        panelOffset = 250;
+        mode = "props";
+      } else if (i.events.length > 0) {
+        panelOffset = 250;
+        mode = "events";
+      }
+    }
+    return;
+  }
+  panelOffset = 4;
+};
+onDestroy(activeControl.subscribe((v) => panelChange(v)));
+</script>
+
+<!--
+    @component
+    See [documentation](https://mono-doc.vercel.app/3-Components/1-Layout) for more details.
+-->
+
+<Base dark={$dark} fill>
+    <div class="fill layout">
+        <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>
+
+<style>
+    .fill {
+        width: 100%;
+        height: 100%;
+    }
+
+    .layout {
+        display: grid;
+        grid-template-columns: 1fr;
+        grid-template-rows: minmax(2.5rem, auto) 1fr;
+        color-scheme: var(--i-nil-doc-color-scheme);
+        color: var(--i-nil-doc-color);
+        background-color: var(--i-nil-doc-bg-color);
+        transition:
+            color var(--i-nil-doc-transition-time),
+            background-color var(--i-nil-doc-transition-time);
+    }
+
+</style>

package/{.svelte-kit/__package__/components → 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/{package/components/layout/Container.svelte.d.ts → components/layout/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/{package/components → 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/{.svelte-kit/__package__/components → 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,58 +1,33 @@
 {
-    "name": "@nil-/doc",
-    "version": "2.0.0",
-    "author": {
-        "email": "njaldea@gmail.com",
-        "name": "Neil Aldea"
+  "name": "@nil-/doc",
+  "version": "2.0.2",
+  "author": {
+    "email": "njaldea@gmail.com",
+    "name": "Neil Aldea"
+  },
+  "license": "ISC",
+  "peerDependencies": {
+    "svelte": "^5.7.1"
+  },
+  "keywords": [
+    "svelte",
+    "documentation",
+    "component"
+  ],
+  "type": "module",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./index.d.ts",
+      "svelte": "./index.js",
+      "default": "./index.js"
     },
-    "license": "ISC",
-    "scripts": {
-        "build": "vite build",
-        "check": "svelte-check --tsconfig ./tsconfig.json",
-        "dev": "vite dev",
-        "gen:package": "svelte-package -o package",
-        "gen:meta": "npx @nil-/postpackage ./package",
-        "package": "pnpm run gen:package && pnpm run gen:meta",
-        "sync": "svelte-kit sync",
-        "lint": "eslint . --ignore-path ../../.eslintignore"
-    },
-    "devDependencies": {
-        "@nil-/doc-kit": "workspace:^",
-        "@nil-/postpackage": "workspace:^",
-        "@sveltejs/adapter-vercel": "^5.7.1",
-        "@sveltejs/kit": "^2.20.8",
-        "@sveltejs/package": "^2.3.11",
-        "@sveltejs/vite-plugin-svelte": "5.0.1",
-        "mdsvex": "^0.12.5",
-        "remark-admonitions": "^1.2.1",
-        "svelte-check": "^3.8.6",
-        "tslib": "^2.8.1",
-        "typescript": "^5.8.3",
-        "vite": "^6.3.4",
-        "vitest": "^0.33.0"
-    },
-    "peerDependencies": {
-        "svelte": "^5.7.1"
-    },
-    "publishConfig": {
-        "directory": "package",
-        "linkDirectory": true
-    },
-    "keywords": [
-        "svelte",
-        "documentation",
-        "component"
-    ],
-    "type": "module",
-    "exports": {
-        "./package.json": "./package.json",
-        ".": {
-            "types": "./index.d.ts",
-            "svelte": "./index.js",
-            "default": "./index.js"
-        }
-    },
-    "dependencies": {
-        "vanilla-picker": "^2.12.3"
-    }
-}
+    "./components/*": "./components/*",
+    "./layout/*": "./components/layout/*",
+    "./navigation/*": "./components/navigation/*",
+    "./block/*": "./components/block/*"
+  },
+  "dependencies": {
+    "vanilla-picker": "^2.12.3"
+  }
+}

package/.eslintrc.cjs

@@ -1 +0,0 @@
-module.exports = require("../../.eslintrc.cjs");

package/.svelte-kit/__package__/components/Base.svelte

@@ -1,70 +0,0 @@
-<script lang="ts">let {
-  dark = false,
-  fill = false,
-  children
-} = $props();
-</script>
-
-<div class:dark class:fill>
-    {@render children?.()}
-</div>
-
-<!-- prettier-ignore -->
-<style>
-    div {
-        font-family: var(--nil-doc-font-family, ""), Consolas, Courier, 'Courier New', monospace;
-    }
-
-    .fill {
-        width: 100%;
-        height: 100%;
-    }
-
-    div {
-        --i-nil-doc-color: var(--nil-doc-color, hsl(0, 0%, 0%));
-        --i-nil-doc-color-scheme: var(--nil-doc-color-scheme, light);
-
-        --i-nil-doc-bg-color: var(--nil-doc-bg-color, hsl(0, 0%, 98%));
-        --i-nil-doc-content-outline-color: var(--nil-doc-content-outline-color, hsla(0, 0%, 0%, 0.3));
-
-        --i-nil-doc-block-bg-color: var(--nil-doc-block-bg-color, hsla(0, 0%, 98%, 0.3));
-        --i-nil-doc-block-outline-color: var(--nil-doc-block-outline-color, hsla(0, 0%, 0%, 0.3));
-
-        --i-nil-doc-container-p: var(--nil-doc-container-p, hsl(0, 2%, 70%));
-        --i-nil-doc-container-s: var(--nil-doc-container-s, hsl(0, 0%, 0%));
-
-        --i-nil-doc-controls-p: var(--nil-doc-controls-p, hsl(0, 0%, 100%));
-        --i-nil-doc-controls-s: var(--nil-doc-controls-s, hsl(210, 29%, 97%));
-        --i-nil-doc-controls-hover: var(--nil-doc-controls-hover, hsl(210, 100%, 90%));
-    }
-
-    div.dark {
-        --i-nil-doc-color: var(--nil-doc-color, hsl(0, 0%, 80%));
-        --i-nil-doc-color-scheme: var(--nil-doc-color-scheme, dark);
-
-        --i-nil-doc-bg-color: var(--nil-doc-bg-color, hsl(210, 6%, 7%));
-        --i-nil-doc-content-outline-color: var(--nil-doc-content-outline-color, hsla(0, 0%, 100%, 0.3));
-
-        --i-nil-doc-block-bg-color: var(--nil-doc-block-bg-color, hsla(200, 4%, 7%, 0.3));
-        --i-nil-doc-block-outline-color: var(--nil-doc-block-outline-color, hsla(0, 0%, 1000%, 0.3));
-
-        --i-nil-doc-container-p: var(--nil-doc-container-p, hsl(0, 2%, 40%));
-        --i-nil-doc-container-s: var(--nil-doc-container-s, hsl(0, 0%, 100%));
-
-        --i-nil-doc-controls-p: var(--nil-doc-controls-p, hsl(213, 26%, 7%));
-        --i-nil-doc-controls-s: var(--nil-doc-controls-s, hsl(213, 26%, 11%));
-        --i-nil-doc-controls-hover: var(--nil-doc-controls-hover, hsl(203, 100%, 15%));
-    }
-
-    div {
-        --i-nil-doc-nav-hovered: var(--nil-doc-nav-hovered, hsla(203, 98%, 50%, 0.25));
-        --i-nil-doc-nav-page-hovered: var(--nil-doc-nav-page-hovered, hsla(203, 98%, 50%, 0.6));
-        --i-nil-doc-nav-selected: var(--nil-doc-nav-selected, hsla(203, 98%, 50%, 0.85));
-
-        --i-nil-doc-instance-hovered: var(--nil-doc-instance-hovered, hsla(203, 98%, 50%, 0.25));
-        --i-nil-doc-instance-control-hovered: var(--nil-doc-instance-control-hovered, hsla(203, 98%, 50%, 0.6));
-        --i-nil-doc-instance-selected-color: var(--nil-doc-instance-selected-color, hsla(203, 98%, 50%, 0.85));
-
-        --i-nil-doc-transition-time: var(--nil-doc-transition-time, 350ms);
-    }
-</style>