@nil-/doc 1.0.0 → 2.0.1

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

@@ -1,22 +1,12 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        vertical?: boolean | undefined;
-        offset?: number | undefined;
-        b?: boolean | undefined;
-        persistent?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        A: {};
-        B: {};
-    };
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    vertical?: boolean;
+    offset?: number;
+    b?: boolean;
+    persistent?: boolean;
+    side_a: Snippet;
+    side_b: Snippet;
 };
-export type ContainerProps = typeof __propDef.props;
-export type ContainerEvents = typeof __propDef.events;
-export type ContainerSlots = typeof __propDef.slots;
-export default class Container extends SvelteComponentTyped<ContainerProps, ContainerEvents, ContainerSlots> {
-}
-export {};
+declare const Container: import("svelte").Component<$$ComponentProps, {}, "offset">;
+type Container = ReturnType<typeof Container>;
+export default Container;

package/components/layout/Content.svelte

@@ -1,5 +1,8 @@
+<script lang="ts">let { children } = $props();
+</script>
+
 <div>
-    <slot />
+    {@render children?.()}
 </div>
 
 <style>

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

@@ -1,27 +1,7 @@
-/** @typedef {typeof __propDef.props}  ContentProps */
-/** @typedef {typeof __propDef.events}  ContentEvents */
-/** @typedef {typeof __propDef.slots}  ContentSlots */
-export default class Content extends SvelteComponentTyped<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type ContentProps = typeof __propDef.props;
-export type ContentEvents = typeof __propDef.events;
-export type ContentSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    children: Snippet;
 };
-export {};
+declare const Content: import("svelte").Component<$$ComponentProps, {}, "">;
+type Content = ReturnType<typeof Content>;
+export default Content;

package/components/layout/DocLayout.svelte

@@ -1,19 +1,15 @@
-<script context="module"></script>
+<script lang="ts" 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 lang="ts">import Layout from "./Layout.svelte";
+let {
+  settings,
+  sorter,
+  renamer,
+  title,
+  title_misc,
+  children
+} = $props();
+let { data, current, theme, offset, panel, navigate } = $derived(settings);
 </script>
 
 <Layout
@@ -24,11 +20,9 @@ $: {
     bind:theme={$theme}
     bind:offset={$offset}
     bind:panel={$panel}
-    on:navigate={navigate}
+    onnavigate={navigate}
+    {title}
+    {title_misc}
+    {children}
 >
-    <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

@@ -1,4 +1,3 @@
-import { SvelteComponentTyped } from "svelte";
 import type { Readable, Writable } from "svelte/store";
 type Settings = {
     readonly data: readonly string[];
@@ -11,28 +10,15 @@ type Settings = {
     }) => 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: {};
-    };
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    settings: Settings;
+    sorter?: Sorter;
+    renamer?: Renamer;
+    title: Snippet;
+    title_misc?: Snippet;
+    children?: Snippet;
 };
-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 {};
+declare const DocLayout: import("svelte").Component<$$ComponentProps, {}, "">;
+type DocLayout = ReturnType<typeof DocLayout>;
+export default DocLayout;

package/components/layout/Layout.svelte

@@ -1,8 +1,8 @@
-<script context="module">const defaultSorter = (l, r) => l.localeCompare(r);
+<script lang="ts" module>const defaultSorter = (l, r) => l.localeCompare(r);
 const defaultRenamer = (s) => s;
 </script>
 
-<script>import Base from "../Base.svelte";
+<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";
@@ -16,21 +16,27 @@ import {
 } from "../block/context";
 import { getTheme, initTheme } from "../context";
 import { get } from "svelte/store";
-export let data;
-export let current = null;
-export let sorter = null;
-export let renamer = null;
-export let theme = void 0;
-export let offset = 250;
-export let panel = "bottom";
-let mode = "props";
-let panelOffset = 4;
+import { onDestroy } from "svelte";
+let {
+  data,
+  current = null,
+  sorter = null,
+  renamer = null,
+  theme = $bindable(),
+  offset = $bindable(250),
+  panel = $bindable("bottom"),
+  title,
+  title_misc,
+  children,
+  onnavigate
+} = $props();
+let mode = $state("props");
+let panelOffset = $state(4);
 initControlValue();
 const activeControl = initControlInfo();
 const parentTheme = getTheme();
 const dark = initTheme();
-$:
-  $dark = theme === void 0 ? $parentTheme : "dark" === theme;
+$effect(() => dark.set(theme === void 0 ? $parentTheme : "dark" === theme));
 const panelChange = (info) => {
   if (info != null) {
     const i = get(info);
@@ -47,8 +53,7 @@ const panelChange = (info) => {
   }
   panelOffset = 4;
 };
-$:
-  panelChange($activeControl);
+onDestroy(activeControl.subscribe((v) => panelChange(v)));
 </script>
 
 <!--
@@ -60,42 +65,46 @@ $:
     <div class="fill layout">
         <div class="top">
             <div class="title">
-                <slot name="title" />
+                {@render title()}
             </div>
-            <slot name="title-misc">
+            {#if title_misc}
+                {@render title_misc()}
+            {:else}
                 <ThemeToggle bind:theme />
-            </slot>
+            {/if}
         </div>
         <Container bind:offset vertical b>
-            <svelte:fragment slot="A">
+            {#snippet side_a()}
                 <Scrollable>
-                    <VerticalPanel>
+                    <!-- <VerticalPanel> -->
                         <Nav
                             info={data}
                             selected={current ?? ""}
                             sorter={sorter ?? defaultSorter}
                             renamer={renamer ?? defaultRenamer}
-                            on:navigate
+                            {onnavigate}
                         />
-                    </VerticalPanel>
+                    <!-- </VerticalPanel> -->
                 </Scrollable>
-            </svelte:fragment>
-            <svelte:fragment slot="B">
+            {/snippet}
+            {#snippet side_b()}
                 <Container vertical={"right" === panel} persistent bind:offset={panelOffset}>
-                    <svelte:fragment slot="A">
+                    {#snippet side_a()}
                         <Scrollable>
                             <Content>
                                 {#key current}
-                                    <slot />
+                                    {@render children?.()}
                                 {/key}
                             </Content>
                         </Scrollable>
-                    </svelte:fragment>
-                    <svelte:fragment slot="B">
-                        <Controls bind:position={panel} bind:mode />
-                    </svelte:fragment>
+                    {/snippet}
+                    {#snippet side_b()}
+                        <Scrollable>
+                            <Controls bind:position={panel} bind:mode />
+                        </Scrollable>
+                    {/snippet}
                 </Container>
-            </svelte:fragment>
+            {/snippet}
         </Container>
     </div>
 </Base>
@@ -139,7 +148,8 @@ $:
         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),
+        transition:
+            color var(--i-nil-doc-transition-time),
             background-color var(--i-nil-doc-transition-time);
     }
 

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

@@ -1,31 +1,22 @@
-import { SvelteComponentTyped } from "svelte";
 import type { Sorter, Renamer } from "../navigation/types";
 import { type Theme } from "../context";
-declare const __propDef: {
-    props: {
-        data: readonly string[];
-        current?: string | null | undefined;
-        sorter?: Sorter | null | undefined;
-        renamer?: Renamer | null | undefined;
-        theme?: Theme | undefined;
-        offset?: number | undefined;
-        panel?: "right" | "bottom" | undefined;
-    };
-    events: {
-        navigate: CustomEvent<string>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        title: {};
-        'title-misc': {};
-        default: {};
-    };
+import { type Snippet } from "svelte";
+type $$ComponentProps = {
+    data: readonly string[];
+    current?: string | null;
+    sorter?: Sorter | null;
+    renamer?: Renamer | null;
+    theme?: Theme;
+    offset?: number;
+    panel?: "bottom" | "right";
+    title: Snippet;
+    title_misc?: Snippet;
+    children?: Snippet;
+    onnavigate?: (e: {
+        detail: string;
+    }) => void;
 };
-export type LayoutProps = typeof __propDef.props;
-export type LayoutEvents = typeof __propDef.events;
-export type LayoutSlots = typeof __propDef.slots;
 /** See [documentation](https://mono-doc.vercel.app/3-Components/1-Layout) for more details. */
-export default class Layout extends SvelteComponentTyped<LayoutProps, LayoutEvents, LayoutSlots> {
-}
-export {};
+declare const Layout: import("svelte").Component<$$ComponentProps, {}, "offset" | "theme" | "panel">;
+type Layout = ReturnType<typeof Layout>;
+export default Layout;

package/components/layout/Scrollable.svelte

@@ -1,5 +1,8 @@
+<script lang="ts">let { children } = $props();
+</script>
+
 <div>
-    <slot />
+    {@render children?.()}
 </div>
 
 <style>

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

@@ -1,27 +1,7 @@
-/** @typedef {typeof __propDef.props}  ScrollableProps */
-/** @typedef {typeof __propDef.events}  ScrollableEvents */
-/** @typedef {typeof __propDef.slots}  ScrollableSlots */
-export default class Scrollable extends SvelteComponentTyped<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type ScrollableProps = typeof __propDef.props;
-export type ScrollableEvents = typeof __propDef.events;
-export type ScrollableSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    children: Snippet;
 };
-export {};
+declare const Scrollable: import("svelte").Component<$$ComponentProps, {}, "">;
+type Scrollable = ReturnType<typeof Scrollable>;
+export default Scrollable;

package/components/layout/ThemeToggle.svelte

@@ -1,7 +1,9 @@
-<script>import { getTheme } from "../context";
+<script lang="ts">import { getTheme } from "../context";
 import Icon from "./icons/Icon.svelte";
 import ThemeIcon from "./icons/Theme.svelte";
-export let theme;
+let {
+  theme = $bindable()
+} = $props();
 const dark = getTheme();
 const toggle = () => {
   if (void 0 !== theme) {
@@ -12,6 +14,6 @@ const toggle = () => {
 };
 </script>
 
-<Icon on:click={toggle}>
+<Icon onclick={toggle}>
     <ThemeIcon dark={undefined === theme ? $dark : "dark" === theme} />
 </Icon>

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

@@ -1,17 +1,7 @@
-import { SvelteComponentTyped } from "svelte";
 import { type Theme } from "../context";
-declare const __propDef: {
-    props: {
-        theme: Theme | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
+type $$ComponentProps = {
+    theme?: Theme;
 };
-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 {};
+declare const ThemeToggle: import("svelte").Component<$$ComponentProps, {}, "theme">;
+type ThemeToggle = ReturnType<typeof ThemeToggle>;
+export default ThemeToggle;

package/components/layout/VerticalPanel.svelte

@@ -1,5 +1,8 @@
+<script lang="ts">let { children } = $props();
+</script>
+
 <div>
-    <slot />
+    {@render children?.()}
 </div>
 
 <style>

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

@@ -1,27 +1,7 @@
-/** @typedef {typeof __propDef.props}  VerticalPanelProps */
-/** @typedef {typeof __propDef.events}  VerticalPanelEvents */
-/** @typedef {typeof __propDef.slots}  VerticalPanelSlots */
-export default class VerticalPanel extends SvelteComponentTyped<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type VerticalPanelProps = typeof __propDef.props;
-export type VerticalPanelEvents = typeof __propDef.events;
-export type VerticalPanelSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    children: Snippet;
 };
-export {};
+declare const VerticalPanel: import("svelte").Component<$$ComponentProps, {}, "">;
+type VerticalPanel = ReturnType<typeof VerticalPanel>;
+export default VerticalPanel;

package/components/layout/icons/Icon.svelte

@@ -1,8 +1,13 @@
-<script>export let title = void 0;
+<script lang="ts">let {
+  title,
+  onclick,
+  onkeypress,
+  children
+} = $props();
 </script>
 
-<div class="icon" on:click on:keypress {title} role="none">
-    <slot />
+<div class="icon" {onclick} {onkeypress} {title} role="none">
+    {@render children?.()}
 </div>
 
 <style>

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

@@ -1,21 +1,10 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        title?: undefined | string;
-    };
-    events: {
-        click: MouseEvent;
-        keypress: KeyboardEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    title?: string;
+    onclick?: (e: MouseEvent) => void;
+    onkeypress?: (e: KeyboardEvent) => void;
+    children?: Snippet;
 };
-export type IconProps = typeof __propDef.props;
-export type IconEvents = typeof __propDef.events;
-export type IconSlots = typeof __propDef.slots;
-export default class Icon extends SvelteComponentTyped<IconProps, IconEvents, IconSlots> {
-}
-export {};
+declare const Icon: import("svelte").Component<$$ComponentProps, {}, "">;
+type Icon = ReturnType<typeof Icon>;
+export default Icon;

package/components/layout/icons/Nil.svelte

@@ -1,30 +1,33 @@
-<script context="module">const action = (p, length) => {
-  const update = (length2) => p.style.strokeDasharray = `${length2} 100`;
+<script lang="ts" module>const action = (p, length) => {
+  const update = (length2) => {
+    p.style.strokeDasharray = `${length2} 100`;
+  };
   update(length);
   return { update };
 };
 </script>
 
-<script>import { tweened } from "svelte/motion";
+<script lang="ts">import { Tween } from "svelte/motion";
 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(100);
+const length = new Tween(100);
 const trigger = () => {
-  if (0 === $length) {
-    $length = 100;
-  } else if (100 === $length) {
-    $length = 0;
+  if (0 === length.current) {
+    length.set(100);
+  } else if (100 === length.current) {
+    length.set(0);
   }
 };
-$:
-  0 === $length && trigger();
+$effect(() => {
+  0 === length.current && trigger();
+});
 </script>
 
-<svg viewBox="-35 -35 70 70" on:pointerenter={trigger}>
+<svg viewBox="-35 -35 70 70" onpointerenter={trigger}>
     <g transform="rotate(45 0 0)">
-        <path {d} use:action={$length} pathLength={100} />
+        <path {d} use:action={length.current} pathLength={100} />
     </g>
     <g transform="rotate(225 0 0)">
-        <path {d} use:action={$length} pathLength={100} />
+        <path {d} use:action={length.current} pathLength={100} />
     </g>
 </svg>
 

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

@@ -1,14 +1,3 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type NilProps = typeof __propDef.props;
-export type NilEvents = typeof __propDef.events;
-export type NilSlots = typeof __propDef.slots;
-export default class Nil extends SvelteComponentTyped<NilProps, NilEvents, NilSlots> {
-}
-export {};
+declare const Nil: import("svelte").Component<Record<string, never>, {}, "">;
+type Nil = ReturnType<typeof Nil>;
+export default Nil;

package/components/layout/icons/Theme.svelte

@@ -1,7 +1,7 @@
-<script context="module">let indexer = 0;
+<script lang="ts" module>let indexer = 0;
 </script>
 
-<script>export let dark = true;
+<script lang="ts">let { dark = true } = $props();
 const index = indexer++;
 </script>
 

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

@@ -1,16 +1,6 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        dark?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
+type $$ComponentProps = {
+    dark?: boolean;
 };
-export type ThemeProps = typeof __propDef.props;
-export type ThemeEvents = typeof __propDef.events;
-export type ThemeSlots = typeof __propDef.slots;
-export default class Theme extends SvelteComponentTyped<ThemeProps, ThemeEvents, ThemeSlots> {
-}
-export {};
+declare const Theme: import("svelte").Component<$$ComponentProps, {}, "">;
+type Theme = ReturnType<typeof Theme>;
+export default Theme;