@nil-/doc 0.2.24 → 0.2.26

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @nil-/doc
 
+## 0.2.26
+
+### Patch Changes
+
+-   [doc] removed fallback page in documentation ([#30](https://github.com/njaldea/mono/pull/30))
+
+## 0.2.25
+
+### Patch Changes
+
+-   186187c: [doc][breaking] removed layout slot prop for content. all unnamed slots will be part of the default slot
+-   186187c: [doc] fix range tooltip styling
+-   a82c0de: [doc] support dark/light mode
+
 ## 0.2.24
 
 ### Patch Changes

package/components/Layout.svelte

@@ -2,8 +2,6 @@
     .layout {
         width: 100%;
         height: 100%;
-        color: rgb(201, 205, 207);
-        background-color: rgb(34, 36, 37);
         font-family: "Fira Code", "Courier New", Courier, monospace;
     }
 
@@ -38,18 +36,36 @@
     .scrollable::-webkit-scrollbar {
         display: none;
     }
+
+    /* colors */
+    .layout {
+        background-color: hsl(0, 0%, 100%);
+        color: hsl(0, 100%, 0%);
+        color-scheme: light;
+    }
+
+    .layout.dark {
+        background-color: hsl(200, 4%, 14%);
+        color: hsl(200, 6%, 80%);
+        color-scheme: dark;
+    }
 </style>
 
 <script>import Container from "./etc/Container.svelte";
 import Nav from "./navigation/Nav.svelte";
-import { inRoot } from "./context";
+import { inRoot, getTheme, initTheme, evalTheme } from "./context";
 export let data;
 export let current = null;
 export let sorter = null;
 export let renamer = null;
+export let theme = void 0;
 const r = inRoot();
+const parentTheme = getTheme();
+const isDark = initTheme();
+$:
+  $isDark = evalTheme(parentTheme ? $parentTheme : true, theme);
 </script>
-<div class="layout" class:reset={r}>
+<div class="layout" class:reset={r} class:dark={$isDark}>
     <Container offset={250} padding={250} vertical secondary>
         <svelte:fragment slot="primary">
             <div class="content scrollable">
@@ -67,7 +83,7 @@ const r = inRoot();
         <svelte:fragment slot="secondary">
             <div class="content scrollable">
                 {#key current}
-                    <slot name="content" />
+                    <slot />
                 {/key}
             </div>
         </svelte:fragment>

package/components/Layout.svelte.d.ts

@@ -1,11 +1,13 @@
 import { SvelteComponentTyped } from "svelte";
 import type { Sorter, Renamer } from "./navigation/types";
+import { type Theme } from "./context";
 declare const __propDef: {
     props: {
         data: string[];
         current?: string | null | undefined;
         sorter?: Sorter | null | undefined;
         renamer?: Renamer | null | undefined;
+        theme?: Theme;
     };
     events: {
         navigate: CustomEvent<any>;
@@ -14,7 +16,7 @@ declare const __propDef: {
     };
     slots: {
         title: {};
-        content: {};
+        default: {};
     };
 };
 export type LayoutProps = typeof __propDef.props;

package/components/block/Block.svelte

@@ -1,12 +1,3 @@
-<script>import { initParams, initCurrent, initDefaults, initControls, initControlsState } from "./context";
-import { inRoot } from "../context";
-initParams();
-initCurrent();
-initDefaults();
-initControls();
-initControlsState();
-const r = inRoot();
-</script>
 <style>
     div {
         display: flex;
@@ -26,10 +17,40 @@ const r = inRoot();
         box-sizing: border-box;
         font-family: "Fira Code", "Courier New", Courier, monospace;
     }
-</style>
 
+    /* colors */
+    div {
+        color-scheme: light;
+        color: hsl(0, 100%, 0%);
+    }
+
+    div.dark {
+        color-scheme: dark;
+        color: hsl(200, 6%, 80%);
+    }
+</style>
 
-<div class:reset={r}>
+<script>import {
+  initParams,
+  initCurrent,
+  initDefaults,
+  initControls,
+  initControlsState
+} from "./context";
+import { inRoot, getTheme, initTheme, evalTheme } from "../context";
+initParams();
+initCurrent();
+initDefaults();
+initControls();
+initControlsState();
+const r = inRoot();
+export let theme = void 0;
+const parentTheme = getTheme();
+const isDark = initTheme();
+$:
+  $isDark = evalTheme(parentTheme ? $parentTheme : false, theme);
+</script>
+<div class:reset={r} class:dark={$isDark}>
     <slot />
 </div>
 

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

@@ -1,6 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
+import { type Theme } from "../context";
 declare const __propDef: {
-    props: Record<string, never>;
+    props: {
+        theme?: Theme;
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/components/block/Controls.svelte

@@ -5,5 +5,6 @@ export let expand = false;
 const controls = getControls();
 $controls = props;
 const state = getControlsState();
-$: $state.expand = expand;
+$:
+  $state.expand = expand;
 </script>

package/components/block/Params.svelte

@@ -2,21 +2,23 @@
 <script>import { onMount } from "svelte";
 import { getParams, getDefaults } from "./context";
 import { resolve } from "./utils";
-export let tag = undefined;
+export let tag = void 0;
 export let props = {};
 const defaults = getDefaults();
 const params = getParams();
-onMount(() => defaults.subscribe((d) => {
+onMount(
+  () => defaults.subscribe((d) => {
     if (d != null) {
-        params.update((p) => [
-            ...p,
-            {
-                id: p.length,
-                tag: tag ?? `${p.length}`,
-                values: resolve(d, props),
-                defaults: resolve(d, props)
-            }
-        ]);
+      params.update((p) => [
+        ...p,
+        {
+          id: p.length,
+          tag: tag ?? `${p.length}`,
+          values: resolve(d, props),
+          defaults: resolve(d, props)
+        }
+      ]);
     }
-}));
+  })
+);
 </script>

package/components/block/Template.svelte

@@ -21,12 +21,9 @@
     .content {
         min-height: 100px;
         border-radius: 5px 5px 5px 5px;
-        border: rgb(100, 96, 96) solid 1px;
-        background-color: rgb(33, 36, 37);
     }
 
     .misc {
-        outline: rgb(100, 96, 96) solid 1px;
         border-bottom-left-radius: 5px;
         border-bottom-right-radius: 5px;
         user-select: none;
@@ -46,12 +43,32 @@
     .scrollable::-webkit-scrollbar {
         display: none;
     }
+
+    /* colors */
+    .content {
+        border: hsl(0, 2%, 60%) solid 1px;
+        background-color: hsl(0, 0%, 100%);
+    }
+
+    .misc {
+        border: hsl(0, 2%, 60%) solid 1px;
+    }
+
+    .content.dark {
+        border: hsl(0, 2%, 40%) solid 1px;
+        background-color: hsl(200, 4%, 14%);
+    }
+
+    .misc.dark {
+        outline: hsl(0, 2%, 40%) solid 1px;
+    }
 </style>
 <svelte:window on:click={() => ($current = null)} />
 
 <script>import { getParams, getCurrent, getDefaults } from "./context";
 import { getControls, getControlsState } from "./context";
 import { resolve } from "./utils";
+import { getTheme } from "../context";
 import Controls from "./controls/Controls.svelte";
 import { beforeUpdate } from "svelte";
 import { slide } from "svelte/transition";
@@ -60,29 +77,20 @@ const current = getCurrent();
 const controls = getControls();
 const controlsState = getControlsState();
 const defaultsStore = getDefaults();
-export let defaults = undefined;
+const isDark = getTheme();
+export let defaults = void 0;
 export let noreset = false;
 export let columns = false;
 function reset() {
-    $params = [];
-    $defaultsStore = defaults;
+  $params = [];
+  $defaultsStore = defaults;
 }
-$: $defaultsStore, reset();
+$:
+  $defaultsStore, reset();
 let hovered = null;
-/**
- * This flag is to rerender the whole slot component.
- * If the control is disabled, we use the default value provided from the defaults field.
- * If the value of a prop is undefined, we will have to forward this value to the slot.
- * Problem is, if the slot component has a default value set, it is only
- * evaluated during component creation, not in subsequent updates.
- *
- * The solution is to rerender the whole slot whenever there is an control update.
- *
- * Similar case to: https://github.com/sveltejs/svelte/issues/4442
- */
 let key = false;
-beforeUpdate(() => (key = !key));
-const resolveArgs = (resolve);
+beforeUpdate(() => key = !key);
+const resolveArgs = resolve;
 </script>
 <div class="template" class:columns>
     {#each $params as param (param.id)}
@@ -94,7 +102,7 @@ const resolveArgs = (resolve);
             on:keypress={null}
         >
             {#if noreset}
-                <div class="content scrollable">
+                <div class="content scrollable" class:dark={$isDark}>
                     <slot
                         id={param.id}
                         tag={param.tag}
@@ -104,7 +112,7 @@ const resolveArgs = (resolve);
                 </div>
             {:else}
                 {#key key}
-                    <div class="content scrollable">
+                    <div class="content scrollable" class:dark={$isDark}>
                         <slot
                             id={param.id}
                             tag={param.tag}
@@ -115,7 +123,7 @@ const resolveArgs = (resolve);
                 {/key}
             {/if}
             {#if $controls.length > 0 && ($controlsState.expand || $current === param.id || hovered === param.id)}
-                <div class="misc scrollable" transition:slide|local>
+                <div class="misc scrollable" class:dark={$isDark} transition:slide|local>
                     <Controls infos={$controls} bind:values={param.values} />
                 </div>
             {/if}

package/components/block/controls/Component.svelte

@@ -6,9 +6,6 @@ import Switch from "./Switch.svelte";
 import Select from "./Select.svelte";
 import Tuple from "./Tuple.svelte";
 import Object from "./Object.svelte";
-// by use, info type is mapped to the value type
-// unfortunately i can't use typescript in the markup part of svelte
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export let value;
 export let info;
 export let depth;

package/components/block/controls/Number.svelte

@@ -5,8 +5,9 @@ export let info;
 export let depth;
 export let disabled = false;
 let ivalue = value ?? getDefault(info);
-let enabled = value !== undefined;
-$: value = enabled && !disabled ? ivalue : undefined;
+let enabled = value !== void 0;
+$:
+  value = enabled && !disabled ? ivalue : void 0;
 </script>
 <div>
     <div style:padding-left={`${depth}px`}>- {info.name}</div>

package/components/block/controls/Object.svelte

@@ -7,8 +7,9 @@ export let info;
 export let depth;
 export let disabled = false;
 let ivalue = value ?? getObjectDefaults(info);
-let enabled = value !== undefined;
-$: value = !disabled && enabled ? ivalue : undefined;
+let enabled = value !== void 0;
+$:
+  value = !disabled && enabled ? ivalue : void 0;
 </script>
 <Header name={info.name} bind:checked={enabled} {depth} {disabled} />
 {#if enabled && !disabled}

package/components/block/controls/Range.svelte

@@ -38,8 +38,9 @@ export let info;
 export let depth;
 export let disabled = false;
 let ivalue = value ?? getDefault(info);
-let enabled = value !== undefined;
-$: value = enabled && !disabled ? ivalue : undefined;
+let enabled = value !== void 0;
+$:
+  value = enabled && !disabled ? ivalue : void 0;
 </script>
 <div>
     <div style:padding-left={`${depth}px`}>- {info.name}</div>

package/components/block/controls/Select.svelte

@@ -5,8 +5,9 @@ export let info;
 export let depth;
 export let disabled = false;
 let ivalue = value ?? getDefault(info);
-let enabled = value !== undefined;
-$: value = enabled && !disabled ? ivalue : undefined;
+let enabled = value !== void 0;
+$:
+  value = enabled && !disabled ? ivalue : void 0;
 </script>
 <div>
     <div style:padding-left={`${depth}px`}>- {info.name}</div>

package/components/block/controls/Switch.svelte

@@ -5,8 +5,9 @@ export let info;
 export let depth;
 export let disabled = false;
 let ivalue = value ?? getDefault(info);
-let enabled = value !== undefined;
-$: value = enabled && !disabled ? ivalue : undefined;
+let enabled = value !== void 0;
+$:
+  value = enabled && !disabled ? ivalue : void 0;
 </script>
 <div>
     <div style:padding-left={`${depth}px`}>- {info.name}</div>

package/components/block/controls/Text.svelte

@@ -5,8 +5,9 @@ export let info;
 export let depth;
 export let disabled = false;
 let ivalue = value ?? getDefault(info);
-let ienabled = value !== undefined;
-$: value = ienabled && !disabled ? ivalue : undefined;
+let ienabled = value !== void 0;
+$:
+  value = ienabled && !disabled ? ivalue : void 0;
 </script>
 <div>
     <div style:padding-left={`${depth}px`}>- {info.name}</div>

package/components/block/controls/Tuple.svelte

@@ -7,8 +7,9 @@ export let info;
 export let depth;
 export let disabled = false;
 let ivalue = value ?? getTupleDefaults(info);
-let enabled = value !== undefined;
-$: value = !disabled && enabled ? ivalue : undefined;
+let enabled = value !== void 0;
+$:
+  value = !disabled && enabled ? ivalue : void 0;
 </script>
 <Header name={info.name} bind:checked={enabled} {depth} {disabled} />
 {#if enabled && !disabled}

package/components/block/controls/misc/Styler.svelte

@@ -1,3 +1,6 @@
+<script>import { getTheme } from "../../../context";
+const isDark = getTheme();
+</script>
 <style>
     div {
         width: 100%;
@@ -8,7 +11,9 @@
         box-sizing: border-box;
     }
 
-    div :global(*) {
+    div :global(*),
+    div :global(*::before),
+    div :global(*::after) {
         box-sizing: inherit;
     }
 
@@ -17,16 +22,6 @@
         display: grid;
         padding: 2px 0px;
         grid-template-columns: minmax(250px, 1fr) 200px 40px;
-        background-color: hsl(205, 50%, 5%);
-    }
-
-    div > :global(div:nth-child(even)) {
-        background-color: hsl(205, 15%, 15%);
-    }
-
-    div > :global(div:hover .tooltip),
-    div > :global(div:nth-child(n + 2):hover) {
-        background-color: hsl(203, 100%, 15%);
     }
 
     div > :global(div > div) {
@@ -38,9 +33,45 @@
         width: 100%;
         height: 100%;
     }
+
+    /* colors */
+    div > :global(div) {
+        background-color: hsl(0, 0%, 100%);
+    }
+
+    div > :global(div:nth-child(even)) {
+        background-color: hsl(210, 29%, 97%);
+    }
+
+    div > :global(div:nth-child(n + 2):hover) {
+        background-color: hsl(210, 100%, 90%);
+    }
+
+    div > :global(div:hover .tooltip) {
+        background-color: hsl(0, 0%, 100%);
+        outline: hsl(0, 100%, 0%) 1px solid;
+    }
+
+    div.dark > :global(div) {
+        background-color: hsl(213, 26%, 7%);
+    }
+
+    div.dark > :global(div:nth-child(even)) {
+        background-color: hsl(213, 26%, 11%);
+    }
+
+    div.dark > :global(div:nth-child(n + 2):hover) {
+        background-color: hsl(203, 100%, 15%);
+    }
+
+    div.dark > :global(div:hover .tooltip) {
+        background-color: hsl(213, 26%, 7%);
+        outline: hsl(200, 6%, 80%) 1px solid;
+    }
 </style>
 
-<div>
+
+<div class:dark={$isDark}>
     <slot />
 </div>
 

package/components/block/controls/misc/Styler.svelte.d.ts

@@ -1,22 +1,6 @@
-/** @typedef {typeof __propDef.props}  StylerProps */
-/** @typedef {typeof __propDef.events}  StylerEvents */
-/** @typedef {typeof __propDef.slots}  StylerSlots */
-export default class Styler extends SvelteComponentTyped<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type StylerProps = typeof __propDef.props;
-export type StylerEvents = typeof __propDef.events;
-export type StylerSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
@@ -24,4 +8,9 @@ declare const __propDef: {
         default: {};
     };
 };
+export type StylerProps = typeof __propDef.props;
+export type StylerEvents = typeof __propDef.events;
+export type StylerSlots = typeof __propDef.slots;
+export default class Styler extends SvelteComponentTyped<StylerProps, StylerEvents, StylerSlots> {
+}
 export {};

package/components/context.d.ts

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

package/components/context.js

@@ -1,7 +1,18 @@
 import { setContext, getContext } from "svelte";
+import { writable } from "svelte/store";
 const root = Symbol();
 export function inRoot() {
     const value = getContext(root);
     setContext(root, false);
     return value !== false;
 }
+const theme = Symbol();
+export function getTheme() {
+    return getContext(theme);
+}
+export function initTheme() {
+    return setContext(theme, writable(true));
+}
+export function evalTheme(parent, theme) {
+    return theme === undefined ? parent : theme === "dark";
+}

package/components/etc/Container.svelte

@@ -28,11 +28,6 @@
         overflow: visible;
         user-select: none;
         grid-area: divider;
-        outline: rgb(100, 96, 96) solid 1px;
-    }
-
-    .container > .divider.moving {
-        outline: rgb(255, 255, 255) solid 1px;
     }
 
     .container > .divider.vertical {
@@ -54,38 +49,56 @@
         cursor: col-resize;
         transform: translateX(-50%);
     }
+
+    /* colors */
+    .container > .divider {
+        outline: hsl(0, 2%, 70%) solid 1px;
+    }
+
+    .container > .divider.moving {
+        outline: hsl(0, 0%, 0%) solid 1px;
+    }
+
+    .container.dark > .divider {
+        outline: hsl(0, 2%, 38%) solid 1px;
+    }
+
+    .container.dark > .divider.moving {
+        outline: hsl(0, 0%, 100%) solid 1px;
+    }
 </style>
 
 <script>import { writable } from "svelte/store";
 import { createDraggable } from "./action";
-// orientation of the layout
+import { getTheme } from "../context";
+const isDark = getTheme();
 export let vertical = false;
-// initial value where the divider is located
 export let offset = 0;
-// when secondary is enabled, main focus will be the secondary slot
-// collapsing will hide the primary slot
 export let secondary = false;
-// min distance of divider to the edges
 export let padding = 0;
 let width;
 let height;
 let collapse = false;
 const { position, draggable } = createDraggable(offset);
 function update(w, h, limit, value) {
-    if (w == null || h == null || collapse) {
-        return;
-    }
-    const span = vertical ? w : h;
-    offset = Math.max(Math.min(value, span - limit), limit);
+  if (w == null || h == null || collapse) {
+    return;
+  }
+  const span = vertical ? w : h;
+  offset = Math.max(Math.min(value, span - limit), limit);
 }
-$: update(width, height, padding, $position);
-$: offsetpx = collapse ? "10px" : `${offset}px`;
-$: style = !secondary ? `auto 0px ${offsetpx}` : `${offsetpx} 0px auto`;
+$:
+  update(width, height, padding, $position);
+$:
+  offsetpx = collapse ? "10px" : `${offset}px`;
+$:
+  style = !secondary ? `auto 0px ${offsetpx}` : `${offsetpx} 0px auto`;
 const moving = writable(false);
 </script>
 <div
     class="container"
     class:vertical
+    class:dark={$isDark}
     bind:clientHeight={height}
     bind:clientWidth={width}
     style:grid-template-columns={vertical ? style : null}

package/components/navigation/Nav.svelte

@@ -21,40 +21,44 @@
 </style>
 
 <script context="module">function apply(paths, init, pre, next, post) {
-    const retval = {};
-    for (const path of paths) {
-        const parts = path.split("/");
-        if (parts.length <= 1) {
-            continue;
-        }
-        let t = retval;
-        for (let i = 1; i < parts.length; ++i) {
-            const part = parts[i];
-            if (t[part] == null) {
-                t[part] = init();
-            }
-            if (i !== parts.length - 1) {
-                t[part] = pre(t[part], path);
-            }
-            if (i !== parts.length - 1) {
-                t = next(t[part]);
-            }
-            else if (post) {
-                post(t[part], path);
-            }
-        }
+  const retval = {};
+  for (const path of paths) {
+    const parts = path.split("/");
+    if (parts.length <= 1) {
+      continue;
     }
-    return retval;
+    let t = retval;
+    for (let i = 1; i < parts.length; ++i) {
+      const part = parts[i];
+      if (t[part] == null) {
+        t[part] = init();
+      }
+      if (i !== parts.length - 1) {
+        t[part] = pre(t[part], path);
+      }
+      if (i !== parts.length - 1) {
+        t = next(t[part]);
+      } else if (post) {
+        post(t[part], path);
+      }
+    }
+  }
+  return retval;
 }
 function filt(path, filter, renamer) {
-    return path.includes(filter) || path.split("/").map(renamer).join("/").includes(filter);
+  return path.includes(filter) || path.split("/").map(renamer).join("/").includes(filter);
 }
 function populate(filter, info, renamer) {
-    return apply(filter.length > 0 ? info.filter((path) => filt(path, filter, renamer)) : info, () => ({ url: null, sub: {} }), (t) => t, (t) => t.sub, (t, p) => {
-        t.url = p;
-    });
+  return apply(
+    filter.length > 0 ? info.filter((path) => filt(path, filter, renamer)) : info,
+    () => ({ url: null, sub: {} }),
+    (t) => t,
+    (t) => t.sub,
+    (t, p) => {
+      t.url = p;
+    }
+  );
 }
-export {};
 </script>
 <script>import Tree from "./Tree.svelte";
 export let info;
@@ -62,21 +66,27 @@ export let selected;
 export let sorter;
 export let renamer;
 let filter = "";
-let states = apply(info, () => ({ expanded: false, sub: {} }), (t, path) => ({ expanded: t.expanded || selected === path, sub: t.sub }), (t) => t.sub);
-function update(selected) {
-    if (!info.includes(selected)) {
-        return;
-    }
-    let node = states;
-    const paths = selected.split("/").slice(1);
-    for (const [i, p] of paths.entries()) {
-        if (i < paths.length - 1) {
-            node[p].expanded = true;
-        }
-        node = node[p].sub;
+let states = apply(
+  info,
+  () => ({ expanded: false, sub: {} }),
+  (t, path) => ({ expanded: t.expanded || selected === path, sub: t.sub }),
+  (t) => t.sub
+);
+function update(selected2) {
+  if (!info.includes(selected2)) {
+    return;
+  }
+  let node = states;
+  const paths = selected2.split("/").slice(1);
+  for (const [i, p] of paths.entries()) {
+    if (i < paths.length - 1) {
+      node[p].expanded = true;
     }
+    node = node[p].sub;
+  }
 }
-$: update(selected);
+$:
+  update(selected);
 </script>
 <div class="nav">
     <div class="logo"><slot /></div>

package/components/navigation/Node.svelte

@@ -54,15 +54,16 @@ export let states;
 export let sorter;
 export let renamer;
 const dispatch = createEventDispatcher();
-$: style = `padding-left: ${10 + depth * 10}px;`;
-$: has_children = Object.keys(value.sub).length > 0;
+$:
+  style = `padding-left: ${10 + depth * 10}px;`;
+$:
+  has_children = Object.keys(value.sub).length > 0;
 function click(link) {
-    if (link != null && selected !== link) {
-        dispatch("navigate", link);
-    }
-    else if (has_children) {
-        states.expanded = !states.expanded;
-    }
+  if (link != null && selected !== link) {
+    dispatch("navigate", link);
+  } else if (has_children) {
+    states.expanded = !states.expanded;
+  }
 }
 </script>
 <div class="wrapper">

package/package.json

@@ -1,13 +1,11 @@
 {
   "name": "@nil-/doc",
-  "version": "0.2.24",
+  "version": "0.2.26",
   "author": {
     "email": "njaldea@gmail.com",
     "name": "Neil Aldea"
   },
-  "peerDependencies": {
-    "svelte": "^3.55.0"
-  },
+  "license": "ISC",
   "devDependencies": {
     "@sveltejs/adapter-vercel": "^1.0.0",
     "@sveltejs/kit": "^1.0.1",
@@ -15,12 +13,13 @@
     "mdsvex": "^0.10.6",
     "svelte-check": "^2.10.2",
     "svelte-markdown": "^0.2.3",
-    "svelte-preprocess": "^4.10.7",
     "tslib": "^2.4.1",
     "typescript": "^4.9.4",
-    "vite": "^4.0.1"
+    "vite": "^4.0.2"
+  },
+  "peerDependencies": {
+    "svelte": "^3.55.0"
   },
-  "type": "module",
   "publishConfig": {
     "linkDirectory": true
   },
@@ -29,7 +28,7 @@
     "documentation",
     "component"
   ],
-  "license": "ISC",
+  "type": "module",
   "exports": {
     "./package.json": "./package.json",
     ".": "./index.js",