@axel669/zephyr 0.4.4-beta.0 → 0.4.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axel669/zephyr",
-  "version": "0.4.4-beta.0",
+  "version": "0.4.6",
   "description": "",
   "main": "src/index.mjs",
   "type": "module",
@@ -13,12 +13,12 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@axel669/windstorm": "0.4.4"
+    "@axel669/rollup-copy-static": "^0.2.0",
+    "@axel669/windstorm": "0.4.6"
   },
   "devDependencies": {
     "@axel669/asuid": "^0.2.1",
     "@axel669/ipsen": "0.4.0-beta.7",
-    "@axel669/rollup-copy-static": "^0.1.2",
     "@axel669/rollup-html-input": "^0.1.2",
     "@rollup/plugin-node-resolve": "^15.0.2",
     "@rollup/plugin-terser": "^0.4.0",

package/src/composed/element-toast.svelte

@@ -0,0 +1,96 @@
+<svelte:options immutable />
+
+<script context="module">
+    const genID = () => `${Date.now()}:${Math.random().toString(16)}`
+
+    const delays = {}
+    const delay = ({time, action, id}) => {
+        const trigger = () => {
+            const info = delays[id]
+            clearTimeout(info.id)
+            action()
+            delete delays[id]
+        }
+        const timeoutID = setTimeout(trigger, time)
+        delays[id] = { trigger, id: timeoutID }
+    }
+    delay.trigger = (id) => delays[id].trigger()
+
+    const macros = {
+        top: {
+            "-y": "100%",
+            flex: "column-reverse",
+        },
+        bottom: {
+            "y": "100%",
+            flex: "column"
+        },
+    }
+</script>
+
+<script>
+    import { createEventDispatcher } from "svelte"
+    import { fade } from "svelte/transition"
+
+    import { eventHandler$ } from "../handler$.mjs"
+    import wsx from "../wsx.mjs"
+
+    import Toaster from "../info/toaster.svelte"
+
+    import ToastMessage from "./toast/message.svelte"
+
+    export let component = ToastMessage
+    export let position = "top"
+
+    let items = []
+
+    const dispatch = createEventDispatcher()
+    const act = eventHandler$(
+        (evt, id, props) => {
+            delay.trigger(id)
+            dispatch(
+                "action",
+                { value: evt.detail, props }
+            )
+        }
+    )
+
+    export const show = (duration, props) => {
+        const id = genID()
+        items = [...items, { id, props }]
+        delay({
+            action: () => items = items.filter(
+                item => item.id !== id
+            ),
+            time: duration,
+            id,
+        })
+    }
+    export const clear = () => items = []
+
+
+    $: wind = {
+        gap: "8px",
+        pos: "absolute",
+        x: "50%",
+        z: "50",
+        tf: "translateX(-50%)",
+        ...macros[position],
+        ...$$restProps,
+    }
+</script>
+
+<zephyr-element-toaster ws-x="[disp inline-grid] [pos relative]">
+    <slot {show} />
+    <zephyr-element-toast-messages use:wsx={wind}>
+        {#each items as {props, id} (id)}
+            <zephyr-toast-wrapper ws-x="[grid]" transition:fade={{duration: 200}}>
+                <svelte:component
+                this={component}
+                {...props}
+                on:action={act(id, props)}
+                />
+            </zephyr-toast-wrapper>
+        {/each}
+    </zephyr-element-toast-messages>
+</zephyr-element-toaster>

package/src/control/button.svelte

@@ -4,20 +4,28 @@
     import wsx from "../wsx.mjs"
     import variant from "../variant.mjs"
 
-    export let color = "@default"
+    export let color = false
     export let compact = false
+    export let ground = false
     export let disabled
 
     export let fill = false
     export let outline = false
     export let flat = false
 
-    $: type = variant({ fill, outline, flat })
+    // $: type = variant({ fill, outline, flat })
+    $: type = variant(
+        "$flat",
+        { fill },
+        { outline },
+        { flat }
+    )
 
     $: wind = {
         [type]: true,
         "$color": color,
         $compact: compact,
+        $ground: ground,
         ...$$restProps
     }
 </script>

package/src/control/input.svelte

@@ -1,89 +1,101 @@
-<svelte:options immutable />
-
-<script>
-    import wsx from "../wsx.mjs"
-
-    export let type = "text"
-
-    export let flat = false
-    export let label
-    export let color = "@default"
-    export let disabled
-
-    export let value = ""
-    export let autocompleteOptions = null
-
-    let input = null
-    export const focus = () => input.focus()
-
-    const id =
-        (autocompleteOptions === null)
-        ? null
-        : `${Math.random().toString(16)}_${Date.now()}`
-
-    const update = (evt) => value = evt.target.value
-
-    $: restKeys = Object.keys($$restProps)
-    $: props = restKeys.reduce(
-        (props, key) => {
-            const [target, name] =
-                (key.startsWith("i-") === true)
-                ? [props.input, key.slice(2)]
-                : [props.wind, key]
-            target[name] = $$restProps[key]
-            return props
-        },
-        {wind: {}, input: {}}
-    )
-
-    $: wind = {
-        "$flat": flat,
-        "@@control": true,
-        "$color": color,
-        ...props.wind,
-    }
-
-    $: tag = (type === "area") ? "textarea" : "input"
-</script>
-
-<label use:wsx={wind}>
-    {#if label}
-        <span use:wsx={{ "$label": true }}>{label}</span>
-    {/if}
-    <svelte:element
-        this={tag}
-        {...props.input}
-        {disabled}
-        {type}
-        {value}
-        list={id}
-        on:focus
-        on:blur
-        on:input={update}
-        bind:this={input}
-    />
-
-    {#if $$slots.start}
-        <span use:wsx={{ "$start": true }}>
-            <slot name="start" />
-        </span>
-    {/if}
-    {#if $$slots.end}
-        <span use:wsx={{ "$end": true }}>
-            <slot name="end" />
-        </span>
-    {/if}
-    {#if $$slots.extra}
-        <span use:wsx={{ "$extra": true }}>
-            <slot name="extra" />
-        </span>
-    {/if}
-
-    {#if autocompleteOptions !== null}
-        <datalist {id}>
-            {#each autocompleteOptions as value}
-                <option {value} />
-            {/each}
-        </datalist>
-    {/if}
-</label>
+<svelte:options immutable />
+
+<script>
+    import wsx, { none } from "../wsx.mjs"
+    import variant from "../variant.mjs"
+
+    export let type = "text"
+
+    export let flat = false
+    export let lined = false
+    export let linedFill = false
+    export let outline = false
+    export let label
+    export let color = "@default"
+    export let disabled
+
+    export let value = ""
+    export let autocompleteOptions = null
+
+    let input = null
+    export const focus = () => input.focus()
+
+    const id =
+        (autocompleteOptions === null)
+        ? null
+        : `${Math.random().toString(16)}_${Date.now()}`
+
+    const update = (evt) => value = evt.target.value
+
+    $: restKeys = Object.keys($$restProps)
+    $: props = restKeys.reduce(
+        (props, key) => {
+            const [target, name] =
+                (key.startsWith("i-") === true)
+                ? [props.input, key.slice(2)]
+                : [props.wind, key]
+            target[name] = $$restProps[key]
+            return props
+        },
+        {wind: {}, input: {}}
+    )
+
+    $: variantStyle = variant(
+        none,
+        { outline },
+        { linedFill },
+        { lined },
+        { flat }
+    )
+
+    $: wind = {
+        [variantStyle]: true,
+        "@@control": true,
+        "$color": color,
+        ...props.wind,
+    }
+
+    $: tag = (type === "area") ? "textarea" : "input"
+</script>
+
+<label use:wsx={wind}>
+    {#if label}
+        <span use:wsx={{ "$label": true }}>{label}</span>
+    {/if}
+    <svelte:element
+        this={tag}
+        {...props.input}
+        {disabled}
+        {type}
+        {value}
+        list={id}
+        on:focus
+        on:blur
+        on:input={update}
+        bind:this={input}
+    />
+
+    {#if $$slots.start}
+        <span use:wsx={{ "$start": true }}>
+            <slot name="start" />
+        </span>
+    {/if}
+    {#if $$slots.end}
+        <span use:wsx={{ "$end": true }}>
+            <slot name="end" />
+        </span>
+    {/if}
+    {#if $$slots.extra}
+        <span use:wsx={{ "$extra": true }}>
+            <slot name="extra" />
+        </span>
+    {/if}
+
+    {#if autocompleteOptions !== null}
+        <datalist {id}>
+            {#each autocompleteOptions as value}
+                <option {value} />
+            {/each}
+        </datalist>
+    {/if}
+</label>

package/src/control/label.svelte

@@ -6,6 +6,7 @@
 
     export let color = false
     export let compact = false
+    export let ground = false
     export let disabled
 
     export let fill = false
@@ -16,7 +17,12 @@
     export { _for as for }
     export let button = false
 
-    $: type = variant({ fill, outline, flat })
+    $: type = variant(
+        "$flat",
+        { fill },
+        { outline },
+        { flat }
+    )
     $: baseStyles =
         (button === true)
         ? {
@@ -24,6 +30,7 @@
             [type]: true,
             "$color": color,
             $compact: compact,
+            $ground: ground,
         }
         : {}
 

package/src/control/link.svelte

@@ -1,32 +1,41 @@
-<svelte:options immutable />
-
-<script>
-    import wsx from "../wsx.mjs"
-    import variant from "../variant.mjs"
-
-    export let button = false
-    export let color = false
-
-    export let href = ""
-    export let rel = "noreferrer"
-    export let target = null
-
-    export let fill = false
-    export let outline = false
-    export let flat = false
-
-    export let disabled = null
-
-    $: type = variant({ fill, outline, flat })
-
-    $: wind = {
-        "@@button": button,
-        [type]: true,
-        "$color": color,
-        ...$$restProps
-    }
-</script>
-
-<a {href} {target} {rel} disabled={disabled || null} use:wsx={wind} on:click>
-    <slot />
-</a>
+<svelte:options immutable />
+
+<script>
+    import wsx from "../wsx.mjs"
+    import variant from "../variant.mjs"
+
+    export let button = false
+    export let color = false
+    export let compact = false
+    export let ground = false
+
+    export let href = ""
+    export let rel = "noreferrer"
+    export let target = null
+
+    export let fill = false
+    export let outline = false
+    export let flat = false
+
+    export let disabled = null
+
+    $: type = variant(
+        "$flat",
+        { fill },
+        { outline },
+        { flat }
+    )
+
+    $: wind = {
+        "@@button": button,
+        [type]: true,
+        "$color": color,
+        $compact: compact,
+        $ground: ground,
+        ...$$restProps
+    }
+</script>
+
+<a {href} {target} {rel} disabled={disabled || null} use:wsx={wind} on:click>
+    <slot />
+</a>

package/src/data-display/popover.svelte

@@ -1,25 +1,25 @@
-<svelte:options immutable />
-
-<script>
-    import { fade } from "svelte/transition"
-    import wsx from "../wsx.mjs"
-
-    let visible = false
-    const show = () => visible = true
-    const hide = () => visible = false
-    const anim = { duration: 250 }
-
-    $: wind = {
-        $show: true,
-        ...$$restProps,
-    }
-</script>
-
-<ws-popover use:wsx={wind}>
-    <slot {show} />
-    {#if visible}
-        <wind-content ws-x="[$content] [inset 0px]" transition:fade={anim}>
-            <slot name="content" {hide} />
-        </wind-content>
-    {/if}
-</ws-popover>
+<svelte:options immutable />
+
+<script>
+    import { fade } from "svelte/transition"
+    import wsx from "../wsx.mjs"
+
+    let visible = false
+    const show = () => visible = true
+    const hide = () => visible = false
+    const anim = { duration: 250 }
+
+    $: wind = {
+        $show: true,
+        ...$$restProps,
+    }
+</script>
+
+<ws-popover use:wsx={wind}>
+    <slot {show} />
+    {#if visible}
+        <wind-content ws-x="[$content] [inset 0px]" transition:fade={anim}>
+            <slot name="content" {hide} />
+        </wind-content>
+    {/if}
+</ws-popover>

package/src/data-display/progress.svelte

@@ -1,27 +1,21 @@
-<svelte:options immutable />
-
-<script>
-    import wsx from "../wsx.mjs"
-
-    export let value = 0
-    export let max = 1
-    export let color = "default"
-    export let outline = false
-    export let row = false
-    export let label = null
-
-    $: wind = {
-        "@@progress": true,
-        "$outline": outline,
-        "$color": color,
-        $row: row,
-        ...$$restProps,
-    }
-</script>
-
-<label use:wsx={wind}>
-    {#if label}
-        <span ws-x="[$progress-label] [t.ws nowrap]">{label}</span>
-    {/if}
-    <progress {value} {max} />
-</label>
+<svelte:options immutable />
+
+<script>
+    import wsx from "../wsx.mjs"
+
+    export let value = 0
+    export let min = 0
+    export let max = 1
+    export let buffer = 0
+    export let busy = false
+    export let color = "@default"
+
+    $: wind = {
+        "$color": color,
+        ...$$restProps,
+    }
+
+    $: busyStatus = (busy === true) ? { busy: true } : {}
+</script>
+
+<ws-progress use:wsx={wind} {...busyStatus} {min} {max} {value} {buffer} />

package/src/hash.js

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

package/src/index.mjs

@@ -40,6 +40,7 @@ export { default as Confirm } from "./dialogs/confirm.svelte"
 
 export { default as DataTable } from "./composed/data-table.svelte"
 export { default as TH } from "./composed/data-table/th.svelte"
+export { default as ElementToast } from "./composed/element-toast.svelte"
 export { default as EntryButton } from "./composed/entry-button.svelte"
 export { default as Form } from "./composed/form.svelte"
 export { default as Toast } from "./composed/toast.svelte"

package/src/info/notification.svelte

@@ -1,28 +1,28 @@
-<script>
-    import wsx from "../wsx.mjs"
-
-    export let color = false
-
-    $: wind = {
-        "$color": color,
-        ...$$restProps,
-    }
-</script>
-
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-interactive-supports-focus -->
-<ws-notification use:wsx={wind} on:click role="button">
-    {#if $$slots.start}
-        <div ws-x="[$start] [grid]">
-            <slot name="start" />
-        </div>
-    {/if}
-    <div ws-x="[$notif-text]">
-        <slot />
-    </div>
-    {#if $$slots.end}
-        <div ws-x="[$end] [grid]">
-            <slot name="end" />
-        </div>
-    {/if}
-</ws-notification>
+<script>
+    import wsx from "../wsx.mjs"
+
+    export let color = false
+
+    $: wind = {
+        "$color": color,
+        ...$$restProps,
+    }
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-interactive-supports-focus -->
+<ws-notification use:wsx={wind} on:click role="button">
+    {#if $$slots.start}
+        <div ws-x="[$start] [grid]">
+            <slot name="start" />
+        </div>
+    {/if}
+    <div ws-x="[$notif-text]">
+        <slot />
+    </div>
+    {#if $$slots.end}
+        <div ws-x="[$end] [grid]">
+            <slot name="end" />
+        </div>
+    {/if}
+</ws-notification>

package/src/info/titlebar.svelte

@@ -11,7 +11,6 @@
     }
     $: wind = {
         ...$$restProps,
-        "gr.cols": "auto 1fr auto"
     }
 </script>
 

package/src/layout/drawer.svelte

@@ -1,49 +1,49 @@
-<svelte:options immutable />
-
-<script context="module">
-    const defs = {
-        select: {
-            "@@select": true,
-            "w.min": "35vw",
-            grid: true,
-            over: "hidden"
-        },
-        menu: {
-            "@@menu": true,
-        },
-        action: {
-            "@@action": true,
-        }
-    }
-</script>
-
-<script>
-    import wsx from "../wsx.mjs"
-
-    import Paper from "./paper.svelte"
-
-    export let height
-    export let type = "menu"
-
-    const trick = (node, options) => ({
-        delay: 0,
-        duration: 250,
-        css: () => "",
-    })
-
-    $: container = {
-        ...defs[type],
-        h: (type === "select") ? height : "100%",
-        grid: true,
-    }
-</script>
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-interactive-supports-focus -->
-<wind-drawer-container use:wsx={container} on:click|stopPropagation
-role="menubar" transition:trick>
-    <Paper r="0px" {...$$restProps}>
-        <slot name="header" slot="header" />
-        <slot />
-        <slot name="footer" slot="footer" />
-    </Paper>
-</wind-drawer-container>
+<svelte:options immutable />
+
+<script context="module">
+    const defs = {
+        select: {
+            "@@select": true,
+            "w.min": "35vw",
+            grid: true,
+            over: "hidden"
+        },
+        menu: {
+            "@@menu": true,
+        },
+        action: {
+            "@@action": true,
+        }
+    }
+</script>
+
+<script>
+    import wsx from "../wsx.mjs"
+
+    import Paper from "./paper.svelte"
+
+    export let height
+    export let type = "menu"
+
+    const trick = (node, options) => ({
+        delay: 0,
+        duration: 250,
+        css: () => "",
+    })
+
+    $: container = {
+        ...defs[type],
+        h: (type === "select") ? height : "100%",
+        grid: true,
+    }
+</script>
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-interactive-supports-focus -->
+<wind-drawer-container use:wsx={container} on:click|stopPropagation
+role="menubar" transition:trick>
+    <Paper r="0px" {...$$restProps}>
+        <slot name="header" slot="header" />
+        <slot />
+        <slot name="footer" slot="footer" />
+    </Paper>
+</wind-drawer-container>

package/src/layout/paper.svelte

@@ -1,56 +1,56 @@
-<svelte:options immutable />
-
-<script>
-    import Flex from "./flex.svelte"
-    import wsx from "../wsx.mjs"
-
-    export let color
-    export let card = false
-    export let square = false
-    export let layout = Flex
-    export let scrollable = true
-
-    $: 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: {} }
-    )
-
-    $: layoutProps = {
-        over: scrollable ? "auto" : false,
-        $content: true,
-        ...props.layout,
-    }
-    $: wind = {
-        "$color": color,
-        "$outline": card,
-        r: square && "0px",
-        ...props.paper,
-    }
-</script>
-
-<ws-paper use:wsx={wind}>
-    {#if $$slots.header}
-        <div ws-x="[$header] [grid] [p 0px]">
-            <slot name="header" />
-        </div>
-    {/if}
-    {#if $$slots.content}
-        <slot name="content" />
-    {:else}
-        <svelte:component this={layout} {...layoutProps}>
-            <slot />
-        </svelte:component>
-    {/if}
-    {#if $$slots.footer}
-        <div ws-x="[$footer] [grid] [p 0px]">
-            <slot name="footer" />
-        </div>
-    {/if}
-</ws-paper>
+<svelte:options immutable />
+
+<script>
+    import Flex from "./flex.svelte"
+    import wsx from "../wsx.mjs"
+
+    export let color
+    export let card = false
+    export let square = false
+    export let layout = Flex
+    export let scrollable = true
+
+    $: 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: {} }
+    )
+
+    $: layoutProps = {
+        over: scrollable ? "auto" : false,
+        $content: true,
+        ...props.layout,
+    }
+    $: wind = {
+        "$color": color,
+        "$outline": card,
+        r: square && "0px",
+        ...props.paper,
+    }
+</script>
+
+<ws-paper use:wsx={wind}>
+    {#if $$slots.header}
+        <div ws-x="[$header] [grid] [p 0px]">
+            <slot name="header" />
+        </div>
+    {/if}
+    {#if $$slots.content}
+        <slot name="content" />
+    {:else}
+        <svelte:component this={layout} {...layoutProps}>
+            <slot />
+        </svelte:component>
+    {/if}
+    {#if $$slots.footer}
+        <div ws-x="[$footer] [grid] [p 0px]">
+            <slot name="footer" />
+        </div>
+    {/if}
+</ws-paper>

package/src/routing/route.svelte

@@ -1,48 +1,48 @@
-<script context="module">
-    const urlPattern = (path, exact) => {
-        const regexSource = path.replace(
-            /:([\w\-]+)/g,
-            (_, name) => `\(?<${name}>[\\w\\-\\%]+\)`
-        )
-        if (exact === true) {
-            return new RegExp(`(?<_path>^${regexSource})$`)
-        }
-        return new RegExp(`(?<_path>^${regexSource})(((?<=\\/)[\\w\\-\\%])|\\/|$)`)
-    }
-</script>
-
-<script>
-    import { getContext, setContext } from "svelte"
-
-    import { ctx, resolve, route } from "./routing.js"
-
-    export let path = ""
-    export let component = null
-    export let props = {}
-    export let exact = false
-
-    const parent = getContext(ctx.parent) ?? "/"
-    const fullPath = resolve(parent, path)
-
-    setContext(ctx.parent, fullPath)
-    $: pattern = urlPattern(fullPath, exact)
-    $: match = $route.match(pattern)
-    $: routeParams = Object.fromEntries(
-        Object.entries({ ...match?.groups }).map(
-            ([key, value]) => [key, decodeURIComponent(value)]
-        )
-    )
-    $: routeInfo = {
-        params: routeParams,
-        match: routeParams._path,
-        route: $route,
-    }
-</script>
-
-{#if match !== null}
-    {#key routeParams._path}
-        <slot {routeInfo}>
-            <svelte:component this={component} {...props} {routeInfo} />
-        </slot>
-    {/key}
-{/if}
+<script context="module">
+    const urlPattern = (path, exact) => {
+        const regexSource = path.replace(
+            /:([\w\-]+)/g,
+            (_, name) => `\(?<${name}>[\\w\\-\\%]+\)`
+        )
+        if (exact === true) {
+            return new RegExp(`(?<_path>^${regexSource})$`)
+        }
+        return new RegExp(`(?<_path>^${regexSource})(((?<=\\/)[\\w\\-\\%])|\\/|$)`)
+    }
+</script>
+
+<script>
+    import { getContext, setContext } from "svelte"
+
+    import { ctx, resolve, route } from "./routing.js"
+
+    export let path = ""
+    export let component = null
+    export let props = {}
+    export let exact = false
+
+    const parent = getContext(ctx.parent) ?? "/"
+    const fullPath = resolve(parent, path)
+
+    setContext(ctx.parent, fullPath)
+    $: pattern = urlPattern(fullPath, exact)
+    $: match = $route.match(pattern)
+    $: routeParams = Object.fromEntries(
+        Object.entries({ ...match?.groups }).map(
+            ([key, value]) => [key, decodeURIComponent(value)]
+        )
+    )
+    $: routeInfo = {
+        params: routeParams,
+        match: routeParams._path,
+        route: $route,
+    }
+</script>
+
+{#if match !== null}
+    {#key routeParams._path}
+        <slot {routeInfo}>
+            <svelte:component this={component} {...props} {routeInfo} />
+        </slot>
+    {/key}
+{/if}

package/src/routing/routing.js

@@ -1,62 +1,62 @@
-import { onMount, getContext } from "svelte"
-import { writable, derived } from "svelte/store"
-
-import { hash } from "../hash.js"
-
-export const route = derived(
-    hash,
-    hash => {
-        if (hash.startsWith("/") === false) {
-            return `/${hash}`
-        }
-        return hash
-    }
-)
-
-export const ctx = {
-    router: Symbol("Router Context"),
-    parent: Symbol("Route Parent"),
-    layout: Symbol("Layout Context"),
-}
-export const resolve = (base, part) => {
-    if (part === "" || part === "/") {
-        return base
-    }
-    if (base === "/" || base === undefined) {
-        return `/${part}`
-    }
-    if (part.startsWith("/") === true) {
-        return `${base}${part}`
-    }
-    return `${base}/${part}`
-}
-export const relpath = (path) => {
-    const base = getContext(ctx.parent)
-    return `#${resolve(base, path)}`
-}
-
-const emptyStack = Symbol("empty stack")
-export const stackStore = (initial = stackStore.empty) => {
-    const stack = [writable(initial)]
-    const current = writable(initial)
-    let attachment = stack[0].subscribe(current.set)
-
-    return {
-        subscribe: current.subscribe,
-        push: (initial) => {
-            const item = writable(initial)
-            onMount(() => {
-                stack.push(item)
-                attachment()
-                attachment = item.subscribe(current.set)
-                return () => {
-                    stack.pop()
-                    attachment()
-                    attachment = stack[stack.length - 1].subscribe(current.set)
-                }
-            })
-            return item
-        }
-    }
-}
-stackStore.empty = emptyStack
+import { onMount, getContext } from "svelte"
+import { writable, derived } from "svelte/store"
+
+import { hash } from "../hash.js"
+
+export const route = derived(
+    hash,
+    hash => {
+        if (hash.startsWith("/") === false) {
+            return `/${hash}`
+        }
+        return hash
+    }
+)
+
+export const ctx = {
+    router: Symbol("Router Context"),
+    parent: Symbol("Route Parent"),
+    layout: Symbol("Layout Context"),
+}
+export const resolve = (base, part) => {
+    if (part === "" || part === "/") {
+        return base
+    }
+    if (base === "/" || base === undefined) {
+        return `/${part}`
+    }
+    if (part.startsWith("/") === true) {
+        return `${base}${part}`
+    }
+    return `${base}/${part}`
+}
+export const relpath = (path) => {
+    const base = getContext(ctx.parent)
+    return `#${resolve(base, path)}`
+}
+
+const emptyStack = Symbol("empty stack")
+export const stackStore = (initial = stackStore.empty) => {
+    const stack = [writable(initial)]
+    const current = writable(initial)
+    let attachment = stack[0].subscribe(current.set)
+
+    return {
+        subscribe: current.subscribe,
+        push: (initial) => {
+            const item = writable(initial)
+            onMount(() => {
+                stack.push(item)
+                attachment()
+                attachment = item.subscribe(current.set)
+                return () => {
+                    stack.pop()
+                    attachment()
+                    attachment = stack[stack.length - 1].subscribe(current.set)
+                }
+            })
+            return item
+        }
+    }
+}
+stackStore.empty = emptyStack

package/src/routing/title.svelte

@@ -1,26 +1,26 @@
-<script context="module">
-    import { writable } from "svelte/store"
-
-    import { stackStore } from "./routing.js"
-
-    // const stack = writable([])
-    const stack = stackStore()
-
-    const updateTitle = (format, data) => {
-        if (format === null || data === stackStore.empty) {
-            return
-        }
-
-        document.title = format(data)
-    }
-</script>
-
-<script>
-    import { onMount } from "svelte"
-    export let data = ""
-    export let format = null
-
-    stack.push(data)
-
-    $: updateTitle(format, $stack)
-</script>
+<script context="module">
+    import { writable } from "svelte/store"
+
+    import { stackStore } from "./routing.js"
+
+    // const stack = writable([])
+    const stack = stackStore()
+
+    const updateTitle = (format, data) => {
+        if (format === null || data === stackStore.empty) {
+            return
+        }
+
+        document.title = format(data)
+    }
+</script>
+
+<script>
+    import { onMount } from "svelte"
+    export let data = ""
+    export let format = null
+
+    stack.push(data)
+
+    $: updateTitle(format, $stack)
+</script>

package/src/variant.mjs

@@ -1,12 +1,10 @@
-export default ({ flat, fill, outline }, def = "$flat") => {
-    if (outline === true) {
-        return "$outline"
-    }
-    if (fill === true) {
-        return "$fill"
-    }
-    if (flat === true) {
-        return "$flat"
+export default (def, ...variants) => {
+    for (const variant of variants) {
+        const [entry] = Object.entries(variant)
+        const [key, value] = entry
+        if (value === true) {
+            return `$${key.replace(/[A-Z]/g, (s) => `-${s.toLocaleLowerCase()}`)}`
+        }
     }
     return def
 }

package/src/wsx.mjs

@@ -1,25 +1,29 @@
-import ws from "@axel669/windstorm"
-
-export default (node, props) => {
-    const update = (props) => {
-        const { slot = null, ...goodProps } = props ?? {}
-        if (goodProps === null || goodProps === undefined) {
-            node.setAttribute("ws-x", null)
-            return
-        }
-        const formatted = Object.entries(goodProps).reduce(
-            (props, [key, value]) => {
-                const realKey = key.replaceAll("--", ":").replace(/^\-/, "$")
-                props[realKey] = value
-                return props
-            },
-            {}
-        )
-        node.setAttribute(
-            "ws-x",
-            ws.x(formatted)
-        )
-    }
-    update(props)
-    return { update }
-}
+import ws from "@axel669/windstorm"
+
+export const none = Symbol("none")
+export default (node, props) => {
+    const update = (props) => {
+        const { slot = null, ...goodProps } = props ?? {}
+        if (goodProps === null || goodProps === undefined) {
+            node.setAttribute("ws-x", null)
+            return
+        }
+        const formatted = Object.entries(goodProps).reduce(
+            (props, [key, value]) => {
+                if (key === none) {
+                    return props
+                }
+                const realKey = key.replace(/^!/, "").replaceAll("_", ":")
+                props[realKey] = value
+                return props
+            },
+            {}
+        )
+        node.setAttribute(
+            "ws-x",
+            ws.x(formatted)
+        )
+    }
+    update(props)
+    return { update }
+}