@axel669/zephyr 0.5.0-alpha.0 → 0.5.5

package/package.json

@@ -1,41 +1,42 @@
-{
-  "name": "@axel669/zephyr",
-  "version": "0.5.0-alpha.0",
-  "description": "",
-  "main": "src/index.js",
-  "type": "module",
-  "scripts": {
-    "site/start": "wrangler pages dev site --port 45067",
-    "site/build": "rollup -c docsite/rollup.config.js",
-    "site/watch": "rollup -c docsite/rollup.config.js --watch"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "MIT",
-  "dependencies": {
-    "@axel669/windstorm": "0.5.0",
-    "svelte": "^5.9.0"
-  },
-  "devDependencies": {
-    "@axel669/asuid": "^0.2.1",
-    "@axel669/ipsen": "0.4.0-beta.7",
-    "@axel669/rollup-copy-static": "^0.2.0",
-    "@axel669/rollup-html-input": "^0.1.2",
-    "@rollup/plugin-node-resolve": "^15.0.2",
-    "@rollup/plugin-terser": "^0.4.0",
-    "marked": "^12.0.2",
-    "prism-svelte": "^0.5.0",
-    "prismjs": "^1.29.0",
-    "rollup": "^3.20.2",
-    "rollup-plugin-delete": "^2.0.0",
-    "rollup-plugin-svelte": "^7.2.2"
-  },
-  "files": [
-    "src/"
-  ],
-  "imports": {
-    "#lib": "./src/index.js",
-    "#comp/*": "./docsite/comp/*.svelte",
-    "#state/*": "./docsite/state/*.js"
-  }
-}
+{
+  "name": "@axel669/zephyr",
+  "version": "0.5.5",
+  "description": "",
+  "main": "src/index.js",
+  "type": "module",
+  "scripts": {
+    "site/start": "wrangler pages dev site --port 45067",
+    "site/build": "rollup -c docsite/rollup.config.js",
+    "site/watch": "rollup -c docsite/rollup.config.js --watch"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "@axel669/windstorm": "0.5.5",
+    "svelte": "^5.30.1"
+  },
+  "devDependencies": {
+    "@axel669/asuid": "^0.2.1",
+    "@axel669/ipsen": "0.4.0-beta.7",
+    "@axel669/rollup-copy-static": "^0.2.0",
+    "@axel669/rollup-html-input": "^0.1.2",
+    "@rollup/plugin-node-resolve": "^15.0.2",
+    "@rollup/plugin-terser": "^0.4.0",
+    "marked": "^12.0.2",
+    "prism-svelte": "^0.5.0",
+    "prismjs": "^1.29.0",
+    "rollup": "^3.20.2",
+    "rollup-plugin-delete": "^2.0.0",
+    "rollup-plugin-svelte": "^7.2.2"
+  },
+  "files": [
+    "src/"
+  ],
+  "imports": {
+    "#lib": "./src/index.js",
+    "#comp/*": "./docsite/comp/*.svelte",
+    "#state/*": "./docsite/state/*.js",
+    "#README": "./readme.md"
+  }
+}

package/readme.md

@@ -4,6 +4,12 @@ library, with some additional parts to make it look nice in the markup.
 
 [Docs Here](https://zephyr.axel669.net)
 
+## Todo
+These are things that I plan to do, but didn't want to hold up the 0.5.x major
+changes for svelte 5/runes/improvements.
+- Add filter/sort back into data table
+- Form element
+
 ## Installation
 Zephyr can be installed through npm (or the variants like yarn, pnpm, etc).
 
@@ -15,7 +21,8 @@ npm install @axel669/zephyr
 Components can be imported individually from the library for tree-shaking, or
 the entire lib can imported at once, but I dunno how big that bundle will be.
 Components can also take any windstorm macro as a prop, including custom macros,
-using the same rules as the `wsx` covered in [Functions](./src/functions.md).
+using the same rules as the `wsx` covered in
+[Functions](./docsite/docs/functions.md).
 
 ### Theming
 Windstorm expects a theme to be defined on an ancestor of the html elements

package/src/changed.js

@@ -1,10 +1,10 @@
-export const trackChanges = (initial) => {
-    let current = initial
-    return (next) => {
-        if (next !== current) {
-            current = next
-            return true
-        }
-        return false
-    }
-}
+export const trackChanges = (initial) => {
+    let current = initial
+    return (next) => {
+        if (next !== current) {
+            current = next
+            return true
+        }
+        return false
+    }
+}

package/src/composed/data-table.svelte

@@ -1,200 +1,174 @@
-<svelte:options immutable />
-
-<script context="module">
-    // find the first filter in the list that returns false
-    const applyFilters = (data, filters) => {
-        if (Array.isArray(data) === false) {
-            return null
+<script module>
+    const itemRange = (info) => {
+        const {
+            scrollPos,
+            scrollMax,
+            rowSize,
+            length,
+            containerHeight,
+        } = info
+        if (scrollMax === null) {
+            return [0, 0]
         }
-        return data.filter(
-            (row) => {
-                for (const [filter, value] of filters) {
-                    if (filter(row, value) === false) {
-                        return false
-                    }
-                }
-                return true
-            }
+        const displayed = Math.ceil(containerHeight / rowSize) - 1
+        const itemPos = Math.floor(
+            (scrollPos / scrollMax) * (length - displayed)
         )
+        return [
+            itemPos - 1,
+            itemPos + displayed + 1,
+            displayed + 2,
+        ]
     }
-    const sliceData = (data, page, pageSize, sortFunc) => {
-        if (data === null) {
-            return []
-        }
-        const sorted = data.sort(sortFunc)
-        return Array.from(
-            { length: pageSize },
-            (_, i) => sorted[page * pageSize + i]
+    const emptyRow = Symbol("empty row")
+    const nullRow = Symbol("null row")
+
+    const sliceData = (data, range) => {
+        const displayed = data.slice(
+            Math.max(range[0], 0),
+            range[1]
         )
+        if (range[0] === -1) {
+            return [emptyRow, ...displayed]
+        }
+        if (displayed.length < range[2]) {
+            return [
+                ...displayed,
+                ...Array.from(
+                    { length: range[2] - displayed.length },
+                    () => nullRow
+                )
+            ]
+        }
+        return displayed
     }
-    const noSort = {
-        direction: null,
-        func: (a, b) => 0,
-        base: null,
-    }
-
-    export const dtContext = Symbol("table key")
 </script>
 
 <script>
-    import { createEventDispatcher, setContext } from "svelte"
-    import { writable } from "svelte/store"
-
-    import Button from "../control/button.svelte"
-    import Icon from "../info/icon.svelte"
-    import Paper from "../layout/paper.svelte"
-    import Table from "../data-display/table.svelte"
-    import Text from "../text.svelte"
+    import { on } from "svelte/events"
 
     import Grid from "../layout/grid.svelte"
 
     import wsx from "../wsx.js"
-    import { handler$, eventHandler$ } from "../handler$.js"
-
-    export let color = "@primary"
-    export let fillHeader = true
-    export let data
-    export let pageSize = 10
-    export let page = 0
-    export let rowHeight = "40px"
-    export let scrollable = false
-    export let height = null
-
-    let sorting = noSort
-    let filters = new Map()
-    let filterFunctions = []
-    let jumpTarget = "1"
-
-    $: filteredData = applyFilters(data, filterFunctions, sorting.func)
-    $: rows = sliceData(filteredData, page, pageSize, sorting.func)
-    $: rowCount = filteredData?.length ?? 0
-    $: pageCount = Math.ceil(rowCount / pageSize)
-    $: maxPage = Math.max(pageCount - 1, 0)
-    $: jumpTarget = (page + 1).toString()
-
-    $: if (filteredData === null) {
-        console.warn("DataTable: data is not an array")
-    }
-
-    const prev = () => page = Math.max(0, page - 1)
-    const next = () => page = Math.min(maxPage, page + 1)
-
-    const updateSort = (func) => {
-        if (sorting.base === func) {
-            if (sorting.direction === "desc") {
-                sorting = noSort
-                return
-            }
-            sorting = {
-                func: (a, b) => -func(a, b),
-                base: func,
-                direction: "desc"
-            }
-            return
-        }
-        sorting = {
-            func,
-            base: func,
-            direction: "asc",
-        }
-    }
-    const updateFilter = (func, value) => {
-        if (func === null) {
-            return
-        }
-        filters.set(func, value)
-        filterFunctions = [
-            ...filters.entries()
-        ]
-    }
 
-    const context = writable({})
-    $: $context = {
-        updateSort,
-        fillHeader,
-        sorting,
-        updateFilter,
+    const {
+        data,
+        rowSize = 40,
+        headerSize = rowSize,
+        cols = "1fr",
+        gap = 2,
+        colGap = gap,
+        rowGap = gap,
+        header,
+        row,
         color,
-    }
-    setContext(dtContext, context)
+        fillHeader = false,
+        ...rest
+    } = $props()
 
-    const fire = createEventDispatcher()
-    const pass = handler$(
-        (row) => fire("row-click", row)
+    const rowPx = rowSize + rowGap
+    const height = $derived(
+        rowPx * data.length - rowGap
     )
+    const tableHeight = $derived(height + rowPx)
 
-    let scroller = null
-    $: if (scroller !== null && isNaN(page) === false) {
-        scroller.scrollTop = 0
+    let scrollPos = $state(0)
+    let scrollMax = $state(null)
+    let containerHeight = $state(null)
+    const scrollHandler = (evt) => {
+        scrollPos = container.scrollTop
     }
-    const jump = (evt) => {
-        if (evt.type === "keypress" && evt.key !== "Enter") {
-            return
-        }
-        const target = parseInt(evt.target.value)
-        if (isNaN(target) === true) {
-            jumpTarget = (page + 1).toString()
-            return
-        }
-        page = Math.max(
-            Math.min(jumpTarget - 1, maxPage),
-            0
+    const range = $derived(
+        itemRange({
+            scrollPos,
+            scrollMax,
+            containerHeight,
+            rowSize: rowSize + rowGap,
+            length: data.length,
+        })
+    )
+    let container = $state(null)
+
+    $effect(() => {
+        containerHeight = container.clientHeight
+        scrollMax = container.scrollHeight - containerHeight
+        on(container, "scroll", scrollHandler, { passive: true })
+        const observer = new ResizeObserver(
+            () => {
+                containerHeight = container.clientHeight
+                scrollMax = container.scrollHeight - containerHeight
+            }
         )
-        jumpTarget = (page + 1).toString()
-    }
+        observer.observe(container)
+        return () => observer.unobserve(container)
+    })
 
-    $: content = {
-        "fl.cross": "stretch",
-        p: "0px",
-        gap: "0px",
-        over: (scrollable === true) ? "auto" : null,
-    }
-    $: header = {
-        "h.min": rowHeight,
-        y: "0px",
-        z: "+10",
-        pos: (scrollable === true) ? "sticky" : null,
-    }
+    const displayed = $derived(range[2])
+    const displayedRows = $derived(
+        sliceData(data, range)
+    )
+    const tbodyHeight = $derived(displayRows.length * rowSize)
+
+    const tableWSX = $derived({
+        "$fill-header": fillHeader,
+        $color: color,
+        "gr.cols": cols,
+        "gap.col": `${colGap}px`,
+        "gap.row": `${rowGap}px`,
+        "@header-size": `${headerSize}px`,
+        "@row-size": `${rowSize}px`,
+        "$sticky-header": true,
+        w: "100%",
+        h: `${tableHeight}px`,
+        over: "visible",
+        con: "paint",
+    })
+    const tbodyWSX = $derived({
+        disp: "grid",
+        "gr.rows": "subgrid",
+        "gr.cols": "subgrid",
+        row: `span ${displayed}`,
+        tf: `translateY(${range[0] * rowPx}px)`,
+    })
+    const footerWSX = $derived({
+        h: "40px",
+        bg: "@background-element",
+        $color: color,
+        "b.y": "2px solid @ripple-base-color",
+        disp: "flex",
+        "fl-center": true,
+    })
+
+    const show = $derived({
+        start: Math.max(1, range[0] + 2),
+        end: Math.min(data.length, range[1] - 1),
+        total: data.length,
+    })
 </script>
 
-<Paper h={height} r="0px">
-    <ws-flex use:wsx={content} slot="content" bind:this={scroller}>
-        <Table data={rows} {color} {fillHeader} b.t.w="2px" {...$$restProps}>
-            <tr use:wsx={header} slot="header">
-                <slot name="header">
-                    <th>No Header Defined</th>
-                </slot>
-            </tr>
-            <tr ws-x="[h {rowHeight}]" slot="row" let:row>
-                <slot name="row" {row}>
-                    <th>No Row Defined</th>
-                </slot>
-            </tr>
-            <tr ws-x="[h {rowHeight}]" slot="empty-row" />
-        </Table>
-    </ws-flex>
-    <Grid slot="footer" gr.cols="min-content min-content min-content 1fr"
-    rows="32px" b="1px solid {color}" b.b.w="2px">
-        {#if pageCount > 0}
-            <Button on:click={prev} disabled={page === 0} ground>
-                <Icon name="caret-left" />
-            </Button>
-            <Button on:click={next} disabled={page === maxPage} ground>
-                <Icon name="caret-right" />
-            </Button>
-            <Text adorn t.ws="nowrap">
-                Page
-                <input ws-x="[b 1px solid @text-color-normal] [w 36px] [r 4px]
-                [h 24px] [bg.c transaprent] [t.a center] [m.l 4px] [m.r 4px]"
-                type="text" bind:value={jumpTarget}
-                on:keypress={jump} on:blur={jump} />
-                / {pageCount}
-            </Text>
-        {:else}
-            <div ws-x="[col span 3] [p.l 4px]">
-                No data to show
-            </div>
-        {/if}
-        <slot name="action" />
-    </Grid>
-</Paper>
+<Grid cols="1fr" rows="1fr min-content" pos="relative" {...rest} gap="0px">
+    <div ws-x="[over auto]" bind:this={container}>
+        <table use:wsx={tableWSX}>
+            <thead>
+                {@render header()}
+            </thead>
+            <tbody use:wsx={tbodyWSX}>
+                {#each displayedRows as dataRow}
+                    {#if dataRow === nullRow}
+                        <tr>
+                            <td ws-x="[col 1 / -1]"></td>
+                        </tr>
+                    {:else if dataRow === emptyRow}
+                        <tr></tr>
+                    {:else}
+                        {@render row(dataRow)}
+                    {/if}
+                {/each}
+            </tbody>
+        </table>
+    </div>
+
+    <div use:wsx={footerWSX}>
+        Showing: {show.start} - {show.end} of {show.total}
+    </div>
+</Grid>

package/src/composed/entry-button.svelte

@@ -2,27 +2,28 @@
     import Button from "../control/button.svelte"
     import Modal from "../layout/modal.svelte"
     import { handler$ } from "../handler$.js"
+    import { splitProps } from "../props.js"
 
     const {
-        component,
-        props,
-        this:Wrapper = Modal,
-        "w!props":wrapperProps = {},
         children,
+        modal,
         onentry,
+        onopen,
         ...rest
     } = $props()
 
+    const prop = splitProps(rest, "m!")
+
     let element = null
-    const open = handler$(
-        async (props) => {
-            const elemProps = (typeof props === "function") ? props() : props
-            const result = await element.show(elemProps)
-            onentry?.(result)
-        }
-    )
+    const open = async (props) => {
+        onopen?.()
+        const result = await element.show()
+        onentry?.(result)
+    }
 </script>
 
-<Button {...rest} onclick={open(props)} {children} />
+<Button {...prop.rest} onclick={open} {children} />
 
-<Wrapper bind:this={element} {...rest} {component} />
+<Modal bind:this={element} {...prop["m!"]}>
+    {@render modal()}
+</Modal>

package/src/custom-macros.js

@@ -0,0 +1,9 @@
+const head = document.head
+const macros = document.createElement("style")
+macros.setAttribute("ws-root", "")
+macros.innerHTML = `
+.ws-style {
+    --con: "contain: {$}";
+}
+`
+head.append(macros)

package/src/data-display/table.svelte

@@ -5,6 +5,8 @@
         color = "@default",
         data = [],
         fillHeader = false,
+        stickyHeader = false,
+        cols = "1fr",
         header,
         row,
         emptyRow,
@@ -13,7 +15,9 @@
 
     const wind = $derived({
         "$color": color,
-        "$header-fill": fillHeader,
+        "$fill-header": fillHeader,
+        "$sticky-header": stickyHeader,
+        "gr.cols": cols,
         ...rest,
     })
 </script>

package/src/dialogs/alert.svelte

@@ -4,16 +4,16 @@
     import Icon from "../info/icon.svelte"
     import Text from "../text.svelte"
     import Titlebar from "../info/titlebar.svelte"
+    import { modalContext } from "../layout/modal.svelte"
 
     const {
-        close,
-        color = "@primary",
+        color = "@default",
         icon,
         message,
         okText = "OK",
-        titleText = "Alert",
-        ...rest
+        title: titleText = "Alert",
     } = $props()
+    const { close } = modalContext()
 </script>
 
 <Dialog card {color}>
@@ -34,7 +34,7 @@
     </Text>
 
     {#snippet footer()}
-    <Button onclick={close} {color} ground>
+    <Button onclick={() => close(true)} {color} ground>
         {okText}
     </Button>
     {/snippet}

package/src/dialogs/confirm.svelte

@@ -5,19 +5,20 @@
     import Icon from "../info/icon.svelte"
     import Text from "../text.svelte"
     import Titlebar from "../info/titlebar.svelte"
+    import { modalContext } from "../layout/modal.svelte"
 
     import { handler$ } from "../handler$.js"
 
     const {
-        close,
-        titleText = "Confirm",
+        title: titleText = "Confirm",
         icon,
         message,
         okText = "OK",
         cancelText = "Cancel",
-        color = "@primary",
+        color = "@default",
     } = $props()
 
+    const { close } = modalContext()
     const cls = handler$(close)
 </script>
 

package/src/dialogs/prompt.svelte

@@ -0,0 +1,67 @@
+<script>
+    import Button from "../control/button.svelte"
+    import Dialog from "../layout/dialog.svelte"
+    import Grid from "../layout/grid.svelte"
+    import Icon from "../info/icon.svelte"
+    import Input from "../control/input.svelte"
+    import Text from "../text.svelte"
+    import Titlebar from "../info/titlebar.svelte"
+    import { modalContext } from "../layout/modal.svelte"
+
+    import { handler$ } from "../handler$.js"
+    import { frameDelay } from "../internals.js"
+
+    let {
+        title: titleText = "Confirm",
+        icon,
+        message,
+        okText = "OK",
+        cancelText = "Cancel",
+        color = "@default",
+        value = $bindable(""),
+        initial = ""
+    } = $props()
+
+    const { close } = modalContext()
+    const cls = handler$(close)
+    let input = $state(null)
+
+    const done = (evt) => {
+        evt.preventDefault()
+        evt.stopPropagation()
+        close(true)
+    }
+
+    // the first 1-2 frames it's in the DOM it's not visible, focus didn't work
+    frameDelay(3, () => input.focus())
+    value = initial
+</script>
+
+<Dialog card {color}>
+    {#snippet header()}
+    <Titlebar {color}>
+        {#snippet title()}
+        <Text title>
+            <Icon name={icon}>
+                {titleText}
+            </Icon>
+        </Text>
+        {/snippet}
+    </Titlebar>
+    {/snippet}
+
+    <form onsubmit={done} ws-x="[grid]">
+        <Input bind:value {color} bind:this={input} label={message} />
+    </form>
+
+    {#snippet footer()}
+    <Grid cols="1fr 1fr" p="0px">
+        <Button onclick={cls(false)} color="@danger" ground>
+            {cancelText}
+        </Button>
+        <Button onclick={cls(true)} color="@secondary" ground>
+            {okText}
+        </Button>
+    </Grid>
+    {/snippet}
+</Dialog>

package/src/{hash.svelte.js → hash.js}

@@ -1,14 +1,5 @@
 import { readable } from "svelte/store"
 
-// export const hash = $state(location.hash.slice(1))
-// window.addEventListener(
-//     "popstate",
-//     () => hashValue = location.hash.slice(1)
-// )
-// $effect(
-//     () => location.hash = hash
-// )
-
 export const hash = readable(
     location.hash.slice(1),
     (set) => {

package/src/index.js

@@ -27,7 +27,7 @@ export { default as Dialog } from "./layout/dialog.svelte"
 export { default as Drawer } from "./layout/drawer.svelte"
 export { default as Flex } from "./layout/flex.svelte"
 export { default as Grid } from "./layout/grid.svelte"
-export { default as Modal } from "./layout/modal.svelte"
+export { default as Modal, modalAnimTime, modalContext } from "./layout/modal.svelte"
 export { default as Paper } from "./layout/paper.svelte"
 export { default as Screen } from "./layout/screen.svelte"
 
@@ -38,14 +38,14 @@ export { default as HexagonSpinner } from "./spinner/hexagon-spinner.svelte"
 
 export { default as Alert } from "./dialogs/alert.svelte"
 export { default as Confirm } from "./dialogs/confirm.svelte"
+export { default as Prompt } from "./dialogs/prompt.svelte"
 
-// export { default as DataTable } from "./composed/data-table.svelte"
+export { default as DataTable } from "./composed/data-table.svelte"
 // export { default as TH } from "./composed/data-table/th.svelte"
 export { default as EntryButton } from "./composed/entry-button.svelte"
 // export { default as Form } from "./composed/form.svelte"
 
 export { default as AsyncButton } from "./async/button.svelte"
-// export { default as LoadZone } from "./async/load-zone.svelte"
 export { default as Suspend } from "./async/suspend.svelte"
 
 export { default as Route } from "./routing/route.svelte"
@@ -53,7 +53,7 @@ export { default as Title } from "./routing/title.svelte"
 
 export { default as wsx } from "./wsx.js"
 
-export { hash } from "./hash.svelte.js"
+export { hash } from "./hash.js"
 
 export {
     route,

package/src/internals.js

@@ -0,0 +1,12 @@
+export const frameDelay = (frames, action) => {
+    let frameCount = 0
+    const process = () => {
+        frameCount += 1
+        if (frameCount >= frames) {
+            action()
+            return
+        }
+        requestAnimationFrame(process)
+    }
+    requestAnimationFrame(process)
+}

package/src/layout/dialog.svelte

@@ -19,6 +19,7 @@
 
 <!-- svelte-ignore a11y_click_events_have_key_events -->
 <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+ <!-- svelte-ignore a11y_interactive_supports_focus -->
 <wind-wrapper transition:trick ws-x="@@dialog [grid]" {onclick} role="dialog">
     <Paper {...props} />
 </wind-wrapper>

package/src/layout/drawer.svelte

@@ -31,26 +31,18 @@
 </script>
 
 <script>
-    import { getContext } from "svelte"
-
     import wsx from "../wsx.js"
 
     import Paper from "./paper.svelte"
-    import { modalContext } from "./modal.svelte"
+    import { modalAnimTime } from "./modal.svelte"
 
     const {
         height,
         type = "menu",
-        children,
-        header,
-        footer,
-        content,
         ...rest
     } = $props()
-    // export let height
-    // export let type = "menu"
 
-    const animTime = getContext(modalContext)
+    const animTime = modalAnimTime()
 
     // When Svelte removes things from the DOM they are removed immediately
     // unless Svelte has a transition running. Adding this prevents the drawer
@@ -74,5 +66,5 @@
 <!-- svelte-ignore a11y_click_events_have_key_events -->
 <wind-drawer-container use:wsx={container} {onclick} role="menubar"
 transition:trick>
-    <Paper r="0px" {...rest} {header} {footer} {content} {children} />
+    <Paper r="0px" {...rest} />
 </wind-drawer-container>

package/src/layout/modal.svelte

@@ -1,29 +1,34 @@
 <script module>
+    import { getContext } from "svelte"
+
     let topClose = null
-    export const modalContext = Symbol("modal context")
+    const modalAnimTimeSymbol = Symbol("modal animation time")
+    const modalContextSymbol = Symbol("modal context")
+
+    export const modalAnimTime = () => getContext(modalAnimTimeSymbol)
+    export const modalContext = () => getContext(modalContextSymbol)
 </script>
 
 <script>
-    import { tick, setContext } from "svelte"
+    import { setContext } from "svelte"
     import { writable } from "svelte/store"
 
     import wsx from "../wsx.js"
+    import { frameDelay } from "../internals.js"
 
     const {
-        component,
+        children,
+        cancelable = false,
         animTime = "200ms"
     } = $props()
 
-    let modalProps = $state(null)
     let resolver = $state(null)
-    let displayed = $state(null)
+    let shown = $state(false)
 
     const close = (value) => {
         resolver(value)
         resolver = null
-        modalProps = null
-        Component = null
-        // visible.checked = false
+        shown = false
         if (topClose !== close) {
             return
         }
@@ -32,39 +37,35 @@
     const closeToTop = (value) => {
         topClose(value)
     }
-    const cancel = () => displayed.cancel?.()
+    const cancel = () => {
+        if (cancelable === false) {
+            return
+        }
+        close(null)
+    }
 
     export const show = (props) => new Promise(
-        async (resolve) => {
-            modalProps = props ?? {}
+        (resolve) => {
             topClose = topClose ?? close
-            Component = component
-            await tick()
-            setTimeout(
-                () => resolver = resolve,
-                0
-            )
+            resolver = resolve
+            frameDelay(1, () => shown = true)
         }
     )
 
-    // let visible = null
     const animationTime = writable(animTime)
     const wind = $derived({
         "@anim-time": $animationTime,
-        $show: resolver !== null,
+        $show: shown === true,
     })
-    let Component = $state(null)
-    setContext(modalContext, animationTime)
+    setContext(modalAnimTimeSymbol, animationTime)
+    setContext(modalContextSymbol, { close, closeToTop })
 </script>
 
 <!-- svelte-ignore a11y_click_events_have_key_events -->
 <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<!-- svelte-ignore a11y_interactive_supports_focus -->
 <ws-modal onclick={cancel} role="dialog" use:wsx={wind}>
-    <Component
-    bind:this={displayed}
-    this={component}
-    {...modalProps}
-    {close}
-    {closeToTop}
-    />
+    {#if resolver !== null}
+        {@render children()}
+    {/if}
 </ws-modal>

package/src/layout/paper.svelte

@@ -16,17 +16,6 @@
         ...rest
     } = $props()
 
-    // $: props = Object.entries($$restProps).reduce(
-    //     (p, [key, value]) => {
-    //         const [target, name] =
-    //             (key.startsWith("l!") === true)
-    //             ? [ p.layout, key.slice(2) ]
-    //             : [ p.paper, key ]
-    //         target[name] = value
-    //         return p
-    //     },
-    //     { layout: {}, paper: {} }
-    // )
     const props = $derived(
         splitProps(rest, "l!")
     )

package/src/props.js

@@ -1,24 +1,24 @@
-export const filterProps = (props, filter) => Object.entries(props).reduce(
-    (p, [name, value]) => {
-        if (name.startsWith(filter) === true) {
-            p[name.slice(filter.length)] = value
-        }
-        return p
-    },
-    {}
-)
-
-export const splitProps = (props, ...splits) => Object.entries(props).reduce(
-    (groups, [name, value]) => {
-        for (const split of splits) {
-            if (name.startsWith(split) === true) {
-                groups[split] = groups[split] ?? {}
-                groups[split][name.slice(split.length)] = value
-                return groups
-            }
-        }
-        groups.rest[name] = value
-        return groups
-    },
-    { rest: {} }
-)
+export const filterProps = (props, filter) => Object.entries(props).reduce(
+    (p, [name, value]) => {
+        if (name.startsWith(filter) === true) {
+            p[name.slice(filter.length)] = value
+        }
+        return p
+    },
+    {}
+)
+
+export const splitProps = (props, ...splits) => Object.entries(props).reduce(
+    (groups, [name, value]) => {
+        for (const split of splits) {
+            if (name.startsWith(split) === true) {
+                groups[split] = groups[split] ?? {}
+                groups[split][name.slice(split.length)] = value
+                return groups
+            }
+        }
+        groups.rest[name] = value
+        return groups
+    },
+    { rest: {} }
+)

package/src/routing/route.svelte

@@ -58,8 +58,5 @@
         {:else}
             {@render (content ?? children)?.(routeInfo, props)}
         {/if}
-        <!-- <slot {routeInfo}>
-            <svelte:component this={component} {...props} {routeInfo} />
-        </slot> -->
     {/key}
 {/if}

package/src/routing/routing.svelte.js

@@ -1,7 +1,7 @@
 import { onMount, getContext } from "svelte"
 import { writable, derived } from "svelte/store"
 
-import { hash } from "../hash.svelte.js"
+import { hash } from "../hash.js"
 
 export const route = derived(
     hash,
@@ -15,12 +15,6 @@ export const route = derived(
 route.set = (path) => {
     hash.set(path)
 }
-// export const route = $derived(
-//     hash.startsWith("/") === false ? `/${hash}` : hash
-// )
-// $effect(
-//     () => hash = route
-// )
 
 export const ctx = {
     router: Symbol("Router Context"),

package/src/wind.js

@@ -0,0 +1,4 @@
+import "./custom-macros.js"
+import ws from "@axel669/windstorm"
+
+export default ws

package/src/wsx.js

@@ -1,4 +1,4 @@
-import ws from "@axel669/windstorm"
+import ws from "./wind.js"
 
 export const none = Symbol("none")
 export default (node, props) => {

package/src/async/load-zone.svelte

@@ -1,22 +0,0 @@
-<svelte:options immutable />
-
-<script>
-    import Spinner from "../spinner/hexagon-spinner.svelte"
-    export let source = null
-    export let message = "Loading"
-</script>
-
-{#if source !== null}
-    {#await source}
-        <slot name="loading">
-            <ws-flex ws-x="[fl-center]">
-                <span>{message}</span>
-                <Spinner size="100px" />
-            </ws-flex>
-        </slot>
-    {:then result}
-        <slot {result} />
-    {:catch error}
-        <slot name="error" {error} />
-    {/await}
-{/if}